add disable_delivery_options event to unselect everything and send an…

… update with empty data to let the external platform know the settings are disabled. Also sends this empty event for hide_delivery_options now
myparcelnl · Oct 24, 2019 · b4b16c6 · b4b16c6
1 parent 126bdb3
commit b4b16c6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <form
     v-if="showDeliveryOptions"
+    v-show="fakeShowDeliveryOptions"
     :class="`${$classBase}`"
     @submit.prevent="">
     <Modal
@@ -57,6 +58,14 @@ export default {
        */
       showDeliveryOptions: false,
 
+      /**
+       * "fake" version of showDeliveryOptions, only hides the module visually by using v-show instead of v-if.
+       *
+       * Used while hiding the delivery options to disappear instantly but allow the module to clean up and send events
+       *  before actually removing itself.
+       */
+      fakeShowDeliveryOptions: true,
+
       /**
        * Whether the delivery options are loading or not.
        *
@@ -82,6 +91,12 @@ export default {
        * Event listeners object. Stored here so we can add and remove them easily.
        */
       listeners: {
+        /**
+         * Empty the export values and force sending an update with the empty data.
+         */
+        removeData: () => {
+          this.$configBus.exportValues = {};
+        },
         show: () => {
           if (this.showDeliveryOptions === true) {
             return;
@@ -92,8 +107,16 @@ export default {
           document.addEventListener(EVENTS.UPDATE_DELIVERY_OPTIONS, this.listeners.update);
         },
         hide: () => {
-          this.showDeliveryOptions = false;
-          document.removeEventListener(EVENTS.UPDATE_DELIVERY_OPTIONS, this.listeners.update);
+          this.$configBus.exportValues = {};
+          this.fakeShowDeliveryOptions = false;
+
+          const listenForLastUpdate = () => {
+            this.showDeliveryOptions = false;
+            document.removeEventListener(EVENTS.UPDATE_DELIVERY_OPTIONS, this.listeners.update);
+            document.removeEventListener(EVENTS.UPDATED_DELIVERY_OPTIONS, listenForLastUpdate);
+          };
+
+          document.addEventListener(EVENTS.UPDATED_DELIVERY_OPTIONS, listenForLastUpdate);
         },
         update: debounce(this.getDeliveryOptions, debounceDelay),
         updateExternal: debounce(this.updateExternal, debounceDelay),
@@ -181,6 +204,7 @@ export default {
     this.listeners.update();
     document.addEventListener(EVENTS.UPDATE_DELIVERY_OPTIONS, this.listeners.update);
 
+    document.addEventListener(EVENTS.DISABLE_DELIVERY_OPTIONS, this.listeners.removeData);
     document.addEventListener(EVENTS.SHOW_DELIVERY_OPTIONS, this.listeners.show);
     document.addEventListener(EVENTS.HIDE_DELIVERY_OPTIONS, this.listeners.hide);
 
@@ -285,14 +309,18 @@ export default {
 
     /**
      * Trigger an update on the checkout. Throttled to avoid overloading the external platform with updates.
+     *
+     * @param {Boolean} force - Ignore the safety check and force dispatching the event.
      */
-    updateExternal() {
+    updateExternal({ name, value }) {
+      const isEmptied = name === CONFIG.DELIVERY && value === null;
+
       /*
        * If delivery type is not set it means either delivery or pickup was clicked but the subsequent request is not
        * finished yet. Once that finishes loading any delivery type will immediately be selected, triggering another
        * update event which will allow this condition to pass.
        */
-      if (!this.$configBus.hasExportValue(CONFIG.DELIVERY_TYPE)) {
+      if (!isEmptied && !this.$configBus.hasExportValue(CONFIG.DELIVERY_TYPE)) {
         return;
       }
 
@@ -302,7 +330,7 @@ export default {
       document.dispatchEvent(new CustomEvent(
         EVENTS.UPDATED_DELIVERY_OPTIONS,
         {
-          detail: this.$configBus.exportValues,
+          detail: isEmptied ? {} : this.$configBus.exportValues,
         },
       ));
     },

diff --git a/src/components/RecursiveForm/RecursiveForm.vue b/src/components/RecursiveForm/RecursiveForm.vue
@@ -188,6 +188,13 @@ export default {
        * Event listeners object. Stored here so we can add and remove them easily.
        */
       listeners: {
+        /**
+         * Empty this.selected.
+         */
+        unselect: () => {
+          this.selected = null;
+        },
+
         /**
          * Update dependencies of the current option. Without this.$nextTick switching carriers for the first time will
          *  not show all the options.
@@ -370,12 +377,18 @@ export default {
     if (this.hasDependency) {
       this.$configBus.$on(EVENTS.AFTER_UPDATE, this.listeners.updateDependency);
     }
+
+    document.addEventListener(EVENTS.DISABLE_DELIVERY_OPTIONS, this.listeners.unselect);
+    document.addEventListener(EVENTS.HIDE_DELIVERY_OPTIONS, this.listeners.unselect);
   },
 
   beforeDestroy() {
     if (this.hasDependency) {
       this.$configBus.$off(EVENTS.AFTER_UPDATE, this.listeners.updateDependency);
     }
+
+    document.removeEventListener(EVENTS.DISABLE_DELIVERY_OPTIONS, this.listeners.unselect);
+    document.removeEventListener(EVENTS.HIDE_DELIVERY_OPTIONS, this.listeners.unselect);
   },
 
   methods: {

diff --git a/src/config/data/eventConfig.js b/src/config/data/eventConfig.js
@@ -58,6 +58,13 @@ export const UPDATED_ADDRESS = 'myparcel_updated_address';
  */
 export const UPDATED_DELIVERY_OPTIONS = 'myparcel_updated_delivery_options';
 
+/**
+ * Disable the delivery options.
+ *
+ * @type {string}
+ */
+export const DISABLE_DELIVERY_OPTIONS = 'myparcel_disable_delivery_options';
+
 /**
  * Manually show the delivery options. The update listener has to be re-enabled after this.
  *