Improved: icon for selecting store for item, added state variable for…

… cancellation setting and dynamic text on ui based on cancellation settings (hotwax#92)

src/store/modules/user/UserState.ts

@@ -5,4 +5,5 @@ export default interface UserState {
     deliveryMethod: string;
     permissions: any;
     isSplitEnabled: boolean;
+    isCancellationAllowed: boolean;
 }

src/store/modules/user/actions.ts

@@ -128,11 +128,13 @@ const actions: ActionTree<UserState, RootState> = {
         const permissions = resp.data.docs.filter((permission: any) => permission.settingValue == 'true').map((permission: any) => permission.settingTypeEnumId)
         const deliveryMethod = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'RF_SHIPPING_METHOD')?.settingValue
         const isSplitEnabled = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'CUST_ORD_ITEM_SPLIT')?.settingValue
+        const isCancellationAllowed = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'CUST_ALLOW_CNCL')?.settingValue
         const appPermissions = prepareAppPermissions(permissions);
         setPermissions(appPermissions);
         commit(types.USER_DELIVERY_METHOD_UPDATED, deliveryMethod ? deliveryMethod : "STANDARD");
         commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
         commit(types.USER_ORDER_SPLIT_CONFIG_UPDATED, isSplitEnabled === "true");
+        commit(types.USER_ITEM_CANCELLATION_CONFIG_UPDATED, isCancellationAllowed === "true");
       }
     } catch (error) {
       console.error(error)

src/store/modules/user/getters.ts

@@ -27,6 +27,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     isSplitEnabled (state) {
         return state.isSplitEnabled;
+    },
+    isCancellationAllowed (state) {
+        return state.isCancellationAllowed
     }
 }
 export default getters;

src/store/modules/user/index.ts

@@ -13,7 +13,8 @@ const userModule: Module<UserState, RootState> = {
       instanceUrl: '',
       deliveryMethod: '',
       permissions: [],
-      isSplitEnabled: false
+      isSplitEnabled: false,
+      isCancellationAllowed: false
     },
     getters,
     actions,

src/store/modules/user/mutation-types.ts

@@ -6,3 +6,4 @@ export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_DELIVERY_METHOD_UPDATED = SN_USER + '/DELIVERY_METHOD_UPDATED'
 export const USER_ORDER_SPLIT_CONFIG_UPDATED = SN_USER + '/ORDER_SPLIT_CONFIG_UPDATED'
+export const USER_ITEM_CANCELLATION_CONFIG_UPDATED = SN_USER + '/ITEM_CANCELLATION_CONFIG_UPDATED'

src/store/modules/user/mutations.ts

@@ -25,6 +25,9 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_ORDER_SPLIT_CONFIG_UPDATED] (state, payload) {
         state.isSplitEnabled = payload
+    },
+    [types.USER_ITEM_CANCELLATION_CONFIG_UPDATED] (state, payload) {
+        state.isCancellationAllowed = payload
     }
 }
 export default mutations;

src/views/Order.vue

@@ -59,7 +59,7 @@
                   <Image :src='getProduct(item.productId).mainImageUrl' />
                 </ion-thumbnail>
                 <ion-label>
-                  <p class="overline" v-if="item.isItemCancelled">{{ translate("Request Cancellation") }}</p>
+                  <p class="overline" v-if="item.isItemCancelled">{{ translate(isCancellationAllowed ? "Cancel" : "Request Cancellation") }}</p>
                   {{ item.name }}
                   <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(item.productId).featureHierarchy))" :key="attribute" >
                     <span class="sentence-case">{{ feature }}</span>: {{ attribute }}
@@ -73,6 +73,7 @@
                   </ion-chip>
                   <ion-button v-else slot="end" fill="clear" @click="updatePickupLocation(false, item.selectedFacilityId, item)">
                     <ion-icon :icon="addOutline" slot="icon-only" />
+                    <ion-icon :icon="storefrontOutline" slot="icon-only" />
                   </ion-button>
                 </template>
               </ion-item>
@@ -89,7 +90,7 @@
                     <Image :src='getProduct(item.productId).mainImageUrl' />
                   </ion-thumbnail>
                   <ion-label>
-                    <p class="overline" v-if="item.isItemCancelled">{{ translate("Request Cancellation") }}</p>
+                    <p class="overline" v-if="item.isItemCancelled">{{ translate(isCancellationAllowed ? "Cancel" :"Request Cancellation") }}</p>
                     {{ item.name }}
                     <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(item.productId).featureHierarchy))" :key="attribute" >
                       <span class="sentence-case">{{ feature }}</span>: {{ attribute }}
@@ -150,7 +151,7 @@
 
             <div class="actions">
               <ion-button :disabled="!isOrderItemsEligibleForUpdation(order.shipGroup)" @click="confirmSave(order.shipGroup)" fill="clear">{{ translate("Save changes") }}</ion-button>
-              <ion-button v-if="hasPermission(Actions.APP_SHPGRP_CNCL)" @click="cancelOrder(order.shipGroup)" fill="clear" color="danger">{{ translate("Cancel") }}</ion-button>
+              <ion-button @click="cancelOrder(order.shipGroup)" fill="clear" color="danger">{{ translate(isCancellationAllowed ? "Cancel" : "Request cancel") }}</ion-button>
             </div>
           </ion-card>
           <div v-else-if="isOrderUpdated" class="ion-text-center ion-padding-top">
@@ -256,6 +257,7 @@ export default defineComponent({
     ...mapGetters({
       deliveryMethod: 'user/getDeliveryMethod',
       isSplitEnabled: 'user/isSplitEnabled',
+      isCancellationAllowed: 'user/isCancellationAllowed'
     })
   },
   props: ["token"],
@@ -556,6 +558,7 @@ export default defineComponent({
           {
             text: translate("Cancel"),
             handler: async () => {
+              // Todo: handle case for the request cancellation
               const isCancelled = await this.cancelShipGroup(shipGroup, []);
               showToast(translate(isCancelled ? "Order cancelled successfully." : "Failed to cancel the order."))
             }

src/views/PickupLocationModal.vue

@@ -30,7 +30,7 @@
       <ion-radio-group v-model="selectedFacilityIdValue">
         <ion-item lines="none" v-if="!isPickupForAll">
           <ion-radio label-placement="end" value="cancel">
-            <ion-label>{{ translate("Request cancelation") }}</ion-label>
+            <ion-label>{{ translate(isCancellationAllowed ? "Cancel item" : "Request cancelation") }}</ion-label>
           </ion-radio>
         </ion-item>
 
@@ -83,8 +83,8 @@ import {
 import { defineComponent } from 'vue';
 import { closeOutline, locationOutline } from 'ionicons/icons';
 import { useRouter } from "vue-router";
-import { useStore } from "@/store";
 import { translate } from '@/i18n';
+import { mapGetters, useStore } from 'vuex'
 
 export default defineComponent({
   name: 'PickupLocationModal',
@@ -114,6 +114,13 @@ export default defineComponent({
     }
   },
   props: ["nearbyStores", "isPickupForAll", "availableStores", "storesWithInventory", "selectedFacilityId", "currentProductId", "customerAddress"],
+  computed: {
+    ...mapGetters({
+      deliveryMethod: 'user/getDeliveryMethod',
+      isSplitEnabled: 'user/isSplitEnabled',
+      isCancellationAllowed: 'user/isCancellationAllowed'
+    })
+  },
   async mounted() {
     if(this.isPickupForAll) {
       this.stores = this.nearbyStores