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

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

@@ -5,6 +5,10 @@
   </span>
 </template>
 <script>
+
+import i18next from "i18next";
+import {setSharedLibLocaleAsync} from "../../../useSharedLibTranslate";
+
 export default {
   props: {
     amount: {
@@ -22,6 +26,11 @@ export default {
       required: false,
       default: null,
     },
+    locale: {
+      type: String,
+      required: false,
+      default: null,
+    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -48,6 +57,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    setSharedLibLocaleAsync();
+  },
   computed: {
     amountFormatted() {
       if (this.isDomainCredit) {
@@ -58,6 +70,20 @@ export default {
         return 'Free';
       }
 
+      if (this.locale != null)
+      {
+        let amount = i18next.t('{{val, currency}}', {
+          ns: 'fe-shared-lib',
+          val: this.amount,
+          currency: this.currency.iso4127Code,
+          locale: this.locale,
+          maximumFractionDigits: this.fraction,
+          useGrouping: false,
+        });
+
+        return this.standardiseAmount(amount);
+      }
+
       const parsedAmount = Number.parseFloat(this.amount);
 
       if (Number.isNaN(parsedAmount)) {
@@ -73,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) {
+      if (!this.amount || this.amount === 0 || this.locale) {
         return '';
       }
 
@@ -102,5 +128,33 @@ export default {
       return this.wrapInParentheses ? ')' : '';
     },
   },
+  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') {
+        amount = amount.replace('A$', 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;
+    }
+  },
 };
 </script>

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

@@ -48,37 +48,5 @@
     "searchBarLabel": "Suche",
     "searchBarPlaceholder": "Domainnamen suchen",
     "domainSearchOrConnectHeaderSubtitle": "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
-  },
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Laden Sie Ihr Logo hoch",
-    "disclaimerText": "Bitte stellen Sie sicher, dass Sie über die Nutzungsrechte für alle hochgeladenen Bilder verfügen.",
-    "generatingDesigns": "Designs werden erstellt ...",
-    "uploadingAndConverting": "Ihr Logo wird hochgeladen und konvertiert ...",
-    "stepOf": "Schritt {{CURRENT}} von {{TOTAL}}",
-    "uploadError": "Fehler beim Hochladen",
-    "cancel": "Abbrechen",
-    "continue": "Weiter",
-    "back": "Zurück",
-    "no": "Nein",
-    "yes": "Ja",
-    "businessName": "Name des Unternehmens",
-    "businessNameDescription": "Geben Sie Ihren Logotext oder Unternehmensnamen ein",
-    "cropYourLogo": "Schneiden Sie Ihr Logo zu",
-    "cropDescription": "Schneiden Sie Ihr Logo-Design so zu, dass es auf die Arbeitsfläche unseres Logo-Erstellers passt",
-    "logoPreview": "Logo-Vorschau",
-    "logoPreviewDescription": "Ihr Logo sieht großartig aus! Helfen Sie uns bei der Einrichtung Ihres Logos, indem Sie die nächsten Schritte ausführen.",
-    "primaryTextColor": "Primäre Textfarbe",
-    "primaryTextColorDescription": "Helfen Sie uns bei der Einrichtung Ihres Logos, indem Sie die primäre Textfarbe bestätigen. Wählen Sie aus den verfügbaren Farben oder klicken Sie auf das Plus-Symbol, um eine weitere Farbe hinzuzufügen.",
-    "backgroundColor": "Hintergrundfarbe",
-    "backgroundColorDescription": "Helfen Sie uns bei der Einrichtung Ihres Logos, indem Sie die Hintergrundfarbe bestätigen. Wählen Sie aus den verfügbaren Farben oder klicken Sie auf das Plus-Symbol, um eine weitere Farbe hinzuzufügen.",
-    "colorsWarning": "Ihre Text- und Hintergrundfarben sind zu ähnlich. Bitte wählen Sie eine deutlichere Paarung, um sicherzustellen, dass sie hochwertige Designs erstellen.",
-    "exitConfirmationTitle": "Möchten Sie die Anwendung wirklich verlassen?",
-    "exitConfirmationDescription": "Der Fortschritt Ihres Logo-Uploads in dieser Sitzung geht verloren",
-    "maxByoFileErrorMessage": "Ihre Datei überschreitet die maximale Größe von 25 MB. Bitte wählen Sie eine kleinere Datei.",
-    "genericByoErrorMessage": "Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es erneut.",
-    "dropYourFileHere": "Legen Sie Ihre Datei hier ab oder",
-    "clickToUpload": "klicken Sie hier, um eine Datei hochzuladen.",
-    "acceptedFiles": "Wir akzeptieren PNG-, JPG-, SVG- und EPS-Dateien bis zu 25 MB.",
-    "wrongUploadType": "Sie können Dateien dieses Typs nicht hochladen."
   }
 }

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

@@ -48,37 +48,5 @@
     "searchBarLabel": "Buscar",
     "searchBarPlaceholder": "Busca nombres de dominio",
     "domainSearchOrConnectHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
-  },
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Sube tu logo",
-    "disclaimerText": "Asegúrate de que tienes derecho a usar cualquier imagen que subas.",
-    "generatingDesigns": "Generando diseños...",
-    "uploadingAndConverting": "Subiendo y convirtiendo tu logo...",
-    "stepOf": "Paso {{CURRENT}} de {{TOTAL}}",
-    "uploadError": "Error de carga",
-    "cancel": "Cancelar",
-    "continue": "Continuar",
-    "back": "Volver",
-    "no": "No",
-    "yes": "Sí",
-    "businessName": "Nombre del negocio",
-    "businessNameDescription": "Introduce el texto de tu logo o el nombre de tu negocio",
-    "cropYourLogo": "Recorta tu logo",
-    "cropDescription": "Recorta tu diseño de logo para que encaje en nuestro lienzo del creador de logos",
-    "logoPreview": "Vista previa del logo",
-    "logoPreviewDescription": "¡Tu logo tiene un aspecto genial! Ayúdanos a configurar tu logo completando los siguientes pasos.",
-    "primaryTextColor": "Color principal del texto",
-    "primaryTextColorDescription": "Ayúdanos a configurar tu logo confirmando el color principal del texto. Elige entre los colores disponibles o haz clic en el icono de más (+) para añadir otro.",
-    "backgroundColor": "Color de fondo",
-    "backgroundColorDescription": "Ayúdanos a configurar tu logo confirmando el color de fondo. Elige entre los colores disponibles o haz clic en el icono de más (+) para añadir otro.",
-    "colorsWarning": "Los colores del texto y del fondo son demasiado similares. Elige una combinación más diferente para conseguir crear diseños de calidad.",
-    "exitConfirmationTitle": "¿Estás seguro de que quieres salir?",
-    "exitConfirmationDescription": "El progreso de carga de tu logo en esta sesión se perderá.",
-    "maxByoFileErrorMessage": "Tu archivo supera el tamaño máximo de 25 MB. Elige un archivo más pequeño.",
-    "genericByoErrorMessage": "Se ha producido un error inesperado. Inténtalo de nuevo.",
-    "dropYourFileHere": "Suelta el archivo aquí o",
-    "clickToUpload": "haz clic para subirlo",
-    "acceptedFiles": "Aceptamos archivos PNG, JPG, SVG o EPS de hasta 25 MB",
-    "wrongUploadType": "No puedes subir archivos de este tipo."
   }
 }

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

@@ -48,37 +48,5 @@
     "searchBarLabel": "Rechercher",
     "searchBarPlaceholder": "Rechercher des noms de domaine",
     "domainSearchOrConnectHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
-  },
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Téléchargez votre logo",
-    "disclaimerText": "Veuillez vous assurer que vous avez le droit d'utiliser toute image que vous téléchargez.",
-    "generatingDesigns": "Génération de designs...",
-    "uploadingAndConverting": "Téléchargement et conversion de votre logo...",
-    "stepOf": "Étape {{CURRENT}} sur {{TOTAL}}",
-    "uploadError": "Erreur de téléchargement",
-    "cancel": "Annuler",
-    "continue": "Continuer",
-    "back": "Retour",
-    "no": "Non",
-    "yes": "Oui",
-    "businessName": "Nom de l’entreprise",
-    "businessNameDescription": "Saisissez le texte de votre logo ou le nom de votre entreprise",
-    "cropYourLogo": "Recadrez votre logo",
-    "cropDescription": "Recadrez votre logo pour qu'il s'adapte au canevas de notre outil de création de logos",
-    "logoPreview": "Aperçu du logo",
-    "logoPreviewDescription": "Votre logo est magnifique ! Aidez-nous à configurer votre logo en suivant les étapes suivantes.",
-    "primaryTextColor": "Couleur principale du texte",
-    "primaryTextColorDescription": "Aidez-nous à configurer votre logo en confirmant la couleur principale du texte. Choisissez parmi les couleurs disponibles ou cliquez sur l'icône plus pour en ajouter une autre.",
-    "backgroundColor": "Couleur d’arrière-plan",
-    "backgroundColorDescription": "Aidez-nous à configurer votre logo en confirmant la couleur d'arrière-plan. Choisissez parmi les couleurs disponibles ou cliquez sur l'icône plus pour en ajouter une autre.",
-    "colorsWarning": "Les couleurs de votre texte et de votre arrière-plan sont trop semblables. Veuillez choisir une combinaison plus distincte pour garantir un design de qualité.",
-    "exitConfirmationTitle": "Voulez-vous vraiment quitter ?",
-    "exitConfirmationDescription": "La progression du téléchargement de votre logo au cours de cette session sera perdue",
-    "maxByoFileErrorMessage": "Votre fichier dépasse la taille maximale de 25 Mo. Veuillez choisir un fichier plus petit.",
-    "genericByoErrorMessage": "Une erreur inattendue s'est produite. Veuillez réessayer.",
-    "dropYourFileHere": "Déposez votre fichier ici ou",
-    "clickToUpload": "cliquez pour télécharger",
-    "acceptedFiles": "Nous acceptons les fichiers PNG, JPG, SVG ou EPS jusqu'à 25 Mo",
-    "wrongUploadType": "Vous ne pouvez pas télécharger des fichiers de ce type."
   }
 }

package/src/bundles/bundled-translations.json

@@ -48,37 +48,5 @@
     "searchBarLabel": "Search",
     "searchBarPlaceholder": "Search domain names",
     "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
-  },
-  "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.",
-    "dropYourFileHere": "Drop your file here or",
-    "clickToUpload": "click to upload",
-    "acceptedFiles": "We accept PNG, JPG, SVG or EPS files up to 25MB",
-    "wrongUploadType": "You can't upload files of this type."
   }
 }

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

@@ -48,37 +48,5 @@
     "searchBarLabel": "Pesquisar",
     "searchBarPlaceholder": "Pesquisar nomes de domínio",
     "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
-  },
-  "uploadYourLogo": {
-    "uploadYourLogoText": "Carregue o seu logótipo",
-    "disclaimerText": "Certifique-se de que tem os direitos de utilização de todas as imagens que carregar.",
-    "generatingDesigns": "A gerar designs…",
-    "uploadingAndConverting": "A carregar e a converter o seu logótipo…",
-    "stepOf": "Passo {{CURRENT}} de {{TOTAL}}",
-    "uploadError": "Erro ao carregar",
-    "cancel": "Cancelar",
-    "continue": "Continuar",
-    "back": "Voltar",
-    "no": "Não",
-    "yes": "Sim",
-    "businessName": "Nome da empresa",
-    "businessNameDescription": "Introduza o texto do seu logótipo ou o nome da sua empresa",
-    "cropYourLogo": "Recorte o seu logótipo",
-    "cropDescription": "Recorte o design de logótipo para caber no ecrã do criador de logótipos",
-    "logoPreview": "Pré-visualização do logótipo",
-    "logoPreviewDescription": "O seu logótipo está com um ótimo aspeto! Ajude-nos a configurar o seu logótipo concluindo os próximos passos.",
-    "primaryTextColor": "Cor principal do texto",
-    "primaryTextColorDescription": "Ajude-nos a configurar o seu logótipo confirmando a cor principal do texto. Escolha entre as cores disponíveis ou clique no ícone de mais para adicionar outra.",
-    "backgroundColor": "Cor de fundo",
-    "backgroundColorDescription": "Ajude-nos a configurar o seu logótipo confirmando a cor do fundo. Escolha entre as cores disponíveis ou clique no ícone de mais para adicionar outra.",
-    "colorsWarning": "As suas cores de texto e de fundo são demasiado semelhantes. Escolha uma combinação mais distinta para garantir que criamos designs de qualidade.",
-    "exitConfirmationTitle": "Tem a certeza de que pretende sair?",
-    "exitConfirmationDescription": "O progresso do carregamento do seu logótipo nesta sessão será perdido",
-    "maxByoFileErrorMessage": "O seu ficheiro excede o tamanho máximo de 25 MB. Escolha um ficheiro mais pequeno.",
-    "genericByoErrorMessage": "Ocorreu um erro inesperado. Tente novamente.",
-    "dropYourFileHere": "Arraste o seu ficheiro aqui ou",
-    "clickToUpload": "clique para carregar",
-    "acceptedFiles": "Aceitamos ficheiros PNG, JPG, SVG ou EPS até 25 MB",
-    "wrongUploadType": "Não pode carregar ficheiros deste tipo."
   }
 }

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue

@@ -56,13 +56,9 @@
         <p
           v-if="!isModal"
           class="tw-font-bold tw-text-black tw-text-lg"
-          :class="{
-            'tw-mb-2': !shouldUseCompactLayout,
-            'md:tw-text-sm md:tw-mb-0': smallLayout,
-            'tw-text-sm tw-mb-0': shouldUseCompactLayout,
-          }"
+          :class="{ 'tw-mb-2': !shouldUseCompactLayout, 'md:tw-text-sm md:tw-mb-0': smallLayout, 'tw-text-sm tw-mb-0': shouldUseCompactLayout }"
         >
-          {{ uploadYourLogoTr('uploadYourLogoText') }}
+          Upload your logo
         </p>
 
         <p
@@ -70,11 +66,11 @@
           :class="{
             'tw-mb-0': !isDesignCom,
             'tw-mb-3': isDesignCom,
-            'md:tw-hidden': shouldUseCompactLayout,
+            'md:tw-hidden': shouldUseCompactLayout
           }"
         >
-          {{ uploadYourLogoTr('dropYourFileHere') }}
-          <span class="tw-text-info-500">{{ uploadYourLogoTr('clickToUpload') }}</span>
+          Drop your file here or
+          <span class="tw-text-info-500">click to upload</span>
         </p>
 
         <p
@@ -85,7 +81,7 @@
             'tw-text-secondary-400': isDesignCom,
           }"
         >
-          {{ uploadYourLogoTr('acceptedFiles') }}
+          We accept PNG, JPG, SVG or EPS files up to 25MB
         </p>
       </div>
     </div>
@@ -96,12 +92,11 @@
 import Dropzone from 'dropzone-vue3';
 import Events, { TRIGGER_TYPE } from '../../constants/event-constants';
 import RegoSource from '../../constants/rego-source-constants';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 const ACCEPTED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml', 'application/postscript'];
 
 const ACCEPTED_FILE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'eps'];
-const UNSUPPORTED_FILE_ERROR_MSG = () => uploadYourLogoTr(`wrongUploadType`);
+const UNSUPPORTED_FILE_ERROR_MSG = "You can't upload files of this type.";
 
 export default {
   components: {
@@ -156,11 +151,6 @@ export default {
       default: null,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     const self = this;
 
@@ -175,7 +165,7 @@ export default {
           const extension = file.name.split('.').pop().toLowerCase();
 
           if (ACCEPTED_FILE_EXTENSIONS.indexOf(extension) < 0) {
-            self.displayError(UNSUPPORTED_FILE_ERROR_MSG());
+            self.displayError(UNSUPPORTED_FILE_ERROR_MSG);
             return;
           }
 

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,