Merge branch 'main' of https://github.com/hotwax/dxp-components into …

…dxp-components/#138

.eslintrc.js

@@ -6,4 +6,4 @@ module.exports = {
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier"
   ]
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotwax/dxp-components",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -25,6 +25,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@hotwax/oms-api": "^1.8.1",
+    "firebase": "^10.3.1",
     "@ionic/core": "^6.7.5",
     "@ionic/vue": "^6.7.5",
     "luxon": "^3.3.0",

src/components/Login.ts

@@ -1,5 +1,6 @@
 import { defineComponent } from "vue"
-import { loginContext as context, useAuthStore, appContext } from "../index"
+import { initialiseFirebaseApp } from "../utils/firebase"
+import { loginContext as context, useAuthStore, appContext, loginContext, noitificationContext } from "../index"
 import { DateTime } from "luxon"
 
 export default defineComponent({
@@ -33,8 +34,15 @@ export default defineComponent({
   },
   methods: {
     async handleUserFlow(token: string, oms: string, expirationTime: string) {
-      // logout to clear current user state
-      await context.logout()
+
+      // fetch the current config for the user
+      const appConfig = loginContext.getConfig()
+
+      // logout to clear current user state, don't mark the user as logout as we just want to clear the user data
+      await context.logout({ isUserUnauthorised: true })
+
+      // reset the config that we got from the oms-api, as on logout we clear the config of oms-api
+      await context.initialise(appConfig)
 
       // checking if token from launchpad has expired and redirecting there only
       if (+expirationTime < DateTime.now().toMillis()) {
@@ -54,6 +62,15 @@ export default defineComponent({
       context.loader.present('Logging in')
       try {
         await context.login({ token, oms })
+
+        // initialising and connecting firebase app for notification support
+        await initialiseFirebaseApp(
+          noitificationContext.appFirebaseConfig,
+          noitificationContext.appFirebaseVapidKey,
+          noitificationContext.storeClientRegistrationToken,
+          noitificationContext.addNotification,
+        )
+
         this.router.push('/')
       } catch (error) {
         console.error(error)

src/components/ProductIdentifier.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- TODO: implement support for i18n -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{ 'Product Identifier' }}
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      {{ 'Choosing a product identifier allows you to view products with your preferred identifiers.' }}
+    </ion-card-content>
+
+    <ion-item>
+      <ion-label>{{ "Primary Product Identifier" }}</ion-label>
+      <ion-select interface="popover" :placeholder="'primary identifier'" :value="productIdentificationPref.primaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'primaryId')">
+        <ion-select-option v-for="identification in productIdentificationOptions" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-label>{{ "Secondary Product Identifier" }}</ion-label>
+      <ion-select interface="popover" :placeholder="'secondary identifier'" :value="productIdentificationPref.secondaryId" @ionChange="setProductIdentificationPref($event.detail.value, 'secondaryId')">
+        <ion-select-option v-for="identification in productIdentificationOptions" :key="identification" :value="identification" >{{ identification }}</ion-select-option>
+        <ion-select-option value="">{{ "None" }}</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { appContext } from 'src';
+import { useProductIdentificationStore } from 'src/store/productIdentification';
+import { computed, onMounted } from 'vue';
+
+const productIdentificationStore = useProductIdentificationStore();
+
+const appState = appContext.config.globalProperties.$store
+const eComStore = computed(() => appState.getters['user/getCurrentEComStore'])
+const productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref);
+const productIdentificationOptions = productIdentificationStore.getProductIdentificationOptions;
+
+onMounted(() => {
+  productIdentificationStore.getIdentificationPref(eComStore.value.productStoreId);
+})
+
+function setProductIdentificationPref(value: string | any, id: string) {
+  productIdentificationStore.setProductIdentificationPref(id, value, eComStore.value.productStoreId)
+}
+
+</script>

src/components/index.ts

@@ -14,4 +14,7 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as FacilitySwitcher } from './FacilitySwitcher.vue';
+import FacilitySwitcher from './FacilitySwitcher.vue';
+import ProductIdentifier from './ProductIdentifier.vue';
+
+export { FacilitySwitcher, ProductIdentifier };

src/index.ts

@@ -1,11 +1,14 @@
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
+
 import Login from "./components/Login";
-import { FacilitySwitcher } from "./components";
 import ShopifyImg from "./components/ShopifyImg";
 import { goToOms } from "./utils";
+import { initialiseFirebaseApp } from "./utils/firebase"
+
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { FacilitySwitcher, ProductIdentifier } from "./components";
 
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
@@ -16,6 +19,7 @@ let loginContext = {} as any
 let shopifyImgContext = {} as any
 let appContext = {} as any
 let productIdentificationContext = {} as any
+let noitificationContext = {} as any
 
 // executed on app initialization
 export let dxpComponents = {
@@ -28,6 +32,7 @@ export let dxpComponents = {
     app.component('Login', Login)
     app.component('FacilitySwitcher', FacilitySwitcher)
     app.component('ShopifyImg', ShopifyImg)
+    app.component('ProductIdentifier', ProductIdentifier)
 
     loginContext.login = options.login
     loginContext.logout = options.logout
@@ -37,18 +42,29 @@ export let dxpComponents = {
     shopifyImgContext.defaultImgUrl = options.defaultImgUrl
     productIdentificationContext.getProductIdentificationPref = options.getProductIdentificationPref
     productIdentificationContext.setProductIdentificationPref = options.setProductIdentificationPref
+
+    noitificationContext.addNotification = options.addNotification
+    noitificationContext.appFirebaseConfig = options.appFirebaseConfig
+    noitificationContext.appFirebaseVapidKey = options.appFirebaseVapidKey
+    noitificationContext.storeClientRegistrationToken = options.storeClientRegistrationToken
+
+    loginContext.getConfig = options.getConfig
+    loginContext.initialise = options.initialise
   }
 }
 
 export {
   appContext,
   FacilitySwitcher,
   goToOms,
+  initialiseFirebaseApp,
   Login,
   loginContext,
   productIdentificationContext,
-  shopifyImgContext,
+  noitificationContext,
   ShopifyImg,
+  shopifyImgContext,
   useProductIdentificationStore,
   useAuthStore,
+  ProductIdentifier
 }

src/store/productIdentification.ts

@@ -30,6 +30,7 @@ export const useProductIdentificationStore = defineStore('productIdentification'
       try {
         this.productIdentificationPref = await productIdentificationContext.setProductIdentificationPref(eComStoreId, productIdentificationPref)
       } catch(err) {
+        // TODO: display a toast message in failed scenario
         console.log('error', err)
       }
     },

src/utils/firebase.ts

@@ -0,0 +1,39 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
+
+const initialiseFirebaseApp = async (
+  appFirebaseConfig: any,
+  appFirebaseVapidKey: string,
+  storeClientRegistrationToken: Function,
+  addNotification: Function
+) => {
+  const firebaseConfig = appFirebaseConfig
+
+  const app = initializeApp(firebaseConfig);
+  const messaging = getMessaging(app);
+  const permission = await Notification.requestPermission();
+
+  if (permission === "granted") {
+    const token = await getToken(messaging, {
+      vapidKey: appFirebaseVapidKey
+    });
+    await storeClientRegistrationToken(token)
+
+    // handle foreground message
+    onMessage(messaging, (payload: any) => {
+      addNotification({ notification: payload, isForeground: true });
+    });
+
+    // handle background message (service worker)
+    const broadcast = new BroadcastChannel('FB_BG_MESSAGES');
+    broadcast.onmessage = (event) => {
+      addNotification({ notification: event.data, isForeground: false });
+    };
+  } else {
+    alert("You denied notifications.");
+  }
+};
+
+export {
+  initialiseFirebaseApp,
+}

src/utils/index.ts

@@ -1,9 +1,30 @@
 const goToOms = (token: string, oms: string) => {
-  const link = (oms.startsWith('http') ? oms.replace(/api\/?/, "") : `https://${oms}.hotwax.io/`) + `?token=${token}`
+  const link = (oms.startsWith('http') ? oms.replace(/api\/?/, "") : `https://${oms}.hotwax.io/`) + `commerce/control/main?token=${token}`
 
   window.open(link, '_blank', 'noopener, noreferrer')
 }
 
+const getProductIdentificationValue = (productIdentifier: string, product: any) => {
+  // handled this case as on page load initially the data is not available, so not to execute furthur code
+  // untill product is not available
+  if(!Object.keys(product).length) {
+    return;
+  }
+
+  let value = product[productIdentifier]
+
+  // considered that the goodIdentification will always have values in the format "productIdentifier/value" and there will be no entry like "productIdentifier/"
+  const identification = product['goodIdentifications'].find((identification: string) => identification.startsWith(productIdentifier + "/"))
+
+  if(identification) {
+    const goodIdentification = identification.split('/')
+    value = goodIdentification[1]
+  }
+
+  return value;
+}
+
 export {
+  getProductIdentificationValue,
   goToOms
 }

tsconfig.json

@@ -17,4 +17,4 @@
       "path": "./tsconfig.vite-config.json"
     }
   ]
-}
+}

tsconfig.vite-config.json

@@ -5,4 +5,4 @@
     "composite": true,
     "types": ["node", "vitest"]
   }
-}
+}

vite.config.ts

@@ -33,8 +33,9 @@ export default defineConfig({
         globals: {
           vue: "Vue",
         },
+        intro: 'import "./style.css";' // Added to prepend/append the styles to the bundle, as with lib mode the styles are not working
       },
     },
     outDir: "./lib"
   },
-});
+});