@designcrowd/library.brand-page 6.0.6-undo-6 → 6.0.6-undo-8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.6-undo-6",
+  "version": "6.0.6-undo-8",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/shop/Shop.vue

@@ -4,7 +4,6 @@
       v-if="shouldShowContainer"
       class="tw-relative outer-container"
       :class="{
-        'tw-my-8': context.isBrandSite,
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
       :style="[backgroundStyle, contentPaddingStyle]"

package/src/brand-page-maker/components/quick-link-bar/RedoButton.vue

@@ -39,17 +39,25 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
+const templateSettingsStore = useUiTemplateSettingsStore();
 
 const isDisabled = computed(
   () =>
     !historyStore.canRedo ||
     aiThreadStore.isProcessing ||
-    containerStore.isSaving,
+    containerStore.isSaving ||
+    // Locked while a restore is applying (the apply awaits the designed-logo
+    // re-render) or the template previews are refetching: re-entering
+    // mid-regeneration overlapped two reloads and left the sidebar keyed to
+    // the wrong logo (fast undo→redo desync).
+    historyStore.isApplyingSnapshot ||
+    templateSettingsStore.isBusy,
 );
 
 const onClick = () => {

package/src/brand-page-maker/components/quick-link-bar/UndoButton.vue

@@ -39,17 +39,25 @@ import { Icon, Tooltip } from '@designcrowd/fe-shared-lib';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useAiWebsiteBuilderThreadStore } from '@brand-page-maker/stores/ai-thread/ai-website-builder-thread-store';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores/brandpage-container';
+import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
+const templateSettingsStore = useUiTemplateSettingsStore();
 
 const isDisabled = computed(
   () =>
     !historyStore.canUndo ||
     aiThreadStore.isProcessing ||
-    containerStore.isSaving,
+    containerStore.isSaving ||
+    // Locked while a restore is applying (the apply awaits the designed-logo
+    // re-render) or the template previews are refetching: re-entering
+    // mid-regeneration overlapped two reloads and left the sidebar keyed to
+    // the wrong logo (fast undo→redo desync).
+    historyStore.isApplyingSnapshot ||
+    templateSettingsStore.isBusy,
 );
 
 const onClick = () => {

package/src/brand-page-maker/components/quick-link-bar/undo-redo-buttons.test.ts

@@ -6,8 +6,10 @@ import RedoButton from './RedoButton.vue';
 
 // These tests cover the click-dispatch contract for the undo/redo buttons:
 //   - Click → historyStore.undo()/redo() ONLY when enabled.
-//   - Disabled when any of three guards is true: canUndo/canRedo,
-//     aiThread.isProcessing, container.isSaving.
+//   - Disabled when any of five guards is true: canUndo/canRedo,
+//     aiThread.isProcessing, container.isSaving, history.isApplyingSnapshot
+//     (a restore is applying — spans the awaited logo re-render), or
+//     templateSettings.isBusy (template previews are refetching).
 //
 // Markup, class names, and i18n strings are intentionally not asserted —
 // they're covered by e2e tests and the data-component / data-test-*
@@ -34,6 +36,7 @@ vi.mock('@designcrowd/fe-shared-lib', () => ({
 const historyStoreMock = {
   canUndo: true,
   canRedo: true,
+  isApplyingSnapshot: false,
   undo: vi.fn(),
   redo: vi.fn(),
 };
@@ -57,14 +60,22 @@ vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
   useBrandPageContainerStore: vi.fn(() => containerStoreMock),
 }));
 
+const templateSettingsStoreMock = { isBusy: false };
+
+vi.mock('@shared/template-settings/store', () => ({
+  useUiTemplateSettingsStore: vi.fn(() => templateSettingsStoreMock),
+}));
+
 beforeEach(() => {
   setActivePinia(createPinia());
   historyStoreMock.canUndo = true;
   historyStoreMock.canRedo = true;
+  historyStoreMock.isApplyingSnapshot = false;
   historyStoreMock.undo = vi.fn();
   historyStoreMock.redo = vi.fn();
   aiStoreMock.isProcessing = false;
   containerStoreMock.isSaving = false;
+  templateSettingsStoreMock.isBusy = false;
 });
 
 describe('UndoButton', () => {
@@ -80,6 +91,14 @@ describe('UndoButton', () => {
     ['canUndo is false', () => (historyStoreMock.canUndo = false)],
     ['AI is processing', () => (aiStoreMock.isProcessing = true)],
     ['save is in flight', () => (containerStoreMock.isSaving = true)],
+    [
+      'a restore is applying',
+      () => (historyStoreMock.isApplyingSnapshot = true),
+    ],
+    [
+      'template previews are refetching',
+      () => (templateSettingsStoreMock.isBusy = true),
+    ],
   ])('does not dispatch when %s', async (_label, applyGuard) => {
     applyGuard();
 
@@ -104,6 +123,14 @@ describe('RedoButton', () => {
     ['canRedo is false', () => (historyStoreMock.canRedo = false)],
     ['AI is processing', () => (aiStoreMock.isProcessing = true)],
     ['save is in flight', () => (containerStoreMock.isSaving = true)],
+    [
+      'a restore is applying',
+      () => (historyStoreMock.isApplyingSnapshot = true),
+    ],
+    [
+      'template previews are refetching',
+      () => (templateSettingsStoreMock.isBusy = true),
+    ],
   ])('does not dispatch when %s', async (_label, applyGuard) => {
     applyGuard();
 

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

@@ -50,6 +50,9 @@ import {
 } from '@shared/content-settings/store';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
+import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
+import { useLogoStore } from '@brand-page-maker/stores';
+import { getLogoImageFromModel } from '@brand-page/utils/logo.util';
 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';
@@ -988,4 +991,131 @@ describe('brand page maker store module', () => {
     // Still 'Acme' — no restore attempted.
     expect(editableLogoStore.logoEdits.textObjects[0].text).toBe('Acme');
   });
+
+  // The template sidebar regenerates off the selectedLogoImage watcher, so
+  // the restore must hand it a READY preview key. For a designed logo
+  // (pre-purchase) that key is the s3 render token minted by the awaited
+  // fabric re-render — exposing selectedLogoImage BEFORE the render made the
+  // sidebar fetch a list keyed to the previous render, which repainted
+  // seconds later (the undo "flash"). Same precondition that makes the BYO
+  // upload flow work: the key exists before the watcher fires.
+  test('_syncLogoSettingsFromSnapshot re-renders the designed logo BEFORE exposing selectedLogoImage', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const containerStore = useBrandPageContainerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+    const logoSettingsStore = useUiLogoSettingsStore();
+    const logoStore = useLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const originalStamp = editableLogoStore.stampLogoBase64IntoBrandPageData;
+    const originalRender = editableLogoStore.updateEditableLogoImageUrlAsync;
+    const originalSetSelected = logoSettingsStore.setSelectedLogoImage;
+
+    try {
+      containerStore.isPrePurchase = true;
+      logoStore.setLogoTemplateAsset({
+        token: 'designed-template',
+        isByo: false,
+      } as never);
+      logoStore.addLogoDraftAsset({
+        logoDraftAsset: { token: 'designed-2', tick: 1, isByo: false },
+      } as never);
+      // Previous token differs from the snapshot's → not the
+      // logoUnchanged short-circuit.
+      editableLogoStore.setLogoDraftToken('designed-1');
+
+      const snapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const snapshotLogoImage = getLogoImageFromModel(snapshot);
+
+      expect(snapshotLogoImage).toBeTruthy();
+      snapshotLogoImage!.logoDraftToken = 'designed-2';
+
+      const callOrder: string[] = [];
+
+      editableLogoStore.stampLogoBase64IntoBrandPageData = vi.fn();
+      editableLogoStore.updateEditableLogoImageUrlAsync = vi.fn(async () => {
+        // Async like the real fabric render — the order assertion below
+        // fails if the sync doesn't await it before exposing the logo.
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        callOrder.push('render');
+      });
+      logoSettingsStore.setSelectedLogoImage = vi.fn(() => {
+        callOrder.push('selectedLogoImage');
+      });
+
+      await makerStore._syncLogoSettingsFromSnapshot(
+        snapshot,
+        '{"colors":["#123456"]}',
+      );
+
+      expect(callOrder).toEqual(['render', 'selectedLogoImage']);
+      expect(logoSettingsStore.setSelectedLogoImage).toHaveBeenCalledWith(
+        expect.objectContaining({ logoDraftToken: 'designed-2' }),
+      );
+    } finally {
+      containerStore.isPrePurchase = false;
+      editableLogoStore.stampLogoBase64IntoBrandPageData = originalStamp;
+      editableLogoStore.updateEditableLogoImageUrlAsync = originalRender;
+      logoSettingsStore.setSelectedLogoImage = originalSetSelected;
+    }
+  });
+
+  test('_syncLogoSettingsFromSnapshot still exposes selectedLogoImage on the BYO and token-less paths', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const editableLogoStore = useUiEditableLogoStore();
+    const logoSettingsStore = useUiLogoSettingsStore();
+    const logoStore = useLogoStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const originalStamp = editableLogoStore.stampLogoBase64IntoBrandPageData;
+    const originalSetSelected = logoSettingsStore.setSelectedLogoImage;
+
+    try {
+      editableLogoStore.stampLogoBase64IntoBrandPageData = vi.fn();
+
+      const setSelectedSpy = vi.fn();
+
+      logoSettingsStore.setSelectedLogoImage = setSelectedSpy;
+
+      // BYO path: registered byo draft, differing previous token.
+      logoStore.addLogoDraftAsset({
+        logoDraftAsset: { token: 'byo-1', tick: 2, isByo: true },
+      } as never);
+      editableLogoStore.setLogoDraftToken('designed-1');
+
+      const byoSnapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const byoLogoImage = getLogoImageFromModel(byoSnapshot);
+
+      byoLogoImage!.logoDraftToken = 'byo-1';
+
+      await makerStore._syncLogoSettingsFromSnapshot(byoSnapshot);
+
+      expect(setSelectedSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ logoDraftToken: 'byo-1' }),
+      );
+
+      // Token-less path: the logoImage exists but has no draft token.
+      setSelectedSpy.mockClear();
+
+      const tokenlessSnapshot = JSON.parse(
+        JSON.stringify(makerStore.brandPageData),
+      ) as BrandPageModel;
+      const tokenlessLogoImage = getLogoImageFromModel(tokenlessSnapshot);
+
+      tokenlessLogoImage!.logoDraftToken = '';
+
+      await makerStore._syncLogoSettingsFromSnapshot(tokenlessSnapshot);
+
+      expect(setSelectedSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      editableLogoStore.stampLogoBase64IntoBrandPageData = originalStamp;
+      logoSettingsStore.setSelectedLogoImage = originalSetSelected;
+    }
+  });
 });

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

@@ -960,83 +960,92 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       if (!logoImage) return;
 
-      // Assign a FRESH object — the same way the upload/selection flows
-      // write selectedLogoImage. A setState/$patch here deep-merges into the
-      // existing object, so the templates store's deep watcher receives
-      // old === new (same reference), sees no logoDraftToken change, and
-      // never refetches the template previews. Post-purchase that watcher
-      // is the ONLY refetch path (previews are keyed by logoDraftToken and
-      // the designed-logo re-render below is pre-purchase-only), which left
-      // the sidebar stuck on the undone logo (BP-5814).
-      logoSettingsStore.setSelectedLogoImage({ ...logoImage });
-
-      const draftToken: string | undefined = logoImage.logoDraftToken;
+      try {
+        const draftToken: string | undefined = logoImage.logoDraftToken;
 
-      if (!draftToken) return;
+        if (!draftToken) return;
 
-      // Re-derive enableEditMode + templateAsset from the draft registry
-      // (append-only for the session) instead of stashing on every entry.
-      const draft = logoStore.getLogoDraftAssetByToken(draftToken);
+        // Re-derive enableEditMode + templateAsset from the draft registry
+        // (append-only for the session) instead of stashing on every entry.
+        const draft = logoStore.getLogoDraftAssetByToken(draftToken);
 
-      if (draft) {
-        editableLogoStore.setEnableEditMode(!draft.isByo);
+        if (draft) {
+          editableLogoStore.setEnableEditMode(!draft.isByo);
 
-        if (draft.templateAsset) {
-          logoStore.setLogoTemplateAsset(draft.templateAsset);
+          if (draft.templateAsset) {
+            logoStore.setLogoTemplateAsset(draft.templateAsset);
+          }
         }
-      }
 
-      editableLogoStore.setLogoDraftToken(draftToken);
+        editableLogoStore.setLogoDraftToken(draftToken);
 
-      // No logo change → cache is still correct; just stamp base64 back
-      // (snapshot doesn't carry logoImageBase64Url).
-      const logoUnchanged =
-        prevDraftToken === draftToken &&
-        (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
+        // No logo change → cache is still correct; just stamp base64 back
+        // (snapshot doesn't carry logoImageBase64Url).
+        const logoUnchanged =
+          prevDraftToken === draftToken &&
+          (logoEditsStr === undefined || logoEditsStr === prevLogoEditsStr);
 
-      if (logoUnchanged) {
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
+        if (logoUnchanged) {
+          editableLogoStore.stampLogoBase64IntoBrandPageData();
 
-        return;
-      }
+          return;
+        }
 
-      const isByo = !!draft?.isByo;
+        const isByo = !!draft?.isByo;
 
-      if (isByo) {
-        // BYO mints a fresh draftToken per upload so the per-token
-        // cache always matches; no re-render needed.
-        if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
-          editableLogoStore.stampLogoBase64IntoBrandPageData();
-        }
+        if (isByo) {
+          // BYO mints a fresh draftToken per upload so the per-token
+          // cache always matches; no re-render needed.
+          if (editableLogoStore.restoreVariationsForDraftToken(draftToken)) {
+            editableLogoStore.stampLogoBase64IntoBrandPageData();
+          }
 
-        return;
-      }
+          return;
+        }
 
-      // Designed: draft token is reused across edits, so the cache
-      // only holds the latest render. Re-issue fabric-render — same
-      // call as the live edit path. Awaited so concurrent undos
-      // serialize and the call sits inside the isApplyingSnapshot
-      // window (watcher guard suppresses the writeback).
-      if (
-        containerStore.isPrePurchase &&
-        logoEditsStr &&
-        logoStore.logoTemplateAsset
-      ) {
-        // Stamp the cached (pre-undo) base64 onto brandPageData first
-        // so the canvas keeps showing the previous logo while the
-        // re-render is in flight. Without this the logoImageBase64Url
-        // fields are undefined (snapshot is stripped pre-purchase) and
-        // the canvas flickers blank for ~500-1500ms.
-        editableLogoStore.stampLogoBase64IntoBrandPageData();
+        // Designed: draft token is reused across edits, so the cache
+        // only holds the latest render. Re-issue fabric-render — same
+        // call as the live edit path. Awaited so concurrent undos
+        // serialize and the call sits inside the isApplyingSnapshot
+        // window (watcher guard suppresses the writeback).
+        if (
+          containerStore.isPrePurchase &&
+          logoEditsStr &&
+          logoStore.logoTemplateAsset
+        ) {
+          // Stamp the cached (pre-undo) base64 onto brandPageData first
+          // so the canvas keeps showing the previous logo while the
+          // re-render is in flight. Without this the logoImageBase64Url
+          // fields are undefined (snapshot is stripped pre-purchase) and
+          // the canvas flickers blank for ~500-1500ms.
+          editableLogoStore.stampLogoBase64IntoBrandPageData();
 
-        try {
-          await editableLogoStore.updateEditableLogoImageUrlAsync();
-        } catch (error) {
-          console.error(
-            'brandpage-maker-store: failed to re-render logo on history apply',
-            error,
-          );
+          try {
+            await editableLogoStore.updateEditableLogoImageUrlAsync();
+          } catch (error) {
+            console.error(
+              'brandpage-maker-store: failed to re-render logo on history apply',
+              error,
+            );
+          }
         }
+      } finally {
+        // Assign a FRESH object — the same way the upload/selection flows
+        // write selectedLogoImage. A setState/$patch here deep-merges into
+        // the existing object, so the templates store's deep watcher would
+        // receive old === new (same reference), see no logoDraftToken
+        // change, and never refetch the template previews (BP-5814).
+        //
+        // Set LAST — after the branch above has prepared the preview key
+        // (BYO cache restore, or the awaited designed re-render that mints
+        // the s3 token) — so the watcher always fires with a fetchable key,
+        // the same precondition that makes the upload flow work. Firing it
+        // before the re-render fetched the template list with the previous
+        // render's s3 token: an obsolete list that repainted seconds later
+        // (the undo "flash"). The sidebar instead holds the previous
+        // previews while the render is in flight, matching the canvas
+        // policy above.
+        logoSettingsStore.setSelectedLogoImage({ ...logoImage });
       }
     },