RSVP related fixes

ecc/blocks/form-handler/controllers/registration-details-component-controller.js

@@ -1,35 +1,5 @@
 /* eslint-disable no-unused-vars */
-export function onSubmit(component, props) {
-  if (component.closest('.fragment')?.classList.contains('hidden')) return;
-
-  const attendeeLimitVal = component.querySelector('#attendee-count-input')?.value;
-  const allowWaitlisting = component.querySelector('#registration-allow-waitlist')?.checked;
-  const contactHost = component.querySelector('#registration-contact-host')?.checked;
-  const hostEmail = component.querySelector('#event-host-email-input')?.value;
-  const rsvpDescription = component.querySelector('#rsvp-form-detail-description')?.value;
-
-  const attendeeLimit = Number.isNaN(+attendeeLimitVal) ? null : +attendeeLimitVal;
-
-  const rsvpData = {};
-
-  if (rsvpDescription) rsvpData.rsvpDescription = rsvpDescription;
-  if (contactHost && hostEmail) rsvpData.hostEmail = hostEmail;
-  if (attendeeLimit) rsvpData.attendeeLimit = attendeeLimit;
-  if (allowWaitlisting) rsvpData.allowWaitlisting = allowWaitlisting;
-
-  props.payload = { ...props.payload, ...rsvpData };
-}
-
-export async function onUpdate(component, props) {
-  if (!props.eventDataResp) return;
-
-  if (props.eventDataResp.cloudType === 'CreativeCloud') {
-    component.querySelector('.attendee-count-wrapper')?.classList.add('hidden');
-    component.querySelector('#registration-allow-waitlist')?.classList.add('hidden');
-  }
-}
-
-export default function init(component, props) {
+function prefillFields(component, props) {
   const contactHostEl = component.querySelector('#registration-contact-host');
   const hostEmailEl = component.querySelector('#event-host-email-input');
   const attendeeLimitEl = component.querySelector('#attendee-count-input');
@@ -66,3 +36,39 @@ export default function init(component, props) {
     });
   }
 }
+
+export function onSubmit(component, props) {
+  if (component.closest('.fragment')?.classList.contains('hidden')) return;
+
+  const attendeeLimitVal = component.querySelector('#attendee-count-input')?.value;
+  const allowWaitlisting = component.querySelector('#registration-allow-waitlist')?.checked;
+  const contactHost = component.querySelector('#registration-contact-host')?.checked;
+  const hostEmail = component.querySelector('#event-host-email-input')?.value;
+  const rsvpDescription = component.querySelector('#rsvp-form-detail-description')?.value;
+
+  const attendeeLimit = Number.isNaN(+attendeeLimitVal) ? null : +attendeeLimitVal;
+
+  const rsvpData = {};
+
+  if (rsvpDescription) rsvpData.rsvpDescription = rsvpDescription;
+  if (contactHost && hostEmail) rsvpData.hostEmail = hostEmail;
+  if (attendeeLimit) rsvpData.attendeeLimit = attendeeLimit;
+  if (allowWaitlisting) rsvpData.allowWaitlisting = allowWaitlisting;
+
+  props.payload = { ...props.payload, ...rsvpData };
+}
+
+export async function onUpdate(component, props) {
+  if (!props.eventDataResp) return;
+
+  if (props.eventDataResp.cloudType === 'CreativeCloud') {
+    component.querySelector('.attendee-count-wrapper')?.classList.add('hidden');
+    component.querySelector('#registration-allow-waitlist')?.classList.add('hidden');
+  }
+
+  prefillFields(component, props);
+}
+
+export default function init(component, props) {
+  prefillFields(component, props);
+}

ecc/blocks/form-handler/controllers/registration-fields-component-controller.js

@@ -2,7 +2,7 @@
 export function onSubmit(component, props) {
   if (component.closest('.fragment')?.classList.contains('hidden')) return;
 
-  const defaultFields = ['firstName', 'lastName', 'email', 'jobTitle'];
+  const defaultFields = component.dataset.mandatedfields?.split(',');
 
   const rsvpFormFields = {
     visible: [...defaultFields, ...Array.from(component.querySelectorAll('sp-checkbox.check-appear[checked]')).map((f) => f.name)],

ecc/blocks/form-handler/form-handler.js

@@ -605,6 +605,20 @@ function updateCtas(props) {
         a.classList.remove('preview-not-ready');
       }
     }
+
+    if (a.classList.contains('next-button')) {
+      if (props.currentStep === props.maxStep) {
+        if (props.eventDataResp.published) {
+          a.textContent = a.dataset.republishStateText;
+        } else {
+          a.textContent = a.dataset.finalStateText;
+        }
+        a.prepend(getIcon('golden-rocket'));
+      } else {
+        a.textContent = a.dataset.nextStateText;
+        a.append(getIcon('chev-right-white'));
+      }
+    }
   });
 }
 

ecc/blocks/registration-fields-component/registration-fields-component.js

@@ -10,7 +10,11 @@ function convertString(input) {
   return result;
 }
 
-async function decorateRSVPFields(row) {
+async function decorateRSVPFields(el) {
+  const row = el.querySelector(':scope > div:last-of-type');
+
+  if (!row) return;
+
   row.classList.add('rsvp-checkboxes');
   const configSheetLocation = row.querySelector('a')?.href;
   const config = await fetch(configSheetLocation)
@@ -30,6 +34,8 @@ async function decorateRSVPFields(row) {
   row.innerHTML = '';
   row.append(fieldConfigTable);
 
+  el.dataset.mandatedfields = config.data.filter((f) => f.Required === 'x').map((f) => f.Field);
+
   config.data.filter((f) => f.Required !== 'x' && f.Type !== 'submit').forEach((field) => {
     const fieldRow = createTag('tr', { class: 'field-row' }, '', { parent: tbody });
     const tds = [];
@@ -46,5 +52,5 @@ async function decorateRSVPFields(row) {
 export default async function init(el) {
   el.classList.add('form-component');
   generateToolTip(el.querySelector(':scope > div:first-of-type'));
-  await decorateRSVPFields(el.querySelector(':scope > div:last-of-type'));
+  await decorateRSVPFields(el);
 }