@designcrowd/library.brand-page 5.18.4 → 5.18.5

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

@@ -33,6 +33,7 @@ import type {
 import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
+import { toRaw } from 'vue';
 import { useUiStore } from '../ui';
 import type { LogoSettingsState } from '@shared/logo-settings/store';
 import {
@@ -60,6 +61,7 @@ import {
   BRANDPAGE_DEFAULT_SAVE_MESSAGE_DESCRIPTION,
   MAKER_MOBILE_BREAKPOINT,
   MESSAGE_VISIBLE_DURATION,
+  SIDE_BAR_TAB_NAMES,
 } from '@brand-page-maker/constants';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { delayInMS } from '../../../utils/ui-util';
@@ -71,7 +73,6 @@ import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import type { PageSettingsStateSections } from '@shared/page-settings/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import {
-  isColorMatched,
   mapBrandPageContentToContentSettingsItem,
   removeContentFieldValues,
   removeLogoTemplateModel,
@@ -104,6 +105,7 @@ import { useConsent } from '@brand-page/composables/consent.composable';
 import { commonTr, errorTr } from '@src/composables/useTranslate';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { useVideoStore } from '../video';
+import { useHistoryStore } from '../history/history-store';
 import { findValuesByKey } from '../../../helpers/ts.helper';
 import { useLogoStore } from '../logo-store';
 
@@ -668,6 +670,16 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           description: payload.noDescription ? '' : description,
         },
       });
+
+      // Any successful save re-baselines the undo stack so a user can't
+      // undo back past the persisted state. This covers Save Progress /
+      // Publish AND settings-only saves (updateBrandPage,
+      // updateSensitiveContent, admin saveTemplate) — settings-tab
+      // actions persist the metadata, so allowing undo to roll them
+      // back would let the local stack drift from what's saved.
+      // reset() no-ops in non-undo-redo sessions (no baseline = nothing
+      // to clear).
+      useHistoryStore().reset();
     },
     hideChangeTemplateConfirmModal() {
       this.setIsChangeTemplateConfirmModalVisible({
@@ -681,10 +693,11 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       this.setSelectedTemplateId({ templateId: false });
       this.hideChangeTemplateConfirmModal();
     },
-    onChangeTemplateConfirmModalConfirm() {
-      this.applySelectedTemplate();
+    async onChangeTemplateConfirmModalConfirm() {
+      await this.applySelectedTemplate();
       this.hideChangeTemplateConfirmModal();
       this.isModifiedAfterTemplateApplied = false;
+      this._captureTemplateSwitchIfEnabled();
     },
     onContentChanged() {
       this.setIsModifiedAfterTemplateApplied();
@@ -692,7 +705,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     onStyleChanged(): void {
       this.setIsModifiedAfterTemplateApplied();
     },
-    onTemplateSelected(payload: OnTemplateSelectedPayload) {
+    async onTemplateSelected(payload: OnTemplateSelectedPayload) {
       this.setSelectedTemplateId({
         templateId: payload.templateId,
       });
@@ -702,7 +715,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           isVisible: true,
         });
       } else {
-        this.applySelectedTemplate();
+        await this.applySelectedTemplate();
+        this._captureTemplateSwitchIfEnabled();
       }
     },
     setSelectedTabName(payload) {
@@ -739,6 +753,358 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const uiContentSettingsStore = useUiContentSettingsStore();
 
       uiContentSettingsStore.updateContent<TContent>(payload);
+
+      // NOTE (Bolt 1, 2026-04-23): this action is not the actual edit path used
+      // by the UI — sidebar inputs call uiContentSettingsStore.updateItemValue
+      // directly. History capture is driven by a deep `watch(brandPageData, ...)`
+      // installed in history-store once the baseline is captured, so we do not
+      // need to instrument this action. Kept here as a pass-through because
+      // removing it may affect other callers.
+    },
+    /**
+     * Restore every store that the `brandPageData` getter reads from, so undo
+     * and redo bring back the EXACT document state captured at snapshot time.
+     *
+     * `initialiseStoresByBrandPageModelAsync` is too narrow for undo/redo — it
+     * only rehydrates pages, sections, and nav structure, which is enough for
+     * the AI-apply path but leaves navigation styles, backgrounds, button/text/
+     * logo/gallery styles, shop config, and several own-store fields unchanged.
+     * This action mirrors the full hydration surface of `applySelectedTemplate`
+     * (minus the template-specific logo/personalisation logic) so a restore is
+     * a complete round-trip of what `brandPageData` returns.
+     *
+     * Called ONLY by history-store during undo/redo. The history store sets
+     * `isApplyingSnapshot=true` across this call to prevent the deep-watcher
+     * on `brandPageData` from re-capturing the restored state.
+     */
+    /**
+     * Force-commit a `template_switch` entry to the history store, if the
+     * history store has a baseline (which only happens when the undo/redo
+     * feature flag is on — see `BrandPageMaker.mixin.ts`).
+     */
+    _captureTemplateSwitchIfEnabled(): void {
+      const historyStore = useHistoryStore();
+
+      if (!historyStore.baselineCaptured) return;
+
+      historyStore.captureTemplateSwitch();
+    },
+    async applyHistorySnapshot(
+      snapshot: BrandPageModel,
+      activePageId?: string,
+      logoEditsStr?: string,
+    ): Promise<void> {
+      const styleSettingsStore = useUiStyleSettingsStore();
+      const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+      const backgroundSettingsStore = useUiBackgroundSettingsStore();
+      const pageNavigationStore = usePageNavigationStore();
+      const shopStore = useShopConfigStore();
+
+      // 1. Pages + header/footer sections (also covers content items).
+      this.initialisePagesForCurrentPage({
+        pages: snapshot.pages,
+        sections: {
+          [PAGE_SECTIONS.header]: {
+            [VIEWPORTS.desktop]: snapshot.pageHeaderDesktop,
+            [VIEWPORTS.mobile]: snapshot.pageHeaderMobile,
+          },
+          [PAGE_SECTIONS.footer]: {
+            [VIEWPORTS.desktop]: snapshot.pageFooterDesktop,
+            [VIEWPORTS.mobile]: snapshot.pageFooterMobile,
+          },
+        },
+      });
+
+      // 2. Page-level nav structure (routes, orders).
+      pageNavigationStore.setNav({ nav: snapshot.nav });
+
+      // 3. Navigation STYLES (header/footer nav colors, alignment, etc.) —
+      //    this is the bit that was being dropped before.
+      // Use function-form $patch so each nested style object is replaced as a
+      // whole reference. The object-form $patch (used by setState) deep-merges
+      // and would leave keys present in the live state but absent from the
+      // snapshot in place — e.g. switching button styles then undoing would
+      // leave the new style's borderRadius/borderStyle/borderWidth applied.
+      navigationStyleSettingsStore.$patch((state) => {
+        state.navigation[PAGE_SECTIONS.header][VIEWPORTS.desktop] =
+          new NavigationDesktop(snapshot.pageHeaderDesktop?.navigation);
+        state.navigation[PAGE_SECTIONS.header][VIEWPORTS.mobile] =
+          new NavigationMobile(snapshot.pageHeaderMobile?.navigation);
+      });
+
+      // 4. Global styles (logo, button, text, gallery). Same whole-reference
+      //    replacement reasoning as step 3.
+      styleSettingsStore.$patch((state) => {
+        state.buttonStyles = snapshot.styles.buttonStyles;
+        state.logoStyles = snapshot.styles.logoStyles;
+        state.textStyles = snapshot.styles.textStyles;
+        state.galleryStyles = snapshot.styles.galleryStyles;
+      });
+
+      // 5. Background styles. Same whole-reference replacement reasoning as
+      //    step 3 — `setBackgroundStyles` calls per-field setters that
+      //    `Object.assign` partials onto the live `style` and
+      //    `backgroundShapeStyle` objects, so keys from the previous mode
+      //    (e.g. background image url, shape style props) would survive an
+      //    undo back to a state that doesn't have them.
+      backgroundSettingsStore.$patch((state) => {
+        state.backgroundStyles = snapshot.styles.backgroundStyles;
+      });
+      backgroundSettingsStore.onBackgroundChanged();
+
+      // 6. Shop products are derived from shop-content blocks inside `pages`,
+      // so they're already implicitly restored at step 1. Re-run the shop
+      // store's derivation to keep `products` in sync with the snapshot
+      // pages. paymentConfig is intentionally NOT restored — selecting it is
+      // backend-confirmed (Stripe Connect / payment-provider linkage) per
+      // project-guardrails.md, so it must persist across undo. We pass the
+      // live paymentConfig back in to preserve it.
+      shopStore.initialiseShopStore({
+        paymentConfig: shopStore.paymentConfig,
+        pages: snapshot.pages ?? [],
+      });
+
+      // 7. Own-store scalar fields surfaced by the brandPageData getter.
+      if (snapshot.isModifiedAfterTemplateApplied !== undefined) {
+        this.isModifiedAfterTemplateApplied =
+          snapshot.isModifiedAfterTemplateApplied;
+      }
+
+      if (snapshot.brandPageType) {
+        this.setBrandPageType({ brandPageType: snapshot.brandPageType });
+      }
+
+      this.faviconUrl = snapshot.faviconUrl;
+      this.ogImageUrl = snapshot.ogImageUrl;
+      this.measurementID = snapshot.measurementID;
+      this.adsenseID = snapshot.adsenseID;
+      this.ogTitle = snapshot.ogTitle;
+      this.ogDescription = snapshot.ogDescription;
+      this.cookieOptions = snapshot.cookieOptions;
+      this.saveContactSettings = snapshot.saveContactSettings;
+
+      // 8. Re-sync the logo-settings sidebar's `selectedLogoImage` from the
+      //    restored header logo. The preview rehydrates via the page contents,
+      //    but `uiLogoSettings` holds its own copy that drives the sidebar
+      //    "current logo" state — same pattern as `initialiseStoresByBrandPageModelAsync`.
+      //    Also restores the variations grid + template asset for the
+      //    snapshot's draft token (both are sidecars to `brandPageData` —
+      //    BYO upload mutates them out of band). When the captured entry
+      //    carries a `logoEdits` sidecar (pre-purchase logo-tab edits —
+      //    text, support text, logo colors, fonts), `editableLogoStore.logoEdits`
+      //    is restored from that string so the sidebar form fields and the
+      //    save-time fabric-render POST both pick up the pre-edit state.
+      await this._syncLogoSettingsFromSnapshot(snapshot, logoEditsStr);
+
+      // 9. If the sidebar is editing a content item that no longer exists in
+      //    the restored page, fall back to the Content tab so the user doesn't
+      //    stare at a blank settings panel.
+      this._fallbackSidebarIfSelectedContentMissing(snapshot);
+
+      // 10. Switch to the page the user was viewing when this entry was
+      //     captured (or the closest still-existing page if the captured
+      //     page was the one being undone-away). The history store does the
+      //     walk-back resolution and passes us a pageId that's guaranteed to
+      //     exist in the restored nav — or undefined if no entry walking
+      //     back has a viable id, in which case we fall through to the
+      //     first/default route. Without this, the page-tabs carousel keeps
+      //     highlighting whatever page slug is in the URL (which can no
+      //     longer match any nav item after a page-add undo) and the
+      //     sidebar's `currentPage` getter silently falls back to page 0.
+      this._navigateToActivePage(activePageId);
+    },
+
+    async _syncLogoSettingsFromSnapshot(
+      snapshot: BrandPageModel,
+      logoEditsStr?: string,
+    ): Promise<void> {
+      const logoSettingsStore = useUiLogoSettingsStore();
+      const editableLogoStore = useUiEditableLogoStore();
+      const logoStore = useLogoStore();
+      const containerStore = useBrandPageContainerStore();
+
+      // Pre-restore logo identity, used to short-circuit the
+      // fabric-render call when only non-logo state changed.
+      const prevLogoEditsStr = JSON.stringify(
+        toRaw(editableLogoStore.logoEdits),
+      );
+      const prevDraftToken = editableLogoStore.logoDraftToken;
+
+      // Wholesale-replace via $patch so prior textObjects/colors don't
+      // leak across template switches.
+      if (logoEditsStr) {
+        try {
+          const parsed = JSON.parse(logoEditsStr);
+
+          editableLogoStore.$patch({ logoEdits: parsed });
+        } catch (error) {
+          console.error(
+            'brandpage-maker-store: failed to restore logoEdits',
+            error,
+          );
+        }
+      }
+
+      const logoImage =
+        snapshot.brandPageType === BRAND_PAGE_TYPES.default
+          ? (
+              snapshot.pages?.[0]?.contents?.find(
+                (c) => c.type === 'logo',
+              ) as any
+            )?.logoImage
+          : snapshot.pageHeaderDesktop?.logoImage;
+
+      if (!logoImage) return;
+
+      logoSettingsStore.setState({
+        newState: { selectedLogoImage: logoImage },
+      });
+
+      const draftToken: string | undefined = logoImage.logoDraftToken;
+
+      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);
+
+      if (draft) {
+        editableLogoStore.setEnableEditMode(!draft.isByo);
+
+        if (draft.templateAsset) {
+          logoStore.setLogoTemplateAsset(draft.templateAsset);
+        }
+      }
+
+      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);
+
+      if (logoUnchanged) {
+        editableLogoStore.stampLogoBase64IntoBrandPageData();
+
+        return;
+      }
+
+      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();
+        }
+
+        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();
+
+        try {
+          await editableLogoStore.updateEditableLogoImageUrlAsync();
+        } catch (error) {
+          console.error(
+            'brandpage-maker-store: failed to re-render logo on history apply',
+            error,
+          );
+        }
+      }
+    },
+
+    /**
+     * Restore the active page after a history apply. The id passed in is
+     * already validated against the restored nav by the history store; if
+     * it's undefined (no entry walking back had a viable page), fall back
+     * to the first/default route so the URL, `routeStore.currentRoute.params`,
+     * `pageNavigation.activePageId`, and the page-tab highlight all line up.
+     *
+     * `setCurrentActivePage` is called explicitly in addition to
+     * `navigateToPageByPageId` because `navigateToPageByPageId` is a no-op
+     * when the router instance is undefined (e.g. SSR / unit tests), but the
+     * Pinia state must still be updated so the sidebar's `currentPage`
+     * getter returns the right page.
+     */
+    _navigateToActivePage(activePageId?: string): void {
+      const pageNavigationStore = usePageNavigationStore();
+
+      let targetPageId = activePageId;
+
+      if (!targetPageId) {
+        const fallbackRoute = pageNavigationStore.routes.length
+          ? pageNavigationStore.getFirstOrDefaultRoute()
+          : undefined;
+
+        targetPageId = fallbackRoute?.pageId;
+      }
+
+      if (!targetPageId) return;
+
+      // Skip both the Pinia write and the router push when the target page
+      // is already active. The router push fires `router.afterEach` even
+      // for same-page navigation, and BrandPageMaker.mixin's afterEach hook
+      // resets the content-settings modeStack — which would snap the
+      // sidebar back to the default Content tab on every undo/redo,
+      // regardless of whether the user was deep-editing a content item.
+      if (pageNavigationStore.activePageId === targetPageId) return;
+
+      pageNavigationStore.setCurrentActivePage({ pageId: targetPageId });
+      navigateToPageByPageId(targetPageId);
+    },
+
+    _fallbackSidebarIfSelectedContentMissing(snapshot: BrandPageModel): void {
+      const contentSettingsStore = useUiContentSettingsStore();
+      const sideBarStore = useUiSideBarStore();
+
+      const selectedItemId = contentSettingsStore.selectedItemId;
+
+      if (!selectedItemId) return;
+
+      const existingContentIds = new Set<string>();
+
+      snapshot.pages?.forEach((page) => {
+        page.contents?.forEach((content) => {
+          if (content?.id) existingContentIds.add(content.id);
+        });
+      });
+
+      if (existingContentIds.has(selectedItemId)) return;
+
+      // The previously-selected content was undone away. Restore the
+      // Content tab's natural landing state — the same shape produced
+      // when the user clicks the Content tab fresh — instead of leaving
+      // the sidebar stuck rendering `<FocusedContentItemSettings>` for
+      // a missing item, which paints a blank panel.
+      //
+      // `resetMode()` pops the modeStack back to the base `edit` entry
+      // (the default landing mode); clearing `selectedItemId` releases
+      // the pointer to the now-deleted item.
+      sideBarStore.setSelectedTabName({
+        tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+      });
+      contentSettingsStore.resetMode();
+      contentSettingsStore.selectedItemId = null;
+      contentSettingsStore.selectedItemFieldName = null;
+      contentSettingsStore.selectedItemIndex = null;
+      contentSettingsStore.selectedItemValue = null;
     },
     export(): BrandPageModel {
       const data = this.brandPageData;
@@ -1098,19 +1464,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           },
         });
 
-        if (userStore.isAdmin && !this.isUserDraft) {
-          for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
-            const hamburger =
-              navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
-                viewport
-              ].hamburgerMenuStyle;
-
-            if (isColorMatched(hamburger.subNavBackgroundColor)) {
-              hamburger.subNavBackgroundColor = undefined;
-            }
-          }
-        }
-
         uiStore.setThirdPartySettings({
           thirdPartySettings: {
             unsplashApplicationName,