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

package/docs/plans/DY-957-plan-phase-2-fe-shared-lib.md

@@ -0,0 +1,382 @@
+# DY-957 Phase 2: fe-shared-lib Wizard Changes
+
+## Goal
+
+Add an optional keywords step to the BYO upload wizard in `@designcrowd/fe-shared-lib`. The step fetches AI keyword suggestions, displays them in an editable textbox, and emits the keywords for the consumer to use. The step is opt-in via a `showKeywordsStep` prop (default `false`).
+
+## Repo
+
+`fe-shared-lib`
+
+## Prerequisites
+
+- Phase 1 backend endpoint deployed (needed for integration testing, not for Storybook development)
+
+## Implementation Decisions (Confirmed)
+
+- The keyword suggestions endpoint path is `/api/ai-keyword-suggestion` (this is intentionally **not** maker-prefixed).
+- `templateType` is required end-to-end; consumers must pass a non-null default value.
+- Continue action in the keywords step must be disabled while suggestions are loading.
+- Storybook coverage for `LogoKeywords` is required for this task (not optional).
+- Publishing/version bump and final validation are human-owned follow-up steps, not coding-agent scope.
+
+---
+
+## Tasks
+
+### 1. Add API constant
+
+**File**: `src/experiences/constants/api.js`
+
+Add one line to the exported object:
+
+```js
+KEYWORD_SUGGESTIONS_API_URL: '/api/ai-keyword-suggestion',
+```
+
+### 2. Add `getKeywordSuggestionsAsync` to API client
+
+**File**: `src/experiences/clients/brand-crowd-api.client.js`
+
+Add a new async method following the `searchDomainNamesByKeywordAsync` pattern (lines 71-117):
+
+```js
+const getKeywordSuggestionsAsync = async ({ businessName, templateType }) => {
+  try {
+    const url = `${API.KEYWORD_SUGGESTIONS_API_URL}?businessName=${encodeURIComponent(businessName)}&templateType=${encodeURIComponent(templateType)}`;
+    const response = await getAxios()({
+      method: 'get',
+      url,
+    });
+    return response.data;
+  } catch (error) {
+    return false;
+  }
+};
+```
+
+Behavior note: if `businessName` is empty, still call the endpoint with `businessName=` and continue normally (expected to return empty suggestions).
+
+Add `getKeywordSuggestionsAsync` to the default export object (lines 119-124).
+
+### 3. Create `LogoKeywords.vue` component
+
+**File**: Create `src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.vue`
+
+Clone the structure from `LogoBusinessText.vue` (same directory). The component should:
+
+**Props:**
+- `progressLabel` (String, required) — "Step X of Y"
+- `eventCategory` (String, required) — for analytics tracking
+- `savedKeywords` (String, optional, default: `null`) — restored keywords if user navigated back then forward
+- `businessName` (String, optional, default: `''`) — from previous step (may be empty)
+- `templateType` (String, required) — e.g. "business card"
+
+Behavior note: keep current wizard behavior where empty business name is allowed; do not block navigation if no business name is entered.
+
+**Data:**
+- `keywordsText: ''` — the editable comma-separated keywords string
+- `isLoading: false`
+
+**Mounted lifecycle:**
+```js
+async mounted() {
+  if (this.savedKeywords !== null) {
+    this.keywordsText = this.savedKeywords;
+    return;
+  }
+  this.isLoading = true;
+  try {
+    const result = await brandCrowdClient.getKeywordSuggestionsAsync({
+      businessName: this.businessName,
+      templateType: this.templateType,
+    });
+    if (result && result.keywords && result.keywords.length > 0) {
+      this.keywordsText = result.keywords.join(', ');
+    }
+  } catch {
+    // leave keywordsText as empty string
+  } finally {
+    this.isLoading = false;
+  }
+},
+```
+
+**Methods:**
+- `back()` — emits `on-go-back`
+- `save()` — no-op if `isLoading` is true; otherwise tracks event with `eventAction: 'keywords'`, `eventLabel: 'Clicked_Continue'`, then emits `on-save` with `{ keywords: this.keywordsText }`
+- `onKeywordsKeyUp(e)` — if `e.key === 'Enter'` and `!isLoading`, call `this.save()`
+
+**Template:** Mirror `LogoBusinessText.vue` layout:
+- Progress label header: `{{ progressLabel }}`
+- Heading: `{{ uploadYourLogoTr('keywords') }}`
+- Description: `{{ uploadYourLogoTr('keywordsDescription') }}`
+- Single `<input>` or `<textarea>` bound to `keywordsText`, disabled while `isLoading`, with `@keyup="onKeywordsKeyUp"`
+- Show a loading indicator (spinner or skeleton) when `isLoading` is true
+- Footer with Back button (emits `on-go-back`) and Continue button (calls `save()`)
+- Continue button must be disabled while `isLoading` is `true`
+
+**i18n:** Use the `uploadYourLogoTr` mixin (same as `LogoBusinessText.vue`).
+
+### 4. Add i18n translation keys
+
+**Files**: All 7 locale files in `src/experiences/components/UploadYourLogoOnBoarding/i18n/`
+
+Add two new keys inside the `"uploadYourLogo"` object in **every** locale file, using the **English text** in all of them:
+
+```json
+"keywords": "Keywords",
+"keywordsDescription": "Add keywords related to your business and logo"
+```
+
+Add this identical English text to:
+- `upload-your-logo.json` (English)
+- `upload-your-logo.de-DE.json`
+- `upload-your-logo.es-ES.json`
+- `upload-your-logo.fr-CA.json`
+- `upload-your-logo.fr-FR.json`
+- `upload-your-logo.pt-BR.json`
+- `upload-your-logo.pt-PT.json`
+
+**Do not translate** — a separate process will sweep the codebase and replace the English placeholders with proper translations.
+
+After editing all files, run `npm run bundle-translation` to regenerate bundled translation files.
+
+### 5. Update `UploadYourLogoOnBoarding.vue` orchestrator
+
+**File**: `src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue`
+
+#### 5a. Add new props (after existing props at lines 115-136)
+
+```js
+showKeywordsStep: {
+  type: Boolean,
+  required: false,
+  default: false,
+},
+templateType: {
+  type: String,
+  required: true,
+},
+```
+
+Note: `templateType` must be provided by the consumer (fallback/defaulting happens in consumer app config, not in this component).
+
+#### 5b. Update `data()` (lines 142-154)
+
+Change `totalNumSteps` to be dynamic:
+```js
+totalNumSteps: this.useDropzone
+  ? (this.showKeywordsStep ? 6 : 5)
+  : (this.showKeywordsStep ? 5 : 4),
+```
+
+Add new data property:
+```js
+savedKeywords: null,
+```
+
+#### 5c. Add computed property for brand colours step number
+
+```js
+brandColoursStep() {
+  return this.showKeywordsStep ? 5 : 4;
+},
+```
+
+#### 5d. Update `currentStepProgressLabel` (lines 157-163)
+
+Replace hard-coded totals with `this.totalNumSteps`:
+```js
+currentStepProgressLabel() {
+  if (this.includeDropzoneInModal) {
+    const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
+    return this.uploadYourLogoTr('stepOf', { CURRENT: currentStepDisplay, TOTAL: this.totalNumSteps });
+  }
+  return this.uploadYourLogoTr('stepOf', { CURRENT: this.currentStep - 1, TOTAL: this.totalNumSteps });
+},
+```
+
+#### 5e. Update `currentStepTrackingLabel` (lines 170-176)
+
+Make it keyword-step aware:
+```js
+currentStepTrackingLabel() {
+  const stepTwoLabel = this.currentStep === 2 && !this.canCropImage ? 'previewLogo' : 'cropLogo';
+  const steps = this.showKeywordsStep
+    ? ['logoUploader', stepTwoLabel, 'businessName', 'keywords', 'brandColors']
+    : ['logoUploader', stepTwoLabel, 'businessName', 'brandColors'];
+  return steps[this.currentStep - 1];
+},
+```
+
+#### 5f. Import LogoKeywords component
+
+Add import at top of script:
+```js
+import LogoKeywords from './LogoKeywords.vue';
+```
+
+Register in `components: { ... }`.
+
+#### 5g. Update `onSaveBusinessText` method (lines 251-255)
+
+No change needed — it already sets `currentStep = 4`. When `showKeywordsStep` is true, step 4 shows LogoKeywords. When false, step 4 shows LogoBusinessBrandColours (via `brandColoursStep` computed).
+
+#### 5h. Add `onSaveKeywords` method
+
+```js
+onSaveKeywords(payload) {
+  this.$emit('on-save-keywords', { keywords: payload.keywords });
+  this.savedKeywords = payload.keywords;
+  this.currentStep = this.brandColoursStep;
+},
+```
+
+#### 5i. Add `onGoBackFromBrandColours` method (or rename existing `onGoBackToBusinessText` usage on brand colours)
+
+```js
+onGoBackFromBrandColours() {
+  this.$emit('on-back', { currentStepTrackingLabel: this.currentStepTrackingLabel });
+  this.currentStep = this.showKeywordsStep ? 4 : 3;
+},
+```
+
+**Important**: The brand colours component currently uses `@on-go-back="onGoBackToBusinessText"` (which sets `currentStep = 3`). Change this to `@on-go-back="onGoBackFromBrandColours"` so it goes back to keywords (step 4) when the keywords step is enabled.
+
+#### 5j. Update template — add LogoKeywords between BusinessText and BrandColours
+
+Add after the LogoBusinessText block and before LogoBusinessBrandColours:
+
+```vue
+<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"
+  @on-go-back="onGoBackToBusinessText"
+  @on-save="onSaveKeywords"
+/>
+```
+
+#### 5k. Update template — change BrandColours step condition
+
+Change `currentStep === 4` to `currentStep === brandColoursStep`:
+
+```vue
+<LogoBusinessBrandColours
+  v-if="!isAttemptingToExit && currentStep === brandColoursStep && uploadedLogoData && !isCurrentlySaving"
+  ...
+  @on-go-back="onGoBackFromBrandColours"
+  ...
+/>
+```
+
+#### 5l. Update `reset()` method (lines 290-299)
+
+Add:
+```js
+this.savedKeywords = null;
+```
+
+### 6. Update `UploadYourLogoApplication.vue` wrapper
+
+**File**: `src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue`
+
+#### 6a. Add pass-through props (after existing props at lines 29-45)
+
+```js
+showKeywordsStep: {
+  type: Boolean,
+  required: false,
+  default: false,
+},
+templateType: {
+  type: String,
+  required: true,
+},
+```
+
+Note: `templateType` must be provided by the consumer (fallback/defaulting happens in consumer app config, not in this component).
+
+#### 6b. Pass props to `UploadYourLogoOnBoarding` in template
+
+Add to the existing `<UploadYourLogoOnBoarding>` tag:
+```vue
+:show-keywords-step="showKeywordsStep"
+:template-type="templateType"
+@on-save-keywords="onSaveKeywords"
+```
+
+#### 6c. Add event handler method
+
+```js
+onSaveKeywords(payload) {
+  this.$emit('on-save-keywords', payload);
+},
+```
+
+### 7. Add Storybook story (required)
+
+**File**: Create `src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.stories.js`
+
+Create a story following standard Storybook patterns covering:
+- Loading state (mock delayed API)
+- Populated state (mock successful response with keywords)
+- Empty state (mock failed response)
+- Pre-populated state (savedKeywords prop set)
+
+### 8. Publish package
+
+After all changes are verified (human release process; **not** a coding-agent task):
+1. Bump package version in `package.json`
+2. Run `npm run bundle-translation` to regenerate i18n bundles
+3. Perform manual validation in Storybook/integration context (no automated test runner in this repo)
+4. Publish the new version of `@designcrowd/fe-shared-lib`
+
+---
+
+## Step Number Reference Table
+
+### When `showKeywordsStep = false` (default, unchanged):
+
+| currentStep | Component | Progress Display |
+|---|---|---|
+| 1 | LogoUploader | Step 0 of 4 |
+| 2 | LogoCropper/Preview | Step 1 of 4 |
+| 3 | LogoBusinessText | Step 2 of 4 |
+| 4 | LogoBusinessBrandColours | Step 3 of 4 |
+
+### When `showKeywordsStep = true`:
+
+| currentStep | Component | Progress Display |
+|---|---|---|
+| 1 | LogoUploader | Step 0 of 5 |
+| 2 | LogoCropper/Preview | Step 1 of 5 |
+| 3 | LogoBusinessText | Step 2 of 5 |
+| **4** | **LogoKeywords (NEW)** | **Step 3 of 5** |
+| 5 | LogoBusinessBrandColours | Step 4 of 5 |
+
+Note: The `useDropzone` variant adds step 0 (dropzone) and shifts totals by +1. The same logic applies — `totalNumSteps` handles this via the ternary in `data()`.
+
+---
+
+## Files Changed
+
+| File | Change |
+|---|---|
+| `src/experiences/constants/api.js` | Add `KEYWORD_SUGGESTIONS_API_URL` |
+| `src/experiences/clients/brand-crowd-api.client.js` | Add `getKeywordSuggestionsAsync` method + export |
+| `src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.vue` | **New file** — keywords step component |
+| `src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue` | New props, step routing, computed properties, methods, template |
+| `src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue` | Pass-through props + event |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.json` | Add `keywords`, `keywordsDescription` |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.de-DE.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.es-ES.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.fr-CA.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.fr-FR.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.pt-BR.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.pt-PT.json` | Add `keywords`, `keywordsDescription` (English placeholder) |
+| `src/experiences/components/UploadYourLogoOnBoarding/LogoKeywords.stories.js` | **New file** (required) |

package/index.js

@@ -59,3 +59,4 @@ export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
 export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
+export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.1",
+  "version": "1.6.3-eng-4039-freemode",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Carousel/Carousel.vue

@@ -192,6 +192,7 @@ export default {
           clickable: true,
         },
         speed: 600,
+        freeMode: true,
         mousewheel: {
           forceToAxis: true,
           releaseOnEdges: true,
@@ -232,6 +233,11 @@ export default {
 
       const options = merge(defaultOptions, this.options || {});
 
+      // loop and freeMode are incompatible in Swiper 11 — loop takes priority
+      if (options.loop) {
+        options.freeMode = false;
+      }
+
       options.initialSlide = this.slideIndex || options.initialSlide;
 
       options.keyboard = defaultOptions.keyboard || {

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/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>
+    `,
+  };
+};