@designcrowd/fe-shared-lib 1.2.11-ml-currency-3 → 1.2.11-ml-407-2

package/Dockerfile

@@ -29,7 +29,7 @@ COPY .npmignore ./
 RUN npm run bundle-translation
 
 RUN mkdir artifacts
-RUN npm publish --otp=777231 || (touch artifacts/npm_publish_failed && exit 1)
+RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
 RUN cp package.json artifacts/
 
 ENTRYPOINT ["/bin/echo", "Nothing to do."]

package/dist/css/tailwind-brandCrowd.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -719,6 +723,9 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +834,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -842,9 +853,6 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
-.tw-w-1\/3 {
-  width: 33.333333%;
-}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1013,6 +1021,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1457,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2023,6 +2045,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));
@@ -2087,6 +2113,10 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
@@ -2229,6 +2259,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-brandPage.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -719,6 +723,9 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +834,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -842,9 +853,6 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
-.tw-w-1\/3 {
-  width: 33.333333%;
-}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1013,6 +1021,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1294,6 +1305,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1791,6 +1813,10 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
@@ -1917,6 +1943,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-crazyDomains.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -719,6 +723,9 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +834,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -842,9 +853,6 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
-.tw-w-1\/3 {
-  width: 33.333333%;
-}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1013,6 +1021,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1457,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2023,6 +2045,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));
@@ -2087,6 +2113,10 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));
@@ -2229,6 +2259,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-designCom.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -719,6 +723,9 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +834,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -842,9 +853,6 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
-.tw-w-1\/3 {
-  width: 33.333333%;
-}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1013,6 +1021,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1457,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2023,6 +2045,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2087,6 +2113,10 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -2229,6 +2259,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-designCrowd.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -719,6 +723,9 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
+.tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +834,10 @@ video {
 .tw-h-auto {
   height: auto;
 }
+.tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .tw-h-full {
   height: 100%;
 }
@@ -842,9 +853,6 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
-.tw-w-1\/3 {
-  width: 33.333333%;
-}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1013,6 +1021,9 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1457,17 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2023,6 +2045,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2087,6 +2113,10 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -2229,6 +2259,10 @@ video {
     margin-left: 1rem;
   }
 
+  .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.11-ml-currency-3",
+  "version": "1.2.11-ml-407-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -113,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/src/atoms/components/Price/Price.fixtures.js

@@ -14,72 +14,12 @@ export const audCurrency = {
   abbreviation: 'AU',
 };
 
-export const gbpCurrency = {
-  id: 3,
-  name: 'British Pound',
-  iso4127Code: 'GBP',
-  symbol: '£',
-  abbreviation: 'UK',
-};
-
 export const euroCurrency = {
-  id: 4,
+  id: 999,
   name: 'Euro',
   iso4127Code: 'EUR',
   symbol: '€',
   abbreviation: 'EU',
 };
 
-export const inrCurrency = {
-  id: 5,
-  name: 'Indian Rupee',
-  iso4127Code: 'INR',
-  symbol: '₹',
-  abbreviation: 'IN',
-};
-
-export const phpCurrency = {
-  id: 6,
-  name: 'Philippine Peso',
-  iso4127Code: 'PHP',
-  symbol: '₱',
-  abbreviation: 'PH',
-};
-
-export const brlCurrency = {
-  id: 7,
-  name: 'Brazilian Real',
-  iso4127Code: 'BRL',
-  symbol: 'R$',
-  abbreviation: 'R',
-};
-
-export const mxnCurrency = {
-  id: 8,
-  name: 'Mexican Peso',
-  iso4127Code: 'MXN',
-  symbol: 'MX$',
-  abbreviation: 'MX',
-};
-
-export const zarCurrency = {
-  id: 9,
-  name: 'South African Rand',
-  iso4127Code: 'ZAR',
-  symbol: 'R',
-  abbreviation: 'R',
-};
-
-export const currencies = [
-  usdCurrency,
-  audCurrency,
-  gbpCurrency,
-  euroCurrency,
-  inrCurrency,
-  phpCurrency,
-  brlCurrency,
-  mxnCurrency,
-  zarCurrency,
-];
-
-export const locales = [ 'en_US', 'fr_FR', 'es_ES', 'pt_PT', 'de-DE']
+export const currencies = [usdCurrency, audCurrency, euroCurrency];

package/src/atoms/components/Price/Price.stories.js

@@ -1,8 +1,5 @@
 import Price from './Price.vue';
-import { currencies, locales } from './Price.fixtures';
-import {setSharedLibLocaleAsync} from "../../../useSharedLibTranslate";
-
-await setSharedLibLocaleAsync();
+import { currencies } from './Price.fixtures';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -10,7 +7,6 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -20,10 +16,6 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
-    locale: {
-      control: { type: 'select' },
-      options: locales,
-    },
   },
 };
 
@@ -39,16 +31,12 @@ export const Sample = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
         <price 
             v-bind="args"
             :currency="selectedCurrency"
-            :locale="selectedLocale"
         />
       </span>
     `,
@@ -71,9 +59,6 @@ export const WithFraction = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -81,7 +66,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -104,9 +89,6 @@ export const AlwaysShowFractionOn = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -115,7 +97,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -146,7 +128,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
           />
       </span>
     `,
@@ -169,9 +151,6 @@ export const WithSuffix = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -180,8 +159,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
+            :show-abbreviation="true"
             :suffix="suffix"
-            :locale="selectedLocale"
           />
       </span>
     `,
@@ -192,35 +171,3 @@ export const WithSuffix = {
     suffix: '/yr',
   },
 };
-
-export const WithLocale = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :currency="selectedCurrency"
-            :locale="selectedLocale"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-  },
-};

package/src/atoms/components/Price/Price.vue

@@ -5,9 +5,6 @@
   </span>
 </template>
 <script>
-
-import {formatCurrency} from "../../../useSharedLibTranslate";
-
 export default {
   props: {
     amount: {
@@ -25,11 +22,6 @@ export default {
       required: false,
       default: null,
     },
-    locale: {
-      type: String,
-      required: false,
-      default: null,
-    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -66,17 +58,6 @@ export default {
         return 'Free';
       }
 
-      if (this.locale != null)
-      {
-        return formatCurrency(
-          this.amount,
-          this.locale,
-          this.currency,
-          this.fraction,
-          this.showAbbreviatiom
-        );
-      }
-
       const parsedAmount = Number.parseFloat(this.amount);
 
       if (Number.isNaN(parsedAmount)) {
@@ -92,10 +73,10 @@ export default {
       return parsedAmount.toFixed(this.fraction);
     },
     currencyAbbreviation() {
-      return this.showAbbreviation && this.amount && !this.locale > 0 ? this.currency?.abbreviation?.trim() : '';
+      return this.showAbbreviation && this.amount > 0 ? this.currency?.abbreviation?.trim() : '';
     },
     currencySymbol() {
-      if (!this.amount || this.amount === 0 || this.locale) {
+      if (!this.amount || this.amount === 0) {
         return '';
       }
 

package/src/experiences/components/AuthFlow/SignIn.vue

@@ -57,7 +57,7 @@
           </p>
           <div class="tw-flex tw-flex-col">
             <div>
-              <form id="signin" action="/identity/account/signin" method="post" @submit="validate">
+              <form id="signin" :action="getSignInAction" method="post" @submit="validate">
                 <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
                 <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
                 <input
@@ -170,6 +170,7 @@ import themeMixin from '../../mixins/themeMixin';
 import { SIGN_IN } from '../../constants/partner-dictionary-constants';
 import isValidEmail from '../../helpers/email-validator';
 import SocialSignIn from './SocialSignIn.vue';
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -334,6 +335,9 @@ export default {
     isLoading() {
       return this.emailLoading || this.facebookLoading || this.googleLoading;
     },
+    currentLocale() {
+      return getCurrentLocale();
+    },
     submissionButtonLabelLowercase() {
       return this.submissionButtonLabel.toLowerCase();
     },
@@ -369,6 +373,11 @@ export default {
       }
       return this.signUpText;
     },
+    getSignInAction() {
+      const params = new URLSearchParams();
+      params.set('locale', this.currentLocale);
+      return `/identity/account/signin?${params.toString()}`;
+    },
   },
   watch: {
     capturePassword() {

package/src/experiences/components/AuthFlow/SignUp.vue

@@ -34,6 +34,7 @@
           </h2>
           <form id="signup" action="/identity/account/signup" method="post" @submit="validate">
             <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
+            <input name="requestLocale" type="hidden" :value="currentLocale" />
             <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
               v-model="aUserName"
@@ -116,6 +117,7 @@ import SocialSignIn from './SocialSignIn.vue';
 import SubmissionButton from './SubmissionButton.vue';
 import AuthLegal from './AuthLegal.vue';
 import themeMixin from '../../mixins/themeMixin';
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -229,6 +231,9 @@ export default {
       }
       return url?.toString();
     },
+    currentLocale() {
+      return getCurrentLocale();
+    },
   },
   methods: {
     validate(e) {

package/src/useSharedLibTranslate.js

@@ -27,6 +27,8 @@ const setSharedLibLocaleAsync = async (locale = 'en-US') => {
   await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
     ...languageFile,
   });
+
+  await i18next.changeLanguage(localeToUse);
 };
 
 const tr = (key, valuesToInterpolate = {}) => {
@@ -59,42 +61,6 @@ const getCurrentLocale = () => {
   return i18next.language || 'en-US';
 };
 
-const formatCurrency = (amount, locale, currency, fraction = 0, showAbbreviation = false) => {
-  let localeAmount = i18next.t('{{val, currency}}', {
-    ns: 'fe-shared-lib',
-    val: amount,
-    currency: currency.iso4127Code,
-    locale: locale,
-    maximumFractionDigits: fraction,
-    useGrouping: false,
-  });
-
-  // i18next always uses iso code for ZAR, prefer symbol over iso code
-  if (localeAmount.includes(currency.iso4127Code)) {
-    return localeAmount.replace(currency.iso4127Code, currency.symbol);
-  }
-
-  // show abbreviation locale logic
-  // note: showAbbreviaton is only passed as true for symbol = "$"
-  if (currency.symbol != '$') {
-    return localeAmount;
-  }
-
-  // AUD edge case for en_US
-  if (currency.iso4127Code == 'AUD') {
-    localeAmount = localeAmount.replace('A$', currency.symbol);
-  }
-
-  if (showAbbreviation && !localeAmount.includes(currency.abbreviation)) {
-    return `${currency?.abbreviation}${localeAmount}`;
-  
-  } else if (!showAbbreviation && localeAmount.includes(currency.abbreviation)) {
-    return localeAmount.replace(currency.abbreviation, '');
-  }
-
-  return localeAmount;
-}
-
 export {
   setSharedLibLocaleAsync,
   getCurrentLocale,
@@ -106,6 +72,5 @@ export {
   sellDomainNameModalApplicationTr,
   sellDomainNameListModalTr,
   sellDomainNameListTr,
-  formatCurrency,
 };