@designcrowd/library.brand-page 5.18.4 → 5.18.5

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

@@ -9,10 +9,14 @@ import {
   BrandPageModel,
   type ContactFormContent,
   emptyGlobalTextStyleDeclaration,
+  HEADER_DISPLAY,
   type LogoTheme,
+  NAVIGATION_DISPLAY,
   type PageStyles,
+  STYLE_THEME_KEYS,
   VIEWPORTS,
 } from '@brand-page';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
 import {
   DEFAULT_LOGO_HEIGHT,
   DEFAULT_LOGO_WIDTH,
@@ -40,6 +44,13 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import {
+  CONTENT_SETTINGS_MODES,
+  useUiContentSettingsStore,
+} from '@shared/content-settings/store';
+import { useUiSideBarStore } from '@shared/side-bar/store';
+import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
+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';
@@ -302,6 +313,45 @@ describe('brand page maker store module', () => {
     );
   });
 
+  // bp-5634: the sub nav default is applied when content is first materialised. The
+  // admin maker loads a template (no designDraftToken => isUserDraft === false), so a
+  // colour-matched menu font colour-matches the sub nav on load. (Existing user drafts
+  // are skipped — covered by migration-16.test.ts.)
+  test('hamburger template in admin colour-matches the sub nav when the font is matched', async () => {
+    useBrandPageMakerUserStore().setUserState({ isAdmin: true });
+
+    const store = useBrandPageMakerStore();
+
+    const hamburgerHeader = (displayStyle: string) => ({
+      displayStyle,
+      navigation: {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        },
+      },
+    });
+
+    await store.initialise({
+      ...INITIALISE_PAYLOAD,
+      brandPage: {
+        ...BRAND_PAGE,
+        pageHeaderDesktop: hamburgerHeader(HEADER_DISPLAY.DESKTOP_HAMBURGER_1),
+        pageHeaderMobile: hamburgerHeader(HEADER_DISPLAY.MOBILE_HAMBURGER_1),
+      },
+    });
+    await store.initialiseAdminMaker({ models: [] });
+
+    const hamburger =
+      useUiNavigationStyleSettingsStore().navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ].hamburgerMenuStyle;
+
+    expect(hamburger.subNavBackgroundColor).toBe(
+      STYLE_THEME_KEYS.LogoBackgroundColor,
+    );
+  });
+
   test('brand page maker module should returns distinct brand page content type', async () => {
     // Arrange
     const store = useBrandPageMakerStore();
@@ -560,4 +610,331 @@ describe('brand page maker store module', () => {
     // Assert
     expect(setDesignTemplateTokenSpy).not.toHaveBeenCalled();
   });
+
+  // BP-5506 regression: applyHistorySnapshot must replace nested navigation
+  // style refs as a whole, not deep-merge them. The previous bug was that
+  // object-form $patch would leave keys present in the live state but absent
+  // from the snapshot in place — e.g. switching nav button styles then
+  // undoing would leave the new style's borderColor / borderRadius applied.
+  test('applyHistorySnapshot replaces navigation styles wholesale (no key bleed across undo)', async () => {
+    // Arrange — initialise the maker so `applyHistorySnapshot` has a
+    // populated set of dependent stores to write into.
+    const makerStore = useBrandPageMakerStore();
+    const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // Build snapshot A — the "older" state we'll undo back to. Keep the
+    // navigation simple: only borderRadius is set on selectedButtonStyle.
+    const snapshotA = {
+      ...makerStore.brandPageData,
+      pageHeaderDesktop: {
+        ...makerStore.brandPageData.pageHeaderDesktop,
+        navigation: {
+          ...makerStore.brandPageData.pageHeaderDesktop?.navigation,
+          selectedButtonStyle: {
+            borderRadius: '0px',
+          },
+        },
+      },
+    } as BrandPageModel;
+
+    // Build snapshot B — the "newer" state with extra keys that the
+    // older snapshot does NOT have. If $patch deep-merged, these would
+    // survive an undo back to A.
+    const snapshotB = {
+      ...snapshotA,
+      pageHeaderDesktop: {
+        ...snapshotA.pageHeaderDesktop,
+        navigation: {
+          ...snapshotA.pageHeaderDesktop?.navigation,
+          selectedButtonStyle: {
+            borderRadius: '12px',
+            borderColor: 'rgb(255, 0, 0)',
+            borderStyle: 'dashed',
+            borderWidth: '4px',
+          },
+        },
+      },
+    } as BrandPageModel;
+
+    // Act — apply newer first (simulates the user making the edit), then
+    // older (simulates the undo). NavigationDesktop's constructor folds
+    // its input over a defaults object, so we read the resulting state
+    // and assert against the keys that came from snapshotB but NOT from
+    // snapshotA.
+    await makerStore.applyHistorySnapshot(snapshotB);
+    await makerStore.applyHistorySnapshot(snapshotA);
+
+    // Assert — after the undo, no keys from B should bleed through onto
+    // A's selectedButtonStyle. Specifically the values that are unique to
+    // B (red dashed border) must not be present.
+    const restored =
+      navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ];
+    const restoredSelected = restored.selectedButtonStyle;
+
+    expect(restoredSelected.borderRadius).toBe('0px');
+    // The B-only values must not survive the undo. NavigationStyles'
+    // constructor seeds defaults for selectedButtonStyle, so we assert
+    // the *exact* B-only values are gone rather than a strict superset.
+    expect(restoredSelected.borderColor).not.toBe('rgb(255, 0, 0)');
+    expect(restoredSelected.borderStyle).not.toBe('dashed');
+    expect(restoredSelected.borderWidth).not.toBe('4px');
+  });
+
+  // BP-5506 regression: undoing a page-add must clear the URL/active-page
+  // back to a page that exists in the restored snapshot. The page-tabs
+  // carousel keys "selected" off the route URL; after `setNav` removes the
+  // added route, no nav item matches the URL slug and the highlight
+  // disappears. `applyHistorySnapshot` accepts an `activePageId` and writes
+  // it through `pageNavigationStore.setCurrentActivePage` so the routeStore
+  // and `currentPage` getter realign.
+  test('applyHistorySnapshot updates pageNavigation.activePageId when given a valid id', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const pageNavigationStore = usePageNavigationStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const restoredPageId = pageNavigationStore.routes[0]?.pageId;
+
+    expect(restoredPageId).toBeDefined();
+
+    pageNavigationStore.activePageId = '';
+
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      restoredPageId,
+    );
+
+    expect(pageNavigationStore.activePageId).toBe(restoredPageId);
+  });
+
+  test('applyHistorySnapshot falls back to first/default route when no activePageId is provided', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const pageNavigationStore = usePageNavigationStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const expectedFirstId =
+      pageNavigationStore.getFirstOrDefaultRoute()?.pageId;
+
+    expect(expectedFirstId).toBeDefined();
+
+    pageNavigationStore.activePageId = 'stale-page-id-not-in-nav';
+
+    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
+
+    expect(pageNavigationStore.activePageId).toBe(expectedFirstId);
+  });
+
+  // BP-5506 follow-up: undoing a non-page-structural edit (e.g. a title
+  // change) must NOT push a new route. The router push fires
+  // `router.afterEach`, and BrandPageMaker.mixin's afterEach hook resets
+  // the content-settings modeStack — which would snap the sidebar back
+  // to the default Content tab on every undo, even when the user was
+  // deep-editing a content item. Same-page navigation MUST be skipped.
+  test('applyHistorySnapshot does NOT touch modeStack when active page is unchanged', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const pageNavigationStore = usePageNavigationStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const activePageId = pageNavigationStore.routes[0]?.pageId;
+
+    expect(activePageId).toBeDefined();
+
+    pageNavigationStore.activePageId = activePageId!;
+
+    // User is deep-editing a content item — focused mode pushed onto the stack.
+    const realItemId = contentSettingsStore.items[0]?.id;
+
+    expect(realItemId).toBeDefined();
+
+    contentSettingsStore.pushMode({
+      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
+      selectedItemId: realItemId,
+    });
+    contentSettingsStore.selectedItemId = realItemId;
+
+    expect(contentSettingsStore.mode).toBe(
+      CONTENT_SETTINGS_MODES.focusedContentItem,
+    );
+
+    // Apply a snapshot whose activePageId equals the current page (i.e.
+    // a non-structural edit that didn't change pages — title edit, color
+    // change, etc.).
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      activePageId,
+    );
+
+    // Mode stack is preserved — no router.afterEach was triggered.
+    expect(contentSettingsStore.mode).toBe(
+      CONTENT_SETTINGS_MODES.focusedContentItem,
+    );
+    expect(contentSettingsStore.selectedItemId).toBe(realItemId);
+  });
+
+  // BP-5506 regression: when undoing a content add, the selected item
+  // disappears. The fallback must restore the Content tab's natural
+  // landing state (mode = edit, selectedItemId = null), not just switch
+  // tabs — otherwise `<FocusedContentItemSettings>` keeps rendering for
+  // a missing item and paints a blank panel.
+  test('applyHistorySnapshot resets sidebar to default Content tab when selected item is gone', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const contentSettingsStore = useUiContentSettingsStore();
+    const sideBarStore = useUiSideBarStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // Simulate the user opening a content item's focused settings.
+    const orphanItemId = 'orphan-content-id-not-in-snapshot';
+
+    contentSettingsStore.pushMode({
+      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
+      selectedItemId: orphanItemId,
+    });
+    contentSettingsStore.selectedItemId = orphanItemId;
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+
+    // Pre-condition: panel is showing the focused content item.
+    expect(contentSettingsStore.mode).toBe(
+      CONTENT_SETTINGS_MODES.focusedContentItem,
+    );
+    expect(contentSettingsStore.selectedItemId).toBe(orphanItemId);
+
+    // Snapshot does NOT contain orphanItemId — simulates undo of an add.
+    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
+
+    // Post-condition: same shape as a fresh Content tab click.
+    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.edit);
+    expect(contentSettingsStore.selectedItemId).toBeNull();
+    expect(sideBarStore.selectedTabName).toBe(
+      SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    );
+  });
+
+  // BP-5506 follow-up: applyHistorySnapshot accepts a `logoEdits` JSON
+  // string (sidecar to brandPageData; pre-purchase logo-tab form-field
+  // state). On undo it must wholesale-replace `editableLogoStore.logoEdits`
+  // so the form fields reflect the pre-edit state. Wholesale replacement
+  // matters because a previous entry's textObjects/colors must NOT leak
+  // through (e.g. switching template A→B then undoing must NOT keep B's
+  // textObject ids in A's restored state).
+  test('applyHistorySnapshot restores editableLogoStore.logoEdits from sidecar', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // User has typed "AcmeCo" — current logoEdits state.
+    editableLogoStore.logoEdits.textObjects = [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      {
+        id: 't1',
+        role: 'primary-text',
+        text: 'AcmeCo',
+        textEnabled: true,
+      } as any,
+    ];
+
+    // The history entry the user is undoing TO captured "Acme".
+    const sidecar = JSON.stringify({
+      backgroundObject: { id: 'bg', type: 'rect', role: 'background' },
+      logoObject: {
+        id: 'lg',
+        type: 'group',
+        role: 'logo',
+        logoColors: [],
+        logoStrokeColors: [],
+      },
+      textObjects: [
+        { id: 't1', role: 'primary-text', text: 'Acme', textEnabled: true },
+      ],
+    });
+
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      undefined,
+      sidecar,
+    );
+
+    expect(editableLogoStore.logoEdits.textObjects).toEqual([
+      { id: 't1', role: 'primary-text', text: 'Acme', textEnabled: true },
+    ]);
+  });
+
+  test('applyHistorySnapshot wholesale-replaces logoEdits (no leak from prior state)', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    // Current state has TWO textObjects (e.g. user is on template B with a
+    // logo + tagline).
+    editableLogoStore.logoEdits.textObjects = [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      {
+        id: 'b-1',
+        role: 'primary-text',
+        text: 'Brand B',
+        textEnabled: true,
+      } as any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { id: 'b-2', role: 'tagline', text: 'tagline', textEnabled: true } as any,
+    ];
+
+    // Undo target captured template A — only ONE textObject with a
+    // different id. After restore, b-1 / b-2 must be gone.
+    const sidecar = JSON.stringify({
+      backgroundObject: { id: 'bg', type: 'rect', role: 'background' },
+      logoObject: {
+        id: 'lg',
+        type: 'group',
+        role: 'logo',
+        logoColors: [],
+        logoStrokeColors: [],
+      },
+      textObjects: [
+        { id: 'a-1', role: 'primary-text', text: 'Brand A', textEnabled: true },
+      ],
+    });
+
+    await makerStore.applyHistorySnapshot(
+      makerStore.brandPageData,
+      undefined,
+      sidecar,
+    );
+
+    expect(editableLogoStore.logoEdits.textObjects).toHaveLength(1);
+    expect(editableLogoStore.logoEdits.textObjects[0].id).toBe('a-1');
+  });
+
+  test('applyHistorySnapshot leaves logoEdits untouched when sidecar is undefined', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    editableLogoStore.logoEdits.textObjects = [
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      {
+        id: 't1',
+        role: 'primary-text',
+        text: 'Acme',
+        textEnabled: true,
+      } as any,
+    ];
+
+    // No third arg — pre-existing entries from before this feature shipped.
+    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
+
+    // Still 'Acme' — no restore attempted.
+    expect(editableLogoStore.logoEdits.textObjects[0].text).toBe('Acme');
+  });
 });