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

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

@@ -0,0 +1,214 @@
+import cloneDeep from 'lodash.clonedeep';
+import type { MigrationData, MigrationOptions } from '../migration.util';
+import {
+  BRAND_PAGE_TYPES,
+  HEADER_DISPLAY,
+  type AbstractPageHeaderStyles,
+  type HeaderDisplayStyle,
+  type LogoContent,
+  type NavModel,
+  type PageModel,
+} from '../../';
+import { isLogoContent } from '../model.util';
+
+// Mirrors the published site's own home rule: navItems[0] (slug-routes.composable.ts).
+// A nav with no orders has no first entry to open, so it falls back to the first page.
+const findHomePage = (
+  nav: NavModel,
+  pages: PageModel[],
+): PageModel | undefined => {
+  if (nav.orders.length === 0) {
+    return pages[0];
+  }
+
+  const homeRoute = nav.routes.find(
+    (route) => route.id === nav.orders[0].routeId,
+  );
+
+  return pages.find((page) => page.id === homeRoute?.pageId);
+};
+
+// Frozen copy of `hasVisibleNavigation` (route.util.ts) against the raw orders/routes a
+// migration sees, instead of the NavItemViewModel the live renderer builds.
+const isNavShown = (nav: NavModel): boolean => {
+  const isRouteVisible = (routeId: string): boolean => {
+    const route = nav.routes.find((r) => r.id === routeId);
+
+    return route !== undefined && !route.isHidden;
+  };
+
+  const visibleOrders = nav.orders.filter((order) =>
+    isRouteVisible(order.routeId),
+  );
+
+  return (
+    visibleOrders.length > 1 ||
+    (visibleOrders.length === 1 &&
+      visibleOrders[0].subRoutes.some((subRoute) =>
+        isRouteVisible(subRoute.routeId),
+      ))
+  );
+};
+
+const isFirstBlockAShownLogo = (page: PageModel | undefined): boolean => {
+  const first = page?.contents[0];
+
+  return isLogoContent(first) && first.isLogoVisible;
+};
+
+const isFirstBlockALogo = (page: PageModel | undefined): boolean =>
+  isLogoContent(page?.contents[0]);
+
+// The home page's own leading block, shown or hidden; any other shape means the header
+// keeps what it already has.
+const findSourceLogoBlock = (
+  homePage: PageModel | undefined,
+): LogoContent | undefined => {
+  const homeBlock = homePage?.contents[0];
+
+  return homeBlock && isLogoContent(homeBlock) ? homeBlock : undefined;
+};
+
+// Retired field read raw (legacy-migrations.md).
+const takeRenderAfterLogo = (
+  navigation: AbstractPageHeaderStyles['navigation'],
+): boolean => {
+  const raw = navigation as unknown as Record<string, unknown>;
+  const value = raw['renderAfterLogo'] === true;
+
+  delete raw['renderAfterLogo'];
+
+  return value;
+};
+
+// A tab layout always becomes the centred no-logo layout: today's BP/BC nav draws
+// centred whatever is stored. Matched by the absence of "no-logo" in the stored value
+// itself, not an enum allowlist, so a value this migration has never seen can't slip
+// through unclassified.
+const nextDisplayStyle = (
+  viewport: {
+    header: AbstractPageHeaderStyles;
+    stacked: HeaderDisplayStyle;
+    tabNoLogo: HeaderDisplayStyle;
+    hamburgerNoLogo: HeaderDisplayStyle;
+    isHamburger: boolean;
+  },
+  showsLogo: boolean,
+): HeaderDisplayStyle => {
+  if (showsLogo) {
+    return viewport.stacked;
+  }
+
+  if (viewport.isHamburger) {
+    return viewport.header.displayStyle.includes('no-logo')
+      ? viewport.header.displayStyle
+      : viewport.hamburgerNoLogo;
+  }
+
+  return viewport.tabNoLogo;
+};
+
+/**
+ * Each viewport decides on its own whether the home page's logo sits above the nav there:
+ * if so, the header takes the block's values, shown, centred; otherwise the same values,
+ * hidden. `options.isTemplate` (blank site, create-draft, template apply, or the admin
+ * maker editing a template) treats every tab viewport as above the nav, regardless of the
+ * stored setting. See `backward-compatibility.md`.
+ */
+export const migration23 = async (
+  migrationResult: MigrationData,
+  options?: MigrationOptions,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  if (brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+    const { pageHeaderDesktop, pageHeaderMobile } = brandPageModel;
+
+    if (pageHeaderDesktop && pageHeaderMobile) {
+      for (const header of [pageHeaderDesktop, pageHeaderMobile]) {
+        takeRenderAfterLogo(header.navigation);
+      }
+    }
+
+    return migrationResult;
+  }
+
+  const { pages, nav, pageHeaderDesktop, pageHeaderMobile } = brandPageModel;
+
+  if (!nav || !pageHeaderDesktop || !pageHeaderMobile || !pages) {
+    return migrationResult;
+  }
+
+  const navShown = isNavShown(nav);
+  const homePage = findHomePage(nav, pages);
+  const sourceBlock = findSourceLogoBlock(homePage);
+
+  // No real `renderAfterLogo` to honour on this path; see the function doc above.
+  const treatAsAboveTheNav = options?.isTemplate === true;
+
+  const viewports = [
+    {
+      header: pageHeaderDesktop,
+      stacked: HEADER_DISPLAY.DESKTOP_TAB_5,
+      tabNoLogo: HEADER_DISPLAY.DESKTOP_TAB_NO_LOGO_2,
+      hamburgerNoLogo: HEADER_DISPLAY.DESKTOP_HAMBURGER_NO_LOGO_3,
+    },
+    {
+      header: pageHeaderMobile,
+      stacked: HEADER_DISPLAY.MOBILE_TAB_1,
+      tabNoLogo: HEADER_DISPLAY.MOBILE_TAB_NO_LOGO_1,
+      hamburgerNoLogo: HEADER_DISPLAY.MOBILE_HAMBURGER_NO_LOGO_3,
+    },
+  ].map((v) => {
+    const isHamburger = v.header.navigation.displayType.includes('hamburger');
+    const renderAfterLogo = takeRenderAfterLogo(v.header.navigation);
+
+    return {
+      ...v,
+      isHamburger,
+      logoAboveNav:
+        !isHamburger && (treatAsAboveTheNav || (navShown && renderAfterLogo)),
+    };
+  });
+
+  // A new site's header carries every page's leading logo block whether or not it was
+  // shown (R29); an existing site only carries one the home page actually showed.
+  const startsWithLogo = treatAsAboveTheNav
+    ? isFirstBlockALogo
+    : isFirstBlockAShownLogo;
+
+  // Collected before any header write: stripping a block must not change what "above
+  // the nav" saw, for the home page's own copy above or any other page's own check.
+  const pagesToStrip = viewports.every((v) => v.logoAboveNav)
+    ? pages.filter(startsWithLogo)
+    : [];
+
+  for (const v of viewports) {
+    const { header } = v;
+    const showsLogo = treatAsAboveTheNav
+      ? v.logoAboveNav
+      : v.logoAboveNav && isFirstBlockAShownLogo(homePage);
+
+    if (sourceBlock) {
+      header.logoImage = cloneDeep(sourceBlock.logoImage);
+      header.logoTemplateImage =
+        cloneDeep(sourceBlock.logoTemplateImage) || undefined;
+      header.logoImageHeight = sourceBlock.logoImageHeight;
+      header.logoImageWidth = sourceBlock.logoImageWidth;
+      header.logoBackgroundStyle = cloneDeep(sourceBlock.backgroundStyle);
+    }
+
+    header.isLogoVisible = showsLogo;
+    header.displayStyle = nextDisplayStyle(v, showsLogo);
+    header.backgroundStyle = {
+      ...header.backgroundStyle,
+      backgroundColor: 'transparent',
+    };
+  }
+
+  pagesToStrip.forEach((page) => {
+    page.contents.shift();
+  });
+
+  return migrationResult;
+};

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

@@ -3,6 +3,8 @@ import { migrateNewLogoLogic } from './migration/migration-01';
 import { migration17 } from './migration/migration-17';
 import { migration22 } from './migration/migration-22';
 import type * as Migration22Module from './migration/migration-22';
+import { migration23 } from './migration/migration-23';
+import type * as Migration23Module from './migration/migration-23';
 import {
   BrandPageModel,
   type BrandPageData,
@@ -49,6 +51,12 @@ vi.mock('./migration/migration-22', async (importOriginal) => {
   return { ...actual, migration22: vi.fn(actual.migration22) };
 });
 
+vi.mock('./migration/migration-23', async (importOriginal) => {
+  const actual = await importOriginal<typeof Migration23Module>();
+
+  return { ...actual, migration23: vi.fn(actual.migration23) };
+});
+
 describe('migration.util', () => {
   const getBsModel: () => BrandPageModel = () => {
     return {
@@ -2488,10 +2496,6 @@ describe('migration.util', () => {
       vi.mocked(migration22).mockClear();
     });
 
-    test('22 is the latest model version', () => {
-      expect(GetLatestModelVersion()).toBe(22);
-    });
-
     test('migration 22 upgrades a v=21 model to v=22', async () => {
       const { brandPageModel } = await migrateBrandPageModel(
         {
@@ -2503,7 +2507,7 @@ describe('migration.util', () => {
       );
 
       expect(migration22).toHaveBeenCalledTimes(1);
-      expect(brandPageModel.v).toBe(22);
+      expect(brandPageModel.v).toBe(GetLatestModelVersion());
     });
 
     test('migration 22 does not rerun on a v=22 model', async () => {
@@ -2517,11 +2521,33 @@ describe('migration.util', () => {
       );
 
       expect(migration22).not.toHaveBeenCalled();
-      expect(brandPageModel.v).toBe(22);
+      expect(brandPageModel.v).toBe(GetLatestModelVersion());
 
       await migrateBrandPageModel(brandPageModel, options);
 
       expect(migration22).not.toHaveBeenCalled();
     });
   });
+
+  describe('migration 23 - header logo migration', () => {
+    const options = { isUserDraft: true, isServerRender: false };
+
+    beforeEach(() => {
+      vi.mocked(migration23).mockClear();
+    });
+
+    test('header logo migration upgrades a v=22 model to v=23', async () => {
+      const { brandPageModel } = await migrateBrandPageModel(
+        {
+          v: 22,
+          pages: [{ contents: [] }],
+          styles: {},
+        } as unknown as BrandPageModel,
+        options,
+      );
+
+      expect(migration23).toHaveBeenCalledTimes(1);
+      expect(brandPageModel.v).toBe(23);
+    });
+  });
 });

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

@@ -26,6 +26,7 @@ import { migration20 } from './migration/migration-20';
 import { migration20_5 } from './migration/migration-20_5';
 import { migration21 } from './migration/migration-21';
 import { migration22 } from './migration/migration-22';
+import { migration23 } from './migration/migration-23';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -37,6 +38,9 @@ export interface MigrationOptions {
   isUserDraft: boolean;
   isServerRender: boolean;
   disableLogoSizeMigration?: boolean;
+  /** A new BP/BC site, in or on its way to the maker: blank site, create-draft, template
+   * apply, or the admin maker editing a template (migration-23's own new-site rule). */
+  isTemplate?: boolean;
 }
 
 interface MigrationTableItem {
@@ -246,6 +250,15 @@ const MIGRATION_TABLE = [
     description:
       'BP-5969 Global Text Style V2: expand 4 roles -> 10 (H1-6/P1-3/button); roles keep default typography, reconnect all content to its nearest tier with its size kept as a per-block override, seed role colour + strip baked RTE typography (appearance-preserving, once)',
   },
+  {
+    version: 23,
+    migrateFn: migration23,
+    // Version-gated: runs once, when modelVersion < 23. Not re-run safe on BP/BC:
+    // renderAfterLogo is deleted, so a second pass would hide every header logo while
+    // the stripped blocks stay gone.
+    description:
+      "BP-6183 Header logo migration: renderAfterLogo deleted from every header; BP/BC headers take the home page's own leading logo block where it sits above the nav per viewport (hidden with its values otherwise); that block removed once the header carries it on both viewports; header background colour cleared",
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

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

@@ -3,14 +3,18 @@ import {
   brandPageData,
   brandPageNoLogoData,
 } from '../__fixtures__/brand-page-sample-data';
-import { BrandPageModel, type LogoImageModel } from '../models';
+import {
+  BRAND_PAGE_TYPES,
+  BrandPageModel,
+  type LogoImageModel,
+} from '../models';
 import * as logoUtil from './logo.util';
 
 const LOGO_IMAGE_URL =
   'https://staging-dynamic.brandcrowd.com/asset/logodraft/brand-page/7a0545cd-ff28-46c2-a496-36cf7fd1b91b?v=637684854579600000&dimensionsType=preview_image_transparent_no_buffer&outputFormat=png';
 
 describe('model.util', () => {
-  test('applyLogoImageToBrandPageModelLogoContents should return brand page model with replaced logo image url', () => {
+  test('applyLogoImageToBrandPageModelLogoContents should return brand page model with replaced logo image url, header included', () => {
     // Arrange
     const logoImage: LogoImageModel = {
       ...logoUtil.safeGetLogoImageFromLogoImageUrl(LOGO_IMAGE_URL)!,
@@ -26,6 +30,27 @@ describe('model.util', () => {
     expect(model).toMatchSnapshot();
   });
 
+  test('applyLogoImageToBrandPageModelLogoContents leaves a brand site header untouched', () => {
+    const logoImage: LogoImageModel = {
+      ...logoUtil.safeGetLogoImageFromLogoImageUrl(LOGO_IMAGE_URL)!,
+    };
+
+    const bsModel = new BrandPageModel(brandPageData);
+
+    bsModel.brandPageType = BRAND_PAGE_TYPES.brandSite;
+
+    const originalToken = bsModel.pageHeaderDesktop.logoImage.logoDraftToken;
+
+    applyLogoImageToBrandPageModelLogoContents(bsModel, logoImage);
+
+    expect(bsModel.pageHeaderDesktop.logoImage.logoDraftToken).toBe(
+      originalToken,
+    );
+    expect(bsModel.pageHeaderMobile.logoImage.logoDraftToken).toBe(
+      originalToken,
+    );
+  });
+
   test('applyLogoImageToBrandPageModelLogoContents should not modify data when no logo in model', () => {
     // Arrange
     const logoImage: LogoImageModel = {

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

@@ -20,6 +20,7 @@ import {
   type RequestPaymentContent,
   type ContactFormContent,
   type LogoImageModel,
+  BRAND_PAGE_TYPES,
   CONTENT_TYPES,
   type ShopContent,
   type ImageContent,
@@ -45,6 +46,11 @@ export const applyLogoImageToBrandPageModelLogoContents = (
     }),
   );
 
+  if (model.brandPageType !== BRAND_PAGE_TYPES.brandSite) {
+    model.pageHeaderDesktop.logoImage = logoImage;
+    model.pageHeaderMobile.logoImage = logoImage;
+  }
+
   return model;
 };
 

package/src/brand-page/utils/personalisation.util.test.ts

@@ -2,6 +2,7 @@ import { BrandPageModel, BRAND_PAGE_TYPES } from '../models';
 import type {
   BannerSectionContent,
   EmailContent,
+  FaqSectionContent,
   GeneralLinkContent,
   ImageGalleryContent,
   ImagesSectionContent,
@@ -28,6 +29,7 @@ import {
   createInitialTestimonialSectionContent,
   createInitialProfileContent,
   createInitialButtonContent,
+  createInitialFaqSectionContent,
 } from '@brand-page-maker/models';
 import { faker } from '@faker-js/faker';
 import { isTiptapDocument } from '@brand-page-maker/utils';
@@ -860,6 +862,57 @@ describe('personalisation.util', async () => {
     );
   });
 
+  test('applyUserPersonalisationToBrandPageModelAsync personalises an FAQ title, description and each item', async () => {
+    const faq = createInitialFaqSectionContent();
+    const faqContent = {
+      ...faq,
+      title: 'title',
+      description: 'description',
+      items: [
+        {
+          ...faq.items[0],
+          id: 'q1',
+          question: 'Question 1',
+          answer: 'Answer 1',
+        },
+        {
+          ...faq.items[0],
+          id: 'q2',
+          question: 'Question 2',
+          answer: 'Answer 2',
+        },
+      ],
+      personalisationRole: 'about',
+    } as FaqSectionContent;
+
+    const model = new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      pages: [{ title: 'home', slug: 'home', contents: [faqContent] }],
+    });
+
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      PERSONALISATION,
+      model,
+    );
+
+    const personalised = result.model.pages[0].contents[0] as FaqSectionContent;
+    const sourceItems = PERSONALISATION.aboutSection.items!;
+
+    expect(result.isModified).toBe(true);
+    expect(personalised.title).toBe(PERSONALISATION.aboutSection.title);
+    expect(personalised.description).toBe(
+      PERSONALISATION.aboutSection.descriptionShort,
+    );
+    expect(personalised.items.map((item) => item.question)).toEqual([
+      sourceItems[0].itemTitle,
+      sourceItems[1].itemTitle,
+    ]);
+    expect(personalised.items.map((item) => item.answer)).toEqual([
+      sourceItems[0].itemDescription,
+      sourceItems[1].itemDescription,
+    ]);
+  });
+
   test('applyUserPersonalisationToBrandPageModelAsync should not personlise certain element if override has `none`', async () => {
     // Arrange
     const textContent = {

package/src/brand-page/utils/style.util.test.ts

@@ -476,6 +476,29 @@ describe('style.util', () => {
     );
   });
 
+  test('applyLogoThemeToBrandPageModel keeps a stored header logo background colour', () => {
+    // Arrange
+    const logoTheme = logoWithFlatColorsTheme;
+    const logoBackgroundStyle = { backgroundColor: 'var(--palette-custom-x)' };
+    const model = new BrandPageModel({
+      ...BRAND_SITE,
+      pages: [],
+      pageHeaderMobile: new PageHeaderMobile({ logoBackgroundStyle }),
+      pageHeaderDesktop: new PageHeaderDesktop({ logoBackgroundStyle }),
+    });
+
+    // Act
+    const { model: result } = applyLogoThemeToBrandPageModel(logoTheme, model);
+
+    // Assert
+    expect(result.pageHeaderMobile.logoBackgroundStyle).toEqual(
+      logoBackgroundStyle,
+    );
+    expect(result.pageHeaderDesktop.logoBackgroundStyle).toEqual(
+      logoBackgroundStyle,
+    );
+  });
+
   test('applyLogoThemeToBrandPageStyleRecursive copy key value to new style when value is not a string or object', () => {
     // Arrange
     const logoTheme: LogoTheme = {
@@ -489,7 +512,7 @@ describe('style.util', () => {
       },
     };
 
-    const style = { renderAfterLogo: true };
+    const style = { isLogoVisible: true };
 
     // Act
     const { newStyle } = applyLogoThemeToBrandPageStyleRecursive(
@@ -499,7 +522,7 @@ describe('style.util', () => {
     );
 
     // Assert
-    expect((newStyle as any).renderAfterLogo).toBe(true);
+    expect((newStyle as any).isLogoVisible).toBe(true);
   });
 
   test('parseLogoThemeToCssStyles should return default values when given empty arrays', () => {

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

@@ -14,6 +14,7 @@ import {
   BUTTON_LINK_TYPE,
   BrandPageModel,
   PageHeaderDesktop,
+  PageHeaderMobile,
   PageStyles,
 } from '../models';
 import {
@@ -27,15 +28,24 @@ import {
   mapToTextViewModel,
   mapToViewModel,
   applyViewModelTextStyles,
+  applyLogoImageToBrandPageViewModel,
+  applyLogoImageToBrandPageModel,
+  applyLogoTemplateImageToBrandPageViewModel,
   getBrandPageViewModelFromBrandPageModel,
   getCriticalResourceURLs,
   resolveSaveContactTitleStyle,
 } from './view-model.util';
 import type { BrandPageViewModel } from '../view-models';
+import type {
+  BrandPageType,
+  LogoImageModel,
+  LogoTemplateImageModel,
+} from '../models';
 import {
   ALIGN_CARD_CENTER,
   HEADER_DISPLAY,
   NAVIGATION_DISPLAY,
+  STACKED_LOGO_LAYOUTS,
 } from '../constants';
 import * as uuid from 'uuid';
 import {
@@ -809,6 +819,134 @@ describe('view model util', () => {
     );
   });
 
+  // The header logo's background colour draws only in the two stacked layouts (logo
+  // centred above or below the nav); elsewhere the stored colour is kept but nothing paints.
+  describe('mapToPageHeaderViewModel header logo background', () => {
+    const A_COLOUR = { backgroundColor: 'var(--palette-1)' };
+
+    test.each(STACKED_LOGO_LAYOUTS)(
+      'stacked layouts draw the stored colour (%s)',
+      (displayStyle) => {
+        const header = displayStyle.startsWith('desktop')
+          ? new PageHeaderDesktop({
+              displayStyle,
+              logoBackgroundStyle: A_COLOUR,
+            })
+          : new PageHeaderMobile({
+              displayStyle,
+              logoBackgroundStyle: A_COLOUR,
+            });
+
+        const viewModel = mapToPageHeaderViewModel(
+          header,
+          new PageStyles(),
+          [],
+        );
+
+        expect(viewModel.logo.styles.backgroundStyle.backgroundColor).toBe(
+          'var(--palette-1)',
+        );
+      },
+    );
+
+    test('a side-by-side layout draws nothing, and the stored colour is left as is; mobile with none draws nothing', () => {
+      const header = new PageHeaderDesktop({
+        displayStyle: HEADER_DISPLAY.DESKTOP_TAB_1,
+        logoBackgroundStyle: A_COLOUR,
+      });
+
+      const viewModel = mapToPageHeaderViewModel(header, new PageStyles(), []);
+
+      expect(viewModel.logo.styles.backgroundStyle).toEqual({});
+      expect(header.logoBackgroundStyle).toEqual(A_COLOUR);
+
+      const mobile = mapToPageHeaderViewModel(
+        new PageHeaderMobile(),
+        new PageStyles(),
+        [],
+      );
+
+      expect(mobile.logo.styles.backgroundStyle).toEqual({});
+    });
+  });
+
+  describe('logo appliers write both header viewports for BP/BC', () => {
+    // Footers are brand-site only; headers never start with a logo image/template
+    // image of their own here, so a defined value after the call proves the write.
+    const makeViewModel = (brandPageType: BrandPageType): BrandPageViewModel =>
+      ({
+        brandPageType,
+        pages: [{ contents: [] }],
+        headerViewModelDesktop: { logo: {} },
+        headerViewModelMobile: { logo: {} },
+        footerViewModelDesktop: { logo: {} },
+        footerViewModelMobile: { logo: {} },
+      }) as unknown as BrandPageViewModel;
+
+    test('applyLogoImageToBrandPageViewModel writes both header viewports for a brand page; footer stays brand-site only', () => {
+      const logoImage = {
+        logoDraftToken: 'new-token',
+        logoVariation: 0,
+        logoLastUpdate: undefined,
+      } as LogoImageModel;
+
+      const bp = applyLogoImageToBrandPageViewModel(
+        makeViewModel(BRAND_PAGE_TYPES.default),
+        logoImage,
+      );
+
+      expect(bp.headerViewModelDesktop.logo.logoImage).toBe(logoImage);
+      expect(bp.headerViewModelMobile.logo.logoImage).toBe(logoImage);
+      expect(bp.footerViewModelDesktop.logo.logoImage).toBeUndefined();
+    });
+
+    test('applyLogoTemplateImageToBrandPageViewModel writes both header viewports for a brand page; footer stays brand-site only', () => {
+      const logoTemplateImage = {
+        logoTemplateToken: 'tmpl-token',
+      } as LogoTemplateImageModel;
+
+      const bp = applyLogoTemplateImageToBrandPageViewModel(
+        makeViewModel(BRAND_PAGE_TYPES.brandContact),
+        logoTemplateImage,
+      );
+
+      expect(bp.headerViewModelDesktop.logo.logoTemplateImage).toBe(
+        logoTemplateImage,
+      );
+      expect(bp.headerViewModelMobile.logo.logoTemplateImage).toBe(
+        logoTemplateImage,
+      );
+      expect(bp.footerViewModelDesktop.logo.logoTemplateImage).toBeUndefined();
+    });
+
+    test('applyLogoImageToBrandPageModel writes both header viewports for a brand page; footer stays brand-site only', () => {
+      const logoImage = {
+        logoDraftToken: 'new-token',
+        logoVariation: 0,
+        logoLastUpdate: undefined,
+      } as LogoImageModel;
+
+      const makeModel = (brandPageType: BrandPageType) =>
+        ({
+          brandPageType,
+          pages: [{ contents: [] }],
+          pageHeaderDesktop: {},
+          pageHeaderMobile: {},
+          pageFooterDesktop: {},
+          pageFooterMobile: {},
+        }) as unknown as BrandPageModel;
+
+      const bp = applyLogoImageToBrandPageModel(
+        makeModel(BRAND_PAGE_TYPES.default),
+        logoImage,
+      );
+
+      expect(bp.pageHeaderDesktop.logoImage).toBe(logoImage);
+      expect(bp.pageHeaderMobile.logoImage).toBe(logoImage);
+      expect(bp.pageFooterDesktop.logoImage).toBeUndefined();
+    });
+  });
+
   // BP-5969 (R1) — page data keeps only what a field sets itself; the painter references
   // the role for the rest (`roleTypographyStyle`/`fillRteRunTypography`). Colour, alignment,
   // autoscale and `textStyleType` still resolve here; the seven typography keys do not merge.