[FE] RSVP Waitlist Changes

events/blocks/events-form/events-form.css

@@ -309,8 +309,26 @@
 }
 
 .events-form .form-success-msg {
+  position: relative;
   text-align: center;
   padding: 80px 40px;
+  min-height: 300px;
+}
+
+.events-form .form-success-msg > div:not(.hidden) {
+  height: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.events-form .form-success-msg > .second-screen > hgroup {
+  flex-basis: 56%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .events-form .form-success-msg h1,
@@ -419,6 +437,10 @@
     width: auto;
   }
 
+  .events-form .form-success-msg {
+    min-width: 720px;
+  }
+
   .events-form .form-success-msg .post-rsvp-button-wrapper {
     gap: 1rem;
   }

events/blocks/events-form/events-form.js

@@ -92,7 +92,14 @@ async function submitForm(bp) {
     return acc;
   }, {});
 
-  return getAndCreateAndAddAttendee(getMetadata('event-id'), cleanPayload);
+  let rsvpType = 'registered';
+  const eventInfo = BlockMediator.get('eventInfo');
+  if (eventInfo) {
+    const { allowWaitlisting, attendeeLimit, attendeeCount } = eventInfo;
+    if (allowWaitlisting && attendeeCount >= attendeeLimit) rsvpType = 'waitlisted';
+  }
+
+  return getAndCreateAndAddAttendee(getMetadata('event-id'), cleanPayload, rsvpType);
 }
 
 function clearForm(form) {
@@ -121,11 +128,26 @@ async function buildErrorMsg(parent, status) {
   }, 3000);
 }
 
-function showSuccessMsg(bp) {
+function showSuccessMsgFirstScreen(bp) {
+  const rsvpData = BlockMediator.get('rsvpData');
+
+  if (!rsvpData) return;
+
   clearForm(bp.form);
   bp.form.classList.add('hidden');
   bp.eventHero.classList.add('hidden');
-  bp.successMsg.classList.remove('hidden');
+
+  const { registrationStatus } = rsvpData;
+
+  if (registrationStatus === 'waitlisted') {
+    bp.waitlistSuccessScreen?.classList.remove('hidden');
+    bp.waitlistSuccessScreen?.querySelector('.first-screen')?.classList.remove('hidden');
+  }
+
+  if (registrationStatus === 'registered') {
+    bp.rsvpSuccessScreen?.classList.remove('hidden');
+    bp.rsvpSuccessScreen?.querySelector('.first-screen')?.classList.remove('hidden');
+  }
 }
 
 function eventFormSendAnalytics(bp, view) {
@@ -150,9 +172,12 @@ function createButton({ type, label }, bp) {
         button.removeAttribute('disabled');
         button.classList.remove('submitting');
         if (!respJson) return;
-        if (respJson.ok !== false && !respJson.error) eventFormSendAnalytics(bp, 'Form Submit');
+
         BlockMediator.set('rsvpData', respJson.data);
-        if (respJson.error) {
+
+        if (respJson.ok) {
+          eventFormSendAnalytics(bp, 'Form Submit');
+        } else {
           let { status } = respJson;
 
           // FIXME: temporary fix for ESL 500 on ESP 400
@@ -333,51 +358,95 @@ function addTerms(form, terms) {
   submit.disabled = none(Array.from(checkboxes), (c) => c.checked);
 }
 
-function decorateSuccessMsg(form, bp) {
-  const ctas = bp.successMsg.querySelectorAll('a');
-  const hgroup = createTag('hgroup');
-  const eyeBrowText = bp.successMsg.querySelector('p:first-child');
-  const headings = bp.successMsg.querySelectorAll('h1, h2, h3, h4, h5, h6');
-  headings.forEach((h) => {
-    hgroup.append(h);
-  });
+function decorateSuccessScreen(screen) {
+  if (!screen) return;
 
-  if (eyeBrowText) {
-    eyeBrowText.classList.add('eyebrow');
-    hgroup.prepend(eyeBrowText);
-  }
+  screen.classList.add('form-success-msg');
+  const subScreens = screen.querySelectorAll('div');
 
-  bp.successMsg.prepend(hgroup);
-  ctas.forEach((cta, i) => {
-    if (i === 0) {
-      cta.parentElement.classList.add('post-rsvp-button-wrapper');
-      cta.classList.add('con-button', 'outline', 'button-l');
-    } else if (i === 1) {
-      cta.classList.add('con-button', 'black', 'button-l');
-    }
+  const [firstScreen, secondScreen] = subScreens;
 
-    cta.addEventListener('click', async (e) => {
-      e.preventDefault();
+  subScreens.forEach((ss, i) => {
+    ss.classList.add('hidden');
+    const hgroup = createTag('hgroup');
+    const eyeBrowText = ss.querySelector('p:first-child');
+    const headings = ss.querySelectorAll('h1, h2, h3, h4, h5, h6');
 
-      cta.classList.add('loading');
+    headings.forEach((h) => {
+      hgroup.append(h);
+    });
+
+    if (eyeBrowText) {
+      eyeBrowText.classList.add('eyebrow');
+      hgroup.prepend(eyeBrowText);
+    }
 
-      if (i === 0) {
-        const resp = await deleteAttendeeFromEvent(getMetadata('event-id'));
-        cta.classList.remove('loading');
-        if (resp?.data?.espProvider?.status !== 204) {
-          buildErrorMsg(bp.successMsg);
-          return;
+    ss.prepend(hgroup);
+
+    if (i === 0) {
+      ss.classList.add('first-screen');
+      const firstScreenCtas = ss.querySelectorAll('a');
+
+      firstScreenCtas.forEach((cta) => {
+        const ctaUrl = new URL(cta.href);
+        if (ctaUrl.hash.startsWith('#cancel')) {
+          cta.parentElement.classList.add('post-rsvp-button-wrapper');
+          cta.classList.add('con-button', 'outline', 'button-l', 'cancel-button');
+        } else if (ctaUrl.hash.startsWith('#ok')) {
+          cta.classList.add('con-button', 'black', 'button-l', 'ok-button');
         }
 
-        if (resp?.data?.espProvider?.attendeeDeleted) BlockMediator.set('rsvpData', null);
-      }
+        cta.addEventListener('click', async (e) => {
+          e.preventDefault();
 
-      const modal = form.closest('.dialog-modal');
-      closeModal(modal);
-    });
+          cta.classList.add('loading');
+
+          if (cta.classList.contains('cancel-button')) {
+            const resp = await deleteAttendeeFromEvent(getMetadata('event-id'));
+            if (!resp.ok) return;
+
+            const { data } = resp;
+
+            cta.classList.remove('loading');
+            if (data?.espProvider?.status !== 204) {
+              buildErrorMsg(screen);
+              return;
+            }
+
+            if (data?.espProvider?.attendeeDeleted) BlockMediator.set('rsvpData', null);
+
+            firstScreen.classList.add('hidden');
+            secondScreen.classList.remove('hidden');
+            cta.classList.remove('loading');
+          }
+
+          if (cta.classList.contains('ok-button')) {
+            const modal = screen.closest('.dialog-modal');
+            if (modal) closeModal(modal);
+          }
+        });
+      });
+    }
+
+    if (i === 1) {
+      ss.classList.add('second-screen');
+      const secondScreenCtas = ss.querySelectorAll('a');
+
+      secondScreenCtas.forEach((cta) => {
+        const ctaUrl = new URL(cta.href);
+        if (ctaUrl.hash.startsWith('#ok')) {
+          cta.classList.add('con-button', 'black', 'button-l');
+          cta.addEventListener('click', async (e) => {
+            e.preventDefault();
+            const modal = screen.closest('.dialog-modal');
+            if (modal) closeModal(modal);
+          });
+        }
+      });
+    }
   });
 
-  bp.successMsg.classList.add('hidden');
+  screen.classList.add('hidden');
 }
 
 async function createForm(bp, formData) {
@@ -464,7 +533,6 @@ async function createForm(bp, formData) {
   });
 
   addTerms(formEl, terms);
-  decorateSuccessMsg(formEl, bp);
 
   formEl.addEventListener('input', () => applyRules(formEl, rules));
   applyRules(formEl, rules);
@@ -494,11 +562,11 @@ function decorateHero(heroEl) {
 async function buildEventform(bp, formData) {
   if (!bp.formContainer || !bp.form) return;
   bp.formContainer.classList.add('form-container');
-  bp.successMsg.classList.add('form-success-msg');
-  const { formEl, sanitizeList } = await createForm(
-    bp,
-    formData,
-  );
+  const { formEl, sanitizeList } = await createForm(bp, formData);
+
+  [bp.rsvpSuccessScreen, bp.waitlistSuccessScreen].forEach((screen) => {
+    decorateSuccessScreen(screen);
+  });
 
   if (formEl) {
     bp.form.replaceWith(formEl);
@@ -508,22 +576,25 @@ async function buildEventform(bp, formData) {
 }
 
 function initFormBasedOnRSVPData(bp) {
+  const validRegistrationStatus = ['registered', 'waitlisted'];
   const { block } = bp;
   const profile = BlockMediator.get('imsProfile');
   const rsvpData = BlockMediator.get('rsvpData');
-  if (rsvpData?.espProvider?.registered || rsvpData?.externalAttendeeId) {
-    showSuccessMsg(bp);
+
+  if (validRegistrationStatus.includes(rsvpData?.registrationStatus)) {
+    showSuccessMsgFirstScreen(bp);
     eventFormSendAnalytics(bp, 'Confirmation Modal View');
   } else {
     personalizeForm(block, profile);
   }
 
   BlockMediator.subscribe('rsvpData', ({ newValue }) => {
-    if (newValue?.espProvider?.registered || newValue?.externalAttendeeId) {
-      showSuccessMsg(bp);
+    if (validRegistrationStatus.includes(newValue?.registrationStatus)) {
+      showSuccessMsgFirstScreen(bp);
       eventFormSendAnalytics(bp, 'Confirmation Modal View');
     }
   });
+
   if (bp.block.querySelector('.form-success-msg.hidden')) {
     eventFormSendAnalytics(bp, 'Form View');
   }
@@ -581,7 +652,8 @@ export default async function decorate(block, formData = null) {
     formContainer: block.querySelector(':scope > div:nth-of-type(2)'),
     form: block.querySelector(':scope > div:nth-of-type(2) a[href$=".json"]'),
     terms: block.querySelector(':scope > div:nth-of-type(3)'),
-    successMsg: block.querySelector(':scope > div:last-of-type > div'),
+    rsvpSuccessScreen: block.querySelector(':scope > div:nth-of-type(4)'),
+    waitlistSuccessScreen: block.querySelector(':scope > div:nth-of-type(5)'),
   };
 
   await onProfile(bp, formData);