Merge pull request #34 from ymaheshwari1/#33

Improved: UI for the app and added support to configure the details from same page(#33)

package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "@capacitor/core": "3.2.3",
     "@capacitor/network": "^1.0.3",
-    "@ionic/vue": "^5.4.0",
-    "@ionic/vue-router": "^5.4.0",
+    "@ionic/vue": "^8.3.0",
+    "@ionic/vue-router": "^8.3.0",
     "axios": "^0.21.1",
     "axios-cache-adapter": "^2.7.3",
     "core-js": "^3.6.5",

src/components/OmsModal.vue

@@ -0,0 +1,60 @@
+<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>{{ $t("OMS Name") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-item lines="none">
+      <ion-label class="ion-text-wrap">
+        {{ $t('The OMS instance name is the string that comes right before your OMS domain. For example, if your URL looks like this: "https://notnaked-oms.hotwax.io", then your OMS name is "notnaked-oms".') }}
+        <br /><br />{{ $t('To access UAT environments, replace "oms" with "uat". The UAT name for this example store would be "notnaked-uat".') }}
+      </ion-label>
+    </ion-item>
+  </ion-content>
+</template>
+
+<script>
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline } from "ionicons/icons";
+
+export default defineComponent({
+  name: "OmsModal",
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+  },
+  setup() {
+    return {
+      closeOutline
+    };
+  },
+});
+</script>

src/locales/en.json

@@ -1,24 +1,32 @@
 {
   "Access scopes not found": "Access scopes not found",
   "Api key not found": "Api key not found",
-  "Checkout our app on the app store!": "Checkout our app on the app store!",
-  "Enter connection information to make sure your Shopify store can talk to your HotWax Commerce instance.":"Enter connection information to make sure your Shopify store can talk to your HotWax Commerce instance.",
+  "Contact Us": "Contact Us",
+  "Don't have a HotWax Commerce account?": "Don't have a HotWax Commerce account?",
+  "Enter valid url in the format https://notnaked-oms.hotwax.io": "Enter valid url in the format https://notnaked-oms.hotwax.io",
   "Failed to fetch the token": "Failed to fetch the token",
   "Failed to find the api key": "Failed to find the api key",
   "Failed to get the access scopes": "Failed to get the access scopes",
   "Failed to verify the request, please try again": "Failed to verify the request, please try again",
-  "Fetching token...": "Fetching token...",
+  "Find your OMS name": "Find your OMS name",
+  "Finish Setup": "Finish Setup",
   "HotWax Commerce connection settings updated": "HotWax Commerce connection settings updated",
-  "HotWax Commerce URL": "HotWax Commerce URL",
+  "HotWax Commerce is installed on your Shopify store": "HotWax Commerce is installed on your Shopify store",
   "Install": "Install",
+  "Installing HotWax Commerce onto your Shopify store...": "Installing HotWax Commerce onto your Shopify store...",
+  "JWT Token": "JWT Token",
+  "Learn more about connecting HotWax Commerce with Shopify": "Learn more about connecting HotWax Commerce with Shopify",
+  "notnaked-oms": "notnaked-oms",
+  "OMS": "OMS",
+  "OMS Name": "OMS Name",
   "Password": "Password",
   "Processing request...": "Processing request...",
-  "SAVE": "SAVE",
-  "Shared API Token": "Shared API Token",
   "Shop": "Shop",
   "Settings": "Settings",
   "Something went wrong": "Something went wrong",
-  "Verifying request...": "Verifying request...",
-  "View app": "View app",
-  "Welcome to Hotwax Commerce Order Management for Shopify": "Welcome to Hotwax Commerce Order Management for Shopify"
+  "Syncing Shopify store to HotWax Commerce": "Syncing Shopify store to HotWax Commerce",
+  "Shopify store synced with HotWax Commerce": "Shopify store synced with HotWax Commerce",
+  "The OMS instance name is the string that comes right before your OMS domain. For example, if your URL looks like this: \"https://notnaked-oms.hotwax.io\", then your OMS name is \"notnaked-oms\".": "The OMS instance name is the string that comes right before your OMS domain. For example, if your URL looks like this: \"https://notnaked-oms.hotwax.io\", then your OMS name is \"notnaked-oms\".",
+  "To access UAT environments, replace \"oms\" with \"uat\". The UAT name for this example store would be \"notnaked-uat\".": "To access UAT environments, replace \"oms\" with \"uat\". The UAT name for this example store would be \"notnaked-uat\".",
+  "You'll be auto redirected to your Shopify store to complete the installation process": "You'll be auto redirected to your Shopify store to complete the installation process"
 }

src/router/index.ts

@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import ShopifyInstall from '@/views/ShopifyInstall.vue';
-import Configure from '@/views/Configure.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -12,11 +11,6 @@ const routes: Array<RouteRecordRaw> = [
     path: '/shopify-install',
     name: 'Shopify Install',
     component: ShopifyInstall
-  },
-  {
-    path: '/configure',
-    name: 'Configure',
-    component: Configure
   }
 ]