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

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

@@ -0,0 +1,99 @@
+import { v4 as uuid } from 'uuid';
+import type { BrandPageModel, Content } from '@brand-page/models';
+import type { ProductModel } from '@brand-page/models/shop.model';
+import type { PaymentConfig } from '@brand-page/models/payment.model';
+import { isPayment, isShopContent, isSupportMe } from '@brand-page/utils';
+import { generateSku } from './skuUtils';
+
+/**
+ * Refresh a (migrated, current-version) BrandPageModel so it is safe to persist as a *duplicate*.
+ * Two things travel with a verbatim copy that must not: client-minted identifiers that the
+ * brand-page-api keys a global row on, and the source owner's embedded payment connection. This
+ * rotates the former to fresh values and removes the latter, in place — the new owner reconnects
+ * a payment provider explicitly. Runs after migration, so it only ever sees the current shape.
+ *
+ * See docs/architecture/capabilities/shop-duplication.md.
+ */
+export function refreshDuplicatedMetadata(
+  model: BrandPageModel,
+): BrandPageModel {
+  // Site-level payment connection: the authoritative one at checkout — `initialiseShopStore` prefers
+  // it over any content-level config — so it leaks the source owner's account even after the
+  // content-level connections below are cleared. Disconnect it too; the new owner reconnects.
+  model.paymentConfig = undefined;
+
+  model.pages.forEach((page) =>
+    page.contents.forEach((content) => {
+      if (isShopContent(content)) {
+        // Shop products collide on the global product / sku_key tables. The shop's payment-config
+        // link is written with throwaway ids (not the content id), so only the product ids rotate.
+        content.products.forEach(rotateProductIds);
+        disconnectPayment(content.shopPaymentConfig);
+      } else if (isPayment(content)) {
+        resetPaymentBlock(content, content.requestPaymentConfig);
+      } else if (isSupportMe(content)) {
+        resetPaymentBlock(content, content.supportMeConfig);
+      }
+    }),
+  );
+
+  return model;
+}
+
+function rotateProductIds(product: ProductModel): void {
+  product.id = uuid();
+
+  // The option id is the only value cross-referenced inside a product — SKUs point at product
+  // options by id and each skuKey embeds it — so it is remapped through one old→new map and
+  // reused everywhere it reappears. Every other id is standalone and just gets a fresh uuid.
+  const optionIdMap = new Map<string, string>();
+
+  product.variant.forEach((variant) => {
+    variant.id = uuid();
+    variant.options.forEach((option) => {
+      const newId = uuid();
+
+      optionIdMap.set(option.id, newId);
+      option.id = newId;
+    });
+  });
+
+  product.skus.forEach((sku) => {
+    sku.id = uuid();
+
+    sku.variant.forEach((skuVariant) => {
+      skuVariant.id = uuid();
+      skuVariant.option.id = optionIdMap.get(skuVariant.option.id) ?? uuid();
+    });
+
+    // Regenerate from the now-remapped option so the key embeds the new option id and a fresh
+    // random suffix — this is what keeps sku_key globally unique on the copy's first upsert.
+    sku.skuKey = generateSku(product.name, sku.variant[0]?.option);
+  });
+}
+
+/**
+ * request-payment / support-me content. The api keys `content_block_payment_config` on the content
+ * id (PK) and `brand_page_product` on the payment-option id (PK), both global. A verbatim copy
+ * would, on its next payment upsert, repoint the source's config link and adopt its product rows —
+ * so rotate both to make the copy independent, then drop the connection.
+ */
+function resetPaymentBlock(content: Content, config: PaymentConfig): void {
+  content.id = uuid();
+
+  config.paymentOptions.forEach((option) => {
+    option.id = uuid();
+  });
+
+  disconnectPayment(config);
+}
+
+/**
+ * Drop the embedded payment connection (the source owner's payment/Stripe account). The section
+ * keeps its options and amounts but reverts to "not connected"; the new owner reconnects.
+ */
+function disconnectPayment(config: PaymentConfig | undefined): void {
+  if (config) {
+    config.paymentConfig = undefined;
+  }
+}

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.button-section.test.ts

@@ -0,0 +1,126 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import { Toggle } from '@designcrowd/fe-shared-lib';
+import type { LogoTheme } from '@brand-page';
+import { VIEWPORTS } from '@brand-page';
+import HeaderSettingsPanel from './HeaderSettingsPanel.vue';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+
+// BP-5852: the header call-to-action button is brandsite-only, its toggle lives
+// in the Button section's HEADER (final design), and every write syncs both
+// viewports.
+describe('HeaderSettingsPanel — Button section', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    // The Logo section renders alongside the Button one and resolves logo URLs
+    // through the client singleton.
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+  });
+
+  const CollapsiblePanelStub = {
+    template: '<div><slot name="header-actions" /><slot /></div>',
+  };
+
+  const mountPanel = (isBrandSite: boolean) =>
+    shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite,
+        logoTheme: {} as LogoTheme,
+        sectionName: 'header',
+        styleOptions: [],
+      },
+      global: {
+        // The sections live inside CollapsiblePanel slots, which a plain
+        // shallow stub would swallow — render both the header-actions slot
+        // (the toggle) and the body.
+        stubs: { CollapsiblePanel: CollapsiblePanelStub },
+      },
+    });
+
+  const buttonToggle = (wrapper: ReturnType<typeof mountPanel>) =>
+    wrapper
+      .findAllComponents(Toggle)
+      .find(
+        (t) => t.attributes('data-test-header-button-toggle') !== undefined,
+      );
+
+  test('brandsite: the header toggle renders, off, and the fields stay hidden', () => {
+    const wrapper = mountPanel(true);
+
+    expect(buttonToggle(wrapper)).toBeDefined();
+    // the stubbed Toggle carries its props as attributes
+    expect(buttonToggle(wrapper)?.attributes('model-value')).toBe('false');
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('brand page / brand contact: no Button section at all', () => {
+    const wrapper = mountPanel(false);
+
+    expect(buttonToggle(wrapper)).toBeUndefined();
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('toggling on writes isVisible to BOTH viewports and reveals the fields', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    await wrapper.vm.$nextTick();
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+
+  test('expanding the collapsed section via the chevron switches the button on', async () => {
+    const wrapper = mountPanel(true);
+
+    // the Button panel is the last collapsible section
+    const panels = wrapper.findAllComponents(CollapsiblePanelStub);
+    const buttonPanel = panels[panels.length - 1] as VueWrapper;
+
+    await buttonPanel.vm.$emit('changed');
+    await wrapper.vm.$nextTick();
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+
+    // collapsing again must NOT switch it off
+    await buttonPanel.vm.$emit('changed');
+    await wrapper.vm.$nextTick();
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+  });
+
+  test('toggling off hides the fields but keeps the configuration for a re-enable', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    // simulate a label edit, which the mixin dual-writes to both viewports
+    [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+      useUiPageSettingsStore().setPageSettingsSectionValue({
+        sectionName: 'header',
+        propName: 'headerButton',
+        value: { isVisible: true, text: 'Book now', buttonLinkType: 'url' },
+        viewport,
+      });
+    });
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', false);
+    await wrapper.vm.$nextTick();
+
+    const desktop = useUiPageSettingsStore().sections.header[VIEWPORTS.desktop];
+
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+    expect(desktop.headerButton?.isVisible).toBe(false);
+    expect(desktop.headerButton?.text).toBe('Book now');
+  });
+});

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -64,6 +64,7 @@
         :on-select="handleHeaderDisplayStyleChange"
         :viewport="viewport"
         :is-logo-visible="isLogoVisible"
+        :show-header-button="isHeaderButtonVisible"
       />
 
       <NavigationStyleSettings
@@ -144,16 +145,29 @@
       </div>
     </CollapsiblePanel>
 
-    <!-- Button section hidden for now (BP-5854) — re-enable once BP-5852 implements
-         the header button. Left commented rather than removed since the shell
-         (CollapsiblePanel + collapsedSections.button state) is already wired up.
     <CollapsiblePanel
+      v-if="isBrandSite"
       data-component="collapsible-panel"
       :title="pageSettingsTr('buttonSectionTitle')"
       :is-collapsed="collapsedSections.button"
-      @changed="toggleSectionCollapsed('button')"
-    />
-    -->
+      @changed="onButtonSectionChanged"
+    >
+      <template #header-actions>
+        <Toggle
+          id="header-button-visible"
+          data-test-header-button-toggle
+          :model-value="isHeaderButtonVisible"
+          @update:model-value="onHeaderButtonToggle"
+        />
+      </template>
+      <HeaderButtonSettings
+        v-if="isHeaderButtonVisible"
+        :value="headerButton"
+        :is-admin-maker="isAdminMaker"
+        :logo-theme="logoTheme"
+        @on-change="onHeaderButtonChange"
+      />
+    </CollapsiblePanel>
   </div>
 </template>
 <script>
@@ -165,6 +179,7 @@ import {
   Toggle,
 } from '@designcrowd/fe-shared-lib';
 import PageSettingsSectionStyleMixin from '../page-settings-section-styles/PageSettingsSectionStyles.mixin.ts';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
 import HeaderDisplayStyle from '../page-settings-section-styles/HeaderDisplayStyle.vue';
 import HeaderNavigationType from '../page-settings-section-styles/HeaderNavigationType.vue';
 import HeaderNavigationStyle from '../page-settings-section-styles/HeaderNavigationStyle.vue';
@@ -183,6 +198,7 @@ export default {
     Slider,
     TabMenu,
     Toggle,
+    HeaderButtonSettings,
     HeaderDisplayStyle,
     HeaderNavigationType,
     HeaderNavigationStyle,
@@ -222,6 +238,27 @@ export default {
     toggleSectionCollapsed(section) {
       this.collapsedSections[section] = !this.collapsedSections[section];
     },
+    onButtonSectionChanged() {
+      const isExpanding = this.collapsedSections.button;
+
+      this.toggleSectionCollapsed('button');
+
+      // Expanding while the button is off would show an empty body — opening the
+      // section IS the intent to configure it, so switch the button on. Collapsing
+      // never switches it off.
+      if (isExpanding && !this.isHeaderButtonVisible) {
+        this.onHeaderButtonChange({ isVisible: true });
+      }
+    },
+    onHeaderButtonToggle(isVisible) {
+      this.onHeaderButtonChange({ isVisible });
+
+      // Enabling the button is what makes the section worth looking at — open it
+      // so the fields appear with the flick of the toggle (matches the design).
+      if (isVisible) {
+        this.collapsedSections.button = false;
+      }
+    },
   },
 };
 </script>

package/src/shared/page-settings/components/page-settings-section-styles/HeaderButtonSettings.test.ts

@@ -0,0 +1,167 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import type { VueWrapper } from '@vue/test-utils';
+import type { HeaderButton, LogoTheme } from '@brand-page';
+import HeaderButtonSettings from './HeaderButtonSettings.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { useUiStyleSettingsStore } from '../../../style-settings/store/style-settings-store';
+import { availableButtonStyleConfigs } from '@brand-page-maker/models';
+import type { ContentPage } from '../../models';
+
+// A string selector types as WrapperLike, which hides `vm` — the fields are
+// located by their data-test hook rather than by component identity (two of
+// them are ColorFields).
+const emitFrom = (
+  wrapper: VueWrapper,
+  hook: string,
+  payload: unknown,
+): void => {
+  (wrapper.findComponent(hook) as unknown as VueWrapper).vm.$emit(
+    'update:modelValue',
+    payload,
+  );
+};
+
+// BP-5852: the Button panel is a toggle plus the fields it gates. Everything
+// below the toggle renders only while it's on, and every edit leaves through
+// one `on-change` patch (the mixin dual-writes it to both viewports).
+describe('HeaderButtonSettings', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountPanel = (value?: HeaderButton) =>
+    shallowMount(HeaderButtonSettings, {
+      props: {
+        value,
+        isAdminMaker: false,
+        logoTheme: {} as LogoTheme,
+      },
+    });
+
+  const enabled: HeaderButton = {
+    isVisible: true,
+    text: '',
+    buttonLinkType: 'url',
+  };
+
+  const fieldHooks = [
+    '[data-test-header-button-text]',
+    '[data-test-header-button-link-type]',
+    '[data-test-header-button-text-style]',
+    '[data-test-header-button-fill-color]',
+  ];
+
+  // The show/hide toggle lives in the panel HEADER (HeaderSettingsPanel), which
+  // also gates this whole component — so every field renders unconditionally here.
+  test('every field renders', () => {
+    const wrapper = mountPanel(enabled);
+
+    fieldHooks.forEach((hook) => {
+      expect(wrapper.find(hook).exists()).toBe(true);
+    });
+  });
+
+  // Border colour is capability-gated on the site's selected button style, like the
+  // global Style panel: a style without a border would make the control inert.
+  test('the border colour field is hidden while the selected button style draws no border', () => {
+    // default selectedButtonStyleId is BUTTON_STYLE_1, whose options carry no border
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.find('[data-test-header-button-border-color]').exists(),
+    ).toBe(false);
+  });
+
+  test('the border colour field renders when the selected button style has a border', () => {
+    useUiStyleSettingsStore().$patch(($state) => {
+      // availableButtonStyleConfigs starts empty until the store initialises
+      $state.availableButtonStyleConfigs = availableButtonStyleConfigs;
+      $state.buttonStyles.selectedButtonStyleId = 'BUTTON_STYLE_4';
+    });
+
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      wrapper.find('[data-test-header-button-border-color]').exists(),
+    ).toBe(true);
+  });
+
+  test('the link-value field follows the selected link kind', () => {
+    const kinds = {
+      url: '[data-test-header-button-url]',
+      page: '[data-test-header-button-page]',
+      mailTo: '[data-test-header-button-email]',
+      tel: '[data-test-header-button-tel]',
+    } as const;
+
+    Object.entries(kinds).forEach(([kind, hook]) => {
+      const wrapper = mountPanel({
+        ...enabled,
+        buttonLinkType: kind as HeaderButton['buttonLinkType'],
+      });
+
+      Object.values(kinds).forEach((otherHook) => {
+        expect(wrapper.find(otherHook).exists()).toBe(otherHook === hook);
+      });
+    });
+  });
+
+  const linkTypeValues = (wrapper: VueWrapper): string[] => {
+    const group = wrapper.findComponent(
+      '[data-test-header-button-link-type]',
+    ) as unknown as { props(name: string): unknown };
+
+    return (group.props('options') as { value: string }[]).map(
+      (option) => option.value,
+    );
+  };
+
+  test('the four link kinds are offered in a 2-column group', () => {
+    const wrapper = mountPanel(enabled);
+
+    expect(linkTypeValues(wrapper)).toEqual(['url', 'page', 'mailTo', 'tel']);
+    expect(
+      wrapper.find('[data-test-header-button-link-type]').attributes('columns'),
+    ).toBe('2');
+  });
+
+  test('a single-page site drops the Page kind (buttonLinkStyleConvertor)', () => {
+    useUiPageSettingsStore().setPages({
+      pages: [{ id: 'page-1', title: 'Home', contents: [] }] as ContentPage[],
+    });
+
+    expect(linkTypeValues(mountPanel(enabled))).toEqual([
+      'url',
+      'mailTo',
+      'tel',
+    ]);
+  });
+
+  test('a label edit emits only the text patch', () => {
+    const wrapper = mountPanel(enabled);
+
+    emitFrom(wrapper, '[data-test-header-button-text]', {
+      id: 'headerButton',
+      name: 'text',
+      value: 'Book now',
+    });
+
+    expect(wrapper.emitted('on-change')).toEqual([[{ text: 'Book now' }]]);
+  });
+
+  test('a fill-colour pick emits only the fillColor patch', () => {
+    const wrapper = mountPanel(enabled);
+
+    emitFrom(wrapper, '[data-test-header-button-fill-color]', {
+      id: 'fillColor',
+      name: 'fillColor',
+      value: 'var(--palette-2)',
+    });
+
+    expect(wrapper.emitted('on-change')).toEqual([
+      [{ fillColor: 'var(--palette-2)' }],
+    ]);
+  });
+});