@designcrowd/fe-shared-lib 1.6.1 → 1.6.3-eng-4039-freemode

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="tw-w-full tw-flex tw-flex-col tw-h-full lg:tw-h-auto">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0">
+      <div class="tw-pb-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('keywords') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('keywordsDescription') }}</p>
+      </div>
+
+      <div class="tw-pb-8 tw-px-8">
+        <div class="tw-relative">
+          <input
+            v-model="keywordsText"
+            :disabled="isLoading"
+            class="tw-w-full tw-py-3.5 tw-px-4 tw-rounded tw-box-border tw-border tw-border-solid tw-border-grayscale-500 tw-text-grayscale-600"
+            @keyup="onKeywordsKeyUp"
+          />
+          <div
+            v-if="isLoading"
+            class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-bg-white/50 tw-rounded"
+          >
+            <div class="tw-animate-spin tw-h-5 tw-w-5 tw-border-2 tw-border-grayscale-500 tw-border-t-transparent tw-rounded-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      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')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-back-btn
+        @on-click="back"
+      />
+      <Button
+        :label="uploadYourLogoTr('continue')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        :disabled="isLoading"
+        @on-click="save"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import brandCrowdClient from '../../clients/brand-crowd-api.client';
+import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    progressLabel: {
+      type: String,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+    savedKeywords: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    businessName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    templateType: {
+      type: String,
+      required: true,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: true,
+    },
+    refreshAntiForgeryToken: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  data() {
+    return {
+      keywordsText: '',
+      isLoading: false,
+    };
+  },
+  async mounted() {
+    if (this.savedKeywords !== null) {
+      this.keywordsText = this.savedKeywords;
+      return;
+    }
+    if (!this.businessName) {
+      return;
+    }
+    this.isLoading = true;
+    try {
+      const token = this.refreshAntiForgeryToken ? await this.refreshAntiForgeryToken() : this.antiForgeryToken;
+      const result = await brandCrowdClient.getKeywordSuggestionsAsync({
+        businessName: this.businessName,
+        templateType: this.templateType,
+        antiForgeryToken: token,
+      });
+      if (result && result.keywords && result.keywords.length > 0) {
+        this.keywordsText = result.keywords.join(', ');
+      }
+    } finally {
+      this.isLoading = false;
+    }
+  },
+  methods: {
+    back() {
+      this.$emit('on-go-back');
+    },
+    save() {
+      if (this.isLoading) return;
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'keywords',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+
+      this.$emit('on-save', {
+        keywords: this.keywordsText,
+      });
+    },
+    onKeywordsKeyUp(e) {
+      if (e.key === 'Enter' && !this.isLoading) {
+        this.save();
+      }
+    },
+  },
+};
+</script>

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

@@ -55,13 +55,26 @@
           @on-save="onSaveBusinessText"
         />
 
+        <LogoKeywords
+          v-if="showKeywordsStep && !isAttemptingToExit && currentStep === 4 && uploadedLogoData"
+          :progress-label="currentStepProgressLabel"
+          :event-category="eventCategory"
+          :saved-keywords="savedKeywords"
+          :business-name="(savedBusinessText && savedBusinessText.businessText) || ''"
+          :template-type="templateType"
+          :anti-forgery-token="antiForgeryToken"
+          :refresh-anti-forgery-token="refreshAntiForgeryToken"
+          @on-go-back="onGoBackToBusinessText"
+          @on-save="onSaveKeywords"
+        />
+
         <LogoBusinessBrandColours
-          v-if="!isAttemptingToExit && currentStep === 4 && uploadedLogoData && !isCurrentlySaving"
+          v-if="!isAttemptingToExit && currentStep === brandColoursStep && uploadedLogoData && !isCurrentlySaving"
           :logo-data="uploadedLogoData"
           :cropped-logo-image="croppedImageBoxDataUrl"
           :total-num-steps="totalNumSteps"
           :event-category="eventCategory"
-          @on-go-back="onGoBackToBusinessText"
+          @on-go-back="onGoBackFromBrandColours"
           @on-save="onBrandColoursSave"
         />
 
@@ -102,6 +115,7 @@ import LogoCropper from './LogoCropper.vue';
 import LogoPreview from './LogoPreview.vue';
 import LogoBusinessText from './LogoBusinessText.vue';
 import LogoBusinessBrandColours from './LogoBusinessBrandColours.vue';
+import LogoKeywords from './LogoKeywords.vue';
 import LogoUploadingLoader from './LogoUploadingLoader.vue';
 
 export default {
@@ -115,6 +129,7 @@ export default {
     LogoPreview,
     LogoBusinessText,
     LogoBusinessBrandColours,
+    LogoKeywords,
     LogoUploadingLoader,
   },
   props: {
@@ -142,6 +157,26 @@ export default {
       type: Boolean,
       default: false,
     },
+    showKeywordsStep: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    templateType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    antiForgeryToken: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    refreshAntiForgeryToken: {
+      type: Function,
+      required: false,
+      default: null,
+    },
   },
   setup() {
     return {
@@ -152,12 +187,13 @@ export default {
     return {
       currentStep: this.useDropzone ? 0 : 1,
       includeDropzoneInModal: this.useDropzone,
-      totalNumSteps: this.useDropzone ? 5 : 4,
+      totalNumSteps: 4 + (this.useDropzone ? 1 : 0) + (this.showKeywordsStep ? 1 : 0),
       errorMessage: null,
       isAttemptingToExit: false,
       uploadedLogoData: null,
       croppedImageBoxBounds: null,
       savedBusinessText: null,
+      savedKeywords: null,
       brandColourData: null,
       isCurrentlySaving: false,
     };
@@ -166,9 +202,9 @@ export default {
     currentStepProgressLabel() {
       if (this.includeDropzoneInModal) {
         const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
-        return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: 5 });
+        return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: this.totalNumSteps });
       }
-      return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: 4 });
+      return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: this.totalNumSteps });
     },
     hasError() {
       return !!this.errorMessage;
@@ -178,11 +214,17 @@ export default {
     },
     currentStepTrackingLabel() {
       const stepTwoLabel = this.currentStep === 2 && !this.canCropImage ? 'previewLogo' : 'cropLogo';
-
-      const steps = ['logoUploader', stepTwoLabel, 'businessName', 'brandColors'];
-
+      const steps = this.showKeywordsStep
+        ? ['logoUploader', stepTwoLabel, 'businessName', 'keywords', 'brandColors']
+        : ['logoUploader', stepTwoLabel, 'businessName', 'brandColors'];
       return steps[this.currentStep - 1];
     },
+    keywordsStep() {
+      return 4;
+    },
+    brandColoursStep() {
+      return this.showKeywordsStep ? 5 : 4;
+    },
     eventCategory() {
       if (this.isPostPurchaseUserUpload) {
         return 'BYO-PostPurchase';
@@ -257,10 +299,19 @@ export default {
       this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
       this.currentStep = 3;
     },
+    onSaveKeywords(payload) {
+      this.$emit('on-save-keywords', { keywords: payload.keywords });
+      this.savedKeywords = payload.keywords;
+      this.currentStep = this.brandColoursStep;
+    },
+    onGoBackFromBrandColours() {
+      this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
+      this.currentStep = this.showKeywordsStep ? this.keywordsStep : 3;
+    },
     onSaveBusinessText(payload) {
       this.$emit('on-save-business-text', { businessText: payload.businessText });
       this.savedBusinessText = payload;
-      this.currentStep = 4;
+      this.currentStep = this.showKeywordsStep ? this.keywordsStep : this.brandColoursStep;
     },
     onBrandColoursSave(payload) {
       this.$emit('on-brand-colors-save', {
@@ -304,6 +355,7 @@ export default {
       this.uploadedLogoData = null;
       this.croppedImageBoxBounds = null;
       this.savedBusinessText = null;
+      this.savedKeywords = null;
       this.brandColourData = null;
     },
   },

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

@@ -1,34 +1,37 @@
 {
-  "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 zum Hochladen",
-    "acceptedFiles" : "Wir akzeptieren PNG-, JPG-, SVG- und EPS-Dateien bis zu 25 MB.",
-    "wrongUploadType" : "Sie können Dateien dieses Typs nicht hochladen."
+  "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 zum Hochladen",
+    "acceptedFiles": "Wir akzeptieren PNG-, JPG-, SVG- und EPS-Dateien bis zu 25 MB.",
+    "wrongUploadType": "Sie können Dateien dieses Typs nicht hochladen.",
+    "keywords": "Schlüsselwörter",
+    "keywordsDescription": "Fügen Sie Schlüsselwörter hinzu, die relevant für Ihr Unternehmen und Ihr Logo sind"
   }
 }

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

@@ -1,34 +1,37 @@
 {
-  "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."
+  "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.",
+    "keywords": "Palabras clave",
+    "keywordsDescription": "Añade palabras clave relacionadas con tu negocio y logo"
   }
 }

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

@@ -1,34 +1,37 @@
 {
-  "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."
+  "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.",
+    "keywords": "Mots-clés",
+    "keywordsDescription": "Ajoutez des mots-clés liés à votre entreprise et à votre logo."
   }
 }

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

@@ -1,34 +1,37 @@
 {
-  "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."
+  "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.",
+    "keywords": "Mots-clés",
+    "keywordsDescription": "Ajoutez des mots-clés liés à votre entreprise et à votre logo"
   }
 }

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

@@ -30,6 +30,8 @@
     "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."
+    "wrongUploadType": "You can't upload files of this type.",
+    "keywords": "Keywords",
+    "keywordsDescription": "Add keywords related to your business and logo"
   }
 }