@designcrowd/fe-shared-lib 1.2.5-byo-3 → 1.2.5-ml-currency

package/index.js

@@ -19,7 +19,7 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
-export { setLocaleAsync, tr, uploadYourLogoTr } from './src/useSharedLibTranslate';
+export { setLocaleAsync, tr } from './src/useSharedLibTranslate';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';

package/package.json

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

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

@@ -22,6 +22,11 @@ export default {
       required: false,
       default: null,
     },
+    localeCurrency: {
+      type: String,
+      required: false,
+      default: null,
+    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -58,6 +63,11 @@ export default {
         return 'Free';
       }
 
+      if (this.localeCurrency != null && this.amount.includes(this.localeCurrency))
+      {
+        return this.amount.replace(this.localeCurrency, '').trim();
+      }
+
       const parsedAmount = Number.parseFloat(this.amount);
 
       if (Number.isNaN(parsedAmount)) {

package/src/bundles/bundled-translations.json

@@ -1,33 +1,5 @@
 {
   "publishModal": {
     "test": "EN-Publish Brand Page"
-  },
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Upload your logo-",
-    "disclaimerText": "Please ensure you have the right to use any image you upload.-",
-    "generatingDesigns": "Generating Designs...-",
-    "uploadingAndConverting": "Uploading and converting your logo...-",
-    "stepOf": "Step {{current}} of {{total}}-",
-    "uploadError": "Upload Error-",
-    "cancel": "Cancel-",
-    "continue": "Continue-",
-    "back": "Back-",
-    "no": "No-",
-    "yes": "Yes-",
-    "businessName": "Business Name-",
-    "businessNameDescription": "Enter your logo text or business name-",
-    "cropYourLogo": "Crop your logo-",
-    "cropDescription": "Crop your logo design to fit our logo maker canvas-",
-    "logoPreview": "Logo preview-",
-    "logoPreviewDescription": "Your logo looks great! Help us setup your logo by completing the next steps.-",
-    "primaryTextColor": "Primary text color-",
-    "primaryTextColorDescription": "Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.-",
-    "backgroundColor": "Background color-",
-    "backgroundColorDescription": "Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.-",
-    "colorsWarning": "Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs.-",
-    "exitConfirmationTitle": "Are you sure you want to exit?-",
-    "exitConfirmationDescription": "Your logo upload progress in this session will be lost-",
-    "maxByoFileErrorMessage": "Your file exceeds the maximum size of 25MB. Please choose a smaller file.-",
-    "genericByoErrorMessage": "An unexpected error occured. Please try again.-"
   }
 }

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue

@@ -4,13 +4,13 @@
       <HelloBar
         v-if="areColorsTooClose"
         label=""
-        :description="uploadYourLogoTr('colorsWarning')"
+        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
         variant="warning"
         class="tw-m-5 tw-mt-3"
       />
       <div class="tw-pb-8 tw-px-8 tw-text-center">
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          {{ stepCounter }}
+          Step {{ activeStep.number }} of {{ totalNumSteps }}
         </p>
         <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">
           {{ activeStep.title }}
@@ -80,7 +80,7 @@
     >
       <Button
         v-if="activeStep.index === 1"
-        :label="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -89,7 +89,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        :label="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -98,7 +98,7 @@
       />
       <Button
         v-if="activeStep.index === 1"
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -108,7 +108,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -126,7 +126,6 @@ import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -154,11 +153,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       currentStep: null,
@@ -177,8 +171,9 @@ export default {
           index: 1,
           number: this.totalNumSteps - 1,
           active: false,
-          title: uploadYourLogoTr('primaryTextColor'),
-          description: uploadYourLogoTr('primaryTextColorDescription'),
+          title: 'Primary text color',
+          description:
+            'Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.',
           colourData: this.logoData.logoImageDetails.textColors,
           colours: [],
         },
@@ -186,8 +181,9 @@ export default {
           index: 2,
           number: this.totalNumSteps,
           active: false,
-          title: uploadYourLogoTr('backgroundColor'),
-          description: uploadYourLogoTr('backgroundColorDescription'),
+          title: 'Background color',
+          description:
+            'Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.',
           colourData: this.logoData.logoImageDetails.backgroundColors,
           colours: [],
         },
@@ -206,12 +202,6 @@ export default {
         this.activeStep.index === 2 && hexDiff(selectedTextColour.hex, selectedBackgroundColour.hex) !== 'Different'
       );
     },
-    stepCounter() {
-      return this.uploadYourLogoTr('stepOf', {
-        current: this.activeStep.number,
-        total: this.totalNumSteps,
-      });
-    },
   },
   mounted() {
     const keys = Object.keys(this.steps);

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessText.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('businessName') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('businessNameDescription') }}</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Business Name</h2>
+        <p class="tw-mt-0">Enter your logo text or business name</p>
       </div>
 
       <div class="tw-pb-8 tw-px-8">
@@ -37,7 +37,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        :label="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -45,7 +45,7 @@
         @on-click="back"
       />
       <Button
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -57,9 +57,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -85,11 +84,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       businessText: null,

package/src/experiences/components/UploadYourLogoOnBoarding/LogoCropper.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('cropYourLogo') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('cropDescription') }}</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Crop your logo</h2>
+        <p class="tw-mt-0">Crop your logo design to fit our logo maker canvas</p>
       </div>
 
       <div class="c-byo-cropper__container lg:tw-pb-8 tw-mx-auto" :class="{ 'tw-opacity-0': !cropperToolReady }">
@@ -27,7 +27,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        :label="uploadYourLogoTr('cancel')"
+        label="Cancel"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -35,7 +35,7 @@
         @on-click="cancel"
       />
       <Button
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -51,7 +51,6 @@ import Button from '../../../../src/atoms/components/Button/Button.vue';
 import VueCropper from 'vue-cropperjs';
 
 import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -73,11 +72,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       cropperToolReady: false,

package/src/experiences/components/UploadYourLogoOnBoarding/LogoPreview.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('logoPreview') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('logoPreviewDescription') }}</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Logo preview</h2>
+        <p class="tw-mt-0">Your logo looks great! Help us setup your logo by completing the next steps.</p>
       </div>
 
       <div class="lg:tw-pb-8 lg:tw-px-8">
@@ -24,7 +24,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        :label="uploadYourLogoTr('cancel')"
+        label="Cancel"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -32,7 +32,7 @@
         @on-click="cancel"
       />
       <Button
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -44,9 +44,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -67,11 +66,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   methods: {
     cropImage() {
       if (!this.$refs.preview.complete) return;

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadError.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tw-w-full">
     <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">{{ uploadYourLogoTr('uploadError') }}</h2>
+      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">Upload Error</h2>
       <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
         {{ errorMessage }}
       </p>
@@ -11,7 +11,7 @@
       class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
     >
       <Button
-        :label="uploadYourLogoTr('cancel')"
+        label="Cancel"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -28,7 +28,7 @@
       />
 
       <Button
-        :label="uploadYourLogoTr('uploadYourLogoText')"
+        label="Upload your logo"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -39,8 +39,7 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 
 export default {
   components: {
@@ -53,11 +52,6 @@ export default {
       default: null,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   methods: {
     cancel() {
       this.$emit('on-cancel');

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadExitConfirmation.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="tw-w-full">
     <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('exitConfirmationTitle') }}</h2>
+      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Are you sure you want to exit?</h2>
       <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
-        {{ uploadYourLogoTr('exitConfirmationDescription') }}
+        Your logo upload progress in this session will be lost
       </p>
     </div>
 
@@ -11,7 +11,7 @@
       class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
     >
       <Button
-        :label="uploadYourLogoTr('no')"
+        label="No"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -19,7 +19,7 @@
         @on-click="goBack"
       />
       <Button
-        :label="uploadYourLogoTr('yes')"
+        label="Yes"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -31,18 +31,12 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 
 export default {
   components: {
     Button,
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   methods: {
     goBack() {
       this.$emit('on-go-back');

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
+  <LogoUploadingLoader loading-text="Uploading and converting your logo..." />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -7,7 +7,6 @@ import LogoUploadingLoader from './LogoUploadingLoader.vue';
 
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -24,11 +23,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       isRunning: false,

package/src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue

@@ -12,8 +12,8 @@
           <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
             {{ currentStepProgressLabel }}
           </p>
-          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('uploadYourLogoText') }}</h2>
-          <p class="tw-mt-0 tw-pb-8">{{ uploadYourLogoTr('disclaimerText') }}</p>
+          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Upload your logo</h2>
+          <p class="tw-mt-0 tw-pb-8">Please ensure you have the right to use any image you upload.</p>
           <UploadYourLogoDropzone :is-modal="true" @on-upload-success="onLogoFileChange"> </UploadYourLogoDropzone>
         </div>
 
@@ -70,7 +70,7 @@
           @on-logo-file-change="onLogoFileChange"
         />
 
-        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
+        <LogoUploadingLoader v-if="isCurrentlySaving" loading-text="Generating Designs..." />
 
         <LogoUploadExitConfirmation
           v-if="isAttemptingToExit && currentStep > 1"
@@ -85,7 +85,6 @@
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
 import Errors from '../../constants/error-constants';
 import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 import LogoUploadModal from './LogoUploadModal.vue';
 import UploadYourLogoDropzone from '../UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
@@ -128,11 +127,6 @@ export default {
       default: false,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       currentStep: this.useDropzone ? 0 : 1,
@@ -151,9 +145,9 @@ export default {
     currentStepProgressLabel() {
       if (this.includeDropzoneInModal) {
         const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
-        return this.uploadYourLogoTr('stepOf', { current: currentStepDisplay, total: 5 });
+        return `Step ${currentStepDisplay} of 5`;
       }
-      return this.uploadYourLogoTr('stepOf', { current: this.currentStep - 1, total: 4 });
+      return `Step ${this.currentStep - 1} of 4`;
     },
     hasError() {
       return !!this.errorMessage;
@@ -181,7 +175,7 @@ export default {
       handler() {
         if (this.logoFile) {
           this.errorMessage =
-            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? uploadYourLogoTr('maxByoFileErrorMessage') : null;
+            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? Errors.MAX_BYO_FILE_SIZE_EXCEEDED_MSG : null;
         }
       },
     },
@@ -197,7 +191,7 @@ export default {
       if (typeof err.response?.data?.errorMessage === 'string' && err.response?.data?.errorMessage !== '') {
         this.errorMessage = err.response.data.errorMessage;
       } else {
-        this.errorMessage = uploadYourLogoTr('genericByoErrorMessage');
+        this.errorMessage = Errors.GENERIC_BYO_ERROR;
       }
       this.currentStep = null;
     },

package/src/useSharedLibTranslate.js

@@ -35,6 +35,4 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
-const uploadYourLogoTr = (key, valuesToInterpolate = {}) => tr(`uploadYourLogo.${key}`, valuesToInterpolate);
-
-export { setLocaleAsync, tr, uploadYourLogoTr };
+export { setLocaleAsync, tr };

package/src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.json

@@ -1,30 +0,0 @@
-{
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Upload your logo-",
-    "disclaimerText": "Please ensure you have the right to use any image you upload.-",
-    "generatingDesigns": "Generating Designs...-",
-    "uploadingAndConverting": "Uploading and converting your logo...-",
-    "stepOf": "Step {{current}} of {{total}}-",
-    "uploadError": "Upload Error-",
-    "cancel": "Cancel-",
-    "continue": "Continue-",
-    "back": "Back-",
-    "no": "No-",
-    "yes": "Yes-",
-    "businessName": "Business Name-",
-    "businessNameDescription": "Enter your logo text or business name-",
-    "cropYourLogo": "Crop your logo-",
-    "cropDescription": "Crop your logo design to fit our logo maker canvas-",
-    "logoPreview": "Logo preview-",
-    "logoPreviewDescription": "Your logo looks great! Help us setup your logo by completing the next steps.-",
-    "primaryTextColor": "Primary text color-",
-    "primaryTextColorDescription": "Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.-",
-    "backgroundColor": "Background color-",
-    "backgroundColorDescription": "Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.-",
-    "colorsWarning": "Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs.-",
-    "exitConfirmationTitle": "Are you sure you want to exit?-",
-    "exitConfirmationDescription": "Your logo upload progress in this session will be lost-",
-    "maxByoFileErrorMessage": "Your file exceeds the maximum size of 25MB. Please choose a smaller file.-",
-    "genericByoErrorMessage": "An unexpected error occured. Please try again.-"
-  }
-}