@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store-utils.ts

@@ -2,7 +2,12 @@ import type {
   AdminPreviewLogoTemplateModel,
   AdminPreviewLogoTemplateTemplate,
 } from './admin-logo-settings-store';
-import type { BrandPageType, ColorItem, Content } from '@brand-page';
+import type {
+  BrandPageType,
+  ColorItem,
+  Content,
+  TextStyles,
+} from '@brand-page';
 import { BrandPageModel, PageStyles } from '@brand-page';
 import {
   applyLogoThemeToBrandPageModel,
@@ -11,7 +16,12 @@ import {
 } from '@brand-page/utils';
 
 export const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate =
-  (contents: Content[], brandPageType: BrandPageType, colors: ColorItem[]) =>
+  (
+    contents: Content[],
+    brandPageType: BrandPageType,
+    colors: ColorItem[],
+    textStyles: TextStyles,
+  ) =>
   (
     templateModel: AdminPreviewLogoTemplateModel,
   ): AdminPreviewLogoTemplateTemplate => {
@@ -24,7 +34,10 @@ export const mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate =
     // logo: roles 0/1 from the logoTheme, neutrals re-derived, customs untouched.
     const { model } = applyLogoThemeToBrandPageModel(
       logoTheme,
-      new BrandPageModel({ contents, styles: new PageStyles({ colors }) }),
+      new BrandPageModel({
+        contents,
+        styles: new PageStyles({ colors, textStyles }),
+      }),
     );
 
     const templateModelLogoImage =

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.test.ts

@@ -6,7 +6,9 @@ import {
 } from './admin-logo-settings-store';
 import { useUiColorPaletteStore } from '@shared/color-palette/store';
 import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import type { ColorItem } from '@brand-page';
+import { CANONICAL_TEXT_STYLE_TYPES } from '@brand-page/models/styles.model';
 
 // rgba(0,0,0,1) → #000000 · rgba(241,176,74,1) → #f1b04a (canonicalSolidHex)
 const previewModel = (
@@ -121,4 +123,36 @@ describe('admin-logo-settings-store', () => {
       ).toBe(true);
     });
   });
+
+  describe('templates', () => {
+    const cardFontSize = (
+      adminStore: ReturnType<typeof useAdminLogoSettingsStore>,
+      role: (typeof CANONICAL_TEXT_STYLE_TYPES)[number],
+    ) =>
+      adminStore.templates[0].brandPageModel.styles?.textStyles
+        .textStyleOptions[role].style.fontSize;
+
+    test('cards follow the Style tab roles and repaint when a role is edited', () => {
+      const adminStore = useAdminLogoSettingsStore();
+      const styleStore = useUiStyleSettingsStore();
+      const role = CANONICAL_TEXT_STYLE_TYPES[0];
+
+      adminStore.setPreviewLogoTemplateModels({ models: [previewModel()] });
+
+      const edit = (fontSize: string) =>
+        styleStore.setTextStyleOption({
+          type: role,
+          style: {
+            ...styleStore.textStyles.textStyleOptions[role].style,
+            fontSize,
+          },
+        });
+
+      edit('99px');
+      expect(cardFontSize(adminStore, role)).toBe('99px');
+
+      edit('42px');
+      expect(cardFontSize(adminStore, role)).toBe('42px');
+    });
+  });
 });

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.ts

@@ -16,6 +16,7 @@ import {
 } from '@shared/logo-settings/store';
 import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
 import { useUiColorPaletteStore } from '@shared/color-palette/store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { parseLogoThemeToCssStyles, logoUtil } from '@brand-page/utils';
 import { mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate } from './admin-logo-settings-store-utils';
 import { useBrandPageMakerStore } from '../brandpage-maker';
@@ -170,9 +171,10 @@ export const useAdminLogoSettingsStore = defineStore('adminLogoSettings', {
         mapAdminPreviewLogoTemplateModelToAdminLogoTemplateTemplate(
           contents,
           brandPageMakerStore.brandPageType,
-          // Contents and their palette travel together — the card scope must
-          // define every var(--id) the contents reference.
+          // Contents travel with the styles they reference — the card scope must define
+          // every var(--id) and every role the contents use.
           useUiColorPaletteStore().colors,
+          useUiStyleSettingsStore().textStyles,
         ),
       );
     },

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

@@ -1,10 +1,13 @@
 import { vi } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import {
   BRAND_PAGE as BRAND_PAGE_FIXTURE,
   INITIALISE_PAYLOAD as INITIALISE_PAYLOAD_FIXTURE,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
+  BRAND_PAGE_TYPES,
   BrandPageModel,
   type ContactFormContent,
   emptyGlobalTextStyleDeclaration,
@@ -59,6 +62,8 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
+import { createInitialBrandPage } from '@brand-page-maker/models';
+import { pickTypography } from '@shared/text-role-typography.util';
 
 /**
  * Per-test copies of the shared fixtures — never use the imported originals.
@@ -141,6 +146,25 @@ describe('brand page maker store module', () => {
     expect(brandPageData.styles.buttonStyles.iconStyle).toBeDefined();
   });
 
+  test('a loaded v21 site carries no textFontFamily into brandPageData (0036-retire-text-font-family.md)', async () => {
+    const store = useBrandPageMakerStore();
+    const stored = JSON.parse(
+      readFileSync(
+        join(
+          __dirname,
+          '../../../brand-page/__fixtures__/migration-22-v21/real-brandcontact.v21.json',
+        ),
+        'utf8',
+      ),
+    );
+
+    stored.styles.textStyles.textFontFamily = 'quattrocentoSans';
+
+    await store.initialise({ ...INITIALISE_PAYLOAD, brandPage: stored });
+
+    expect(JSON.stringify(store.brandPageData)).not.toContain('textFontFamily');
+  });
+
   test('showBrandCrowdLogo should be set to expected value when initialised with features', async () => {
     // Arrange
     const store = useBrandPageMakerStore();
@@ -1057,6 +1081,63 @@ describe('brand page maker store module', () => {
     ).toBe(true);
   });
 
+  test('saveContactSettings keeps its buttonTextStyle from load to the save payload', async () => {
+    const makerStore = useBrandPageMakerStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const buttonTextStyle = {
+      textStyleType: TEXT_STYLE_TYPES.button,
+      fontFamily: 'Oswald',
+    };
+
+    await makerStore.initialiseStoresByBrandPageModelAsync({
+      ...makerStore.brandPageData,
+      saveContactSettings: {
+        isSavingEnabled: true,
+        hideBranding: false,
+        buttonTextStyle,
+      },
+    });
+
+    expect(makerStore.brandPageData.saveContactSettings).toMatchObject({
+      buttonTextStyle,
+    });
+  });
+
+  test('saveContactSettings keeps a loaded buttonTextStyle, and drops it when the next site loaded has none', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const buttonTextStyle = {
+      textStyleType: TEXT_STYLE_TYPES.button,
+      fontFamily: 'Oswald',
+    };
+
+    await makerStore.initialise({
+      ...INITIALISE_PAYLOAD,
+      brandPage: {
+        ...BRAND_PAGE,
+        saveContactSettings: {
+          isSavingEnabled: true,
+          hideBranding: false,
+          buttonTextStyle,
+        },
+      },
+    });
+
+    expect(makerStore.brandPageData.saveContactSettings).toMatchObject({
+      buttonTextStyle,
+    });
+
+    await makerStore.initialise({
+      ...INITIALISE_PAYLOAD,
+      brandPage: structuredClone(BRAND_PAGE_FIXTURE),
+    });
+
+    expect(
+      makerStore.brandPageData.saveContactSettings?.buttonTextStyle,
+    ).toBeUndefined();
+  });
+
   test('initialiseStoresByBrandPageModelAsync clears a button link to a page the AI removed', async () => {
     const makerStore = useBrandPageMakerStore();
 
@@ -1238,7 +1319,7 @@ describe('brand page maker store module', () => {
    * BP-5886 — a template is saved LOGO-CONTEXT-LESS. The 4 brand-role values an
    * admin sees while designing come from whatever test logo their session had
    * loaded, so shipping them would hand the next customer someone else's brand
-   * colours. `migration23` (or the logo-theme bake) assigns them when a customer's
+   * colours. The logo-theme bake assigns them when a customer's
    * logo is injected. Customs are NOT cleared — they carry no logo context and live
    * elements reference them by id.
    */
@@ -1721,4 +1802,107 @@ describe('brand page maker store module', () => {
       ]);
     });
   });
+
+  // Only the maker knows a site is blank (it had no saved data), so it passes the flag in.
+  describe('blank site text', () => {
+    const load = async (isBlankSite?: boolean) => {
+      await useBrandPageMakerStore().initialise({
+        ...createInitialisePayload(),
+        brandPage: createInitialBrandPage(BRAND_PAGE_TYPES.brandSite),
+        isBlankSite,
+      });
+
+      return {
+        copyright:
+          useUiPageSettingsStore().sections[PAGE_SECTIONS.footer][
+            VIEWPORTS.desktop
+          ].copyrightStyle,
+        navigation:
+          useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+            VIEWPORTS.desktop
+          ],
+      };
+    };
+
+    test('a blank site starts its header and footer text on a role with nothing of its own', async () => {
+      const { copyright, navigation } = await load(true);
+
+      expect(copyright).toEqual({
+        textStyleType: 'paragraph2',
+        textAlign: 'center',
+        color: expect.any(String),
+      });
+      expect(navigation.defaultButtonStyle.textStyleType).toBe('paragraph1');
+      expect(pickTypography(navigation.defaultButtonStyle)).toEqual({});
+      expect(
+        pickTypography(navigation.hamburgerMenuStyle.defaultButtonStyle),
+      ).toEqual({});
+    });
+
+    // The nav store starts on an unlinked default (Lato, 1em, normal weight); loading must not
+    // leave those on a saved nav that takes its typography from its role.
+    test("a saved site's role-linked header links carry no built-in typography once loaded", async () => {
+      const { brandPageModel: saved } = await migrateBrandPageModel(
+        createInitialBrandPage(BRAND_PAGE_TYPES.brandSite),
+        { isUserDraft: true, isServerRender: false },
+      );
+
+      saved.pageHeaderDesktop.navigation.defaultButtonStyle = {
+        textStyleType: 'paragraph1',
+        textAlign: 'center',
+      };
+
+      await useBrandPageMakerStore().initialise({
+        ...createInitialisePayload(),
+        brandPage: JSON.stringify(saved),
+      });
+
+      const navigation =
+        useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+          VIEWPORTS.desktop
+        ];
+
+      expect(navigation.defaultButtonStyle.textStyleType).toBe('paragraph1');
+      expect(pickTypography(navigation.defaultButtonStyle)).toEqual({});
+    });
+
+    test('a saved site keeps its header and footer text as migrated', async () => {
+      const { copyright, navigation } = await load();
+
+      expect(copyright.textStyleType).toBe('paragraph1');
+      expect(navigation.defaultButtonStyle.fontSize).toBe('1em');
+    });
+
+    // `applyBlankSiteTextRoles` runs at initialise time before the store reads Save Contact from the
+    // model, so this proves the join holds across that load order — not just inside the function itself.
+    test('a blank brand.contact site starts its Save Contact label on Button text with nothing of its own', async () => {
+      await useBrandPageMakerStore().initialise({
+        ...createInitialisePayload(),
+        brandPage: createInitialBrandPage(BRAND_PAGE_TYPES.brandContact),
+        isBlankSite: true,
+      });
+
+      const { buttonTextStyle } = useBrandPageMakerStore().saveContactSettings;
+
+      expect(buttonTextStyle?.textStyleType).toBe('button');
+      expect(pickTypography(buttonTextStyle ?? {})).toEqual({});
+    });
+
+    test('a saved brand.contact site keeps its Save Contact label as migrated', async () => {
+      const { brandPageModel: saved } = await migrateBrandPageModel(
+        createInitialBrandPage(BRAND_PAGE_TYPES.brandContact),
+        { isUserDraft: true, isServerRender: false },
+      );
+
+      await useBrandPageMakerStore().initialise({
+        ...createInitialisePayload(),
+        brandPage: JSON.stringify(saved),
+      });
+
+      const { buttonTextStyle } = useBrandPageMakerStore().saveContactSettings;
+
+      expect(buttonTextStyle?.lineHeight).toBe('1.5');
+      expect(buttonTextStyle?.letterSpacing).toBe('0');
+    });
+  });
 });

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

@@ -13,7 +13,6 @@ import type {
 import {
   EMPTY_LOGO_IMAGE_MODEL,
   SENSITIVE_CONTENT_TYPES,
-  TEXT_STYLE_TYPES,
   VIEWPORTS,
 } from '@brand-page';
 import {
@@ -80,9 +79,7 @@ import {
   mapBrandPageContentToContentSettingsItem,
   removeContentFieldValues,
   removeLogoTemplateModel,
-  transformToRTE,
 } from '@brand-page-maker/utils';
-import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type {
   ContentItem,
   FieldSettingsBase,
@@ -93,6 +90,7 @@ import {
   UI_SCREENSIZE_MODES,
 } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { applyBlankSiteTextRoles } from '@brand-page-maker/models/content-settings';
 import { toPageModels } from '@shared/page-settings/utils';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useBrandPageContainerStore } from '../brandpage-container';
@@ -138,6 +136,8 @@ export interface InitialisePayload {
   logoVariationImageUrls: string[];
   shopConfigData: string | ShopConfigData;
   isServerRenderOverride?: boolean;
+  /** The maker had no saved data and built the site with `createInitialBrandPage`. */
+  isBlankSite?: boolean;
 }
 
 export interface SetIsSavingPayload {
@@ -292,6 +292,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       this.saveContactSettings.hideBranding = payload.hideBranding;
     },
 
+    // No maker control writes it, so a load is its only way in. Set even when absent, so the
+    // previous site's value is never saved into this one.
+    setSaveContactButtonTextStyle(payload: {
+      buttonTextStyle: SaveContactOptions['buttonTextStyle'];
+    }): void {
+      this.saveContactSettings.buttonTextStyle = payload.buttonTextStyle;
+    },
+
     setSensitiveContent(payload: { sensitiveContent: string }): void {
       this.sensitiveContent = payload.sensitiveContent;
     },
@@ -1262,6 +1270,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       // already migrated; role top-up belongs on the initial load path only.
       useUiColorPaletteStore().setColors(brandPageModel.styles?.colors ?? []);
 
+      this.setSaveContactButtonTextStyle({
+        buttonTextStyle: brandPageModel.saveContactSettings?.buttonTextStyle,
+      });
+
       // Apply button style config CSS (border-radius, box-shadow) to match
       // the selectedButtonStyleId. setState sets the raw model values but
       // doesn't derive the config-specific CSS that setSelectedButtonStyle does.
@@ -1270,37 +1282,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           id: buttonStyles.selectedButtonStyleId,
         });
       }
-
-      const { externalEditor } = useExternalRichTextEditor();
-
-      transformToRTE(
-        pageSettingsStore,
-        externalEditor,
-        undefined,
-        undefined,
-        TEXT_STYLE_TYPES.titles,
-        textStyles.textStyleOptions.titles.style,
-      );
-
-      transformToRTE(
-        pageSettingsStore,
-        externalEditor,
-        undefined,
-        undefined,
-        TEXT_STYLE_TYPES.headings,
-        textStyles.textStyleOptions.headings.style,
-      );
-
-      transformToRTE(
-        pageSettingsStore,
-        externalEditor,
-        undefined,
-        undefined,
-        TEXT_STYLE_TYPES.paragraphs,
-        textStyles.textStyleOptions.paragraphs.style,
-      );
-
-      externalEditor.destroy();
     },
 
     async initialise({
@@ -1319,6 +1300,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       logoVariationImageUrls,
       shopConfigData: _shopConfigData,
       isServerRenderOverride = false,
+      isBlankSite = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
       const userStore = useBrandPageMakerUserStore();
@@ -1372,6 +1354,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           isServerRender: isServerRenderOverride,
         });
 
+        if (isBlankSite) applyBlankSiteTextRoles(brandPageModel);
+
         const userPersonalisation =
           personalisationData && personalisationData.length > 0
             ? personalisationData[
@@ -1649,6 +1633,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             brandPageModel.saveContactSettings?.hideBranding ?? false,
         });
 
+        this.setSaveContactButtonTextStyle({
+          buttonTextStyle: brandPageModel.saveContactSettings?.buttonTextStyle,
+        });
+
         this.businessName = businessName;
         this.industry = industry;
       } finally {

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

@@ -79,6 +79,11 @@ export const useHistoryStore = defineStore('history', () => {
   // (ephemeral, never part of a snapshot) so undo/redo can't restore a stale
   // value and trigger a spurious re-seed.
   const rteResyncToken = ref(0);
+  // The field (content id + field name) a resync leaves mounted: its own editor wrote the doc.
+  // `from` is the first token of the unbroken run of resyncs that each excepted it.
+  const rteResyncExcept = ref<
+    { id: string; name: string; from: number } | undefined
+  >();
   const baselineCaptured = ref(false);
   const watcherInstalled = ref(false);
   let baselineCapturedAt = 0;
@@ -675,8 +680,34 @@ export const useHistoryStore = defineStore('history', () => {
 
   // Signal mounted RTE editors to re-seed from the store after an external
   // (non-history) replacement of their content — see rteResyncToken.
-  function markRteResync(): void {
-    rteResyncToken.value += 1;
+  function markRteResync(options?: {
+    except?: { id: string; name: string };
+  }): void {
+    const except = options?.except;
+    const current = rteResyncExcept.value;
+    const token = rteResyncToken.value + 1;
+    const continues =
+      !!except && current?.id === except.id && current.name === except.name;
+
+    rteResyncExcept.value = except
+      ? { ...except, from: continues ? current.from : token }
+      : undefined;
+    rteResyncToken.value = token;
+  }
+
+  // Watchers batch, so one reaction can cover several resyncs: a field stays mounted only if every
+  // resync after `sinceToken` excepted it.
+  function isRteResyncExcepted(
+    field: { id: string; name: string },
+    sinceToken: number,
+  ): boolean {
+    const except = rteResyncExcept.value;
+
+    return (
+      except?.id === field.id &&
+      except.name === field.name &&
+      except.from <= sinceToken + 1
+    );
   }
 
   return {
@@ -686,6 +717,7 @@ export const useHistoryStore = defineStore('history', () => {
     isApplyingSnapshot,
     snapshotAppliedToken,
     rteResyncToken,
+    rteResyncExcept,
     baselineCaptured,
 
     // Getters
@@ -699,6 +731,7 @@ export const useHistoryStore = defineStore('history', () => {
     captureAiChangeset,
     mergeNextMutation,
     markRteResync,
+    isRteResyncExcepted,
     undo,
     redo,
     reset,