From e3794581573fafb5d1096368ac4dd14e97ecba50 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 16:13:04 +0530
Subject: [PATCH 1/6] Added: register-service-worker package for service worker

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 54066a4..75729d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "luxon": "^3.3.0",
         "pinia": "2.0.36",
         "pinia-plugin-persistedstate": "^3.1.0",
+        "register-service-worker": "^1.7.2",
         "vue": "^3.3.4",
         "vue-barcode-reader": "^1.0.3",
         "vue-i18n": "^9.2.2"
@@ -4055,6 +4056,11 @@
         }
       ]
     },
+    "node_modules/register-service-worker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/register-service-worker/-/register-service-worker-1.7.2.tgz",
+      "integrity": "sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A=="
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -7829,6 +7835,11 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "register-service-worker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/register-service-worker/-/register-service-worker-1.7.2.tgz",
+      "integrity": "sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A=="
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index ea5d30f..bfde7fa 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "luxon": "^3.3.0",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "register-service-worker": "^1.7.2",
     "vue": "^3.3.4",
     "vue-barcode-reader": "^1.0.3",
     "vue-i18n": "^9.2.2"

From ac5d35a5f4cc826d244e0fc7096b48ebb786bd8e Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 16:38:05 +0530
Subject: [PATCH 2/6] Implemented: support to notify user about new version and
 update app from settings page

---
 src/components/AppVersionInfo.vue | 13 +++++++++++
 src/index.ts                      | 18 ++++++++++++++++
 src/service-worker.ts             | 36 +++++++++++++++++++++++++++++++
 src/utils/index.ts                | 24 ++++++++++++++++++++-
 4 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/service-worker.ts

diff --git a/src/components/AppVersionInfo.vue b/src/components/AppVersionInfo.vue
index 5aa4793..86846fd 100644
--- a/src/components/AppVersionInfo.vue
+++ b/src/components/AppVersionInfo.vue
@@ -5,14 +5,27 @@
       <p class="overline">{{ "Version: " + appVersion }}</p>
     </div>
     <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
+    <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ $t("Update") }}</ion-button>
   </div>
 </template>
   
 <script setup lang="ts">
+import { IonButton } from '@ionic/vue';
 import { DateTime } from 'luxon';
+import { appContext } from 'src';
+import { computed } from 'vue';
 
 declare var process: any;
 
+const appState = appContext.config.globalProperties.$store
+const pwaState = computed(() => appState.getters['user/getPwaState'])
+
+const refreshApp = () => {
+  appState.dispatch('user/updatePwaState', { registration: pwaState.value.registration, updateExists: false });
+  if (!pwaState.value.registration || !pwaState.value.registration.waiting) return
+  pwaState.value.registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+}
+
 const appInfo = (process.env.VUE_APP_VERSION_INFO ? JSON.parse(process.env.VUE_APP_VERSION_INFO) : {}) as any;
 const appVersion = appInfo.branch ? (appInfo.branch + "-" + appInfo.revision) : appInfo.tag;
 const getDateTime = (time: any) => DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
diff --git a/src/index.ts b/src/index.ts
index 2cb851c..f159293 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,8 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createI18n } from 'vue-i18n'
 import { useUserStore } from "./store/user";
 
+import "./service-worker"
+
 // TODO: handle cases when the store from app or pinia store are not available
 // creating a pinia store for the plugin
 const pinia = createPinia();
@@ -26,6 +28,22 @@ let productIdentificationContext = {} as any
 let notificationContext = {} as any
 let userContext = {} as any
 
+let refreshing = false;
+
+const updateAvailable = ($event: any) => {
+  const registration = $event.detail;
+  const updateExists = true;
+  appContext.config.globalProperties.$store.dispatch('user/updatePwaState', { registration, updateExists });
+  // showToast(translate("New version available, please update the app."));
+}
+
+document.addEventListener('swUpdated', updateAvailable, { once: true })
+navigator.serviceWorker.addEventListener('controllerchange', () => {
+  if (refreshing) return
+  refreshing = true
+  window.location.reload()
+})
+
 // executed on app initialization
 export let dxpComponents = {
   install(app: any, options: any) {
diff --git a/src/service-worker.ts b/src/service-worker.ts
new file mode 100644
index 0000000..2d5d50c
--- /dev/null
+++ b/src/service-worker.ts
@@ -0,0 +1,36 @@
+import { register } from 'register-service-worker'
+
+declare var process: any;
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered (registration: any) {
+      console.log('Service worker has been registered.')
+      setInterval(() => {
+        registration.update();
+      }, 1000 * 60 * 60); // check for service worker update hourly
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated (registration: any) {
+      console.log('New content is available; please refresh.')
+      document.dispatchEvent(new CustomEvent('swUpdated', { detail: registration }))
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error: any) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3c585de..f164e2f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,6 @@
+import { toastController } from "@ionic/vue";
+import { translate } from "src";
+
 const goToOms = (token: string, oms: string) => {
   const link = (oms.startsWith('http') ? oms.replace(/api\/?/, "") : `https://${oms}.hotwax.io/`) + `commerce/control/main?token=${token}`
   
@@ -24,7 +27,26 @@ const getProductIdentificationValue = (productIdentifier: string, product: any)
   return value;
 }
 
+const showToast = async (message: string, configButtons?: any) => {
+  const defaultButtons = [{
+    text: 'Dismiss',
+    role: 'cancel'
+  }]
+
+  if (configButtons) defaultButtons.push(...configButtons);
+
+  const toast = await toastController
+    .create({
+      message: message,
+      duration: 3000,
+      position: 'bottom',
+      buttons: defaultButtons
+    })
+  return toast.present();
+}
+
 export {
   getProductIdentificationValue,
-  goToOms
+  goToOms,
+  showToast
 }
\ No newline at end of file

From f072a69d1e207e1c6d69ccfca7a69799499ac8a7 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 18:12:12 +0530
Subject: [PATCH 3/6] Improved: code to use the toast from app

---
 src/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index f159293..12f7398 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -27,6 +27,7 @@ let appContext = {} as any
 let productIdentificationContext = {} as any
 let notificationContext = {} as any
 let userContext = {} as any
+let showToast = {} as any
 
 let refreshing = false;
 
@@ -34,7 +35,7 @@ const updateAvailable = ($event: any) => {
   const registration = $event.detail;
   const updateExists = true;
   appContext.config.globalProperties.$store.dispatch('user/updatePwaState', { registration, updateExists });
-  // showToast(translate("New version available, please update the app."));
+  showToast(translate("New version available, please update the app."));
 }
 
 document.addEventListener('swUpdated', updateAvailable, { once: true })
@@ -72,6 +73,8 @@ export let dxpComponents = {
     app.component('Scanner', Scanner)
     app.component('ShopifyImg', ShopifyImg)
 
+    showToast = options.showToast
+
     loginContext.login = options.login
     loginContext.logout = options.logout
     loginContext.loader = options.loader

From 4bb7222b66d847f44883dbf48492886cd88d96a8 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 18:29:36 +0530
Subject: [PATCH 4/6] Improved: UI for the update button on settings page

---
 src/components/AppVersionInfo.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/AppVersionInfo.vue b/src/components/AppVersionInfo.vue
index 86846fd..f855890 100644
--- a/src/components/AppVersionInfo.vue
+++ b/src/components/AppVersionInfo.vue
@@ -4,8 +4,10 @@
       <h1>{{ $t('App') }}</h1>
       <p class="overline">{{ "Version: " + appVersion }}</p>
     </div>
-    <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
-    <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ $t("Update") }}</ion-button>
+    <div class="ion-text-end">
+      <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
+      <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ $t("Update") }}</ion-button>
+    </div>
   </div>
 </template>
   

From 4aa03259287a16926116bba7d302e19c92dc8838 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 18:42:24 +0530
Subject: [PATCH 5/6] Improved: code to add static text to translate function

---
 src/components/AppVersionInfo.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AppVersionInfo.vue b/src/components/AppVersionInfo.vue
index f855890..4e32c00 100644
--- a/src/components/AppVersionInfo.vue
+++ b/src/components/AppVersionInfo.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="section-header">
     <div>
-      <h1>{{ $t('App') }}</h1>
-      <p class="overline">{{ "Version: " + appVersion }}</p>
+      <h1>{{ translate('App') }}</h1>
+      <p class="overline">{{ translate("Version: ", { appVersion }) }}</p>
     </div>
     <div class="ion-text-end">
-      <p class="overline">{{ "Built: " + getDateTime(appInfo.builtTime) }}</p>
-      <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ $t("Update") }}</ion-button>
+      <p class="overline">{{ translate("Built: ", { builtDateTime: getDateTime(appInfo.builtTime) }) }}</p>
+      <ion-button v-if="pwaState.updateExists" @click="refreshApp()" fill="outline" color="dark" size="small">{{ translate("Update") }}</ion-button>
     </div>
   </div>
 </template>
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { IonButton } from '@ionic/vue';
 import { DateTime } from 'luxon';
-import { appContext } from 'src';
+import { appContext, translate } from 'src';
 import { computed } from 'vue';
 
 declare var process: any;

From 903afe8fbdd374098948faac09b2244d42d56344 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Thu, 9 Nov 2023 19:04:01 +0530
Subject: [PATCH 6/6] Improved: component name to have dxp as prefix

---
 src/components/{AppVersionInfo.vue => DxpAppVersionInfo.vue} | 0
 src/components/index.ts                                      | 2 +-
 src/index.ts                                                 | 4 ++--
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{AppVersionInfo.vue => DxpAppVersionInfo.vue} (100%)

diff --git a/src/components/AppVersionInfo.vue b/src/components/DxpAppVersionInfo.vue
similarity index 100%
rename from src/components/AppVersionInfo.vue
rename to src/components/DxpAppVersionInfo.vue
diff --git a/src/components/index.ts b/src/components/index.ts
index ad943b4..ace018b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,7 +16,7 @@ import '@ionic/vue/css/display.css';
 
 export { default as DxpImage } from './DxpImage.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
-export { default as AppVersionInfo } from './AppVersionInfo.vue';
+export { default as DxpAppVersionInfo } from './DxpAppVersionInfo.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as DxpMenuFooterNavigation } from './DxpMenuFooterNavigation.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
diff --git a/src/index.ts b/src/index.ts
index 12f7398..8520649 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, DxpMenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { DxpAppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, DxpMenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -62,7 +62,7 @@ export let dxpComponents = {
     app.use(pinia);
     app.use(i18n);
 
-    app.component('AppVersionInfo', AppVersionInfo)
+    app.component('DxpAppVersionInfo', DxpAppVersionInfo)
     app.component('DxpImage', DxpImage)
     app.component('DxpUserProfile', DxpUserProfile)
     app.component('LanguageSwitcher', LanguageSwitcher)