Making Event update sync

adobecom · Sep 12, 2024 · 66ad768 · 66ad768
1 parent 58afbe5
commit 66ad768
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 59 deletions.
diff --git a/ecc/blocks/form-handler/controllers/checkbox-component-controller.js b/ecc/blocks/form-handler/controllers/checkbox-component-controller.js
@@ -47,3 +47,7 @@ export async function onUpdate(_component, _props) {
 export function onSubmit(component, props) {
   // Do nothing
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-agenda-component-controller.js b/ecc/blocks/form-handler/controllers/event-agenda-component-controller.js
@@ -33,3 +33,7 @@ export default function init(component, props) {
 
   showAgendaPostEvent.checked = eventData.showAgendaPostEvent;
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-community-link-component-controller.js b/ecc/blocks/form-handler/controllers/event-community-link-component-controller.js
@@ -42,3 +42,7 @@ export default function init(component, props) {
 
   updateInputState();
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-format-component-controller.js b/ecc/blocks/form-handler/controllers/event-format-component-controller.js
@@ -158,3 +158,7 @@ export function onSubmit(component, props) {
 
   props.payload = { ...props.payload, ...eventFormat };
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-info-component-controller.js b/ecc/blocks/form-handler/controllers/event-info-component-controller.js
@@ -474,3 +474,7 @@ export default async function init(component, props) {
     component.classList.add('prefilled');
   }
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-partners-component-controller.js b/ecc/blocks/form-handler/controllers/event-partners-component-controller.js
@@ -173,3 +173,7 @@ export default async function init(component, props) {
   const partnerVisible = component.querySelector('#partners-visible');
   partnerVisible.checked = eventData.showSponsors;
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/event-topics-component-controller.js b/ecc/blocks/form-handler/controllers/event-topics-component-controller.js
@@ -32,3 +32,7 @@ export default function init(component, props) {
     if (topics.length) component.classList.add('prefilled');
   }
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/img-upload-component-controller.js b/ecc/blocks/form-handler/controllers/img-upload-component-controller.js
@@ -174,3 +174,7 @@ export default async function init(component, props) {
     }
   }
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/product-promotion-component-controller.js b/ecc/blocks/form-handler/controllers/product-promotion-component-controller.js
@@ -121,3 +121,7 @@ export default async function init(component, props) {
     component.classList.add('prefilled');
   }
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/profile-component-controller.js b/ecc/blocks/form-handler/controllers/profile-component-controller.js
@@ -131,3 +131,7 @@ export default async function init(component, props) {
   profileContainer.requestUpdate();
   component.classList.add('prefilled');
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/registration-details-component-controller.js b/ecc/blocks/form-handler/controllers/registration-details-component-controller.js
@@ -72,3 +72,7 @@ export async function onUpdate(component, props) {
 export default function init(component, props) {
   prefillFields(component, props);
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/registration-fields-component-controller.js b/ecc/blocks/form-handler/controllers/registration-fields-component-controller.js
@@ -51,3 +51,7 @@ export default function init(component, props) {
     if (eventData.rsvpFormFields?.required?.includes(cb.name)) cb.checked = true;
   });
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js b/ecc/blocks/form-handler/controllers/terms-conditions-component-controller.js
@@ -78,3 +78,7 @@ export default async function init(component, props) {
 export function onSubmit(_component, _props) {
   // Do nothing
 }
+
+export function onEventUpdate(component, props) {
+  // Do nothing
+}
diff --git a/ecc/blocks/form-handler/controllers/venue-info-component-controller.js b/ecc/blocks/form-handler/controllers/venue-info-component-controller.js
@@ -190,68 +190,79 @@ export default async function init(component, props) {
   if (showVenuePostEvent) {
     changeInputValue(component.querySelector('#checkbox-venue-info-visible'), 'checked', showVenuePostEvent);
   }
+}
 
-  const getVenueDataInForm = () => {
-    const venueName = venueNameInput.value;
-    const address = addressInput.value;
-    const city = cityInput.value;
-    const state = stateInput.value;
-    const stateCode = stateCodeInput.value;
-    const postalCode = postalCodeInput.value;
-    const country = countryInput.value;
-    const placeId = placeIdInput.value;
-    const mapUrl = mapUrlInput.value;
-    const lat = +placeLatInput.value;
-    const lon = +placeLngInput.value;
-    const gmtOffset = +gmtoffsetInput.value;
-
-    const venueData = {
-      venueName,
-      address,
-      city,
-      state,
-      stateCode,
-      postalCode,
-      country,
-      placeId,
-      mapUrl,
-      coordinates: {
-        lat,
-        lon,
-      },
-      gmtOffset,
-    };
+const getVenueDataInForm = (component) => {
+  const venueNameInput = component.querySelector('#venue-info-venue-name');
+  const addressInput = component.querySelector('#venue-info-venue-address');
+  const cityInput = component.querySelector('#location-city');
+  const stateInput = component.querySelector('#location-state');
+  const stateCodeInput = component.querySelector('#location-state-code');
+  const postalCodeInput = component.querySelector('#location-zip-code');
+  const countryInput = component.querySelector('#location-country');
+  const placeLatInput = component.querySelector('#google-place-lat');
+  const placeLngInput = component.querySelector('#google-place-lng');
+  const placeIdInput = component.querySelector('#google-place-id');
+  const mapUrlInput = component.querySelector('#google-map-url');
+  const gmtoffsetInput = component.querySelector('#google-place-gmt-offset');
 
-    return venueData;
+  const venueName = venueNameInput.value;
+  const address = addressInput.value;
+  const city = cityInput.value;
+  const state = stateInput.value;
+  const stateCode = stateCodeInput.value;
+  const postalCode = postalCodeInput.value;
+  const country = countryInput.value;
+  const placeId = placeIdInput.value;
+  const mapUrl = mapUrlInput.value;
+  const lat = +placeLatInput.value;
+  const lon = +placeLngInput.value;
+  const gmtOffset = +gmtoffsetInput.value;
+
+  const venueData = {
+    venueName,
+    address,
+    city,
+    state,
+    stateCode,
+    postalCode,
+    country,
+    placeId,
+    mapUrl,
+    coordinates: {
+      lat,
+      lon,
+    },
+    gmtOffset,
   };
 
-  const onEventUpdate = async () => {
-    if (component.closest('.fragment')?.classList.contains('hidden')) return;
+  return venueData;
+};
 
-    const venueData = getVenueDataInForm();
+export async function onEventUpdate(component, props) {
+  if (component.closest('.fragment')?.classList.contains('hidden')) return;
 
-    let resp;
-    if (!props.eventDataResp.venue) {
-      resp = await createVenue(props.eventDataResp.eventId, venueData);
-    } else if (props.eventDataResp.venue.placeId !== venueData.placeId) {
-      resp = await replaceVenue(props.eventDataResp.eventId, props.eventDataResp.venue.venueId, {
-        ...props.eventDataResp.venue,
-        ...venueData,
-      });
+  const venueData = getVenueDataInForm(component);
 
-      if (resp.error) {
-        buildErrorMessage(props, resp);
-      }
-    }
+  let resp;
+  if (!props.eventDataResp.venue) {
+    resp = await createVenue(props.eventDataResp.eventId, venueData);
+  } else if (props.eventDataResp.venue.placeId !== venueData.placeId) {
+    resp = await replaceVenue(props.eventDataResp.eventId, props.eventDataResp.venue.venueId, {
+      ...props.eventDataResp.venue,
+      ...venueData,
+    });
 
-    if (resp) {
-      props.eventDataResp = { ...props.eventDataResp, ...resp };
-      props.payload = {
-        ...props.payload,
-        showVenuePostEvent: venueData.showVenuePostEvent,
-      };
+    if (resp.error) {
+      buildErrorMessage(props, resp);
     }
-  };
+  }
 
-  props.el.addEventListener('eventUpdated', onEventUpdate);
+  if (resp) {
+    props.eventDataResp = { ...props.eventDataResp, ...resp };
+    props.payload = {
+      ...props.payload,
+      showVenuePostEvent: venueData.showVenuePostEvent,
+    };
+  }
 }
diff --git a/ecc/blocks/form-handler/form-handler.js b/ecc/blocks/form-handler/form-handler.js
@@ -278,6 +278,22 @@ async function gatherValues(props) {
   await Promise.all(allComponentPromises);
 }
 
+async function handleEventUpdate(props) {
+  const allComponentPromises = VANILLA_COMPONENTS.map(async (comp) => {
+    const mappedComponents = props.el.querySelectorAll(`.${comp}-component`);
+    if (!mappedComponents.length) return {};
+
+    const promises = Array.from(mappedComponents).map(async (component) => {
+      const { onEventUpdate } = await import(`./controllers/${comp}-component-controller.js`);
+      return onEventUpdate(component, props);
+    });
+
+    return Promise.all(promises);
+  });
+
+  await Promise.all(allComponentPromises);
+}
+
 async function updateComponents(props) {
   const allComponentPromises = VANILLA_COMPONENTS.map(async (comp) => {
     const mappedComponents = props.el.querySelectorAll(`.${comp}-component`);
@@ -399,33 +415,33 @@ async function saveEvent(props, options = { toPublish: false }) {
 
   let resp;
 
-  const onEventSave = () => {
+  const onEventSave = async () => {
     if (!resp.error) {
       showSaveSuccessMessage(props);
     }
 
-    if (resp?.eventId) props.el.dispatchEvent(new CustomEvent('eventUpdated', { detail: { eventId: resp.eventId } }));
+    if (resp?.eventId) await handleEventUpdate(props);
   };
 
   if (props.currentStep === 0 && !getFilteredCachedResponse().eventId) {
     resp = await createEvent(quickFilter(props.payload));
     props.eventDataResp = { ...props.eventDataResp, ...resp };
     updateDashboardLink(props);
-    onEventSave();
+    await onEventSave();
   } else if (props.currentStep <= props.maxStep && !options.toPublish) {
     resp = await updateEvent(
       getFilteredCachedResponse().eventId,
       getJoinedData(),
     );
     props.eventDataResp = { ...props.eventDataResp, ...resp };
-    onEventSave();
+    await onEventSave();
   } else if (options.toPublish) {
     resp = await publishEvent(
       getFilteredCachedResponse().eventId,
       getJoinedData(),
     );
     props.eventDataResp = { ...props.eventDataResp, ...resp };
-    if (resp?.eventId) document.dispatchEvent(new CustomEvent('eventUpdated', { detail: { eventId: resp.eventId } }));
+    if (resp?.eventId) await handleEventUpdate(props);
   }
 
   return resp;