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

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

@@ -96,7 +96,9 @@
     "dropYourFileHere": "Arraste o seu ficheiro aqui ou",
     "clickToUpload": "clique para carregar",
     "acceptedFiles": "Aceitamos arquivos PNG, JPG, SVG ou EPS de até 25 MB",
-    "wrongUploadType": "Você não pode baixar arquivos deste tipo."
+    "wrongUploadType": "Você não pode baixar arquivos deste tipo.",
+    "keywords": "Palavras-chave",
+    "keywordsDescription": "Adicione palavras-chave associadas à sua empresa e logotipo"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Substituir",

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

@@ -96,7 +96,9 @@
     "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."
+    "wrongUploadType": "Não pode carregar ficheiros deste tipo.",
+    "keywords": "Palavras-chave",
+    "keywordsDescription": "Adicione palavras-chave relacionadas com a sua empresa e logótipo"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Substituir",

package/src/experiences/clients/brand-crowd-api.client.js

@@ -116,9 +116,27 @@ const searchDomainNamesByKeywordAsync = async ({
   }
 };
 
+const getKeywordSuggestionsAsync = async ({ businessName, templateType, antiForgeryToken }) => {
+  try {
+    const response = await getAxios()({
+      method: 'post',
+      url: API.KEYWORD_SUGGESTIONS_API_URL,
+      data: { businessName, templateType },
+      headers: {
+        RequestVerificationToken: antiForgeryToken,
+        'Accept-Language': getCurrentLocale(),
+      },
+    });
+    return response.data;
+  } catch (error) {
+    return false;
+  }
+};
+
 export default {
   setBrandCrowdApiClientAxios,
   uploadLogoAndGetDetails,
   createUserLogo,
   searchDomainNamesByKeywordAsync,
+  getKeywordSuggestionsAsync,
 };

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.stories.js

@@ -134,6 +134,55 @@ export const SuccessSvg = () => {
   };
 };
 
+export const SuccessWithKeywords = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY, onNoMatch: 'passthrough' });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  mock.onGet(new RegExp(API.KEYWORD_SUGGESTIONS_API_URL)).reply(200, {
+    keywords: ['professional', 'modern'],
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication
+          :use-dropzone="true"
+          :show-keywords-step="true"
+          template-type="business card"
+          @on-save-keywords="onSaveKeywords"
+          @on-finish="onFinish"
+        />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onSaveKeywords(e) {
+        console.log('on-save-keywords', e);
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
 export const FailOnUpload = () => {
   const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
   mock

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue

@@ -7,6 +7,10 @@
       :use-dropzone="useDropzone"
       :is-post-purchase-user-upload="isPostPurchaseUserUpload"
       :is-ai-powered="isAiPowered"
+      :show-keywords-step="showKeywordsStep"
+      :template-type="templateType"
+      :anti-forgery-token="antiForgeryToken"
+      :refresh-anti-forgery-token="refreshAntiForgeryToken"
       @on-exit="onExit"
       @on-upload-error="onUploadError"
       @on-file-change="onFileChange"
@@ -16,6 +20,7 @@
       @on-brand-colors-save="onBrandColorsSave"
       @on-back="onBack"
       @on-logo-upload-success="onLogoUploadSuccess"
+      @on-save-keywords="onSaveKeywords"
     />
   </div>
 </template>
@@ -44,6 +49,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,
+    },
   },
   data() {
     return {
@@ -130,6 +155,9 @@ export default {
     onLogoUploadSuccess() {
       this.$emit('on-logo-upload-success');
     },
+    onSaveKeywords(payload) {
+      this.$emit('on-save-keywords', payload);
+    },
   },
 };
 </script>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.stories.js

@@ -0,0 +1,65 @@
+import LogoKeywords from './LogoKeywords.vue';
+
+export default {
+  title: 'Components/LogoKeywords',
+  component: LogoKeywords,
+};
+
+export const Loading = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};
+
+export const Populated = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords="modern, professional, creative, bold"
+          business-name="My Business"
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};
+
+export const Empty = () => {
+  return {
+    components: {
+      LogoKeywords,
+    },
+    template: `
+      <div style="max-width: 500px;">
+        <LogoKeywords
+          progress-label="Step 3 of 5"
+          event-category="BYO-PrePurchase"
+          saved-keywords=""
+          business-name=""
+          template-type="business card"
+          anti-forgery-token="mock-anti-forgery-token"
+        />
+      </div>
+    `,
+  };
+};

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"
   }
 }