@designcrowd/fe-shared-lib 1.2.18-ml-currency → 1.2.18

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

@@ -1,9 +1,5 @@
 import Price from './Price.vue';
-import { currencies, locales } from './Price.fixtures';
-import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
-import { defineComponent } from "vue";
-
-await setSharedLibLocaleAsync();
+import { currencies } from './Price.fixtures';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -11,7 +7,6 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -21,10 +16,6 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
-    locale: {
-      control: { type: 'select' },
-      options: locales,
-    },
   },
 };
 
@@ -40,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>
     `,
@@ -72,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>
@@ -82,7 +66,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -105,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>
@@ -116,7 +97,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -147,7 +128,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
           />
       </span>
     `,
@@ -170,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>
@@ -181,8 +159,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
+            :show-abbreviation="true"
             :suffix="suffix"
-            :locale="selectedLocale"
           />
       </span>
     `,
@@ -193,103 +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,
-  },
-};
-
-export const AllLocalesAndCurrencies = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookPriceComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      const combos = new Array(locales.length).fill(0);
-      combos.forEach((item, index) => {
-        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}))
-      })
-      currencies.forEach((item) => {
-        console.log(item.iso4127Code);
-      })
-      return {
-        variants: combos,
-      };
-    },
-    template: `
-      <StorybookPriceComponent
-          :variants="variants"/>
-      <StorybookPriceComponent
-          :variants="variants"
-          :show-abbreviation="true"
-      />
-    `,
-  };
-};
-
-const StorybookPriceComponent = defineComponent({
-    components: {
-      Price,
-    },
-    props: {
-      variants: {
-        type: Array,
-        required: true,
-      },
-      showAbbreviation: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    template: `
-    <table class="tw-w-full">
-      <thead>
-        <tr>
-          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="locale in variants" class="tw-bg-grayscale-200">
-          <td>{{ locale[0].locale }}</td>
-          <td v-for="item in locale" class="tw-p-4">
-            <price
-                :amount=10.00
-                :currency="item.currency"
-                :locale="item.locale"
-                :show-abbreviation="showAbbreviation"
-                fraction="2"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `,
-});

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

@@ -5,8 +5,7 @@
   </span>
 </template>
 <script>
-
-import { priceTr, formatCurrency } from "../../../useSharedLibTranslate";
+import { priceTr } from '../../../useSharedLibTranslate';
 
 export default {
   props: {
@@ -25,11 +24,6 @@ export default {
       required: false,
       default: null,
     },
-    locale: {
-      type: String,
-      required: false,
-      default: null,
-    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -72,21 +66,6 @@ export default {
         return this.free;
       }
 
-      if (this.locale != null)
-      {
-        const formattedCurrency = formatCurrency(
-          this.amount,
-          this.locale,
-          this.currency,
-          this.fraction,
-          this.showAbbreviation
-        );
-        
-        if (formattedCurrency) {
-          return formattedCurrency;
-        }
-      }
-
       const parsedAmount = Number.parseFloat(this.amount);
 
       if (Number.isNaN(parsedAmount)) {
@@ -102,10 +81,10 @@ export default {
       return parsedAmount.toFixed(this.fraction);
     },
     currencyAbbreviation() {
-      return this.showAbbreviation && this.amount && !this.locale ? 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/useSharedLibTranslate.js

@@ -67,47 +67,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,
-  });
-
-  const abbreviationTrimmed = currency.abbreviation.trim();
-  const symbolTrimmed = currency.symbol.trim();
-
-  // i18next always uses iso code for ZAR, prefer symbol over iso code
-  if (localeAmount.includes(currency.iso4127Code) && currency.iso4127Code === 'ZAR') {
-    return localeAmount.replace(currency.iso4127Code, symbolTrimmed);
-  }
-
-  // edge case
-  if (localeAmount.includes(currency.iso4127Code)) {
-    return localeAmount.replace(currency.iso4127Code, symbolTrimmed);
-  }
-
-  // show abbreviation locale logic
-  // note: showAbbreviation is only passed as true for symbol = "$"
-  if (currency.symbol.trim() !== '$') {
-    return localeAmount;
-  }
-
-  const altAudAbbreviation = 'AU';
-  if (showAbbreviation && !localeAmount.includes(abbreviationTrimmed)) {
-    return localeAmount.replace(symbolTrimmed,`${abbreviationTrimmed}${symbolTrimmed}`);
-  } else if (!showAbbreviation && localeAmount.includes(altAudAbbreviation)) {
-    return localeAmount.replace(altAudAbbreviation, '');
-  } else if (!showAbbreviation && localeAmount.includes(abbreviationTrimmed)) {
-    return localeAmount.replace(abbreviationTrimmed, '');
-  }
-
-  return localeAmount;
-}
-
 export {
   setSharedLibLocaleAsync,
   getCurrentLocale,
@@ -122,5 +81,4 @@ export {
   uploadYourLogoTr,
   sharedPaymentConfigTr,
   priceTr,
-  formatCurrency,
 };