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

package/src/shared/content-settings/components/logo-selection-field/LogoSelection.vue

@@ -59,7 +59,7 @@
       </template>
     </ButtonGroup>
     <div
-      v-if="selectedOption === 1 && !containerStore.isPrePurchase"
+      v-if="data.selectedOption === 1 && !containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <div class="tw-flex tw-items-center">
@@ -90,7 +90,7 @@
       </div>
     </div>
     <div
-      v-if="selectedOption === 1 && containerStore.isPrePurchase"
+      v-if="data.selectedOption === 1 && containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <LogoVariations
@@ -99,7 +99,7 @@
         @logo-variation-selected="onEditableLogoVariationSelected"
       />
     </div>
-    <div v-if="selectedOption === 2" class="tw-mb-4">
+    <div v-if="data.selectedOption === 2" class="tw-mb-4">
       <UploadLogoModal>
         <template #main="mainProp">
           <LogoField
@@ -188,100 +188,88 @@ const logoTabs: Tab[] = reactive([
 ]);
 
 const data = reactive({
-  // Sticky override for the "Logo / Upload" choice when isLogoVisible is true.
-  // Set when the user explicitly clicks Logo or Upload; cleared on undo/redo
-  // so the snapshot's logoDraftAsset.isByo decides instead. `null` means
-  // "derive from props".
-  manualVisibleChoice: null as null | 1 | 2,
+  selectedOption: 1,
+  currentLogoIsByo: false,
   logoEditUrl: '',
 });
 
 const containerStore = useBrandPageContainerStore();
-const logoStore = useLogoStore();
-const editableLogoStore = useUiEditableLogoStore();
-const sideBarStore = useUiSideBarStore();
-const userStore = useBrandPageMakerUserStore();
-
-const currentLogoIsByo = computed(() => {
-  const logoDraftAsset = logoStore.getLogoDraftAssetByToken(
-    props.selectedLogoDraftToken,
-  );
-
-  return !!logoDraftAsset?.isByo;
-});
-
-// Highlighted button. Derived purely from props + the user's most recent
-// manual choice — never from event-handler-set local state. Undo/redo
-// restores `props` from the history snapshot, which clears the manual
-// override (see watcher below) so the highlight tracks whatever the
-// snapshot says: None when isLogoVisible is false, Upload when the
-// restored logo is BYO, Logo otherwise.
-const selectedOption = computed<0 | 1 | 2>(() => {
-  if (!props.isLogoVisible) return 0;
-
-  if (currentLogoIsByo.value) return 2;
-
-  return data.manualVisibleChoice ?? 1;
-});
 
 const options = computed<ButtonGroupOption[]>(() => {
   const optionList = [
     {
       label: commonTr('none'),
       value: '0',
-      isSelected: selectedOption.value === 0,
+      isSelected: data.selectedOption === 0,
       iconName: `ban`,
       iconSize: 'sm',
     },
     {
       label: commonTr('logo'),
       value: '1',
-      isSelected: selectedOption.value === 1,
+      isSelected: data.selectedOption === 1,
       iconName: `bc-mast`,
       iconSize: 'sm',
     },
     {
       label: commonTr('upload'),
       value: '2',
-      isSelected: selectedOption.value === 2,
+      isSelected: data.selectedOption === 2,
       iconName: `upload-arrow`,
       iconSize: 'sm',
     },
   ];
 
-  if (currentLogoIsByo.value) {
+  if (data.currentLogoIsByo) {
     return optionList.filter((x) => x.value !== '1');
   }
 
   return optionList;
 });
 
+const logoStore = useLogoStore();
+const editableLogoStore = useUiEditableLogoStore();
+const sideBarStore = useUiSideBarStore();
+const userStore = useBrandPageMakerUserStore();
+
+onMounted(() => updateState());
+
+watch(
+  () => props.isLogoVisible,
+  () => updateState(),
+);
+
+watch(
+  () => props.selectedLogoDraftToken,
+  () => updateState(),
+);
+
+watch(
+  () => props.selectedLogo,
+  () => updateState(),
+);
+
 const updateState = () => {
   const logoDraftAsset = logoStore.getLogoDraftAssetByToken(
     props.selectedLogoDraftToken,
   );
 
   data.logoEditUrl = logoDraftAsset?.logoEditUrl || '';
-};
 
-onMounted(() => updateState());
-
-// Only `selectedLogoDraftToken` clears the manual override — that's the
-// signal for an *external* data change (upload landed, or undo/redo
-// restored a different draft). `isLogoVisible` flips on the user's own
-// click and propagates back through props, so resetting on it would
-// clobber the choice the user just made (e.g. None → Upload would land
-// on Logo because the watcher fires before the computed re-reads).
-watch(
-  () => props.selectedLogoDraftToken,
-  () => {
-    data.manualVisibleChoice = null;
-    updateState();
-  },
-);
+  if (!props.isLogoVisible) {
+    data.selectedOption = 0;
+  } else {
+    if (logoDraftAsset?.isByo) {
+      data.selectedOption = 2;
+    } else {
+      data.selectedOption = data.selectedOption || 1;
+    }
+  }
 
-watch(() => props.isLogoVisible, updateState);
-watch(() => props.selectedLogo, updateState);
+  if (logoDraftAsset?.isByo) {
+    data.currentLogoIsByo = true;
+  }
+};
 
 const logoSettingStore = useUiLogoSettingsStore();
 
@@ -332,14 +320,9 @@ const onEditableLogoVariationSelected = (selectedLogoVariation: {
 };
 
 const onOptionSelected = (selected: ButtonGroupOption) => {
-  const next = parseInt(selected.value);
+  data.selectedOption = parseInt(selected.value);
 
-  // Capture the user's choice between Logo (1) and Upload (2) so the
-  // highlight stays put while they interact with the visible options.
-  // `null` for None — the visibility flip handles that.
-  data.manualVisibleChoice = next === 1 || next === 2 ? next : null;
-
-  emit('on-logo-visible-changed', next !== 0);
+  emit('on-logo-visible-changed', data.selectedOption !== 0);
 };
 
 const handleLogoVisibleToggle = () => {
@@ -380,6 +363,8 @@ const onLogoUpload = (response: CreateWebsiteByoUploadResult) => {
   if (response.logoDesignAttributes) {
     logoSettingStore.applyLogoDesignAttributes(response.logoDesignAttributes);
   }
+
+  data.currentLogoIsByo = true;
 };
 
 const onEditLogoButtonClicked = () => {

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

@@ -3,7 +3,6 @@
     <RichTextEditor
       v-if="showRichTextEditor"
       :id="`${id}-${name}`"
-      ref="richTextEditorRef"
       v-model="text"
       :attrs="attrs"
       :label="label"

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

@@ -565,15 +565,10 @@ const onImageLinkToggleChange = (enabled: boolean, index: number): void => {
   emitChange();
 };
 
-// Flips true while we're rebuilding `options` from `props.value`. Suppresses
-// the deep options-watch's debounced emit so a sync from the store doesn't
-// echo back to the store. Reset by the deep watcher on the next tick.
-let isSyncingFromProps = false;
-
-const applyValueWithDefaults = (
-  v: TextMediaItem[],
-): (TextMediaItem | TextShapeItem)[] => {
-  return cloneDeep(v).map((o) => ({
+onMounted(() => {
+  options.value = cloneDeep(props.value);
+  mediaType.value = props.settings.replaceImageSettings.mediaType;
+  options.value = options.value.map((o) => ({
     ...o,
     mediaType: mediaType.value,
     imageLink: o.imageLink !== undefined ? o.imageLink : false,
@@ -583,39 +578,15 @@ const applyValueWithDefaults = (
     email: o.email || '',
     tel: o.tel || '',
   })) as (TextMediaItem | TextShapeItem)[];
-};
-
-onMounted(() => {
-  mediaType.value = props.settings.replaceImageSettings.mediaType;
-  isSyncingFromProps = true;
-  options.value = applyValueWithDefaults(props.value);
 
   if (!changeDebounce.value) {
     changeDebounce.value = debounce(emitChange, DEBOUNCE_IN_MS);
   }
 });
 
-// Re-sync the local `options` mirror when the store-bound value changes
-// externally (e.g. undo/redo via history-store). Without this the sidebar
-// keeps showing the pre-undo state while the canvas reflects the reverted
-// store.
-watch(
-  () => props.value,
-  (newVal) => {
-    isSyncingFromProps = true;
-    options.value = applyValueWithDefaults(newVal);
-  },
-);
-
 watch(
   options,
   () => {
-    if (isSyncingFromProps) {
-      isSyncingFromProps = false;
-
-      return;
-    }
-
     if (changeDebounce.value) {
       changeDebounce.value();
     }

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

@@ -83,17 +83,6 @@ export default defineComponent({
       return 'tw-font-bold tw-text-xs';
     },
   },
-  watch: {
-    // Keeps the design/upload tab in sync with `enableEditMode` whenever it
-    // flips outside the user's tab clicks — undo/redo restoring a BYO upload
-    // (mode → false) or a designed logo (mode → true). User clicks within
-    // the same mode don't change `enableEditMode` and don't trigger this.
-    showEditLogoSetting(enabled: boolean) {
-      this.selectedTab = enabled
-        ? this.tabsWithTranslations[0]
-        : this.tabsWithTranslations[1];
-    },
-  },
   methods: {
     disableTextToggle(currentTextEnabled) {
       if (!this.isTextOnlyLogo || !currentTextEnabled) {

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

@@ -116,17 +116,11 @@ export interface EditableLogoState {
   logoTemplateMetadata: string;
   isLogoDraftSaved: boolean;
   isTextOnlyLogo: boolean;
-  // Per-draft-token snapshot of `editableLogoVariations`. Repopulated each
-  // time `updateEditableLogoImageUrlAsync` finishes rendering for the active
-  // draft. Undo/redo reads from this map to restore the variations grid for
-  // the snapshot's `logoDraftToken` instead of re-rendering through fabric-
-  // render or stuffing 4 base64 PNGs into every history entry.
-  variationsByDraftToken: Record<string, EditableLogoVariation[]>;
 }
 
 export type SetStateAsyncPayload = Omit<
   EditableLogoState,
-  'enableEditMode' | 'editableLogoVariations' | 'variationsByDraftToken'
+  'enableEditMode' | 'editableLogoVariations'
 >;
 
 export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
@@ -198,7 +192,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     },
     makerFonts: [],
     isLogoDraftSaved: false,
-    variationsByDraftToken: {},
   }),
   actions: {
     async setStateAsync(payload: {
@@ -449,32 +442,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 }));
-      }
-    },
-
-    /**
-     * Restore the variations grid for `logoDraftToken` from the per-token
-     * cache. Called by `_syncLogoSettingsFromSnapshot` during undo/redo.
-     * Returns true on cache hit.
-     */
-    restoreVariationsForDraftToken(logoDraftToken: string): boolean {
-      const cached = this.variationsByDraftToken[logoDraftToken];
-
-      if (!cached) return false;
-
-      this.editableLogoVariations = cached.map((v) => ({ ...v }));
-
-      return true;
     },
 
     async updateMetadataAsync(
@@ -539,14 +506,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       if (logoDraft) {
         logoDraft.metadata = metadata;
-
-        // Refresh the template-asset stamp in case the active asset has
-        // changed since this draft was first registered (e.g. successive
-        // BYO uploads that share an existing draft token would otherwise
-        // keep pointing at an older template).
-        if (logoStore.logoTemplateAsset) {
-          logoDraft.templateAsset = { ...logoStore.logoTemplateAsset };
-        }
       } else {
         logoStore.addLogoDraftAsset({
           logoDraftAsset: {
@@ -554,9 +513,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             metadata,
             tick: Date.now(),
             isByo: logoStore.logoTemplateAsset?.isByo || false,
-            templateAsset: logoStore.logoTemplateAsset
-              ? { ...logoStore.logoTemplateAsset }
-              : undefined,
           },
         });
       }

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

@@ -1,16 +0,0 @@
-import { type ComputedRef } from 'vue';
-/**
- * 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 declare function useUndoRedoFlag(): ComputedRef<boolean>;

package/lib/src/brand-page-maker/composables/useUndoRedoFlag.js

@@ -1,22 +0,0 @@
-import { computed } from 'vue';
-import { useBrandPageMakerUserStore } from '@brand-page-maker/stores/user';
-import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
-/**
- * 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() {
-    const userStore = useBrandPageMakerUserStore();
-    const brandPageMakerStore = useBrandPageMakerStore();
-    return computed(() => userStore.features.canUseUndoRedo && brandPageMakerStore.isBrandSite);
-}

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

@@ -1,104 +0,0 @@
-/**
- * A single history entry.
- *
- * `snapshot` is a **JSON-stringified** `BrandPageModel`, not a plain object.
- * Stringifying up-front has two benefits:
- *   1. Pinia's reactive proxy treats the string as a primitive — no traversal,
- *      no per-field getters/setters on our entries, no accidental shared refs
- *      with the live store.
- *   2. `sizeBytes === snapshot.length` is automatic and accurate for the V2
- *      memory-budget instrumentation.
- *
- * Sidecar state that doesn't live on `brandPageData` (the variations grid in
- * the Logo sidebar, the active `logoTemplateAsset`, the active
- * `logoDraftToken`) is restored on undo by `_syncLogoSettingsFromSnapshot`
- * via per-draft-token caches on the logo / editable-logo stores — keyed off
- * `logoImage.logoDraftToken` which IS in the snapshot.
- */
-export interface HistoryEntry {
-    /** JSON.stringify(BrandPageModel) at the moment of capture. */
-    snapshot: string;
-    /** ISO-8601 timestamp of when the entry was captured. */
-    timestamp: string;
-    /** What kind of change produced this entry. */
-    source: 'manual_edit' | 'template_switch' | 'ai_changeset' | 'rich_text';
-    /** Who authored the change. */
-    actor: 'user' | 'ai_builder';
-    /** Optional human-readable short description. Reserved for V2 UI / debugging. */
-    label?: string;
-    /** Serialized size in bytes (= snapshot.length in JS string semantics). */
-    sizeBytes: number;
-    /**
-     * The page the user was viewing when this entry was captured. Sidecar to the
-     * `BrandPageModel` snapshot — page-tab "selected" styling and the sidebar's
-     * `currentPage` getter both key off this id (via the route URL → routeStore →
-     * `pageNavigation.activePageId`). Snapshots only contain the document model,
-     * so without this we can't restore the URL/active-page on undo and the
-     * carousel highlight bleeds through to the page that no longer exists.
-     *
-     * Empty string when no page is active yet (e.g. earliest baseline before
-     * first router push). Always a real id once the editor has settled.
-     */
-    activePageId: string;
-}
-export declare const useHistoryStore: import("pinia").StoreDefinition<"history", Pick<{
-    entries: import("vue").ShallowRef<HistoryEntry[], HistoryEntry[]>;
-    currentIndex: import("vue").Ref<number, number>;
-    isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-    baselineCaptured: import("vue").Ref<boolean, boolean>;
-    canUndo: import("vue").ComputedRef<boolean>;
-    canRedo: import("vue").ComputedRef<boolean>;
-    captureBaseline: () => void;
-    capture: (args: {
-        source: HistoryEntry['source'];
-        actor: HistoryEntry['actor'];
-        label?: string;
-    }) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureTemplateSwitch: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureAiChangeset: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    undo: () => Promise<void>;
-    redo: () => Promise<void>;
-    reset: () => void;
-    getCurrentSizeBytes: () => number;
-    getCurrentEntryCount: () => number;
-}, "entries" | "currentIndex" | "isApplyingSnapshot" | "baselineCaptured">, Pick<{
-    entries: import("vue").ShallowRef<HistoryEntry[], HistoryEntry[]>;
-    currentIndex: import("vue").Ref<number, number>;
-    isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-    baselineCaptured: import("vue").Ref<boolean, boolean>;
-    canUndo: import("vue").ComputedRef<boolean>;
-    canRedo: import("vue").ComputedRef<boolean>;
-    captureBaseline: () => void;
-    capture: (args: {
-        source: HistoryEntry['source'];
-        actor: HistoryEntry['actor'];
-        label?: string;
-    }) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureTemplateSwitch: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureAiChangeset: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    undo: () => Promise<void>;
-    redo: () => Promise<void>;
-    reset: () => void;
-    getCurrentSizeBytes: () => number;
-    getCurrentEntryCount: () => number;
-}, "canUndo" | "canRedo">, Pick<{
-    entries: import("vue").ShallowRef<HistoryEntry[], HistoryEntry[]>;
-    currentIndex: import("vue").Ref<number, number>;
-    isApplyingSnapshot: import("vue").Ref<boolean, boolean>;
-    baselineCaptured: import("vue").Ref<boolean, boolean>;
-    canUndo: import("vue").ComputedRef<boolean>;
-    canRedo: import("vue").ComputedRef<boolean>;
-    captureBaseline: () => void;
-    capture: (args: {
-        source: HistoryEntry['source'];
-        actor: HistoryEntry['actor'];
-        label?: string;
-    }) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureTemplateSwitch: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    captureAiChangeset: (label?: string) => 'committed' | 'oversized' | 'noop' | 'skipped';
-    undo: () => Promise<void>;
-    redo: () => Promise<void>;
-    reset: () => void;
-    getCurrentSizeBytes: () => number;
-    getCurrentEntryCount: () => number;
-}, "reset" | "undo" | "redo" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;