@designcrowd/library.brand-page 6.2.0 → 6.2.2-live-preview-1

package/src/brand-page/models/header-button.model.test.ts

@@ -0,0 +1,85 @@
+import { describe, test, expect } from 'vitest';
+import {
+  BrandPageModel,
+  BUTTON_LINK_TYPE,
+  PageHeaderDesktop,
+  PageHeaderMobile,
+  type HeaderButton,
+} from './index';
+
+const aHeaderButton = (): HeaderButton => ({
+  isVisible: true,
+  text: 'Contact Us',
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+  url: 'https://example.com',
+  buttonTextStyle: { textStyleType: 'buttons' },
+  fillColor: '#123456',
+  borderColor: '#654321',
+});
+
+// The constructors copy fields one-by-one — a forgotten field is silently dropped on load.
+describe('header button persistence', () => {
+  describe('PageHeader* constructor', () => {
+    test('keeps a persisted headerButton on both viewports', () => {
+      expect(
+        new PageHeaderDesktop({ headerButton: aHeaderButton() }).headerButton,
+      ).toEqual(aHeaderButton());
+      expect(
+        new PageHeaderMobile({ headerButton: aHeaderButton() }).headerButton,
+      ).toEqual(aHeaderButton());
+    });
+
+    test('leaves headerButton unset when absent (no default seeded)', () => {
+      expect(new PageHeaderDesktop().headerButton).toBeUndefined();
+      expect(new PageHeaderMobile().headerButton).toBeUndefined();
+    });
+
+    test('keeps a page link button with buttonPageId', () => {
+      const button: HeaderButton = {
+        isVisible: true,
+        text: 'About',
+        buttonLinkType: BUTTON_LINK_TYPE.page,
+        buttonPageId: 'page-2',
+      };
+
+      expect(
+        new PageHeaderDesktop({ headerButton: button }).headerButton,
+      ).toEqual(button);
+    });
+  });
+
+  describe('BrandPageModel round-trip', () => {
+    test('survives deserialization from persisted JSON on both viewports', () => {
+      const model = new BrandPageModel({
+        styles: {},
+        pages: [],
+        pageHeaderDesktop: { headerButton: aHeaderButton() },
+        pageHeaderMobile: { headerButton: aHeaderButton() },
+      });
+
+      expect(model.pageHeaderDesktop.headerButton).toEqual(aHeaderButton());
+      expect(model.pageHeaderMobile.headerButton).toEqual(aHeaderButton());
+    });
+
+    test('survives a second pass through the model (re-serialize then re-hydrate)', () => {
+      const first = new BrandPageModel({
+        styles: {},
+        pages: [],
+        pageHeaderDesktop: { headerButton: aHeaderButton() },
+        pageHeaderMobile: { headerButton: aHeaderButton() },
+      });
+
+      const second = new BrandPageModel(JSON.parse(JSON.stringify(first)));
+
+      expect(second.pageHeaderDesktop.headerButton).toEqual(aHeaderButton());
+      expect(second.pageHeaderMobile.headerButton).toEqual(aHeaderButton());
+    });
+
+    test('an existing site with no headerButton stays without one', () => {
+      const model = new BrandPageModel({ styles: {}, pages: [] });
+
+      expect(model.pageHeaderDesktop.headerButton).toBeUndefined();
+      expect(model.pageHeaderMobile.headerButton).toBeUndefined();
+    });
+  });
+});

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

@@ -713,6 +713,17 @@ export class NavModel {
   }
 }
 
+export interface HeaderButton {
+  isVisible: boolean;
+  text: string;
+  buttonLinkType: ButtonLinkType;
+  url?: string;
+  buttonPageId?: string;
+  buttonTextStyle?: TextStyleDeclaration;
+  fillColor?: string;
+  borderColor?: string;
+}
+
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 
 export abstract class AbstractPageHeaderStyles {
@@ -742,6 +753,9 @@ export abstract class AbstractPageHeaderStyles {
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
+  /** Missing = no button. `declare` keeps it off saved data so old migrations still see the same shape. */
+  declare headerButton?: HeaderButton;
+
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
       throw new Error('"viewport" is required');
@@ -779,6 +793,11 @@ export abstract class AbstractPageHeaderStyles {
       ...(options.backgroundStyle || {}),
       backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
     };
+
+    // Only set when given — a missing button must stay missing for old migrations.
+    if (options.headerButton) {
+      this.headerButton = options.headerButton;
+    }
   }
 }
 

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

@@ -17,3 +17,18 @@ export const getSlugFromContext = (context: BrandPageContext) => {
  */
 export const isPreviewMode = (context: BrandPageContext): boolean =>
   !!(context.isPreview || context.isLivePreview);
+
+// Blocks a click in the maker preview (no link-follow, no bubbling); true when it fired.
+export const guardPreviewClick = (
+  event: MouseEvent,
+  context: BrandPageContext,
+): boolean => {
+  if (!context.isPreview) {
+    return false;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  return true;
+};

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

@@ -208,3 +208,16 @@ export const findNavItemByPageSlug = (
 
   return undefined;
 };
+
+// Nav shows when more than one page is visible, or one page has visible subpages.
+// The header row and the side menu both key the button placement off this — one
+// source so the two can never disagree.
+export const hasVisibleNavigation = (navItems: NavItemViewModel[]): boolean => {
+  const visibleNavItems = navItems.filter((item) => !item.isHidden);
+
+  return (
+    visibleNavItems.length > 1 ||
+    (visibleNavItems.length === 1 &&
+      visibleNavItems[0].nestedNavItems.some((item) => !item.isHidden))
+  );
+};

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

@@ -5,8 +5,14 @@ import {
   type MailingListContent,
   type ContactFormContent,
   type ColorItem,
+  type HeaderButton,
+} from '../models';
+import {
+  BRAND_PAGE_TYPES,
+  BUTTON_LINK_TYPE,
+  PageHeaderDesktop,
+  PageStyles,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
 import {
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
@@ -1114,3 +1120,147 @@ 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');
+    });
+
+    // Wrapped lines justify; CSS text-align-last keeps the only/last line centered.
+    test('the label text-align is justify', () => {
+      expect(mapButton({})?.titleStyle.textAlign).toBe('justify');
+    });
+
+    // No label means no button — the maker seeds "Contact Us", so this is a deliberate clear.
+    test.each([[''], ['   ']])(
+      'a blank label hides the button (%j)',
+      (text) => {
+        expect(mapButton({ text })).toBeUndefined();
+      },
+    );
+
+    // 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,71 @@ export const mapToPageStyleViewModel = (
   };
 };
 
+// Maps each link kind to the role Button.vue already understands, so the button needs no new code.
+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 => {
+  // No label means no button — hidden in preview and on the published site.
+  if (!headerButton?.isVisible || !headerButton.text?.trim()) {
+    return undefined;
+  }
+
+  const titleStyle: TextStyleDeclaration = headerButton.buttonTextStyle ?? {
+    textStyleType: TEXT_STYLE_TYPES.buttons,
+  };
+
+  const viewModel = mapToButtonViewModel(
+    {
+      id: 'page-header-button',
+      // Old saved data may have no link kind — treat it as a url.
+      type:
+        HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType] ??
+        HEADER_BUTTON_LINK_ROLES[BUTTON_LINK_TYPE.url],
+      iconUrl: '',
+      modalImageUrl: '',
+      colorReplacements: [],
+      title: headerButton.text.trim(),
+      titleStyle,
+      url: headerButton.url ?? '',
+      page: headerButton.buttonPageId ?? '',
+      clickActionField:
+        headerButton.buttonLinkType === BUTTON_LINK_TYPE.page ? 'page' : 'url',
+    },
+    styles,
+    { titleStyle },
+  );
+
+  return {
+    ...viewModel,
+    // A wrapped label justifies; the last (or only) line stays centered like a short label.
+    titleStyle: {
+      ...viewModel.titleStyle,
+      textAlign: 'justify',
+      textAlignLast: 'center',
+    },
+    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 +1351,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/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -17,16 +17,6 @@ export default defineComponent({
 
     return {
       isAdminMaker: computed(() => containerStore.isAdminMaker),
-      // BP-5873: the Preview button is behind an AB test, and pre/post purchase are
-      // two separate experiments. Pick the one for the current purchase state — a
-      // user's value on the other side is independent and must not leak across.
-      isLivePreviewEnabled: computed(() => {
-        const experiment = containerStore.isPrePurchase
-          ? containerStore.abTests.bp_5873_live_preview_prepurchase
-          : containerStore.abTests.bp_5873_live_preview_postpurchase;
-
-        return !!experiment?.isVariation;
-      }),
       isSaving: computed(() => brandPageMakerStore.isSaving),
       isPublished: computed(() => brandPageMakerStore.isPublished),
       isPublishButtonEnabled: computed(

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -3,31 +3,13 @@ import { createPinia, setActivePinia } from 'pinia';
 import { shallowMount } from '@vue/test-utils';
 import ActionBarNavigation from './ActionBarNavigation.vue';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
-import { getAbTestResults } from '@brand-page/models/brand-page-context.model';
-
-// Must match `CampaignNames.LivePreview*` in bc-net. The two experiments share
-// one set of variation values — they're told apart by campaign key, not value.
-const PREPURCHASE = 'bc-bp-5873-live-preview-prepurchase';
-const POSTPURCHASE = 'bc-bp-5873-live-preview-postpurchase';
-const VARIATION_1 = 'bp-5873-variation-1';
-const CONTROL = 'bp-5873-control';
 
 const mountBar = () => shallowMount(ActionBarNavigation);
 
 const hasPreviewButton = (wrapper: ReturnType<typeof mountBar>) =>
   wrapper.find('[data-test-preview-button]').exists();
 
-// The AB value arrives as the raw bc-net campaign string, so go through the real
-// parser rather than hand-building an AbTestResult — that's the contract under test.
-const setAbTest = (
-  store: ReturnType<typeof useBrandPageContainerStore>,
-  key: string,
-  value: string,
-) => {
-  store.abTests = getAbTestResults({ [key]: value } as never);
-};
-
-describe('ActionBarNavigation — BP-5873 preview AB test', () => {
+describe('ActionBarNavigation — Preview button', () => {
   let containerStore: ReturnType<typeof useBrandPageContainerStore>;
 
   beforeEach(() => {
@@ -35,39 +17,18 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
     containerStore = useBrandPageContainerStore();
   });
 
-  test('hides Preview when no AB value has been sent', () => {
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('post-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = false;
-
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, POSTPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('pre-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = true;
+  test.each([
+    ['pre-purchase', true],
+    ['post-purchase', false],
+  ])('shows Preview to the customer %s', (_, isPrePurchase) => {
+    containerStore.isPrePurchase = isPrePurchase;
 
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, PREPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
-  // Two separate experiments, so a value on one side must never satisfy the other —
-  // otherwise a post-purchase variation would leak the button into pre-purchase.
-  test('the two experiments never read each other', () => {
-    containerStore.isPrePurchase = true;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(false);
+  test('hides Preview in the admin maker', () => {
+    containerStore.isAdminMaker = true;
 
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
@@ -75,8 +36,6 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
   // Save drops out. Preview must be a real column like the rest — while it was content
   // width, Publish ate the whole remaining row on a published site.
   test('Preview shares the mobile row equally with the other buttons', () => {
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
     containerStore.brandPageStatus = 'Published';
 
     const wrapper = mountBar();

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -4,7 +4,7 @@
     class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
     <Button
-      v-if="!isAdminMaker && isLivePreviewEnabled"
+      v-if="!isAdminMaker"
       :label="constantsTr('previewDisplayName')"
       variant="no-border"
       :white="true"

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -39,6 +39,7 @@ export const EVENTS = {
   WEBSITE_MAKER_ADD_PAGE: 'website_maker_add_page',
   WEBSITE_MAKER_REMOVE_PAGE: 'website_maker_remove_page',
   WEBSITE_MAKER_REORDER_PAGE: 'website_maker_reorder_page',
+  WEBSITE_MAKER_DUPLICATE_PAGE: 'website_maker_duplicate_page',
   WEBSITE_MAKER_OPEN: 'website_maker_open',
   WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL:
     'website_maker_publish_upsell_option_modal',
@@ -107,6 +108,7 @@ export const UPGRADE_CTA_LOCATIONS = {
   REMOVE_WATERMARK_FOOTER_SETTINGS: 'remove_watermark_footer_settings',
   PREVIEW_WATERMARK: 'preview_watermark',
   ADD_NEW_PAGE: 'add_new_page',
+  DUPLICATE_PAGE: 'duplicate_page',
   ADD_CONTENT: 'add_content',
   EDITOR_PUBLISH_TOP: 'editor_publish_top',
   EDITOR_PUBLISH_BOTTOM: 'editor_publish_bottom',
@@ -346,6 +348,17 @@ const useEventTracker = () => {
         page_name: pageName,
       });
     },
+    // The SOURCE page, not the copy: tracking the copy would fragment the
+    // dimension across "About Copy", "About Copy 2".
+    sendWebsiteManageDuplicatePageEvent: (
+      sourcePageName: string,
+      isSubPage?: boolean,
+    ) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_DUPLICATE_PAGE, {
+        page_name: sourcePageName,
+        is_sub_page: Boolean(isSubPage),
+      });
+    },
     sendPublishOptionsForFreeEvent: () => {
       _publishEvent(EVENTS.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
         upsell_option_continuation:

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

@@ -93,6 +93,7 @@ import {
   UI_SCREENSIZE_MODES,
 } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { toPageModels } from '@shared/page-settings/utils';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useLocalisedRouteStore } from '../route/localised-route-store';
@@ -1924,10 +1925,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const pageNavigationStore = usePageNavigationStore();
       const paletteStore = useUiColorPaletteStore();
 
-      const pages = pageSettingsStore.pages.map((p) => ({
-        ...p,
-        contents: p.contents.map((c) => c.settings.content),
-      })) as PageModel[];
+      const pages = toPageModels(pageSettingsStore.pages);
 
       const backgroundStyles = backgroundSettingsStore.backgroundStyles;
       const logoStyles = styleSettingsStore.logoStyles;

package/src/brand-page-maker/validators/section-button.validator.ts

@@ -38,14 +38,15 @@ export const textValidator: ContentValidator<BannerSectionContent> = (
   };
 };
 
-export const urlValidator: ContentValidator<
-  BannerSectionContent | BookingSectionContent
-> = (section): ValidateResult => {
+const VALID: ValidateResult = { message: '', isValid: true };
+
+// The link rules alone — the header button uses these directly (its link is always required).
+export const buttonLinkValidator = (
+  section: Pick<BannerSectionContent, 'buttonLinkType' | 'url'>,
+): ValidateResult => {
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.url &&
-    (!isURL(section.url) || containsAtSymbol(section.url)) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
+    (!isURL(section.url) || containsAtSymbol(section.url))
   ) {
     return {
       message: MISSING_BUTTON_URL_MESSAGE(),
@@ -56,9 +57,7 @@ export const urlValidator: ContentValidator<
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.mailTo &&
     typeof section.url === 'string' &&
-    !isEmail(section.url) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
+    !isEmail(section.url)
   ) {
     return {
       message: MISSING_BUTTON_EMAIL_MESSAGE(),
@@ -66,24 +65,29 @@ export const urlValidator: ContentValidator<
     };
   }
 
-  if (
-    section.buttonLinkType === BUTTON_LINK_TYPE.tel &&
-    !isTel(section.url) &&
-    section.buttonText !== false &&
-    section.buttonText?.length > 0
-  ) {
+  if (section.buttonLinkType === BUTTON_LINK_TYPE.tel && !isTel(section.url)) {
     return {
       message: MISSING_BUTTON_TEL_MESSAGE(),
       isValid: false,
     };
   }
 
-  return {
-    message: '',
-    isValid: true,
-  };
+  return VALID;
 };
 
+type ButtonLinkFields = Pick<
+  BannerSectionContent,
+  'buttonLinkType' | 'url' | 'buttonText'
+>;
+
+// The banner's rule: its button text is optional, and only a button with text needs a link.
+export const urlValidator: ContentValidator<ButtonLinkFields> = (
+  section,
+): ValidateResult =>
+  section.buttonText !== false && section.buttonText?.length > 0
+    ? buttonLinkValidator(section)
+    : VALID;
+
 export const pageValidator: ContentValidator<
   BannerSectionContent | BookingSectionContent
 > = (section): ValidateResult => {