Implemented: support for internationalization of static text

src/App.vue

@@ -10,6 +10,7 @@ import { IonApp, IonRouterOutlet, loadingController } from "@ionic/vue";
 import emitter from "@/event-bus"
 import { Settings } from 'luxon'
 import store from "./store";
+import { translate } from "@/i18n"
 
 const loader = ref(null) as any
 const userProfile = computed(() => store.getters["user/getUserProfile"])
@@ -21,7 +22,7 @@ async function presentLoader(options = { message: "Click the backdrop to dismiss
   if (!loader.value) {
     loader.value = await loadingController
       .create({
-        message: options.message,
+        message: translate(options.message),
         translucent: true,
         backdropDismiss: options.backdropDismiss
       });
@@ -39,7 +40,7 @@ function dismissLoader() {
 onMounted(async () => {
   loader.value = await loadingController
     .create({
-      message: "Click the backdrop to dismiss.",
+      message: translate("Click the backdrop to dismiss."),
       translucent: true,
       backdropDismiss: true
     });

src/components/AddInventoryFilterOptionsModal.vue

@@ -2,9 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>{{ `Inventory ${props.label}` }}</ion-title>
+        <ion-title>{{ translate(`Inventory ${props.label}`) }}</ion-title>
         <ion-buttons slot="end">
-          <ion-button @click="closeModal()">{{ $t('Close') }}</ion-button>
+          <ion-button @click="closeModal()">{{ translate("Close") }}</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
@@ -30,6 +30,7 @@ import { useStore } from "vuex";
 import { computed, defineProps, onMounted, ref } from "vue";
 import { saveOutline } from "ionicons/icons";
 import { DateTime } from "luxon";
+import { translate } from "@/i18n";
 
 const store = useStore();
 const enums = computed(() => store.getters["util/getEnums"])
@@ -103,14 +104,14 @@ function addConditionOption(condition: any) {
 }
 
 function saveConditionOptions() {
-  closeModal('save');
+  closeModal("save");
 }
 
 function isConditionOptionSelected(code: string) {
   return inventoryRuleConditions.value?.[code]
 }
 
-function closeModal(action = 'close') {
+function closeModal(action = "close") {
   modalController.dismiss({ dismissed: true, filters: inventoryRuleConditions.value }, action)
 }
 </script>

src/components/AddOrderRouteFilterOptions.vue

@@ -2,9 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>{{ `Order Rule ${props.label}` }}</ion-title>
+        <ion-title>{{ translate(`Order Rule ${props.label}`) }}</ion-title>
         <ion-buttons slot="end">
-          <ion-button @click="closeModal()">{{ $t('Close') }}</ion-button>
+          <ion-button @click="closeModal()">{{ translate("Close") }}</ion-button>
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
@@ -30,6 +30,7 @@ import { useStore } from "vuex";
 import { computed, defineProps, onMounted, ref } from "vue";
 import { saveOutline } from "ionicons/icons";
 import { DateTime } from "luxon";
+import { translate } from "@/i18n";
 
 const store = useStore();
 const enums = computed(() => store.getters["util/getEnums"])
@@ -85,14 +86,14 @@ function addSortOption(sort: any) {
 }
 
 function saveSortOptions() {
-  closeModal('save');
+  closeModal("save");
 }
 
 function isSortOptionSelected(code: string) {
   return routingFilters.value?.[code]
 }
 
-function closeModal(action = 'close') {
+function closeModal(action = "close") {
   modalController.dismiss({ dismissed: true, filters: routingFilters.value }, action)
 }
 </script>

src/components/ArchivedRoutingModal.vue

@@ -6,24 +6,25 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ "Archived Routes" }}</ion-title>
+      <ion-title>{{ translate("Archived Routes") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list>
       <ion-item v-for="routing in routings" :key="routing.orderRoutingId">
         <ion-label>{{ routing.routingName }}</ion-label>
-        <ion-button slot="end" fill="outline" color="medium" @click="updateOrderRouting(routing, 'statusId', 'ROUTING_DRAFT')">{{ "Unarchive" }}</ion-button>
+        <ion-button slot="end" fill="outline" color="medium" @click="updateOrderRouting(routing, 'statusId', 'ROUTING_DRAFT')">{{ translate("Unarchive") }}</ion-button>
       </ion-item>
     </ion-list>
     <p class="empty-state" v-if="!routings.length">
-      {{ "No archived routings" }}
+      {{ translate("No archived routings") }}
     </p>
   </ion-content>
 </template>
 
 <script setup lang="ts">
+import { translate } from "@/i18n";
 import { Route } from "@/types";
 import {
   IonButton,

src/components/PromiseFilterPopover.vue

@@ -2,22 +2,23 @@
   <ion-content>
     <ion-list>
       <ion-list-header>
-        <ion-label>{{ $t("Promise date") }}</ion-label>
+        <ion-label>{{ translate("Promise date") }}</ion-label>
       </ion-list-header>
       <ion-item button @click="updatePromiseDate()">
-        <ion-label>{{ $t("Already passed") }}</ion-label>
+        <ion-label>{{ translate("Already passed") }}</ion-label>
       </ion-item>
       <ion-item button @click="updatePromiseDate('Upcoming duration')">
-        <ion-label>{{ $t("Upcoming duration") }}</ion-label>
+        <ion-label>{{ translate("Upcoming duration") }}</ion-label>
       </ion-item>
       <ion-item button lines="none" @click="updatePromiseDate('Passed duration', true)">
-        <ion-label>{{ $t("Passed duration") }}</ion-label>
+        <ion-label>{{ translate("Passed duration") }}</ion-label>
       </ion-item>
     </ion-list>
   </ion-content>
 </template>
 
 <script setup lang="ts">
+import { translate } from "@/i18n";
 import { IonContent, IonItem, IonLabel, IonList, IonListHeader, alertController, popoverController } from "@ionic/vue";
 
 async function updatePromiseDate(header = '', isPastDuration = false) {
@@ -29,16 +30,16 @@ async function updatePromiseDate(header = '', isPastDuration = false) {
   }
 
   const durationAlert = await alertController.create({
-    header,
+    header: translate(header),
     buttons: [{
-      text: "Cancel",
+      text: translate("Cancel"),
       role: "cancel"
     }, {
-      text: "Save"
+      text: translate("Save")
     }],
     inputs: [{
       name: "duration",
-      placeholder: "duration"
+      placeholder: translate("duration")
     }]
   })
 

src/components/TimezoneModal.vue

@@ -6,22 +6,22 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Select time zone") }}</ion-title>
+      <ion-title>{{ translate("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" v-on:keyup.enter="queryString = $event.target.value; findTimeZone()" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search time zones')"  v-model="queryString" v-on:keyup.enter="queryString = $event.target.value; findTimeZone()" />
     </ion-toolbar>
   </ion-header>
 
   <ion-content class="ion-padding">
     <div class="empty-state" v-if="isLoading">
       <ion-item lines="none">
         <ion-spinner name="crescent" slot="start" />
-        {{ "Fetching time zones" }}
+        {{ translate("Fetching time zones") }}
       </ion-item>
     </div>
     <div class="empty-state" v-else-if="!filteredTimeZones.length">
-      <p>{{ "No time zone found" }}</p>
+      <p>{{ translate("No time zone found") }}</p>
     </div>
 
     <!-- Timezones -->
@@ -68,6 +68,7 @@ import { useStore } from "@/store";
 import { UserService } from "@/services/UserService";
 import { hasError } from "@/utils"
 import { DateTime } from "luxon";
+import { translate } from "@/i18n"
 
 const store = useStore();
 let queryString = ref("")

src/locales/en.json

@@ -1,48 +1,134 @@
 {
-  "Add": "Add",
-  "Add Action": "Add Action",
-  "Add actions": "Add actions",
-  "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
-  "Blank": "Blank",
+  "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store repesents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores sellling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
+  "Actions": "Actions",
+  "Add inventory rule": "Add inventory rule",
+  "Allocated Items": "Allocated Items",
+  "Allow partial allocation": "Allow partial allocation",
+  "Already passed": "Already passed",
+  "Any edits made on this page will be lost.": "Any edits made on this page will be lost.",
+  "App": "App",
+  "Archive": "Archive",
+  "Archived Routes": "Archived Routes",
+  "Auto cancel days": "Auto cancel days",
+  "action": "action",
+  "auto cancel days": "auto cancel days",
+  "Brokering": "Brokering",
+  "Brokering Runs": "Brokering Runs",
+  "Brokering run created": "Brokering run created",
+  "Brokering run name": "Brokering run name",
+  "Brokering safety stock": "Brokering safety stock",
+  "Built:": "Built: ",
   "Cancel": "Cancel",
   "Change": "Change",
-  "Change time zone": "Change time zone",
+  "Clear auto cancel days": "Clear auto cancel days",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
-  "Condition": "Condition",
-  "Confirm": "Confirm",
-  "Dismiss": "Dismiss",
-  "Duplicate": "Duplicate",
-  "Flows": "Flows",
-  "FLOWS": "FLOWS",
-  "Frequency": "Frequency",
-  "Instance Url": "Instance Url",
+  "Close": "Close",
+  "Connection configuration is missing for oms.": "Connection configuration is missing for oms.",
+  "Description": "Description",
+  "Disable": "Disable",
+  "duration": "duration",
+  "Edit": "Edit",
+  "Error getting user profile": "Error getting user profile",
+  "Failed to create brokering run": "Failed to create brokering run",
+  "Failed to create inventory rule": "Failed to create inventory rule",
+  "Failed to create order routing": "Failed to create order routing",
+  "Failed to identify selected inventory rule, please select a rule or refresh": "Failed to identify selected inventory rule, please select a rule or refresh",
+  "Failed to update group information": "Failed to update group information",
+  "Failed to update job": "Failed to update job",
+  "Failed to schedule service": "Failed to schedule service",
+  "Fetching filters and inventory rules": "Fetching filters and inventory rules",
+  "Fetching groups": "Fetching groups",
+  "Fetching rules": "Fetching rules",
+  "Fetching time zones": "Fetching time zones",
+  "Filters": "Filters",
+  "facility group": "facility group",
+  "Group": "Group",
+  "High": "High",
+  "Inventory Filters": "Inventory Filters",
+  "Inventory rule created successfully": "Inventory rule created successfully",
+  "Inventory Sort": "Inventory Sort",
+  "Job disabled": "Job disabled",
+  "Job updated": "Job updated",
+  "kms": "kms",
+  "LEAVE": "LEAVE",
+  "Leave page": "Leave page",
+  "Logging in...": "Logging in...",
   "Login": "Login",
   "Logout": "Logout",
-  "Name": "Name",
+  "Low": "Low",
+  "Medium": "Medium",
+  "Move items to": "Move items to",
+  "measurement unit": "measurement unit",
+  "miles": "miles",
+  "New": "New",
+  "New Inventory Rule": "New Inventory Rule",
+  "New Order Route": "New Order Route",
+  "New Run": "New Run",
+  "New routing created": "New routing created",
+  "Next rule": "Next rule",
+  "No archived routings": "No archived routings",
+  "No runs scheduled": "No runs scheduled",
   "No time zone found": "No time zone found",
   "OMS": "OMS",
-  "Options": "Options",
+  "Order batches": "Order batches",
+  "Order priority": "Order priority",
+  "Order Rule Filters": "Order Rule Filters",
+  "Order Rule Sort": "Order Rule Sort",
+  "operator": "operator",
+  "Partially available": "Partially available",
+  "Passed duration": "Passed duration",
   "Password":  "Password",
-  "Ready to create an app?": "Ready to create an app?",
-  "Remove": "Remove",
-  "Run on": "Run on",
+  "Please enter a valid name": "Please enter a valid name",
+  "Please select a scheduling for job": "Please select a scheduling for job",
+  "Product Store": "Product Store",
+  "Promise date": "Promise date",
+  "Proximity": "Proximity",
+  "priority": "priority",
+  "Queue": "Queue",
+  "queue": "queue",
+  "Routing group information updated": "Routing group information updated",
+  "Rule Status": "Rule Status",
+  "Rule name": "Rule name",
+  "Run Now": "Run Now",
+  "Run now": "Run now",
+  "Run time": "Run time",
+  "Running this schedule now will not replace this schedule. A copy of this schedule will be created and run immediately. You may not be able to reverse this action.": "Running this schedule now will not replace this schedule. A copy of this schedule will be created and run immediately. You may not be able to reverse this action.",
+  "route name": "route name",
+  "rules": " rules",
+  "run name": "run name",
+  "STAY": "STAY",
+  "Sales Channel": "Sales Channel",
+  "Save": "Save",
+  "Save Changes": "Save Changes",
   "Save changes": "Save changes",
-  "Scheduled": "Scheduled",
-  "Search": "Search",
+  "Schedule": "Schedule",
+  "Scheduler": "Scheduler",
   "Search time zones": "Search time zones",
+  "Select": "Select",
+  "Select filter to apply": "Select filter to apply",
+  "Select if partial allocation should be allowed in this inventory rule": "Select if partial allocation should be allowed in this inventory rule",
+  "Select sorting to apply": "Select sorting to apply",
+  "Select store": "Select store",
   "Select time zone": "Select time zone",
-  "Something went wrong": "Something went wrong",
-  "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
+  "Service has been scheduled": "Service has been scheduled",
   "Settings": "Settings",
-  "Start": "Start",
-  "Start with Ionic": "Start with Ionic",
+  "Shipping method": "Shipping method",
+  "Sorry, login failed. Please try again": "Sorry, login failed. Please try again",
+  "Sort": "Sort",
   "Store": "Store",
-  "store name": "store name",
+  "sales channel": "sales channel",
+  "select days": "select days",
+  "select range": "select range",
+  "shipping method": "shipping method",
+  "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.",
+  "Timezone": "Timezone",
   "Time zone updated successfully": "Time zone updated successfully",
-  "Trigger": "Trigger",
-  "UI Components": "UI Components",
-  "Update time zone": "Update time zone",
+  "Unarchive": "Unarchive",
+  "Unavailable items": "Unavailable items",
+  "Updating...": "Updating...",
+  "Upcoming duration": "Upcoming duration",
+  "Updating inventory rules and filters": "Updating inventory rules and filters",
   "Username": "Username",
-  "View parameters": "View parameters",
-  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."
+  "Version:": "Version: ",
+  "value": "value"
 }

src/services/UserService.ts

@@ -3,7 +3,7 @@ import store from "@/store";
 import { hasError } from "@/utils";
 
 const login = async (username: string, password: string): Promise <any> => {
-  let token = ''
+  let token = ""
   try {
     const resp = await api({
       url: "login",