@designcrowd/library.brand-page 5.18.1-undo-29 → 5.18.1-undo-32

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

@@ -1,13 +1,12 @@
 import { defineStore } from 'pinia';
-import { computed, nextTick, ref, shallowRef, toRaw, watch } from 'vue';
+import { computed, ref, shallowRef, toRaw, watch } from 'vue';
 import type { BrandPageModel } from '@brand-page';
 import { useBrandPageMakerStore } from '../brandpage-maker/brandpage-maker-store';
+import { useBrandPageContainerStore } from '../brandpage-container';
 import { useAiWebsiteBuilderThreadStore } from '../ai-thread/ai-website-builder-thread-store';
 import { useEventTracker } from '../../composables/useEventTracker';
 import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
-import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
-import { useUiPageSettingsStore } from '@shared/page-settings/store';
 
 /**
  * A single history entry.
@@ -121,23 +120,6 @@ const MAX_ENTRY_BYTES = 25 * 1024 * 1024;
 // that would otherwise make undo light up before the user has done anything.
 const BASELINE_SETTLE_MS = 2000;
 
-// Content-level wrapper keys whose `paymentConfig` child is a denormalised
-// cache of `shopConfigStore.paymentConfig` (the user's Stripe Connect
-// linkage). Stripe Connect linkage state is backend-confirmed (per
-// `project-guardrails.md`) and must NEVER ride along on the undo/redo stack.
-//
-// paymentConfig is kept invariant under undo/redo by re-stamping every live
-// wrapper from `shopConfigStore.paymentConfig` after every restore — see
-// `restorePaymentConfigsOnLivePages`. The shop store itself is never
-// touched by undo/redo (see `applyHistorySnapshot` step 6), so the live
-// wrapper always equals the live shop store regardless of what's in the
-// snapshot bytes.
-const PAYMENT_CONFIG_WRAPPER_KEYS = [
-  'supportMeConfig',
-  'requestPaymentConfig',
-  'shopPaymentConfig',
-] as const;
-
 export const useHistoryStore = defineStore('history', () => {
   const eventTracker = useEventTracker();
 
@@ -172,6 +154,65 @@ export const useHistoryStore = defineStore('history', () => {
    */
   let cachedMakerStore: ReturnType<typeof useBrandPageMakerStore> | null = null;
 
+  /**
+   * Walk `brandPageData` and null `logoImageBase64Url` on every logo
+   * placement (header/footer × desktop/mobile + per-page logo content).
+   * Pre-purchase only — the same gate the save path uses
+   * (see `brand-page-container-store.ts:805`).
+   *
+   * Each rendered base64 is ~2-4 MB and the brand-site templates put the
+   * same logo in 6-8 places, so unstripped pre-purchase snapshots run
+   * 18-24 MB and bump the 25 MB per-entry cap, which silently drops the
+   * entry. The base64 is repopulated on undo by `_syncLogoSettingsFromSnapshot`
+   * (designed: re-issue fabric-render; BYO: stamp from per-token cache),
+   * so the snapshot doesn't need to carry it.
+   */
+  function stripLogoBase64IfPrePurchase(data: {
+    pages?: { contents?: { logoImageBase64Url?: string }[] }[];
+    pageHeaderDesktop?: { logoImageBase64Url?: string };
+    pageHeaderMobile?: { logoImageBase64Url?: string };
+    pageFooterDesktop?: { logoImageBase64Url?: string };
+    pageFooterMobile?: { logoImageBase64Url?: string };
+  }): void {
+    try {
+      if (!useBrandPageContainerStore().isPrePurchase) return;
+    } catch {
+      return;
+    }
+
+    if (data.pageHeaderDesktop) {
+      data.pageHeaderDesktop.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageHeaderMobile) {
+      data.pageHeaderMobile.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageFooterDesktop) {
+      data.pageFooterDesktop.logoImageBase64Url = undefined;
+    }
+
+    if (data.pageFooterMobile) {
+      data.pageFooterMobile.logoImageBase64Url = undefined;
+    }
+
+    if (Array.isArray(data.pages)) {
+      for (const page of data.pages) {
+        if (!Array.isArray(page?.contents)) continue;
+
+        for (const content of page.contents) {
+          if (
+            content &&
+            typeof content === 'object' &&
+            'logoImageBase64Url' in content
+          ) {
+            content.logoImageBase64Url = undefined;
+          }
+        }
+      }
+    }
+  }
+
   /**
    * Serialize the current `brandPageData` into a detached JSON string.
    * Synchronous — safe to call inside a microtask without racing a follow-up
@@ -181,7 +222,13 @@ export const useHistoryStore = defineStore('history', () => {
     if (!cachedMakerStore) return null;
 
     try {
-      return JSON.stringify(toRaw(cachedMakerStore.brandPageData));
+      const cloned = JSON.parse(
+        JSON.stringify(toRaw(cachedMakerStore.brandPageData)),
+      );
+
+      stripLogoBase64IfPrePurchase(cloned);
+
+      return JSON.stringify(cloned);
     } catch (error) {
       console.error('history-store: failed to serialize snapshot', error);
 
@@ -276,7 +323,20 @@ export const useHistoryStore = defineStore('history', () => {
   }): 'committed' | 'oversized' | 'noop' {
     const current = entries.value[currentIndex.value];
 
-    if (current && current.snapshot === args.snapshot) return 'noop';
+    // Compare both the snapshot bytes AND the logoEdits sidecar.
+    // Pre-purchase logo-tab edits (text/color/font) live in the
+    // `editableLogoStore.logoEdits` sidecar, NOT in `brandPageData`.
+    // The accompanying base64 writeback is also stripped from the
+    // snapshot (size cap), so a pure logo edit would produce a
+    // byte-identical snapshot to the previous entry — without the
+    // sidecar comparison every logo edit would dedup as a no-op.
+    if (
+      current &&
+      current.snapshot === args.snapshot &&
+      current.logoEdits === args.logoEdits
+    ) {
+      return 'noop';
+    }
 
     if (args.snapshot.length > MAX_ENTRY_BYTES) {
       eventTracker.sendHistoryOversizedEvent({
@@ -571,9 +631,9 @@ export const useHistoryStore = defineStore('history', () => {
    * dedicated `applyHistorySnapshot` action, which rehydrates every Pinia
    * source store + own-store scalar fields that `brandPageData` reads from.
    *
-   * Holds `isApplyingSnapshot` through `nextTick` so Vue's reactive queue
-   * drains while the watcher guard is still set, preventing the restore from
-   * being re-captured as a spurious duplicate entry.
+   * Holds `isApplyingSnapshot` for the duration of the apply so the
+   * watcher guard suppresses the cascade of mutations from being
+   * re-captured as a spurious duplicate entry.
    *
    * Active-page resolution priority:
    *   1. Diff against `cameFromIndex` — any page present in the target
@@ -671,62 +731,11 @@ export const useHistoryStore = defineStore('history', () => {
         resolvedActivePageId,
         targetEntry?.logoEdits,
       );
-      await nextTick();
-
-      // Re-stamp `wrapper.paymentConfig` on every payment-config wrapper in
-      // the freshly-restored content tree from the live shop store. Stripe
-      // Connect linkage is backend-confirmed (per `project-guardrails.md`)
-      // and must NEVER come from the snapshot — the captured value can be
-      // arbitrarily stale (an entry captured before
-      // `PaymentConfigField.mixin.ts:created()` lazily filled in the
-      // wrapper carries `paymentConfig: undefined`) and using it would
-      // re-surface the "Please enable a payment provider" warning on
-      // undo. The shop store's value is itself never undoable (see
-      // `applyHistorySnapshot` step 6).
-      restorePaymentConfigsOnLivePages();
     } finally {
       isApplyingSnapshot.value = false;
     }
   }
 
-  /**
-   * Walk the live `pageSettingsStore.pages` and stamp
-   * `wrapper.paymentConfig = shopConfigStore.paymentConfig` on every
-   * payment-config wrapper. Called from `applySnapshotString` after
-   * `applyHistorySnapshot` rebuilds page contents.
-   */
-  function restorePaymentConfigsOnLivePages(): void {
-    try {
-      const shopStore = useShopConfigStore();
-      const pageSettingsStore = useUiPageSettingsStore();
-      const livePaymentConfig = shopStore.paymentConfig;
-
-      for (const page of pageSettingsStore.pages) {
-        for (const item of page.contents) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const content: any = item.settings.content;
-
-          for (const key of PAYMENT_CONFIG_WRAPPER_KEYS) {
-            const wrapper = content?.[key];
-
-            if (
-              wrapper &&
-              typeof wrapper === 'object' &&
-              !Array.isArray(wrapper)
-            ) {
-              wrapper.paymentConfig = livePaymentConfig;
-            }
-          }
-        }
-      }
-    } catch (error) {
-      console.error(
-        'history-store: failed to restore paymentConfig on live pages',
-        error,
-      );
-    }
-  }
-
   /** Move the pointer back one step and apply the entry at the new position. */
   async function undo(): Promise<void> {
     if (!canUndo.value) return;

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

@@ -29,6 +29,7 @@ import {
 } from '@brand-page-maker/utils';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
 import { usePageNavigationStore } from '../../../../shared/page-navigation/store/page-navigation-store';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 interface CategoryTab {
   category: string;
@@ -44,6 +45,7 @@ export default defineComponent({
     const styleSettingsStore = useUiStyleSettingsStore();
     const userStore = useBrandPageMakerUserStore();
     const eventTracker = useEventTracker();
+    const historyStore = useHistoryStore();
     const { externalEditor } = useExternalRichTextEditor();
 
     return {
@@ -65,6 +67,7 @@ export default defineComponent({
       pageSettingsStore,
       styleSettingsStore,
       eventTracker,
+      historyStore,
       externalEditor,
     };
   },
@@ -81,6 +84,15 @@ export default defineComponent({
   },
   mounted() {
     if (this.canUseRichTextEditor) {
+      // `switchAllContentToRTE` walks every content item on every page
+      // and rewraps plain-text titles/paragraphs in TipTap HTML so they
+      // render through the inline RTE. That's a hydration write — it
+      // happens whenever the Content sidebar tab mounts (incl. when the
+      // user clicks the header in the canvas) and produces no
+      // user-visible change. Arm the merge flag so the watcher folds
+      // the resulting flush into the current head entry instead of
+      // pushing a phantom undo step.
+      this.historyStore.mergeNextMutation();
       switchAllContentToRTE(
         this.pageSettingsStore,
         this.externalEditor,

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

@@ -413,6 +413,34 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       await Promise.all(tasks);
 
+      this.stampLogoBase64IntoBrandPageData(overrideLogoVariation);
+
+      // Stash the freshly rendered variation set under the active draft
+      // token so undo can restore it later without re-rendering. This is
+      // the only place in production that meaningfully populates
+      // `editableLogoVariations` (BYO upload + designed-logo setStateAsync
+      // both funnel here), so caching here keeps every distinct draft's
+      // grid available for the lifetime of the session.
+      if (this.logoDraftToken) {
+        this.variationsByDraftToken[this.logoDraftToken] =
+          this.editableLogoVariations.map((v) => ({ ...v }));
+      }
+    },
+
+    /**
+     * Stamp `editableLogoVariations[*].base64` across every consumer in
+     * `brandPageData`: header/footer logo sections (desktop + mobile)
+     * and every `LogoContent` block on every page. Used by the live edit
+     * path after a fabric-render POST AND by the undo/redo BYO branch
+     * after `restoreVariationsForDraftToken` has rehydrated the cache.
+     *
+     * The history store strips `logoImageBase64Url` from snapshots to
+     * keep them under the 25 MB per-entry cap, so something has to
+     * write the base64 back into `brandPageData` after restore — for
+     * designed logos it's the awaited fabric-render call; for BYO it's
+     * this method.
+     */
+    stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number): void {
       const pageSettingStore = useUiPageSettingsStore();
 
       [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
@@ -449,17 +477,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
           }
         });
       });
-
-      // Stash the freshly rendered variation set under the active draft
-      // token so undo can restore it later without re-rendering. This is
-      // the only place in production that meaningfully populates
-      // `editableLogoVariations` (BYO upload + designed-logo setStateAsync
-      // both funnel here), so caching here keeps every distinct draft's
-      // grid available for the lifetime of the session.
-      if (this.logoDraftToken) {
-        this.variationsByDraftToken[this.logoDraftToken] =
-          this.editableLogoVariations.map((v) => ({ ...v }));
-      }
     },
 
     /**