@designcrowd/library.brand-page 6.0.23-ast-remove → 6.0.23

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -20,7 +20,6 @@ const POST_PURCHASE_PAGE_SECTION_BY_TAB = {
 };
 const PRE_PURCHASE_PAGE_SECTION_BY_TAB = {
     [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
-    [TEMPLATE_TABS.AI]: 'MakerPrePurchaseSidebarTemplatesAiTab',
     [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
 };
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -271,7 +270,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                                     uiStore.personalisationData[personalisationContentIndex]
                                         .contentKey;
                             }
-                            else if (item.isPersonalisable && !this.searchTerm) {
+                            else if (item.isPersonalisable) {
+                                // Pre-purchase has no personalisationData; personalise AI
+                                // template previews with the prompt content key (bp-5742).
                                 contentKey = uiStore.userPromptContentKey;
                             }
                             return {
@@ -282,7 +283,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                                 // in the userPrompt bucket (post- or pre-purchase). The preview must
                                 // then resolve via userPromptContentKey, not the regular bucket which
                                 // holds placeholders post-purchase (bp-5454).
-                                usesUserPromptContentKey: !!uiStore.userPromptContentKey && !this.searchTerm,
+                                usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                                 previewImageUrl: item.previewImageUrl,
                             };
                         }
@@ -363,7 +364,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             await this._setSearchTerm({
                 searchTerm: payload.searchTerm,
             });
-            this.aiTemplateKeywords = payload.searchTerm ?? '';
             this.onSearchTermChanged?.(payload.searchTerm);
             await this._setPageNo({ pageNo: 1 });
             await this.loadPageNo({ pageNo: 1 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.23-ast-remove",
+  "version": "6.0.23",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/shop/PaymentModal.vue

@@ -50,7 +50,7 @@
           <Button
             size="medium"
             class="tw-mt-3 tw-mb-4 tw-py-3 tw-cursor-pointer tw-rounded"
-            :style="buttonStyle?.style"
+            :style="buttonStyle"
             :label="paymentModalTr('done')"
             :attrs="{
               'data-test-tag': 'done-btn',
@@ -67,7 +67,7 @@
           <Button
             size="medium"
             class="tw-mt-3 tw-mb-4 tw-py-3 tw-cursor-pointer tw-rounded"
-            :style="buttonStyle?.style"
+            :style="buttonStyle"
             :label="paymentModalTr('done')"
             :attrs="{
               'data-test-tag': 'done-btn',
@@ -83,7 +83,7 @@
               size="medium"
               :full-width="true"
               class="tw-mb-4 tw-py-3 tw-cursor-pointer tw-rounded"
-              :style="buttonStyle?.style"
+              :style="buttonStyle"
               label="Proceed to Payment"
               :attrs="{
                 'data-test-tag': 'proceed-btn',

package/src/brand-page/components/shop/Shop.vue

@@ -113,7 +113,7 @@
       v-if="data.isPaymentModalVisible"
       class="modal-payment"
       :is-visible="data.isPaymentModalVisible"
-      :button-style="viewModel.buttonStyles"
+      :button-style="buttonStyle"
       :description-style="viewModel.descriptionStyle"
       :shop-payment-config="shopPaymentConfig"
       :context="context"

package/src/brand-page/components/shop/Shop.vue.test.ts

@@ -1,7 +1,6 @@
 import { vi } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import Shop from './Shop.vue';
-import PaymentModal from './PaymentModal.vue';
 import { createPinia, setActivePinia } from 'pinia';
 import {
   BRAND_PAGE_TYPES,
@@ -14,7 +13,6 @@ import type { ShopViewModel } from '@brand-page/view-models';
 vi.mock('../../clients/brand-page.client', () => ({
   default: {
     getPaymentConfigStatusByPaymentConfigId: vi.fn(),
-    createBrandPageCart: vi.fn(),
   },
 }));
 
@@ -47,14 +45,6 @@ const createContext = (): BrandPageContext => ({
   nav: { navItems: [] },
 });
 
-const PRODUCT = {
-  id: '1',
-  name: 'Test',
-  price: 1,
-  description: '',
-  imageUrl: '',
-} as any;
-
 const createViewModel = (
   overrides: Partial<ShopViewModel> = {},
 ): ShopViewModel =>
@@ -103,7 +93,15 @@ describe('Shop', () => {
     it('does not throw when buttonStyles has no style property', () => {
       const vm = createViewModel({
         buttonStyles: { selectedButtonStyleId: 'BUTTON_STYLE_1' } as any,
-        products: [PRODUCT],
+        products: [
+          {
+            id: '1',
+            name: 'Test',
+            price: 1,
+            description: '',
+            imageUrl: '',
+          } as any,
+        ],
       });
 
       expect(() => mountShop(vm)).not.toThrow();
@@ -112,7 +110,15 @@ describe('Shop', () => {
     it('does not throw when buttonStyles is undefined', () => {
       const vm = createViewModel({
         buttonStyles: undefined as any,
-        products: [PRODUCT],
+        products: [
+          {
+            id: '1',
+            name: 'Test',
+            price: 1,
+            description: '',
+            imageUrl: '',
+          } as any,
+        ],
       });
 
       expect(() => mountShop(vm)).not.toThrow();
@@ -127,7 +133,15 @@ describe('Shop', () => {
             backgroundColor: 'rgb(0, 0, 255)',
           },
         }),
-        products: [PRODUCT],
+        products: [
+          {
+            id: '1',
+            name: 'Test',
+            price: 1,
+            description: '',
+            imageUrl: '',
+          } as any,
+        ],
       });
 
       const wrapper = mountShop(vm);
@@ -139,71 +153,3 @@ describe('Shop', () => {
     });
   });
 });
-
-describe('PaymentModal', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  const mountPaymentModal = (buttonStyle: any) =>
-    shallowMount(PaymentModal, {
-      props: {
-        context: createContext(),
-        isVisible: true,
-        buttonStyle,
-        shopPaymentConfig: { paymentConfig: {} } as any,
-        descriptionStyle: undefined,
-        successMessage: 'Thanks!',
-        isShippingEnabled: false,
-      },
-    });
-
-  it('does not throw when given a ButtonStyles instance', () => {
-    const buttonStyles = new ButtonStyles({
-      selectedButtonStyleId: 'BUTTON_STYLE_1',
-      style: { color: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 0, 255)' },
-    });
-
-    expect(() => mountPaymentModal(buttonStyles)).not.toThrow();
-  });
-
-  it('receives a ButtonStyles with .style (not flat CSS)', () => {
-    const buttonStyles = new ButtonStyles({
-      selectedButtonStyleId: 'BUTTON_STYLE_1',
-      style: { color: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 0, 255)' },
-    });
-
-    const wrapper = mountPaymentModal(buttonStyles);
-    const prop = wrapper.props('buttonStyle');
-
-    expect(prop).toHaveProperty('style');
-    expect(prop).toHaveProperty('selectedButtonStyleId');
-    expect(prop.style.color).toBe('rgb(255, 0, 0)');
-    expect(prop.style.backgroundColor).toBe('rgb(0, 0, 255)');
-  });
-
-  it('passes buttonStyles through to RequestPaymentStripe', () => {
-    const buttonStyles = new ButtonStyles({
-      selectedButtonStyleId: 'BUTTON_STYLE_1',
-      style: { color: 'rgb(255, 0, 0)', backgroundColor: 'rgb(0, 0, 255)' },
-    });
-
-    const wrapper = mountPaymentModal(buttonStyles);
-    const stripe = wrapper.findComponent({
-      name: 'RequestPaymentStripe',
-    });
-
-    if (stripe.exists()) {
-      const stripeProp = stripe.props('buttonStyles');
-
-      expect(stripeProp).toHaveProperty('style');
-      expect(stripeProp.style.color).toBe('rgb(255, 0, 0)');
-    }
-  });
-
-  it('would fail with a flat CSS object — .style is undefined', () => {
-    const flatCss = { color: 'rgb(255,0,0)', backgroundColor: 'rgb(0,0,255)' };
-
-    expect((flatCss as any).style).toBeUndefined();
-  });
-});

package/src/brand-page/models/index.ts

@@ -947,6 +947,10 @@ export class BrandPageModel {
   // Model version
   v: number;
 
+  // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+  // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+  userPromptContentKey?: string;
+
   styles: PageStyles;
 
   /** @deprecated */

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -462,6 +462,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 19,
   },
   "useOldLogoRenderSize": true,
@@ -914,6 +915,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 19,
   },
   "useOldLogoRenderSize": true,
@@ -1373,6 +1375,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 19,
   },
   "useOldLogoRenderSize": true,

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -478,6 +478,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 0,
   },
   "useOldLogoRenderSize": false,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -452,6 +452,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -923,6 +924,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -1819,6 +1819,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
+      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1836,6 +1837,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

package/src/shared/template-settings/store/template-settings-store.ts

@@ -50,7 +50,6 @@ const POST_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
 
 const PRE_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
   [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
-  [TEMPLATE_TABS.AI]: 'MakerPrePurchaseSidebarTemplatesAiTab',
   [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
 };
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -422,7 +421,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                   contentKey =
                     uiStore.personalisationData[personalisationContentIndex]
                       .contentKey;
-                } else if (item.isPersonalisable && !this.searchTerm) {
+                } else if (item.isPersonalisable) {
+                  // Pre-purchase has no personalisationData; personalise AI
+                  // template previews with the prompt content key (bp-5742).
                   contentKey = uiStore.userPromptContentKey;
                 }
 
@@ -434,8 +435,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                   // in the userPrompt bucket (post- or pre-purchase). The preview must
                   // then resolve via userPromptContentKey, not the regular bucket which
                   // holds placeholders post-purchase (bp-5454).
-                  usesUserPromptContentKey:
-                    !!uiStore.userPromptContentKey && !this.searchTerm,
+                  usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                   previewImageUrl: item.previewImageUrl,
                 } as TemplateSettingsTemplate;
               }
@@ -529,8 +529,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         searchTerm: payload.searchTerm,
       });
 
-      this.aiTemplateKeywords = payload.searchTerm ?? '';
-
       this.onSearchTermChanged?.(payload.searchTerm);
 
       await this._setPageNo({ pageNo: 1 });