From 1c36b02d9aa284e1e8415966ab603a2888a3fbde Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 8 Jan 2024 11:38:12 +0530
Subject: [PATCH 01/15] Improved: app to upgrade ionic to v7.6.0(#162)

---
 package-lock.json | 175 +++++++++++++++++++++++++++++++++-------------
 package.json      |   6 +-
 2 files changed, 131 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 023ccd35..c6696264 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,9 @@
         "@hotwax/apps-theme": "^1.2.4",
         "@hotwax/dxp-components": "^1.11.0",
         "@hotwax/oms-api": "^1.11.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",
         "@types/file-saver": "^2.0.4",
         "@types/papaparse": "^5.3.1",
         "boon-js": "^2.0.3",
@@ -2821,6 +2821,45 @@
         "vue-i18n": "^9.2.2"
       }
     },
+    "node_modules/@hotwax/dxp-components/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==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0",
+        "ionicons": "^6.1.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@hotwax/dxp-components/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==",
+      "dependencies": {
+        "@ionic/core": "6.7.5",
+        "ionicons": "^6.1.3"
+      }
+    },
+    "node_modules/@hotwax/dxp-components/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==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
+    "node_modules/@hotwax/dxp-components/node_modules/ionicons": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "dependencies": {
+        "@stencil/core": "^2.18.0"
+      }
+    },
     "node_modules/@hotwax/dxp-components/node_modules/luxon": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
@@ -2829,6 +2868,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@hotwax/dxp-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/@hotwax/dxp-components/node_modules/vue-i18n": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
@@ -3056,12 +3100,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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
+      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
       "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^4.8.1",
+        "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       }
     },
@@ -3071,20 +3115,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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.0.tgz",
+      "integrity": "sha512-2CWLcVNS8kLQ6BK4UmRdc7a0HSsS6MqyTQh7+0qT88z+Ih05dCcZ3CiJ27F3F2a7jsOi48ggXt97zOpBbZENlg==",
       "dependencies": {
-        "@ionic/core": "6.7.5",
-        "ionicons": "^6.1.3"
+        "@ionic/core": "7.6.0",
+        "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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.0.tgz",
+      "integrity": "sha512-grzMyURlZX3EqkQFBXeKuhxN2psbNKAI8CVwPi56xRPwCvSp32KFYtGxj20k1QBl+Kzg7/RbxTERArxZRtPWJw==",
       "dependencies": {
-        "@ionic/vue": "6.7.5"
+        "@ionic/vue": "7.6.0"
       }
     },
     "node_modules/@isaacs/cliui": {
@@ -3576,15 +3620,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.9.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.0.tgz",
+      "integrity": "sha512-aWSkhBmk3yPwRAkUwBbzRwmdhb8hKiQ/JMr9m5jthpBZLjtppYbzz6PN2MhSMDfRp6K93eQw5WogSEH4HHuB6w==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
@@ -10667,11 +10711,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.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
       }
     },
     "node_modules/ipaddr.js": {
@@ -20499,11 +20543,48 @@
         "vue-i18n": "^9.2.2"
       },
       "dependencies": {
+        "@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==",
+          "requires": {
+            "@stencil/core": "^2.18.0",
+            "ionicons": "^6.1.3",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@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==",
+          "requires": {
+            "@ionic/core": "6.7.5",
+            "ionicons": "^6.1.3"
+          }
+        },
+        "@stencil/core": {
+          "version": "2.22.3",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
+          "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
+        },
+        "ionicons": {
+          "version": "6.1.3",
+          "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
+          "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+          "requires": {
+            "@stencil/core": "^2.18.0"
+          }
+        },
         "luxon": {
           "version": "3.4.4",
           "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
           "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA=="
         },
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        },
         "vue-i18n": {
           "version": "9.8.0",
           "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.8.0.tgz",
@@ -20670,12 +20751,12 @@
       }
     },
     "@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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
+      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
       "requires": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^4.8.1",
+        "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -20687,20 +20768,20 @@
       }
     },
     "@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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.0.tgz",
+      "integrity": "sha512-2CWLcVNS8kLQ6BK4UmRdc7a0HSsS6MqyTQh7+0qT88z+Ih05dCcZ3CiJ27F3F2a7jsOi48ggXt97zOpBbZENlg==",
       "requires": {
-        "@ionic/core": "6.7.5",
-        "ionicons": "^6.1.3"
+        "@ionic/core": "7.6.0",
+        "ionicons": "^7.0.0"
       }
     },
     "@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.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.0.tgz",
+      "integrity": "sha512-grzMyURlZX3EqkQFBXeKuhxN2psbNKAI8CVwPi56xRPwCvSp32KFYtGxj20k1QBl+Kzg7/RbxTERArxZRtPWJw==",
       "requires": {
-        "@ionic/vue": "6.7.5"
+        "@ionic/vue": "7.6.0"
       }
     },
     "@isaacs/cliui": {
@@ -21091,9 +21172,9 @@
       "dev": true
     },
     "@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.9.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.0.tgz",
+      "integrity": "sha512-aWSkhBmk3yPwRAkUwBbzRwmdhb8hKiQ/JMr9m5jthpBZLjtppYbzz6PN2MhSMDfRp6K93eQw5WogSEH4HHuB6w=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -26464,11 +26545,11 @@
       }
     },
     "ionicons": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
-      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
       }
     },
     "ipaddr.js": {
diff --git a/package.json b/package.json
index 7a5a5e79..db1ba05f 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,9 @@
     "@hotwax/apps-theme": "^1.2.4",
     "@hotwax/dxp-components": "^1.11.0",
     "@hotwax/oms-api": "^1.11.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",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
     "boon-js": "^2.0.3",

From 0c227ec2d14127c8776527976711554f6d94ab68 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 8 Jan 2024 11:39:07 +0530
Subject: [PATCH 02/15] Improved: app theme version to latest(#162)

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c6696264..6734852b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@capacitor/core": "^2.4.7",
         "@casl/ability": "^6.0.0",
         "@hotwax/app-version-info": "^1.0.0",
-        "@hotwax/apps-theme": "^1.2.4",
+        "@hotwax/apps-theme": "^1.2.6",
         "@hotwax/dxp-components": "^1.11.0",
         "@hotwax/oms-api": "^1.11.0",
         "@ionic/core": "^7.6.0",
@@ -2798,9 +2798,9 @@
       "integrity": "sha512-PnJTqTbFvvl9N23yi1DjL4aNmTkpYFrayyoJyfH1qDJXADFbQ9kB7gJmKcfiPpyYMGR86Yf3Is5ct0+wReUJGQ=="
     },
     "node_modules/@hotwax/apps-theme": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.5.tgz",
-      "integrity": "sha512-3Vec4pGWJVs6vDbL/pO5hYqoF1zn2w8liXuleqDJ7waI2R5JuF2eaJmYcUQETnk/DZIg47bDdyOSxihQltB2Ow=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.6.tgz",
+      "integrity": "sha512-zpUjGoY7LBlKeiP0V7tonrmoey8HQ5THQmyixQ+IDtrjmEJNBjynW/Ef3gC0FUNNPuVqxWPZdT5CVgaETLGTwg=="
     },
     "node_modules/@hotwax/dxp-components": {
       "version": "1.11.0",
@@ -20520,9 +20520,9 @@
       "integrity": "sha512-PnJTqTbFvvl9N23yi1DjL4aNmTkpYFrayyoJyfH1qDJXADFbQ9kB7gJmKcfiPpyYMGR86Yf3Is5ct0+wReUJGQ=="
     },
     "@hotwax/apps-theme": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.5.tgz",
-      "integrity": "sha512-3Vec4pGWJVs6vDbL/pO5hYqoF1zn2w8liXuleqDJ7waI2R5JuF2eaJmYcUQETnk/DZIg47bDdyOSxihQltB2Ow=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.6.tgz",
+      "integrity": "sha512-zpUjGoY7LBlKeiP0V7tonrmoey8HQ5THQmyixQ+IDtrjmEJNBjynW/Ef3gC0FUNNPuVqxWPZdT5CVgaETLGTwg=="
     },
     "@hotwax/dxp-components": {
       "version": "1.11.0",
diff --git a/package.json b/package.json
index db1ba05f..2df891f6 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.2.4",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.11.0",
     "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "^7.6.0",

From 17c843f3373c850db357cfdce07c7c07c4ba842c Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 8 Jan 2024 13:02:56 +0530
Subject: [PATCH 03/15] Improved: usage of ion-radio as per the changes in
 ionic7(#162)

---
 src/components/AddOperatingHoursModal.vue | 9 +++++----
 src/components/TimezoneModal.vue          | 5 +----
 src/views/FacilityDetails.vue             | 5 +++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/AddOperatingHoursModal.vue b/src/components/AddOperatingHoursModal.vue
index 223a96c2..dd61201a 100644
--- a/src/components/AddOperatingHoursModal.vue
+++ b/src/components/AddOperatingHoursModal.vue
@@ -14,10 +14,11 @@
       <ion-radio-group v-model="selectedCalendarId">
         <ion-accordion v-for="calendar in calendars" :key="calendar.calendarId" :value="calendar.calendarId">
           <ion-item slot="header">
-            <ion-radio :value="calendar.calendarId" slot="start" />
-            <ion-label class="ion-text-wrap">
-              {{ calendar.description ? calendar.description : calendar.calendarId }}
-            </ion-label>
+            <ion-radio label-placement="end" justify="start" :value="calendar.calendarId">
+              <ion-label class="ion-text-wrap">
+                {{ calendar.description ? calendar.description : calendar.calendarId }}
+              </ion-label>
+            </ion-radio>
           </ion-item>
           <div class="ion-padding" slot="content">
             <ion-list lines="none">
diff --git a/src/components/TimezoneModal.vue b/src/components/TimezoneModal.vue
index 89156320..2ae99645 100644
--- a/src/components/TimezoneModal.vue
+++ b/src/components/TimezoneModal.vue
@@ -30,8 +30,7 @@
         <ion-list>
           <ion-radio-group value="rd" v-model="timeZoneId">
             <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-              <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-              <ion-radio :value="timeZone.id" slot="start" />
+              <ion-radio justify="start" label-placement="end" :value="timeZone.id">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
             </ion-item>
           </ion-radio-group>
         </ion-list>
@@ -57,7 +56,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonList,
   IonRadioGroup,
   IonRadio,
@@ -87,7 +85,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonRadioGroup,
     IonRadio,
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 122bac91..14139021 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -117,8 +117,9 @@
             </ion-card-content>
             <ion-radio-group v-model="selectedCalendarId">
               <ion-item v-for="(calendar, index) in calendars.slice(0,3)" :key="index" lines="none">
-                <ion-label class="ion-text-wrap">{{ calendar.description ? calendar.description : calendar.calendarId }}</ion-label>
-                <ion-radio slot="end" :value="calendar.calendarId"/>
+                <ion-radio :value="calendar.calendarId">
+                  <div class="ion-text-wrap">{{ calendar.description ? calendar.description : calendar.calendarId }} {{ 'TEST CALENDAR THIS' }}</div>
+                </ion-radio>
               </ion-item>
             </ion-radio-group>
             <ion-item button lines="none" v-if="calendars?.length > 3"  @click="addOperatingHours">

From 34c51ece963b8888d154391b8a05e00478a93626 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 8 Jan 2024 19:34:09 +0530
Subject: [PATCH 04/15] Improved: usage of different components on facility
 details page and related components(#162)

---
 src/components/AddFacilityGroupModal.vue      |  5 +--
 src/components/AddLocationModal.vue           | 26 ++++++++-------
 src/components/AddStaffMemberModal.vue        |  8 ++---
 src/components/CreateFacilityLoginModal.vue   | 33 +++++++++----------
 src/components/CustomScheduleModal.vue        | 13 ++++----
 src/components/FacilityAddressModal.vue       | 22 ++++++-------
 src/components/FacilityExternalIdModal.vue    |  3 +-
 src/components/FacilityFilters.vue            |  8 ++---
 src/components/FacilityGeoPointModal.vue      | 12 +++----
 src/components/FacilityMappingModal.vue       |  3 +-
 .../FacilityShopifyMappingModal.vue           |  7 ++--
 src/components/SelectProductStoreModal.vue    | 11 ++++---
 src/theme/variables.css                       |  4 +++
 src/views/FacilityDetails.vue                 | 27 ++++-----------
 src/views/FindFacilities.vue                  |  9 ++---
 15 files changed, 82 insertions(+), 109 deletions(-)

diff --git a/src/components/AddFacilityGroupModal.vue b/src/components/AddFacilityGroupModal.vue
index 25fecc16..c6a36e85 100644
--- a/src/components/AddFacilityGroupModal.vue
+++ b/src/components/AddFacilityGroupModal.vue
@@ -18,8 +18,7 @@
         <ion-item-group v-for="(groups, typeId) in filteredFacilityGroupsByType" :key="typeId">
           <ion-item-divider color="medium">{{ getFacilityGroupTypeDesc(typeId) }}</ion-item-divider>
           <ion-item v-for="group in groups" :key="group.facilityGroupId">
-            <ion-label>{{ group.facilityGroupName }}</ion-label>
-            <ion-checkbox :checked="isFacilityGroupLinked(group.facilityGroupId)" @ion-change="updateGroupsForFacility(group.facilityGroupId)"/>
+            <ion-checkbox :checked="isFacilityGroupLinked(group.facilityGroupId)" @ion-change="updateGroupsForFacility(group.facilityGroupId)">{{ group.facilityGroupName }}</ion-checkbox>
           </ion-item>
         </ion-item-group>
       </ion-list>
@@ -45,7 +44,6 @@ import {
   IonItem,
   IonItemDivider,
   IonItemGroup,
-  IonLabel,
   IonList,
   IonSearchbar,
   IonTitle,
@@ -77,7 +75,6 @@ export default defineComponent({
     IonItem,
     IonItemDivider,
     IonItemGroup,
-    IonLabel,
     IonList,
     IonSearchbar,
     IonTitle,
diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
index 49ef5264..bf63a57a 100644
--- a/src/components/AddLocationModal.vue
+++ b/src/components/AddLocationModal.vue
@@ -15,30 +15,32 @@
       <!-- Using stop for enter key as when using keyboard for opening the select we need to use enter and the same key submits the form
       so to prevent form submission on using enter key on select used stop -->
       <ion-item @keyup.enter.stop>
-        <ion-label position="floating">{{ translate("Type") }}</ion-label>
-        <ion-select interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
+        <ion-select label-placement="floating" :label="translate('Type')" interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
           <ion-select-option v-for="(description, type) in locationTypes" :key="type" :value="type">{{ description }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.areaId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.areaId">
+          <ion-label slot="label">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.aisleId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.aisleId">
+          <ion-label slot="label">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.sectionId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.sectionId">
+          <ion-label slot="label">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="locationInfo.levelId"/>
+        <ion-input label-placement="floating" v-model="locationInfo.levelId">
+          <ion-label slot="label">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Sequence") }}</ion-label>
-        <ion-input v-model="locationInfo.positionId"/>
+        <ion-input :label="translate('Sequence')" label-placement="floating" v-model="locationInfo.positionId" />
       </ion-item>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
diff --git a/src/components/AddStaffMemberModal.vue b/src/components/AddStaffMemberModal.vue
index fe694dd9..f2a28a4e 100644
--- a/src/components/AddStaffMemberModal.vue
+++ b/src/components/AddStaffMemberModal.vue
@@ -19,11 +19,11 @@
     <ion-list v-else>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
       <ion-item v-for="(party, index) in parties" :key="index">
-        <ion-label>
-          {{ party.fullName }}
-          <p>{{ party.partyId }}</p>
-        </ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" :value="getPartyRoleTypeId(party.partyId)" @ion-change="updateSelectedParties($event, party.partyId)" required>
+          <ion-label slot="label">
+            {{ party.fullName }}
+            <p>{{ party.partyId }}</p>
+          </ion-label>
           <ion-select-option v-for="(description, roleTypeId) in partyRoles" :key='roleTypeId' :value="roleTypeId">{{ description }}</ion-select-option>
         </ion-select>
       </ion-item>
diff --git a/src/components/CreateFacilityLoginModal.vue b/src/components/CreateFacilityLoginModal.vue
index f9cd024f..41c86caf 100644
--- a/src/components/CreateFacilityLoginModal.vue
+++ b/src/components/CreateFacilityLoginModal.vue
@@ -13,24 +13,25 @@
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-label class="ion-text-wrap" position="floating">
-          {{ translate('Username') }} <ion-text color="danger">*</ion-text>
-        </ion-label>
-        <ion-input v-model="username" />
+        <ion-input label-placement="floating" v-model="username">
+          <ion-label slot="label">
+            {{ translate('Username') }} <ion-text color="danger">*</ion-text>
+          </ion-label>
+        </ion-input>
       </ion-item>
-      <ion-item ref="password">
-        <ion-label class="ion-text-wrap" position="floating">
-          {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-        </ion-label>
-        <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" />
-        <ion-note slot="helper">
-          {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
-        </ion-note>
+      <ion-item ref="password" lines="none">
+        <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" :helperText="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
+          <ion-label slot="label">
+            {{ translate('Password') }} <ion-text color="danger">*</ion-text>
+          </ion-label>
+        </ion-input>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate('Reset password email') }} <ion-text
-            color="danger">*</ion-text></ion-label>
-        <ion-input v-model="emailAddress"></ion-input>
+        <ion-input label-placement="floating" v-model="emailAddress">
+          <ion-label slot="label">{{ translate('Reset password email') }} 
+            <ion-text color="danger">*</ion-text>
+          </ion-label>
+        </ion-input>
       </ion-item>
     </ion-list>
 
@@ -55,7 +56,6 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonTitle,
   IonToolbar,
   modalController
@@ -89,7 +89,6 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
-    IonNote,
     IonTitle,
     IonToolbar,
   },
diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index 655351fe..18a3360f 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -12,14 +12,12 @@
   
   <ion-content>
     <ion-item>
-      <ion-label>
-        {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-      </ion-label>
-      <ion-input v-model="selectedTimesForWeek.description" />
+      <ion-input v-model="selectedTimesForWeek.description">
+        <ion-label slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></ion-label>
+      </ion-input>
     </ion-item>
     <ion-item lines="full" class="ion-margin-top">
-      <ion-label>{{ translate("Daily timings") }}</ion-label>
-      <ion-toggle :checked="isDailyTimingsChecked" @ionChange="updateDailyTimings" slot="end" />
+      <ion-toggle :checked="isDailyTimingsChecked" @ionChange="updateDailyTimings">{{ translate("Daily timings") }}</ion-toggle>
     </ion-item>
 
     <ion-list lines="none" v-if="isDailyTimingsChecked">
@@ -62,7 +60,7 @@
       show-default-buttons
       hour-cycle="h12"
       presentation="time"
-      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
+      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : DateTime.now().toUTC().toISO()"
       @ionChange="updateTime($event)"
     />
   </ion-modal>
@@ -268,6 +266,7 @@ export default defineComponent({
     return {
       closeCircle,
       closeOutline,
+      DateTime,
       saveOutline,
       store,
       translate
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
index c1b202b2..c86671bb 100644
--- a/src/components/FacilityAddressModal.vue
+++ b/src/components/FacilityAddressModal.vue
@@ -13,32 +13,30 @@
   <ion-content>
     <form @keyup.enter="saveAddress()">
       <ion-item>
-        <ion-label position="floating">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.address1" />
+        <ion-input label-placement="floating" v-model="address.address1">
+          <ion-label slot="label">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item class="ion-margin-bottom">
-        <ion-label position="floating">{{ translate("Address line 2") }}</ion-label>
-        <ion-input v-model="address.address2" />
+        <ion-input label-placement="floating" :label="translate('Address line 2')" v-model="address.address2" />
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.city" />
+        <ion-input label-placement="floating" v-model="address.city">
+          <ion-label slot="label">{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
+        </ion-input>
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label position="floating">{{ translate("Country") }}</ion-label>
-        <ion-select interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="address.countryGeoId">
+        <ion-select label-placement="floating" :label="translate('Country')" interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="address.countryGeoId">
           <ion-select-option v-for="country in countries" :key="country.geoId" :value="country.geoId">{{ country.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label position="floating">{{ translate("State") }}</ion-label>
-        <ion-select interface="popover" :disabled="!address.countryGeoId" :placeholder="translate('Select')" v-model="address.stateProvinceGeoId">
+        <ion-select label-placement="floating" :label="translate('State')" interface="popover" :disabled="!address.countryGeoId" :placeholder="translate('Select')" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states[address.countryGeoId]" :key="state.geoId" :value="state.geoId">{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Zipcode") }}</ion-label>
-        <ion-input v-model="address.postalCode" />
+        <ion-input label-placement="floating" :label="translate('Zipcode')" v-model="address.postalCode" />
       </ion-item>
     </form>
   </ion-content>
diff --git a/src/components/FacilityExternalIdModal.vue b/src/components/FacilityExternalIdModal.vue
index e7924fc8..90e483a8 100644
--- a/src/components/FacilityExternalIdModal.vue
+++ b/src/components/FacilityExternalIdModal.vue
@@ -27,8 +27,7 @@
       <ion-list>
         <ion-list-header>{{ translate('Facility External ID') }}</ion-list-header>
         <ion-item>
-          <ion-label>{{ translate("Identification") }}</ion-label>
-          <ion-input autofocus v-model="currentFacility.externalId" />
+          <ion-input :label="translate('Identification')" v-model="currentFacility.externalId" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/FacilityFilters.vue b/src/components/FacilityFilters.vue
index 716885dd..ea1a2057 100644
--- a/src/components/FacilityFilters.vue
+++ b/src/components/FacilityFilters.vue
@@ -10,16 +10,14 @@
       <ion-list>
         <ion-item lines="none">
           <ion-icon :icon="globeOutline" slot="start" />
-          <ion-label>{{ translate("Product Store") }}</ion-label>
-          <ion-select interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
+          <ion-select :label="translate('Product Store')" interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
             <ion-select-option value="">{{ translate("All") }}</ion-select-option>
             <ion-select-option :value="productStore.productStoreId" :key="index" v-for="(productStore, index) in productStores">{{ productStore.storeName }}</ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item lines="none">
           <ion-icon :icon="businessOutline" slot="start" />
-          <ion-label>{{ translate("Type") }}</ion-label>
-          <ion-select interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
+          <ion-select :label="translate('Type')" interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
             <ion-select-option value="">{{ translate("All") }}</ion-select-option>
             <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
               {{ type.description }}
@@ -37,7 +35,6 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
   IonList,
   IonMenu,
   IonTitle,
@@ -58,7 +55,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonMenu,
     IonTitle,
diff --git a/src/components/FacilityGeoPointModal.vue b/src/components/FacilityGeoPointModal.vue
index 9c5306d2..da348f09 100644
--- a/src/components/FacilityGeoPointModal.vue
+++ b/src/components/FacilityGeoPointModal.vue
@@ -13,20 +13,18 @@
   <ion-content>
     <form @keyup.enter="saveGeoPoint">
       <ion-item class="ion-margin-bottom">
-        <ion-input :placeholder="translate('Zipcode')" v-model="geoPoint.postalCode" />
-        <ion-button fill="outline" @click="generateLatLong">
+        <ion-input aria-label="zipcode" :placeholder="translate('Zipcode')" v-model="geoPoint.postalCode" />
+        <ion-button slot="end" fill="outline" @click="generateLatLong">
           {{ translate("Generate") }}
           <ion-icon v-if="!isGeneratingLatLong" slot="end" :icon="colorWandOutline" />
           <ion-spinner v-else data-spinner-size="small"/>
         </ion-button>
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Latitude") }}</ion-label>
-        <ion-input v-model="geoPoint.latitude" />
+        <ion-input label-placement="floating" :label="translate('Latitude')" v-model="geoPoint.latitude" />
       </ion-item>
       <ion-item>
-        <ion-label position="floating">{{ translate("Longitude") }}</ion-label>
-        <ion-input v-model="geoPoint.longitude" />
+        <ion-input label-placement="floating" :label="translate('Longitude')" v-model="geoPoint.longitude" />
       </ion-item>
     </form>
   </ion-content>
@@ -49,7 +47,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonSpinner,
   IonTitle,
   IonToolbar,
@@ -78,7 +75,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonSpinner,
     IonTitle,
     IonToolbar,
diff --git a/src/components/FacilityMappingModal.vue b/src/components/FacilityMappingModal.vue
index 4def00cc..f2e96cb0 100644
--- a/src/components/FacilityMappingModal.vue
+++ b/src/components/FacilityMappingModal.vue
@@ -27,8 +27,7 @@
       <ion-list>
         <ion-list-header>{{ externalMappingTypes[mappingId] }}</ion-list-header>
         <ion-item>
-          <ion-label>{{ translate("Identification") }}</ion-label>
-          <ion-input v-model="mappingValue" placeholder="Mapping Value" />
+          <ion-input :label="translate('Identification')" v-model="mappingValue" placeholder="Mapping Value" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/FacilityShopifyMappingModal.vue b/src/components/FacilityShopifyMappingModal.vue
index 0e38b3f9..43b87142 100644
--- a/src/components/FacilityShopifyMappingModal.vue
+++ b/src/components/FacilityShopifyMappingModal.vue
@@ -27,17 +27,16 @@
       <ion-list>
         <ion-list-header>{{ translate('Shopify location') }}</ion-list-header>
         <ion-item @keyup.enter.stop>
-          <ion-label>{{ translate("Shopify store") }}</ion-label>
+          <ion-label v-if="type && type === 'update'">{{ translate("Shopify store") }}</ion-label>
           <ion-label slot="end" v-if="type && type === 'update'">{{ shopifyFacilityMapping.shopId }}</ion-label>
-          <ion-select v-else interface="popover" :placeholder="translate('Select')" v-model="shopId">
+          <ion-select v-else :label="translate('Shopify store')" interface="popover" :placeholder="translate('Select')" v-model="shopId">
             <ion-select-option v-for="shop in shopifyShops" :key="shop.shopId" :value="shop.shopId">
               {{ shop.name ? shop.name : shop.shopId }}
             </ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item>
-          <ion-label>{{ translate("Location ID") }}</ion-label>
-          <ion-input :placeholder="translate('Add your location ID from Shopify')" v-model="shopifyLocationId" />
+          <ion-input :label="translate('Location ID')" :placeholder="translate('Add your location ID from Shopify')" v-model="shopifyLocationId" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/SelectProductStoreModal.vue b/src/components/SelectProductStoreModal.vue
index a2db2a5f..f0061d56 100644
--- a/src/components/SelectProductStoreModal.vue
+++ b/src/components/SelectProductStoreModal.vue
@@ -13,11 +13,12 @@
   <ion-content>
     <ion-list>
       <ion-item v-for="productStore in productStores" :key="productStore.productStoreId">
-        <ion-label>
-          {{ productStore.storeName }}
-          <p>{{ productStore.productStoreId }}</p>
-        </ion-label>
-        <ion-checkbox slot="end" :checked="isSelected(productStore.productStoreId)" @ionChange="toggleProductStoreSelection(productStore)" />
+        <ion-checkbox :checked="isSelected(productStore.productStoreId)" @ionChange="toggleProductStoreSelection(productStore)">
+          <ion-label>
+            {{ productStore.storeName }}
+            <p>{{ productStore.productStoreId }}</p>
+          </ion-label>
+        </ion-checkbox>
       </ion-item>
     </ion-list>
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 0a246529..cc739260 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -356,6 +356,10 @@ hr {
   justify-self: start
 }
 
+ion-item > ion-label:not([slot="end"]) {
+  width: unset;
+}
+
 @media (min-width: 700px) {
   .list-item {
     --col-calc: var(--columns-tablet);
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 14139021..dae6c808 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -21,8 +21,7 @@
             <div class="ion-margin-top">
               <ion-item>
                 <ion-icon :icon="bookmarkOutline" slot="start"/>
-                <ion-label>{{ translate('Facility Type') }}</ion-label>
-                <ion-select interface="popover" v-model="parentFacilityTypeId" @ionChange="getFacilityTypesByParentTypeId()">
+                <ion-select :label="translate('Facility Type')" interface="popover" v-model="parentFacilityTypeId" @ionChange="getFacilityTypesByParentTypeId()">
                   <ion-select-option value="PHYSICAL_STORE">{{ translate('Physical Store') }}</ion-select-option>
                   <ion-select-option value="DISTRIBUTION_CENTER">{{ translate('Distribution Center') }}</ion-select-option>
                 </ion-select>
@@ -30,8 +29,7 @@
 
               <ion-item lines="none" class="ion-margin-bottom">
                 <ion-icon :icon="bookmarksOutline" slot="start"/>
-                <ion-label>{{ translate('Facility SubType') }}</ion-label>
-                <ion-select interface="popover" v-model="facilityTypeId" @ionChange="updateFacilityType()">
+                <ion-select :label="translate('Facility SubType')" interface="popover" v-model="facilityTypeId" @ionChange="updateFacilityType()">
                   <ion-select-option v-for="(type, facilityTypeId) in facilityTypeIdOptions" :key="facilityTypeId" :value="facilityTypeId">{{ type.description ? type.description : facilityTypeId }}</ion-select-option>
                 </ion-select>
               </ion-item>
@@ -192,20 +190,16 @@
               </ion-card-title>
             </ion-card-header>
             <ion-item>
-              <ion-label>{{ translate("Allow pickup") }}</ion-label>
-              <ion-toggle :checked="current.allowPickup" slot="end" @click="updateFulfillmentSetting($event, 'PICKUP')"/>
+              <ion-toggle :checked="current.allowPickup" @click.prevent="updateFulfillmentSetting($event, 'PICKUP')">{{ translate("Allow pickup") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
-              <ion-toggle :checked="current.useOMSFulfillment" slot="end" @click="updateFulfillmentSetting($event, 'OMS_FULFILLMENT')"/>
+              <ion-toggle :checked="current.useOMSFulfillment" @click.prevent="updateFulfillmentSetting($event, 'OMS_FULFILLMENT')">{{ translate("Uses native fulfillment app") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ translate("Generate shipping labels") }}</ion-label>
-              <ion-toggle :checked="current.generateShippingLabel" slot="end" @click="updateFulfillmentSetting($event, 'AUTO_SHIPPING_LABEL')"/>
+              <ion-toggle :checked="current.generateShippingLabel" @click.prevent="updateFulfillmentSetting($event, 'AUTO_SHIPPING_LABEL')">{{ translate("Generate shipping labels") }}</ion-toggle>
             </ion-item>
             <ion-item lines="full">
-              <ion-label>{{ translate("Days to ship") }}</ion-label>
-              <ion-input v-model="defaultDaysToShip" type="number" min="0" :placeholder="translate('days to ship')"/>
+              <ion-input :label="translate('Days to ship')" v-model="defaultDaysToShip" type="number" min="0" :placeholder="translate('days to ship')"/>
             </ion-item>
             <ion-button fill="outline" expand="block" @click="updateDefaultDaysToShip">
               {{ translate("Update days to ship") }}
@@ -221,8 +215,7 @@
               {{ translate("Select which channels this facility publishes inventory too.") }}
             </ion-card-content>
             <ion-item v-for="inventoryGroup in current.inventoryGroups" :key="inventoryGroup.facilityGroupId">
-              <ion-label>{{ inventoryGroup?.facilityGroupName }}</ion-label>
-              <ion-toggle :checked="inventoryGroup.isChecked" slot="end" @click="updateSellInventoryOnlineSetting($event, inventoryGroup)"/>
+              <ion-toggle :checked="inventoryGroup.isChecked" slot="end" @click.prevent="updateSellInventoryOnlineSetting($event, inventoryGroup)">{{ inventoryGroup?.facilityGroupName }}</ion-toggle>
             </ion-item>
           </ion-card>
 
@@ -1260,12 +1253,6 @@ export default defineComponent({
       this.facilityTypeId = this.facilityTypeIdOptions['RETAIL_STORE'] ? 'RETAIL_STORE' : this.facilityTypeIdOptions['WAREHOUSE'] ? 'WAREHOUSE' : Object.keys(this.facilityTypeIdOptions)[0]
     },
     async updateFacilityType() {
-      // Not updating facility when current selected type and facilityType are same, as the value of facilityTypeId
-      // gets changed programatically on initial load and thus calls this method hence this check is required
-      if(this.current.facilityTypeId === this.facilityTypeId) {
-        return;
-      }
-
       try {
         const resp = await FacilityService.updateFacility({
           facilityId: this.facilityId,
diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
index ff470161..6525cc6f 100644
--- a/src/views/FindFacilities.vue
+++ b/src/views/FindFacilities.vue
@@ -24,16 +24,14 @@
           <ion-list>
             <ion-item lines="none">
               <ion-icon :icon="globeOutline" slot="start" />
-              <ion-label>{{ translate("Product Store") }}</ion-label>
-              <ion-select interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
+              <ion-select :label="translate('Product Store')" interface="popover" v-model="query.productStoreId" @ionChange="updateQuery()">
                 <ion-select-option value="">{{ translate("All") }}</ion-select-option>
                 <ion-select-option :value="productStore.productStoreId" :key="index" v-for="(productStore, index) in productStores">{{ productStore.storeName }}</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item lines="none">
               <ion-icon :icon="businessOutline" slot="start" />
-              <ion-label>{{ translate("Type") }}</ion-label>
-              <ion-select interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
+              <ion-select :label="translate('Type')" interface="popover" v-model="query.facilityTypeId" @ionChange="updateQuery()">
                 <ion-select-option value="">{{ translate("All") }}</ion-select-option>
                 <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypes">
                   {{ type.description }}
@@ -42,8 +40,7 @@
             </ion-item>
             <ion-item lines="none">
               <ion-icon :icon="albumsOutline" slot="start" />
-              <ion-label>{{ translate("Group") }}</ion-label>
-              <ion-select interface="popover" v-model="query.facilityGroupId" @ionChange="updateQuery()">
+              <ion-select :label="translate('Group')" interface="popover" v-model="query.facilityGroupId" @ionChange="updateQuery()">
                 <ion-select-option value="">{{ translate("All") }}</ion-select-option>
                 <ion-select-option :value="group.facilityGroupId" :key="group.facilityGroupId" v-for="group in facilityGroups">
                   {{ group.facilityGroupName }}

From c29a4c883dd00a7c39539e6147091177d977a1d9 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 8 Jan 2024 19:36:36 +0530
Subject: [PATCH 05/15] Updated: styling for card-header to change the
 direction to row(#162)

---
 src/views/FacilityDetails.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index dae6c808..79241804 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -1339,6 +1339,7 @@ ion-modal.date-time-modal {
 
 ion-card-header {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }

From 73b6866b7c591082ed8d9e5783a3cc4724861f3f Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Tue, 9 Jan 2024 10:19:15 +0530
Subject: [PATCH 06/15] Fixed: usage of components on find groups page(#162)

---
 src/views/FindGroups.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/views/FindGroups.vue b/src/views/FindGroups.vue
index b0f7a48b..af3a2c73 100644
--- a/src/views/FindGroups.vue
+++ b/src/views/FindGroups.vue
@@ -16,10 +16,7 @@
               {{ translate('System groups') }}
             </ion-list-header>
             <ion-item v-for="groupType in facilityGroupTypes" :key="groupType.facilityGroupId">
-              <ion-label>
-                {{ groupType.description ? groupType.description : groupType.facilityGroupTypeId }}
-              </ion-label>
-              <ion-select v-if="groups.length" :placeholder="translate('Select')" :selectedText="getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId).length > 1 ? getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId).length : getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId)[0]" :value="getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId)" @ionChange="updateFacilityGroupAssociation($event, getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId), groupType.facilityGroupTypeId)" :multiple="true">
+              <ion-select :label="groupType.description ? groupType.description : groupType.facilityGroupTypeId" v-if="groups.length" :placeholder="translate('Select')" :selectedText="getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId).length > 1 ? getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId).length : getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId)[0]" :value="getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId)" @ionChange="updateFacilityGroupAssociation($event, getAssociatedFacilityGroupIds(groupType.facilityGroupTypeId), groupType.facilityGroupTypeId)" :multiple="true">
                 <ion-select-option :value="group.facilityGroupId" :disabled="group.facilityGroupTypeId && group.facilityGroupTypeId !== groupType.facilityGroupTypeId" :key="group.facilityGroupId" v-for="group in groups">
                   {{ group.facilityGroupName ? group.facilityGroupName : group.facilityGroupId }}
                 </ion-select-option>
@@ -41,7 +38,7 @@
                 <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
               </ion-button>
             </ion-item>
-            <ion-item @click="viewFacilities(group.facilityGroupId)" button>
+            <ion-item :lines="group.description ? 'inset' : 'none'" @click="viewFacilities(group.facilityGroupId)" button>
               <ion-label>{{ translate('Facilities') }}</ion-label>
               <ion-note slot="end">{{ group.facilityCount }}</ion-note>
             </ion-item>

From 4e5a76cfe38c52b6ca2509beeea17327e6281e61 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Tue, 9 Jan 2024 11:11:34 +0530
Subject: [PATCH 07/15] Fixed: usage of components in create group modal(#162)

---
 src/components/CreateFacilityGroupModal.vue | 29 +++++++--------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/components/CreateFacilityGroupModal.vue b/src/components/CreateFacilityGroupModal.vue
index c66b103a..a0cac670 100644
--- a/src/components/CreateFacilityGroupModal.vue
+++ b/src/components/CreateFacilityGroupModal.vue
@@ -14,33 +14,24 @@
     <form @keyup.enter="createFacilityGroup">
       <ion-list>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-          </ion-label>
-          <ion-input @ionBlur="setFacilityGroupId($event)" v-model="formData.facilityGroupName"/>
+          <ion-input label-placement="floating" @ionBlur="setFacilityGroupId($event)" v-model="formData.facilityGroupName">
+            <ion-label slot="label">
+              {{ translate("Name") }} <ion-text color="danger">*</ion-text>
+            </ion-label>
+          </ion-input>
         </ion-item>
-        <ion-item ref="facilityGroupId">
-          <ion-label position="floating">
-            {{ translate("Internal ID") }}
-          </ion-label>
-          <ion-input v-model="formData.facilityGroupId" @ionChange="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" />
-          <ion-note slot="error">
-            {{ translate('Internal ID cannot be more than 20 characters.') }}
-          </ion-note>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Internal ID')" ref="facilityGroupId" v-model="formData.facilityGroupId" @ionChange="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')" />
         </ion-item>
         <ion-item lines="none">
-          <ion-label>{{ translate("System group type") }}</ion-label>
-          <ion-select interface="popover" v-model="formData.facilityGroupTypeId">
+          <ion-select :label="translate('System group type')" interface="popover" v-model="formData.facilityGroupTypeId">
             <ion-select-option :value="facilityGroupType.facilityGroupTypeId" :key="facilityGroupType.facilityGroupTypeId" v-for="facilityGroupType in facilityGroupTypes">
               {{  facilityGroupType.description ?  facilityGroupType.description : facilityGroupType.facilityGroupTypeId }}
             </ion-select-option>
           </ion-select>
         </ion-item>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Description") }}
-          </ion-label>
-          <ion-input v-model="formData.description"/>
+          <ion-input :label="translate('Description')" label-placement="floating" v-model="formData.description"/>
         </ion-item>
       </ion-list>
 
@@ -66,7 +57,6 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonSelect,
   IonSelectOption,
   IonText,
@@ -97,7 +87,6 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
-    IonNote,
     IonSelect,
     IonSelectOption,
     IonText,

From 7829cfb32ea7f0bb60d78e4ab1eb00f5716bb898 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 10 Jan 2024 10:30:19 +0530
Subject: [PATCH 08/15] Improved: usage of components on parking page(#162)

---
 src/components/CreateFacilityGroupModal.vue   |  2 +-
 src/components/CreateVirtualFacilityModal.vue | 26 ++++++-------------
 src/views/FacilityDetails.vue                 |  2 +-
 src/views/Parking.vue                         |  5 ++--
 4 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/components/CreateFacilityGroupModal.vue b/src/components/CreateFacilityGroupModal.vue
index a0cac670..d29e5f3e 100644
--- a/src/components/CreateFacilityGroupModal.vue
+++ b/src/components/CreateFacilityGroupModal.vue
@@ -21,7 +21,7 @@
           </ion-input>
         </ion-item>
         <ion-item lines="none">
-          <ion-input label-placement="floating" :label="translate('Internal ID')" ref="facilityGroupId" v-model="formData.facilityGroupId" @ionChange="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')" />
+          <ion-input label-placement="floating" :label="translate('Internal ID')" ref="facilityGroupId" v-model="formData.facilityGroupId" @ionInput="validateFacilityGroupId" @ionBlur="markFacilityGroupIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')" />
         </ion-item>
         <ion-item lines="none">
           <ion-select :label="translate('System group type')" interface="popover" v-model="formData.facilityGroupTypeId">
diff --git a/src/components/CreateVirtualFacilityModal.vue b/src/components/CreateVirtualFacilityModal.vue
index a278713c..4aa003f6 100644
--- a/src/components/CreateVirtualFacilityModal.vue
+++ b/src/components/CreateVirtualFacilityModal.vue
@@ -14,25 +14,17 @@
     <form @keyup.enter="createVirtualFacility">
       <ion-list>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-          </ion-label>
-          <ion-input @ionBlur="setFacilityId($event)" v-model="formData.facilityName"/>
+          <ion-input label-placement="floating" @ionBlur="setFacilityId($event)" v-model="formData.facilityName">
+            <ion-label slot="label">
+              {{ translate("Name") }} <ion-text color="danger">*</ion-text>
+            </ion-label>
+          </ion-input>
         </ion-item>
-        <ion-item ref="facilityId">
-          <ion-label position="floating">
-            {{ translate("Internal ID") }}
-          </ion-label>
-          <ion-input v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" />
-          <ion-note slot="error">
-            {{ translate('Internal ID cannot be more than 20 characters.') }}
-          </ion-note>
+        <ion-item lines="none">
+          <ion-input :label="translate('Internal ID')" label-placement="floating" ref="facilityId" v-model="formData.facilityId" @ionInput="validateFacilityId" @ionBlur="markFacilityIdTouched" :error-text="translate('Internal ID cannot be more than 20 characters.')"/>
         </ion-item>
         <ion-item>
-          <ion-label position="floating">
-            {{ translate("Description") }}
-          </ion-label>
-          <ion-input v-model="formData.description"/>
+          <ion-input label-placement="floating" :label="translate('Description')" v-model="formData.description"/>
         </ion-item>
       </ion-list>
 
@@ -58,7 +50,6 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonText,
   IonTitle,
   IonToolbar,
@@ -87,7 +78,6 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
-    IonNote,
     IonText,
     IonTitle,
     IonToolbar
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 79241804..08cae3f5 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -116,7 +116,7 @@
             <ion-radio-group v-model="selectedCalendarId">
               <ion-item v-for="(calendar, index) in calendars.slice(0,3)" :key="index" lines="none">
                 <ion-radio :value="calendar.calendarId">
-                  <div class="ion-text-wrap">{{ calendar.description ? calendar.description : calendar.calendarId }} {{ 'TEST CALENDAR THIS' }}</div>
+                  <div class="ion-text-wrap">{{ calendar.description ? calendar.description : calendar.calendarId }}</div>
                 </ion-radio>
               </ion-item>
             </ion-radio-group>
diff --git a/src/views/Parking.vue b/src/views/Parking.vue
index a39c0b6e..7fade418 100644
--- a/src/views/Parking.vue
+++ b/src/views/Parking.vue
@@ -20,7 +20,7 @@
               <h1>{{ facility.facilityName }}</h1>
               <p>{{ facility.facilityId }}</p>
             </ion-label>
-            <ion-button slot="end" fill="clear" color="medium" @click="openVirtualFacilityActionsPopover($event, facility)">
+            <ion-button fill="clear" color="medium" @click="openVirtualFacilityActionsPopover($event, facility)">
               <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
             </ion-button>
           </ion-item>
@@ -39,8 +39,7 @@
             <ion-note slot="end">{{ facility.orderCount }}</ion-note>
           </ion-item>
           <ion-item lines="full" v-if="['BACKORDER', 'PRE_ORDER'].includes(facility.facilityTypeId)">
-            <ion-label>{{ translate('Auto release') }}</ion-label>
-            <ion-toggle :checked="facility.autoReleaseJob" :disabled="true" slot="end" />
+            <ion-toggle :checked="facility.autoReleaseJob" :disabled="true">{{ translate('Auto release') }}</ion-toggle>
           </ion-item>
           <ion-item lines="full" v-if="facility.description && !['BACKORDER', 'PRE_ORDER'].includes(facility.facilityTypeId) && facility.facilityId !== '_NA_'">
             <ion-label>{{ facility.description }}</ion-label>

From 389134f63fb02726f3298915767ccf47c047b6f3 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 10 Jan 2024 14:51:33 +0530
Subject: [PATCH 09/15] Fixed: component usage in facility create flow(#162)

---
 src/views/AddFacilityAddress.vue | 50 +++++++++++---------------------
 src/views/AddFacilityConfig.vue  | 47 ++++++++++++++----------------
 src/views/CreateFacility.vue     | 37 +++++++++++------------
 3 files changed, 56 insertions(+), 78 deletions(-)

diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
index 8508e095..48db52a4 100644
--- a/src/views/AddFacilityAddress.vue
+++ b/src/views/AddFacilityAddress.vue
@@ -14,44 +14,34 @@
           </ion-card-header>
           <ion-list>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Address line 1') }} <ion-text color="danger">*</ion-text>
-              </ion-label>
-              <ion-input v-model="formData.address1" />
+              <ion-input label-placement="floating" v-model="formData.address1">
+                <ion-label slot="label">
+                  {{ translate('Address line 1') }} <ion-text color="danger">*</ion-text>
+                </ion-label>
+              </ion-input>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Address line 2') }}
-              </ion-label>
-              <ion-input v-model="formData.address2" />
+              <ion-input :label="translate('Address line 2')" label-placement="floating" v-model="formData.address2" />
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('City') }} <ion-text color="danger">*</ion-text>
-              </ion-label>
-              <ion-input v-model="formData.city" />
+              <ion-input label-placement="floating" v-model="formData.city">
+                <ion-label slot="label">
+                  {{ translate('City') }} <ion-text color="danger">*</ion-text>
+                </ion-label>
+              </ion-input>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Zipcode') }}
-              </ion-label>
-              <ion-input v-model="formData.postalCode" />
+              <ion-input :label="translate('Zipcode')" label-placement="floating" v-model="formData.postalCode" />
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Country') }}
-              </ion-label>
-              <ion-select interface="popover" :placeholder="translate('Select country')" @ionChange="updateState($event)" v-model="formData.countryGeoId">
+              <ion-select :label="translate('Country')" label-placement="floating" interface="popover" :placeholder="translate('Select country')" @ionChange="updateState($event)" v-model="formData.countryGeoId">
                 <ion-select-option v-for="country in countries" :key="country.geoId" :value="country.geoId">
                   {{ country.geoName }}
                 </ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('State') }}
-              </ion-label>
-              <ion-select interface="popover" :disabled="!formData.countryGeoId" :placeholder="translate('Select state')" v-model="formData.stateProvinceGeoId">
+              <ion-select :label="translate('State')" label-placement="floating" interface="popover" :disabled="!formData.countryGeoId" :placeholder="translate('Select state')" v-model="formData.stateProvinceGeoId">
                 <ion-select-option v-for="state in states[formData.countryGeoId]" :key="state.geoId" :value="state.geoId">
                   {{ state.geoName }}
                 </ion-select-option>
@@ -66,23 +56,17 @@
           </ion-card-header>
           <ion-list>
             <ion-item>
-              <ion-input v-model="formData.postalCode" :placeholder="translate('Zipcode')" />
+              <ion-input aria-label="zipcode" v-model="formData.postalCode" :placeholder="translate('Zipcode')" />
               <ion-button :disabled="!formData.postalCode || !formData.address1 || !formData.city" @click="generateLatLong()" slot="end" fill="outline">
                 <ion-icon slot="end" :icon='colorWandOutline' />
                 {{ translate('Generate') }}
               </ion-button>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Latitude') }}
-              </ion-label>
-              <ion-input :disabled="!formData.address1 || !formData.city" v-model="formData.latitude" />
+              <ion-input :label="translate('Latitude')" label-placement="floating" :disabled="!formData.address1 || !formData.city" v-model="formData.latitude" />
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Longitude') }}
-              </ion-label>
-              <ion-input :disabled="!formData.address1 || !formData.city" v-model="formData.longitude" />
+              <ion-input :label="translate('Longitude')" label-placement="floating" :disabled="!formData.address1 || !formData.city" v-model="formData.longitude" />
             </ion-item>
           </ion-list>
         </ion-card>
diff --git a/src/views/AddFacilityConfig.vue b/src/views/AddFacilityConfig.vue
index 82e8d1d1..cfd05d42 100644
--- a/src/views/AddFacilityConfig.vue
+++ b/src/views/AddFacilityConfig.vue
@@ -64,42 +64,40 @@
           </ion-card-header>
           <ion-list>
             <ion-item>
-              <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
-              <ion-toggle v-model="fulfillmentSettings.FAC_GRP" slot="end"/>
+              <ion-toggle v-model="fulfillmentSettings.FAC_GRP">{{ translate("Sell Inventory Online") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ translate("Allow pickup") }}</ion-label>
-              <ion-toggle v-model="fulfillmentSettings.PICKUP" slot="end"/>
+              <ion-toggle v-model="fulfillmentSettings.PICKUP">{{ translate("Allow pickup") }}</ion-toggle>
             </ion-item>
             <ion-item>
-              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
-              <ion-toggle v-model="fulfillmentSettings.OMS_FULFILLMENT" slot="end" @ionChange="createLoginCreds = true"/>
+              <ion-toggle v-model="fulfillmentSettings.OMS_FULFILLMENT" @ionChange="createLoginCreds = true">{{ translate("Uses native fulfillment app") }}</ion-toggle>
             </ion-item>
             <template v-if="fulfillmentSettings.OMS_FULFILLMENT">
               <ion-item>
-                <ion-label>{{ translate("Create login credentials") }}</ion-label>
-                <ion-toggle v-model="createLoginCreds" slot="end" />
+                <ion-toggle v-model="createLoginCreds">{{ translate("Create login credentials") }}</ion-toggle>
               </ion-item>
               <template v-if="createLoginCreds">
                 <ion-item>
-                  <ion-label position="floating">
-                    {{ translate('Username') }} <ion-text color="danger">*</ion-text>
-                  </ion-label>
-                  <ion-input v-model="username" />
+                  <ion-input label-placement="floating" v-model="username">
+                    <ion-label slot="label">
+                      {{ translate('Username') }} <ion-text color="danger">*</ion-text>
+                    </ion-label>
+                  </ion-input>
                 </ion-item>
-                <ion-item ref="password">
-                  <ion-label position="floating">
-                    {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-                  </ion-label>
-                  <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password"/>
-                  <ion-note slot="helper">
-                    {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
-                  </ion-note>
+                <ion-item lines="none" ref="password">
+                  <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" helper-text="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
+                    <ion-label slot="label">
+                      {{ translate('Password') }} <ion-text color="danger">*</ion-text>
+                    </ion-label>
+                  </ion-input>
                 </ion-item>
                 <ion-item>
-                  <ion-label position="floating">{{ translate('Reset password email') }} <ion-text
-                      color="danger">*</ion-text></ion-label>
-                  <ion-input v-model="emailAddress"></ion-input>
+                  <ion-input label-placement="floating" v-model="emailAddress">
+                    <ion-label slot="label">
+                      {{ translate('Reset password email') }}
+                      <ion-text color="danger">*</ion-text>
+                    </ion-label>
+                  </ion-input>
                 </ion-item>
               </template>
             </template>
@@ -136,7 +134,6 @@ import {
   IonLabel,
   IonList,
   IonListHeader,
-  IonNote,
   IonPage,
   IonPopover,
   IonText,
@@ -182,7 +179,6 @@ export default defineComponent({
     IonLabel,
     IonList,
     IonListHeader,
-    IonNote,
     IonPage,
     IonPopover,
     IonText,
@@ -435,6 +431,7 @@ export default defineComponent({
 <style scoped>
 ion-card-header {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
diff --git a/src/views/CreateFacility.vue b/src/views/CreateFacility.vue
index ca521f1f..f9d3d565 100644
--- a/src/views/CreateFacility.vue
+++ b/src/views/CreateFacility.vue
@@ -14,33 +14,32 @@
           </ion-card-header>
           <ion-list>
             <ion-item>
-              <ion-label>{{ translate("Type") }}</ion-label>
-              <ion-select interface="popover" v-model="selectedFacilityTypeId">
+              <ion-select :label="translate('Type')" interface="popover" v-model="selectedFacilityTypeId">
                 <ion-select-option :value="facilityTypeId" :key="facilityTypeId" v-for="(type, facilityTypeId) in facilityTypesByParentTypeId">
                   {{ type.description ? type.description : facilityTypeId }}
                 </ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('Name') }} <ion-text color="danger">*</ion-text>
-              </ion-label>
-              <ion-input @ionBlur="setFacilityId($event)" v-model="formData.facilityName" />
+              <ion-input label-placement="floating" @ionBlur="setFacilityId($event)" v-model="formData.facilityName">
+                <ion-label slot="label">
+                  {{ translate('Name') }} <ion-text color="danger">*</ion-text>
+                </ion-label>
+              </ion-input>
             </ion-item>
-            <ion-item ref="facilityId">
-              <ion-label position="floating">
-                {{ translate('Internal ID') }}
-              </ion-label>
-              <ion-input v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" />
-              <ion-note slot="error">
-                {{ translate('Internal ID cannot be more than 20 characters.') }}
-              </ion-note>
+            <ion-item lines="none">
+              <ion-input label-placement="floating" ref="facilityId" v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" error-text="translate('Internal ID cannot be more than 20 characters.')">
+                <ion-label slot="label">
+                  {{ translate('Internal ID') }}
+                </ion-label>
+              </ion-input>
             </ion-item>
             <ion-item>
-              <ion-label position="floating">
-                {{ translate('External ID') }}
-              </ion-label>
-              <ion-input v-model="formData.externalId" />
+              <ion-input label-placement="floating" v-model="formData.externalId">
+                <ion-label slot="label">
+                  {{ translate('External ID') }}
+                </ion-label>
+              </ion-input>
             </ion-item>
           </ion-list>
         </ion-card>
@@ -70,7 +69,6 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonPage,
   IonSelect,
   IonSelectOption,
@@ -103,7 +101,6 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
-    IonNote,
     IonPage,
     IonSelect,
     IonSelectOption,

From 8421113c2fc848cf02d1e4fe72ae478a93e40d1a Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Wed, 10 Jan 2024 16:06:42 +0530
Subject: [PATCH 10/15] Fixed: ion-toggle label issue(#162)

---
 src/views/FacilityDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 08cae3f5..082d318a 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -215,7 +215,7 @@
               {{ translate("Select which channels this facility publishes inventory too.") }}
             </ion-card-content>
             <ion-item v-for="inventoryGroup in current.inventoryGroups" :key="inventoryGroup.facilityGroupId">
-              <ion-toggle :checked="inventoryGroup.isChecked" slot="end" @click.prevent="updateSellInventoryOnlineSetting($event, inventoryGroup)">{{ inventoryGroup?.facilityGroupName }}</ion-toggle>
+              <ion-toggle :checked="inventoryGroup.isChecked" @click.prevent="updateSellInventoryOnlineSetting($event, inventoryGroup)">{{ inventoryGroup?.facilityGroupName }}</ion-toggle>
             </ion-item>
           </ion-card>
 

From 4914c390934d54fb9dd6774e49828a3cb78d531b Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 28 Mar 2024 15:31:16 +0530
Subject: [PATCH 11/15] Improved: updated code according to the needs for ionic
 7 (#162)

---
 src/components/AddFacilityToGroupModal.vue     | 11 ++++++-----
 src/components/AddProductStoreToGroupModal.vue | 11 ++++++-----
 src/components/CustomMappingModal.vue          |  9 +++------
 src/components/FacilityAddressModal.vue        |  8 +++-----
 src/components/GroupTypeModal.vue              | 11 ++++++-----
 src/views/AddFacilityAddress.vue               |  5 ++---
 6 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/AddFacilityToGroupModal.vue b/src/components/AddFacilityToGroupModal.vue
index 1e89a7c7..9cd42109 100644
--- a/src/components/AddFacilityToGroupModal.vue
+++ b/src/components/AddFacilityToGroupModal.vue
@@ -22,11 +22,12 @@
       </div>
       <div v-else>
         <ion-item v-for="(facility, index) in facilities" :key="index" @click="updateSelectedFacilities(facility.facilityId)" lines="none">
-          <ion-label>
-            {{ facility.facilityName }}
-            <p>{{ facility.facilityId }}</p>
-          </ion-label>
-          <ion-checkbox :checked="isFacilitySelected(facility.facilityId)" />
+          <ion-checkbox :checked="isFacilitySelected(facility.facilityId)">
+            <ion-label>
+              {{ facility.facilityName }}
+              <p>{{ facility.facilityId }}</p>
+            </ion-label>
+          </ion-checkbox>
         </ion-item>
       </div>
     </ion-list>
diff --git a/src/components/AddProductStoreToGroupModal.vue b/src/components/AddProductStoreToGroupModal.vue
index 2253cc1b..fc63f74f 100644
--- a/src/components/AddProductStoreToGroupModal.vue
+++ b/src/components/AddProductStoreToGroupModal.vue
@@ -13,11 +13,12 @@
   <ion-content>
     <ion-list>
       <ion-item v-for="productStore in productStores" :key="productStore.productStoreId" @click="toggleProductStoreSelection(productStore)" >
-        <ion-label>
-          {{ productStore.storeName }}
-          <p>{{ productStore.productStoreId }}</p>
-        </ion-label>
-        <ion-checkbox :checked="isSelected(productStore.productStoreId)" slot="end" />
+        <ion-checkbox :checked="isSelected(productStore.productStoreId)">
+          <ion-label>
+            {{ productStore.storeName }}
+            <p>{{ productStore.productStoreId }}</p>
+          </ion-label>
+        </ion-checkbox>
       </ion-item>
     </ion-list>
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
diff --git a/src/components/CustomMappingModal.vue b/src/components/CustomMappingModal.vue
index 66a2273b..97b3c552 100644
--- a/src/components/CustomMappingModal.vue
+++ b/src/components/CustomMappingModal.vue
@@ -26,16 +26,13 @@
       <ion-list>
         <ion-list-header>{{ translate("Custom mapping") }}</ion-list-header>
         <ion-item>
-          <ion-label>{{ translate("Mapping ID") }}</ion-label>
-          <ion-input v-model="mappingId" placeholder="Mapping ID" />
+          <ion-input :label="translate('Mapping ID')" v-model="mappingId" placeholder="Mapping ID" />
         </ion-item>
         <ion-item>
-          <ion-label>{{ translate("Mapping Name") }}</ion-label>
-          <ion-input v-model="mappingName" placeholder="Mapping name" />
+          <ion-input :label="translate('Mapping Name')" v-model="mappingName" placeholder="Mapping name" />
         </ion-item>
         <ion-item>
-          <ion-label>{{ translate("Identification") }}</ion-label>
-          <ion-input v-model="mappingValue" placeholder="Mapping Value" />
+          <ion-input :label="translate('Identification')" v-model="mappingValue" placeholder="Mapping Value" />
         </ion-item>
       </ion-list>
 
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
index 9089b643..3b69b65b 100644
--- a/src/components/FacilityAddressModal.vue
+++ b/src/components/FacilityAddressModal.vue
@@ -16,8 +16,7 @@
         <ion-label>{{ translate("Address") }}</ion-label>
       </ion-item-divider>
       <ion-item>
-        <ion-label position="floating">{{ translate("Shipping name") }}</ion-label>
-        <ion-input v-model="address.toName" />
+        <ion-input :label="translate('Shipping name')" label-placement="floating" v-model="address.toName" />
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="address.address1">
@@ -51,9 +50,8 @@
         <ion-label>{{ translate("Contact details") }}</ion-label>
       </ion-item-divider>
       <ion-item>
-        <ion-label :position="telecomNumberValue?.countryCode ? 'stacked' : 'floating'">{{ translate("Contact number") }}</ion-label>
-        <ion-input v-model="telecomNumberValue.contactNumber">
-          <ion-text>{{ `${telecomNumberValue?.countryCode}-` }}</ion-text>
+        <ion-input :label="translate('Contact number')" :label-placement="telecomNumberValue?.countryCode ? 'stacked' : 'floating'" v-model="telecomNumberValue.contactNumber">
+          <ion-text slot="start">{{ telecomNumberValue?.countryCode }}</ion-text>
         </ion-input>
       </ion-item>
     </form>
diff --git a/src/components/GroupTypeModal.vue b/src/components/GroupTypeModal.vue
index c8c91186..332f32b0 100644
--- a/src/components/GroupTypeModal.vue
+++ b/src/components/GroupTypeModal.vue
@@ -20,11 +20,12 @@
       <div v-else>
         <ion-radio-group v-model="facilityGroupValue.facilityGroupTypeId">
           <ion-item :key="groupType.facilityGroupTypeId" v-for="groupType in facilityGroupTypes">
-            <ion-label>
-              {{ groupType.description ? groupType.description : groupType.facilityGroupTypeId }}
-              <p>{{ groupType.facilityGroupTypeId }}</p>
-            </ion-label>
-            <ion-radio :value="groupType.facilityGroupTypeId" slot="end" />
+            <ion-radio :value="groupType.facilityGroupTypeId">
+              <ion-label>
+                {{ groupType.description ? groupType.description : groupType.facilityGroupTypeId }}
+                <p>{{ groupType.facilityGroupTypeId }}</p>
+              </ion-label>
+            </ion-radio>
           </ion-item>
         </ion-radio-group>
       </div>
diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
index 655aed83..952a75ab 100644
--- a/src/views/AddFacilityAddress.vue
+++ b/src/views/AddFacilityAddress.vue
@@ -51,9 +51,8 @@
               </ion-select>
             </ion-item>
             <ion-item lines="none">
-              <ion-label :position="countryCode ? 'stacked' : 'floating'">{{ translate("Contact number") }}</ion-label>
-              <ion-input v-model="contactNumber">
-                <ion-text>{{ `${countryCode}-` }}</ion-text>
+              <ion-input :label="translate('Contact number')" :label-placement="countryCode ? 'stacked' : 'floating'" v-model="contactNumber">
+                <ion-text slot="start">{{ countryCode }}</ion-text>
               </ion-input>
             </ion-item>
           </ion-list>

From f34ef71ae1fda66625b36b5486294a326a3f89d5 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 28 Mar 2024 15:46:47 +0530
Subject: [PATCH 12/15] Improved: label for ion-inputs according to ionic 7
 (#162)

---
 src/views/AddFacilityAddress.vue | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
index 952a75ab..289063b6 100644
--- a/src/views/AddFacilityAddress.vue
+++ b/src/views/AddFacilityAddress.vue
@@ -18,9 +18,7 @@
             </ion-item>
             <ion-item>
               <ion-input label-placement="floating" v-model="formData.address1">
-                <ion-label>
-                  {{ translate('Address line 1') }} <ion-text color="danger">*</ion-text>
-                </ion-label>
+                <div slot="label">{{ translate('Address line 1') }} <ion-text color="danger">*</ion-text></div>
               </ion-input>
             </ion-item>
             <ion-item>
@@ -28,9 +26,7 @@
             </ion-item>
             <ion-item>
               <ion-input label-placement="floating" v-model="formData.city">
-                <ion-label slot="label">
-                  {{ translate('City') }} <ion-text color="danger">*</ion-text>
-                </ion-label>
+                <div slot="label">{{ translate('City') }} <ion-text color="danger">*</ion-text></div>
               </ion-input>
             </ion-item>
             <ion-item>
@@ -64,11 +60,12 @@
           </ion-card-header>
           <ion-list>
             <ion-item>
-              <ion-input aria-label="zipcode" v-model="formData.postalCode" :placeholder="translate('Zipcode')" />
-              <ion-button :disabled="!formData.postalCode || !formData.address1 || !formData.city" @click="generateLatLong()" slot="end" fill="outline">
-                <ion-icon slot="end" :icon='colorWandOutline' />
-                {{ translate('Generate') }}
-              </ion-button>
+              <ion-input v-model="formData.postalCode" :placeholder="translate('Zipcode')">
+                <ion-button :disabled="!formData.postalCode || !formData.address1 || !formData.city" @click="generateLatLong()" slot="end" fill="outline">
+                  <ion-icon slot="end" :icon='colorWandOutline' />
+                  {{ translate('Generate') }}
+                </ion-button>
+              </ion-input>
             </ion-item>
             <ion-item>
               <ion-input :label="translate('Latitude')" label-placement="floating" :disabled="!formData.address1 || !formData.city" v-model="formData.latitude" />
@@ -104,7 +101,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonPage,
   IonSelect,
@@ -137,7 +133,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonPage,
     IonSelect,

From 75217d9e3fef58df2ae287340839a8dcde66ff0c Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 28 Mar 2024 16:49:36 +0530
Subject: [PATCH 13/15] Improved: used div instead of ion-label for showing
 label in ion-input (#162)

---
 src/components/AddLocationModal.vue           | 10 ++++------
 src/components/CreateFacilityGroupModal.vue   |  6 +-----
 src/components/CreateFacilityLoginModal.vue   | 14 +++-----------
 src/components/CreateVirtualFacilityModal.vue |  6 +-----
 src/components/CustomScheduleModal.vue        |  2 +-
 src/components/FacilityAddressModal.vue       |  4 ++--
 src/views/AddFacilityConfig.vue               | 13 +++----------
 src/views/CreateFacility.vue                  | 18 +++---------------
 8 files changed, 18 insertions(+), 55 deletions(-)

diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
index bf63a57a..f7428730 100644
--- a/src/components/AddLocationModal.vue
+++ b/src/components/AddLocationModal.vue
@@ -21,22 +21,22 @@
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="locationInfo.areaId">
-          <ion-label slot="label">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("Area") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="locationInfo.aisleId">
-          <ion-label slot="label">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="locationInfo.sectionId">
-          <ion-label slot="label">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("Section") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="locationInfo.levelId">
-          <ion-label slot="label">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("Level") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
@@ -63,7 +63,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonSelect,
   IonSelectOption,
   IonText,
@@ -93,7 +92,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonSelect,
     IonSelectOption,
     IonText,
diff --git a/src/components/CreateFacilityGroupModal.vue b/src/components/CreateFacilityGroupModal.vue
index 15cd00fb..586b4165 100644
--- a/src/components/CreateFacilityGroupModal.vue
+++ b/src/components/CreateFacilityGroupModal.vue
@@ -15,9 +15,7 @@
       <ion-list>
         <ion-item>
           <ion-input label-placement="floating" @ionBlur="setFacilityGroupId($event)" v-model="formData.facilityGroupName">
-            <ion-label slot="label">
-              {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-            </ion-label>
+            <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
           </ion-input>
         </ion-item>
         <ion-item lines="none">
@@ -55,7 +53,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonSelect,
   IonSelectOption,
@@ -85,7 +82,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonSelect,
     IonSelectOption,
diff --git a/src/components/CreateFacilityLoginModal.vue b/src/components/CreateFacilityLoginModal.vue
index d9a2882a..ed80f638 100644
--- a/src/components/CreateFacilityLoginModal.vue
+++ b/src/components/CreateFacilityLoginModal.vue
@@ -14,23 +14,17 @@
     <ion-list>
       <ion-item>
         <ion-input label-placement="floating" v-model="username">
-          <ion-label slot="label">
-            {{ translate('Username') }} <ion-text color="danger">*</ion-text>
-          </ion-label>
+          <div class="ion-text-wrap" slot="label">{{ translate('Username') }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item ref="password" lines="none">
         <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" :helperText="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
-          <ion-label slot="label">
-            {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-          </ion-label>
+          <div slot="label">{{ translate('Password') }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="emailAddress">
-          <ion-label slot="label">{{ translate('Reset password email') }} 
-            <ion-text color="danger">*</ion-text>
-          </ion-label>
+          <div slot="label">{{ translate('Reset password email') }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
     </ion-list>
@@ -54,7 +48,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonText,
   IonTitle,
@@ -88,7 +81,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonText,
     IonTitle,
diff --git a/src/components/CreateVirtualFacilityModal.vue b/src/components/CreateVirtualFacilityModal.vue
index 1b230ef5..b4e9d395 100644
--- a/src/components/CreateVirtualFacilityModal.vue
+++ b/src/components/CreateVirtualFacilityModal.vue
@@ -15,9 +15,7 @@
       <ion-list>
         <ion-item>
           <ion-input label-placement="floating" @ionBlur="setFacilityId($event)" v-model="formData.facilityName">
-            <ion-label slot="label">
-              {{ translate("Name") }} <ion-text color="danger">*</ion-text>
-            </ion-label>
+            <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
           </ion-input>
         </ion-item>
         <ion-item lines="none">
@@ -48,7 +46,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonText,
   IonTitle,
@@ -76,7 +73,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonText,
     IonTitle,
diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index 18a3360f..3db54925 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -13,7 +13,7 @@
   <ion-content>
     <ion-item>
       <ion-input v-model="selectedTimesForWeek.description">
-        <ion-label slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></ion-label>
+        <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
       </ion-input>
     </ion-item>
     <ion-item lines="full" class="ion-margin-top">
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
index 3b69b65b..f756fcd1 100644
--- a/src/components/FacilityAddressModal.vue
+++ b/src/components/FacilityAddressModal.vue
@@ -20,7 +20,7 @@
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="address.address1">
-          <ion-label slot="label">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item>
@@ -28,7 +28,7 @@
       </ion-item>
       <ion-item>
         <ion-input label-placement="floating" v-model="address.city">
-          <ion-label slot="label">{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
+          <div slot="label">{{ translate("City") }} <ion-text color="danger">*</ion-text></div>
         </ion-input>
       </ion-item>
       <ion-item @keyup.enter.stop>
diff --git a/src/views/AddFacilityConfig.vue b/src/views/AddFacilityConfig.vue
index a49d1054..8c4d0667 100644
--- a/src/views/AddFacilityConfig.vue
+++ b/src/views/AddFacilityConfig.vue
@@ -79,24 +79,17 @@
               <template v-if="createLoginCreds">
                 <ion-item>
                   <ion-input label-placement="floating" v-model="username">
-                    <ion-label slot="label">
-                      {{ translate('Username') }} <ion-text color="danger">*</ion-text>
-                    </ion-label>
+                    <div slot="label">{{ translate('Username') }} <ion-text color="danger">*</ion-text></div>
                   </ion-input>
                 </ion-item>
                 <ion-item lines="none" ref="password">
                   <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" helper-text="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
-                    <ion-label slot="label">
-                      {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-                    </ion-label>
+                    <div slot="label">{{ translate('Password') }} <ion-text color="danger">*</ion-text></div>
                   </ion-input>
                 </ion-item>
                 <ion-item>
                   <ion-input label-placement="floating" v-model="emailAddress">
-                    <ion-label slot="label">
-                      {{ translate('Reset password email') }}
-                      <ion-text color="danger">*</ion-text>
-                    </ion-label>
+                    <div slot="label">{{ translate('Reset password email') }} <ion-text color="danger">*</ion-text></div>
                   </ion-input>
                 </ion-item>
               </template>
diff --git a/src/views/CreateFacility.vue b/src/views/CreateFacility.vue
index d8c09221..6d7999a2 100644
--- a/src/views/CreateFacility.vue
+++ b/src/views/CreateFacility.vue
@@ -22,24 +22,14 @@
             </ion-item>
             <ion-item>
               <ion-input label-placement="floating" @ionBlur="setFacilityId($event)" v-model="formData.facilityName">
-                <ion-label slot="label">
-                  {{ translate('Name') }} <ion-text color="danger">*</ion-text>
-                </ion-label>
+                <div slot="label">{{ translate('Name') }} <ion-text color="danger">*</ion-text></div>
               </ion-input>
             </ion-item>
             <ion-item lines="none">
-              <ion-input label-placement="floating" ref="facilityId" v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" error-text="translate('Internal ID cannot be more than 20 characters.')">
-                <ion-label slot="label">
-                  {{ translate('Internal ID') }}
-                </ion-label>
-              </ion-input>
+              <ion-input :label="translate('Internal ID')" label-placement="floating" ref="facilityId" v-model="formData.facilityId" @ionChange="validateFacilityId" @ionBlur="markFacilityIdTouched" error-text="translate('Internal ID cannot be more than 20 characters.')" />
             </ion-item>
             <ion-item>
-              <ion-input label-placement="floating" v-model="formData.externalId">
-                <ion-label slot="label">
-                  {{ translate('External ID') }}
-                </ion-label>
-              </ion-input>
+              <ion-input :label="translate('External ID')" label-placement="floating" v-model="formData.externalId" />
             </ion-item>
           </ion-list>
         </ion-card>
@@ -67,7 +57,6 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonList,
   IonPage,
   IonSelect,
@@ -99,7 +88,6 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
-    IonLabel,
     IonList,
     IonPage,
     IonSelect,

From 67e1ebbdc291a35bbf4f33838ee2b1e828246010 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 28 Mar 2024 16:57:39 +0530
Subject: [PATCH 14/15] Improved: used ref property on the ion-input instead of
 on ion-item (#162)

---
 src/views/AddFacilityConfig.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/AddFacilityConfig.vue b/src/views/AddFacilityConfig.vue
index 8c4d0667..ed9b559b 100644
--- a/src/views/AddFacilityConfig.vue
+++ b/src/views/AddFacilityConfig.vue
@@ -82,8 +82,8 @@
                     <div slot="label">{{ translate('Username') }} <ion-text color="danger">*</ion-text></div>
                   </ion-input>
                 </ion-item>
-                <ion-item lines="none" ref="password">
-                  <ion-input label-placement="floating" v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" helper-text="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
+                <ion-item lines="none">
+                  <ion-input label-placement="floating" v-model="password" ref="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password" helper-text="translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.')">
                     <div slot="label">{{ translate('Password') }} <ion-text color="danger">*</ion-text></div>
                   </ion-input>
                 </ion-item>

From 4ab4fe48ec0fe2e2033d12e85b5ac706c89183f2 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 28 Mar 2024 18:46:08 +0530
Subject: [PATCH 15/15] Fixed: facility type not updating issue, and
 shopifyShopId getting issue (#162)

---
 src/store/modules/util/actions.ts | 2 +-
 src/views/FacilityDetails.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index ef185b80..a4887151 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -329,7 +329,7 @@ const actions: ActionTree<UtilState, RootState> = {
       logger.error(error)
     }
     commit(types.UTIL_SHOPIFY_SHOP_UPDATED, shopifyShops)
-    return shopifyShops[0].shopifyShopId
+    return shopifyShops[0]?.shopifyShopId
   },
 
   async fetchInventoryGroups({ commit }) {
diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
index 59d15d38..dd7fc9be 100644
--- a/src/views/FacilityDetails.vue
+++ b/src/views/FacilityDetails.vue
@@ -1266,6 +1266,7 @@ export default defineComponent({
       // as default elements within the list. These elements may appear at any index within the list structure.
       // Hence to meet requirement we explicitly handling the default nature of RETAIL STORE and WAREHOUSE.
       this.facilityTypeId = this.facilityTypeIdOptions['RETAIL_STORE'] ? 'RETAIL_STORE' : this.facilityTypeIdOptions['WAREHOUSE'] ? 'WAREHOUSE' : Object.keys(this.facilityTypeIdOptions)[0]
+      this.updateFacilityType()
     },
     async updateFacilityType() {
       try {