@designcrowd/library.brand-page 6.1.16 → 6.1.17-ast-header-button

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

@@ -5,9 +5,16 @@ import {
   type MailingListContent,
   type ContactFormContent,
   type ColorItem,
+  type HeaderButton,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
 import {
+  BRAND_PAGE_TYPES,
+  BUTTON_LINK_TYPE,
+  PageHeaderDesktop,
+  PageStyles,
+} from '../models';
+import {
+  HEADER_BUTTON_FALLBACK_TEXT,
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
   mapToImageViewModel,
@@ -1114,3 +1121,141 @@ describe('container-aware text colour defaults (view-model layer)', () => {
     expect(vm.nameStyle?.color).toBe('#00ff00');
   });
 });
+
+describe('mapToPageHeaderViewModel header button', () => {
+  const headerButton: HeaderButton = {
+    isVisible: true,
+    text: 'Contact Us',
+    buttonLinkType: BUTTON_LINK_TYPE.url,
+    url: 'https://example.com',
+    buttonTextStyle: { textStyleType: 'buttons' },
+    fillColor: '#123456',
+    borderColor: '#654321',
+  };
+
+  describe('headerButtonViewModel', () => {
+    const mapButton = (overrides: Partial<HeaderButton> = {}) =>
+      mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: { ...headerButton, ...overrides },
+        }),
+        new PageStyles(),
+        [],
+      ).headerButtonViewModel;
+
+    test('is absent when the header has no button at all', () => {
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop(),
+        new PageStyles(),
+        [],
+      );
+
+      expect(vm.headerButtonViewModel).toBeUndefined();
+    });
+
+    test('is absent when the button is configured but hidden', () => {
+      expect(mapButton({ isVisible: false })).toBeUndefined();
+    });
+
+    test('carries the authored label', () => {
+      expect(mapButton({ text: 'Book now' })?.title).toBe('Book now');
+    });
+
+    test.each([[''], ['   ']])(
+      'falls back to "Contact Us" for a blank label (%j)',
+      (text) => {
+        expect(mapButton({ text })?.title).toBe(HEADER_BUTTON_FALLBACK_TEXT);
+      },
+    );
+
+    // Button.vue reads the link kind off `role` for non-section content, so the
+    // authored link type has to land on the role/clickActionField pair.
+    test.each([
+      [BUTTON_LINK_TYPE.url, 'general-link', 'url'],
+      [BUTTON_LINK_TYPE.page, 'general-link', 'page'],
+      [BUTTON_LINK_TYPE.mailTo, 'email', 'url'],
+      [BUTTON_LINK_TYPE.tel, 'phone', 'url'],
+    ])(
+      'maps the %s link type to role %s / clickActionField %s',
+      (buttonLinkType, role, clickActionField) => {
+        const vm = mapButton({ buttonLinkType });
+
+        expect(vm?.role).toBe(role);
+        expect(vm?.clickActionField).toBe(clickActionField);
+      },
+    );
+
+    test('routes a page link through the picked page id', () => {
+      const vm = mapButton({
+        buttonLinkType: BUTTON_LINK_TYPE.page,
+        buttonPageId: 'page-2',
+        url: undefined,
+      });
+
+      expect(vm?.page).toBe('page-2');
+      expect(vm?.pageSlug).toBe('page-2');
+    });
+
+    test('overrides the theme fill and border with the authored colours', () => {
+      const vm = mapButton({ fillColor: '#123456', borderColor: '#654321' });
+
+      expect(vm?.styles.style.backgroundColor).toBe('#123456');
+      expect(vm?.styles.style.borderColor).toBe('#654321');
+    });
+
+    test('keeps the site button style when no colours are authored', () => {
+      const styles = new PageStyles();
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: {
+            ...headerButton,
+            fillColor: undefined,
+            borderColor: undefined,
+          },
+        }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.styles.style.backgroundColor).toBe(
+        styles.buttonStyles.style.backgroundColor,
+      );
+      expect(vm?.styles.selectedButtonStyleId).toBe(
+        styles.buttonStyles.selectedButtonStyleId,
+      );
+    });
+
+    test('resolves the button text style against the site text styles', () => {
+      const styles = new PageStyles();
+
+      styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
+
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({ headerButton }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+    });
+
+    // The maker writes buttonTextStyle only once the author touches the style field,
+    // so an untouched button still has to inherit the site's button text style.
+    test('defaults to the site button text style when none is authored', () => {
+      const styles = new PageStyles();
+
+      styles.textStyles.textStyleOptions.buttons.style.fontFamily = 'Lato';
+
+      const vm = mapToPageHeaderViewModel(
+        new PageHeaderDesktop({
+          headerButton: { ...headerButton, buttonTextStyle: undefined },
+        }),
+        styles,
+        [],
+      ).headerButtonViewModel;
+
+      expect(vm?.titleStyle?.textStyleType).toBe('buttons');
+      expect(vm?.titleStyle?.fontFamily).toBe('Lato');
+    });
+  });
+});

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

@@ -44,8 +44,11 @@ import type {
   NavRoute,
   NavOrder,
   ColorItem,
+  HeaderButton,
+  ButtonLinkType,
+  ContentType,
 } from '../models';
-import { ButtonStyles, VIEWPORTS } from '../models';
+import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
 import {
   NavigationMobile,
   NavigationDesktop,
@@ -1189,6 +1192,69 @@ export const mapToPageStyleViewModel = (
   };
 };
 
+// Must stay in step with the maker's `pageSettingsSection.buttonLabelPlaceholder`
+// (page-settings-section.json) — the placeholder shows what an empty label publishes as.
+export const HEADER_BUTTON_FALLBACK_TEXT = 'Contact Us';
+
+/**
+ * `Button.vue` reads the link kind off `role` for every non-section role, so the header
+ * CTA's authored `buttonLinkType` is expressed as the role (+ `clickActionField` for a
+ * page link) that component already resolves — no new branch in the button itself.
+ */
+const HEADER_BUTTON_LINK_ROLES: Record<ButtonLinkType, ContentType> = {
+  [BUTTON_LINK_TYPE.url]: 'general-link',
+  [BUTTON_LINK_TYPE.page]: 'general-link',
+  [BUTTON_LINK_TYPE.mailTo]: 'email',
+  [BUTTON_LINK_TYPE.tel]: 'phone',
+};
+
+const mapToHeaderButtonViewModel = (
+  headerButton: HeaderButton | undefined,
+  styles: PageStyles,
+): ButtonViewModel | undefined => {
+  if (!headerButton?.isVisible) {
+    return undefined;
+  }
+
+  const titleStyle: TextStyleDeclaration = headerButton.buttonTextStyle ?? {
+    textStyleType: TEXT_STYLE_TYPES.buttons,
+  };
+
+  const viewModel = mapToButtonViewModel(
+    {
+      id: 'page-header-button',
+      type: HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType],
+      iconUrl: '',
+      modalImageUrl: '',
+      colorReplacements: [],
+      title: headerButton.text?.trim() || HEADER_BUTTON_FALLBACK_TEXT,
+      titleStyle,
+      url: headerButton.url ?? '',
+      page: headerButton.buttonPageId ?? '',
+      clickActionField:
+        headerButton.buttonLinkType === BUTTON_LINK_TYPE.page ? 'page' : 'url',
+    },
+    styles,
+    { titleStyle },
+  );
+
+  return {
+    ...viewModel,
+    styles: {
+      ...viewModel.styles,
+      style: {
+        ...viewModel.styles.style,
+        ...(headerButton.fillColor
+          ? { backgroundColor: headerButton.fillColor }
+          : {}),
+        ...(headerButton.borderColor
+          ? { borderColor: headerButton.borderColor }
+          : {}),
+      },
+    },
+  };
+};
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1283,6 +1349,10 @@ export const mapToPageHeaderViewModel = (
           }),
     style: pageHeader.style,
     backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+    headerButtonViewModel: mapToHeaderButtonViewModel(
+      pageHeader.headerButton,
+      pageStyles,
+    ),
   };
 };
 

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

@@ -259,11 +259,14 @@ export interface PageHeaderViewModel extends Omit<
   | 'logoTemplateImage'
   | 'logoImageHeight'
   | 'logoImageWidth'
+  | 'headerButton'
   | 'backgroundStyle'
 > {
   logo: LogoViewModel;
   pages: PageViewModel[];
   backgroundStyle: BrandPageCssStyle;
+  /** Absent unless the header call-to-action button is configured AND visible. */
+  headerButtonViewModel?: ButtonViewModel;
 }
 
 export interface PageFooterViewModel extends Omit<

package/src/bundles/bundled-translations.json

@@ -1867,7 +1867,13 @@
     "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Label",
+    "buttonLabelPlaceholder": "Contact Us",
+    "buttonLink": "Link",
+    "buttonPhonePlaceholder": "12345-6789",
+    "buttonFillColor": "Fill color",
+    "buttonBorderColor": "Border color"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Search",

package/src/lib.ts

@@ -126,6 +126,7 @@ export {
   useRouteStore,
 } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
+export { refreshDuplicatedMetadata } from './shared/ecommerce-settings/util/refreshDuplicatedMetadata';
 
 // for jest, need to set active pinia in library.brand-page as well
 import { createPinia, setActivePinia } from 'pinia';

package/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.test.ts

@@ -0,0 +1,399 @@
+import { describe, it, expect } from 'vitest';
+import { refreshDuplicatedMetadata } from './refreshDuplicatedMetadata';
+import type { BrandPageModel } from '@brand-page/models';
+import type { ProductModel } from '@brand-page/models/shop.model';
+
+const variantProduct = (): ProductModel => ({
+  id: 'p1',
+  name: 'Denim Jacket',
+  description: '',
+  imageUrl: '',
+  defaultPrice: 10,
+  hasVariants: true,
+  enableNotes: false,
+  variant: [
+    {
+      id: 'v1',
+      name: 'Colour',
+      options: [
+        { id: 'o1', name: 'Black', price: 10 },
+        { id: 'o2', name: 'White', price: 12 },
+      ],
+    },
+  ],
+  skus: [
+    {
+      id: 's1',
+      price: 10,
+      skuKey: 'denim-jacket-o1-Black-abc123',
+      variant: [
+        {
+          id: 'v1',
+          name: 'Colour',
+          option: { id: 'o1', name: 'Black', price: 10 },
+        },
+      ],
+    },
+    {
+      id: 's2',
+      price: 12,
+      skuKey: 'denim-jacket-o2-White-def456',
+      variant: [
+        {
+          id: 'v1',
+          name: 'Colour',
+          option: { id: 'o2', name: 'White', price: 12 },
+        },
+      ],
+    },
+  ],
+});
+
+const noVariantProduct = (): ProductModel => ({
+  id: 'p2',
+  name: 'Sticker',
+  description: '',
+  imageUrl: '',
+  defaultPrice: 5,
+  hasVariants: false,
+  enableNotes: false,
+  variant: [],
+  skus: [{ id: 's3', price: 5, skuKey: 'sticker-nv-zzz999', variant: [] }],
+});
+
+const multiVariantProduct = (): ProductModel => ({
+  id: 'mp1',
+  name: 'Tee',
+  description: '',
+  imageUrl: '',
+  defaultPrice: 20,
+  hasVariants: true,
+  enableNotes: false,
+  variant: [
+    {
+      id: 'cv',
+      name: 'Colour',
+      options: [
+        { id: 'c-black', name: 'Black', price: 20 },
+        { id: 'c-white', name: 'White', price: 20 },
+      ],
+    },
+    {
+      id: 'sv',
+      name: 'Size',
+      options: [
+        { id: 's-s', name: 'S', price: 20 },
+        { id: 's-m', name: 'M', price: 22 },
+      ],
+    },
+  ],
+  skus: [
+    {
+      id: 'k1',
+      price: 20,
+      skuKey: 'tee-c-black-Black-a',
+      variant: [
+        {
+          id: 'cv',
+          name: 'Colour',
+          option: { id: 'c-black', name: 'Black', price: 20 },
+        },
+      ],
+    },
+    {
+      id: 'k2',
+      price: 20,
+      skuKey: 'tee-c-white-White-b',
+      variant: [
+        {
+          id: 'cv',
+          name: 'Colour',
+          option: { id: 'c-white', name: 'White', price: 20 },
+        },
+      ],
+    },
+    {
+      id: 'k3',
+      price: 20,
+      skuKey: 'tee-s-s-S-c',
+      variant: [
+        { id: 'sv', name: 'Size', option: { id: 's-s', name: 'S', price: 20 } },
+      ],
+    },
+    {
+      id: 'k4',
+      price: 22,
+      skuKey: 'tee-s-m-M-d',
+      variant: [
+        { id: 'sv', name: 'Size', option: { id: 's-m', name: 'M', price: 22 } },
+      ],
+    },
+  ],
+});
+
+const paymentConfigStub = () => ({
+  id: 'cfg-1',
+  name: "Seller's Stripe",
+  status: 'active',
+  defaultCurrency: 'USD',
+  defaultCurrencySymbol: '$',
+  paymentProviderName: 'stripe',
+  paymentProviderImageUrl: '',
+  dashboardUrl: 'https://dashboard.stripe.com/x',
+});
+
+const requestPaymentContent = () => ({
+  type: 'request-payment',
+  id: 'rp1',
+  requestPaymentConfig: {
+    paymentConfig: paymentConfigStub(),
+    paymentOptions: [
+      { id: 'po1', amount: '10', name: 'Small' },
+      { id: 'po2', amount: '20', name: 'Large' },
+    ],
+  },
+});
+
+const supportMeContent = () => ({
+  type: 'support-me',
+  id: 'sm1',
+  supportMeConfig: {
+    paymentConfig: paymentConfigStub(),
+    paymentOptions: [{ id: 'so1', amount: '5', name: 'Coffee' }],
+  },
+});
+
+const shopWithConfig = (products: ProductModel[]) => ({
+  type: 'shop-section',
+  id: 'shop1',
+  products,
+  shopPaymentConfig: {
+    paymentConfig: paymentConfigStub(),
+    paymentOptions: [],
+  },
+});
+
+const modelWith = (contents: unknown[]): BrandPageModel =>
+  ({ pages: [{ contents }] }) as unknown as BrandPageModel;
+
+const shopModel = (products: ProductModel[]): BrandPageModel =>
+  modelWith([{ type: 'shop-section', products }]);
+
+const collectIds = (products: ProductModel[]): string[] =>
+  products.flatMap((p) => [
+    p.id,
+    ...p.variant.flatMap((v) => [v.id, ...v.options.map((o) => o.id)]),
+    ...p.skus.flatMap((s) => [
+      s.id,
+      ...s.variant.flatMap((sv) => [sv.id, sv.option.id]),
+    ]),
+  ]);
+
+describe('refreshDuplicatedMetadata — shop id rotation', () => {
+  it('R1 — rotates every product/sku/variant/option id (no input id survives)', () => {
+    const products = [variantProduct(), noVariantProduct()];
+    const before = new Set(collectIds(products));
+    const beforeKeys = new Set(
+      products.flatMap((p) => p.skus.map((s) => s.skuKey)),
+    );
+
+    const out = shopModel(products);
+
+    refreshDuplicatedMetadata(out);
+    const after = collectIds(products);
+
+    expect(after.every((id) => !before.has(id))).toBe(true);
+    products
+      .flatMap((p) => p.skus.map((s) => s.skuKey))
+      .forEach((key) => expect(beforeKeys.has(key)).toBe(false));
+  });
+
+  it('R2 — preserves the SKU→option linkage (each sku option id maps to a product option id)', () => {
+    const products = [variantProduct()];
+
+    refreshDuplicatedMetadata(shopModel(products));
+
+    products.forEach((p) => {
+      const productOptionIds = new Set(
+        p.variant.flatMap((v) => v.options.map((o) => o.id)),
+      );
+
+      p.skus.forEach((s) =>
+        s.variant.forEach((sv) =>
+          expect(productOptionIds.has(sv.option.id)).toBe(true),
+        ),
+      );
+    });
+  });
+
+  it('R3 — regenerates each skuKey to a fresh value that embeds the new option id', () => {
+    const product = variantProduct();
+
+    refreshDuplicatedMetadata(shopModel([product]));
+
+    product.skus.forEach((s) => {
+      const newOptionId = s.variant[0].option.id;
+
+      expect(s.skuKey).toContain(newOptionId);
+      expect(s.skuKey.startsWith('denim-jacket-')).toBe(true);
+    });
+    // The two SKUs still get distinct keys.
+    expect(product.skus[0].skuKey).not.toBe(product.skus[1].skuKey);
+  });
+
+  it('R4 — no-variant product keeps the "nv" skuKey shape with a fresh id', () => {
+    const product = noVariantProduct();
+
+    refreshDuplicatedMetadata(shopModel([product]));
+
+    const sku = product.skus[0];
+
+    expect(sku.id).not.toBe('s3');
+    expect(sku.skuKey).toBe(`sticker-nv-${sku.skuKey.split('-').pop()}`);
+    expect(sku.skuKey).not.toBe('sticker-nv-zzz999');
+  });
+
+  it('R5 — no-op when there is no shop content (and does not throw)', () => {
+    const model = modelWith([{ type: 'text', text: 'hello' }]);
+
+    expect(() => refreshDuplicatedMetadata(model)).not.toThrow();
+
+    // An empty shop section is also a clean no-op.
+    const emptyShop = shopModel([]);
+
+    expect(() => refreshDuplicatedMetadata(emptyShop)).not.toThrow();
+  });
+
+  it('R6 — multi-variant product: every SKU still links to a product option after rotation', () => {
+    const product = multiVariantProduct();
+
+    refreshDuplicatedMetadata(shopModel([product]));
+
+    const productOptionIds = new Set(
+      product.variant.flatMap((v) => v.options.map((o) => o.id)),
+    );
+
+    expect(productOptionIds.size).toBe(4);
+    product.skus.forEach((s) =>
+      s.variant.forEach((sv) =>
+        expect(productOptionIds.has(sv.option.id)).toBe(true),
+      ),
+    );
+  });
+
+  it('R7 — rotates shop content across multiple sections and pages with no id collisions', () => {
+    const p1 = variantProduct();
+    const p2 = variantProduct();
+
+    const model = {
+      pages: [
+        {
+          contents: [
+            { type: 'shop-section', products: [p1] },
+            { type: 'text', text: 'x' },
+          ],
+        },
+        { contents: [{ type: 'shop-section', products: [p2] }] },
+      ],
+    } as unknown as BrandPageModel;
+
+    refreshDuplicatedMetadata(model);
+
+    // Two products from identical fixtures must share no id across sections/pages. (Within a
+    // product, a SKU's option id equals its product option id by design — the R2 linkage — so
+    // the check is cross-product disjointness, not global uniqueness.)
+    const ids1 = new Set(collectIds([p1]));
+    const p2Ids = collectIds([p2]);
+
+    expect(p2Ids.some((id) => ids1.has(id))).toBe(false);
+  });
+});
+
+describe('refreshDuplicatedMetadata — payment connection reset', () => {
+  it('P1 — request-payment: rotates the content id and every option id, and drops the connection', () => {
+    const content = requestPaymentContent();
+
+    refreshDuplicatedMetadata(modelWith([content]));
+
+    // Content id (content_block_payment_config PK) and option ids (brand_page_product PK) are the
+    // global keys a reconnect would otherwise clash the source on — both rotated.
+    expect(content.id).not.toBe('rp1');
+    expect(
+      content.requestPaymentConfig.paymentOptions.map((o) => o.id),
+    ).not.toContain('po1');
+    expect(
+      content.requestPaymentConfig.paymentOptions.map((o) => o.id),
+    ).not.toContain('po2');
+    // Amounts/labels are kept — only the ids change and the provider is disconnected.
+    expect(
+      content.requestPaymentConfig.paymentOptions.map((o) => o.amount),
+    ).toEqual(['10', '20']);
+    expect(content.requestPaymentConfig.paymentConfig).toBeUndefined();
+  });
+
+  it('P2 — support-me: rotates the content id and option ids, and drops the connection', () => {
+    const content = supportMeContent();
+
+    refreshDuplicatedMetadata(modelWith([content]));
+
+    expect(content.id).not.toBe('sm1');
+    expect(content.supportMeConfig.paymentOptions[0].id).not.toBe('so1');
+    expect(content.supportMeConfig.paymentOptions[0].amount).toBe('5');
+    expect(content.supportMeConfig.paymentConfig).toBeUndefined();
+  });
+
+  it('P3 — shop: drops the checkout connection but keeps (rotated) products and the content id', () => {
+    const product = variantProduct();
+    const content = shopWithConfig([product]);
+
+    refreshDuplicatedMetadata(modelWith([content]));
+
+    // The seller's Stripe connection is removed…
+    expect(content.shopPaymentConfig.paymentConfig).toBeUndefined();
+    // …but products are still rotated (shop collides on product ids, not the content id)…
+    expect(product.id).not.toBe('p1');
+    // …and the shop content id is deliberately left alone (its config link uses throwaway ids).
+    expect(content.id).toBe('shop1');
+  });
+
+  it('P4 — mixed page: each payment block is reset, non-payment content is untouched', () => {
+    const rp = requestPaymentContent();
+    const sm = supportMeContent();
+    const shop = shopWithConfig([variantProduct()]);
+    const text = { type: 'text', id: 'txt1', text: 'hello' };
+
+    expect(() =>
+      refreshDuplicatedMetadata(modelWith([rp, sm, shop, text])),
+    ).not.toThrow();
+
+    expect(rp.requestPaymentConfig.paymentConfig).toBeUndefined();
+    expect(sm.supportMeConfig.paymentConfig).toBeUndefined();
+    expect(shop.shopPaymentConfig.paymentConfig).toBeUndefined();
+    expect(text).toEqual({ type: 'text', id: 'txt1', text: 'hello' });
+  });
+
+  it('P5 — already-disconnected payment block: still rotates ids and stays disconnected', () => {
+    const content = requestPaymentContent();
+
+    content.requestPaymentConfig.paymentConfig = undefined as never;
+
+    expect(() => refreshDuplicatedMetadata(modelWith([content]))).not.toThrow();
+
+    expect(content.id).not.toBe('rp1');
+    expect(content.requestPaymentConfig.paymentOptions[0].id).not.toBe('po1');
+    expect(content.requestPaymentConfig.paymentConfig).toBeUndefined();
+  });
+
+  it('P6 — clears the site-level paymentConfig (the authoritative checkout connection)', () => {
+    // initialiseShopStore prefers model.paymentConfig over any content-level config, so leaving it
+    // would still route the copy's checkout to the source owner even with the shop section cleared.
+    const model = {
+      paymentConfig: paymentConfigStub(),
+      pages: [{ contents: [shopWithConfig([variantProduct()])] }],
+    } as unknown as BrandPageModel;
+
+    refreshDuplicatedMetadata(model);
+
+    expect(model.paymentConfig).toBeUndefined();
+  });
+});