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

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

@@ -14,12 +14,72 @@ export const audCurrency = {
   abbreviation: 'AU',
 };
 
+export const gbpCurrency = {
+  id: 3,
+  name: 'British Pound',
+  iso4127Code: 'GBP',
+  symbol: '£',
+  abbreviation: 'UK',
+};
+
 export const euroCurrency = {
-  id: 999,
+  id: 4,
   name: 'Euro',
   iso4127Code: 'EUR',
   symbol: '€',
   abbreviation: 'EU',
 };
 
-export const currencies = [usdCurrency, audCurrency, euroCurrency];
+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']

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

@@ -1,5 +1,5 @@
 import Price from './Price.vue';
-import { currencies } from './Price.fixtures';
+import { currencies, locales } from './Price.fixtures';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -7,6 +7,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
+    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -16,6 +17,10 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
+    locale: {
+      control: { type: 'select' },
+      options: locales,
+    },
   },
 };
 
@@ -31,12 +36,16 @@ 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>
     `,
@@ -59,6 +68,9 @@ export const WithFraction = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -66,7 +78,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -89,6 +101,9 @@ export const AlwaysShowFractionOn = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -97,7 +112,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -128,7 +143,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -151,6 +166,9 @@ export const WithSuffix = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -159,8 +177,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
             :suffix="suffix"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -171,3 +189,35 @@ 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

@@ -26,7 +26,7 @@ export default {
       required: false,
       default: null,
     },
-    localeCurrency: {
+    locale: {
       type: String,
       required: false,
       default: null,
@@ -70,14 +70,15 @@ export default {
         return 'Free';
       }
 
-      if (this.localeCurrency != null)
+      if (this.locale != null)
       {
         let amount = i18next.t('{{val, currency}}', {
           ns: 'fe-shared-lib',
           val: this.amount,
           currency: this.currency.iso4127Code,
-          locale: this.localeCurrency,
-          minimumFractionDigits: this.fraction
+          locale: this.locale,
+          maximumFractionDigits: this.fraction,
+          useGrouping: false,
         });
 
         return this.standardiseAmount(amount);
@@ -98,10 +99,10 @@ export default {
       return parsedAmount.toFixed(this.fraction);
     },
     currencyAbbreviation() {
-      return this.showAbbreviation && this.amount > 0 ? this.currency?.abbreviation?.trim() : '';
+      return this.showAbbreviation && this.amount && !this.locale > 0 ? this.currency?.abbreviation?.trim() : '';
     },
     currencySymbol() {
-      if (!this.amount || this.amount === 0 || this.localeCurrency) {
+      if (!this.amount || this.amount === 0 || this.locale) {
         return '';
       }
 
@@ -129,12 +130,27 @@ export default {
   },
   methods: {
     standardiseAmount(amount) {
+      // i18next always uses iso code for ZAR, prefer symbol over iso code
+      if (amount.includes(this.currency.iso4127Code)) {
+        return amount.replace(this.currency.iso4127Code, this.currency.symbol);
+      }
+
+      // show abbreviation locale logic
+      // note: showAbbreviaton is only passed as true for symbol = "$"
+      if (this.currency.symbol != '$') {
+        return amount
+      }
+
+      // AUD edge case for en_US
       if (this.currency.iso4127Code == 'AUD') {
-        return amount.replace('A$', this.currency.symbol);
+        amount = amount.replace('A$', this.currency.symbol);
       }
 
-      if (this.currency.iso4127Code == 'ZAR') {
-        return amount.replace(this.currency.iso4127Code, this.currency.symbol);
+      if (this.showAbbreviation && !amount.includes(this.currency.abbreviation)) {
+        return `${this.currency?.abbreviation}${amount}`
+      
+      } else if (!this.showAbbreviation && amount.includes(this.currency.abbreviation)) {
+        return amount.replace(this.currency.abbreviation, '');
       }
 
       return amount;