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

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

@@ -20,6 +20,7 @@ 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;
@@ -270,9 +271,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                                     uiStore.personalisationData[personalisationContentIndex]
                                         .contentKey;
                             }
-                            else if (item.isPersonalisable) {
-                                // Pre-purchase has no personalisationData; personalise AI
-                                // template previews with the prompt content key (bp-5742).
+                            else if (item.isPersonalisable && !this.searchTerm) {
                                 contentKey = uiStore.userPromptContentKey;
                             }
                             return {
@@ -283,7 +282,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,
+                                usesUserPromptContentKey: !!uiStore.userPromptContentKey && !this.searchTerm,
                                 previewImageUrl: item.previewImageUrl,
                             };
                         }
@@ -364,6 +363,7 @@ 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.22",
+  "version": "6.0.23-ast-remove",
   "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="buttonStyle?.style"
             :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="buttonStyle?.style"
             :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="buttonStyle?.style"
               label="Proceed to Payment"
               :attrs="{
                 'data-test-tag': 'proceed-btn',

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

@@ -58,9 +58,9 @@
         <ButtonStyleWrapper
           v-if="viewModel.products.length >= 1"
           :selected-button-style-id="
-            viewModel.buttonStyles.selectedButtonStyleId
+            viewModel.buttonStyles?.selectedButtonStyleId
           "
-          :icon-color="viewModel.buttonStyles.style.backgroundColor"
+          :icon-color="viewModel.buttonStyles?.style?.backgroundColor"
           :no-margin="true"
         >
           <button
@@ -113,7 +113,7 @@
       v-if="data.isPaymentModalVisible"
       class="modal-payment"
       :is-visible="data.isPaymentModalVisible"
-      :button-style="buttonStyle"
+      :button-style="viewModel.buttonStyles"
       :description-style="viewModel.descriptionStyle"
       :shop-payment-config="shopPaymentConfig"
       :context="context"
@@ -245,7 +245,7 @@ const buttonStyle = computed((): any => {
     ...props.viewModel.buttonStyles?.style,
     color:
       props.viewModel.buttonTextStyle?.color ||
-      props.viewModel.buttonStyles?.style.color,
+      props.viewModel.buttonStyles?.style?.color,
   };
   return buttonStyle;
 });

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

@@ -0,0 +1,209 @@
+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,
+  ButtonStyles,
+  MEDIA_SIZES,
+  type BrandPageContext,
+} from '@brand-page/models';
+import type { ShopViewModel } from '@brand-page/view-models';
+
+vi.mock('../../clients/brand-page.client', () => ({
+  default: {
+    getPaymentConfigStatusByPaymentConfigId: vi.fn(),
+    createBrandPageCart: vi.fn(),
+  },
+}));
+
+vi.mock('@brand-page/utils/raygun.util', () => ({
+  default: { safeSendRaygunError: vi.fn() },
+}));
+
+const createContext = (): BrandPageContext => ({
+  brandPageSlug: 'test',
+  brandPageToken: '',
+  isMobile: false,
+  isPreview: true,
+  isProduction: false,
+  isServerRender: false,
+  options: { mediaSizes: MEDIA_SIZES.sizeThumb },
+  isTemplate: false,
+  isDesignCom: false,
+  pageTitle: 'Test',
+  runtimeEnvironment: '',
+  stripePublishableKey: undefined,
+  customDomain: undefined,
+  brandPageType: BRAND_PAGE_TYPES.brandSite,
+  isBrandPage: false,
+  isBrandPageOrIsBrandContact: false,
+  isBrandSite: true,
+  isBrandContact: false,
+  pages: [],
+  isCapturingPreview: false,
+  recaptchaSiteKey: undefined,
+  nav: { navItems: [] },
+});
+
+const PRODUCT = {
+  id: '1',
+  name: 'Test',
+  price: 1,
+  description: '',
+  imageUrl: '',
+} as any;
+
+const createViewModel = (
+  overrides: Partial<ShopViewModel> = {},
+): ShopViewModel =>
+  ({
+    id: '1',
+    type: 'shop-section',
+    role: 'shop-section',
+    title: 'Shop',
+    description: '',
+    successMessage: 'Thanks!',
+    products: [],
+    displayStyle: 'text',
+    aspectRatio: '1:1',
+    fillColor: {},
+    defaultBorderColor: {},
+    itemTextStyle: {},
+    backgroundStyle: {},
+    buttonStyles: new ButtonStyles(),
+    isFullWidth: true,
+    isShippingEnabled: false,
+    shopPaymentConfig: {
+      paymentConfig: {},
+      paymentOptionDisplayType: 'text',
+      paymentOptionImageType: 'none',
+      isCustomerRequestDetailsEnabled: false,
+      isShippingEnabled: false,
+    },
+    ...overrides,
+  }) as ShopViewModel;
+
+const mountShop = (viewModel: ShopViewModel) =>
+  shallowMount(Shop, {
+    props: {
+      context: createContext(),
+      viewModel,
+      contentIndex: 0,
+    },
+  });
+
+describe('Shop', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  describe('buttonStyles defensive access', () => {
+    it('does not throw when buttonStyles has no style property', () => {
+      const vm = createViewModel({
+        buttonStyles: { selectedButtonStyleId: 'BUTTON_STYLE_1' } as any,
+        products: [PRODUCT],
+      });
+
+      expect(() => mountShop(vm)).not.toThrow();
+    });
+
+    it('does not throw when buttonStyles is undefined', () => {
+      const vm = createViewModel({
+        buttonStyles: undefined as any,
+        products: [PRODUCT],
+      });
+
+      expect(() => mountShop(vm)).not.toThrow();
+    });
+
+    it('renders correctly with fully populated buttonStyles', () => {
+      const vm = createViewModel({
+        buttonStyles: new ButtonStyles({
+          selectedButtonStyleId: 'BUTTON_STYLE_1',
+          style: {
+            color: 'rgb(255, 0, 0)',
+            backgroundColor: 'rgb(0, 0, 255)',
+          },
+        }),
+        products: [PRODUCT],
+      });
+
+      const wrapper = mountShop(vm);
+
+      expect(
+        wrapper.find('[data-component="button-style-wrapper"]').exists() ||
+          wrapper.findComponent({ name: 'ButtonStyleWrapper' }).exists(),
+      ).toBe(true);
+    });
+  });
+});
+
+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,10 +947,6 @@ 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,7 +462,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 19,
   },
   "useOldLogoRenderSize": true,
@@ -915,7 +914,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 19,
   },
   "useOldLogoRenderSize": true,
@@ -1375,7 +1373,6 @@ 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,7 +478,6 @@ 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,7 +452,6 @@ BrandPageModel {
       },
     },
   },
-  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -924,7 +923,6 @@ BrandPageModel {
       },
     },
   },
-  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

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

@@ -1819,7 +1819,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
-      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1837,7 +1836,6 @@ 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,6 +50,7 @@ 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;
@@ -421,9 +422,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                   contentKey =
                     uiStore.personalisationData[personalisationContentIndex]
                       .contentKey;
-                } else if (item.isPersonalisable) {
-                  // Pre-purchase has no personalisationData; personalise AI
-                  // template previews with the prompt content key (bp-5742).
+                } else if (item.isPersonalisable && !this.searchTerm) {
                   contentKey = uiStore.userPromptContentKey;
                 }
 
@@ -435,7 +434,8 @@ 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,
+                  usesUserPromptContentKey:
+                    !!uiStore.userPromptContentKey && !this.searchTerm,
                   previewImageUrl: item.previewImageUrl,
                 } as TemplateSettingsTemplate;
               }
@@ -529,6 +529,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         searchTerm: payload.searchTerm,
       });
 
+      this.aiTemplateKeywords = payload.searchTerm ?? '';
+
       this.onSearchTermChanged?.(payload.searchTerm);
 
       await this._setPageNo({ pageNo: 1 });