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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.18-kp-2",
+  "version": "1.2.18-ml-currency",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.theme-brandCrowd .tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .theme-brandCrowd .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -849,9 +853,6 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-brandCrowd .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1020,6 +1021,9 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2227,6 +2231,9 @@ video {
 .theme-brandCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-brandCrowd .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-brandCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-brandPage.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.theme-brandPage .tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .theme-brandPage .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -849,9 +853,6 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-brandPage .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1020,6 +1021,9 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1911,6 +1915,9 @@ video {
 .theme-brandPage .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-brandPage .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-brandPage .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-crazyDomains.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.theme-crazyDomains .tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .theme-crazyDomains .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -849,9 +853,6 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-crazyDomains .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1020,6 +1021,9 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2227,6 +2231,9 @@ video {
 .theme-crazyDomains .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-crazyDomains .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-crazyDomains .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-designCom.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.theme-designCom .tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .theme-designCom .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -849,9 +853,6 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-designCom .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1020,6 +1021,9 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2227,6 +2231,9 @@ video {
 .theme-designCom .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-designCom .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-designCom .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-designCrowd.css

@@ -643,6 +643,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.theme-designCrowd .tw-my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .theme-designCrowd .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -849,9 +853,6 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
-.theme-designCrowd .tw-w-1\/3 {
-  width: 33.333333%;
-}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1020,6 +1021,9 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2227,6 +2231,9 @@ video {
 .theme-designCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
+.theme-designCrowd .md\:tw-mr-2 {
+    margin-right: 0.5rem;
+  }
 .theme-designCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }

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

@@ -11,15 +11,75 @@ export const audCurrency = {
   name: 'Australian Dollars',
   iso4127Code: 'AUD',
   symbol: '$',
-  abbreviation: 'AU',
+  abbreviation: 'A',
+};
+
+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,9 @@
 import Price from './Price.vue';
-import { currencies } from './Price.fixtures';
+import { currencies, locales } from './Price.fixtures';
+import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
+import { defineComponent } from "vue";
+
+await setSharedLibLocaleAsync();
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -7,6 +11,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
+    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -16,6 +21,10 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
+    locale: {
+      control: { type: 'select' },
+      options: locales,
+    },
   },
 };
 
@@ -31,12 +40,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 +72,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 +82,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -89,6 +105,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 +116,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -128,7 +147,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -151,6 +170,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 +181,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
             :suffix="suffix"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -171,3 +193,103 @@ 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,7 +5,8 @@
   </span>
 </template>
 <script>
-import { priceTr } from '../../../useSharedLibTranslate';
+
+import { priceTr, formatCurrency } from "../../../useSharedLibTranslate";
 
 export default {
   props: {
@@ -24,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    locale: {
+      type: String,
+      required: false,
+      default: null,
+    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -66,6 +72,21 @@ 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)) {
@@ -81,10 +102,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 ? this.currency?.abbreviation?.trim() : '';
     },
     currencySymbol() {
-      if (!this.amount || this.amount === 0) {
+      if (!this.amount || this.amount === 0 || this.locale) {
         return '';
       }
 

package/src/bundles/bundled-translations.de-DE.json

@@ -29,9 +29,7 @@
     "copySuccessLabel": "Kopiert!",
     "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später",
-    "selectDomainDropdownPlaceholder": "Domain auswählen",
-    "websiteFriendlyName": "Website",
-    "digitalBusinessCardFriendlyName": "digitale Visitenkarte"
+    "selectDomainDropdownPlaceholder": "Domain auswählen"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Kostenlose Domain",

package/src/bundles/bundled-translations.es-ES.json

@@ -29,9 +29,7 @@
     "copySuccessLabel": "¡Copiado!",
     "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde",
-    "selectDomainDropdownPlaceholder": "Selecciona un nombre de dominio",
-    "websiteFriendlyName": "sitio web",
-    "digitalBusinessCardFriendlyName": "tarjeta de visita digital"
+    "selectDomainDropdownPlaceholder": "Selecciona un nombre de dominio"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Dominio gratis",

package/src/bundles/bundled-translations.fr-FR.json

@@ -29,9 +29,7 @@
     "copySuccessLabel": "Copié !",
     "publishedSuccessDescriptionLabel": "Achetez un nom de domaine correspondant à votre marque",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Non merci, peut-être plus tard",
-    "selectDomainDropdownPlaceholder": "Sélectionner un nom de domaine",
-    "websiteFriendlyName": "site Web",
-    "digitalBusinessCardFriendlyName": "carte de visite numérique"
+    "selectDomainDropdownPlaceholder": "Sélectionner un nom de domaine"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domaine gratuit",

package/src/bundles/bundled-translations.json

@@ -29,9 +29,7 @@
     "copySuccessLabel": "Copied!",
     "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
-    "selectDomainDropdownPlaceholder": "Select domain name",
-    "websiteFriendlyName": "Website",
-    "digitalBusinessCardFriendlyName": "Digital Business Card"
+    "selectDomainDropdownPlaceholder": "Select domain name"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Free Domain",

package/src/bundles/bundled-translations.pt-PT.json

@@ -29,9 +29,7 @@
     "copySuccessLabel": "Copiado!",
     "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde",
-    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio",
-    "websiteFriendlyName": "website",
-    "digitalBusinessCardFriendlyName": "cartão de visita digital"
+    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domínio gratuito",

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -270,8 +270,6 @@ const DOMAIN_TYPES = {
 
 const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
 const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
-const WEBSITE_FRIENDLY_NAME = 'Website';
-export const DIGITAL_BUSINESS_CARD = 'Digital Business Card';
 
 export default {
   components: {
@@ -456,9 +454,8 @@ export default {
       return this.brandPageBaseUrl.replace('https://', '');
     },
     firstTimePublishHeaderLabel() {
-      const translatedBrandPageName = this.getLanguageAwareBrandPageDisplayName(this.brandPageDisplayName);
       return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
-        brandPageDisplayName: translatedBrandPageName,
+        brandPageDisplayName: this.brandPageDisplayName,
       });
     },
     publishSuccessLabel() {
@@ -523,18 +520,6 @@ export default {
     this.isModalVisible = this.isSearchDomainListModalVisible;
   },
   methods: {
-    getLanguageAwareBrandPageDisplayName(brandPageName) {
-      switch (brandPageName) {
-        case WEBSITE_FRIENDLY_NAME:
-          return this.te('websiteFriendlyName') ? this.t('websiteFriendlyName') : 'Website';
-        case DIGITAL_BUSINESS_CARD:
-          return this.te('digitalBusinessCardFriendlyName')
-            ? this.t('digitalBusinessCardFriendlyName')
-            : 'Digital Business Card';
-        default:
-          return brandPageName;
-      }
-    },
     onDomainTypeRadioButtonClick(domain) {
       this.domainTypeValue = domain;
       this.closePurchasedDomainDropdown();