@designcrowd/fe-shared-lib 1.2.16 → 1.2.17-ast-upsell-1

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

@@ -4,13 +4,13 @@
       <HelloBar
         v-if="areColorsTooClose"
         label=""
-        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
+        :description="uploadYourLogoTr('colorsWarning')"
         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">
-          Step {{ activeStep.number }} of {{ totalNumSteps }}
+          {{ stepCounter }}
         </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="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -89,7 +89,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        label="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -98,7 +98,7 @@
       />
       <Button
         v-if="activeStep.index === 1"
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -108,7 +108,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -126,6 +126,7 @@ 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: {
@@ -153,6 +154,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       currentStep: null,
@@ -171,9 +177,8 @@ export default {
           index: 1,
           number: this.totalNumSteps - 1,
           active: false,
-          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.',
+          title: uploadYourLogoTr('primaryTextColor'),
+          description: uploadYourLogoTr('primaryTextColorDescription'),
           colourData: this.logoData.logoImageDetails.textColors,
           colours: [],
         },
@@ -181,9 +186,8 @@ export default {
           index: 2,
           number: this.totalNumSteps,
           active: false,
-          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.',
+          title: uploadYourLogoTr('backgroundColor'),
+          description: uploadYourLogoTr('backgroundColorDescription'),
           colourData: this.logoData.logoImageDetails.backgroundColors,
           colours: [],
         },
@@ -202,6 +206,12 @@ 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">Business Name</h2>
-        <p class="tw-mt-0">Enter your logo text or business name</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>
       </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="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -45,7 +45,7 @@
         @on-click="back"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -57,8 +57,9 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -84,6 +85,11 @@ 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">Crop your logo</h2>
-        <p class="tw-mt-0">Crop your logo design to fit our logo maker canvas</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>
       </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="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -35,7 +35,7 @@
         @on-click="cancel"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -51,6 +51,7 @@ 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: {
@@ -72,6 +73,11 @@ 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">Logo preview</h2>
-        <p class="tw-mt-0">Your logo looks great! Help us setup your logo by completing the next steps.</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>
       </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="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -32,7 +32,7 @@
         @on-click="cancel"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -44,8 +44,9 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -66,6 +67,11 @@ 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">Upload Error</h2>
+      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">{{ uploadYourLogoTr('uploadError') }}</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="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -28,7 +28,7 @@
       />
 
       <Button
-        label="Upload your logo"
+        :label="uploadYourLogoTr('uploadYourLogoText')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -39,7 +39,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -52,6 +53,11 @@ 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">Are you sure you want to exit?</h2>
+      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('exitConfirmationTitle') }}</h2>
       <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
-        Your logo upload progress in this session will be lost
+        {{ uploadYourLogoTr('exitConfirmationDescription') }}
       </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="No"
+        :label="uploadYourLogoTr('no')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -19,7 +19,7 @@
         @on-click="goBack"
       />
       <Button
-        label="Yes"
+        :label="uploadYourLogoTr('yes')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -31,12 +31,18 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 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="Uploading and converting your logo..." />
+  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -7,6 +7,7 @@ import LogoUploadingLoader from './LogoUploadingLoader.vue';
 
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -23,6 +24,11 @@ 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">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>
+          <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>
           <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="Generating Designs..." />
+        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
 
         <LogoUploadExitConfirmation
           v-if="isAttemptingToExit && currentStep > 1"
@@ -85,6 +85,7 @@
 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';
@@ -127,6 +128,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       currentStep: this.useDropzone ? 0 : 1,
@@ -145,9 +151,9 @@ export default {
     currentStepProgressLabel() {
       if (this.includeDropzoneInModal) {
         const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
-        return `Step ${currentStepDisplay} of 5`;
+        return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: 5 });
       }
-      return `Step ${this.currentStep - 1} of 4`;
+      return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: 4 });
     },
     hasError() {
       return !!this.errorMessage;
@@ -175,7 +181,7 @@ export default {
       handler() {
         if (this.logoFile) {
           this.errorMessage =
-            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? Errors.MAX_BYO_FILE_SIZE_EXCEEDED_MSG : null;
+            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? uploadYourLogoTr('maxByoFileErrorMessage') : null;
         }
       },
     },
@@ -191,7 +197,7 @@ export default {
       if (typeof err.response?.data?.errorMessage === 'string' && err.response?.data?.errorMessage !== '') {
         this.errorMessage = err.response.data.errorMessage;
       } else {
-        this.errorMessage = Errors.GENERIC_BYO_ERROR;
+        this.errorMessage = uploadYourLogoTr('genericByoErrorMessage');
       }
       this.currentStep = null;
     },

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

@@ -0,0 +1,34 @@
+{
+  "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/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.es-ES.json

@@ -0,0 +1,34 @@
+{
+  "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/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.fr-FR.json

@@ -0,0 +1,34 @@
+{
+  "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/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.json

@@ -0,0 +1,35 @@
+{
+  "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/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.pt-PT.json

@@ -0,0 +1,34 @@
+{
+  "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/useSharedLibTranslate.js

@@ -37,6 +37,8 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
+const uploadYourLogoTr = (key, valuesToInterpolate = {}) => tr(`uploadYourLogo.${key}`, valuesToInterpolate);
+
 const publishBrandPageModalTr = (key, valuesToInterpolate = {}) =>
   tr(`publishBrandPageModal.${key}`, valuesToInterpolate);
 
@@ -61,6 +63,8 @@ const sharedPaymentConfigTr = (key, valuesToInterpolate = {}) => tr(`sharedPayme
 
 const priceTr = (key, valuesToInterpolate = {}) => tr(`price.${key}`, valuesToInterpolate);
 
+const upsellModalComponentsTr = (key, valuesToInterpolate = {}) => tr(`upsellModalComponents.${key}`, valuesToInterpolate);
+
 const getCurrentLocale = () => {
   return i18next.language || 'en-US';
 };
@@ -76,6 +80,8 @@ export {
   sellDomainNameModalApplicationTr,
   sellDomainNameListModalTr,
   sellDomainNameListTr,
+  uploadYourLogoTr,
   sharedPaymentConfigTr,
   priceTr,
+  upsellModalComponentsTr,
 };