Implemented: functionality to product store card on facility details page (#10)

src/components/ProductStorePopover.vue

@@ -0,0 +1,195 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ getProductStore(currentProductStore.productStoreId).storeName }}</ion-list-header>
+      <ion-item button @click="makePrimary()">
+        {{ translate("Primary") }}
+        <ion-icon slot="end"  :color="primaryMember.facilityGroupId === currentProductStore.productStoreId ? 'warning' : ''" :icon="primaryMember.facilityGroupId === currentProductStore.productStoreId ? star : starOutline" />
+      </ion-item>
+      <ion-item button lines="none" @click="removeStoreFromFacility()">
+        {{ translate("Unlink") }}
+        <ion-icon slot="end" :icon="removeCircleOutline" />
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonList,
+  IonListHeader,
+  IonIcon,
+  IonItem,
+  popoverController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { removeCircleOutline, star, starOutline } from "ionicons/icons";
+import { translate } from "@hotwax/dxp-components";
+import { mapGetters, useStore } from "vuex";
+import { FacilityService } from "@/services/FacilityService";
+import { DateTime } from "luxon";
+import { hasError } from "@/adapter";
+import { showToast } from "@/utils";
+import logger from "@/logger";
+
+export default defineComponent({
+  name: "ProductStorePopover",
+  components: {
+    IonContent,
+    IonList,
+    IonListHeader,
+    IonIcon,
+    IonItem
+  },
+  props: ['currentProductStore', 'facilityId', 'primaryMember'],
+  computed: {
+    ...mapGetters({
+      facilityProductStores: 'facility/getFacilityProductStores',
+      productStores: 'util/getProductStores',
+      getProductStore: 'util/getProductStore'
+    })
+  },
+  methods: {
+    async removeStoreFromFacility() {
+      try {
+        const resp = await FacilityService.updateProductStoreFacility({
+          facilityId: this.facilityId,
+          productStoreId: this.currentProductStore.productStoreId,
+          fromDate: this.currentProductStore.fromDate,
+          thruDate: DateTime.now().toMillis()
+        })
+
+        if(!hasError(resp)) {
+          showToast(translate('Store unlinked successfully.'))
+
+          // Removing store from primary Member group if primary.
+          if(this.currentProductStore.productStoreId === this.primaryMember.facilityGroupId){
+            await this.removeProductFromPrimaryMember()
+          }
+
+          // refetching product stores with updated roles
+          await this.store.dispatch('facility/getFacilityProductStores', { facilityId: this.facilityId })
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+        showToast(translate('Store unlink failed.'))
+      }
+      popoverController.dismiss()
+    },
+    async makePrimary() {
+      const productStoreId = this.currentProductStore.productStoreId
+      if(this.primaryMember.facilityGroupId === productStoreId) {
+        this.removeProductFromPrimaryMember()
+        popoverController.dismiss()
+        return;
+      }
+
+      let resp;
+      let facilityGroupId;
+
+      facilityGroupId = await this.fetchFacilityGroup(productStoreId)
+
+      if(!facilityGroupId) {
+        facilityGroupId = await this.createFacilityGroup(productStoreId)
+      } 
+
+      if(facilityGroupId) {
+        try {
+          resp = await FacilityService.addFacilityToGroup({
+            facilityId: this.facilityId,
+            facilityGroupId: facilityGroupId
+          })
+
+          if(!hasError(resp)) {
+            // Remove old primary store
+            if(this.primaryMember.facilityGroupId) {
+              await this.removeProductFromPrimaryMember()
+            }
+          } else {
+            throw resp.data
+          }
+        } catch(err) {
+          showToast(translate("Failed to make product store primary."))
+          logger.error(err)
+        }
+      } else {
+        showToast(translate("Failed to make product store primary."))
+      }
+      popoverController.dismiss()
+    },
+    async fetchFacilityGroup(productStoreId: string) {
+      let facilityGroupId;
+      let resp;
+      try {
+        resp = await FacilityService.fetchFacilityGroup({
+          inputFields: {
+            facilityGroupId: productStoreId
+          },
+          entityName: 'FacilityGroup',
+          viewSize: 100
+        })
+
+        if(!hasError(resp)) {
+          facilityGroupId = resp.data.docs[0].facilityGroupId
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+      return facilityGroupId
+    },
+    async createFacilityGroup(productStoreId: string) {
+      let facilityGroupId;
+      try {
+        const resp = await FacilityService.createFacilityGroup({
+          facilityGroupTypeId: 'FEATURING',
+          facilityGroupName: this.getProductStore(productStoreId).storeName,
+          facilityGroupId: productStoreId
+        })
+
+        if(!hasError(resp)) {
+          facilityGroupId = resp.data.facilityGroupId
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+
+      return facilityGroupId
+    },
+    async removeProductFromPrimaryMember() {
+      let resp;
+      try {
+        resp = await FacilityService.updateFacilityToGroup({
+          "facilityId": this.facilityId,
+          "facilityGroupId": this.primaryMember.facilityGroupId,
+          "fromDate": this.primaryMember.fromDate,
+          "thruDate": DateTime.now().toMillis()
+        })
+
+        if(hasError(resp)) {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error(err)
+      }
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      removeCircleOutline,
+      star,
+      starOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>

src/components/SelectProductStoreModal.vue

@@ -12,17 +12,16 @@
 
   <ion-content>
     <ion-list>
-      <ion-item>
+      <ion-item v-for="productStore in productStores" :key="productStore.productStoreId">
         <ion-label>
-          {{ "Demo Store" }}
-          <p>{{ "STORE_ID" }}</p>
+          {{ productStore.storeName }}
+          <p>{{ productStore.productStoreId }}</p>
         </ion-label>
-        <ion-checkbox slot="end" :checked="true" />
+        <ion-checkbox slot="end" :checked="isSelected(productStore.productStoreId)" @ionChange="toggleProductStoreSelection(productStore)" />
       </ion-item>
     </ion-list>
-
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-      <ion-fab-button>
+      <ion-fab-button :disabled="isProductStoreUpdated()" @click="saveProductStores()">
         <ion-icon :icon="saveOutline" />  
       </ion-fab-button>
     </ion-fab>
@@ -49,6 +48,7 @@ import {
 import { defineComponent } from "vue";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
+import { mapGetters, useStore } from "vuex";
 
 export default defineComponent({
   name: "SelectProductStoreModal",
@@ -67,15 +67,59 @@ export default defineComponent({
     IonTitle,
     IonToolbar
   },
+  computed: {
+    ...mapGetters({
+      productStores: 'util/getProductStores',
+      facilityProductStores: 'facility/getFacilityProductStores',
+    })
+  },
+  props: ["facilityId", "selectedProductStores"],
+  data() {
+    return {
+      selectedProductStoreValues: JSON.parse(JSON.stringify(this.selectedProductStores)),
+    }
+  },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true});
+    },
+    async saveProductStores() {
+      const productStoresToCreate = this.selectedProductStoreValues.filter((selectedFacility: any) => !this.selectedProductStores.some((facility: any) => facility.facilityId === selectedFacility.facilityId))
+      const productStoresToRemove = this.selectedProductStores.filter((facility: any) => !this.selectedProductStoreValues.some((selectedFacility: any) => facility.facilityId === selectedFacility.facilityId))
+
+      modalController.dismiss({
+        dismissed: true,
+        value: {
+          selectedProductStores: this.selectedProductStoreValues,
+          productStoresToCreate,
+          productStoresToRemove
+        }
+      });
+
+      modalController.dismiss()
+    },
+    toggleProductStoreSelection(updatedStore: any) {
+      let selectedStore = this.selectedProductStoreValues.some((store: any) => store.productStoreId === updatedStore.productStoreId);
+      if(selectedStore) {
+        this.selectedProductStoreValues = this.selectedProductStoreValues.filter((store: any) => store.productStoreId !== updatedStore.productStoreId);
+      } else {
+        this.selectedProductStoreValues.push(updatedStore);
+      }
+    },
+    isSelected(productStoreId: string) {
+      return this.selectedProductStoreValues.some((productStore: any) => productStore.productStoreId === productStoreId);
+    },
+    isProductStoreUpdated() {
+      return this.selectedProductStoreValues.some((selectedStore: any) => this.selectedProductStores.some((store: any) => store.productStoreId === selectedStore.productStoreId));
     }
   },
   setup() {
+    const store = useStore()
+
     return {
       closeOutline,
       saveOutline,
+      store,
       translate
     };
   },

src/locales/en.json

@@ -54,6 +54,7 @@
   "Failed to create shopify mapping": "Failed to create shopify mapping",
   "Failed to fetch facility information": "Failed to fetch facility information",
   "Failed to find the facility locations": "Failed to find the facility locations",
+  "Failed to make product store primary.": "Failed to make product store primary.",
   "Failed to remove facility location": "Failed to remove facility location",
   "Failed to remove facility mapping": "Failed to remove facility mapping",
   "Failed to remove party from facility.": "Failed to remove party from facility.",
@@ -64,6 +65,7 @@
   "Failed to update fulfillment capacity for ": "Failed to update fulfillment capacity for {facilityName}",
   "Failed to update fulfillment setting": "Failed to update fulfillment setting",
   "Failed to update shopify mapping": "Failed to update shopify mapping",
+  "Failed to update some product stores": "Failed to update some product stores",
   "Failed to update some role(s).": "Failed to update some role(s).",
   "Fetching TimeZones": "Fetching TimeZones",
   "Find Facilities": "Find Facilities",
@@ -95,7 +97,6 @@
   "Login failed": "Login failed",
   "Logout": "Logout",
   "Longitude": "Longitude",
-  "Make primary": "Make primary",
   "Mapping ID": "Mapping ID",
   "Mapping Name": "Mapping Name",
   "Map facility to an external system": "Map facility to an external system",
@@ -126,9 +127,11 @@
   "Please contact the administrator.": "Please contact the administrator.",
   "Please enter a valid value": "Please enter a valid value",
   "Please fill all the required fields": "Please fill all the required fields",
+  "Primary": "Primary",
   "primary store": "primary store",
   "Product Store": "Product Store",
   "Product Stores": "Product Stores",
+  "Product stores updated successfully.": "Product stores updated successfully.",
   "Reason:": "Reason:",
   "Remove": "Remove",
   "Remove location": "Remove location",
@@ -166,7 +169,10 @@
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Staff": "Staff",
   "State": "State",
+  "Store": "Store",
   "store name": "store name",
+  "Store unlink failed.": "Store unlink failed.",
+  "Store unlinked successfully.": "Store unlinked successfully.",
   "Sunday": "Sunday",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.": "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.",