@designcrowd/library.brand-page 5.18.3-undo-38 → 5.18.3

package/src/brand-page-maker/components/save-contact/SaveContact.vue

@@ -19,7 +19,7 @@
           </div>
           <Toggle
             id="save-contact-enabled"
-            :model-value="isSavingEnabled"
+            :model-value="data.isToggled"
             color="primary"
             @update:model-value="onSavingEnabled()"
           />
@@ -27,7 +27,7 @@
       </div>
       <div class="tw-flex-none tw-mt-4">
         <div
-          v-if="!isAdmin && !isPrePurchase && isSavingEnabled"
+          v-if="!isAdmin && !isPrePurchase && data.isToggled"
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer tw-gap-1"
           @click="onHideBranding"
         >
@@ -62,7 +62,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="hideBranding"
+            :model-value="data.hideBranding"
             color="primary"
             @update:model-value="onHideBranding()"
           />
@@ -78,7 +78,7 @@ import {
   useBrandPageContainerStore,
 } from '@brand-page-maker/stores';
 import { saveContactSettingsTr } from '@src/composables/useTranslate';
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import {
   EVENTS,
   useEventTracker,
@@ -107,6 +107,11 @@ const showBrandCrowdLogo = computed(
   () => brandPageMakerStore.showBrandCrowdLogo,
 );
 
+const data = reactive({
+  isToggled: isSavingEnabled.value,
+  hideBranding: hideBranding.value,
+});
+
 const siteName = computed((): string => {
   return props.isDesignCom ? 'Design.com' : 'BrandCrowd';
 });
@@ -122,28 +127,30 @@ const hideBrandingTooltip = computed((): string => {
 });
 
 const onSavingEnabled = () => {
-  const next = !isSavingEnabled.value;
-
-  brandPageMakerStore.setSavingEnabled({ isSavingEnabled: next });
+  data.isToggled = !data.isToggled;
+  brandPageMakerStore.setSavingEnabled({
+    isSavingEnabled: data.isToggled,
+  });
   eventTracker.sendWebsiteEvent({
     eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_SAVE_CONTACT_TOGGLE,
     eventProps: {
       cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-      toggle_value: next ? 'enabled' : 'disabled',
+      toggle_value: data.isToggled ? 'enabled' : 'disabled',
     },
   });
 };
 
 const onHideBranding = async () => {
   if (!showBrandCrowdLogo.value) {
-    const next = !hideBranding.value;
-
-    brandPageMakerStore.setHideBranding({ hideBranding: next });
+    data.hideBranding = !data.hideBranding;
+    brandPageMakerStore.setHideBranding({
+      hideBranding: data.hideBranding,
+    });
     eventTracker.sendWebsiteEvent({
       eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP,
       eventProps: {
         cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-        toggle_value: next ? 'enabled' : 'disabled',
+        toggle_value: data.hideBranding ? 'enabled' : 'disabled',
       },
     });
   } else {

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -29,8 +29,6 @@ import {
   useUiStore,
 } from '../../stores';
 import { useBrandPageMakerStore } from '../../stores';
-import { useHistoryStore } from '../../stores/history/history-store';
-import { useUndoRedoFlag } from '../useUndoRedoFlag';
 import { useBrandPageMakerUserStore } from '../../stores/user/user-store';
 import { useAiMetadataBuilder } from './useAiMetadataBuilder';
 import {
@@ -57,8 +55,6 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
   const aiThreadStore = useAiWebsiteBuilderThreadStore();
   const snapshotStore = useSnapshotStore();
   const brandPageMakerStore = useBrandPageMakerStore();
-  const historyStore = useHistoryStore();
-  const undoRedoEnabled = useUndoRedoFlag();
   const containerStore = useBrandPageContainerStore();
   const userStore = useBrandPageMakerUserStore();
   const uiStore = useUiStore();
@@ -445,12 +441,6 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
     await nextTick();
 
-    // One history entry per AI prompt (US-E1). `captureAiChangeset` cancels
-    // the auto-watcher's pending flush so the apply doesn't double-capture.
-    if (undoRedoEnabled.value) {
-      historyStore.captureAiChangeset();
-    }
-
     // Re-capture snapshot so subsequent messages reflect the updated page
     await snapshotStore.refreshSnapshotAsync();
 

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -47,7 +47,6 @@ import {
   backgroundColorConvertor,
 } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
 import { MaxLength } from './extensions/MaxLength';
 import { AutoLink } from './extensions/AutoLink';
@@ -209,12 +208,6 @@ export const useRichTextEditor = (
   isHyperlinkPopupOpen: Ref<boolean>,
   selectedLinkTypeValue: Ref<HyperlinkType>,
 ): UseRichTextEditorReturn => {
-  const historyStore = useHistoryStore();
-
-  // TipTap rehydrates and writes back canonical HTML on mount — fold
-  // that into the current head instead of pushing a phantom entry.
-  historyStore.mergeNextMutation();
-
   const editor = new Editor({
     content: model.value ?? '',
     editable: !props.readOnly,
@@ -463,16 +456,7 @@ export const useRichTextEditor = (
   watch(
     () => model.value,
     (newValue) => {
-      // Re-seed the editor when the model has been mutated from outside
-      // (history undo/redo, template switch, reorder). `!editor.isFocused`
-      // distinguishes "external mutation" from "user is typing in me" — the
-      // latter would wipe the user's cursor if we called setContent.
-      // `updateRichTextEditor.value` is retained as an explicit override for
-      // callers (reorder) that need to force a re-seed while focused.
-      const isExternalMutation =
-        updateRichTextEditor.value || !editor.isFocused;
-
-      if (isExternalMutation && editor.getHTML() !== newValue) {
+      if (updateRichTextEditor.value && editor.getHTML() !== newValue) {
         editor.commands.setContent(newValue, false);
         updateRichTextEditor.value = false;
         //text style type is not switching when reordering
@@ -503,13 +487,6 @@ export const useRichTextEditor = (
   });
 
   editor.on('selectionUpdate', () => {
-    // Skip while a history snapshot is being applied — `setContent` fires
-    // selectionUpdate before the editor has fully rehydrated, which causes
-    // toolbar buttons (alignment, letter-spacing) to flash through bogus
-    // active states before settling. The editor emits a final selectionUpdate
-    // after apply completes, which lands the correct values (BP-5506).
-    if (historyStore.isApplyingSnapshot) return;
-
     const textStyleAttributes = editor.getAttributes('textStyle');
     const highlightAttributes = editor.getAttributes('highlight');
     const focusedAlignment = editor.getAttributes(

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

@@ -70,10 +70,6 @@ export const EVENTS = {
     'website_maker_digital_business_cards_hide_popup',
   WEBSITE_MAKER_GETTY_VIDEO: 'website_maker_getty_video',
   WEBSITE_MAKER_SHIPPING_TOGGLE: 'website_maker_shipping_toggle',
-  WEBSITE_MAKER_UNDO: 'website_maker_undo',
-  WEBSITE_MAKER_REDO: 'website_maker_redo',
-  WEBSITE_MAKER_HISTORY_CAPPED: 'website_maker_history_capped',
-  WEBSITE_MAKER_HISTORY_OVERSIZED: 'website_maker_history_oversized',
 };
 
 export const SELECT_LOCATIONS = {
@@ -424,31 +420,6 @@ const useEventTracker = () => {
         is_enabled: isEnabled,
       });
     },
-    // Undo / Redo (BP-5506)
-    sendUndoEvent: (props: {
-      entries_count: number;
-      actor: string | undefined;
-    }) => {
-      _publishEvent(EVENTS.WEBSITE_MAKER_UNDO, props);
-    },
-    sendRedoEvent: (props: {
-      entries_count: number;
-      actor: string | undefined;
-    }) => {
-      _publishEvent(EVENTS.WEBSITE_MAKER_REDO, props);
-    },
-    sendHistoryCappedEvent: (props: {
-      entries_count: number;
-      size_bytes: number;
-    }) => {
-      _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_CAPPED, props);
-    },
-    sendHistoryOversizedEvent: (props: {
-      attempted_bytes: number;
-      source: string;
-    }) => {
-      _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_OVERSIZED, props);
-    },
   };
 };
 

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

@@ -40,14 +40,6 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
-import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-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';
@@ -568,331 +560,4 @@ 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');
-  });
 });