Merge pull request #323 from ymaheshwari1/fulfillment/#313

Fixed: issue in shipping address data on initial fetch related to undefined and updated the actions to update state in sync(#313)
hotwax · Oct 20, 2023 · 3b51ca7 · 3b51ca7
2 parents a805788 + 6dd82f4
commit 3b51ca7
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 92 deletions.
diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
@@ -473,26 +473,27 @@ const actions: ActionTree<OrderState, RootState> = {
     emitter.emit('dismissLoader');
     return resp;
   },
-  async fetchShippingAddress ({ commit }, currentOrder) {
+  async fetchShippingAddress ({ commit, state }) {
     let resp;
+    let order = JSON.parse(JSON.stringify(state.current))
 
     try {
-      resp = await OrderService.fetchOrderItemShipGroup(currentOrder);
+      resp = await OrderService.fetchOrderItemShipGroup(order);
       if (resp) {
         const contactMechId = resp.contactMechId;
-
         resp = await OrderService.fetchShippingAddress(contactMechId);
+
         if (resp) {
-          currentOrder = {
-            ...currentOrder,
+          order = {
+            ...order,
             shippingAddress: resp
-          }  
+          }
         }
       }
     } catch (err: any) {
       logger.error("Error in setting current order", err);
     }
-    commit(types.ORDER_CURRENT_UPDATED, { order: currentOrder })
+    commit(types.ORDER_CURRENT_UPDATED, { order })
   },
 
   async clearOrders ({ commit }) {
@@ -542,7 +543,8 @@ const actions: ActionTree<OrderState, RootState> = {
     commit(types.ORDER_OPEN_QUERY_UPDATED, payload)
   },
 
-  async fetchShipGroupForOrder({ dispatch }, order) {
+  async fetchShipGroupForOrder({ dispatch, state }) {
+    const order = JSON.parse(JSON.stringify(state.current))
     const params = {
       groupBy: 'shipGroupSeqId',
       filters: {
@@ -591,12 +593,13 @@ const actions: ActionTree<OrderState, RootState> = {
     this.dispatch('util/fetchFacilityTypeInformation', facilityTypeIds)
 
     // fetching reservation information for shipGroup from OISGIR doc
-    await dispatch('fetchAdditionalShipGroupForOrder', { shipGroups, order });
+    await dispatch('fetchAdditionalShipGroupForOrder', { shipGroups });
   },
 
-  async fetchAdditionalShipGroupForOrder({ commit }, payload) {
+  async fetchAdditionalShipGroupForOrder({ commit, state }, payload) {
+    const order = JSON.parse(JSON.stringify(state.current))
     const shipGroupSeqIds = payload.shipGroups.map((shipGroup: any) => shipGroup.shipGroupSeqId)
-    const orderId = payload.order.orderId
+    const orderId = order.orderId
 
     const params = {
       groupBy: 'shipGroupSeqId',
@@ -633,7 +636,7 @@ const actions: ActionTree<OrderState, RootState> = {
         items: reservedShipGroupForOrder.doclist.docs,
         carrierPartyId: reservedShipGroup.carrierPartyId,
         shipmentId: reservedShipGroup.shipmentId,
-        groupCategory: getOrderCategory(payload.order),  // category defines that the order is in which state like open, inProgress or completed
+        groupCategory: getOrderCategory(order),  // category defines that the order is in which state like open, inProgress or completed
       } : {
         ...shipGroup
       }
@@ -663,18 +666,18 @@ const actions: ActionTree<OrderState, RootState> = {
       logger.error('Failed to fetch information for ship groups', err)
     }
 
-    payload.order['shipGroups'] = shipGroups
+    order['shipGroups'] = shipGroups
 
-    commit(types.ORDER_CURRENT_UPDATED, { order: payload.order })
+    commit(types.ORDER_CURRENT_UPDATED, { order })
 
     return shipGroups;
   },
 
   // TODO clear current on logout
   async updateCurrent ({ commit, dispatch }, payload) {
     commit(types.ORDER_CURRENT_UPDATED, { order: payload })
-    await dispatch('fetchShippingAddress', payload);
-    dispatch('fetchShipGroupForOrder', payload)
+    await dispatch('fetchShippingAddress');
+    await dispatch('fetchShipGroupForOrder');
   },
 }
 

diff --git a/src/views/ShippingDetails.vue b/src/views/ShippingDetails.vue
@@ -10,23 +10,23 @@
         <ion-label>
           <h3>{{ currentOrder?.shippingAddress?.toName }}</h3>
           <p>{{ currentOrder?.shippingAddress?.address1 }}</p>
-          <p v-if="currentOrder?.shippingAddress?.address2">{{ currentOrder?.shippingAddress?.address2 }}</p>
-          <p>{{ currentOrder?.shippingAddress?.city ? currentOrder?.shippingAddress?.city + "," : "" }} {{ currentOrder.shippingAddress?.zipCode }}</p>
-          <p>{{ currentOrder?.shippingAddress?.stateName ? currentOrder?.shippingAddress?.stateName + "," : "" }} {{ currentOrder.shippingAddress?.countryName }}</p>
+          <p v-if="currentOrder?.shippingAddress?.address2">{{ currentOrder.shippingAddress.address2 }}</p>
+          <p>{{ currentOrder?.shippingAddress?.city ? currentOrder.shippingAddress.city + "," : "" }} {{ currentOrder.shippingAddress?.zipCode }}</p>
+          <p>{{ currentOrder?.shippingAddress?.stateName ? currentOrder.shippingAddress.stateName + "," : "" }} {{ currentOrder.shippingAddress?.countryName }}</p>
         </ion-label>
       </ion-item>
       <ion-item color="light" lines="none">
         <ion-label class="ion-text-wrap">
           <p class="overline">{{ translate("Handling Instructions") }}</p>
-          <p>{{ currentOrder?.shippingInstructions ? currentOrder?.shippingInstructions : 'Sample Handling instructions' }}</p>
+          <p>{{ currentOrder?.shippingInstructions ? currentOrder.shippingInstructions : 'Sample Handling instructions' }}</p>
         </ion-label>
       </ion-item>
       <ion-item lines="none" v-if="currentOrder.trackingCode">
         <ion-label>
           {{ currentOrder.trackingCode }}
         </ion-label>        
         <ion-button fill="clear" @click="printShippingLabel(currentOrder)">
-          <ion-icon :icon="openOutline" slot="end"></ion-icon>
+          <ion-icon :icon="openOutline" slot="end" />
         </ion-button>
       </ion-item>
       <ion-item lines="none" v-if="!currentOrder.trackingCode && ['PICKITEM_PICKED', 'PICKITEM_COMPLETED'].includes(currentOrder?.items[0]?.picklistItemStatusId)">
@@ -37,88 +37,90 @@
           {{ translate('No carrier error') }}
         </ion-label>
         <ion-button fill="clear" @click="retryShippingLabel(currentOrder)">
-          <ion-icon :icon="refreshSharp" slot="end" ></ion-icon>
+          <ion-icon :icon="refreshSharp" slot="end" />
         </ion-button>
       </ion-item>
     </ion-card>
   </div>
 </template>
 
 <script lang="ts">
-  import { 
-    IonLabel,
-    IonItem,
+import {
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonIcon,
+  IonItem,
+  IonLabel
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { openOutline, refreshSharp } from "ionicons/icons";
+import { useStore, mapGetters } from "vuex";
+import { showToast } from '@/utils';
+import { translate } from '@hotwax/dxp-components'
+import { OrderService } from '@/services/OrderService';
+import { hasError } from '@/adapter'
+
+export default defineComponent({
+  name: "CreateMappingModal",
+  components: {
+    IonButton,
     IonCard,
     IonCardHeader,
-    IonCardTitle
-  } from "@ionic/vue";
-  import { defineComponent } from "vue";
-  import { openOutline, refreshSharp } from "ionicons/icons";
-  import { useStore, mapGetters } from "vuex";
-  import { showToast } from '@/utils';
-  import { translate } from '@hotwax/dxp-components'
-  import { OrderService } from '@/services/OrderService';
-  import { hasError } from '@/adapter'
-
-  export default defineComponent({
-    name: "CreateMappingModal",
-    components: { 
-      IonLabel,
-      IonItem,
-      IonCard,
-      IonCardHeader,
-      IonCardTitle
-    },
-    data() {
-      return {
-        shipmentLabelErrorMessages: ""
-      }
-    },
-    computed: {
-      ...mapGetters({
-        currentOrder: 'order/getCurrent'
-      })
-    },
-    async mounted() {
-      // Fetching shipment label errors
-      const shipmentIds = this.currentOrder.shipments.map((shipment: any) => shipment.shipmentId);
-      const labelErrors = await OrderService.fetchShipmentLabelError(shipmentIds);
-      this.shipmentLabelErrorMessages = labelErrors.join(', ');
+    IonCardTitle,
+    IonIcon,
+    IonItem,
+    IonLabel
+  },
+  data() {
+    return {
+      shipmentLabelErrorMessages: ""
+    }
+  },
+  computed: {
+    ...mapGetters({
+      currentOrder: 'order/getCurrent'
+    })
+  },
+  async mounted() {
+    // Fetching shipment label errors
+    const shipmentIds = this.currentOrder.shipments?.map((shipment: any) => shipment.shipmentId);
+    const labelErrors = await OrderService.fetchShipmentLabelError(shipmentIds);
+    this.shipmentLabelErrorMessages = labelErrors.join(', ');
+  },
+  methods: {
+    async printShippingLabel(order: any) {
+      const shipmentIds = order.shipments.map((shipment: any) => shipment.shipmentId)
+      await OrderService.printShippingLabel(shipmentIds)
     },
-    methods: {
-      async printShippingLabel(order: any) {
-        const shipmentIds = order.shipments.map((shipment: any) => shipment.shipmentId)
-        await OrderService.printShippingLabel(shipmentIds)
-      },
-      async retryShippingLabel(order: any) {
-        const shipmentIds = order.shipmentPackages.map((shipmentPackage: any) => shipmentPackage.shipmentId);
-        const resp = await OrderService.retryShippingLabel(shipmentIds)
-        if (!hasError(resp)) {
-          showToast(translate("Shipping Label generated successfully"))
-          await this.printShippingLabel(order)
-        } else {
-          showToast(translate("Failed to generate shipping label"))
-        }
+    async retryShippingLabel(order: any) {
+      const shipmentIds = order.shipmentPackages.map((shipmentPackage: any) => shipmentPackage.shipmentId);
+      const resp = await OrderService.retryShippingLabel(shipmentIds)
+      if (!hasError(resp)) {
+        showToast(translate("Shipping Label generated successfully"))
+        await this.printShippingLabel(order)
+      } else {
+        showToast(translate("Failed to generate shipping label"))
       }
-    },
-    setup() {
-      const store = useStore();
-      return {
-        openOutline,
-        refreshSharp,
-        translate,
-        store
-      };
     }
-  });
-  </script>
-
-  <style>
-
-  .shipgroup-details {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
-    gap: 10px;
+  },
+  setup() {
+    const store = useStore();
+    return {
+      openOutline,
+      refreshSharp,
+      translate,
+      store
+    };
   }
+});
+</script>
 
-  </style>
+<style>
+.shipgroup-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
+  gap: 10px;
+}
+</style>