@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

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

@@ -10,6 +10,7 @@ import {
 } from '@brand-page';
 import type { ViewportsType } from '@brand-page';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
 import HeaderDisplayStyle from './HeaderDisplayStyle.vue';
 
@@ -31,6 +32,35 @@ const seedNavPages = (count: number): void => {
   }));
 };
 
+const mountTiles = ({
+  displayStyle,
+  navigationDisplayType,
+  viewport = VIEWPORTS.desktop as ViewportsType,
+  isLogoVisible = true,
+  showHeaderButton = false,
+}: {
+  displayStyle: string;
+  navigationDisplayType: string;
+  viewport?: ViewportsType;
+  isLogoVisible?: boolean;
+  showHeaderButton?: boolean;
+}): ButtonGroupOption[] => {
+  const wrapper = shallowMount(HeaderDisplayStyle, {
+    props: {
+      displayStyle,
+      navigationDisplayType,
+      viewport,
+      isLogoVisible,
+      showHeaderButton,
+      onSelect: () => undefined,
+    },
+  });
+
+  return wrapper
+    .findComponent(ButtonGroup)
+    .props('options') as ButtonGroupOption[];
+};
+
 // The button swaps bar + desktop-hamburger tiles to with-button artwork; mobile hamburger stays plain (button lives in the side menu), dataAttribute never changes.
 describe('HeaderDisplayStyle — header-button icon swap', () => {
   beforeEach(() => {
@@ -38,35 +68,6 @@ describe('HeaderDisplayStyle — header-button icon swap', () => {
     seedNavPages(3);
   });
 
-  const mountTiles = ({
-    displayStyle,
-    navigationDisplayType,
-    viewport = VIEWPORTS.desktop as ViewportsType,
-    isLogoVisible = true,
-    showHeaderButton = false,
-  }: {
-    displayStyle: string;
-    navigationDisplayType: string;
-    viewport?: ViewportsType;
-    isLogoVisible?: boolean;
-    showHeaderButton?: boolean;
-  }): ButtonGroupOption[] => {
-    const wrapper = shallowMount(HeaderDisplayStyle, {
-      props: {
-        displayStyle,
-        navigationDisplayType,
-        viewport,
-        isLogoVisible,
-        showHeaderButton,
-        onSelect: () => undefined,
-      },
-    });
-
-    return wrapper
-      .findComponent(ButtonGroup)
-      .props('options') as ButtonGroupOption[];
-  };
-
   const desktopBar = (showHeaderButton: boolean) =>
     mountTiles({
       displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
@@ -352,3 +353,67 @@ describe('HeaderDisplayStyle — migrates an unsupported style while hidden', ()
     expect(selected).toEqual([HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3]);
   });
 });
+
+// BP/BC get brand site's own layout choices for the logo state — except a hamburger
+// viewport, which only ever gets a no-logo layout.
+describe('HeaderDisplayStyle — BP/BC layouts match brand site except hamburger', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    seedNavPages(3);
+  });
+
+  const optionValues = (...args: Parameters<typeof mountTiles>): string[] =>
+    mountTiles(...args).map((option) => option.value);
+
+  test('tabs, logo on: BP/BC offers the same with-logo layouts as brand site', () => {
+    const bs = optionValues({
+      displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      isLogoVisible: true,
+    });
+
+    useBrandPageMakerStore().isBrandPageOrIsBrandContact = true;
+
+    expect(
+      optionValues({
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_5,
+        navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+        isLogoVisible: true,
+      }),
+    ).toEqual(bs);
+  });
+
+  test('tabs, logo off: BP/BC offers the same no-logo layouts as brand site', () => {
+    const bs = optionValues({
+      displayStyle: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
+      navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+      isLogoVisible: false,
+    });
+
+    useBrandPageMakerStore().isBrandPageOrIsBrandContact = true;
+
+    expect(
+      optionValues({
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_1,
+        navigationDisplayType: NAVIGATION_DISPLAY.TAB_1,
+        isLogoVisible: false,
+      }),
+    ).toEqual(bs);
+  });
+
+  test("hamburger: BP/BC only ever offers the viewport's 3 no-logo layouts, even with a with-logo style stored", () => {
+    useBrandPageMakerStore().isBrandPageOrIsBrandContact = true;
+
+    expect(
+      optionValues({
+        displayStyle: HEADER_DISPLAY.DESKTOP_HAMBURGER_1,
+        navigationDisplayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        isLogoVisible: true,
+      }),
+    ).toEqual([
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_1,
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_2,
+      HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
+    ]);
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/HeaderDisplayStyle.vue

@@ -68,35 +68,24 @@ const isHidden = computed((): boolean => {
   );
 });
 
+// BP/BC never get a header logo on a hamburger viewport, regardless of the stored
+// isLogoVisible — the stored style can carry a with-logo one the AI tool wrote.
+const supportLogo = computed(
+  () =>
+    props.isLogoVisible &&
+    !(
+      brandPageMakerStore.isBrandPageOrIsBrandContact &&
+      props.navigationDisplayType.includes('hamburger')
+    ),
+);
+
 const options = computed(() => {
-  let filteredConfigs = HEADER_DISPLAY_STYLE_CONFIGS.filter((config) => {
-    return (
+  const filteredConfigs = HEADER_DISPLAY_STYLE_CONFIGS.filter(
+    (config) =>
       config.viewMode === props.viewport &&
-      config.supportLogo === props.isLogoVisible &&
-      config.supportedNavTypes.includes(props.navigationDisplayType)
-    );
-  });
-
-  if (brandPageMakerStore.isBrandPageOrIsBrandContact) {
-    // TODO: tech debt: brand page display style
-
-    if (
-      props.navigationDisplayType === NAVIGATION_DISPLAY.TAB_1 ||
-      props.navigationDisplayType === NAVIGATION_DISPLAY.TAB_2
-    ) {
-      filteredConfigs = filteredConfigs.filter(
-        (x) =>
-          x.option.value === HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2 ||
-          x.option.value === HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
-      );
-    } else {
-      filteredConfigs = filteredConfigs.filter(
-        (x) =>
-          x.option.value === HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3 ||
-          x.option.value === HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
-      );
-    }
-  }
+      config.supportLogo === supportLogo.value &&
+      config.supportedNavTypes.includes(props.navigationDisplayType),
+  );
 
   // Copy before setting isSelected — the config object is shared app-wide.
   const filteredOptions: ButtonGroupOption[] = filteredConfigs.map(
@@ -124,7 +113,9 @@ const options = computed(() => {
     if (previousSelectedDisplayStyle) {
       alternativeOption = previousSelectedDisplayStyle;
     } else {
-      if (!props.isLogoVisible) {
+      // Matches the filter above: a hamburger viewport never supports a logo on
+      // BP/BC, regardless of the stored isLogoVisible.
+      if (!supportLogo.value) {
         if (props.navigationDisplayType.includes('hamburger')) {
           // select the right aligned hamburger as default when no logo
           alternativeOption =

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.header-button.test.ts

@@ -1,10 +1,19 @@
 import { setLocaleAsync } from '@src/composables/useTranslate';
 import { describe, test, expect, beforeEach } from 'vitest';
 import { createPinia, setActivePinia } from 'pinia';
-import { VIEWPORTS } from '@brand-page';
-import type { HeaderButton } from '@brand-page';
-import mixin from './PageSettingsSectionStyles.mixin';
+import { shallowMount } from '@vue/test-utils';
+import HeaderSettingsPanel from '../header-settings-panel/HeaderSettingsPanel.vue';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores';
+import { PAGE_SECTIONS } from '../../models';
+import type { ContentPage } from '../../models';
+import type { ContentItem } from '../../../content-settings/models';
+import { HEADER_DISPLAY, NAVIGATION_DISPLAY, VIEWPORTS } from '@brand-page';
+import type { LogoContent } from '@brand-page';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+import mixin from './PageSettingsSectionStyles.mixin';
+import type { HeaderButton } from '@brand-page';
 
 // The button is configured once but must land on BOTH viewports; tested against a hand-built context wired to the real store.
 const { onHeaderButtonChange } = (
@@ -112,3 +121,186 @@ describe('PageSettingsSectionStyles.mixin onHeaderButtonChange', () => {
     );
   });
 });
+
+// The Header Settings panel's logo and header-background handlers, all defined on the
+// shared PageSettingsSectionStyles.mixin.ts, exercised here through the real
+// HeaderSettingsPanel (BP/BC) rather than a hand-built mixin context, since they lean on
+// several of the mixin's own computeds (sections, isLogoVisible, logoStore).
+describe('PageSettingsSectionStyles.mixin — header logo and header background', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+    useBrandPageMakerStore().setViewport({ viewport: VIEWPORTS.mobile });
+    // Default NavigationMobile is a hamburger, which hides the Logo section; none of
+    // these rows are about the hamburger case, so give it a tab type up front.
+    useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+      VIEWPORTS.mobile
+    ].displayType = NAVIGATION_DISPLAY.TAB_1;
+  });
+
+  const mountPanel = () =>
+    shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite: false,
+        logoTheme: {},
+        sectionName: PAGE_SECTIONS.header,
+        styleOptions: [],
+      },
+    });
+
+  const header = (viewport: 'mobile' | 'desktop' = VIEWPORTS.mobile) =>
+    useUiPageSettingsStore().sections[PAGE_SECTIONS.header][viewport];
+
+  const aLogoBlockPage = (): ContentPage => ({
+    id: 'page-1',
+    title: 'Home',
+    contents: [
+      {
+        id: 'logo-block-1',
+        type: 'logo',
+        settings: {
+          content: {
+            isLogoVisible: true,
+            logoImageHeight: '6rem',
+            logoImageWidth: '6rem',
+          },
+        },
+      } as ContentItem<LogoContent>,
+    ],
+  });
+
+  test('colour, size, visibility and variation changes land only on sections.header.mobile; a logo content block on the page is untouched', () => {
+    const pageBefore = aLogoBlockPage();
+
+    useUiPageSettingsStore().setPages({ pages: [pageBefore] });
+    const pageSnapshot = JSON.parse(JSON.stringify(pageBefore));
+
+    const wrapper = mountPanel();
+
+    (wrapper.vm as any).onLogoVisibleChanged(false);
+    (wrapper.vm as any).onLogoSizeChanged({ value: 10, suffix: 'rem' });
+    (wrapper.vm as any).onLogoBackgroundColorChange({
+      id: 'logoBackgroundStyle',
+      name: 'backgroundColor',
+      value: '#112233',
+    });
+    (wrapper.vm as any).onLogoVariationSelected(2);
+    (wrapper.vm as any).onHeaderBackgroundColorChange({
+      id: 'backgroundStyle',
+      name: 'backgroundColor',
+      value: '#445566',
+    });
+    (wrapper.vm as any).onHeaderBackgroundOpacityChange(45);
+
+    expect(header().isLogoVisible).toBe(false);
+    expect(header().logoImageHeight).toBe('10rem');
+    expect(header().logoBackgroundStyle?.backgroundColor).toBe('#112233');
+    expect(header().logoImage.logoVariation).toBe(2);
+    expect(header().backgroundStyle?.backgroundColor).toBe('#445566');
+    expect(header().backgroundStyle?.backgroundOpacity).toBe(45);
+
+    // The other viewport's header is untouched — these fields are per-viewport.
+    expect(header(VIEWPORTS.desktop).isLogoVisible).toBe(true);
+
+    // The page's own logo content block never moved.
+    expect(useUiPageSettingsStore().pages).toEqual([pageSnapshot]);
+  });
+
+  test('turning the logo on from a no-logo layout also switches that viewport to the stacked layout (BP/BC header only)', () => {
+    header().isLogoVisible = false;
+    header().displayStyle = HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1;
+
+    const wrapper = mountPanel();
+
+    (wrapper.vm as any).onLogoVisibleChanged(true);
+
+    expect(header().isLogoVisible).toBe(true);
+    expect(header().displayStyle).toBe(HEADER_DISPLAY.MOBILE_TAB_1);
+  });
+
+  test('every header logo and header background handler sends website_maker_update_header_logo with { setting, viewport }; a footer or brand-site header change sends nothing (R18)', () => {
+    const wrapper = mountPanel();
+    const events: { eventName: string; eventProps: any }[] = [];
+
+    (wrapper.vm as any).eventTracker.subscribe((e: any) => events.push(e));
+
+    (wrapper.vm as any).onLogoVisibleChanged(false);
+    (wrapper.vm as any).onLogoSizeChanged({ value: 10, suffix: 'rem' });
+    (wrapper.vm as any).onLogoVariationSelected(1);
+    (wrapper.vm as any).onLogoBackgroundColorChange({
+      id: 'logoBackgroundStyle',
+      name: 'backgroundColor',
+      value: '#112233',
+    });
+    (wrapper.vm as any).onHeaderBackgroundColorChange({
+      id: 'backgroundStyle',
+      name: 'backgroundColor',
+      value: '#445566',
+    });
+    (wrapper.vm as any).onHeaderBackgroundOpacityChange(45);
+
+    const settings = events
+      .filter((e) => e.eventName === 'website_maker_update_header_logo')
+      .map((e) => e.eventProps.setting);
+
+    expect(settings).toEqual([
+      'logoVisible',
+      'logoSize',
+      'logoVariation',
+      'logoBackgroundColor',
+      'backgroundColor',
+      'backgroundOpacity',
+    ]);
+    expect(
+      events.every((e) => e.eventProps.viewport === VIEWPORTS.mobile),
+    ).toBe(true);
+
+    const footerWrapper = shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite: false,
+        logoTheme: {},
+        sectionName: PAGE_SECTIONS.footer,
+        styleOptions: [],
+      },
+    });
+    const footerEvents: { eventName: string }[] = [];
+
+    (footerWrapper.vm as any).eventTracker.subscribe((e: any) =>
+      footerEvents.push(e),
+    );
+    (footerWrapper.vm as any).onLogoSizeChanged({ value: 10, suffix: 'rem' });
+
+    expect(
+      footerEvents.some(
+        (e) => e.eventName === 'website_maker_update_header_logo',
+      ),
+    ).toBe(false);
+
+    const brandSiteWrapper = shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite: true,
+        logoTheme: {},
+        sectionName: PAGE_SECTIONS.header,
+        styleOptions: [],
+      },
+    });
+    const brandSiteEvents: { eventName: string }[] = [];
+
+    (brandSiteWrapper.vm as any).eventTracker.subscribe((e: any) =>
+      brandSiteEvents.push(e),
+    );
+    (brandSiteWrapper.vm as any).onLogoSizeChanged({
+      value: 10,
+      suffix: 'rem',
+    });
+
+    expect(
+      brandSiteEvents.some(
+        (e) => e.eventName === 'website_maker_update_header_logo',
+      ),
+    ).toBe(false);
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -29,10 +29,12 @@ import type {
 } from '@brand-page';
 import {
   BUTTON_LINK_TYPE,
+  HEADER_DISPLAY,
   LOGO_SLIDER_DESKTOP_MAX,
   LOGO_SLIDER_DESKTOP_MIN,
   LOGO_SLIDER_MOBILE_MAX,
   LOGO_SLIDER_MOBILE_MIN,
+  STACKED_LOGO_LAYOUTS,
   VIEWPORTS,
   getNavigationType,
   NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE,
@@ -65,6 +67,7 @@ import {
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { commonTr, pageSettingsSectionTr } from '@src/composables/useTranslate';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 
 // Starting values for a brand-new button; real "Contact Us" text so the label is never empty.
 const newHeaderButton = (): HeaderButton => ({
@@ -123,8 +126,10 @@ export default defineComponent({
     const containerStore = useBrandPageContainerStore();
     const logoStore = useLogoStore();
     const editableLogoStore = useUiEditableLogoStore();
+    const eventTracker = useEventTracker();
 
     return {
+      eventTracker,
       sections: computed(() => pageSettingsStore.sections),
       availableTextFontFamilyOptions: computed(
         () => styleSettingsStore.availableTextFontFamilyOptions,
@@ -155,10 +160,6 @@ export default defineComponent({
   },
 
   computed: {
-    isRenderAfterLogo() {
-      return this.navigation.renderAfterLogo;
-    },
-
     navigation(): NavigationDesktop | NavigationMobile {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
 
@@ -198,13 +199,17 @@ export default defineComponent({
       return this.viewport !== VIEWPORTS.mobile;
     },
 
-    showNavigationBelowLogoOption(): boolean {
-      return (
-        this.sectionName === PAGE_SECTIONS.header &&
-        !this.navigation.displayType.includes('hamburger') &&
-        this.contentSettingsStore.items[0]?.type === 'logo' &&
-        this.contentSettingsStore.items[0]?.settings.content.isLogoVisible
-      );
+    isHamburgerViewport(): boolean {
+      return this.navigation.displayType.includes('hamburger');
+    },
+
+    // Header-only (`logoBackgroundStyle` isn't on a footer section's type).
+    logoBackgroundColor(): string {
+      return this.header.logoBackgroundStyle?.backgroundColor || '';
+    },
+
+    showLogoBackgroundColorField(): boolean {
+      return STACKED_LOGO_LAYOUTS.includes(this.header.displayStyle);
     },
 
     logoImageHeight(): number {
@@ -363,10 +368,15 @@ export default defineComponent({
   },
 
   methods: {
-    toggleShowNavigationBelowLogo() {
-      this.navigationStyleSettingsStore.setNavigationOrder({
-        section: PAGE_SECTIONS.header,
-        renderAfterLogo: !this.isRenderAfterLogo,
+    // Header logo and header background settings are BP/BC/BS-wide, but the event is
+    // BP/BC only, and only for the header, never the footer or a logo content block.
+    trackHeaderLogoChange(setting: string): void {
+      if (!this.isHeader || this.isBrandSite) {
+        return;
+      }
+
+      this.eventTracker.sendWebsiteMakerUpdateHeaderLogoEvent({
+        setting,
         viewport: this.viewport,
       });
     },
@@ -522,6 +532,8 @@ export default defineComponent({
         logoImageWidth: value,
         logoImageBase64Url: this.logoImageBase64Url,
       });
+
+      this.trackHeaderLogoChange('logoSize');
     },
 
     onSocialLinksChange(value: UpdateItemValuePayload<LinksItem[]>) {
@@ -557,6 +569,9 @@ export default defineComponent({
       });
     },
 
+    // Tracking lives in each caller, not here: the logoDraftToken/logoImageBase64Url
+    // computed setters also route through this method, so a call here would double-count
+    // a version change that both assigns a setter and calls this directly.
     updateLogo({
       logoDraftToken,
       logoVariation,
@@ -626,6 +641,26 @@ export default defineComponent({
       });
     },
 
+    // Header-only wrappers: the Header Settings panel's own background and
+    // logo-background colour fields, tracked distinctly from a footer's or a logo
+    // content block's otherwise-identical onSelectColor/onBackgroundOpacityChange calls.
+    onHeaderBackgroundColorChange(
+      selectedColor: UpdateItemValuePayload<string>,
+    ) {
+      this.onSelectColor(selectedColor);
+      this.trackHeaderLogoChange('backgroundColor');
+    },
+
+    onHeaderBackgroundOpacityChange(value: number | string) {
+      this.onBackgroundOpacityChange(value);
+      this.trackHeaderLogoChange('backgroundOpacity');
+    },
+
+    onLogoBackgroundColorChange(selectedColor: UpdateItemValuePayload<string>) {
+      this.onSelectColor(selectedColor);
+      this.trackHeaderLogoChange('logoBackgroundColor');
+    },
+
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>) {
       this.pageSettingsStore.setPageSettingsSectionValue({
         sectionName: this.sectionName,
@@ -643,6 +678,24 @@ export default defineComponent({
 
     onLogoVisibleChanged(showLogo: boolean) {
       this.isLogoVisible = showLogo;
+
+      // BP/BC header: migration-23 can leave a hidden logo's viewport on a no-logo
+      // layout, which has no logo slot to draw into — switch it to the stacked layout
+      // that the Logo section itself offers, same as a manual layout change.
+      if (
+        showLogo &&
+        this.isHeader &&
+        !this.isBrandSite &&
+        this.header.displayStyle.includes('no-logo')
+      ) {
+        this.handleHeaderDisplayStyleChange(
+          this.viewport === VIEWPORTS.mobile
+            ? HEADER_DISPLAY.MOBILE_TAB_1
+            : HEADER_DISPLAY.DESKTOP_TAB_5,
+        );
+      }
+
+      this.trackHeaderLogoChange('logoVisible');
     },
 
     onLogoVariationSelected(selectedLogoVariationIndex: number) {
@@ -661,6 +714,8 @@ export default defineComponent({
           logoVariation: selectedLogoVariationIndex,
         });
       }
+
+      this.trackHeaderLogoChange('logoVariation');
     },
 
     onEditableLogoVariationSelected(selectedLogoVariationBase64: {
@@ -684,6 +739,7 @@ export default defineComponent({
           logoVariation: logoVariation.variationId,
           logoImageBase64Url: selectedLogoVariationBase64.selectedLogoBase64,
         });
+        this.trackHeaderLogoChange('logoVariation');
       }
     },
 
@@ -691,7 +747,10 @@ export default defineComponent({
       const uiStore = useUiStore();
       const _brandPageMakerStore = useBrandPageMakerStore();
 
+      // The setter above already writes the token; track once here rather than
+      // again from the updateLogo call below, which only refines the same change.
       this.logoDraftToken = selectedLogoVersion.token;
+      this.trackHeaderLogoChange('logoVariation');
 
       const logoDraftAsset = this.logoStore.getLogoDraftAssetByToken(
         this.logoDraftToken,

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.de-DE.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Navigation unter dem Logo anzeigen",
     "previewDescription": "Eine Vorschau ist für diese Bildschirmgröße nicht verfügbar.",
     "navigationStyle": "Navigationsstil",
     "navigationType": "Navigationstyp",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.es-ES.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Muestra la navegación debajo del logo",
     "previewDescription": "La vista previa no está disponible en este tamaño de pantalla.",
     "navigationStyle": "Estilo de navegación",
     "navigationType": "Tipo de navegación",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-CA.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Afficher la navigation sous le logo",
     "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
     "navigationStyle": "Style de navigation",
     "navigationType": "Type de navigation",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-FR.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Afficher la navigation sous le logo",
     "previewDescription": "L'aperçu n'est pas disponible pour cette taille d'écran.",
     "navigationStyle": "Style de navigation",
     "navigationType": "Type de navigation",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Show navigation below logo",
     "previewDescription": "Preview is not available on this screen size.",
     "navigationStyle": "Navigation style",
     "navigationType": "Navigation type",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-BR.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Mostrar navegação abaixo do logotipo",
     "previewDescription": "A visualização não está disponível neste tamanho de tela.",
     "navigationStyle": "Estilo de navegação",
     "navigationType": "Tipo de navegação",

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-PT.json

@@ -1,6 +1,5 @@
 {
   "pageSettingsSection": {
-    "showNavigationBelow": "Mostrar a navegação por baixo do logótipo",
     "previewDescription": "A pré-visualização não está disponível neste tamanho de ecrã.",
     "navigationStyle": "Estilo de navegação",
     "navigationType": "Tipo de navegação",

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -260,6 +260,28 @@ describe('page store module', () => {
     expect(route?.pageSlug).toEqual('page-4');
   });
 
+  test('addNewPage adds no logo block for a brand page — the header is its home', async () => {
+    // Arrange
+    const store = useBrandPageMakerStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    await store.initialise(INITIALISE_PAYLOAD);
+
+    pageSettingsStore.setPages({
+      pages: [PAGE_ONE, PAGE_TWO],
+    });
+
+    // Act
+    const newPage = pageSettingsStore.addNewPage({
+      title: 'Page 3',
+    });
+
+    // Assert
+    const addedPage = pageSettingsStore.pages.find((p) => p.id === newPage.id);
+
+    expect(addedPage?.contents).toEqual([]);
+  });
+
   test('setPages should navigate to original page when removed', () => {
     // Arrange
     const store = useBrandPageMakerStore();