feat: add slot config container for more flexibility

monsieurbiz · Mar 19, 2024 · 442890a · 442890a
1 parent e355216
commit 442890a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 16 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -19,7 +19,7 @@ global.MonsieurBizShippingSlotManager = class {
     saveSlotUrl,
     resetSlotUrl,
     slotSelectError,
-    shippingSlotConfigSelects,
+    shippingSlotConfigContainers,
   ) {
     this.shippingMethodInputs = shippingMethodInputs;
     this.nextStepButtons = nextStepButtons;
@@ -34,7 +34,7 @@ global.MonsieurBizShippingSlotManager = class {
     this.saveSlotUrl = saveSlotUrl;
     this.resetSlotUrl = resetSlotUrl;
     this.slotSelectError = slotSelectError;
-    this.shippingSlotConfigSelects = shippingSlotConfigSelects;
+    this.shippingSlotConfigContainers = shippingSlotConfigContainers;
     this.previousSlot = null;
     this.initShippingMethodInputs();
   }
@@ -44,12 +44,18 @@ global.MonsieurBizShippingSlotManager = class {
       // On the page load, display load slots for selected method
       if (shippingMethodInput.checked) {
         let shippingSlotConfigSelect = this.getShippingSlotConfigSelect(shippingMethodInput.value);
+        console.log(shippingSlotConfigSelect);
         this.displayInputSlots(shippingMethodInput, true, shippingSlotConfigSelect);
       }
       this.initShippingMethodInput(shippingMethodInput);
     }
 
-    this.shippingSlotConfigSelects.forEach(shippingSlotConfigSelect => {
+    this.shippingSlotConfigContainers.forEach(shippingSlotConfigContainer => {
+      let shippingSlotConfigSelect = shippingSlotConfigContainer.querySelector('select[name*="[shippingSlotConfigs]"]');
+      if (shippingSlotConfigSelect === null) {
+        return;
+      }
+
       shippingSlotConfigSelect.addEventListener("change", function () {
         let checkedShippingMethodInput = Array.from(this.shippingMethodInputs).find(shippingMethodInput => shippingMethodInput.checked);
         if (checkedShippingMethodInput !== null) {
@@ -75,6 +81,7 @@ global.MonsieurBizShippingSlotManager = class {
     let shippingSlotManager = this;
     // Find selected shipping slot config select
     let shippingSlotConfigSelect = this.getShippingSlotConfigSelect(shippingMethodInput.value);
+    console.log(shippingSlotConfigSelect);
 
     // Reset existing slot if needed
     this.resetSlot(shippingMethodInput, function () {
@@ -94,9 +101,9 @@ global.MonsieurBizShippingSlotManager = class {
 
       let data = JSON.parse(this.responseText);
 
-      // Hide calendars and shipping slot config selects
+      // Hide calendars and shipping slot config containers
       shippingSlotManager.hideCalendars();
-      shippingSlotManager.hideShippingSlotConfigSelects();
+      shippingSlotManager.hideShippingSlotConfigContainers();
 
       // Authorize user to go to next step if no slot needed
       if (typeof data.events === "undefined") {
@@ -211,9 +218,9 @@ global.MonsieurBizShippingSlotManager = class {
     }
   }
 
-  hideShippingSlotConfigSelects() {
-    for (let shippingSlotConfigSelect of this.shippingSlotConfigSelects) {
-      shippingSlotConfigSelect.style.display = "none";
+  hideShippingSlotConfigContainers() {
+    for (let shippingSlotConfigContainer of this.shippingSlotConfigContainers) {
+      shippingSlotConfigContainer.style.display = "none";
     }
   }
 
@@ -256,7 +263,12 @@ global.MonsieurBizShippingSlotManager = class {
   initCalendar(calendarContainer, events, timezone, shippingMethodCode, shippingSlotConfigSelect) {
     calendarContainer.style.display = "block";
     if (shippingSlotConfigSelect) {
-      shippingSlotConfigSelect.style.display = "block";
+      let currentShippingSlotConfigContainer = Array.from(this.shippingSlotConfigContainers).find(
+        shippingSlotConfigContainer => shippingSlotConfigContainer.classList.contains(shippingMethodCode)
+      );
+      if (currentShippingSlotConfigContainer) {
+        currentShippingSlotConfigContainer.style.display = "block";
+      }
     }
     let shippingSlotManager = this;
     let calendar = new Calendar(
@@ -345,8 +357,18 @@ global.MonsieurBizShippingSlotManager = class {
   }
 
   getShippingSlotConfigSelect(shippingMethodCode) {
-    return Array.from(this.shippingSlotConfigSelects).find(
-      shippingSlotConfigSelect => shippingSlotConfigSelect.name.includes(shippingMethodCode)
-    ) ?? null;
+    for (let shippingSlotConfigContainer of this.shippingSlotConfigContainers) {
+      let shippingSlotConfigSelect = shippingSlotConfigContainer.querySelector('select[name*="[shippingSlotConfigs]"]');
+      console.log(shippingSlotConfigContainer, shippingSlotConfigSelect, shippingMethodCode, shippingSlotConfigSelect.name.includes(shippingMethodCode), shippingSlotConfigSelect.name);
+      if (shippingSlotConfigSelect !== null && shippingSlotConfigSelect.name.includes(shippingMethodCode)) {
+        return shippingSlotConfigSelect;
+      }
+    }
+
+    return null;
+
+    // return Array.from(this.shippingSlotConfi).find(
+    //   shippingSlotConfigSelect => shippingSlotConfigSelect.name.includes(shippingMethodCode)
+    // ) ?? null;
   }
 };