@designcrowd/library.brand-page 5.17.25-undo-19 → 5.17.25-undo-21

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -440,8 +440,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     convertBpColorToFabricColor(selectedColor: any): any;
     onSelectTextColor(selectedColor: any, i: any): void;
     onLogoColorSelected(selectedColor: any): void;
-    onUpdate(...args: any[]): any;
-    _onUpdateDebounced: import("lodash.debounce").DebounceHandle;
+    onUpdate: import("lodash.debounce").DebounceHandle;
     onToggleText(e: boolean, i: number): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.js

@@ -181,16 +181,7 @@ export default defineComponent({
             this.logoColors[selectedColor.id].toColor = newColor;
             this.onUpdate();
         },
-        onUpdate(...args) {
-            console.log('[logo-debug] keystroke | textObjects=', this.editableLogoStore.logoEdits.textObjects.map((t) => ({
-                id: t.id,
-                role: t.role,
-                text: t.text,
-                textEnabled: t.textEnabled,
-            })));
-            return this._onUpdateDebounced(...args);
-        },
-        _onUpdateDebounced: debounce(async function () {
+        onUpdate: debounce(async function () {
             await this.editableLogoStore.updateEditableLogoImageUrlAsync();
             return true;
         }, 300),

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -110,12 +110,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             if (!logoDraft?.isByo) {
                 this.setEnableEditMode(true);
             }
-            console.log('[logo-debug] init complete | logoDraftToken=', this.logoDraftToken, '| textObjects=', this.logoEdits.textObjects.map((t) => ({
-                id: t.id,
-                role: t.role,
-                text: t.text,
-                textEnabled: t.textEnabled,
-            })));
         },
         resetLogoEdits() {
             this.logoEdits = {
@@ -222,20 +216,8 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 this.editableLogoVariations[0]);
         },
         async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation, layout) {
-            console.log('[logo-debug] BEFORE API call | logoDraftToken=', this.logoDraftToken, '| textObjects=', this.logoEdits.textObjects.map((t) => ({
-                id: t.id,
-                role: t.role,
-                text: t.text,
-                textEnabled: t.textEnabled,
-            })));
             const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             await Promise.all(tasks);
-            console.log('[logo-debug] AFTER API call | logoDraftToken=', this.logoDraftToken, '| textObjects=', this.logoEdits.textObjects.map((t) => ({
-                id: t.id,
-                role: t.role,
-                text: t.text,
-                textEnabled: t.textEnabled,
-            })));
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
                 [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {

package/package.json

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

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -36,6 +36,7 @@ import {
   useVideoStore,
 } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -284,12 +285,12 @@ export default defineComponent({
     // Mark brand page as fully loaded
     this.brandPageMakerStore.setIsBrandPageLoaded(true);
 
-    // Capture baseline for undo/redo when feature flag is enabled.
-    // Flag lives on userStore.features.canUseUndoRedo, populated by the
-    // consumer (BrandCrowd.Net / web-renderer) via the ViewModel.
-    const userStore = useBrandPageMakerUserStore();
-
-    if (userStore.features.canUseUndoRedo) {
+    // Capture baseline for undo/redo when the feature is active for this
+    // session. `useUndoRedoFlag` requires both the LaunchDarkly feature
+    // (`userStore.features.canUseUndoRedo`) AND the maker being a brand-site
+    // — V1 scope is brand-site only; brand-page and brand-contact don't get
+    // undo/redo. See useUndoRedoFlag.ts for the rationale.
+    if (useUndoRedoFlag().value) {
       useHistoryStore().captureBaseline();
     }
 

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.ts

@@ -1,10 +1,10 @@
-import { computed, defineComponent } from 'vue';
+import { defineComponent } from 'vue';
 import { CUSTOM_DOMAIN_STATUSES } from '@brand-page-maker/constants';
 import {
   useBrandPageContainerStore,
-  useBrandPageMakerUserStore,
   useEventManagerStore,
 } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
@@ -19,12 +19,10 @@ export default defineComponent({
     },
   },
   setup() {
-    const userStore = useBrandPageMakerUserStore();
-
     return {
       brandPageContainerStore: useBrandPageContainerStore(),
       eventManagerStore: useEventManagerStore(),
-      undoRedoEnabled: computed(() => userStore.features.canUseUndoRedo),
+      undoRedoEnabled: useUndoRedoFlag(),
     };
   },
   data() {

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

@@ -57,6 +57,15 @@ vi.mock(
   }),
 );
 
+// Container store mock — mutable so each test can flip isSaving.
+const containerStoreMock = {
+  isSaving: false,
+};
+
+vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
+  useBrandPageContainerStore: vi.fn(() => containerStoreMock),
+}));
+
 describe('RedoButton.vue', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
@@ -66,6 +75,7 @@ describe('RedoButton.vue', () => {
     historyStoreMock.undo = vi.fn();
     historyStoreMock.redo = vi.fn();
     aiStoreMock.isProcessing = false;
+    containerStoreMock.isSaving = false;
   });
 
   it('renders the expected data-test selector', () => {
@@ -106,6 +116,26 @@ describe('RedoButton.vue', () => {
     expect(icon.classes()).toContain('tw-cursor-not-allowed');
   });
 
+  it('marks itself disabled while a save is in flight', () => {
+    containerStoreMock.isSaving = true;
+
+    const wrapper = mount(RedoButton);
+    const icon = wrapper.find('[data-test-redo-button]');
+
+    expect(icon.classes()).toContain('tw-cursor-not-allowed');
+  });
+
+  it('does not dispatch historyStore.redo on click while saving', async () => {
+    containerStoreMock.isSaving = true;
+
+    const wrapper = mount(RedoButton);
+    const icon = wrapper.find('[data-test-redo-button]');
+
+    await icon.trigger('click');
+
+    expect(historyStoreMock.redo).not.toHaveBeenCalled();
+  });
+
   it('is interactive (no disabled class) at baseline with canRedo', () => {
     const wrapper = mount(RedoButton);
     const icon = wrapper.find('[data-test-redo-button]');

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

@@ -38,13 +38,18 @@ import { computed } from 'vue';
 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 { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
+const containerStore = useBrandPageContainerStore();
 
 const isDisabled = computed(
-  () => !historyStore.canRedo || aiThreadStore.isProcessing,
+  () =>
+    !historyStore.canRedo ||
+    aiThreadStore.isProcessing ||
+    containerStore.isSaving,
 );
 
 const onClick = () => {

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

@@ -57,6 +57,15 @@ vi.mock(
   }),
 );
 
+// Container store mock — mutable so each test can flip isSaving.
+const containerStoreMock = {
+  isSaving: false,
+};
+
+vi.mock('@brand-page-maker/stores/brandpage-container', () => ({
+  useBrandPageContainerStore: vi.fn(() => containerStoreMock),
+}));
+
 describe('UndoButton.vue', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
@@ -66,6 +75,7 @@ describe('UndoButton.vue', () => {
     historyStoreMock.undo = vi.fn();
     historyStoreMock.redo = vi.fn();
     aiStoreMock.isProcessing = false;
+    containerStoreMock.isSaving = false;
   });
 
   it('renders the expected data-test selector', () => {
@@ -106,6 +116,26 @@ describe('UndoButton.vue', () => {
     expect(icon.classes()).toContain('tw-cursor-not-allowed');
   });
 
+  it('marks itself disabled while a save is in flight', () => {
+    containerStoreMock.isSaving = true;
+
+    const wrapper = mount(UndoButton);
+    const icon = wrapper.find('[data-test-undo-button]');
+
+    expect(icon.classes()).toContain('tw-cursor-not-allowed');
+  });
+
+  it('does not dispatch historyStore.undo on click while saving', async () => {
+    containerStoreMock.isSaving = true;
+
+    const wrapper = mount(UndoButton);
+    const icon = wrapper.find('[data-test-undo-button]');
+
+    await icon.trigger('click');
+
+    expect(historyStoreMock.undo).not.toHaveBeenCalled();
+  });
+
   it('is interactive (no disabled class) at baseline with canUndo', () => {
     const wrapper = mount(UndoButton);
     const icon = wrapper.find('[data-test-undo-button]');

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

@@ -38,13 +38,18 @@ import { computed } from 'vue';
 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 { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
+const containerStore = useBrandPageContainerStore();
 
 const isDisabled = computed(
-  () => !historyStore.canUndo || aiThreadStore.isProcessing,
+  () =>
+    !historyStore.canUndo ||
+    aiThreadStore.isProcessing ||
+    containerStore.isSaving,
 );
 
 const onClick = () => {

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

@@ -1,15 +1,26 @@
 import { computed, type ComputedRef } from 'vue';
 import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
+import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 
 /**
- * Reads the undo/redo feature flag from the maker user store's `features` bag,
- * which is populated by the consumer (BrandCrowd.Net / web-renderer) via the
- * `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel. Follows
- * the same precedent as other maker feature flags (RichTextEditor, GettyVideos,
- * AITextGenerator).
+ * Returns whether undo/redo is active for the current maker session. Two
+ * conditions must hold:
+ *
+ *   1. `userStore.features.canUseUndoRedo` is true. The flag is populated by
+ *      the consumer (BrandCrowd.Net / web-renderer) via the
+ *      `WebsiteDesignUserFeatures.CanUseUndoRedo` boolean on the ViewModel —
+ *      same precedent as RichTextEditor / GettyVideos / AITextGenerator.
+ *   2. The maker is a brand-site (Website Maker). V1 scope is brand-site
+ *      only; brand-page (single-page profile) and brand-contact (vCard) are
+ *      out of scope. The flag itself is global on LaunchDarkly so it can't
+ *      gate this on its own — `isBrandSite` is the per-session
+ *      discriminator.
  */
 export function useUndoRedoFlag(): ComputedRef<boolean> {
   const userStore = useBrandPageMakerUserStore();
+  const brandPageMakerStore = useBrandPageMakerStore();
 
-  return computed(() => userStore.features.canUseUndoRedo);
+  return computed(
+    () => userStore.features.canUseUndoRedo && brandPageMakerStore.isBrandSite,
+  );
 }

package/src/shared/logo-settings/components/EditLogoSettings.mixin.ts

@@ -217,20 +217,7 @@ export default defineComponent({
       this.logoColors[selectedColor.id].toColor = newColor;
       this.onUpdate();
     },
-    onUpdate(...args: any[]) {
-      console.log(
-        '[logo-debug] keystroke | textObjects=',
-        this.editableLogoStore.logoEdits.textObjects.map((t) => ({
-          id: t.id,
-          role: t.role,
-          text: t.text,
-          textEnabled: t.textEnabled,
-        })),
-      );
-
-      return this._onUpdateDebounced(...args);
-    },
-    _onUpdateDebounced: debounce(async function () {
+    onUpdate: debounce(async function () {
       await this.editableLogoStore.updateEditableLogoImageUrlAsync();
 
       return true;

package/src/shared/logo-settings/store/editable-logo-store.ts

@@ -257,18 +257,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       if (!logoDraft?.isByo) {
         this.setEnableEditMode(true);
       }
-
-      console.log(
-        '[logo-debug] init complete | logoDraftToken=',
-        this.logoDraftToken,
-        '| textObjects=',
-        this.logoEdits.textObjects.map((t) => ({
-          id: t.id,
-          role: t.role,
-          text: t.text,
-          textEnabled: t.textEnabled,
-        })),
-      );
     },
 
     resetLogoEdits() {
@@ -415,18 +403,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       overrideLogoVariation?: number | undefined,
       layout?: string,
     ): Promise<void> {
-      console.log(
-        '[logo-debug] BEFORE API call | logoDraftToken=',
-        this.logoDraftToken,
-        '| textObjects=',
-        this.logoEdits.textObjects.map((t) => ({
-          id: t.id,
-          role: t.role,
-          text: t.text,
-          textEnabled: t.textEnabled,
-        })),
-      );
-
       const tasks = this.editableLogoVariations.map((x) =>
         this.updateEditableLogoImageByVariationAsync(
           x,
@@ -437,18 +413,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       await Promise.all(tasks);
 
-      console.log(
-        '[logo-debug] AFTER API call | logoDraftToken=',
-        this.logoDraftToken,
-        '| textObjects=',
-        this.logoEdits.textObjects.map((t) => ({
-          id: t.id,
-          role: t.role,
-          text: t.text,
-          textEnabled: t.textEnabled,
-        })),
-      );
-
       const pageSettingStore = useUiPageSettingsStore();
 
       [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {