From 2134b33d61598b139e841cca5f12b733bb9dcdb1 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 2 May 2024 19:19:33 +0530
Subject: [PATCH 01/10] Implemented: UI for the create and list product store
 page (#1)

---
 src/locales/en.json              | 13 ++++++
 src/router/index.ts              | 10 ++++-
 src/theme/variables.css          |  5 +++
 src/views/CreateProductStore.vue | 65 +++++++++++++++++++++++++++++
 src/views/ProductStore.vue       | 71 ++++++++++++++++++++++++++++++++
 src/views/Tabs.vue               |  6 ++-
 6 files changed, 168 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CreateProductStore.vue
 create mode 100644 src/views/ProductStore.vue

diff --git a/src/locales/en.json b/src/locales/en.json
index 598f678..25574f7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,20 +1,33 @@
 {
+  "Add": "Add",
   "App": "App",
   "Built:": "Built: {builtTime}",
   "Change": "Change",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "Company name": "Company name",
+  "Create a new product store": "Create a new product store",
+  "Create new product store": "Create new product store",
+  "Create product store": "Create product store",
   "Fetching time zones": "Fetching time zones",
   "Go to OMS": "Go to OMS",
+  "ID": "ID",
   "Login": "Login",
   "Logging in...": "Logging in...",
   "Logout": "Logout",
+  "Manage configurations": "Manage configurations",
+  "Name": "Name",
+  "No product store found.": "No product store found.",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
+  "Operating countries": "Operating countries",
   "Password": "Password",
+  "Product store": "Product store",
+  "Product store represents a brand in OMS": "Product store represents a brand in OMS",
   "Search time zones": "Search time zones",
   "Select time zone": "Select time zone",
   "Settings": "Settings",
+  "The name of the parent organization that owns all brands deployed on the OMS": "The name of the parent organization that owns all brands deployed on the OMS",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
   "Time zone updated successfully": "Time zone updated successfully",
diff --git a/src/router/index.ts b/src/router/index.ts
index 7a2c434..580a3fd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -31,7 +31,15 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: "",
-        redirect: "/settings"
+        redirect: "/product-store"
+      },
+      {
+        path: "product-store",
+        component: () => import("@/views/ProductStore.vue")
+      },
+      {
+        path: "create-product-store",
+        component: () => import("@/views/CreateProductStore.vue")
       },
       {
         path: "settings",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index c4dafed..3a60b78 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -245,6 +245,11 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+body {
+  /** Border variable **/
+  --border-medium: 1px solid var(--ion-color-medium);
+}
+
 .empty-state {
   max-width: 100%;
   display: flex;
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
new file mode 100644
index 0000000..c13fcbd
--- /dev/null
+++ b/src/views/CreateProductStore.vue
@@ -0,0 +1,65 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/tabs/product-store" slot="start"></ion-back-button>
+        <ion-title>{{ translate("Create product store") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <h1 class="ion-margin-start">{{ translate('Create a new product store') }}</h1>
+
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Company name')" :helper-text="translate('The name of the parent organization that owns all brands deployed on the OMS')" />
+        </ion-item>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('Name')" :helper-text="translate('Product store represents a brand in OMS')" />
+        </ion-item>
+        <ion-item lines="none">
+          <ion-input label-placement="floating" :label="translate('ID')" :helper-text="translate('Product store represents a brand in OMS')" />
+        </ion-item>
+
+        <ion-item>
+          <ion-icon slot="start" :icon="mapOutline"/>
+          <ion-label>{{ translate("Operating countries") }}</ion-label>
+          <ion-button fill="outline" slot="end">{{ translate("Add") }}</ion-button>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-chip outline>
+            {{ "<countryName>" }}
+            <ion-icon :icon="closeCircleOutline" />
+          </ion-chip>
+          <ion-chip outline>
+            {{ "<countryName>" }}
+            <ion-icon :icon="closeCircleOutline" />
+          </ion-chip>
+        </ion-item>
+
+        <ion-button class="ion-margin-top">
+          {{ translate("Manage configurations") }}
+          <ion-icon slot="end" :icon="arrowForwardOutline"/>
+        </ion-button>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { arrowForwardOutline, closeCircleOutline, mapOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+</script>
+
+<style scoped>
+
+  @media (min-width: 700px) {
+    main {
+      max-width: 375px;
+      margin: auto;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/views/ProductStore.vue b/src/views/ProductStore.vue
new file mode 100644
index 0000000..041cc7b
--- /dev/null
+++ b/src/views/ProductStore.vue
@@ -0,0 +1,71 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ translate("Product store") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <div class="list-item">
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="storefrontOutline" />
+            <ion-label class="ion-text-wrap">
+              <p class="overline">{{ "PRODUCT STORE ID" }}</p>
+              {{ "Product store name" }}
+            </ion-label>
+          </ion-item>
+
+          <div class="tablet">
+            <ion-chip outline>
+              <ion-label>{{ "<count> facilities" }}</ion-label>
+              <ion-icon :icon="openOutline" />
+            </ion-chip>
+          </div>
+
+          <div class="tablet">
+            <ion-chip outline>
+              <ion-label>{{ "<count> shipping methods" }}</ion-label>
+            </ion-chip>
+          </div>
+        </div>
+        <div class="ion-text-center ion-margin">
+          <ion-button fill="outline" @click="createStore()">
+            <ion-icon slot="start" :icon="addOutline"/>
+            {{ translate("Create new product store") }}
+          </ion-button>
+        </div>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { addOutline, openOutline, storefrontOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function createStore() {
+  router.push("create-product-store")
+}
+
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 4;
+  border-bottom: var(--border-medium);
+}
+
+.list-item > ion-item {
+  width: 100%
+}
+
+main {
+  margin: var(--spacer-lg);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index 95e568e..7a23970 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -3,6 +3,10 @@
     <ion-tabs>
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom" v-if="showFooter()">
+        <ion-tab-button tab="store" href="/tabs/product-store">
+          <ion-icon :icon="storefrontOutline" />
+          <ion-label>{{ translate("Product store") }}</ion-label>
+        </ion-tab-button>
         <ion-tab-button tab="more" href="/tabs/settings">
           <ion-icon :icon="settingsOutline" />
           <ion-label>{{ translate("Settings") }}</ion-label>
@@ -15,7 +19,7 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
-import { settingsOutline } from "ionicons/icons";
+import { settingsOutline, storefrontOutline } from "ionicons/icons";
 import { useRouter } from "vue-router";
 
 const router = useRouter();

From 2a52aee973576c538037784ceffc202878c5b2d4 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 2 May 2024 19:40:31 +0530
Subject: [PATCH 02/10] Implemented: UI of the add configurations page (#1)

---
 src/locales/en.json              |  7 ++++
 src/router/index.ts              |  4 ++
 src/views/AddConfigurations.vue  | 64 ++++++++++++++++++++++++++++++++
 src/views/CreateProductStore.vue |  8 +++-
 src/views/ProductStore.vue       |  1 -
 5 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/views/AddConfigurations.vue

diff --git a/src/locales/en.json b/src/locales/en.json
index 25574f7..45e7404 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,10 +1,13 @@
 {
   "Add": "Add",
+  "Add configurations": "Add configurations",
   "App": "App",
+  "Auto approve orders": "Auto approve orders",
   "Built:": "Built: {builtTime}",
   "Change": "Change",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Company name": "Company name",
+  "Configurations": "Configurations",
   "Create a new product store": "Create a new product store",
   "Create new product store": "Create new product store",
   "Create product store": "Create product store",
@@ -21,12 +24,16 @@
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Operating countries": "Operating countries",
+  "Order": "Order",
   "Password": "Password",
+  "Product": "Product",
+  "Product Identifier": "Product Identifier",
   "Product store": "Product store",
   "Product store represents a brand in OMS": "Product store represents a brand in OMS",
   "Search time zones": "Search time zones",
   "Select time zone": "Select time zone",
   "Settings": "Settings",
+  "Setup product store": "Setup product store",
   "The name of the parent organization that owns all brands deployed on the OMS": "The name of the parent organization that owns all brands deployed on the OMS",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
diff --git a/src/router/index.ts b/src/router/index.ts
index 580a3fd..ceb9f00 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -41,6 +41,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "create-product-store",
         component: () => import("@/views/CreateProductStore.vue")
       },
+      {
+        path: "add-configurations",
+        component: () => import("@/views/AddConfigurations.vue")
+      },
       {
         path: "settings",
         component: () => import("@/views/Settings.vue")
diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
new file mode 100644
index 0000000..af1ff89
--- /dev/null
+++ b/src/views/AddConfigurations.vue
@@ -0,0 +1,64 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/tabs/create-product-store" slot="start"></ion-back-button>
+        <ion-title>{{ translate("Add configurations") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button slot="icon-only">
+            <ion-icon :icon="informationCircleOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <h1 class="ion-margin-start">{{ translate('Configurations') }}</h1>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>{{ translate("Product") }}</ion-label>
+          </ion-list-header>
+          
+          <ion-item>
+            <ion-icon slot="start" :icon="shirtOutline"/>
+            <ion-select interface="popover" :label="translate('Product Identifier')" value="sku">
+              <ion-select-option value="sku">{{ "SKU" }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          
+          <ion-list-header>
+            <ion-label>{{ translate("Order") }}</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-toggle label-placement="start" justify="space-between">{{ translate("Auto approve orders") }}</ion-toggle>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-input label-placement="floating" label="Sales order ID prefix" helper-text="Add a custom prefix to HotWax order IDs: <inputValue>10001" />
+          </ion-item>
+        </ion-list>
+
+        <ion-button class="ion-margin-top">
+          {{ translate("Setup product store") }}
+          <ion-icon slot="end" :icon="arrowForwardOutline"/>
+        </ion-button>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
+import { arrowForwardOutline, informationCircleOutline, shirtOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+</script>
+
+<style scoped>
+  @media (min-width: 700px) {
+    main {
+      max-width: 375px;
+      margin: auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index c13fcbd..6980d34 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -37,7 +37,7 @@
           </ion-chip>
         </ion-item>
 
-        <ion-button class="ion-margin-top">
+        <ion-button class="ion-margin-top" @click="manageConfigurations()">
           {{ translate("Manage configurations") }}
           <ion-icon slot="end" :icon="arrowForwardOutline"/>
         </ion-button>
@@ -50,7 +50,13 @@
 import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
 import { arrowForwardOutline, closeCircleOutline, mapOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+
+function manageConfigurations() {
+  router.push("add-configurations")
+}
 </script>
 
 <style scoped>
diff --git a/src/views/ProductStore.vue b/src/views/ProductStore.vue
index 041cc7b..08f49a6 100644
--- a/src/views/ProductStore.vue
+++ b/src/views/ProductStore.vue
@@ -52,7 +52,6 @@ const router = useRouter();
 function createStore() {
   router.push("create-product-store")
 }
-
 </script>
 
 <style scoped>

From 027db7fd98aed8ba098dd0763b9adf4decf4fe1d Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 3 May 2024 12:28:52 +0530
Subject: [PATCH 03/10] Implemented: UI of the product store details page (#1)

---
 src/locales/en.json               |  59 +++++
 src/router/index.ts               |   4 +
 src/views/AddConfigurations.vue   |   9 +-
 src/views/ProductStoreDetails.vue | 390 ++++++++++++++++++++++++++++++
 4 files changed, 461 insertions(+), 1 deletion(-)
 create mode 100644 src/views/ProductStoreDetails.vue

diff --git a/src/locales/en.json b/src/locales/en.json
index 45e7404..946cf68 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,43 +2,102 @@
   "Add": "Add",
   "Add configurations": "Add configurations",
   "App": "App",
+  "Approval": "Approval",
+  "Approve on import": "Approve on import",
   "Auto approve orders": "Auto approve orders",
+  "Auto cancellations days": "Auto cancellations days",
+  "Auto order cancellation": "Auto order cancellation",
+  "Brokering": "Brokering",
   "Built:": "Built: {builtTime}",
+  "Cancel order before fulfillment": "Cancel order before fulfillment",
+  "Cancellations": "Cancellations",
   "Change": "Change",
+  "Choosing a product identifier allows you to view products with your preferred identifiers.": "Choosing a product identifier allows you to view products with your preferred identifiers.",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Company name": "Company name",
   "Configurations": "Configurations",
+  "Configure cancellation threshold for unfulfilled orders based on a specified number of days.": "Configure cancellation threshold for unfulfilled orders based on a specified number of days.",
+  "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.": "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.",
+  "Configure when no further order information is needed prior to order approval.": "Configure when no further order information is needed prior to order approval.",
+  "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.",
   "Create a new product store": "Create a new product store",
+  "Create deadline days": "Create deadline days",
   "Create new product store": "Create new product store",
   "Create product store": "Create product store",
+  "Delivery address": "Delivery address",
+  "Delivery method": "Delivery method",
+  "Display current physical quantity expected at locations while inventory counting.": "Display current physical quantity expected at locations while inventory counting.",
+  "Edit": "Edit",
   "Fetching time zones": "Fetching time zones",
+  "Fulfillment": "Fulfillment",
+  "Global identifier": "Global identifier",
   "Go to OMS": "Go to OMS",
+  "Hold pre-order physical inventory": "Hold pre-order physical inventory",
   "ID": "ID",
+  "Id prefix": "Id prefix",
+  "Identifier": "Identifier",
+  "Import": "Import",
+  "Inventory": "Inventory",
+  "Inventory reservation": "Inventory reservation",
+  "Inventory view": "Inventory view",
   "Login": "Login",
   "Logging in...": "Logging in...",
   "Logout": "Logout",
   "Manage configurations": "Manage configurations",
+  "Minimum shipment threshold": "Minimum shipment threshold",
   "Name": "Name",
   "No product store found.": "No product store found.",
   "No time zone found": "No time zone found",
+  "Notifications": "Nofifications",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Operating countries": "Operating countries",
+  "Operating in": "Operating in",
   "Order": "Order",
+  "Order brokering": "Order brokering",
+  "Order edit permissions": "Order edit permissions",
+  "Order splitting": "Order splitting",
+  "Orders tagged with this tag will undergo line item check for fulfillment facility selection.": "Orders tagged with this tag will undergo line item check for fulfillment facility selection.",
+  "Partial order rejection": "Partial order rejection",
   "Password": "Password",
+  "Pick up location": "Pick up location",
+  "Pre-order computation": "Pre-order computation",
+  "Pre-order group": "Pre-order group",
+  "Preferred identifier": "Preferred identifier",
+  "Preselected facility tag": "Preselected facility tag",
+  "Primary identifier": "Primary identifier",
   "Product": "Product",
   "Product Identifier": "Product Identifier",
   "Product store": "Product store",
   "Product store represents a brand in OMS": "Product store represents a brand in OMS",
+  "Returns": "Returns",
+  "Re-route fulfillment": "Re-route fulfillment",
+  "Routing": "Routing",
+  "Save billing information": "Save billing information",
   "Search time zones": "Search time zones",
+  "Seat Allocation": "Seat Allocation",
+  "Secondary identifier": "Secondary identifier",
   "Select time zone": "Select time zone",
+  "Send notification to Shopify": "Send notification to Shopify",
   "Settings": "Settings",
   "Setup product store": "Setup product store",
+  "Shipment method": "Shipment method",
+  "Shipping facility tag": "Shipping facility tag",
+  "Show systemic inventory": "Show systemic inventory",
+  "Specify any preferred prefix to be added to internal order IDs.": "Specify any preferred prefix to be added to internal order IDs.",
+  "Specify the number of days permitted for creating returns for in-store.": "Specify the number of days permitted for creating returns for in-store.",
+  "Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.": "Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.",
+  "Split orders into multiple groups and fulfill them from different fulfillment centers.": "Split orders into multiple groups and fulfill them from different fulfillment centers.",
+  "Store billing information associated with orders in OMS.": "Store billing information associated with orders in OMS.",
+  "Store pickup": "Store pickup",
+  "Tag will hold the preselected fulfillment facility value.": "Tag will hold the preselected fulfillment facility value.",
+  "The identifier used globally throughout the business operations.": "The identifier used globally throughout the business operations.",
   "The name of the parent organization that owns all brands deployed on the OMS": "The name of the parent organization that owns all brands deployed on the OMS",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
   "Time zone updated successfully": "Time zone updated successfully",
   "Timezone": "Timezone",
+  "Update tracking information upon order shipment in Shopify.": "Update tracking information upon order shipment in Shopify.",
   "Username": "Username",
   "Version:": "Version: {appVersion}"  
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index ceb9f00..d872ed8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -45,6 +45,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "add-configurations",
         component: () => import("@/views/AddConfigurations.vue")
       },
+      {
+        path: "product-store-details",
+        component: () => import("@/views/ProductStoreDetails.vue")
+      },
       {
         path: "settings",
         component: () => import("@/views/Settings.vue")
diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
index af1ff89..1297efe 100644
--- a/src/views/AddConfigurations.vue
+++ b/src/views/AddConfigurations.vue
@@ -39,7 +39,7 @@
           </ion-item>
         </ion-list>
 
-        <ion-button class="ion-margin-top">
+        <ion-button class="ion-margin-top" @click="setupProductStore()">
           {{ translate("Setup product store") }}
           <ion-icon slot="end" :icon="arrowForwardOutline"/>
         </ion-button>
@@ -52,6 +52,13 @@
 import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
 import { arrowForwardOutline, informationCircleOutline, shirtOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+function setupProductStore() {
+  router.push("product-store-details")
+}
 </script>
 
 <style scoped>
diff --git a/src/views/ProductStoreDetails.vue b/src/views/ProductStoreDetails.vue
new file mode 100644
index 0000000..7ef6473
--- /dev/null
+++ b/src/views/ProductStoreDetails.vue
@@ -0,0 +1,390 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/tabs/product-store"/>
+        <ion-title>{{ "<productStoreName>" }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <main>
+        <div class="store-info">
+          <ion-card class="store-info store-details">
+            <ion-item lines="none" class="ion-margin-top">
+              <ion-label>
+                <p class="overline">{{ "PRODUCT STORE ID" }}</p>
+                <h1>{{ "Product store name" }}</h1>
+                <p>{{ "Company name" }}</p>
+              </ion-label>
+              <ion-button fill="outline">{{ translate("Edit") }}</ion-button>
+            </ion-item>
+
+            <div class="ion-margin-top">
+              <ion-item>
+                <ion-icon :icon="mapOutline" slot="start"/>
+                <ion-select :label="translate('Operating in')" value="countries" interface="popover">
+                  <ion-select-option value="countries">{{ "3 countries" }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-icon :icon="thunderstormOutline" slot="start"/>
+                <ion-toggle>{{ translate("Order brokering") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-icon :icon="wineOutline" slot="start"/>
+                <ion-toggle>{{ translate("Inventory reservation") }}</ion-toggle>
+              </ion-item>
+            </div>
+          </ion-card>
+        </div>
+
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Order") }}
+              </ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Import") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-input :label="translate('Id prefix')" placeholder="<prefixValue>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Specify any preferred prefix to be added to internal order IDs.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Save billing information") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Store billing information associated with orders in OMS.") }}</p>
+                </ion-label>
+              </ion-item>
+              
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Approval") }}</ion-label>
+              </ion-item-divider>
+              
+              <ion-item>
+                <ion-toggle>{{ translate("Approve on import") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Configure when no further order information is needed prior to order approval.") }}</p>
+                </ion-label>
+              </ion-item>
+
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Returns") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-input :label="translate('Create deadline days')" placeholder="<days count>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Specify the number of days permitted for creating returns for in-store.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Brokering") }}
+              </ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Seat Allocation") }}</ion-label>
+              </ion-item-divider>
+              
+              <ion-item>
+                <ion-input :label="translate('Preselected facility tag')" placeholder="<tagName>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Orders tagged with this tag will undergo line item check for fulfillment facility selection.") }}</p>
+                </ion-label>
+              </ion-item>
+                
+              <ion-item>
+                <ion-input :label="translate('Shipping facility tag')" placeholder="<tagName>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Tag will hold the preselected fulfillment facility value.") }}</p>
+                </ion-label>
+              </ion-item>
+                
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Routing") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Order splitting") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-input :label="translate('Minimum shipment threshold')" placeholder="<value>" />
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Split orders into multiple groups and fulfill them from different fulfillment centers.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <div>
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  {{ translate("Fulfillment") }}
+                </ion-card-title>
+              </ion-card-header>
+              <ion-list>
+                <ion-item-divider color="light">
+                  <ion-label>{{ translate("Notifications") }}</ion-label>
+                </ion-item-divider>
+  
+                <ion-item>
+                  <ion-toggle>{{ translate("Send notification to Shopify") }}</ion-toggle>
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Update tracking information upon order shipment in Shopify.") }}</p>
+                  </ion-label>
+                </ion-item>
+
+                <ion-item-divider color="light">
+                  <ion-label>{{ translate("Cancellations") }}</ion-label>
+                </ion-item-divider>
+
+                <ion-item>
+                  <ion-toggle>{{ translate("Auto order cancellation") }}</ion-toggle>
+                </ion-item>
+  
+                <ion-item>
+                  <ion-input :label="translate('Auto cancellations days')" placeholder="<days count>" />
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Configure cancellation threshold for unfulfilled orders based on a specified number of days.") }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </ion-card>
+
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>
+                  {{ translate("Store pickup") }}
+                </ion-card-title>
+              </ion-card-header>
+
+              <ion-list>
+                <ion-item>
+                  <ion-toggle>{{ translate("Partial order rejection") }}</ion-toggle>
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-label>
+                    <p>{{ translate("Specify whether you reject a BOPIS order partially when any order item inventory is insufficient at the store.") }}</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </ion-card>
+          </div>
+        </section>
+
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Inventory") }}
+              </ion-card-title>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Inventory view") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Show systemic inventory") }}</ion-toggle>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Display current physical quantity expected at locations while inventory counting.") }}</p>
+                </ion-label>
+              </ion-item>
+              
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Pre-order computation") }}</ion-label>
+              </ion-item-divider>
+              
+              <ion-item>
+                <ion-toggle>{{ translate("Hold pre-order physical inventory") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Pre-order group')" interface="popover" value="">
+                  <ion-select-option value="">
+                    {{ "<facilityGroup>" }}
+                  </ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ translate("Product") }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-list>
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Identifier") }}</ion-label>
+              </ion-item-divider>
+              
+              <ion-item>
+                <ion-select :label="translate('Global identifier')" interface="popover" value="">
+                  <ion-select-option value="">
+                    {{ "<UPCA>" }}
+                    </ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("The identifier used globally throughout the business operations.") }}</p>
+                </ion-label>
+              </ion-item>
+              
+              <ion-item-divider color="light">
+                <ion-label>{{ translate("Preferred identifier") }}</ion-label>
+              </ion-item-divider>
+
+              <ion-item>
+                <ion-select :label="translate('Primary identifier')" interface="popover" value="">
+                  <ion-select-option value="">
+                    {{ "Product Id" }}
+                    </ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Secondary identifier')" interface="popover" value="">
+                  <ion-select-option value="">
+                    {{ "SKU" }}
+                    </ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item lines="none">
+                <ion-label>
+                  <p>{{ translate("Choosing a product identifier allows you to view products with your preferred identifiers.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+
+          <ion-card>
+            <ion-card-header>
+              <div>
+                <ion-card-subtitle class="overline">{{ translate("Re-route fulfillment") }}</ion-card-subtitle>
+                <ion-card-title>{{ translate("Order edit permissions") }}</ion-card-title>
+              </div>
+            </ion-card-header>
+
+            <ion-list>
+              <ion-item>
+                <ion-toggle>{{ translate("Delivery method") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-select :label="translate('Shipment method')" interface="popover" value="">
+                  <ion-select-option value="">
+                    {{ "Two day" }}
+                    </ion-select-option>
+                </ion-select>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Delivery address") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Pick up location") }}</ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-toggle>{{ translate("Cancel order before fulfillment") }}</ion-toggle>
+              </ion-item>
+              <ion-item>
+                <ion-label>
+                  <p>{{ translate("Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.") }}</p>
+                </ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-card>
+        </section>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonBackButton, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
+import { mapOutline, thunderstormOutline, wineOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+</script>
+
+<style scoped>
+section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start;
+}
+
+.store-details {
+  grid-column: span 2;
+}
+
+ion-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.store-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  align-items: start; 
+}
+
+@media screen and (min-width: 700px) {
+
+  ion-content > main {
+    margin: var(--spacer-lg)
+  }
+}
+</style>

From af8ccfd466cafc3d1164770ba5ea375aa3ddb1e4 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 3 May 2024 12:39:28 +0530
Subject: [PATCH 04/10] Implemented: select operating countries modal (#1)

---
 .../SelectOperatingCountriesModal.vue         | 64 +++++++++++++++++++
 src/locales/en.json                           |  2 +
 src/views/CreateProductStore.vue              | 14 +++-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SelectOperatingCountriesModal.vue

diff --git a/src/components/SelectOperatingCountriesModal.vue b/src/components/SelectOperatingCountriesModal.vue
new file mode 100644
index 0000000..a746478
--- /dev/null
+++ b/src/components/SelectOperatingCountriesModal.vue
@@ -0,0 +1,64 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select operating countries") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-searchbar :placeholder="translate('Search country')"  />
+
+    <ion-list>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+      <ion-item>
+        <ion-checkbox>
+          <ion-label>
+            <p class="overline">{{ "GEO ID" }}</p>
+            {{ "<countryName>" }}
+          </ion-label>
+        </ion-checkbox>
+      </ion-item>
+    </ion-list>
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="checkmarkOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { checkmarkOutline, closeOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>
+
+<style scoped>
+ion-content {
+  --padding-bottom: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 946cf68..23240bc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -74,9 +74,11 @@
   "Re-route fulfillment": "Re-route fulfillment",
   "Routing": "Routing",
   "Save billing information": "Save billing information",
+  "Search country": "Search country",
   "Search time zones": "Search time zones",
   "Seat Allocation": "Seat Allocation",
   "Secondary identifier": "Secondary identifier",
+  "Select operating countries": "Select operating countries",
   "Select time zone": "Select time zone",
   "Send notification to Shopify": "Send notification to Shopify",
   "Settings": "Settings",
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index 6980d34..5601f2e 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -23,7 +23,7 @@
         <ion-item>
           <ion-icon slot="start" :icon="mapOutline"/>
           <ion-label>{{ translate("Operating countries") }}</ion-label>
-          <ion-button fill="outline" slot="end">{{ translate("Add") }}</ion-button>
+          <ion-button fill="outline" slot="end" @click="openSelectOperatingCountriesModal()">{{ translate("Add") }}</ion-button>
         </ion-item>
 
         <ion-item lines="none">
@@ -47,16 +47,26 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar, modalController } from "@ionic/vue";
 import { arrowForwardOutline, closeCircleOutline, mapOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
 import { useRouter } from "vue-router";
+import SelectOperatingCountriesModal from "@/components/SelectOperatingCountriesModal.vue";
 
 const router = useRouter();
 
 function manageConfigurations() {
   router.push("add-configurations")
 }
+
+async function openSelectOperatingCountriesModal() {
+  const modal = await modalController.create({
+    component: SelectOperatingCountriesModal,
+    showBackdrop: true
+  })
+
+  modal.present()
+}
 </script>
 
 <style scoped>

From 33aea0a1e797632e99c5c1188e5bb5e70f7ba5ba Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 3 May 2024 14:35:00 +0530
Subject: [PATCH 05/10] Implemented: tag create update ui (#1)

---
 src/locales/en.json               |  4 +++
 src/views/ProductStoreDetails.vue | 52 +++++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 23240bc..f8e6a84 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -9,6 +9,7 @@
   "Auto order cancellation": "Auto order cancellation",
   "Brokering": "Brokering",
   "Built:": "Built: {builtTime}",
+  "Cancel": "Cancel",
   "Cancel order before fulfillment": "Cancel order before fulfillment",
   "Cancellations": "Cancellations",
   "Change": "Change",
@@ -19,10 +20,12 @@
   "Configure cancellation threshold for unfulfilled orders based on a specified number of days.": "Configure cancellation threshold for unfulfilled orders based on a specified number of days.",
   "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.": "Configure inventory computation for pre-sell items based on inventory channels and pre-sell queues.",
   "Configure when no further order information is needed prior to order approval.": "Configure when no further order information is needed prior to order approval.",
+  "Confirm": "Confirm",
   "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.",
   "Create a new product store": "Create a new product store",
   "Create deadline days": "Create deadline days",
   "Create new product store": "Create new product store",
+  "Create new tag": "Create new tag",
   "Create product store": "Create product store",
   "Delivery address": "Delivery address",
   "Delivery method": "Delivery method",
@@ -69,6 +72,7 @@
   "Product": "Product",
   "Product Identifier": "Product Identifier",
   "Product store": "Product store",
+  "Product store name": "Product store name",
   "Product store represents a brand in OMS": "Product store represents a brand in OMS",
   "Returns": "Returns",
   "Re-route fulfillment": "Re-route fulfillment",
diff --git a/src/views/ProductStoreDetails.vue b/src/views/ProductStoreDetails.vue
index 7ef6473..e5067d6 100644
--- a/src/views/ProductStoreDetails.vue
+++ b/src/views/ProductStoreDetails.vue
@@ -16,7 +16,7 @@
                 <h1>{{ "Product store name" }}</h1>
                 <p>{{ "Company name" }}</p>
               </ion-label>
-              <ion-button fill="outline">{{ translate("Edit") }}</ion-button>
+              <ion-button fill="outline" @click="renameProductStore()">{{ translate("Edit") }}</ion-button>
             </ion-item>
 
             <div class="ion-margin-top">
@@ -112,7 +112,10 @@
               </ion-item-divider>
               
               <ion-item>
-                <ion-input :label="translate('Preselected facility tag')" placeholder="<tagName>" />
+                <ion-label>{{ translate("Preselected facility tag") }}</ion-label>
+                <ion-button fill="clear" @click="createUpdateTag()">
+                  <ion-icon slot="icon-only" :icon="addCircleOutline" />
+                </ion-button>
               </ion-item>
               <ion-item lines="none">
                 <ion-label>
@@ -121,7 +124,8 @@
               </ion-item>
                 
               <ion-item>
-                <ion-input :label="translate('Shipping facility tag')" placeholder="<tagName>" />
+                <ion-label>{{ translate("Shipping facility tag") }}</ion-label>
+                <ion-chip outline @click="createUpdateTag()">{{ "<tagName>" }}</ion-chip>
               </ion-item>
               <ion-item lines="none">
                 <ion-label>
@@ -338,7 +342,7 @@
               <ion-item>
                 <ion-toggle>{{ translate("Cancel order before fulfillment") }}</ion-toggle>
               </ion-item>
-              <ion-item>
+              <ion-item lines="none">
                 <ion-label>
                   <p>{{ translate("Control what your customers are allowed to edit on their own when they are editing their order on Re-route Fulfillment.") }}</p>
                 </ion-label>
@@ -352,9 +356,45 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
-import { mapOutline, thunderstormOutline, wineOutline } from "ionicons/icons";
+import { IonBackButton, IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonChip, IonHeader, IonIcon, IonInput, IonItem, IonItemDivider, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, alertController } from "@ionic/vue";
+import { addCircleOutline, mapOutline, thunderstormOutline, wineOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
+
+async function renameProductStore() {
+  const alert = await alertController.create({
+    header: translate("Product store name"),
+    inputs: [{
+      name: "storeName"
+    }],
+    buttons: [{
+      text: translate("Cancel"),
+      role: "cancel"
+    },
+    {
+      text: translate("Confirm")
+    }]
+  })
+
+  await alert.present()
+}
+
+async function createUpdateTag() {
+  const alert = await alertController.create({
+    header: translate("Create new tag"),
+    inputs: [{
+      name: "storeName"
+    }],
+    buttons: [{
+      text: translate("Cancel"),
+      role: "cancel"
+    },
+    {
+      text: translate("Add")
+    }]
+  })
+
+  await alert.present()
+}
 </script>
 
 <style scoped>

From ceadc82ec919c9e36e86f9fc06ce743c8e9d8056 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 3 May 2024 14:52:35 +0530
Subject: [PATCH 06/10] Improved: structure of the code and the how the tag
 used (#1)

---
 .../SelectOperatingCountriesModal.vue         |  7 +-
 src/views/AddConfigurations.vue               |  3 +-
 src/views/CreateProductStore.vue              |  9 ++-
 src/views/ProductStore.vue                    |  1 +
 src/views/ProductStoreDetails.vue             | 66 +++++++------------
 5 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/src/components/SelectOperatingCountriesModal.vue b/src/components/SelectOperatingCountriesModal.vue
index a746478..d70602a 100644
--- a/src/components/SelectOperatingCountriesModal.vue
+++ b/src/components/SelectOperatingCountriesModal.vue
@@ -39,6 +39,7 @@
         </ion-checkbox>
       </ion-item>
     </ion-list>
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button>
         <ion-icon :icon="checkmarkOutline" />
@@ -53,12 +54,12 @@ import { checkmarkOutline, closeOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
 
 function closeModal() {
-  modalController.dismiss();
+  modalController.dismiss({ dismissed: true });
 }
 </script>
 
 <style scoped>
-ion-content {
+  ion-content {
   --padding-bottom: 80px;
-}
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
index 1297efe..1e121de 100644
--- a/src/views/AddConfigurations.vue
+++ b/src/views/AddConfigurations.vue
@@ -11,6 +11,7 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
+
     <ion-content>
       <main>
         <h1 class="ion-margin-start">{{ translate('Configurations') }}</h1>
@@ -32,7 +33,7 @@
           </ion-list-header>
 
           <ion-item>
-            <ion-toggle label-placement="start" justify="space-between">{{ translate("Auto approve orders") }}</ion-toggle>
+            <ion-toggle>{{ translate("Auto approve orders") }}</ion-toggle>
           </ion-item>
           <ion-item lines="none">
             <ion-input label-placement="floating" label="Sales order ID prefix" helper-text="Add a custom prefix to HotWax order IDs: <inputValue>10001" />
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index 5601f2e..16d7a84 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -6,18 +6,19 @@
         <ion-title>{{ translate("Create product store") }}</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content>
       <main>
         <h1 class="ion-margin-start">{{ translate('Create a new product store') }}</h1>
 
         <ion-item lines="none">
-          <ion-input label-placement="floating" :label="translate('Company name')" :helper-text="translate('The name of the parent organization that owns all brands deployed on the OMS')" />
+          <ion-input label-placement="floating" :label="translate('Company name')" :helper-text="translate('The name of the parent organization that owns all brands deployed on the OMS')" :clear-input="true" />
         </ion-item>
         <ion-item lines="none">
-          <ion-input label-placement="floating" :label="translate('Name')" :helper-text="translate('Product store represents a brand in OMS')" />
+          <ion-input label-placement="floating" :label="translate('Name')" :helper-text="translate('Product store represents a brand in OMS')" :clear-input="true" />
         </ion-item>
         <ion-item lines="none">
-          <ion-input label-placement="floating" :label="translate('ID')" :helper-text="translate('Product store represents a brand in OMS')" />
+          <ion-input label-placement="floating" :label="translate('ID')" :helper-text="translate('Product store represents a brand in OMS')" :clear-input="true" />
         </ion-item>
 
         <ion-item>
@@ -70,12 +71,10 @@ async function openSelectOperatingCountriesModal() {
 </script>
 
 <style scoped>
-
   @media (min-width: 700px) {
     main {
       max-width: 375px;
       margin: auto;
     }
   }
-
 </style>
\ No newline at end of file
diff --git a/src/views/ProductStore.vue b/src/views/ProductStore.vue
index 08f49a6..477ad57 100644
--- a/src/views/ProductStore.vue
+++ b/src/views/ProductStore.vue
@@ -30,6 +30,7 @@
             </ion-chip>
           </div>
         </div>
+
         <div class="ion-text-center ion-margin">
           <ion-button fill="outline" @click="createStore()">
             <ion-icon slot="start" :icon="addOutline"/>
diff --git a/src/views/ProductStoreDetails.vue b/src/views/ProductStoreDetails.vue
index e5067d6..0cfd279 100644
--- a/src/views/ProductStoreDetails.vue
+++ b/src/views/ProductStoreDetails.vue
@@ -6,6 +6,7 @@
         <ion-title>{{ "<productStoreName>" }}</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content>
       <main>
         <div class="store-info">
@@ -43,9 +44,7 @@
         <section>
           <ion-card>
             <ion-card-header>
-              <ion-card-title>
-                {{ translate("Order") }}
-              </ion-card-title>
+              <ion-card-title>{{ translate("Order") }}</ion-card-title>
             </ion-card-header>
 
             <ion-list>
@@ -70,11 +69,11 @@
                   <p>{{ translate("Store billing information associated with orders in OMS.") }}</p>
                 </ion-label>
               </ion-item>
-              
+
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Approval") }}</ion-label>
               </ion-item-divider>
-              
+
               <ion-item>
                 <ion-toggle>{{ translate("Approve on import") }}</ion-toggle>
               </ion-item>
@@ -101,16 +100,14 @@
 
           <ion-card>
             <ion-card-header>
-              <ion-card-title>
-                {{ translate("Brokering") }}
-              </ion-card-title>
+              <ion-card-title>{{ translate("Brokering") }}</ion-card-title>
             </ion-card-header>
 
             <ion-list>
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Seat Allocation") }}</ion-label>
               </ion-item-divider>
-              
+
               <ion-item>
                 <ion-label>{{ translate("Preselected facility tag") }}</ion-label>
                 <ion-button fill="clear" @click="createUpdateTag()">
@@ -122,7 +119,7 @@
                   <p>{{ translate("Orders tagged with this tag will undergo line item check for fulfillment facility selection.") }}</p>
                 </ion-label>
               </ion-item>
-                
+
               <ion-item>
                 <ion-label>{{ translate("Shipping facility tag") }}</ion-label>
                 <ion-chip outline @click="createUpdateTag()">{{ "<tagName>" }}</ion-chip>
@@ -132,7 +129,7 @@
                   <p>{{ translate("Tag will hold the preselected fulfillment facility value.") }}</p>
                 </ion-label>
               </ion-item>
-                
+
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Routing") }}</ion-label>
               </ion-item-divider>
@@ -155,10 +152,9 @@
           <div>
             <ion-card>
               <ion-card-header>
-                <ion-card-title>
-                  {{ translate("Fulfillment") }}
-                </ion-card-title>
+                <ion-card-title>{{ translate("Fulfillment") }}</ion-card-title>
               </ion-card-header>
+
               <ion-list>
                 <ion-item-divider color="light">
                   <ion-label>{{ translate("Notifications") }}</ion-label>
@@ -194,9 +190,7 @@
 
             <ion-card>
               <ion-card-header>
-                <ion-card-title>
-                  {{ translate("Store pickup") }}
-                </ion-card-title>
+                <ion-card-title>{{ translate("Store pickup") }}</ion-card-title>
               </ion-card-header>
 
               <ion-list>
@@ -216,9 +210,7 @@
         <section>
           <ion-card>
             <ion-card-header>
-              <ion-card-title>
-                {{ translate("Inventory") }}
-              </ion-card-title>
+              <ion-card-title>{{ translate("Inventory") }}</ion-card-title>
             </ion-card-header>
 
             <ion-list>
@@ -234,20 +226,18 @@
                   <p>{{ translate("Display current physical quantity expected at locations while inventory counting.") }}</p>
                 </ion-label>
               </ion-item>
-              
+
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Pre-order computation") }}</ion-label>
               </ion-item-divider>
-              
+
               <ion-item>
                 <ion-toggle>{{ translate("Hold pre-order physical inventory") }}</ion-toggle>
               </ion-item>
 
               <ion-item>
                 <ion-select :label="translate('Pre-order group')" interface="popover" value="">
-                  <ion-select-option value="">
-                    {{ "<facilityGroup>" }}
-                  </ion-select-option>
+                  <ion-select-option value="">{{ "<facilityGroup>" }}</ion-select-option>
                 </ion-select>
               </ion-item>
               <ion-item lines="none">
@@ -260,20 +250,17 @@
 
           <ion-card>
             <ion-card-header>
-              <ion-card-title>
-                {{ translate("Product") }}
-              </ion-card-title>
+              <ion-card-title>{{ translate("Product") }}</ion-card-title>
             </ion-card-header>
+
             <ion-list>
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Identifier") }}</ion-label>
               </ion-item-divider>
-              
+
               <ion-item>
                 <ion-select :label="translate('Global identifier')" interface="popover" value="">
-                  <ion-select-option value="">
-                    {{ "<UPCA>" }}
-                    </ion-select-option>
+                  <ion-select-option value="">{{ "<UPCA>" }}</ion-select-option>
                 </ion-select>
               </ion-item>
               <ion-item lines="none">
@@ -281,24 +268,20 @@
                   <p>{{ translate("The identifier used globally throughout the business operations.") }}</p>
                 </ion-label>
               </ion-item>
-              
+
               <ion-item-divider color="light">
                 <ion-label>{{ translate("Preferred identifier") }}</ion-label>
               </ion-item-divider>
 
               <ion-item>
                 <ion-select :label="translate('Primary identifier')" interface="popover" value="">
-                  <ion-select-option value="">
-                    {{ "Product Id" }}
-                    </ion-select-option>
+                  <ion-select-option value="">{{ "Product Id" }}</ion-select-option>
                 </ion-select>
               </ion-item>
 
               <ion-item>
                 <ion-select :label="translate('Secondary identifier')" interface="popover" value="">
-                  <ion-select-option value="">
-                    {{ "SKU" }}
-                    </ion-select-option>
+                  <ion-select-option value="">{{ "SKU" }}</ion-select-option>
                 </ion-select>
               </ion-item>
 
@@ -325,9 +308,7 @@
 
               <ion-item>
                 <ion-select :label="translate('Shipment method')" interface="popover" value="">
-                  <ion-select-option value="">
-                    {{ "Two day" }}
-                    </ion-select-option>
+                  <ion-select-option value="">{{ "Two day" }}</ion-select-option>
                 </ion-select>
               </ion-item>
 
@@ -422,7 +403,6 @@ ion-card-header {
 }
 
 @media screen and (min-width: 700px) {
-
   ion-content > main {
     margin: var(--spacer-lg)
   }

From 2c70cc837f05eb9931a383ee41c372ec6c91b8ca Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 16 May 2024 13:01:12 +0530
Subject: [PATCH 07/10] Improved: added entry for product store tab in list to
 show menu footer (#1)

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

diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
index 7a23970..cbbdb82 100644
--- a/src/views/Tabs.vue
+++ b/src/views/Tabs.vue
@@ -25,7 +25,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 function showFooter() {
-  if (['/tabs/settings'].includes(router.currentRoute.value.path)) return true
+  if (['/tabs/product-store', '/tabs/settings'].includes(router.currentRoute.value.path)) return true
   return false
 }
 </script>

From d3acb24e3f4c9d07c5e9ecb0e02107f82931b59a Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 17 May 2024 13:01:13 +0530
Subject: [PATCH 08/10] Improved: routes for the pages not in tab navigation
 (#1)

---
 src/router/index.ts              | 28 ++++++++++++++++------------
 src/views/AddConfigurations.vue  |  2 +-
 src/views/CreateProductStore.vue |  2 +-
 src/views/ProductStore.vue       |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index d872ed8..70e0346 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,9 @@ import { RouteRecordRaw } from "vue-router";
 import Login from "@/views/Login.vue"
 import store from "@/store"
 import Tabs from "@/views/Tabs.vue"
+import CreateProductStore from "@/views/CreateProductStore.vue";
+import AddConfigurations from "@/views/AddConfigurations.vue";
+import ProductStoreDetails from "@/views/ProductStoreDetails.vue";
 
 const authGuard = (to: any, from: any, next: any) => {
   if (store.getters["user/isAuthenticated"]) {
@@ -37,18 +40,6 @@ const routes: Array<RouteRecordRaw> = [
         path: "product-store",
         component: () => import("@/views/ProductStore.vue")
       },
-      {
-        path: "create-product-store",
-        component: () => import("@/views/CreateProductStore.vue")
-      },
-      {
-        path: "add-configurations",
-        component: () => import("@/views/AddConfigurations.vue")
-      },
-      {
-        path: "product-store-details",
-        component: () => import("@/views/ProductStoreDetails.vue")
-      },
       {
         path: "settings",
         component: () => import("@/views/Settings.vue")
@@ -56,6 +47,19 @@ const routes: Array<RouteRecordRaw> = [
     ],
     beforeEnter: authGuard
   },
+  {
+    path: "/create-product-store",
+    component: CreateProductStore
+  },
+  {
+    path: "/add-configurations",
+    component: AddConfigurations
+  },
+  {
+    path: "/product-store-details/:productStoreId",
+    component: ProductStoreDetails,
+    props: true
+  },
   {
     path: "/login",
     name: "Login",
diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
index 1e121de..c4f2fd1 100644
--- a/src/views/AddConfigurations.vue
+++ b/src/views/AddConfigurations.vue
@@ -58,7 +58,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 function setupProductStore() {
-  router.push("product-store-details")
+  router.push("/product-store-details")
 }
 </script>
 
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index 16d7a84..a93470e 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -57,7 +57,7 @@ import SelectOperatingCountriesModal from "@/components/SelectOperatingCountries
 const router = useRouter();
 
 function manageConfigurations() {
-  router.push("add-configurations")
+  router.push("/add-configurations")
 }
 
 async function openSelectOperatingCountriesModal() {
diff --git a/src/views/ProductStore.vue b/src/views/ProductStore.vue
index 477ad57..7bbc8d6 100644
--- a/src/views/ProductStore.vue
+++ b/src/views/ProductStore.vue
@@ -51,7 +51,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 function createStore() {
-  router.push("create-product-store")
+  router.push("/create-product-store")
 }
 </script>
 

From 9de9d80185d0a6c2325182fe5582dc69e62d71a6 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 21 May 2024 11:42:54 +0530
Subject: [PATCH 09/10] Improved: added progress bar in toolbar for create
 product store pages (#1)

---
 src/views/AddConfigurations.vue  | 3 ++-
 src/views/CreateProductStore.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/AddConfigurations.vue b/src/views/AddConfigurations.vue
index c4f2fd1..6272da0 100644
--- a/src/views/AddConfigurations.vue
+++ b/src/views/AddConfigurations.vue
@@ -9,6 +9,7 @@
             <ion-icon :icon="informationCircleOutline" />
           </ion-button>
         </ion-buttons>
+        <ion-progress-bar value="0.75" />
       </ion-toolbar>
     </ion-header>
 
@@ -50,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonListHeader, IonPage, IonProgressBar, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar } from "@ionic/vue";
 import { arrowForwardOutline, informationCircleOutline, shirtOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
 import { useRouter } from "vue-router";
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index a93470e..95ea6d0 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -4,6 +4,7 @@
       <ion-toolbar>
         <ion-back-button default-href="/tabs/product-store" slot="start"></ion-back-button>
         <ion-title>{{ translate("Create product store") }}</ion-title>
+        <ion-progress-bar value="0.25" />
       </ion-toolbar>
     </ion-header>
 
@@ -48,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar, modalController } from "@ionic/vue";
+import { IonBackButton, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonPage, IonProgressBar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
 import { arrowForwardOutline, closeCircleOutline, mapOutline } from "ionicons/icons";
 import { translate } from "@/i18n";
 import { useRouter } from "vue-router";

From d0018335c3a146dfc2e8fdcc017f35e0ceb5b61f Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 21 May 2024 18:44:43 +0530
Subject: [PATCH 10/10] Improved: added name to routes, fixed indentation, and
 remove showBackdrop property (#1)

---
 src/components/SelectOperatingCountriesModal.vue | 2 +-
 src/router/index.ts                              | 5 +++++
 src/views/CreateProductStore.vue                 | 3 +--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectOperatingCountriesModal.vue b/src/components/SelectOperatingCountriesModal.vue
index d70602a..5f5e249 100644
--- a/src/components/SelectOperatingCountriesModal.vue
+++ b/src/components/SelectOperatingCountriesModal.vue
@@ -60,6 +60,6 @@ function closeModal() {
 
 <style scoped>
   ion-content {
-  --padding-bottom: 80px;
+    --padding-bottom: 80px;
   }
 </style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 70e0346..320631c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -38,10 +38,12 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: "product-store",
+        name: "ProductStore",
         component: () => import("@/views/ProductStore.vue")
       },
       {
         path: "settings",
+        name: "Settings",
         component: () => import("@/views/Settings.vue")
       }
     ],
@@ -49,14 +51,17 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/create-product-store",
+    name: "CreateProductStore",
     component: CreateProductStore
   },
   {
     path: "/add-configurations",
+    name: "AddConfigurations",
     component: AddConfigurations
   },
   {
     path: "/product-store-details/:productStoreId",
+    name: "ProductStoreDetails",
     component: ProductStoreDetails,
     props: true
   },
diff --git a/src/views/CreateProductStore.vue b/src/views/CreateProductStore.vue
index 95ea6d0..834bf25 100644
--- a/src/views/CreateProductStore.vue
+++ b/src/views/CreateProductStore.vue
@@ -63,8 +63,7 @@ function manageConfigurations() {
 
 async function openSelectOperatingCountriesModal() {
   const modal = await modalController.create({
-    component: SelectOperatingCountriesModal,
-    showBackdrop: true
+    component: SelectOperatingCountriesModal
   })
 
   modal.present()