From acb3d8d5cd90adc96e4113030f62ee32b8c5a1d2 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Mon, 28 Oct 2024 19:57:44 -0500 Subject: [PATCH 1/6] Fix logged out user experience --- events/scripts/content-update.js | 53 +++++++++++++------------------- 1 file changed, 21 insertions(+), 32 deletions(-) diff --git a/events/scripts/content-update.js b/events/scripts/content-update.js index ad7de4ac..eca390e0 100644 --- a/events/scripts/content-update.js +++ b/events/scripts/content-update.js @@ -96,7 +96,12 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { const eventInfo = BlockMediator.get('eventData'); const checkRed = getIcon('check-circle-red'); let eventFull = false; - if (eventInfo) eventFull = eventInfo.isFull; + let allowWaitlisting = getMetadata('allow-wait-listing') === 'true'; + + if (eventInfo) { + eventFull = eventInfo.isFull; + allowWaitlisting = eventInfo.allowWaitlisting; + } const enableBtn = () => { rsvpBtn.el.classList.remove('disabled'); @@ -150,7 +155,7 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { if (!rsvpData) { if (eventFull) { - if (eventInfo?.allowWaitlisting) { + if (allowWaitlisting) { await waitlistState(); } else { await closedState(); @@ -163,9 +168,12 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { } else if (rsvpData.registrationStatus === 'waitlisted') { await waitlistedState(); } else if (!rsvpData.ok) { - // FIXME: temporary solution for ESL returning 500 on ESP 400 response if (rsvpData.error?.message === 'Request to ESP failed: Event is full') { - await closedState(); + if (allowWaitlisting) { + await waitlistState(); + } else { + await closedState(); + } } } } @@ -179,40 +187,21 @@ export function signIn(options) { window.adobeIMS?.signIn(options); } -async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs, profile) { - const { getConfig } = await import(`${miloLibs}/utils/utils.js`); +async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs) { const resp = await getEvent(getMetadata('event-id')); if (!resp) return; + const eventInfo = resp.data; BlockMediator.set('eventData', eventInfo); - if (profile?.noProfile || resp.status === 401) { - if (eventInfo?.isFull) { - const eventFullText = await miloReplaceKey(miloLibs, 'event-full-cta-text'); - updateAnalyticTag(rsvpBtn.el, eventFullText); - rsvpBtn.el.setAttribute('tabindex', -1); - rsvpBtn.el.href = ''; - rsvpBtn.el.textContent = eventFullText; - } else { - updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); - rsvpBtn.el.textContent = rsvpBtn.originalText; - rsvpBtn.el.classList.remove('disabled'); - rsvpBtn.el.setAttribute('tabindex', 0); - rsvpBtn.el.addEventListener('click', (e) => { - e.preventDefault(); - signIn(getSusiOptions(getConfig())); - }); - } - } else if (profile) { - await updateRSVPButtonState(rsvpBtn, miloLibs); + await updateRSVPButtonState(rsvpBtn, miloLibs); - BlockMediator.subscribe('rsvpData', () => { - updateRSVPButtonState(rsvpBtn, miloLibs); - }); + BlockMediator.subscribe('rsvpData', () => { + updateRSVPButtonState(rsvpBtn, miloLibs); + }); - BlockMediator.subscribe('eventData', () => { - updateRSVPButtonState(rsvpBtn, miloLibs); - }); - } + BlockMediator.subscribe('eventData', () => { + updateRSVPButtonState(rsvpBtn, miloLibs); + }); } export async function validatePageAndRedirect(miloLibs) { From bd48461c62a0b506c8d1a518b8dd0a7a35e86673 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Mon, 28 Oct 2024 20:32:21 -0500 Subject: [PATCH 2/6] update unit tests --- test/unit/scripts/content-update.test.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/test/unit/scripts/content-update.test.js b/test/unit/scripts/content-update.test.js index 9cb91769..e730a220 100644 --- a/test/unit/scripts/content-update.test.js +++ b/test/unit/scripts/content-update.test.js @@ -126,16 +126,19 @@ describe('updateRSVPButtonState', () => { originalText: 'RSVP', }; - let eventInfo = { isFull: false }; + BlockMediator.set('eventData', { isFull: false }); - await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo); + await updateRSVPButtonState(rsvpBtn, LIBS); expect(rsvpBtn.el.textContent).to.equal('RSVP'); - eventInfo = { isFull: true }; - await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo); BlockMediator.set('rsvpData', { ok: false, error: { message: 'Request to ESP failed: Event is full' } }); - await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo); + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false }); + await updateRSVPButtonState(rsvpBtn, LIBS); expect(rsvpBtn.el.classList.contains('disabled')).to.be.true; + + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true }); + await updateRSVPButtonState(rsvpBtn, LIBS); + expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; }); }); From 72492eb15e82a40fb1351b9895a2caa73d401860 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Mon, 28 Oct 2024 20:41:49 -0500 Subject: [PATCH 3/6] updated test --- events/scripts/content-update.js | 8 -------- test/unit/scripts/content-update.test.js | 21 +++++++++++++++++++-- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/events/scripts/content-update.js b/events/scripts/content-update.js index eca390e0..43550542 100644 --- a/events/scripts/content-update.js +++ b/events/scripts/content-update.js @@ -167,14 +167,6 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { await registeredState(); } else if (rsvpData.registrationStatus === 'waitlisted') { await waitlistedState(); - } else if (!rsvpData.ok) { - if (rsvpData.error?.message === 'Request to ESP failed: Event is full') { - if (allowWaitlisting) { - await waitlistState(); - } else { - await closedState(); - } - } } } diff --git a/test/unit/scripts/content-update.test.js b/test/unit/scripts/content-update.test.js index e730a220..d98dc7a7 100644 --- a/test/unit/scripts/content-update.test.js +++ b/test/unit/scripts/content-update.test.js @@ -88,7 +88,7 @@ describe('Content Update Script', () => { const buttonOriginalText = document.querySelector('a[href$="#rsvp-form-1"]').textContent; autoUpdateContent(document, miloDeps); - BlockMediator.set('rsvpData', { ok: true, data: { status: { registered: false } } }); + BlockMediator.set('rsvpData', null); expect(document.querySelector('a[href$="#rsvp-form-1"]').textContent).to.be.equal(buttonOriginalText); }); @@ -131,7 +131,6 @@ describe('updateRSVPButtonState', () => { await updateRSVPButtonState(rsvpBtn, LIBS); expect(rsvpBtn.el.textContent).to.equal('RSVP'); - BlockMediator.set('rsvpData', { ok: false, error: { message: 'Request to ESP failed: Event is full' } }); BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false }); await updateRSVPButtonState(rsvpBtn, LIBS); expect(rsvpBtn.el.classList.contains('disabled')).to.be.true; @@ -139,6 +138,24 @@ describe('updateRSVPButtonState', () => { BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true }); await updateRSVPButtonState(rsvpBtn, LIBS); expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; + + BlockMediator.set('rsvpData', { registrationStatus: 'registered' }); + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false }); + await updateRSVPButtonState(rsvpBtn, LIBS); + expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; + + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true }); + await updateRSVPButtonState(rsvpBtn, LIBS); + expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; + + BlockMediator.set('rsvpData', { registrationStatus: 'waitlisted' }); + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false }); + await updateRSVPButtonState(rsvpBtn, LIBS); + expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; + + BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true }); + await updateRSVPButtonState(rsvpBtn, LIBS); + expect(rsvpBtn.el.classList.contains('disabled')).to.be.false; }); }); From 4750d5b18ea823de8e06141d159df97b78bbe1ec Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Tue, 29 Oct 2024 09:25:35 -0500 Subject: [PATCH 4/6] fixed on profile behavior --- events/scripts/content-update.js | 150 ++++++++++++++++++------------- 1 file changed, 87 insertions(+), 63 deletions(-) diff --git a/events/scripts/content-update.js b/events/scripts/content-update.js index 43550542..5f994dce 100644 --- a/events/scripts/content-update.js +++ b/events/scripts/content-update.js @@ -69,6 +69,58 @@ function convertEccIcon(n) { }); } +function setCtaState(targetState, rsvpBtn, miloLibs, icon = null) { + const enableBtn = () => { + rsvpBtn.el.classList.remove('disabled'); + rsvpBtn.el.setAttribute('tabindex', 0); + }; + + const disableBtn = () => { + rsvpBtn.el.setAttribute('tabindex', -1); + rsvpBtn.el.href = ''; + rsvpBtn.el.classList.add('disabled'); + }; + + const stateTrigger = { + registered: async () => { + const registeredText = await miloReplaceKey(miloLibs, 'registered-cta-text'); + enableBtn(); + updateAnalyticTag(rsvpBtn.el, registeredText); + rsvpBtn.el.textContent = registeredText; + if (icon) rsvpBtn.el.prepend(icon); + }, + waitlisted: async () => { + const waitlistedText = await miloReplaceKey(miloLibs, 'waitlisted-cta-text'); + enableBtn(); + updateAnalyticTag(rsvpBtn.el, waitlistedText); + rsvpBtn.el.textContent = waitlistedText; + if (icon) rsvpBtn.el.prepend(icon); + }, + toWaitlist: async () => { + const waitlistText = await miloReplaceKey(miloLibs, 'waitlist-cta-text'); + enableBtn(); + updateAnalyticTag(rsvpBtn.el, waitlistText); + rsvpBtn.el.textContent = waitlistText; + icon?.remove(); + }, + eventClosed: async () => { + const closedText = await miloReplaceKey(miloLibs, 'event-full-cta-text'); + disableBtn(); + updateAnalyticTag(rsvpBtn.el, closedText); + rsvpBtn.el.textContent = closedText; + icon?.remove(); + }, + default: async () => { + enableBtn(); + updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); + rsvpBtn.el.textContent = rsvpBtn.originalText; + icon?.remove(); + }, + }; + + stateTrigger[targetState](); +} + function createTag(tag, attributes, html, options = {}) { const el = document.createElement(tag); if (html) { @@ -103,70 +155,20 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { allowWaitlisting = eventInfo.allowWaitlisting; } - const enableBtn = () => { - rsvpBtn.el.classList.remove('disabled'); - rsvpBtn.el.setAttribute('tabindex', 0); - }; - - const disableBtn = () => { - rsvpBtn.el.setAttribute('tabindex', -1); - rsvpBtn.el.href = ''; - rsvpBtn.el.classList.add('disabled'); - }; - - const closedState = async () => { - const closedText = await miloReplaceKey(miloLibs, 'event-full-cta-text'); - disableBtn(); - updateAnalyticTag(rsvpBtn.el, closedText); - rsvpBtn.el.textContent = closedText; - checkRed.remove(); - }; - - const defaultState = () => { - enableBtn(); - updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); - rsvpBtn.el.textContent = rsvpBtn.originalText; - checkRed.remove(); - }; - - const registeredState = async () => { - const registeredText = await miloReplaceKey(miloLibs, 'registered-cta-text'); - enableBtn(); - updateAnalyticTag(rsvpBtn.el, registeredText); - rsvpBtn.el.textContent = registeredText; - rsvpBtn.el.prepend(checkRed); - }; - - const waitlistState = async () => { - const waitlistText = await miloReplaceKey(miloLibs, 'waitlist-cta-text'); - enableBtn(); - updateAnalyticTag(rsvpBtn.el, waitlistText); - rsvpBtn.el.textContent = waitlistText; - checkRed.remove(); - }; - - const waitlistedState = async () => { - const waitlistedText = await miloReplaceKey(miloLibs, 'waitlisted-cta-text'); - enableBtn(); - updateAnalyticTag(rsvpBtn.el, waitlistedText); - rsvpBtn.el.textContent = waitlistedText; - rsvpBtn.el.prepend(checkRed); - }; - if (!rsvpData) { if (eventFull) { if (allowWaitlisting) { - await waitlistState(); + await setCtaState('toWaitlist', rsvpBtn, miloLibs, checkRed); } else { - await closedState(); + await setCtaState('eventClosed', rsvpBtn, miloLibs, checkRed); } } else { - defaultState(); + await setCtaState('default', rsvpBtn, miloLibs); } } else if (rsvpData.registrationStatus === 'registered') { - await registeredState(); + await setCtaState('registered', rsvpBtn, miloLibs, checkRed); } else if (rsvpData.registrationStatus === 'waitlisted') { - await waitlistedState(); + await setCtaState('waitlisted', rsvpBtn, miloLibs, checkRed); } } @@ -179,21 +181,43 @@ export function signIn(options) { window.adobeIMS?.signIn(options); } -async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs) { +async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs, profile) { + const { getConfig } = await import(`${miloLibs}/utils/utils.js`); const resp = await getEvent(getMetadata('event-id')); + let allowWaitlisting = getMetadata('allow-wait-listing') === 'true'; if (!resp) return; const eventInfo = resp.data; BlockMediator.set('eventData', eventInfo); - await updateRSVPButtonState(rsvpBtn, miloLibs); + if (profile?.noProfile || resp.status === 401) { + if (eventInfo && eventInfo.isFull) { + allowWaitlisting = eventInfo.allowWaitlisting; + if (allowWaitlisting) { + await setCtaState('toWaitlist', rsvpBtn, miloLibs); + } else { + await setCtaState('eventClosed', rsvpBtn, miloLibs); + } + } else { + updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); + rsvpBtn.el.textContent = rsvpBtn.originalText; + rsvpBtn.el.classList.remove('disabled'); + rsvpBtn.el.setAttribute('tabindex', 0); + rsvpBtn.el.addEventListener('click', (e) => { + e.preventDefault(); + signIn(getSusiOptions(getConfig())); + }); + } + } else if (profile) { + await updateRSVPButtonState(rsvpBtn, miloLibs); - BlockMediator.subscribe('rsvpData', () => { - updateRSVPButtonState(rsvpBtn, miloLibs); - }); + BlockMediator.subscribe('rsvpData', () => { + updateRSVPButtonState(rsvpBtn, miloLibs); + }); - BlockMediator.subscribe('eventData', () => { - updateRSVPButtonState(rsvpBtn, miloLibs); - }); + BlockMediator.subscribe('eventData', () => { + updateRSVPButtonState(rsvpBtn, miloLibs); + }); + } } export async function validatePageAndRedirect(miloLibs) { From dd0e5db9aa81405cdb912b799fcccc211fd38d9b Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Tue, 29 Oct 2024 09:31:57 -0500 Subject: [PATCH 5/6] Update content-update.js --- events/scripts/content-update.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/events/scripts/content-update.js b/events/scripts/content-update.js index 5f994dce..e4b40864 100644 --- a/events/scripts/content-update.js +++ b/events/scripts/content-update.js @@ -198,15 +198,13 @@ async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs, profile) { await setCtaState('eventClosed', rsvpBtn, miloLibs); } } else { - updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); - rsvpBtn.el.textContent = rsvpBtn.originalText; - rsvpBtn.el.classList.remove('disabled'); - rsvpBtn.el.setAttribute('tabindex', 0); - rsvpBtn.el.addEventListener('click', (e) => { - e.preventDefault(); - signIn(getSusiOptions(getConfig())); - }); + await setCtaState('default', rsvpBtn, miloLibs); } + // TODO: add condition once guest checkout is available + rsvpBtn.el.addEventListener('click', (e) => { + e.preventDefault(); + signIn(getSusiOptions(getConfig())); + }); } else if (profile) { await updateRSVPButtonState(rsvpBtn, miloLibs); From b176583b1f97bfa564162b34126000596ce54d65 Mon Sep 17 00:00:00 2001 From: Qiyun Dai Date: Tue, 29 Oct 2024 10:57:39 -0500 Subject: [PATCH 6/6] test fixed --- events/scripts/content-update.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/events/scripts/content-update.js b/events/scripts/content-update.js index e4b40864..57ebad46 100644 --- a/events/scripts/content-update.js +++ b/events/scripts/content-update.js @@ -69,7 +69,8 @@ function convertEccIcon(n) { }); } -function setCtaState(targetState, rsvpBtn, miloLibs, icon = null) { +async function setCtaState(targetState, rsvpBtn, miloLibs) { + const checkRed = getIcon('check-circle-red'); const enableBtn = () => { rsvpBtn.el.classList.remove('disabled'); rsvpBtn.el.setAttribute('tabindex', 0); @@ -87,38 +88,38 @@ function setCtaState(targetState, rsvpBtn, miloLibs, icon = null) { enableBtn(); updateAnalyticTag(rsvpBtn.el, registeredText); rsvpBtn.el.textContent = registeredText; - if (icon) rsvpBtn.el.prepend(icon); + rsvpBtn.el.prepend(checkRed); }, waitlisted: async () => { const waitlistedText = await miloReplaceKey(miloLibs, 'waitlisted-cta-text'); enableBtn(); updateAnalyticTag(rsvpBtn.el, waitlistedText); rsvpBtn.el.textContent = waitlistedText; - if (icon) rsvpBtn.el.prepend(icon); + rsvpBtn.el.prepend(checkRed); }, toWaitlist: async () => { const waitlistText = await miloReplaceKey(miloLibs, 'waitlist-cta-text'); enableBtn(); updateAnalyticTag(rsvpBtn.el, waitlistText); rsvpBtn.el.textContent = waitlistText; - icon?.remove(); + checkRed.remove(); }, eventClosed: async () => { const closedText = await miloReplaceKey(miloLibs, 'event-full-cta-text'); disableBtn(); updateAnalyticTag(rsvpBtn.el, closedText); rsvpBtn.el.textContent = closedText; - icon?.remove(); + checkRed.remove(); }, default: async () => { enableBtn(); updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText); rsvpBtn.el.textContent = rsvpBtn.originalText; - icon?.remove(); + checkRed.remove(); }, }; - stateTrigger[targetState](); + await stateTrigger[targetState](); } function createTag(tag, attributes, html, options = {}) { @@ -146,7 +147,6 @@ function createTag(tag, attributes, html, options = {}) { export async function updateRSVPButtonState(rsvpBtn, miloLibs) { const rsvpData = BlockMediator.get('rsvpData'); const eventInfo = BlockMediator.get('eventData'); - const checkRed = getIcon('check-circle-red'); let eventFull = false; let allowWaitlisting = getMetadata('allow-wait-listing') === 'true'; @@ -158,17 +158,17 @@ export async function updateRSVPButtonState(rsvpBtn, miloLibs) { if (!rsvpData) { if (eventFull) { if (allowWaitlisting) { - await setCtaState('toWaitlist', rsvpBtn, miloLibs, checkRed); + await setCtaState('toWaitlist', rsvpBtn, miloLibs); } else { - await setCtaState('eventClosed', rsvpBtn, miloLibs, checkRed); + await setCtaState('eventClosed', rsvpBtn, miloLibs); } } else { await setCtaState('default', rsvpBtn, miloLibs); } } else if (rsvpData.registrationStatus === 'registered') { - await setCtaState('registered', rsvpBtn, miloLibs, checkRed); + await setCtaState('registered', rsvpBtn, miloLibs); } else if (rsvpData.registrationStatus === 'waitlisted') { - await setCtaState('waitlisted', rsvpBtn, miloLibs, checkRed); + await setCtaState('waitlisted', rsvpBtn, miloLibs); } }