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

package/lib/src/shared/content-settings/components/form-fields-field/FormFieldsField.mixin.js

@@ -69,8 +69,10 @@ export default defineComponent({
     },
     methods: {
         toggleEnabled(index, value) {
-            const result = [...this.value];
-            result[index].enabled = value;
+            // Clone the row — `this.value[index]` is the store's reactive
+            // proxy and mutating it in place would leak the change to the
+            // store before the emit reaches updateItemValue.
+            const result = this.value.map((field, i) => i === index ? { ...field, enabled: value } : field);
             this.$emit('update:modelValue', {
                 id: this.id,
                 name: this.name,
@@ -78,8 +80,7 @@ export default defineComponent({
             });
         },
         toggleRequired(index, value) {
-            const result = [...this.value];
-            result[index].required = value;
+            const result = this.value.map((field, i) => i === index ? { ...field, required: value } : field);
             this.$emit('update:modelValue', {
                 id: this.id,
                 name: this.name,

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -14,17 +14,14 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES = [
     'profile',
     'text',
 ];
-/**
- * True when the incoming value is byte-identical (as JSON, matching how
- * history snapshots the model) to what the model already holds. Such
- * re-writes must be dropped whole: the assignment would be a reactive
- * no-op, but onContentChanged() still flips isModifiedAfterTemplateApplied
- * — and when that flag was false, its flip is itself a model mutation, so
- * undo history commits an entry in which nothing user-visible changed
- * (phantom undo state, BP-5772: re-clicking the logo panel's Upload/Logo
- * option, re-clicking an already-active display style).
- */
-const isSameValue = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
+// Identity-only, not deep-equal. Drops the two BP-5772 phantoms
+// (LogoSelectionField Upload re-click passes props.content.logoImage —
+// the same proxy that's in the store; display-style re-click emits the
+// stored primitive) and never false-positives on a caller that mutates
+// the store in place via a shared reference (e.g. `[...this.value];
+// result[i].x = v`), which would leave the payload byte-identical to
+// the store while state actually changed.
+const isSameValue = (a, b) => a === b;
 export const CONTENT_SETTINGS_MODES = {
     edit: 'edit',
     add: 'add',

package/package.json

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

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

@@ -3,7 +3,10 @@
     direction="top"
     alignment="center"
     :should-show-icon="false"
-    class="c-redo-button-tooltip"
+    :class="[
+      'c-redo-button-tooltip',
+      { 'c-tooltip-hidden': isMobileScreenSize },
+    ]"
   >
     <template #open>
       <Icon
@@ -39,13 +42,20 @@ 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 { useUiStore } from '@brand-page-maker/stores/ui/ui-store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { UI_SCREENSIZE_MODES } from '@shared/models';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
 const templateSettingsStore = useUiTemplateSettingsStore();
+const uiStore = useUiStore();
+
+const isMobileScreenSize = computed(
+  () => uiStore.screenSizeMode === UI_SCREENSIZE_MODES.mobile,
+);
 
 const isDisabled = computed(
   () =>
@@ -71,4 +81,8 @@ const onClick = () => {
   width: auto;
   padding: 4px 8px;
 }
+
+.c-tooltip-hidden :deep(.shared-tooltip__content) {
+  display: none !important;
+}
 </style>

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

@@ -3,7 +3,10 @@
     direction="top"
     alignment="center"
     :should-show-icon="false"
-    class="c-undo-button-tooltip"
+    :class="[
+      'c-undo-button-tooltip',
+      { 'c-tooltip-hidden': isMobileScreenSize },
+    ]"
   >
     <template #open>
       <Icon
@@ -39,13 +42,20 @@ 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 { useUiStore } from '@brand-page-maker/stores/ui/ui-store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { UI_SCREENSIZE_MODES } from '@shared/models';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 const historyStore = useHistoryStore();
 const aiThreadStore = useAiWebsiteBuilderThreadStore();
 const containerStore = useBrandPageContainerStore();
 const templateSettingsStore = useUiTemplateSettingsStore();
+const uiStore = useUiStore();
+
+const isMobileScreenSize = computed(
+  () => uiStore.screenSizeMode === UI_SCREENSIZE_MODES.mobile,
+);
 
 const isDisabled = computed(
   () =>
@@ -71,4 +81,8 @@ const onClick = () => {
   width: auto;
   padding: 4px 8px;
 }
+
+.c-tooltip-hidden :deep(.shared-tooltip__content) {
+  display: none !important;
+}
 </style>

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

@@ -66,6 +66,12 @@ vi.mock('@shared/template-settings/store', () => ({
   useUiTemplateSettingsStore: vi.fn(() => templateSettingsStoreMock),
 }));
 
+const uiStoreMock = { screenSizeMode: 'desktop' as 'desktop' | 'mobile' };
+
+vi.mock('@brand-page-maker/stores/ui/ui-store', () => ({
+  useUiStore: vi.fn(() => uiStoreMock),
+}));
+
 beforeEach(() => {
   setActivePinia(createPinia());
   historyStoreMock.canUndo = true;
@@ -76,6 +82,7 @@ beforeEach(() => {
   aiStoreMock.isProcessing = false;
   containerStoreMock.isSaving = false;
   templateSettingsStoreMock.isBusy = false;
+  uiStoreMock.screenSizeMode = 'desktop';
 });
 
 describe('UndoButton', () => {

package/src/shared/content-settings/components/form-fields-field/FormFieldsField.mixin.ts

@@ -81,9 +81,12 @@ export default defineComponent({
   },
   methods: {
     toggleEnabled(index, value) {
-      const result = [...this.value];
-
-      result[index].enabled = value;
+      // Clone the row — `this.value[index]` is the store's reactive
+      // proxy and mutating it in place would leak the change to the
+      // store before the emit reaches updateItemValue.
+      const result = this.value.map((field, i) =>
+        i === index ? { ...field, enabled: value } : field,
+      );
 
       this.$emit('update:modelValue', {
         id: this.id,
@@ -92,9 +95,9 @@ export default defineComponent({
       });
     },
     toggleRequired(index, value) {
-      const result = [...this.value];
-
-      result[index].required = value;
+      const result = this.value.map((field, i) =>
+        i === index ? { ...field, required: value } : field,
+      );
 
       this.$emit('update:modelValue', {
         id: this.id,

package/src/shared/content-settings/store/content-settings-store.test.ts

@@ -207,30 +207,26 @@ describe('content settings store — hydration writes arm the history merge', ()
   });
 });
 
-// BP-5772: a value-identical re-write must be dropped whole. The assignment
-// would be a reactive no-op, but onContentChanged() still flips
-// isModifiedAfterTemplateApplied — and when that flag was false, its flip is
-// itself a model mutation, so history commits an entry in which nothing
-// user-visible changed. Live repro: with the logo visible, clicking the logo
-// panel's "Upload" option re-emits { logoImage, logoTemplateImage,
-// logoImageBase64Url, isLogoVisible } deep-equal to the model under fresh
-// references (LogoSelectionField.onLogoVisibleChanged). Same class:
-// re-clicking the already-active display style.
+// BP-5772: a same-reference re-write must be dropped — the assignment
+// is a reactive no-op but onContentChanged()'s flip would land a phantom
+// history entry. Guard is identity-only; a deep-equal guard would also
+// drop writes where the caller mutated the store in place before emit
+// (FormFieldsField pre-fix) and break the canvas re-render.
 describe('content settings store — value-identical writes are dropped', () => {
-  const logoImage = () => ({
-    logoDraftToken: 'dae5cda0-602d-4c69-a26e-000000000001',
-    logoVariation: 0,
-    logoLastUpdate: '638000000000000000',
-  });
-
   const makeItem = () => ({
     id: 'item-1',
     type: 'logo',
     settings: {
       content: {
         title: '<p>old</p>',
+        displayStyle: 'preview',
         isLogoVisible: true,
-        logoImage: logoImage(),
+        logoImage: {
+          logoDraftToken: 'dae5cda0-602d-4c69-a26e-000000000001',
+          logoVariation: 0,
+          logoLastUpdate: '638000000000000000',
+        },
+        logoTemplateImage: { url: 'https://example.test/tpl.png' },
       },
     },
   });
@@ -254,26 +250,32 @@ describe('content settings store — value-identical writes are dropped', () =>
 
   test('updateMultipleItemValues drops the logo-panel Upload re-click payload', () => {
     const store = setupStore();
+    const content = store.items[0].settings.content as Record<string, unknown>;
 
-    // Deep-equal to the model but every reference is fresh — exactly what
-    // the Upload option click emits when visibility didn't change.
+    // Exactly what LogoSelectionField.onLogoVisibleChanged emits when
+    // visibility didn't change: the same reactive-proxy refs it read from
+    // the store, plus the current primitive visibility value.
     store.updateMultipleItemValues({
       id: 'item-1',
       name: 'logoImage',
-      value: { logoImage: logoImage(), isLogoVisible: true },
+      value: {
+        logoImage: content.logoImage,
+        logoTemplateImage: content.logoTemplateImage,
+        isLogoVisible: content.isLogoVisible,
+      },
     });
 
     expect(store.onContentChanged).not.toHaveBeenCalled();
     expect(store.validateItem).not.toHaveBeenCalled();
   });
 
-  test('updateItemValue drops an identical primitive', () => {
+  test('updateItemValue drops an identical primitive (display-style re-click)', () => {
     const store = setupStore();
 
     store.updateItemValue({
       id: 'item-1',
-      name: 'title',
-      value: '<p>old</p>',
+      name: 'displayStyle',
+      value: 'preview',
     });
 
     expect(store.onContentChanged).not.toHaveBeenCalled();
@@ -282,11 +284,12 @@ describe('content settings store — value-identical writes are dropped', () =>
 
   test('updateMultipleItemValues writes when any one field differs', () => {
     const store = setupStore();
+    const content = store.items[0].settings.content as Record<string, unknown>;
 
     store.updateMultipleItemValues({
       id: 'item-1',
       name: 'logoImage',
-      value: { logoImage: logoImage(), isLogoVisible: false },
+      value: { logoImage: content.logoImage, isLogoVisible: false },
     });
 
     expect(store.onContentChanged).toHaveBeenCalledTimes(1);
@@ -301,11 +304,46 @@ describe('content settings store — value-identical writes are dropped', () =>
 
     store.updateItemValue({
       id: 'item-1',
-      name: 'title',
-      value: '<p>old</p>',
+      name: 'displayStyle',
+      value: 'preview',
       isHydrationWrite: true,
     });
 
     expect(mergeNextMutationMock).not.toHaveBeenCalled();
   });
+
+  // Contact-form toggle repro (bp-5772 UAT env): pre-fix FormFieldsField
+  // shallow-copied `[...this.value]` and mutated `result[i].enabled` —
+  // hitting the store's inner obj before emit. Deep-equal guard would
+  // drop this as a no-op and the canvas would stay stale.
+  test('updateItemValue writes when the outer container is a fresh reference, even if a caller mutated the shared leaf in place', () => {
+    const store = setupStore();
+    const content = store.items[0].settings.content as Record<string, unknown>;
+
+    content.fields = [
+      { id: 'firstName', enabled: true, required: true, type: 'text' },
+      { id: 'message', enabled: true, required: true, type: 'text-area' },
+    ];
+
+    const payloadValue = [...(content.fields as Record<string, unknown>[])];
+
+    payloadValue[0].enabled = false;
+
+    store.updateItemValue({
+      id: 'item-1',
+      name: 'fields',
+      value: payloadValue,
+    });
+
+    expect(store.onContentChanged).toHaveBeenCalledTimes(1);
+    expect(store.validateItem).toHaveBeenCalledTimes(1);
+    // Check the effect rather than identity — Pinia wraps in a proxy.
+    expect(
+      (
+        (store.items[0].settings.content as Record<string, unknown>).fields as {
+          enabled: boolean;
+        }[]
+      )[0].enabled,
+    ).toBe(false);
+  });
 });

package/src/shared/content-settings/store/content-settings-store.ts

@@ -60,18 +60,14 @@ const DEFAULT_TEXT_COLOR_DEPENDENT_TYPES: readonly ContentType[] = [
   'text',
 ] as const;
 
-/**
- * True when the incoming value is byte-identical (as JSON, matching how
- * history snapshots the model) to what the model already holds. Such
- * re-writes must be dropped whole: the assignment would be a reactive
- * no-op, but onContentChanged() still flips isModifiedAfterTemplateApplied
- * — and when that flag was false, its flip is itself a model mutation, so
- * undo history commits an entry in which nothing user-visible changed
- * (phantom undo state, BP-5772: re-clicking the logo panel's Upload/Logo
- * option, re-clicking an already-active display style).
- */
-const isSameValue = (a: unknown, b: unknown): boolean =>
-  a === b || JSON.stringify(a) === JSON.stringify(b);
+// Identity-only, not deep-equal. Drops the two BP-5772 phantoms
+// (LogoSelectionField Upload re-click passes props.content.logoImage —
+// the same proxy that's in the store; display-style re-click emits the
+// stored primitive) and never false-positives on a caller that mutates
+// the store in place via a shared reference (e.g. `[...this.value];
+// result[i].x = v`), which would leave the payload byte-identical to
+// the store while state actually changed.
+const isSameValue = (a: unknown, b: unknown): boolean => a === b;
 
 export const CONTENT_SETTINGS_MODES = {
   edit: 'edit',