Implemented: Product Upload Identifier card on Settings page (#314)

src/locales/en.json

@@ -37,13 +37,15 @@
   "Configure date time format": "Configure date time format",
   "Check sample": "Check sample",
   "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
+  "Choosing an identifier to map products by when uploading documents. If not explicitly specified Import will default to the identifier used during product import from Shopify.": "Choosing an identifier to map products by when uploading documents. If not explicitly specified Import will default to the identifier used during product import from Shopify.",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Completed": "Completed",
   "Confirm": "Confirm",
   "Configuration missing": "Configuration missing",
   "CSV input": "CSV input",
   "CSV Mapping": "CSV Mapping",
   "Custom date format": "Custom date format",
+  "Currently set to": "Currently set to {productIdentifierEnumId}",
   "Cycle count": "Cycle count",
   "Cycle count or similar": "Cycle count or similar",
   "Date Format": "Date Format",
@@ -82,6 +84,7 @@
   "Failed to update CSV mapping.": "Failed to update CSV mapping.",
   "Failed to update execution mode": "Failed to update execution mode",
   "Failed to update job": "Failed to update job",
+  "Failed to update product upload identifier.": "Failed to update product upload identifier.",
   "Failed to update shipment item quantity": "Failed to update shipment item quantity",
   "Facility: Use the internal ID of facilities in HotWax. Select external ID option if the uploaded CSV file is coming from a system like an ERP.": "Facility: Use the internal ID of facilities in HotWax. Select external ID option if the uploaded CSV file is coming from a system like an ERP.",
   "Fetching TimeZones": "Fetching TimeZones",
@@ -179,6 +182,8 @@
   "Product not found": "Product not found",
   "Product removed successfully": "Product removed successfully",
   "Product: Select the type of product identification used in the CSV. If the selected identification is not available on a row in the uploaded CSV, it will be skipped and presented in an error file.": "Product: Select the type of product identification used in the CSV. If the selected identification is not available on a row in the uploaded CSV, it will be skipped and presented in an error file.",
+  "Product Upload Identifier": "Product Upload Identifier",
+  "Product upload identifier updated successfully.": "Product upload identifier updated successfully.",
   "Purchase order": "Purchase order",
   "Purchase orders": "Purchase orders",
   "Quantity": "Quantity",
@@ -285,8 +290,10 @@
   "Uploaded files will be processed immediately": "Uploaded files will be processed immediately",
   "Uploaded files will be processed": "Uploaded files will be processed {runTime}",
   "Uploaded files will not be processed until the bulk file processing job is enabled.": "Uploaded files will not be processed until the bulk file processing job is enabled.",
+  "Upload Identifier": "Upload Identifier",
   "Upload purchase order": "Upload purchase order",
   "Username": "Username",
+  "Use default identifier": "Use default identifier",
   "Version: ": "Version: {appVersion}",
   "View all date time formats supported by the HotWax Import app.": "View all date time formats supported by the HotWax Import app.",
   "View": "View",

src/services/UserService.ts

@@ -145,7 +145,7 @@ const getUserPermissions = async (payload: any, token: any): Promise<any> => {
 async function getEComStores(): Promise<any> {
   const params = {
     "viewSize": 200,
-    "fieldList": ["productStoreId", "storeName"],
+    "fieldList": ["productStoreId", "storeName", "productIdentifierEnumId"],
     "entityName": "ProductStore",
     "distinct": "Y",
     "noConditionFind": "Y"

src/services/UtilService.ts

@@ -33,6 +33,23 @@ const fetchShopifyShop = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchProductSelectorPref = async (payload: any): Promise<any> => {
+  return api({
+    url: "/performFind",
+    method: "GET",
+    params: payload,
+    cache: true
+  })
+}
+
+const updateProductSelectorPref = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/updateProductStoreSetting",
+    method: "POST",
+    data: payload
+  })
+}
+
 const fetchProductStores = async (payload: any): Promise<any> => {
   return api({
     url: "/performFind",
@@ -137,6 +154,7 @@ export const UtilService = {
     fetchDataResource,
     fetchFileData,
     fetchProducts,
+    fetchProductSelectorPref,
     fetchProductStores,
     fetchShipmentItems,
     fetchGoodIdentificationTypes,
@@ -146,5 +164,6 @@ export const UtilService = {
     getServiceStatusDesc,
     removeShipmentItem,
     updateShipmentItem,
-    updateDataManagerConfig
+    updateDataManagerConfig,
+    updateProductSelectorPref
 }

src/store/index.ts

@@ -22,7 +22,7 @@ const state: any = {
 }
 
 const persistState = createPersistedState({
-    paths: ['user', 'util.productStores', 'util.statusDesc'],
+    paths: ['user', 'util.productStores', 'util.statusDesc', 'util.useDefaultProductStoreIdentifier'],
     fetchBeforeUse: true
 })
 

src/store/modules/user/actions.ts

@@ -76,6 +76,10 @@ const actions: ActionTree<UserState, RootState> = {
         useUserStore().eComStores = ecomStores
         await useUserStore().getEComStorePreference("SELECTED_BRAND")
         const preferredStore: any = useUserStore().getCurrentEComStore
+        // If the user's preferred store has a productIdentifierEnumId, set the default identifier value in the state
+        if(!preferredStore?.productIdentifierEnumId) {
+          this.dispatch('util/updateDefaultProductStoreIdentifier', false);
+        }
 
         await useProductIdentificationStore().getIdentificationPref(preferredStore.productStoreId)
           .catch((error) => logger.error(error));
@@ -127,6 +131,7 @@ const actions: ActionTree<UserState, RootState> = {
     this.dispatch('util/clearFacilities');
     this.dispatch('util/clearProductStores');
     this.dispatch('util/clearStatusDesc');
+    this.dispatch('util/clearDefaultProductStoreIdentifier');
     // clearing field mappings and current mapping when the user logout
     commit(types.USER_FIELD_MAPPINGS_UPDATED, {})
     commit(types.USER_CURRENT_FIELD_MAPPING_UPDATED, {id: '', mappingType: '', name: '', value: {}})

src/store/modules/util/UtilState.ts

@@ -8,4 +8,6 @@ export default interface UserState {
     shipmentItems: [],
     statusDesc: any;
     configDetails: {}
+    productSelectorPref: string;
+    useDefaultProductStoreIdentifier: boolean;
 }

src/store/modules/util/actions.ts

@@ -197,13 +197,64 @@ const actions: ActionTree<UtilState, RootState> = {
     }
     commit(types.UTIL_DATA_MANAGER_CONFIG_UPDATED, configDetails);
   },
+  async fetchProductSelectorPref({ commit }, eComStore){
+    let productSelectorPref = "";
+    const payload = {
+      "inputFields": {
+        "productStoreId": eComStore.productStoreId,
+        "settingTypeEnumId": "PRD_SELECTOR_PREF"
+      },
+      "entityName": "ProductStoreSetting",
+      "fieldList": ["settingValue", "settingTypeEnumId"],
+      "viewSize": 1
+    }
+
+    try {
+      const resp = await UtilService.fetchProductSelectorPref(payload)
+      if(!hasError(resp) && resp.data.docs?.length && resp.data.docs[0].settingValue) {
+        productSelectorPref = resp.data.docs[0].settingValue
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      console.error(err)
+    }
+    commit(types.UTIL_SELECTOR_PREF_UPDATED, productSelectorPref);
+  },
+  async updateProductSelectorPref({ commit }, payload) {
+    let productSelectorPref = "";
+    const params = {
+      "productStoreId": payload.productStoreId,
+      "settingTypeEnumId": "PRD_SELECTOR_PREF",
+      "settingValue": payload.productSelectorPref
+    }
+
+    try {
+      const resp = await UtilService.updateProductSelectorPref(params)
+      if(!hasError(resp)) {
+        productSelectorPref = payload.productSelectorPref
+        commit(types.UTIL_SELECTOR_PREF_UPDATED, productSelectorPref);
+        return true;
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      console.error(err)
+      return false;
+    }
+  },
+  async updateDefaultProductStoreIdentifier({ commit }, payload) {
+    commit(types.UTIL_STORE_DEFAULT_IDENTIFIER_UPDATED, payload);
+  },
   async updateExactInventoryType({ commit }, type) {
     commit(types.UTIL_EXACT_INVENTORY_TYPE_UPDATED, type);
   },
   async clearProductStores({ commit }) {
     commit(types.UTIL_PRODUCT_STORES_UPDATED, []);
   },
-
+  async clearDefaultProductStoreIdentifier({ commit }) {
+    commit(types.UTIL_STORE_DEFAULT_IDENTIFIER_UPDATED, true);
+  },
   async updateFileProcessingStatus({ commit }, status){
     commit(types.UTIL_FILE_PROCESSING_STATUS_UPDATED, { status });
   },

src/store/modules/util/getters.ts

@@ -29,6 +29,12 @@ const getters: GetterTree <UtilState, RootState> = {
     },
     getDataManagerConfig(state) {
         return state.configDetails
+    },
+    getProductSelectorPref: (state) => {
+        return state.productSelectorPref;
+    },
+    isDefaultProductStoreIdentifierSelected: (state) => {
+        return state.useDefaultProductStoreIdentifier;
     }
 }
 export default getters;

src/store/modules/util/index.ts

@@ -16,7 +16,9 @@ const userModule: Module<UserState, RootState> = {
       exactInventoryType: {},
       shipmentItems: [],
       statusDesc: {},
-      configDetails: {}
+      configDetails: {},
+      productSelectorPref: '',
+      useDefaultProductStoreIdentifier: true
     },
     getters,
     actions,

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

@@ -7,4 +7,6 @@ export const UTIL_PRODUCT_STORES_UPDATED = SN_UTIL + '/PRODUCT_STORES_UPDATED'
 export const UTIL_DATA_MANAGER_CONFIG_UPDATED = SN_UTIL + '/DATA_MANAGER_CONFIG_UPDATED'
 export const UTIL_EXACT_INVENTORY_TYPE_UPDATED = SN_UTIL + '/EXACT_INVENTORY_TYPE_UPDATED'
 export const UTIL_SERVICE_STATUS_DESC_UPDATED = SN_UTIL + '/SERVICE_STATUS_DESC_UPDATED'
-export const UTIL_SHIPMENT_ITEMS_UPDATED = SN_UTIL + '/SHIPMENT_ITEMS_UPDATED'
+export const UTIL_SHIPMENT_ITEMS_UPDATED = SN_UTIL + '/SHIPMENT_ITEMS_UPDATED'
+export const UTIL_SELECTOR_PREF_UPDATED = SN_UTIL + '/SELECTOR_PREF_UPDATED'
+export const UTIL_STORE_DEFAULT_IDENTIFIER_UPDATED = SN_UTIL + '/DEFAULT_IDENTIFIER_UPDATED'

src/store/modules/util/mutations.ts

@@ -31,6 +31,12 @@ const mutations: MutationTree <UtilState> = {
     },
     [types.UTIL_DATA_MANAGER_CONFIG_UPDATED] (state, payload) {
         state.configDetails = payload;
+    },
+    [types.UTIL_SELECTOR_PREF_UPDATED](state, payload) {
+        state.productSelectorPref = payload
+    },
+    [types.UTIL_STORE_DEFAULT_IDENTIFIER_UPDATED](state, payload) {
+        state.useDefaultProductStoreIdentifier = payload
     }
 }
 export default mutations;

src/views/ScheduledRestock.vue

@@ -41,7 +41,7 @@
           </ion-item-divider>
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
             <template v-if="field === 'productIdentification'">
-              <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "translate('Select')" v-model="identificationTypeId">
+              <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "translate('Select')" v-model="identificationTypeId" :selected-text="getIdentificationDesp(identificationTypeId)">
                 <ion-select-option :key="goodIdentificationType.goodIdentificationTypeId" :value="goodIdentificationType.goodIdentificationTypeId" v-for="goodIdentificationType in goodIdentificationTypes">{{ goodIdentificationType.description }}</ion-select-option>
               </ion-select>
               <ion-select aria-label="identification-type-value" interface="popover" :disabled="!content.length" :placeholder = "translate('Select')" slot="end" v-model="fieldMapping['productIdentification']">
@@ -110,9 +110,9 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 import { useRouter } from "vue-router";
-import { translate } from "@hotwax/dxp-components";
+import { translate, useUserStore } from "@hotwax/dxp-components";
 import { addOutline, arrowForwardOutline, cloudUploadOutline, ellipsisVerticalOutline, informationCircleOutline } from "ionicons/icons";
 import { IonBackButton, IonButton, IonButtons, IonChip, IonContent, IonDatetime, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonListHeader, IonModal, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, modalController, alertController } from "@ionic/vue";
 import parseFileMixin from '@/mixins/parseFileMixin';
@@ -157,7 +157,7 @@ export default defineComponent({
       fileColumns: [],
       fieldMapping: {},
       fields: process.env["VUE_APP_MAPPING_RSTSTK"] ? JSON.parse(process.env["VUE_APP_MAPPING_RSTSTK"]) : {},
-      identificationTypeId: "SKU",
+      identificationTypeId: "",
       schedule: '',
       isDateTimeModalOpen: false,
       shopifyShops: [],
@@ -179,6 +179,8 @@ export default defineComponent({
       productStores: 'util/getProductStores',
       userProfile: 'user/getUserProfile',
       facilities: 'util/getFacilities',
+      productSelectorPref: 'util/getProductSelectorPref',
+      isDefaultProductStoreIdentifierSelected: 'util/isDefaultProductStoreIdentifierSelected',
     })
   },
   mixins:[ parseFileMixin ],
@@ -196,12 +198,17 @@ export default defineComponent({
     this.selectedShopifyShopId = ""
     this.selectedFacility = ""
     await Promise.allSettled([this.store.dispatch('util/fetchFacilities'), this.store.dispatch('stock/fetchJobs'), this.store.dispatch('util/fetchProductStores'), this.store.dispatch('util/fetchGoodIdentificationTypes')])
+    if(!this.productSelectorPref) await this.store.dispatch('util/fetchProductSelectorPref', this.currentEComStore)
+    this.identificationTypeId = this.productSelectorPref || (this.isDefaultProductStoreIdentifierSelected ? this.currentEComStore.productIdentifierEnumId : 'SKU')
   },
 
   methods: {
     getPlaceholder() {
       return `Created ${this.getTime(this.schedule ? this.schedule : DateTime.now().toMillis())}`
     },
+    getIdentificationDesp(enumId) {
+      return enumId ? (this.goodIdentificationTypes.find((identification) => identification.goodIdentificationTypeId === enumId)?.description) || enumId : "SKU";
+    },
     async fetchShopifyShops(productStoreId) {
       let shopifyShops = []
       try {
@@ -391,12 +398,16 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
+    const userStore = useUserStore()
+    let currentEComStore = computed(() => userStore.getCurrentEComStore);
+
     return {
       router,
       translate,
       addOutline,
       arrowForwardOutline,
       cloudUploadOutline,
+      currentEComStore,
       ellipsisVerticalOutline,
       informationCircleOutline,
       store,