Merge remote-tracking branch 'upstream/main' into hotwax#275-update-dxp

R-Sourabh · Apr 24, 2024 · 99107fd · 99107fd
2 parents 10bd7f4 + 455a801
commit 99107fd
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 110 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,5 @@
-VUE_APP_I18N_LOCALE=en
-VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_I18N_LOCALE=en-US
+VUE_APP_I18N_FALLBACK_LOCALE=en-US
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_VIEW_SIZE=30
 VUE_APP_UNFILLABLE_REASONS=[{"id": "NO_VARIANCE_LOG", "label": "No reason"}, {"id": "NOT_IN_STOCK", "label": "Not in stock"}]

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bopis",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "private": true,
   "description": "HotWax BOPIS app",
   "scripts": {
@@ -16,12 +16,12 @@
     "@capacitor/ios": "^2.5.0",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.12.2",
     "@hotwax/oms-api": "^1.13.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@ionic/core": "^7.6.0",
+    "@ionic/vue": "^7.6.0",
+    "@ionic/vue-router": "^7.6.0",
     "@shopify/app-bridge-utils": "^2.0.4",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",

diff --git a/src/components/EditPickerModal.vue b/src/components/EditPickerModal.vue
@@ -21,11 +21,12 @@
       <div v-else>
         <ion-radio-group :value="selectedPicker.id">
           <ion-item v-for="(picker, index) in availablePickers" :key="index" @click="updateSelectedPicker(picker.id)">
-            <ion-label>
-              {{ picker.name }}
-              <p>{{ picker.id }}</p>
-            </ion-label>
-            <ion-radio slot="end" :value="picker.id" ></ion-radio>
+            <ion-radio :value="picker.id">
+              <ion-label>
+                {{ picker.name }}
+                <p>{{ picker.id }}</p>
+              </ion-label>
+            </ion-radio>
           </ion-item>
         </ion-radio-group>
       </div>
@@ -43,19 +44,19 @@ import {
   IonButtons,
   IonButton,
   IonContent,
-  IonHeader,
-  IonIcon,
   IonFab,
   IonFabButton,
-  IonTitle,
-  IonToolbar,
-  IonLabel,
+  IonHeader,
+  IonIcon,
   IonItem,
+  IonLabel,
   IonList,
   IonListHeader,
   IonRadio,
   IonRadioGroup,
   IonSearchbar,
+  IonTitle,
+  IonToolbar,
   alertController,
   modalController
 } from "@ionic/vue";

diff --git a/src/components/NotificationPreferenceModal.vue b/src/components/NotificationPreferenceModal.vue
@@ -16,8 +16,7 @@
     </div>
     <ion-list v-else>
       <ion-item :key="pref.enumId" v-for="pref in notificationPrefs">
-        <ion-label class="ion-text-wrap">{{ pref.description }}</ion-label>
-        <ion-toggle @click="toggleNotificationPref(pref.enumId, $event)" :checked="pref.isEnabled" slot="end" />
+        <ion-toggle label-placement="start" @click="toggleNotificationPref(pref.enumId, $event)" :checked="pref.isEnabled">{{ pref.description }}</ion-toggle>
       </ion-item>
     </ion-list>
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -38,7 +37,6 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonList,
   IonTitle,
   IonToggle,
@@ -67,7 +65,6 @@ export default defineComponent({
     IonFabButton,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonTitle,
     IonToggle,

diff --git a/src/components/RejectOrderModal.vue b/src/components/RejectOrderModal.vue
@@ -17,8 +17,7 @@
       <ion-list-header>{{ translate("Select reason") }}</ion-list-header>
       <ion-radio-group v-model="rejectReasonId">
         <ion-item v-for="reason in unfillableReasons" :key="reason.id">
-          <ion-radio slot="start" :value="reason.id" />
-          <ion-label>{{ translate(reason.label) }}</ion-label>
+          <ion-radio :value="reason.id" label-placement="end" justify="start">{{ translate(reason.label) }}</ion-radio>
         </ion-item>
       </ion-radio-group>
     </ion-list>
@@ -40,7 +39,6 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonList,
   IonListHeader,
   IonTitle,
@@ -66,7 +64,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonListHeader,
     IonTitle,

diff --git a/src/components/ReportAnIssueModal.vue b/src/components/ReportAnIssueModal.vue
@@ -17,8 +17,7 @@
       <ion-list-header>{{ translate("Select reason") }}</ion-list-header>
       <ion-radio-group v-model="rejectReasonId">
         <ion-item v-for="reason in unfillableReasons" :key="reason.id">
-          <ion-radio slot="start" :value="reason.id"/>
-          <ion-label>{{ translate(reason.label) }}</ion-label>
+          <ion-radio label-placement="end" justify="start" :value="reason.id">{{ translate(reason.label) }}</ion-radio>
         </ion-item>
       </ion-radio-group>
     </ion-list>
@@ -40,7 +39,6 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonList,
   IonListHeader,
   IonTitle,
@@ -67,7 +65,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonListHeader,
     IonTitle,

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
@@ -10,7 +10,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content>
+  <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
     <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; searchPicker()"/>
 
     <div class="ion-text-center ion-margin-top" v-if="!availablePickers.length">{{ translate('No picker found') }}</div>
@@ -20,16 +20,25 @@
       <div>
         <ion-radio-group v-model="selectedPicker">
           <ion-item v-for="(picker, index) in availablePickers" :key="index">
-            <ion-label>{{ picker.name }}</ion-label>
-            <ion-radio slot="end" :value="picker.id" ></ion-radio>
+            <ion-radio :value="picker.id">{{ picker.name }}</ion-radio>
           </ion-item>
         </ion-radio-group>
       </div>
     </ion-list>
+     <!--
+        When searching for a keyword, and if the user moves to the last item, then the didFire value inside infinite scroll becomes true and thus the infinite scroll does not trigger again on the same page(https://github.com/hotwax/users/issues/84).
+        Also if we are at the section that has been loaded by infinite-scroll and then move to the details page then the list infinite scroll does not work after coming back to the page
+        In ionic v7.6.0, an issue related to infinite scroll has been fixed that when more items can be added to the DOM, but infinite scroll does not fire as the window is not completely filled with the content(https://github.com/ionic-team/ionic-framework/issues/18071).
+        The above fix in ionic 7.6.0 is resulting in the issue of infinite scroll not being called again.
+        To fix this we have maintained another variable `isScrollingEnabled` to check whether the scrolling can be performed or not.
+        If we do not define an extra variable and just use v-show to check for `isScrollable` then when coming back to the page infinite-scroll is called programatically.
+        We have added an ionScroll event on ionContent to check whether the infiniteScroll can be enabled or not by toggling the value of isScrollingEnabled whenever the height < 0.
+      -->
     <ion-infinite-scroll
       @ionInfinite="loadMorePickers($event)"
       threshold="100px"
-      :disabled="!isScrollable"
+      v-show="isScrollingEnabled && isScrollable"
+      ref="infiniteScrollRef"
     >
       <ion-infinite-scroll-content
         loading-spinner="crescent"
@@ -55,7 +64,6 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonList,
   IonListHeader,
   IonRadio,
@@ -86,7 +94,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonListHeader,
     IonRadio,
@@ -103,7 +110,8 @@ export default defineComponent({
       selectedPicker: '',
       queryString: '',
       availablePickers: [],
-      isScrollable: true
+      isScrollable: true,
+      isScrollingEnabled: false
     }
   },
   methods: {
@@ -122,14 +130,25 @@ export default defineComponent({
         showToast(translate('Select a picker'))
       }
     },
+    enableScrolling() {
+      const parentElement = (this).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMorePickers(event) {
       this.getPicker(
         undefined,
         Math.ceil(
           this.availablePickers.length / (process.env.VUE_APP_VIEW_SIZE)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async getPicker(vSize, vIndex) {
@@ -196,6 +215,9 @@ export default defineComponent({
     // getting picker information on initial load
     await this.getPicker();
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   setup() {
     const store = useStore();
 

diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
@@ -5,7 +5,7 @@
         <ion-title>{{ translate("Catalog") }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <ion-searchbar @ionFocus="selectSearchBarText($event)" v-model="queryString" @keypress.enter="queryString = $event.target.value; getProducts()" />
       <main v-if="products.list.length">
         <ion-card button v-for="product in products.list" :key="product.productId"  @click="viewProduct(product)">
@@ -24,7 +24,8 @@
       <ion-infinite-scroll
         @ionInfinite="loadMoreProducts($event)"
         threshold="100px"
-        :disabled="!isScrollable"
+        v-show="isScrollingEnabled && isScrollable"
+        ref="infiniteScrollRef"
       >
         <ion-infinite-scroll-content
           loading-spinner="crescent"
@@ -73,6 +74,7 @@ export default defineComponent({
   data() {
     return {
       queryString: "",
+      isScrollingEnabled: false
     };
   },
   computed: {
@@ -82,14 +84,25 @@ export default defineComponent({
     }),
   },
   methods: {
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMoreProducts(event: any) {
       this.getProducts(
         undefined,
         Math.ceil(
           this.products.list?.length / (process.env.VUE_APP_VIEW_SIZE as any)
         ).toString()
-      ).then(() => {
-        event.target.complete();
+      ).then(async () => {
+        await event.target.complete();
       });
     },
     async getProducts(vSize?: any, vIndex?: any) {
@@ -115,6 +128,7 @@ export default defineComponent({
   },
 
   async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     this.queryString = this.products.queryString;
     this.getProducts();
   },