@designcrowd/library.brand-page 6.0.6-tracker-1 → 6.0.6-undo-3

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

@@ -26,6 +26,12 @@ export interface HistoryEntry {
   activePageId: string;
   /** JSON-stringified `editableLogoStore.logoEdits`. Undefined if logo tab never opened. */
   logoEdits?: string;
+  /**
+   * Selected template id at capture time — drives the templates sidebar
+   * highlight. `false` when no template is selected. Sidecar to
+   * `brandPageData` (not part of the persisted model), like `activePageId`.
+   */
+  selectedTemplateId?: string | false;
 }
 
 // Monotonic burst — first mutation starts the timer, subsequent mutations
@@ -150,6 +156,10 @@ export const useHistoryStore = defineStore('history', () => {
     return usePageNavigationStore().activePageId ?? '';
   }
 
+  function getCurrentSelectedTemplateId(): string | false {
+    return useBrandPageMakerStore().selectedTemplateId;
+  }
+
   function serializeCurrentLogoEdits(): string | undefined {
     try {
       const editableLogoStore = useUiEditableLogoStore();
@@ -187,6 +197,7 @@ export const useHistoryStore = defineStore('history', () => {
     label?: string;
     activePageId: string;
     logoEdits?: string;
+    selectedTemplateId?: string | false;
   }): 'committed' | 'oversized' | 'noop' {
     const current = entries.value[currentIndex.value];
 
@@ -219,6 +230,7 @@ export const useHistoryStore = defineStore('history', () => {
       sizeBytes: args.snapshot.length,
       activePageId: args.activePageId,
       logoEdits: args.logoEdits,
+      selectedTemplateId: args.selectedTemplateId,
     };
 
     // FR-11: truncate redo tail, then append.
@@ -293,6 +305,7 @@ export const useHistoryStore = defineStore('history', () => {
 
       const activePageId = getCurrentActivePageId();
       const logoEdits = serializeCurrentLogoEdits();
+      const selectedTemplateId = getCurrentSelectedTemplateId();
 
       // Settle window: fold post-init reactive cascades back into the
       // baseline so undo doesn't light up before the user has done
@@ -317,6 +330,7 @@ export const useHistoryStore = defineStore('history', () => {
             sizeBytes: snapshot.length,
             activePageId,
             logoEdits,
+            selectedTemplateId,
           },
         ];
 
@@ -333,6 +347,7 @@ export const useHistoryStore = defineStore('history', () => {
           sizeBytes: snapshot.length,
           activePageId,
           logoEdits,
+          selectedTemplateId,
         };
         entries.value = next;
 
@@ -345,6 +360,7 @@ export const useHistoryStore = defineStore('history', () => {
         actor: 'user',
         activePageId,
         logoEdits,
+        selectedTemplateId,
       });
     };
 
@@ -402,6 +418,7 @@ export const useHistoryStore = defineStore('history', () => {
         sizeBytes: snapshot.length,
         activePageId: getCurrentActivePageId(),
         logoEdits: serializeCurrentLogoEdits(),
+        selectedTemplateId: getCurrentSelectedTemplateId(),
       },
     ];
     currentIndex.value = 0;
@@ -427,6 +444,7 @@ export const useHistoryStore = defineStore('history', () => {
       snapshot,
       activePageId: getCurrentActivePageId(),
       logoEdits: serializeCurrentLogoEdits(),
+      selectedTemplateId: getCurrentSelectedTemplateId(),
       ...args,
     });
   }
@@ -531,6 +549,7 @@ export const useHistoryStore = defineStore('history', () => {
         snapshot,
         resolvedActivePageId,
         targetEntry?.logoEdits,
+        targetEntry?.selectedTemplateId,
       );
     } finally {
       isApplyingSnapshot.value = false;

package/src/metadata-builder/builders/reorder-pages-builder.ts

@@ -0,0 +1,80 @@
+import type { BrandPageModel, NavOrder } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface ReorderPagesPayload {
+  pageOrder: string[];
+}
+
+export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+  constructor(
+    request: MetadataBuilderRequest<ReorderPagesPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.pageOrder?.length) {
+      errors.push('page_order is required for reorder_pages');
+    }
+
+    return { errors };
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const { pageOrder } = this.request.payload!;
+
+    // Build pageId → routeId lookup from nav.routes
+    const pageIdToRouteId = new Map<string, string>();
+
+    for (const route of model.nav.routes) {
+      pageIdToRouteId.set(route.pageId, route.id);
+    }
+
+    // Build new nav.orders from the flat page_order (array of pageIds)
+    const newOrders: NavOrder[] = [];
+    const seenRouteIds = new Set<string>();
+
+    for (const pageId of pageOrder) {
+      const routeId = pageIdToRouteId.get(pageId);
+
+      if (!routeId) continue;
+
+      newOrders.push({ routeId, subRoutes: [] });
+      seenRouteIds.add(routeId);
+    }
+
+    // Safety: append any routes not mentioned (don't lose pages)
+    for (const route of model.nav.routes) {
+      const routeId = pageIdToRouteId.get(route.pageId);
+
+      if (routeId && !seenRouteIds.has(routeId)) {
+        newOrders.push({ routeId, subRoutes: [] });
+      }
+    }
+
+    model.nav.orders = newOrders;
+
+    this.log({
+      message: `Reordered pages: ${pageOrder.join(', ')}`,
+    });
+
+    return { request: this.request, model };
+  }
+}

package/src/shared/content-settings/components/GenericTextInput.mixin.test.ts

@@ -0,0 +1,119 @@
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import GenericTextInputMixin from './GenericTextInput.mixin';
+
+// BP-5810: the RTE attaches `{ isHydration: true }` meta to its canonical
+// write-back emits. GenericTextInput must carry that through its 100ms
+// debounce onto the outgoing payload as `isHydrationWrite` — and downgrade
+// the burst as soon as a single non-hydration write lands in it.
+
+const DEBOUNCE_WAIT_MS = 100;
+
+interface EmittedPayload {
+  id: string;
+  name: string;
+  value: string | false;
+  isHydrationWrite?: boolean;
+}
+
+const TestHost = defineComponent({
+  mixins: [GenericTextInputMixin],
+  template: '<div />',
+});
+
+const mountHost = () =>
+  mount(TestHost, {
+    props: {
+      id: 'item-1',
+      name: 'title',
+      value: '<p>seed</p>',
+      showRichTextEditor: true,
+    },
+  });
+
+const emittedPayload = (
+  wrapper: ReturnType<typeof mountHost>,
+  call: number,
+): EmittedPayload =>
+  wrapper.emitted('update:modelValue')![call][0] as EmittedPayload;
+
+describe('GenericTextInput hydration burst flag', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('a hydration-only burst emits a payload flagged isHydrationWrite', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p style="text-align: center;"></p>', {
+      isHydration: true,
+    });
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    const emitted = wrapper.emitted('update:modelValue');
+
+    expect(emitted).toHaveLength(1);
+    expect(emitted![0][0]).toEqual({
+      id: 'item-1',
+      name: 'title',
+      value: '<p style="text-align: center;"></p>',
+      isHydrationWrite: true,
+    });
+  });
+
+  test('coalesced hydration writes in one burst stay flagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>a</p>', { isHydration: true });
+    wrapper.vm.onRteModelValue('<p>b</p>', { isHydration: true });
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 0).value).toBe('<p>b</p>');
+  });
+
+  test('a user write in the same burst downgrades it to a normal edit', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    // Focused typing emits without meta.
+    wrapper.vm.onRteModelValue('<p>typed</p>');
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('a plain write (no meta) is never flagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.text = '<p>typed</p>';
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('the flag resets between bursts', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onRteModelValue('<p>canonical</p>', { isHydration: true });
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    wrapper.vm.text = '<p>typed later</p>';
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_WAIT_MS + 10);
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(2);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 1).isHydrationWrite).toBeUndefined();
+  });
+});

package/src/shared/content-settings/components/GenericTextInput.mixin.ts

@@ -108,6 +108,13 @@ export default defineComponent({
       isDirty: false,
       emitChangeDebounce: undefined as DebounceHandle | undefined,
       lengthError: false,
+      // Whether every write in the current debounce burst was an RTE
+      // hydration write-back (see UpdateItemValuePayload.isHydrationWrite).
+      // undefined = no burst pending; any user write downgrades it to false.
+      burstIsHydration: undefined as boolean | undefined,
+      // One-shot channel from onRteModelValue into the `text` setter for
+      // the write currently being applied.
+      pendingWriteIsHydration: false,
     };
   },
   computed: {
@@ -144,6 +151,15 @@ export default defineComponent({
         return unescapeContentText(this.value);
       },
       set(newVal: string | false): void {
+        // A burst is hydration only if EVERY write in it is hydration —
+        // one real keystroke downgrades the whole burst to a user edit
+        // (the canonicalisation then rides inside that legitimate entry).
+        const writeIsHydration = this.pendingWriteIsHydration;
+
+        this.pendingWriteIsHydration = false;
+        this.burstIsHydration =
+          this.burstIsHydration !== false && writeIsHydration;
+
         if (newVal === false) {
           this._value = false;
         } else {
@@ -179,12 +195,16 @@ export default defineComponent({
         this._value = false;
       }
 
+      // Toggling is a user action — downgrade any pending hydration burst
+      // so this emit commits as a normal entry.
+      this.burstIsHydration = false;
       this.emitChange();
     },
 
     showRichTextEditor(newVal: boolean) {
       if (!newVal && this._value && typeof this._value === 'string') {
         this._value = encodeContentText(this._value);
+        this.burstIsHydration = false;
         this.emitChange();
       }
     },
@@ -208,11 +228,25 @@ export default defineComponent({
       this.isDirty = false;
     },
 
+    // RTE branch handler: receives the hydration meta the RichTextEditor
+    // attaches to its update:modelValue emits (a plain v-model binding
+    // would drop the second argument), records it for the `text` setter,
+    // then applies the write.
+    onRteModelValue(newVal: string, meta?: { isHydration?: boolean }): void {
+      this.pendingWriteIsHydration = meta?.isHydration === true;
+      this.text = newVal;
+    },
+
     emitChange() {
+      const isHydrationWrite = this.burstIsHydration === true;
+
+      this.burstIsHydration = undefined;
+
       this.$emit('update:modelValue', {
         id: this.id,
         name: this.name,
         value: this._value,
+        ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
       });
     },
   },

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue

@@ -24,7 +24,6 @@ import { Button } from '@designcrowd/fe-shared-lib';
 import { ref, computed, onMounted } from 'vue';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { useBrandPageMakerUserStore } from '../../../../brand-page-maker/stores';
-import { useHistoryStore } from '../../../../brand-page-maker/stores/history/history-store';
 import { pageSettingTr } from '../../../../composables/useTranslate';
 import PageSelectorDropdown from '../../../page-navigation/PageSelectorDropdown.vue';
 import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
@@ -44,14 +43,18 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (
     e: 'update:modelValue',
-    payload: { id: string; name: string; value: string },
+    payload: {
+      id: string;
+      name: string;
+      value: string;
+      isHydrationWrite?: boolean;
+    },
   ): void;
 }>();
 
 const pageNavigationStore = usePageNavigationStore();
 const pageSettingsStore = useUiPageSettingsStore();
 const userStore = useBrandPageMakerUserStore();
-const historyStore = useHistoryStore();
 
 const selectedPage = ref('');
 
@@ -111,12 +114,14 @@ onMounted(() => {
     if (routeByPageId) {
       selectedPage.value = routeByPageId.displayName;
     } else {
-      // Stale page-id clear at mount — fold into current head.
-      historyStore.mergeNextMutation();
+      // Stale page-id clear at mount — a hydration write, not a user edit.
+      // The flag makes the content-settings store fold it into the current
+      // undo head at write time (see UpdateItemValuePayload.isHydrationWrite).
       emit('update:modelValue', {
         id: props.id,
         name: props.name,
         value: '',
+        isHydrationWrite: true,
       });
     }
   }

package/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.ts

@@ -15,7 +15,6 @@ import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settin
 import { paymentConfigTr } from '@src/composables/useTranslate';
 import brandPageClient from '../../../../clients/brand-page-client';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 export default defineComponent({
   props: {
@@ -42,7 +41,6 @@ export default defineComponent({
     const uiPageSettingsStore = useUiPageSettingsStore();
     const eventManagerStore = useEventManagerStore();
     const shopConfigStore = useShopConfigStore();
-    const historyStore = useHistoryStore();
 
     return {
       brandPageToken: computed(() => brandPageContainerStore.brandPageToken),
@@ -53,7 +51,6 @@ export default defineComponent({
       eventManagerStore,
       shopConfigStore,
       uiPageSettingsStore,
-      historyStore,
     };
   },
   emits: ['update:modelValue'],
@@ -113,16 +110,16 @@ export default defineComponent({
         paymentConfig: this.shopConfigStore.paymentConfig,
       };
 
+      // Lazy paymentConfig hydration — a hydration write, not a user edit.
+      // The flag makes the content-settings store fold it into the current
+      // undo head at write time (see UpdateItemValuePayload.isHydrationWrite).
       const payload: UpdateItemValuePayload<PaymentConfig> = {
         id: this.id,
         name: this.name,
         value,
+        isHydrationWrite: true,
       };
 
-      // Lazy paymentConfig hydration — fold into current head instead
-      // of pushing a phantom entry.
-      this.historyStore.mergeNextMutation();
-
       this.$emit('update:modelValue', payload);
     }
   },

package/src/shared/content-settings/components/text-field/TextField.vue

@@ -4,7 +4,7 @@
       v-if="showRichTextEditor"
       :id="`${id}-${name}`"
       ref="richTextEditorRef"
-      v-model="text"
+      :model-value="text"
       :attrs="attrs"
       :label="label"
       :placeholder="placeholder"
@@ -17,6 +17,7 @@
       :content-type="contentType"
       @focus="onFocus"
       @blur="onBlur"
+      @update:model-value="onRteModelValue"
     />
     <TextInput
       v-else

package/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.test.ts

@@ -0,0 +1,149 @@
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import type { Content, LogoTheme, TextItem } from '@brand-page/models';
+import TextItemsFieldMixin from './TextItemsField.mixin';
+
+// BP-5810: TextItemsField re-wraps per-item TextareaField payloads into one
+// textItems array payload behind its own 250ms debounce. The hydration flag
+// must survive this second hop (AND rule: any user action in the burst
+// downgrades it).
+
+const DEBOUNCE_IN_MS = 250;
+
+interface EmittedPayload {
+  id: string;
+  name: string;
+  value: TextItem[];
+  isHydrationWrite?: boolean;
+}
+
+const TestHost = defineComponent({
+  mixins: [TextItemsFieldMixin],
+  template: '<div />',
+});
+
+const makeTextItem = (text: string): TextItem =>
+  ({
+    text,
+    textStyle: {
+      fontSize: '16px',
+      textAlign: 'left',
+      textStyleType: 'paragraphs',
+      applyAutoScale: true,
+    },
+  }) as TextItem;
+
+const mountHost = () =>
+  mount(TestHost, {
+    props: {
+      id: 'item-1',
+      name: 'textItems',
+      content: { id: 'item-1', type: 'text' } as Content,
+      value: [makeTextItem('<p>one</p>'), makeTextItem('<p>two</p>')],
+      isAdmin: false,
+      logoTheme: {
+        logoTextColor: '#000000',
+        logoBackgroundColor: '#ffffff',
+      } as unknown as LogoTheme,
+      showRichTextEditor: true,
+    },
+  });
+
+const emittedPayload = (
+  wrapper: ReturnType<typeof mountHost>,
+  call: number,
+): EmittedPayload =>
+  wrapper.emitted('update:model-value')![call][0] as EmittedPayload;
+
+describe('TextItemsField hydration burst flag', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('hydration-only item writes emit a flagged textItems payload', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p style="text-align: center;">one</p>',
+        isHydrationWrite: true,
+      },
+      0,
+    );
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p style="text-align: center;">two</p>',
+        isHydrationWrite: true,
+      },
+      1,
+    );
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBe(true);
+    expect(emittedPayload(wrapper, 0).value[0].text).toBe(
+      '<p style="text-align: center;">one</p>',
+    );
+  });
+
+  test('an unflagged item write keeps the payload unflagged', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      { id: 'item-1', name: 'textItems', value: '<p>typed</p>' },
+      0,
+    );
+
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+  });
+
+  test('a user action in the burst downgrades a pending hydration flag', async () => {
+    const wrapper = mountHost();
+
+    wrapper.vm.onTextAreaTextChange(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: '<p>canonical</p>',
+        isHydrationWrite: true,
+      },
+      0,
+    );
+
+    // Style change is a user action and emits immediately.
+    wrapper.vm.setTextStyleOption(
+      {
+        id: 'item-1',
+        name: 'textItems',
+        value: { fontSize: '20px', textAlign: 'left' },
+      },
+      1,
+    );
+
+    expect(wrapper.emitted('update:model-value')).toHaveLength(1);
+    expect(emittedPayload(wrapper, 0).isHydrationWrite).toBeUndefined();
+
+    // The trailing debounced emit must not resurrect the flag either.
+    await vi.advanceTimersByTimeAsync(DEBOUNCE_IN_MS + 10);
+
+    const calls = wrapper.emitted('update:model-value')!;
+
+    for (let i = 0; i < calls.length; i++) {
+      expect(emittedPayload(wrapper, i).isHydrationWrite).toBeUndefined();
+    }
+  });
+});