@designcrowd/fe-shared-lib 1.5.34 → 1.5.36

package/dist/css/tailwind-designCrowd.css

@@ -617,9 +617,6 @@ video {
 .tw-m-3 {
   margin: 0.75rem;
 }
-.tw-m-4 {
-  margin: 1rem;
-}
 .tw-m-5 {
   margin: 1.25rem;
 }
@@ -946,9 +943,6 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
-.tw-w-\[14rem\] {
-  width: 14rem;
-}
 .tw-w-auto {
   width: auto;
 }
@@ -962,9 +956,6 @@ video {
 .tw-max-w-2xl {
   max-width: 42rem;
 }
-.tw-max-w-3xl {
-  max-width: 48rem;
-}
 .tw-max-w-full {
   max-width: 100%;
 }
@@ -1213,9 +1204,6 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
-.tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1332,10 +1320,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(125 130 132 / var(--tw-border-opacity));
 }
-.tw-border-grayscale-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 93 96 / var(--tw-border-opacity));
-}
 .tw-border-info-300 {
   --tw-border-opacity: 1;
   border-color: rgb(112 193 243 / var(--tw-border-opacity));
@@ -1830,10 +1814,6 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.tw-text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .tw-text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1857,9 +1837,6 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
-.tw-font-medium {
-  font-weight: 500;
-}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -2071,10 +2048,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
-.hover\:tw-border-grayscale-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(204 204 204 / var(--tw-border-opacity));
-}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(14 121 188 / var(--tw-border-opacity));
@@ -2111,10 +2084,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2139,10 +2108,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2159,10 +2124,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));
@@ -2175,9 +2136,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-primary-600:hover {
+.hover\:tw-text-grayscale-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(14 121 188 / var(--tw-text-opacity));
+  color: rgb(39 52 56 / var(--tw-text-opacity));
 }
 .hover\:tw-text-secondary-500:hover {
   --tw-text-opacity: 1;
@@ -2333,18 +2294,10 @@ video {
 }
 @media (min-width: 768px) {
 
-  .md\:tw-relative {
-    position: relative;
-  }
-
   .md\:tw-right-6 {
     right: 1.5rem;
   }
 
-  .md\:tw-order-first {
-    order: -9999;
-  }
-
   .md\:tw-mb-0 {
     margin-bottom: 0px;
   }
@@ -2409,10 +2362,6 @@ video {
     width: 6rem;
   }
 
-  .md\:tw-w-3\/4 {
-    width: 75%;
-  }
-
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2425,10 +2374,6 @@ video {
     max-width: 100%;
   }
 
-  .md\:tw-flex-1 {
-    flex: 1 1 0%;
-  }
-
   .md\:tw-grow {
     flex-grow: 1;
   }
@@ -2488,10 +2433,6 @@ video {
        object-fit: contain;
   }
 
-  .md\:tw-p-0 {
-    padding: 0px;
-  }
-
   .md\:tw-p-2 {
     padding: 0.5rem;
   }
@@ -2528,10 +2469,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:tw-pb-0 {
-    padding-bottom: 0px;
-  }
-
   .md\:tw-pl-4 {
     padding-left: 1rem;
   }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.34",
+  "version": "1.5.36",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",