@designcrowd/fe-shared-lib 1.5.34 → 1.5.36

package/src/atoms/components/Icon/Icon.vue

@@ -138,6 +138,7 @@ import IconHamburger2 from './icons/hamburger-2.vue';
 import IconHamburger3 from './icons/hamburger-3.vue';
 import IconHamburger4 from './icons/hamburger-4.vue';
 import IconHamburger from './icons/hamburger.vue';
+import IconHistory from './icons/history.vue';
 import IconHome from './icons/home.vue';
 import IconImageGalleryCarousel from './icons/image-gallery-carousel.vue';
 import IconImageGalleryGrid from './icons/image-gallery-grid.vue';
@@ -264,6 +265,7 @@ import IconReload from './icons/reload.vue';
 import IconReorderable from './icons/reorderable.vue';
 import IconRequestPayment from './icons/request-payment.vue';
 import IconResize from './icons/resize.vue';
+import IconSave from './icons/save.vue';
 import IconSearch from './icons/search.vue';
 import IconSecure from './icons/secure.vue';
 import IconSend from './icons/send.vue';
@@ -580,6 +582,7 @@ export default {
     IconFooterCentered,
     IconFooterLeft,
 
+    IconHistory,
     IconHome,
     IconHomeOutline,
     IconHomeCrazyDomains,
@@ -664,6 +667,7 @@ export default {
     IconRequestPayment,
     IconShieldTick,
     IconShop,
+    IconSave,
     IconSearch,
     IconSecure,
     IconSend,

package/src/atoms/components/Icon/icons/history.vue

@@ -0,0 +1,12 @@
+<template>
+  <g fill="none" transform="translate(0.25, 1.5) scale(1.1)">
+    <path d="M0.500244 3.85742L1.50022 6.35742" stroke="currentColor" stroke-linecap="round" />
+    <path d="M1.50031 6.3574L4.00037 5.35742" stroke="currentColor" stroke-linecap="round" />
+    <path
+      d="M7.46411 0C10.9158 0 13.7139 2.79836 13.7141 6.25C13.7141 9.70178 10.9159 12.5 7.46411 12.5C5.66342 12.4999 4.04145 11.7379 2.9014 10.5192C2.46116 10.0485 2.84585 9.35742 3.4903 9.35742C3.73353 9.35742 3.96191 9.46606 4.13532 9.63662C4.9923 10.4795 6.16711 10.9999 7.46411 11C10.0875 11 12.2141 8.87335 12.2141 6.25C12.2139 3.62679 10.0874 1.5 7.46411 1.5C4.84108 1.50026 2.71428 3.62695 2.71411 6.25C2.71411 6.30896 2.66854 6.35742 2.60957 6.35742H1.32451C1.26487 6.35742 1.21411 6.30964 1.21411 6.25C1.21428 2.79852 4.01266 0.000262284 7.46411 0Z"
+      fill="currentColor"
+    />
+    <path d="M7.00024 4.35742V6.85742" stroke="currentColor" stroke-linecap="round" />
+    <line x1="7.00024" y1="6.85742" x2="9.00024" y2="6.85742" stroke="currentColor" stroke-linecap="round" />
+  </g>
+</template>

package/src/atoms/components/Icon/icons/save.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M9.32715 8.01665C9.32689 8.01352 9.32545 8.01066 9.3252 8.00786C9.32271 8.00764 9.32012 8.00711 9.31738 8.00689C9.23966 8.00054 9.13128 8.00005 8.93359 8.00005H4.40039C4.20271 8.00005 4.09433 8.00054 4.0166 8.00689C4.0135 8.00714 4.01058 8.00761 4.00781 8.00786C4.00756 8.01063 4.00709 8.01355 4.00684 8.01665C4.00049 8.09437 4 8.20276 4 8.40044V12H9.33398V8.40044C9.33398 8.20276 9.3335 8.09437 9.32715 8.01665ZM0 3.86724C0 3.31819 0.000292534 2.86602 0.0302734 2.49907C0.0608946 2.12439 0.126173 1.77963 0.291016 1.4561C0.546643 0.954538 0.954488 0.546693 1.45605 0.291066C1.77958 0.126223 2.12434 0.0609446 2.49902 0.0303234C2.7322 0.0112719 2.99977 0.00535884 3.30469 0.00297968C3.31432 0.00256653 3.32425 4.99914e-05 3.33398 4.99914e-05C3.34251 5.40638e-05 3.35092 0.00265814 3.35938 0.00297968C3.51849 0.00200758 3.68774 4.99914e-05 3.86719 4.99914e-05H8.4502C8.74443 4.81347e-05 9.00014 -0.00377018 9.24805 0.0557141C9.45204 0.104689 9.64728 0.185377 9.82617 0.294972C10.0436 0.42821 10.2216 0.612265 10.4297 0.820363L12.5137 2.90435C12.7218 3.11244 12.9058 3.29044 13.0391 3.50786C13.1487 3.68675 13.2293 3.88199 13.2783 4.08599C13.3378 4.3339 13.334 4.58961 13.334 4.88384V9.46685C13.334 10.0159 13.3337 10.4681 13.3037 10.835C13.2731 11.2097 13.2078 11.5545 13.043 11.878C12.7873 12.3795 12.3795 12.7874 11.8779 13.043C11.5544 13.2079 11.2096 13.2731 10.835 13.3038C10.6015 13.3228 10.3336 13.3287 10.0283 13.3311C10.019 13.3315 10.0094 13.334 10 13.334C9.99114 13.334 9.98241 13.3315 9.97363 13.3311C9.8148 13.3321 9.64588 13.334 9.4668 13.334H3.86719C3.68774 13.334 3.51849 13.3321 3.35938 13.3311C3.35092 13.3314 3.34251 13.334 3.33398 13.334C3.32425 13.334 3.31432 13.3315 3.30469 13.3311C2.99977 13.3287 2.7322 13.3228 2.49902 13.3038C2.12434 13.2731 1.77958 13.2079 1.45605 13.043C0.954488 12.7874 0.546643 12.3795 0.291016 11.878C0.126173 11.5545 0.0608946 11.2097 0.0302734 10.835C0.000292534 10.4681 0 10.0159 0 9.46685V3.86724ZM1.33398 9.46685C1.33398 10.0379 1.33388 10.4266 1.3584 10.7266C1.38228 11.0187 1.42542 11.1683 1.47852 11.2725C1.60635 11.5234 1.81064 11.7277 2.06152 11.8555C2.16576 11.9086 2.31537 11.9518 2.60742 11.9756C2.62679 11.9772 2.64687 11.9772 2.66699 11.9786V8.40044C2.66699 8.22476 2.6669 8.05287 2.67871 7.90825C2.69116 7.75586 2.7203 7.57553 2.8125 7.39458C2.94027 7.14405 3.14401 6.94032 3.39453 6.81255C3.57548 6.72035 3.75581 6.69121 3.9082 6.67876C4.05282 6.66695 4.22471 6.66704 4.40039 6.66704H8.93359C9.10928 6.66704 9.28117 6.66695 9.42578 6.67876C9.57818 6.69121 9.7585 6.72035 9.93945 6.81255C10.19 6.94032 10.3937 7.14405 10.5215 7.39458C10.6137 7.57553 10.6428 7.75586 10.6553 7.90825C10.6671 8.05287 10.667 8.22476 10.667 8.40044V11.9786C10.6871 11.9772 10.7072 11.9772 10.7266 11.9756C11.0186 11.9518 11.1682 11.9086 11.2725 11.8555C11.5233 11.7277 11.7276 11.5234 11.8555 11.2725C11.9086 11.1683 11.9517 11.0187 11.9756 10.7266C12.0001 10.4266 12 10.0379 12 9.46685V4.88384C12 4.52686 11.9955 4.45631 11.9814 4.39751C11.9651 4.32949 11.9389 4.2638 11.9023 4.20415C11.8707 4.15253 11.8233 4.09975 11.5703 3.84673L10.666 2.94243C10.666 3.11508 10.6669 3.28361 10.6553 3.42583C10.6428 3.57823 10.6137 3.75856 10.5215 3.9395C10.3937 4.19003 10.19 4.39377 9.93945 4.52153C9.7585 4.61373 9.57818 4.64287 9.42578 4.65532C9.28117 4.66714 9.10928 4.66704 8.93359 4.66704H4.40039C4.22471 4.66704 4.05282 4.66714 3.9082 4.65532C3.75581 4.64287 3.57548 4.61373 3.39453 4.52153C3.14401 4.39377 2.94027 4.19003 2.8125 3.9395C2.7203 3.75856 2.69116 3.57823 2.67871 3.42583C2.6669 3.28122 2.66699 3.10933 2.66699 2.93364V1.35454C2.64684 1.35593 2.62681 1.35686 2.60742 1.35845C2.31537 1.38233 2.16576 1.42547 2.06152 1.47857C1.81064 1.6064 1.60635 1.81069 1.47852 2.06157C1.42542 2.16581 1.38228 2.31542 1.3584 2.60747C1.33388 2.90753 1.33398 3.29618 1.33398 3.86724V9.46685ZM4.00684 3.31743C4.00706 3.32017 4.00759 3.32276 4.00781 3.32525C4.01061 3.3255 4.01347 3.32694 4.0166 3.3272C4.09433 3.33355 4.20271 3.33403 4.40039 3.33403H8.93359C9.13128 3.33403 9.23966 3.33355 9.31738 3.3272C9.32016 3.32697 9.32269 3.32547 9.3252 3.32525C9.32542 3.32274 9.32692 3.32021 9.32715 3.31743C9.3335 3.23971 9.33398 3.13133 9.33398 2.93364V1.61333C9.20748 1.48941 9.16893 1.45562 9.12988 1.43169C9.07023 1.39514 9.00455 1.36892 8.93652 1.35259C8.87773 1.33852 8.80717 1.33404 8.4502 1.33403H4V2.93364C4 3.13133 4.00049 3.23971 4.00684 3.31743Z"
+    fill="currentColor"
+  />
+</template>

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

@@ -96,7 +96,9 @@
     "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."
+    "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"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Ersetzen",

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

@@ -96,7 +96,9 @@
     "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."
+    "wrongUploadType": "No puedes subir archivos de este tipo.",
+    "keywords": "Palabras clave",
+    "keywordsDescription": "Añade palabras clave relacionadas con tu negocio y logo"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Sustituir",

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

@@ -96,7 +96,9 @@
     "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."
+    "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."
   },
   "uploadLogoSearchResultCard": {
     "replace": "Remplacer",

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

@@ -96,7 +96,9 @@
     "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."
+    "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"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Remplacer",

package/src/bundles/bundled-translations.json

@@ -96,7 +96,9 @@
     "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"
   },
   "uploadLogoSearchResultCard": {
     "replace": "Replace",

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;
     },
   },