Merge pull request #382 from amansinghbais/354-ionic-7

Improved: app to ionic v7.6.0 (#354)
hotwax · Apr 8, 2024 · 1c8473c · 1c8473c
2 parents 3bcab6d + cd23802
commit 1c8473c
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 186 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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/dxp-components": "^1.11.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/OrderItemRejHistoryModal.vue b/src/components/OrderItemRejHistoryModal.vue
@@ -13,7 +13,7 @@
     <ion-list>
       <ion-item v-for="(item, index) in orderRejectionHistory" :key="index">
         <ion-thumbnail slot="start">
-          <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
+          <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
         </ion-thumbnail>
         <ion-label>
           <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>

diff --git a/src/components/ProductListItem.vue b/src/components/ProductListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-item lines="none">
     <ion-thumbnail slot="start">
-      <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
+      <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
     </ion-thumbnail>
     <ion-label class="ion-text-wrap">
       <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
@@ -24,7 +24,7 @@
 import { computed, defineComponent } from "vue";
 import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
-import { getProductIdentificationValue, ShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components'
+import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components'
 import { cubeOutline } from 'ionicons/icons'
 
 export default defineComponent({
@@ -37,7 +37,7 @@ export default defineComponent({
     IonNote,
     IonSpinner,
     IonThumbnail,
-    ShopifyImg
+    DxpShopifyImg
   },
   data () {
     return {

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,