From 1cdb21c5a979a0a1dbac8a61cee6b110e7d8c169 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Fri, 7 Jun 2024 15:54:31 +0530
Subject: [PATCH] Improved: ionic to v7(#72)

---
 package-lock.json                 | 52 +++++++++++++++----------------
 package.json                      |  6 ++--
 src/views/AddressModal.vue        | 22 +++++--------
 src/views/Order.vue               |  3 +-
 src/views/PickupLocationModal.vue | 20 +++++++++---
 5 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62bce10b..16584948 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,9 @@
         "@casl/ability": "^6.0.0",
         "@hotwax/apps-theme": "^1.1.0",
         "@hotwax/oms-api": "^1.7.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",
         "boon-js": "^2.0.3",
         "core-js": "^3.6.5",
         "mitt": "^2.1.0",
@@ -2304,12 +2304,12 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.5.tgz",
-      "integrity": "sha512-zRkRn+h/Vs3xt/EVgBdShMKDyeGOM4RU31NPF2icfu3CUTH+VrMV569MUnNjYvd1Lu2xK90pYy4TaicSWmC1Pw==",
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.6.tgz",
+      "integrity": "sha512-HAYZdEmeJgOdo2kDlZkcCGHb+zs/vjU6iv4skbVBL7y+OnSv/oC2u83Yee8S3/aY0YAxkyBgu7hLTYH13Zc2Aw==",
       "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^4.12.2",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -2319,20 +2319,20 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@ionic/vue": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.7.5.tgz",
-      "integrity": "sha512-6JBEaHCT2vVUzYqyfBiEUN8Wo7FezxY5Y3n+HGqI61J4qVay+8IxZRTYeX+O72QglbYOkzvfjE6SgS25oS+S9A==",
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.6.tgz",
+      "integrity": "sha512-WVngbTA08SlVbyj4rS9krVJ2Z9Uv/MG1xItDS7WqMPeVwRNGaOiw6MkxjXRcpIz6qE0b+6EjIcte5h4nGRiDCw==",
       "dependencies": {
-        "@ionic/core": "6.7.5",
-        "ionicons": "^6.1.3"
+        "@ionic/core": "7.8.6",
+        "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.7.5.tgz",
-      "integrity": "sha512-nupLaWFARdy5vOCNg2xw6YpecaR/hPEew+tWjUJE1INlwvB88o7Uct/R480vqFj3fB436W4O4ViJd4/g0ZBZ8A==",
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.8.6.tgz",
+      "integrity": "sha512-YVGqO6yyNBrwxYJfulPCLy6XBBJ0eDiy97XxLbHlaGx9WZJpf+NE+NA7N4Zj+IMTopCAX+YU/PS70OoTM7hITQ==",
       "dependencies": {
-        "@ionic/vue": "6.7.5"
+        "@ionic/vue": "7.8.6"
       }
     },
     "node_modules/@isaacs/cliui": {
@@ -2676,15 +2676,15 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "2.22.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
-      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "version": "4.18.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.18.3.tgz",
+      "integrity": "sha512-8yoG5AFQYEPocVtuoc5kvRS0Hku0MoDWDUpADRaXPVHsOFLmxR16LJENj25ucCz5GEfeTGQ/tCE8JAypPmr/fQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "node_modules/@trysound/sax": {
@@ -9192,11 +9192,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
-      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.4.0.tgz",
+      "integrity": "sha512-ZK94MMqgzMCPPMhmk8Ouu6goyVHFIlw/ACP6oe3FrikcI0N7CX0xcwVaEbUc0G/v3W0shI93vo+9ve/KpvcNhQ==",
       "dependencies": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
       }
     },
     "node_modules/ipaddr.js": {
diff --git a/package.json b/package.json
index 21375136..21e79c84 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/oms-api": "^1.7.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",
     "boon-js": "^2.0.3",
     "core-js": "^3.6.5",
     "mitt": "^2.1.0",
diff --git a/src/views/AddressModal.vue b/src/views/AddressModal.vue
index ea2f3708..5c4ed8e9 100644
--- a/src/views/AddressModal.vue
+++ b/src/views/AddressModal.vue
@@ -12,30 +12,24 @@
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-label>{{ $t("First name") }}</ion-label>
-        <ion-input class="ion-text-right" name="firstName" slot="end" v-model="address.firstName" id="firstName" type="text"/>
+        <ion-input :label="$t('First name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Last name") }}</ion-label>
-        <ion-input class="ion-text-right" name="lastName" slot="end" v-model="address.lastName" id="lastName" type="text"/>
+        <ion-input :label="$t('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Street") }}</ion-label>
-        <ion-input class="ion-text-right" name="street"  slot="end" v-model="address.address1" id="address1" type="text"/>
+        <ion-input :label="$t('Street')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("City") }}</ion-label>
-        <ion-input class="ion-text-right" name="city" slot="end" v-model="address.city" id="city" type="text"/>
+        <ion-input :label="$t('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("State") }}</ion-label>
-        <ion-select interface="popover" v-model="address.stateProvinceGeoId">
+        <ion-select :label="$t('State')" interface="popover" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states" :key="state.geoId" :value="state.geoId" >{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label>{{ $t("Zipcode") }}</ion-label>
-        <ion-input class="ion-text-right" name="zipcode" slot="end" v-model="address.postalCode" id="postalCode"/>
+        <ion-input :label="$t('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
       </ion-item>
     </ion-list>
     <div class="ion-text-center">
@@ -52,8 +46,7 @@ import {
   IonHeader, 
   IonIcon, 
   IonItem, 
-  IonInput, 
-  IonLabel, 
+  IonInput,
   IonList, 
   IonSelect,
   IonSelectOption,
@@ -79,7 +72,6 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonInput,
-    IonLabel,
     IonList,
     IonSelect,
     IonSelectOption,
diff --git a/src/views/Order.vue b/src/views/Order.vue
index defcddf7..bcbd4fb0 100644
--- a/src/views/Order.vue
+++ b/src/views/Order.vue
@@ -35,8 +35,7 @@
               </ion-label>
             </ion-item> -->
             <ion-item>
-              <ion-label>{{ $t('Delivery method') }}</ion-label>
-              <ion-select :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
+              <ion-select :label="$t('Delivery method')" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
                 <ion-select-option v-for="method in deliveryMethods" :key="method.value" :value="method.value">{{ method.name }}</ion-select-option>
               </ion-select>
             </ion-item>
diff --git a/src/views/PickupLocationModal.vue b/src/views/PickupLocationModal.vue
index 3744cc4c..8bcb84fb 100644
--- a/src/views/PickupLocationModal.vue
+++ b/src/views/PickupLocationModal.vue
@@ -28,10 +28,11 @@
       </ion-list-header>
       <ion-radio-group v-model="selectedFacility">
         <ion-item v-for="store of nearbyStores" :key="store.facilityId">
-          <ion-label>{{ store.facilityName }}</ion-label>
-          <!-- Showing store distance in miles -->
-          <ion-label v-if="store.distance" slot="end">{{ store.distance }} {{ $t("mi") }}</ion-label>
-          <ion-radio :value="store" slot="end" />
+          <ion-radio :value="store">
+              <ion-label>{{ store.facilityName }}</ion-label>
+              <!-- Showing store distance in miles -->
+              <ion-label v-if="store.distance">{{ store.distance }} {{ $t("mi") }}</ion-label>
+          </ion-radio>
         </ion-item>
       </ion-radio-group>
     </ion-list>
@@ -224,4 +225,13 @@ export default defineComponent({
     return { closeOutline, router, store };
   }
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* Styling to add the facility name and its display side by side as ion-radio label */
+ion-radio::part(label) {
+  display: flex;
+  justify-content: space-between;
+  width: 100%
+}
+</style>
\ No newline at end of file