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

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

@@ -331,6 +331,7 @@ export interface MailingListContent extends Content {
   buttonText: string;
   titleStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export const FORM_FIELD_TYPES = {
@@ -946,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/models/payment.model.ts

@@ -147,6 +147,7 @@ export interface RequestPaymentContent extends Content {
   descriptionStyle?: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
   buttonTextStyle?: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export interface ShopContentConfig extends PaymentConfig {
@@ -191,6 +192,7 @@ export interface SupportMeContent extends Content {
   descriptionStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export interface CreateStripePaymentIntentResponse {

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

@@ -462,8 +462,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "userPromptContentKey": undefined,
-    "v": 18,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -915,8 +914,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "userPromptContentKey": undefined,
-    "v": 18,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1375,8 +1373,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "userPromptContentKey": undefined,
-    "v": 18,
+    "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/utils/button.util.ts

@@ -37,3 +37,20 @@ export const getBoxShadowValue = (buttonStyles: ButtonStyles): string => {
 
   return boxShadowValue;
 };
+
+// The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
+// is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
+// decoration needs the button to be reasonably wide to render legibly, so narrow
+// (w-fit) hosts should widen when one of these is active (BP-5800).
+export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
+export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
+export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
+
+export const DECORATIVE_BUTTON_STYLE_IDS = [
+  BUTTON_STYLE_BRUSHSTROKE,
+  BUTTON_STYLE_ARROW,
+  BUTTON_STYLE_PAPER,
+];
+
+export const isDecorativeButtonStyle = (styleId?: string): boolean =>
+  !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);

package/src/brand-page/utils/migration/migration-19.test.ts

@@ -0,0 +1,172 @@
+import { describe, test, expect } from 'vitest';
+import { migration19 } from './migration-19';
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+const BUTTON_FILL = 'rgb(255, 222, 89)';
+const USER_CARD = 'rgb(1, 2, 3)';
+
+const createMigrationData = (brandPageModel: any): MigrationData => ({
+  brandPageModel,
+  useOldLogoRenderSize: false,
+});
+
+const modelWith = (
+  contents: any[],
+  buttonFill: string | undefined = BUTTON_FILL,
+  brandPageType: string = BRAND_PAGE_TYPES.default,
+) => ({
+  brandPageType,
+  styles: { buttonStyles: { style: { backgroundColor: buttonFill } } },
+  pages: [{ contents }],
+});
+
+describe('migration19', () => {
+  test('seeds backgroundColor from the button fill for each container-backed block when unset', async () => {
+    const model = modelWith([
+      { type: 'mailing-list' },
+      { type: 'request-payment' },
+      { type: 'support-me' },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    (result.brandPageModel as any).pages[0].contents.forEach((c: any) => {
+      expect(c.backgroundStyle.backgroundColor).toBe(BUTTON_FILL);
+    });
+  });
+
+  test('does not override a backgroundColor that is already set', async () => {
+    const model = modelWith([
+      {
+        type: 'mailing-list',
+        backgroundStyle: { backgroundColor: 'rgb(1, 2, 3)' },
+      },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle
+        .backgroundColor,
+    ).toBe('rgb(1, 2, 3)');
+  });
+
+  test('seeds contact-form via cardStyle (not backgroundStyle) so its container colour is detached from the button', async () => {
+    const model = modelWith([{ type: 'contact-form' }]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const block = (result.brandPageModel as any).pages[0].contents[0];
+
+    expect(block.backgroundStyle).toBeUndefined();
+    expect(block.cardStyle.backgroundColor).toBe(BUTTON_FILL);
+  });
+
+  test('still seeds mailing-list on brand-site (button-fill container on every type)', async () => {
+    const model = modelWith(
+      [{ type: 'mailing-list' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandSite,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle
+        .backgroundColor,
+    ).toBe(BUTTON_FILL);
+  });
+
+  test('leaves out-of-scope content types untouched', async () => {
+    const model = modelWith([{ type: 'banner-section' }, { type: 'text' }]);
+
+    const result = await migration19(createMigrationData(model));
+
+    (result.brandPageModel as any).pages[0].contents.forEach((c: any) => {
+      expect(c.backgroundStyle).toBeUndefined();
+    });
+  });
+
+  test('is a no-op when the button fill colour is undefined', async () => {
+    const model = {
+      styles: { buttonStyles: { style: {} } },
+      pages: [{ contents: [{ type: 'mailing-list' }] }],
+    };
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle,
+    ).toBeUndefined();
+  });
+
+  test('preserves other backgroundStyle keys when seeding', async () => {
+    const model = modelWith([
+      { type: 'mailing-list', backgroundStyle: { opacity: '0.5' } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const bg = (result.brandPageModel as any).pages[0].contents[0]
+      .backgroundStyle;
+
+    expect(bg.backgroundColor).toBe(BUTTON_FILL);
+    expect(bg.opacity).toBe('0.5');
+  });
+
+  test('seeds contact-form cardStyle from the button fill on brand-contact', async () => {
+    const model = modelWith(
+      [{ type: 'contact-form' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandContact,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].cardStyle
+        .backgroundColor,
+    ).toBe(BUTTON_FILL);
+  });
+
+  test('is idempotent — does NOT overwrite a contact-form cardStyle colour that is already set', async () => {
+    const model = modelWith([
+      { type: 'contact-form', cardStyle: { backgroundColor: USER_CARD } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].cardStyle
+        .backgroundColor,
+    ).toBe(USER_CARD);
+  });
+
+  test('preserves other cardStyle keys while seeding the contact-form colour', async () => {
+    const model = modelWith([
+      { type: 'contact-form', cardStyle: { borderRadius: '8px' } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const card = (result.brandPageModel as any).pages[0].contents[0].cardStyle;
+
+    expect(card.backgroundColor).toBe(BUTTON_FILL);
+    expect(card.borderRadius).toBe('8px');
+  });
+
+  test('does NOT touch contact forms on brand-site (keeps its own layout/card behaviour)', async () => {
+    const model = modelWith(
+      [{ type: 'contact-form' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandSite,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].cardStyle,
+    ).toBeUndefined();
+  });
+});

package/src/brand-page/utils/migration/migration-19.ts

@@ -0,0 +1,65 @@
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+const CONTAINER_BACKGROUND_TYPES = new Set<string>([
+  'mailing-list',
+  'request-payment',
+  'support-me',
+]);
+
+type WithBackgroundStyle = {
+  backgroundStyle?: { backgroundColor?: string };
+};
+
+type WithCardStyle = {
+  cardStyle?: { backgroundColor?: string };
+};
+
+export const migration19 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  const buttonFill =
+    brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
+
+  if (buttonFill === undefined) {
+    return migrationResult;
+  }
+
+  const isBrandSite =
+    brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Container-backed blocks: seed their own backgroundStyle on every type.
+      if (CONTAINER_BACKGROUND_TYPES.has(content.type)) {
+        const block = content as WithBackgroundStyle;
+
+        if (block.backgroundStyle?.backgroundColor === undefined) {
+          block.backgroundStyle = {
+            ...block.backgroundStyle,
+            backgroundColor: buttonFill,
+          };
+        }
+
+        return;
+      }
+
+      // Contact form: colour moves to cardStyle — skip on brand-site, which
+      // keeps its own layout/card behaviour.
+      if (content.type === 'contact-form' && !isBrandSite) {
+        const block = content as WithCardStyle;
+
+        if (block.cardStyle?.backgroundColor === undefined) {
+          block.cardStyle = {
+            ...block.cardStyle,
+            backgroundColor: buttonFill,
+          };
+        }
+      }
+    });
+  });
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration.util.ts

@@ -21,6 +21,7 @@ import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
+import { migration19 } from './migration/migration-19';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -167,6 +168,17 @@ const MIGRATION_TABLE = [
     description:
       'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
   },
+  {
+    version: 19,
+    migrateFn: migration19,
+    // runAlways: re-apply on every load so already-published sites pick up the seed
+    // without a version bump. Idempotent — only seeds a colour when unset, so a user
+    // colour is never clobbered. Single pass over the model seeds both container types
+    // and the contact form.
+    runAlways: true,
+    description:
+      'BP-5800: seed the button fill colour as each block’s own container colour so it is independent of the site button (existing sites render unchanged) — backgroundStyle for mailing-list, request-payment and support-me (all types); cardStyle for the BP/BC contact form (skipped on brand-site)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/view-model.util.ts

@@ -887,6 +887,7 @@ const mapToShopViewModel = (
   styles: PageStyles,
 ): ShopViewModel => {
   const buttonStyles = new ButtonStyles({
+    selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     style: {
       ...styles.buttonStyles.style,
     },

package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts

@@ -11,50 +11,58 @@ import {
 
 export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
+> = (content, context) => {
+  return Boolean(
+    content?.layoutStyle &&
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_CARD_CENTER,
+      ALIGN_LEFT_FULL_IMAGE,
+      ALIGN_RIGHT_FULL_IMAGE,
+    ].includes(content?.layoutStyle) &&
+    context?.isBrandSite,
+  );
+};
+
+// Card colour picker: on brand-page/brand-contact it's the collapsible container
+// colour (shown for every layout); on brand-site it's the card in card layouts.
+export const contactCardColorVisibilityAssessor: VisibilityAssessor<
+  ContactFormContent | undefined
 > = (content, context) => {
   return (
-    Boolean(
-      content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_CARD_CENTER,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
-    ) && context!.isBrandSite
+    !context?.isBrandSite ||
+    contactCardDisplayTypeVisibilityAssessor(content, context)
   );
 };
 
 export const displayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return Boolean(content?.layoutStyle === '' || context!.isBrandPage);
+  return Boolean(content?.layoutStyle === '' || context?.isBrandPage);
 };
 
 export const imageUrlVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return (
-    Boolean(
-      content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
-    ) && context!.isBrandSite
+  return Boolean(
+    content?.layoutStyle &&
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_LEFT_FULL_IMAGE,
+      ALIGN_RIGHT_FULL_IMAGE,
+    ].includes(content?.layoutStyle) &&
+    context?.isBrandSite,
   );
 };
 
 export const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return (
-    Boolean(
-      content?.layoutStyle &&
-      [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
-        content?.layoutStyle,
-      ),
-    ) && context!.isBrandSite
+  return Boolean(
+    content?.layoutStyle &&
+    [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
+      content?.layoutStyle,
+    ) &&
+    context?.isBrandSite,
   );
 };