Fixed: Duplicate methods in drop-down in reroute-fulfillment card. Added a modal to choose both carrier and shipment method instead of just shipping method (#422).

ravilodhi · ravilodhi · commit 670cd7ccdf81 · 2024-12-05T13:08:23.000+05:30
diff --git a/src/components/EditShipmentMethodModal.vue b/src/components/EditShipmentMethodModal.vue
@@ -0,0 +1,127 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select shipping method") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label>{{ translate('Select which shipping method orders will receive when customer choose to have delivered instead of picked up.') }}</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-select :label="translate('Carrier')" v-model="carrierPartyId" interface="popover" @ionChange="getProductStoreShipmentMethods(carrierPartyId)">
+          <ion-select-option v-for="carrier in carriers" :key="carrier.partyId" :value="carrier.partyId">{{ carrier.groupName }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item>
+        <template v-if="productStoreShipmentMethods && productStoreShipmentMethods.length > 0">
+          <ion-select :label="translate('Method')" v-model="shipmentMethodTypeId" interface="popover">
+            <ion-select-option v-for="method in productStoreShipmentMethods" :key="method.productStoreShipMethId" :value="method.shipmentMethodTypeId">{{ method.description }}</ion-select-option>
+          </ion-select>
+        </template>
+        <template v-else>
+          <ion-label>
+            {{ translate('No shipment methods linked to', {carrierName: getCarrierName(carrierPartyId)}) }}
+          </ion-label>
+          <ion-button @click="openShippingMethodDocumentReference()" fill="clear" color="medium" slot="end">
+            <ion-icon slot="icon-only" :icon="informationCircleOutline" />
+          </ion-button>
+        </template>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button :disabled="!shipmentMethodTypeId" @click="save()">
+      <ion-icon :icon="saveOutline" />
+    </ion-fab-button>
+  </ion-fab>
+</template>
+  
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline, informationCircleOutline, saveOutline } from 'ionicons/icons';
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: "OrderItemRejHistoryModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonSelect,
+    IonSelectOption,
+    IonTitle,
+    IonToolbar,
+  },
+  data(){
+    return {
+      carrierPartyId: "",
+      shipmentMethodTypeId: "",
+      productStoreShipmentMethods: [] as any
+    }
+  },
+  props: ['currentcConfig', 'carriers', 'availableShipmentMethods'],
+  mounted() {
+      this.carrierPartyId = this.currentcConfig.carrierPartyId
+      this.getProductStoreShipmentMethods(this.carrierPartyId)
+      this.shipmentMethodTypeId = this.currentcConfig.shipmentMethodTypeId
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    async getProductStoreShipmentMethods(carrierPartyId: string) { 
+      this.productStoreShipmentMethods = this.availableShipmentMethods?.filter((method: any) => method.partyId === carrierPartyId) || [];
+      this.shipmentMethodTypeId = this.productStoreShipmentMethods[0]?.shipmentMethodTypeId;
+    },
+    getCarrierName(carrierPartyId: string) {
+      const selectedCarrier = this.carriers.find((carrier: any) => carrier.partyId === carrierPartyId)
+      return selectedCarrier && selectedCarrier.groupName ? selectedCarrier.groupName : carrierPartyId
+    },
+    openShippingMethodDocumentReference() {
+      window.open('https://docs.hotwax.co/documents/v/system-admins/fulfillment/shipping-methods/carrier-and-shipment-methods', '_blank');
+    },
+    save() {
+      modalController.dismiss({ dismissed: true, shippingMethod: JSON.stringify({"carrierPartyId": this.carrierPartyId, "shipmentMethodTypeId": this.shipmentMethodTypeId})});
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      informationCircleOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+  </script>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,5 +1,6 @@
 { 
   "App": "App",
+  "Add": "Add",
   "All items were rejected from the order": "All items were rejected from the order",
   "All order items are rejected": "All order items are rejected",
   "Allow partial rejection": "Allow partial rejection",
@@ -18,6 +19,7 @@
   "Cancel": "Cancel",
   "Cancel order before fulfillment": "Cancel order before fulfillment",
   "canceled from the order": "canceled from the order",
+  "Carrier": "Carrier",
   "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.",
   "Change": "Change",
   "Choose language": "Choose language",
@@ -73,6 +75,7 @@
   "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Logout": "Logout",
+  "Method": "Method",
   "Mismatch": "Mismatch",
   "More": "More",
   "New notification received.": "New notification received.",
@@ -84,6 +87,7 @@
   "No picker assigned.": "No picker assigned.",
   "No picker found": "No picker found",
   "No records found.": "No records found.",
+  "No shipment methods linked to": "No shipment methods linked to {carrierName}",
   "No time zone found": "No time zone found",
   "Notifications": "Notifications",
   "Notification Preference": "Notification Preference",
@@ -162,13 +166,15 @@
   "Select Facility": "Select Facility",
   "Search facilities": "Search facilities",
   "Select reason": "Select reason",
+  "Select shipping method": "Select shipping method",
   "Selected TimeZone":"Selected TimeZone",
   "Select a different time zone": "Select a different time zone",
   "Select time zone": "Select time zone",
   "Select the notifications you want to receive.": "Select the notifications you want to receive.",
   "Select your preferred language.": "Select your preferred language.",
   "Settings": "Settings",
   "Select a picker": "Select a picker",
+  "Select which shipping method orders will receive when customer choose to have delivered instead of picked up.": "Select which shipping method orders will receive when customer choose to have delivered instead of picked up.",
   "Send": "Send",
   "Ship": "Ship",
   "Shipment method": "Shipment method",
diff --git a/src/locales/es.json b/src/locales/es.json
@@ -1,5 +1,6 @@
 {
   "App": "Aplicación",
+  "Add": "Add",
   "All items were rejected from the order": "Todos los artículos fueron rechazados del pedido",
   "All order items are rejected": "Todos los artículos del pedido son rechazados",
   "Allow partial rejection": "Permitir rechazo parcial",
@@ -18,6 +19,7 @@
   "Cancel": "Cancelar",
   "Cancel order before fulfillment": "Cancelar pedido antes del cumplimiento",
   "canceled from the order": "cancelado del pedido",
+  "Carrier": "Carrier",
   "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.": "Controle lo que sus clientes pueden editar en su pedido cuando editan su pedido en Reenrutar el cumplimiento.",
   "Change": "Cambiar",
   "Choose language": "Elegir idioma",
@@ -36,6 +38,7 @@
   "Delivery method": "Método de entrega",
   "Dismiss": "Descartar",
   "eCom Store": "Tienda electrónica",
+  "Edit": "Edit",
   "Edit pickers": "Editar recolectores",
   "Email sent successfully": "Correo enviado satisfactoriamente",
   "Enable tracking": "Habilitar seguimiento",
@@ -70,6 +73,7 @@
   "Logging in": "Iniciando sesión",
   "Logging out": "Cerrando sesión",
   "Logout": "Cerrar sesión",
+  "Method": "Method",
   "Mismatch": "Desajuste",
   "More": "Más",
   "New notification received.": "Nueva notificación recibida.",
@@ -81,6 +85,7 @@
   "No picker assigned.": "No hay recolector asignado.",
   "No picker found": "No se encontró recolector",
   "No records found.": "No se encontraron registros.",
+  "No shipment methods linked to": "No shipment methods linked to {carrierName}",
   "No time zone found": "No se encontró zona horaria",
   "Notifications": "Notificaciones",
   "Notification Preference": "Preferencias de notificación",
@@ -159,13 +164,15 @@
   "Select Facility": "Select Facility",
   "Search facilities": "Search facilities",
   "Select reason": "Seleccionar motivo",
+  "Select shipping method": "Select shipping method",
   "Selected TimeZone":"Selected TimeZone",
   "Select a different time zone": "Select a different time zone",
   "Select time zone": "Seleccionar zona horaria",
   "Select the notifications you want to receive.": "Selecciona las notificaciones que deseas recibir.",
   "Select your preferred language.": "Selecciona tu idioma preferido.",
   "Settings": "Configuraciones",
   "Select a picker": "Seleccionar un recolector",
+  "Select which shipping method orders will receive when customer choose to have delivered instead of picked up.": "Select which shipping method orders will receive when customer choose to have delivered instead of picked up.",
   "Send": "Enviar",
   "Ship": "Enviar",
   "Shipment method": "Método de envío",
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -65,9 +65,15 @@
             <ion-toggle label-placement="start" :disabled="!hasPermission(Actions.APP_RF_CONFIG_UPDATE) || Object.keys(rerouteFulfillmentConfig.orderItemSplit).length == 0" :checked="rerouteFulfillmentConfig.orderItemSplit.settingValue" @ionChange="updateRerouteFulfillmentConfiguration(rerouteFulfillmentConfig.orderItemSplit, $event.detail.checked)">{{ translate("Order item split") }}</ion-toggle>
           </ion-item>
           <ion-item lines="none">
-            <ion-select :label="translate('Shipment method')" :disabled="!hasPermission(Actions.APP_RF_CONFIG_UPDATE) || Object.keys(rerouteFulfillmentConfig.shippingMethod).length == 0" interface="popover" :value="rerouteFulfillmentConfig.shippingMethod.settingValue" @ionChange="updateRerouteFulfillmentConfiguration(rerouteFulfillmentConfig.shippingMethod, $event.detail.value)">
-              <ion-select-option v-for="shipmentMethod in availableShipmentMethods" :key="shipmentMethod.shipmentMethodTypeId" :value="shipmentMethod.shipmentMethodTypeId" >{{ shipmentMethod.description }}</ion-select-option>
-            </ion-select>
+            <ion-label v-if="Object.keys(getShipmentMethodConfig()).length > 0">
+              <p class="overline">{{ translate('Shipment method') }}</p>
+              {{ getShipmentMethodConfig()?.shipmentMethodDesc }}
+              <p>{{ getShipmentMethodConfig().carrierName }}</p>
+            </ion-label>
+            <ion-label v-else>
+              {{ translate('Shipment method') }}
+            </ion-label>
+            <ion-button slot="end" fill="outline" color="dark" :disabled="!hasPermission(Actions.APP_RF_CONFIG_UPDATE) || Object.keys(rerouteFulfillmentConfig.shippingMethod).length == 0" @click="openEditShipmentMethodModal(rerouteFulfillmentConfig.shippingMethod)">{{ Object.keys(getShipmentMethodConfig()).length > 0 ? translate('Edit') : translate('Add')}}</ion-button>
           </ion-item>
         </ion-card>
 
@@ -180,13 +186,13 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
+  IonLabel,
   IonList,
   IonPage,
-  IonSelect,
-  IonSelectOption,
   IonTitle,
   IonToggle,
-  IonToolbar
+  IonToolbar,
+  modalController
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
 import {
@@ -209,6 +215,7 @@ import { Actions, hasPermission } from '@/authorization'
 import { addNotification, generateTopicName, isFcmConfigured, storeClientRegistrationToken } from "@/utils/firebase";
 import emitter from "@/event-bus"
 import logger from '@/logger';
+import EditShipmentMethodModal from '@/components/EditShipmentMethodModal.vue';
 
 export default defineComponent({
   name: 'Settings',
@@ -224,10 +231,9 @@ export default defineComponent({
     IonHeader, 
     IonIcon,
     IonItem, 
+    IonLabel,
     IonList,
     IonPage, 
-    IonSelect, 
-    IonSelectOption,
     IonTitle,
     IonToggle, 
     IonToolbar,
@@ -247,6 +253,7 @@ export default defineComponent({
         shippingMethod: {},
         orderItemSplit: {}
       } as any,
+      carriers: [] as any,
       availableShipmentMethods: [] as any,
       rerouteFulfillmentConfigMapping: (process.env.VUE_APP_RF_CNFG_MPNG? JSON.parse(process.env.VUE_APP_RF_CNFG_MPNG) : {}) as any
     }
@@ -268,6 +275,7 @@ export default defineComponent({
   async ionViewWillEnter() {
     // Only fetch configuration when environment mapping exists
     if (Object.keys(this.rerouteFulfillmentConfigMapping).length > 0) {
+      this.fetchCarriers()
       this.getAvailableShipmentMethods();
       this.getRerouteFulfillmentConfiguration();
     }
@@ -314,6 +322,59 @@ export default defineComponent({
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
     },
+    async openEditShipmentMethodModal(config: any) {
+      const editShipmentMethodModal = await modalController.create({
+        component: EditShipmentMethodModal,
+        componentProps: { currentcConfig: this.getShipmentMethodConfig(), carriers:  this.carriers, availableShipmentMethods: this.availableShipmentMethods }
+      });
+      
+      editShipmentMethodModal.onDidDismiss().then(async(result: any) => {
+        if(result.data?.shippingMethod) {
+          await this.updateRerouteFulfillmentConfiguration(config, result.data?.shippingMethod)
+        }
+      })
+
+      return editShipmentMethodModal.present();
+    },
+    getShipmentMethodConfig() {
+      if (Object.keys(this.rerouteFulfillmentConfig.shippingMethod).length !== 0) {
+        try {
+          const shippingMethodConfig = this.rerouteFulfillmentConfig.shippingMethod.settingValue ? JSON.parse(this.rerouteFulfillmentConfig.shippingMethod.settingValue) : {};
+          if (Object.keys(shippingMethodConfig).length > 0) {
+            const shipmentMethodDesc = this.availableShipmentMethods.find((shipmentMethod: any) => shipmentMethod.shipmentMethodTypeId === shippingMethodConfig.shipmentMethodTypeId)?.description;
+            const carrierName = this.carriers.find((carrier: any) => carrier.partyId === shippingMethodConfig.carrierPartyId)?.groupName;
+            return { ...shippingMethodConfig, shipmentMethodDesc, carrierName };
+          }
+        } catch (error) {
+          console.error('Error parsing shipping method config:', error);
+          return {};
+        }
+      }
+      return {};
+    },
+    async fetchCarriers () {
+      this.availableShipmentMethods = [];
+      try {
+        const resp = await UserService.getRerouteFulfillmentConfig({
+          "entityName": "CarrierShipmentMethodCount",
+          "inputFields": {
+            "roleTypeId": "CARRIER",
+            "partyTypeId": "PARTY_GROUP"
+          },
+          "fieldList": ["partyId", "roleTypeId", "groupName"],
+          "viewIndex": 0,
+          "viewSize": 250,  // maximum records we could have
+          "distinct": "Y",
+          "noConditionFind": "Y",
+          "orderBy": "groupName"
+        }) as any;
+        if (!hasError(resp) && resp.data?.docs) {
+          this.carriers = resp.data.docs;
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    },
     async getAvailableShipmentMethods () {
       this.availableShipmentMethods = [];
       try {
@@ -325,8 +386,8 @@ export default defineComponent({
           },
           "filterByDate": 'Y',
           "entityName": "ProductStoreShipmentMethView",
-          "fieldList": ["shipmentMethodTypeId", "description"],
-          "viewSize": 10
+          "fieldList": ["productStoreShipMethId", "partyId", "shipmentMethodTypeId", "description"],
+          "viewSize": 250
         }) as any;
         if (!hasError(resp) && resp.data?.docs) {
           this.availableShipmentMethods = resp.data.docs;
