diff --git a/.env.example b/.env.example
index d2e78b5e..312d326c 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
-VUE_APP_I18N_LOCALE=en
-VUE_APP_I18N_FALLBACK_LOCALE=en
+VUE_APP_I18N_LOCALE=en-US
+VUE_APP_I18N_FALLBACK_LOCALE=en-US
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_VIEW_SIZE=10
 VUE_APP_DATE_FORMAT=MM/dd/yyyy
diff --git a/package-lock.json b/package-lock.json
index d25f19b7..c765b8ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,8 @@
         "@casl/ability": "^6.0.0",
         "@hotwax/app-version-info": "^1.0.0",
         "@hotwax/apps-theme": "^1.2.6",
-        "@hotwax/dxp-components": "1.13.0",
-        "@hotwax/oms-api": "1.14.0",
+        "@hotwax/dxp-components": "^1.13.0",
+        "@hotwax/oms-api": "^1.14.0",
         "@ionic/core": "^7.6.0",
         "@ionic/vue": "^7.6.0",
         "@ionic/vue-router": "~7.6.0",
@@ -27,7 +27,6 @@
         "mitt": "^2.1.0",
         "register-service-worker": "^1.7.1",
         "vue": "^3.2.26",
-        "vue-i18n": "~9.1.6",
         "vue-logger-plugin": "^2.2.3",
         "vue-router": "^4.0.12",
         "vuex": "^4.0.1",
@@ -35,7 +34,6 @@
       },
       "devDependencies": {
         "@capacitor/cli": "^2.4.7",
-        "@intlify/vue-i18n-loader": "^2.1.0",
         "@types/luxon": "^3.2.0",
         "@typescript-eslint/eslint-plugin": "~5.26.0",
         "@typescript-eslint/parser": "~5.26.0",
@@ -53,8 +51,7 @@
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
         "papaparse": "^5.3.1",
-        "typescript": "~4.7.4",
-        "vue-cli-plugin-i18n": "^1.0.1"
+        "typescript": "~4.7.4"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2966,182 +2963,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "node_modules/@intlify/bundle-utils": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-0.1.0.tgz",
-      "integrity": "sha512-v0aeQmjNWppSLpPcLh3E1JiQg8bQFY9uD4ZuZssGq2elXsqB3JDH0TZfhO8Y83x1Ejk0qxq5hv015mYS2qzfZQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/core": "^9.1.6",
-        "@intlify/message-compiler": "^9.1.6",
-        "@intlify/shared": "^9.1.6",
-        "jsonc-eslint-parser": "^1.0.1",
-        "source-map": "^0.6.1",
-        "yaml-eslint-parser": "^0.3.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/@intlify/core": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/@intlify/core/-/core-9.8.0.tgz",
-      "integrity": "sha512-xd+3cxvMuasZh3b+cxsB98ZAC2SPfbSTuK8q0nJg2NfOuAcj62FKBkFG72lsvGz5MzppTlOQuLkacrCvltA8sA==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/core-base": "9.8.0",
-        "@intlify/shared": "9.8.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/core-base": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.8.0.tgz",
-      "integrity": "sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/message-compiler": "9.8.0",
-        "@intlify/shared": "9.8.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/devtools-if": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
-      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
-      "dependencies": {
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/devtools-if/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.8.0.tgz",
-      "integrity": "sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/shared": "9.8.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/message-resolver": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
-      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
-      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
-      "dependencies": {
-        "@intlify/message-compiler": "9.1.10",
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime/node_modules/@intlify/message-compiler": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
-      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/runtime/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.8.0.tgz",
-      "integrity": "sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/vue-devtools": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
-      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/runtime": "9.1.10",
-        "@intlify/shared": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/vue-devtools/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@intlify/vue-i18n-loader": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-2.1.2.tgz",
-      "integrity": "sha512-xGqjq9unsm6WFqcM3n8hQHE2f6yKYc8cT14PqNEBmiuR0v3PP0VqZcvKXHs9JL2BRPA8JulNugpZwuF3rob2cQ==",
-      "dev": true,
-      "dependencies": {
-        "@intlify/bundle-utils": "^0.1.0",
-        "@intlify/shared": "^9.1.6",
-        "loader-utils": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/@ionic/core": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
@@ -6683,16 +6504,6 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
-    "node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -7609,15 +7420,6 @@
         }
       }
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -7919,25 +7721,6 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
-    "node_modules/dot-object": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
-      "integrity": "sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.20.0",
-        "glob": "^7.1.4"
-      },
-      "bin": {
-        "dot-object": "bin/dot-object"
-      }
-    },
-    "node_modules/dot-object/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
     "node_modules/dotenv": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
@@ -8823,15 +8606,6 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
-    "node_modules/esm": {
-      "version": "3.2.25",
-      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
-      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -9817,20 +9591,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -11131,15 +10891,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-valid-glob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
-      "integrity": "sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-weakref": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
@@ -11529,81 +11280,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-eslint-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz",
-      "integrity": "sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.4.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^1.3.0",
-        "espree": "^6.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/jsonc-eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -14415,12 +14091,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
-    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -14881,12 +14551,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "dev": true
-    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
@@ -15079,6 +14743,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16449,58 +16114,6 @@
         }
       }
     },
-    "node_modules/vue-cli-plugin-i18n": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
-      "integrity": "sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "deepmerge": "^4.2.0",
-        "dotenv": "^8.2.0",
-        "flat": "^5.0.0",
-        "rimraf": "^3.0.0",
-        "vue": "^2.6.11",
-        "vue-i18n": "^8.17.0",
-        "vue-i18n-extract": "1.0.2"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
-      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/vue": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
-      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.15",
-        "csstype": "^3.1.0"
-      }
-    },
-    "node_modules/vue-cli-plugin-i18n/node_modules/vue-i18n": {
-      "version": "8.28.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
-      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==",
-      "dev": true
-    },
     "node_modules/vue-component-type-helpers": {
       "version": "1.8.25",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.25.tgz",
@@ -16612,361 +16225,6 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
-    "node_modules/vue-i18n": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
-      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
-      "dependencies": {
-        "@intlify/core-base": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "@intlify/vue-devtools": "9.1.10",
-        "@vue/devtools-api": "^6.0.0-beta.7"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/vue-i18n-extract": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vue-i18n-extract/-/vue-i18n-extract-1.0.2.tgz",
-      "integrity": "sha512-+zwDKvle4KcfloXZnj5hF01ViKDiFr5RMx5507D7oyDXpSleRpekF5YHgZa/+Ra6Go68//z0Nya58J9tKFsCjw==",
-      "dev": true,
-      "dependencies": {
-        "cli-table3": "^0.5.1",
-        "dot-object": "^1.7.1",
-        "esm": "^3.2.13",
-        "glob": "^7.1.3",
-        "is-valid-glob": "^1.0.0",
-        "yargs": "^13.2.2"
-      },
-      "bin": {
-        "vue-i18n-extract": "dist-node/index.bin.js"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/ansi-regex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
-      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cli-table3": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
-      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.0",
-        "string-width": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "colors": "^1.1.2"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^3.1.0",
-        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^5.1.0"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/cliui/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
-    },
-    "node_modules/vue-i18n-extract/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "dev": true
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs": {
-      "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^5.0.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^3.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^13.1.2"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs-parser": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/ansi-regex": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n-extract/node_modules/yargs/node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/core-base": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
-      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
-      "dependencies": {
-        "@intlify/devtools-if": "9.1.10",
-        "@intlify/message-compiler": "9.1.10",
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/runtime": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "@intlify/vue-devtools": "9.1.10"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/message-compiler": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
-      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
-      "dependencies": {
-        "@intlify/message-resolver": "9.1.10",
-        "@intlify/shared": "9.1.10",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@intlify/shared": {
-      "version": "9.1.10",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
-      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/vue-loader": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.3.1.tgz",
@@ -17651,12 +16909,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "dev": true
-    },
     "node_modules/which-typed-array": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
@@ -18194,26 +17446,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/yaml-eslint-parser": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz",
-      "integrity": "sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.3.0",
-        "lodash": "^4.17.20",
-        "yaml": "^1.10.0"
-      }
-    },
-    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
diff --git a/package.json b/package.json
index 14173285..ab56e1f2 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "@capacitor/android": "^2.4.7",
@@ -31,7 +30,6 @@
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
-    "vue-i18n": "~9.1.6",
     "vue-logger-plugin": "^2.2.3",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.1",
@@ -39,7 +37,6 @@
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
-    "@intlify/vue-i18n-loader": "^2.1.0",
     "@types/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",
@@ -57,7 +54,6 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "papaparse": "^5.3.1",
-    "typescript": "~4.7.4",
-    "vue-cli-plugin-i18n": "^1.0.1"
+    "typescript": "~4.7.4"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 8c0da02f..9014ac24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@ import emitter from "@/event-bus"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -41,7 +41,7 @@ export default defineComponent({
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."),
+            message: options.message ? translate(options.message) : translate("Click the backdrop to dismiss."),
             translucent: true,
             backdropDismiss: options.backdropDismiss
           });
@@ -93,7 +93,7 @@ export default defineComponent({
   async mounted() {
     this.loader = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message: translate("Click the backdrop to dismiss."),
         translucent: true,
         backdropDismiss: true
       });
diff --git a/src/components/BulkAdjustmentModal.vue b/src/components/BulkAdjustmentModal.vue
index c5146ff8..16395b84 100644
--- a/src/components/BulkAdjustmentModal.vue
+++ b/src/components/BulkAdjustmentModal.vue
@@ -6,29 +6,29 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Bulk adjustment") }}</ion-title>
+      <ion-title>{{ translate("Bulk adjustment") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list>
       <ion-item lines="full">
-        <ion-input :label="$t('Buffer days')" v-model="bufferDays" type="number" :placeholder="$t('Lead time')" min="1" />
+        <ion-input :label="translate('Buffer days')" v-model="bufferDays" type="number" :placeholder="translate('Lead time')" min="1" />
       </ion-item>
 
       <ion-item lines="full">
-        <ion-input :label="$t('Order buffer')" v-model="orderBuffer" type="number" :placeholder="$t('Safety stock')" min="1" />
+        <ion-input :label="translate('Order buffer')" v-model="orderBuffer" type="number" :placeholder="translate('Safety stock')" min="1" />
       </ion-item>
 
       <ion-item>
-        <ion-select :label="$t('Catalog')" interface="popover" v-model="isNewProduct">
-          <ion-select-option value="N">{{ $t("Backorder") }}</ion-select-option>
-          <ion-select-option value="Y">{{ $t("Preorder") }}</ion-select-option>
+        <ion-select :label="translate('Catalog')" interface="popover" v-model="isNewProduct">
+          <ion-select-option value="N">{{ translate("Backorder") }}</ion-select-option>
+          <ion-select-option value="Y">{{ translate("Preorder") }}</ion-select-option>
         </ion-select>
       </ion-item>
 
       <ion-item>
-        <ion-select :label="$t('Facility')" interface="popover" v-model="facilityId">
+        <ion-select :label="translate('Facility')" interface="popover" v-model="facilityId">
           <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
         </ion-select>
       </ion-item>
@@ -65,7 +65,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { DateTime } from "luxon";
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 export default defineComponent({
   name: "BulkAdjustmentModal",
   components: {
@@ -130,7 +130,8 @@ export default defineComponent({
     return {
       close,
       saveOutline,
-      store
+      store,
+      translate
     };
   },
 });
diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
index 47abf42a..ce5ac899 100644
--- a/src/components/CreateMappingModal.vue
+++ b/src/components/CreateMappingModal.vue
@@ -6,12 +6,12 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("CSV Mapping") }}</ion-title>
+      <ion-title>{{ translate("CSV Mapping") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-item>
-    <ion-input :label="$t('Mapping name')" :placeholder="$t('Field mapping name')" v-model="mappingName" />
+    <ion-input :label="translate('Mapping name')" :placeholder="translate('Field mapping name')" v-model="mappingName" />
   </ion-item>
 
   <ion-content class="ion-padding">
@@ -19,15 +19,15 @@
       <ion-list>
         <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
           <template v-if="field === 'productIdentification'">
-            <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "$t('Select')" v-model="identificationTypeId">
+            <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "translate('Select')" v-model="identificationTypeId">
               <ion-select-option :key="goodIdentificationType.goodIdentificationTypeId" v-for="goodIdentificationType in goodIdentificationTypes">{{ goodIdentificationType.description }}</ion-select-option>
             </ion-select>
-            <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
+            <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "translate('Select')" slot="end" v-model="fieldMapping['productIdentification']">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </template>
           <template v-else>
-            <ion-select :label="$t(fieldValues.label)" interface="popover" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </template>
@@ -64,7 +64,7 @@ import { defineComponent } from "vue";
 import { close, save, saveOutline } from "ionicons/icons";
 import { useStore, mapGetters } from "vuex";
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "CreateMappingModal",
@@ -140,7 +140,8 @@ export default defineComponent({
       close,
       save,
       saveOutline,
-      store
+      store,
+      translate
     };
   }
 });
diff --git a/src/components/DateTimeParseErrorModal.vue b/src/components/DateTimeParseErrorModal.vue
index 4e8d5fe0..7063dfe3 100644
--- a/src/components/DateTimeParseErrorModal.vue
+++ b/src/components/DateTimeParseErrorModal.vue
@@ -6,16 +6,16 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Date time parse error") }}</ion-title>
+      <ion-title>{{ translate("Date time parse error") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-item lines="none">
       <ion-label>
-        <p class="overline">{{ $t("File upload") }}</p>
-        <h1>{{ $t("Date format") }}</h1> 
-        <p class="ion-text-wrap">{{ $t("Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.") }}</p>
+        <p class="overline">{{ translate("File upload") }}</p>
+        <h1>{{ translate("Date format") }}</h1> 
+        <p class="ion-text-wrap">{{ translate("Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.") }}</p>
       </ion-label>
     </ion-item>
     
@@ -25,15 +25,15 @@
     
     <ion-item>
       <ion-label>{{ sampleDateTime }}</ion-label>
-      <ion-badge color="warning">{{ $t("Sample") }}</ion-badge>
+      <ion-badge color="warning">{{ translate("Sample") }}</ion-badge>
     </ion-item>
 
     <ion-button class="ion-margin-top ion-margin-start" fill="outline" @click="parseSampleDateTime">
-      {{ $t("Check sample") }}
+      {{ translate("Check sample") }}
     </ion-button>
     
     <ion-item lines="none">
-      <ion-label color="medium">{{ $t("This will update items across POs", {numberOfItems, numberOfPos}) }}</ion-label>
+      <ion-label color="medium">{{ translate("This will update items across POs", {numberOfItems, numberOfPos}) }}</ion-label>
     </ion-item>
     
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -66,7 +66,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { DateTime } from "luxon";
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 export default defineComponent({
   name: "DateTimeParseErrorModal",
   components: {
@@ -118,7 +118,8 @@ export default defineComponent({
     return {
       close,
       saveOutline,
-      store
+      store,
+      translate
     };
   },
 });
diff --git a/src/components/MappingConfiguration.vue b/src/components/MappingConfiguration.vue
index 7e4c13a4..72fa6441 100644
--- a/src/components/MappingConfiguration.vue
+++ b/src/components/MappingConfiguration.vue
@@ -1,12 +1,12 @@
 <template>
   <section>
     <ion-item>
-      <ion-input :label="$t('Mapping name')" v-model="currentMapping.name" />
+      <ion-input :label="translate('Mapping name')" v-model="currentMapping.name" />
     </ion-item>
 
     <ion-list>
       <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
-        <ion-input :label="$t(fieldValues.label)" v-model="currentMapping.value[field]" />
+        <ion-input :label="translate(fieldValues.label)" v-model="currentMapping.value[field]" />
       </ion-item>
     </ion-list>
 
@@ -14,11 +14,11 @@
       <div>
         <ion-button size="small" @click="updateMapping()">
           <ion-icon slot="start" :icon="saveOutline"/>
-          {{ $t("Save Changes") }}
+          {{ translate("Save Changes") }}
         </ion-button>
         <ion-button size="small" fill="outline" color="danger" @click="deleteMapping()">
           <ion-icon slot="start" :icon="trashOutline" />
-          {{ $t("Delete mapping") }}
+          {{ translate("Delete mapping") }}
         </ion-button>
       </div>
     </div>
@@ -26,11 +26,11 @@
     <div class="ion-padding-top actions mobile-only">
       <ion-button expand="block" @click="updateMapping()">
         <ion-icon slot="start" :icon="saveOutline"/>
-        {{ $t("Save Changes") }}
+        {{ translate("Save Changes") }}
       </ion-button>
       <ion-button fill="outline" color="danger" expand="block" @click="deleteMapping()">
         <ion-icon slot="start" :icon="trashOutline" />
-        {{ $t("Delete mapping") }}
+        {{ translate("Delete mapping") }}
       </ion-button>
     </div>
   </section>
@@ -49,7 +49,7 @@ import { defineComponent } from "vue";
 import { close, save, saveOutline, trashOutline } from "ionicons/icons";
 import { useStore, mapGetters } from "vuex";
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "MappingConfiguration",
@@ -71,16 +71,16 @@ export default defineComponent({
       return fields ? JSON.parse(fields) : {};
     },
     async deleteMapping() {
-      const message = this.$t("Are you sure you want to delete this CSV mapping? This action cannot be undone.");
+      const message = translate("Are you sure you want to delete this CSV mapping? This action cannot be undone.");
       const alert = await alertController.create({
-        header: this.$t("Delete mapping"),
+        header: translate("Delete mapping"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Delete"),
+            text: translate("Delete"),
             handler: () => {
               this.store.dispatch("user/deleteFieldMapping", this.currentMapping)}
           }
@@ -100,16 +100,16 @@ export default defineComponent({
         showToast(translate("Map all fields"));
         return;
       }
-      const message = this.$t("Are you sure you want to update this CSV mapping? This action cannot be undone.");
+      const message = translate("Are you sure you want to update this CSV mapping? This action cannot be undone.");
       const alert = await alertController.create({
-        header: this.$t("Update mapping"),
+        header: translate("Update mapping"),
         message,
         buttons: [
           {
-            text: this.$t("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.$t("Update"),
+            text: translate("Update"),
             handler: () => {
               this.store.dispatch('user/updateFieldMapping', this.currentMapping)
             }
@@ -126,7 +126,8 @@ export default defineComponent({
       save,
       saveOutline,
       trashOutline,
-      store
+      store,
+      translate
     };
   }
 });
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index b4ad60cb..e4c25814 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -2,7 +2,7 @@
   <ion-menu content-id="main-content" type="overlay" :disabled="!isUserAuthenticated">
     <ion-header>
       <ion-toolbar>
-        <ion-title>{{ $t("Import")}}</ion-title>
+        <ion-title>{{ translate("Import")}}</ion-title>
       </ion-toolbar>
     </ion-header>
 
@@ -55,6 +55,7 @@ import { mapGetters } from "vuex";
 import { albumsOutline, bookmarkOutline, settings, calendar } from "ionicons/icons";
 import { useStore } from "@/store";
 import { useRouter } from "vue-router";
+import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: "Menu",
@@ -123,7 +124,8 @@ export default defineComponent({
       albumsOutline,
       calendar,
       settings,
-      store
+      store,
+      translate
     };
   }
 });
diff --git a/src/components/MissingFacilitiesModal.vue b/src/components/MissingFacilitiesModal.vue
index 1165ce59..f5c70bd4 100644
--- a/src/components/MissingFacilitiesModal.vue
+++ b/src/components/MissingFacilitiesModal.vue
@@ -6,17 +6,17 @@
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ $t("Missing facilities") }}</ion-title>
+      <ion-title>{{ translate("Missing facilities") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
     <ion-list>
       <ion-item v-for="(items, facilityId) in itemsByFacilityId" :key="facilityId" lines="full">
-        <ion-select interface="popover" :placeholder="$t('Map facility')" @ionChange="updateFacility($event, facilityId)">
+        <ion-select interface="popover" :placeholder="translate('Map facility')" @ionChange="updateFacility($event, facilityId)">
           <ion-label slot="label">
             {{ facilityId }}
-            <p>{{ items?.length }} {{ $t("line items") }}</p>
+            <p>{{ items?.length }} {{ translate("line items") }}</p>
           </ion-label>
           <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
         </ion-select>
@@ -54,7 +54,7 @@ import { close, saveOutline } from "ionicons/icons";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { showToast } from "@/utils";
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import emitter from "@/event-bus";
 
 export default defineComponent({
@@ -122,7 +122,8 @@ export default defineComponent({
     return {
       close,
       saveOutline,
-      store
+      store,
+      translate
     };
   },
 });
diff --git a/src/components/MissingSkuModal.vue b/src/components/MissingSkuModal.vue
index 6e58f201..579a41f1 100644
--- a/src/components/MissingSkuModal.vue
+++ b/src/components/MissingSkuModal.vue
@@ -7,23 +7,23 @@
             <ion-icon :icon="closeOutline" slot="icon-only" />
           </ion-button>
         </ion-buttons>
-        <ion-title>{{ $t("Missing SKUs") }}</ion-title>
+        <ion-title>{{ translate("Missing SKUs") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <div>
         <ion-item id="update-sku" lines="none">
-          <ion-input v-model="updatedSku" :clear-input="true" :placeholder="$t('Select SKU')" @ionFocus="selectInputText($event)" @keyup.enter="update" :class="isSkuInvalid ? 'ion-touched ion-invalid' : ''" :error-text="$t('This SKU is not available, please try again')"/>
+          <ion-input v-model="updatedSku" :clear-input="true" :placeholder="translate('Select SKU')" @ionFocus="selectInputText($event)" @keyup.enter="update" :class="isSkuInvalid ? 'ion-touched ion-invalid' : ''" :error-text="translate('This SKU is not available, please try again')"/>
         </ion-item>
-        <ion-button @click="update" :disabled="!(unidentifiedProductSku && updatedSku)">{{ $t("Update") }}</ion-button>
+        <ion-button @click="update" :disabled="!(unidentifiedProductSku && updatedSku)">{{ translate("Update") }}</ion-button>
       </div>
       
       <ion-segment v-model="segmentSelected">
         <ion-segment-button value="pending">
-          <ion-label>{{ $t("Pending") }}</ion-label>
+          <ion-label>{{ translate("Pending") }}</ion-label>
         </ion-segment-button>
         <ion-segment-button value="completed">
-          <ion-label>{{ $t("Completed") }}</ion-label>
+          <ion-label>{{ translate("Completed") }}</ion-label>
         </ion-segment-button>
       </ion-segment>
       <!-- If two different POs contain same missing SKU then in MissingSkuModal, both the products will be selected. -->
@@ -92,6 +92,7 @@ import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
 import { ref } from "vue";
 import { DxpShopifyImg } from "@hotwax/dxp-components";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "MissingSkuModal",
@@ -196,7 +197,8 @@ export default defineComponent({
       closeOutline,
       saveOutline,
       segmentSelected,
-      store
+      store,
+      translate
     }
   }
 })
diff --git a/src/components/ProductPopover.vue b/src/components/ProductPopover.vue
index ffae3325..35d3494a 100644
--- a/src/components/ProductPopover.vue
+++ b/src/components/ProductPopover.vue
@@ -7,12 +7,12 @@
 
       <ion-item button lines="none" @click="revert">
         <ion-icon slot="start" :icon="arrowUndoOutline" />
-        <ion-label>{{ $t('Reset') }}</ion-label>
+        <ion-label>{{ translate('Reset') }}</ion-label>
       </ion-item>
 
       <ion-item button lines="none" @click="onlySelect">
         <ion-icon slot="start" :icon="checkboxOutline" />
-        <ion-label>{{ $t('Only select') }}</ion-label>
+        <ion-label>{{ translate('Only select') }}</ion-label>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -26,6 +26,7 @@ import {
   checkboxOutline,
   arrowUndoOutline
 } from 'ionicons/icons';
+import { translate } from '@hotwax/dxp-components';
 export default defineComponent({
   props: ['id', 'isVirtual', 'item', 'poId', 'type'],
   name: 'parentProductPopover',
@@ -144,7 +145,8 @@ export default defineComponent({
     return {
       checkboxOutline,
       arrowUndoOutline,
-      store
+      store,
+      translate
     }
   }
 }) 
diff --git a/src/components/PurchaseOrderDetail.vue b/src/components/PurchaseOrderDetail.vue
index b1333786..8c838cf3 100644
--- a/src/components/PurchaseOrderDetail.vue
+++ b/src/components/PurchaseOrderDetail.vue
@@ -32,10 +32,10 @@
             </ion-label>
           </ion-item>
           <ion-chip outline class="tablet">
-            <ion-label>{{ item.isNewProduct === "Y"? $t("Preorder") : $t("Backorder") }}</ion-label>
+            <ion-label>{{ item.isNewProduct === "Y"? translate("Preorder") : translate("Backorder") }}</ion-label>
           </ion-chip>
           <ion-chip outline>
-            <ion-label>{{ item.quantityOrdered }} {{ $t("Ordered") }}</ion-label>
+            <ion-label>{{ item.quantityOrdered }} {{ translate("Ordered") }}</ion-label>
           </ion-chip>
           <ion-chip outline class="tablet">
             <ion-icon :icon="sendOutline" />
@@ -68,7 +68,8 @@ import { sendOutline, ellipsisVerticalOutline } from 'ionicons/icons';
 import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
 import ProductPopover from '@/components/ProductPopover.vue'
-import { DateTime } from 'luxon'
+import { DateTime } from 'luxon';
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "PurchaseOrderDetails",
@@ -160,7 +161,8 @@ export default defineComponent({
     return {
       sendOutline,
       store,
-      ellipsisVerticalOutline
+      ellipsisVerticalOutline,
+      translate
     }
   }
 })
diff --git a/src/i18n.ts b/src/i18n.ts
deleted file mode 100644
index ed01dcae..00000000
--- a/src/i18n.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
-
-/**
- * Load locale messages
- * 
- * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
- * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
- */
-function loadLocaleMessages(): LocaleMessages<VueMessageType> {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages: LocaleMessages<VueMessageType> = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
-}
-
-const i18n = createI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
-  messages: loadLocaleMessages()
-})
-
-// TODO Check if this is needed in updated versions
-// Currently this method is added to be used in ts files
-const translate = (key: string, named?: Record<string, unknown>) => {
-  if (!key) {
-    return '';
-  }
-  return named ? i18n.global.t(key, named) : i18n.global.t(key);
-};
-
-export { i18n as default, translate }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c5290572..666b49fe 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,7 +24,6 @@ import '@ionic/vue/css/display.css';
 import './theme/variables.css';
 import '@hotwax/apps-theme';
 
-import i18n from './i18n'
 import store from './store'
 import { DateTime } from 'luxon';
 import permissionPlugin from '@/authorization';
@@ -45,7 +44,6 @@ const app = createApp(App)
     level: process.env.VUE_APP_DEFAULT_LOG_LEVEL
   })
   .use(router)
-  .use(i18n)
   .use(store)
   .use(permissionPlugin, {
     rules: permissionRules,
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 268917bc..b86b12ea 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -4,12 +4,10 @@ import RootState from '@/store/RootState'
 import UserState from './UserState'
 import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
-import { translate } from '@/i18n'
 import { logout, updateInstanceUrl, updateToken, resetConfig } from '@/adapter'
 import logger from "@/logger";
-import { useAuthStore } from '@hotwax/dxp-components';
+import { useAuthStore, translate } from '@hotwax/dxp-components';
 import emitter from '@/event-bus'
-import { Settings } from 'luxon';
 import {
   getServerPermissionsFromRules,
   prepareAppPermissions,
diff --git a/src/user-utils/index.ts b/src/user-utils/index.ts
index 44c37aba..48096522 100644
--- a/src/user-utils/index.ts
+++ b/src/user-utils/index.ts
@@ -1,4 +1,4 @@
-import { translate } from '@/i18n'
+import { translate } from '@hotwax/dxp-components'
 import store from '@/store'
 import { loadingController } from '@ionic/vue'
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5643d9ad..f4da05c9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,20 +2,20 @@
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>{{ $t("Blank") }}</ion-title>
+        <ion-title>{{ translate("Blank") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">{{ $t('Blank') }}</ion-title>
+          <ion-title size="large">{{ translate('Blank') }}</ion-title>
         </ion-toolbar>
       </ion-header>
     
       <div id="container">
-        <strong>{{ $t('Ready to create an app?') }}</strong>
-        <p>{{ $t('Start with Ionic') }} <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">{{ $t('UI Components') }}</a></p>
+        <strong>{{ translate('Ready to create an app?') }}</strong>
+        <p>{{ translate('Start with Ionic') }} <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">{{ translate('UI Components') }}</a></p>
       </div>
     </ion-content>
   </ion-page>
@@ -24,6 +24,7 @@
 <script lang="ts">
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'Home',
diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
index 60ced020..421b955c 100644
--- a/src/views/Inventory.vue
+++ b/src/views/Inventory.vue
@@ -3,25 +3,25 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Inventory") }}</ion-title>
+        <ion-title>{{ translate("Inventory") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content>
       <main>
         <ion-item>
-          <ion-label>{{ $t("Inventory") }}</ion-label>
+          <ion-label>{{ translate("Inventory") }}</ion-label>
           <ion-label class="ion-text-right ion-padding-end">{{ file.name }}</ion-label>
           <input @change="parse" ref="file" class="ion-hide" type="file" id="inventoryInputFile"/>
-          <label for="inventoryInputFile">{{ $t("Upload") }}</label>
+          <label for="inventoryInputFile">{{ translate("Upload") }}</label>
         </ion-item>
 
         <ion-list>
-          <ion-list-header>{{ $t("Saved mappings") }}</ion-list-header>
+          <ion-list-header>{{ translate("Saved mappings") }}</ion-list-header>
           <div>
             <ion-chip :disabled="!this.content.length" outline="true" @click="addFieldMapping()">
               <ion-icon :icon="addOutline" />
-              <ion-label>{{ $t("New mapping") }}</ion-label>
+              <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
             <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('RSTINV') ?? []" :key="index" @click="mapFields(mapping)" outline="true">
               {{ mapping.name }}
@@ -30,18 +30,18 @@
         </ion-list>
  
         <ion-list>
-          <ion-list-header>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
+          <ion-list-header>{{ translate("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
             <template v-if="field === 'productIdentification'">
-              <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "$t('Select')" v-model="identificationTypeId">
+              <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "translate('Select')" v-model="identificationTypeId">
                 <ion-select-option :key="goodIdentificationType.goodIdentificationTypeId" :value="goodIdentificationType.goodIdentificationTypeId" v-for="goodIdentificationType in goodIdentificationTypes">{{ goodIdentificationType.description }}</ion-select-option>
               </ion-select>
-              <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
+              <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "translate('Select')" slot="end" v-model="fieldMapping['productIdentification']">
                 <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
               </ion-select>
             </template>
             <template v-else>
-              <ion-select :label="$t(fieldValues.label)" interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+              <ion-select :label="translate(fieldValues.label)" interface="popover" v-if="content.length" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
                 <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
               </ion-select>
             </template>
@@ -49,7 +49,7 @@
         </ion-list>
 
         <ion-button :disabled="!this.content.length" color="medium" @click="review" expand="block">
-          {{ $t("Review") }}
+          {{ translate("Review") }}
           <ion-icon slot="end" :icon="arrowForwardOutline" />
         </ion-button>
       </main>
@@ -63,7 +63,7 @@ import { defineComponent } from "vue";
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from "vuex";
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import { addOutline, arrowForwardOutline } from 'ionicons/icons';
 import parseFileMixin from '@/mixins/parseFileMixin';
 import CreateMappingModal from "@/components/CreateMappingModal.vue";
@@ -189,7 +189,8 @@ export default defineComponent({
       addOutline,
       arrowForwardOutline,
       router,
-      store
+      store,
+      translate
     }
   } 
 })
diff --git a/src/views/InventoryReview.vue b/src/views/InventoryReview.vue
index cce34a87..d969b87e 100644
--- a/src/views/InventoryReview.vue
+++ b/src/views/InventoryReview.vue
@@ -3,8 +3,8 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button slot="start" default-href="/inventory" />
-        <ion-title v-if="!stockItems.initial || stockItems.initial.length === 0">{{stockItems.parsed.length}} {{ $t('items') }}</ion-title>
-        <ion-title v-else>{{ stockItems.initial.length }} {{ $t('of') }} {{ stockItems.parsed.length }} {{ $t('items') }}</ion-title>
+        <ion-title v-if="!stockItems.initial || stockItems.initial.length === 0">{{stockItems.parsed.length}} {{ translate('items') }}</ion-title>
+        <ion-title v-else>{{ stockItems.initial.length }} {{ translate('of') }} {{ stockItems.parsed.length }} {{ translate('items') }}</ion-title>
      
         <ion-buttons slot="end">
           <ion-button @click="revertAll">
@@ -19,14 +19,14 @@
         <ion-card color="light">
           <ion-card-content>
             <ion-icon slot="start" color="danger" :icon="warningOutline"></ion-icon>
-            {{ $t("Please ensure that the uploaded file contains accurate product information. If a product does not exist, the corresponding records will not be processed.") }}
+            {{ translate("Please ensure that the uploaded file contains accurate product information. If a product does not exist, the corresponding records will not be processed.") }}
           </ion-card-content>
         </ion-card>
         <div class="filters">
           <ion-item @click="openMissingFacilitiesModal()" button>
             <ion-icon slot="start" :icon="businessOutline" />
-            <ion-label>{{ $t("Missing facilities") }}</ion-label>
-            <ion-note slot="end">{{ getItemsWithMissingFacility().length }} {{ $t("items") }}</ion-note>
+            <ion-label>{{ translate("Missing facilities") }}</ion-label>
+            <ion-note slot="end">{{ getItemsWithMissingFacility().length }} {{ translate("items") }}</ion-note>
             <ion-icon slot="end" mode="ios" :icon="chevronForwardOutline" />
           </ion-item>
         </div>
@@ -34,11 +34,11 @@
 
       <div class="empty-state" v-if="isProcessingFile">
         <ion-spinner name="crescent" />
-        <p>{{ $t("Reviewing uploaded file") }}</p>
+        <p>{{ translate("Reviewing uploaded file") }}</p>
       </div>
       <!-- Empty state -->
       <div class="empty-state" v-else-if="!stockItems.initial || stockItems.initial.length === 0">
-        <p>{{ $t("Seems like uploaded file has missing products, checked with initial records.", { initialCount: viewSize }) }}</p>
+        <p>{{ translate("Seems like uploaded file has missing products, checked with initial records.", { initialCount: viewSize }) }}</p>
       </div>
 
       <template v-else>
@@ -67,7 +67,7 @@
             </ion-item>
 
             <ion-chip outline>
-              <ion-label>{{ item.quantity }} {{ $t("Items") }}</ion-label>
+              <ion-label>{{ item.quantity }} {{ translate("Items") }}</ion-label>
             </ion-chip>
 
             <ion-chip outline class="tablet">
@@ -81,7 +81,7 @@
         </div>
       </div>
       <ion-item>
-        <ion-label> {{ $t('more items', { remainingItemCount: stockItems.parsed.length - stockItems.initial.length }) }}</ion-label>
+        <ion-label> {{ translate('more items', { remainingItemCount: stockItems.parsed.length - stockItems.initial.length }) }}</ion-label>
       </ion-item>
       </template>
 
@@ -95,14 +95,13 @@
 </template>   
 <script lang="ts">
 import { UploadService } from "@/services/UploadService";
-import { DxpShopifyImg } from "@hotwax/dxp-components";
+import { DxpShopifyImg, translate } from "@hotwax/dxp-components";
 import ProductPopover from '@/components/ProductPopover.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router';
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
 import { IonCard, IonCardContent, IonPage, IonHeader, IonToolbar, IonBackButton, IonContent, IonItem, IonThumbnail, IonLabel, IonChip, IonIcon, IonButton, IonButtons, popoverController, IonFab, IonFabButton, modalController, alertController, IonNote, IonSpinner, IonTitle } from '@ionic/vue'
 import { businessOutline, calculatorOutline, chevronForwardOutline, ellipsisVerticalOutline, locationOutline, shirtOutline, checkboxOutline, cloudUploadOutline, arrowUndoOutline, warningOutline } from 'ionicons/icons'
 
@@ -158,17 +157,17 @@ export default defineComponent({
     if(to.path === '/login') return;
     let canLeave = false;
     const alert = await alertController.create({
-      header: this.$t("Leave page"),
-      message: this.$t("Any edits made on this page will be lost."),
+      header: translate("Leave page"),
+      message: translate("Any edits made on this page will be lost."),
       buttons: [
         {
-          text: this.$t("STAY"),
+          text: translate("STAY"),
           handler: () => {
             canLeave = false;
           },
         },
         {
-          text: this.$t("LEAVE"),
+          text: translate("LEAVE"),
           handler: () => {
             canLeave = true;
           },
@@ -240,15 +239,15 @@ export default defineComponent({
         "configId": "RESET_INVENTORY"
       }
       const alert = await alertController.create({
-        header: this.$t("Reset inventory"),
-        message: this.$t("Make sure all the data you have entered is correct."),
+        header: translate("Reset inventory"),
+        message: translate("Make sure all the data you have entered is correct."),
         buttons: [
             {
-              text: this.$t("Cancel"),
+              text: translate("Cancel"),
               role: 'cancel',
             },
             {
-              text: this.$t("Upload"),
+              text: translate("Upload"),
               handler: () => {
                 UploadService.uploadJsonFile(UploadService.prepareUploadJsonPayload({
                   uploadData,
@@ -323,6 +322,7 @@ export default defineComponent({
       warningOutline,
       router,
       store,
+      translate
     }
   }
 });
diff --git a/src/views/MappingDetail.vue b/src/views/MappingDetail.vue
index 89b9f79e..b4c8e028 100644
--- a/src/views/MappingDetail.vue
+++ b/src/views/MappingDetail.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button default-href="/saved-mappings" slot="start" />
-        <ion-title>{{ $t("Mapping details") }}</ion-title>
+        <ion-title>{{ translate("Mapping details") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
@@ -24,6 +24,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { useStore } from "vuex";
+import { translate } from '@hotwax/dxp-components';
 import MappingConfiguration from '@/components/MappingConfiguration.vue'
 
 export default defineComponent({
@@ -44,7 +45,8 @@ export default defineComponent({
     const store = useStore();
 
     return {
-      store
+      store,
+      translate
     }
   }
 });
diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue
index b3f83b59..a5d2d591 100644
--- a/src/views/PurchaseOrder.vue
+++ b/src/views/PurchaseOrder.vue
@@ -3,25 +3,25 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Purchase orders") }}</ion-title>
+        <ion-title>{{ translate("Purchase orders") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content>
       <main>
         <ion-item>
-          <ion-label>{{ $t("Purchase order") }}</ion-label>
+          <ion-label>{{ translate("Purchase order") }}</ion-label>
           <ion-label class="ion-text-right ion-padding-end">{{ file.name }}</ion-label>
           <input @change="parse" ref="file" class="ion-hide" type="file" id="poInputFile"/>
-          <label for="poInputFile">{{ $t("Upload") }}</label>
+          <label for="poInputFile">{{ translate("Upload") }}</label>
         </ion-item>
 
         <ion-list>
-          <ion-list-header>{{ $t("Saved mappings") }}</ion-list-header>
+          <ion-list-header>{{ translate("Saved mappings") }}</ion-list-header>
           <div>
             <ion-chip :disabled="!this.content.length" outline="true" @click="addFieldMapping()">
               <ion-icon :icon="addOutline" />
-              <ion-label>{{ $t("New mapping") }}</ion-label>
+              <ion-label>{{ translate("New mapping") }}</ion-label>
             </ion-chip>
             <ion-chip :disabled="!this.content.length" v-for="(mapping, index) in fieldMappings('PO') ?? []" :key="index" @click="mapFields(mapping)" outline="true">
               {{ mapping.name }}
@@ -30,17 +30,17 @@
         </ion-list>   
 
         <ion-list>
-          <ion-list-header>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
+          <ion-list-header>{{ translate("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
 
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
-            <ion-select :label="$t(fieldValues.label)" interface="popover" :disabled="!content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :disabled="!content.length" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
         </ion-list>
 
         <ion-button :disabled="!this.content.length" color="medium" @click="review" expand="block">
-          {{ $t("Review") }}
+          {{ translate("Review") }}
           <ion-icon slot="end" :icon="arrowForwardOutline" />
         </ion-button>
 
@@ -53,7 +53,7 @@ import { IonChip, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem,
 import { defineComponent } from "vue";
 import { useRouter } from 'vue-router';
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 import parseFileMixin from '@/mixins/parseFileMixin';
 import { mapGetters, useStore } from "vuex";
 import { addOutline, arrowForwardOutline } from 'ionicons/icons';
@@ -179,7 +179,8 @@ export default defineComponent({
       addOutline,
       arrowForwardOutline,
       router,
-      store
+      store,
+      translate
     }
   } 
 })
diff --git a/src/views/PurchaseOrderReview.vue b/src/views/PurchaseOrderReview.vue
index cfb789c8..22f88b57 100644
--- a/src/views/PurchaseOrderReview.vue
+++ b/src/views/PurchaseOrderReview.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-back-button slot="start" default-href="/purchase-order" />
-        <ion-title>{{ $t("Review PO details") }}</ion-title>
+        <ion-title>{{ translate("Review PO details") }}</ion-title>
         <ion-buttons slot="end">
           <ion-button @click="selectAllItems(segmentSelected)">
             <ion-icon slot="icon-only" :icon="checkboxOutline" />
@@ -18,35 +18,35 @@
     <ion-content :fullscreen="true">
       <div class="header">
         <div class="search">
-          <ion-searchbar :placeholder="$t('Search products')" @keyup.enter="queryString = $event.target.value; searchProduct(queryString)" />
+          <ion-searchbar :placeholder="translate('Search products')" @keyup.enter="queryString = $event.target.value; searchProduct(queryString)" />
         </div>
 
         <div class="filters">
           <ion-item @click="openBulkAdjustmentModal()" button> 
             <ion-icon slot="start" :icon="calculatorOutline" />
-            <ion-label>{{ $t("Bulk adjustment") }}</ion-label>
-            <ion-note slot="end">{{ getSelectedItems() }} {{ $t("items selected") }}</ion-note>
+            <ion-label>{{ translate("Bulk adjustment") }}</ion-label>
+            <ion-note slot="end">{{ getSelectedItems() }} {{ translate("items selected") }}</ion-note>
             <ion-icon slot="end" :icon="chevronForwardOutline" />
           </ion-item>
 
           <ion-item @click="openDateTimeParseErrorModal()" button>
             <ion-icon slot="start" :icon="timeOutline" />
-            <ion-label>{{ $t("Date time parse error") }}</ion-label>
-            <ion-note slot="end">{{ getItemsWithInvalidDateFormat() }} {{ $t("items") }}</ion-note>
+            <ion-label>{{ translate("Date time parse error") }}</ion-label>
+            <ion-note slot="end">{{ getItemsWithInvalidDateFormat() }} {{ translate("items") }}</ion-note>
             <ion-icon slot="end" :icon="chevronForwardOutline" />
           </ion-item>
 
           <ion-item @click="openMissingFacilitiesModal()" button>
             <ion-icon slot="start" :icon="businessOutline" />
-            <ion-label>{{ $t("Missing facilities") }}</ion-label>
-            <ion-note slot="end">{{ getItemsWithMissingFacility().length }} {{ $t("items") }}</ion-note>
+            <ion-label>{{ translate("Missing facilities") }}</ion-label>
+            <ion-note slot="end">{{ getItemsWithMissingFacility().length }} {{ translate("items") }}</ion-note>
             <ion-icon slot="end" mode="ios" :icon="chevronForwardOutline" />
           </ion-item>
 
           <ion-item @click="openMissingSkuModal()" button>
             <ion-icon slot="start" :icon="shirtOutline" />
-            <ion-label>{{ $t("Missing products") }}</ion-label>
-            <ion-note slot="end">{{ purchaseOrders.unidentifiedItems?.length }} {{ $t("items") }}</ion-note>
+            <ion-label>{{ translate("Missing products") }}</ion-label>
+            <ion-note slot="end">{{ purchaseOrders.unidentifiedItems?.length }} {{ translate("items") }}</ion-note>
             <ion-icon slot="end" :icon="chevronForwardOutline" />
           </ion-item>
         </div>
@@ -56,7 +56,7 @@
       </div>
 
       <div class="ion-text-center" v-else-if="queryString">
-        <p>{{ $t("No results found")}}</p>
+        <p>{{ translate("No results found")}}</p>
       </div>
 
       <div v-else>
@@ -81,7 +81,7 @@
     <ion-footer>
       <ion-segment scrollable="true" @ionChange="selectAllItems($event.target.value); searchProduct(queryString);" v-model="segmentSelected">
         <ion-segment-button value="all">
-          <ion-label>{{ $t("All") }}</ion-label>
+          <ion-label>{{ translate("All") }}</ion-label>
         </ion-segment-button>
         <ion-segment-button v-for="(po, poId) in purchaseOrders.parsed" :key="poId" :value="poId">
           <ion-label>{{ poId }}</ion-label>
@@ -104,7 +104,7 @@ import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue';
 import MissingSkuModal from "@/components/MissingSkuModal.vue"
 import { UploadService } from "@/services/UploadService";
 import { showToast } from '@/utils';
-import { translate } from "@/i18n";
+import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: 'PurchaseOrderReview',
@@ -156,17 +156,17 @@ export default defineComponent({
     if(to.path === "/login" ) return;
     let canLeave = false;
     const alert = await alertController.create({
-      header: this.$t("Leave page"),
-      message: this.$t("Any edits made on this page will be lost."),
+      header: translate("Leave page"),
+      message: translate("Any edits made on this page will be lost."),
       buttons: [
         {
-          text: this.$t("STAY"),
+          text: translate("STAY"),
           handler: () => {
             canLeave = false;
           },
         },
         {
-          text: this.$t("LEAVE"),
+          text: translate("LEAVE"),
           handler: () => {
             canLeave = true;
           },
@@ -263,15 +263,15 @@ export default defineComponent({
         "configId": "IMP_PO"
       }
       const alert = await alertController.create({
-        header: this.$t("Upload purchase order"),
-        message: this.$t("Make sure all the data you have entered is correct and only pre-order or backorder items are selected."),
+        header: translate("Upload purchase order"),
+        message: translate("Make sure all the data you have entered is correct and only pre-order or backorder items are selected."),
         buttons: [
           {
-            text: this.$t("cancel"),
+            text: translate("cancel"),
             role: 'cancel',
           },
           {
-            text: this.$t("Upload"),
+            text: translate("Upload"),
             handler: () => {
               UploadService.uploadJsonFile(UploadService.prepareUploadJsonPayload({
                 uploadData,
@@ -360,6 +360,7 @@ export default defineComponent({
       segmentSelected,
       router,
       store,
+      translate
     }
   }
 });
diff --git a/src/views/SavedMappings.vue b/src/views/SavedMappings.vue
index 00a2ac0b..71bf19e0 100644
--- a/src/views/SavedMappings.vue
+++ b/src/views/SavedMappings.vue
@@ -3,24 +3,24 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Saved mappings") }}</ion-title>
+        <ion-title>{{ translate("Saved mappings") }}</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content>
       <main>
         <div class="empty-state" v-if="!areFieldMappingsAvailable">
-          <p>{{ $t("There are no saved CSV mappings to show. Create a new mapping from a file upload screen")}}</p>
+          <p>{{ translate("There are no saved CSV mappings to show. Create a new mapping from a file upload screen")}}</p>
         </div>
         <section v-else>
           <ion-list v-if="Object.keys(fieldMappings('PO')).length">
-            <ion-list-header>{{ $t("Purchase order") }}</ion-list-header>
+            <ion-list-header>{{ translate("Purchase order") }}</ion-list-header>
             <ion-item v-for="(mapping, index) in fieldMappings('PO')" :key="index" @click="viewMappingConfiguration(index, 'PO')" detail button>
               <ion-label>{{ mapping.name }}</ion-label>
             </ion-item>
           </ion-list>
           <ion-list v-if="Object.keys(fieldMappings('RSTINV')).length">
-            <ion-list-header>{{ $t("Inventory") }}</ion-list-header>
+            <ion-list-header>{{ translate("Inventory") }}</ion-list-header>
             <ion-item v-for="(mapping, index) in fieldMappings('RSTINV')" :key="index" @click="viewMappingConfiguration(index, 'RSTINV')" detail button>
               <ion-label>{{ mapping.name }}</ion-label>
             </ion-item>
@@ -53,6 +53,7 @@ import { defineComponent } from 'vue';
 import { useRouter } from 'vue-router'
 import { mapGetters, useStore } from 'vuex'
 import emitter from '@/event-bus';
+import { translate } from '@hotwax/dxp-components';
 import MappingConfiguration from '@/components/MappingConfiguration.vue'
 
 export default defineComponent({
@@ -113,6 +114,7 @@ export default defineComponent({
     return {
       router,
       store,
+      translate
     };
   }
 })
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 8134b886..92173ab3 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-menu-button slot="start" />
-        <ion-title>{{ $t("Settings") }}</ion-title>
+        <ion-title>{{ translate("Settings") }}</ion-title>
       </ion-toolbar>
     </ion-header>
     
@@ -22,18 +22,18 @@
               <ion-card-title>{{ userProfile?.partyName }}</ion-card-title>
             </ion-card-header>
           </ion-item>
-          <ion-button color="danger" @click="logout()">{{ $t("Logout") }}</ion-button>
+          <ion-button color="danger" @click="logout()">{{ translate("Logout") }}</ion-button>
           <ion-button fill="outline" @click="goToLaunchpad()">
-            {{ $t("Go to Launchpad") }}
+            {{ translate("Go to Launchpad") }}
             <ion-icon slot="end" :icon="openOutline" />
           </ion-button>
           <!-- Commenting this code as we currently do not have reset password functionality -->
-          <!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
+          <!-- <ion-button fill="outline" color="medium">{{ translate("Reset password") }}</ion-button> -->
         </ion-card>
       </div>
       
       <div class="section-header">
-        <h1>{{ $t('OMS') }}</h1>
+        <h1>{{ translate('OMS') }}</h1>
       </div>
 
       <section>
@@ -49,16 +49,16 @@
         <ion-card>
           <ion-card-header>
             <ion-card-subtitle>
-              {{ $t("File upload")}}
+              {{ translate("File upload")}}
             </ion-card-subtitle>
             <ion-card-title>
-              {{ $t("Date Format") }}
+              {{ translate("Date Format") }}
             </ion-card-title>
           </ion-card-header>
           
           <ion-card-content>
-            {{ $t('Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.') }}
-            <p>{{ $t('Luxon date time formats can be found') }} <a target="_blank" rel="noopener noreferrer" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">{{ $t("here") }}</a></p>
+            {{ translate('Enter a custom date time format that you want to use when uploading documents to HotWax Commerce.') }}
+            <p>{{ translate('Luxon date time formats can be found') }} <a target="_blank" rel="noopener noreferrer" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">{{ translate("here") }}</a></p>
           </ion-card-content> 
           <ion-item>
             <ion-input :clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value; parseSampleDateTime()" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
@@ -66,11 +66,11 @@
           <ion-item>
             <ion-label>{{ sampleDateTime }}</ion-label>
             <ion-badge color="warning">
-              <ion-label>{{ $t("Sample") }}</ion-label>
+              <ion-label>{{ translate("Sample") }}</ion-label>
             </ion-badge>
           </ion-item>
           <ion-button fill="clear" @click="updateDateTimeFormat()">
-            {{ $t("Save") }}
+            {{ translate("Save") }}
             <ion-icon slot="end" :icon="saveOutline" />
           </ion-button>
         </ion-card>
@@ -87,6 +87,7 @@ import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { DateTime } from 'luxon';
 import Image from '@/components/Image.vue';
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'Settings',
@@ -167,7 +168,8 @@ export default defineComponent({
       saveOutline,
       store,
       router,
-      timeOutline
+      timeOutline,
+      translate
     }
   }
 });
diff --git a/vue.config.js b/vue.config.js
index d6c807fd..7e26e710 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,18 +1,6 @@
 const path = require('path')
 require("@hotwax/app-version-info")
 module.exports = {
-  pluginOptions: {
-    i18n: {
-      locale: 'en',
-      fallbackLocale: 'en',
-      localeDir: 'locales',
-      enableLegacy: true,
-      runtimeOnly: true,
-      compositionOnly: false,
-      fullInstall: true,
-      enableInSFC: true
-    }
-  },
   configureWebpack: {
     resolve: {
       alias: {