@designcrowd/library.brand-page 5.18.5 → 5.18.6

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
 import type { FormField } from '@brand-page';
 import { formFieldsTr } from '@src/composables/useTranslate';
@@ -49,34 +49,18 @@ export default defineComponent({
       },
     ];
 
-    const valueWithState = ref(
-      props.value.map((field) => ({
-        field,
-        isCollapsed: true,
-        isTypeDropdownOpen: false,
-      })),
-    );
-
-    // Re-sync when the store-bound value changes externally (e.g. undo/redo
-    // via history-store). Preserve per-row UI flags (isCollapsed,
-    // isTypeDropdownOpen) by index so an undo doesn't snap rows back to
-    // collapsed state.
-    watch(
-      () => props.value,
-      (newVal) => {
-        valueWithState.value = newVal.map((field, index) => ({
-          field,
-          isCollapsed: valueWithState.value[index]?.isCollapsed ?? true,
-          isTypeDropdownOpen:
-            valueWithState.value[index]?.isTypeDropdownOpen ?? false,
-        }));
-      },
-    );
-
     return {
       formFieldsTr,
       typeList,
-      valueWithState,
+      valueWithState: ref(
+        props.value.map((field) => {
+          return {
+            field: field,
+            isCollapsed: true,
+            isTypeDropdownOpen: false,
+          };
+        }),
+      ),
     };
   },
   methods: {

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/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';
@@ -51,7 +50,6 @@ const emit = defineEmits<{
 const pageNavigationStore = usePageNavigationStore();
 const pageSettingsStore = useUiPageSettingsStore();
 const userStore = useBrandPageMakerUserStore();
-const historyStore = useHistoryStore();
 
 const selectedPage = ref('');
 
@@ -111,8 +109,6 @@ onMounted(() => {
     if (routeByPageId) {
       selectedPage.value = routeByPageId.displayName;
     } else {
-      // Stale page-id clear at mount — fold into current head.
-      historyStore.mergeNextMutation();
       emit('update:modelValue', {
         id: props.id,
         name: props.name,

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'],
@@ -119,10 +116,6 @@ export default defineComponent({
         value,
       };
 
-      // 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

@@ -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,15 +116,11 @@ export interface EditableLogoState {
   logoTemplateMetadata: string;
   isLogoDraftSaved: boolean;
   isTextOnlyLogo: boolean;
-  // Per-draft-token snapshot of editableLogoVariations; repopulated on
-  // every render. Used by undo/redo to restore the BYO variations grid
-  // without re-rendering.
-  variationsByDraftToken: Record<string, EditableLogoVariation[]>;
 }
 
 export type SetStateAsyncPayload = Omit<
   EditableLogoState,
-  'enableEditMode' | 'editableLogoVariations' | 'variationsByDraftToken'
+  'enableEditMode' | 'editableLogoVariations'
 >;
 
 export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
@@ -196,7 +192,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
     },
     makerFonts: [],
     isLogoDraftSaved: false,
-    variationsByDraftToken: {},
   }),
   actions: {
     async setStateAsync(payload: {
@@ -411,19 +406,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       await Promise.all(tasks);
 
-      this.stampLogoBase64IntoBrandPageData(overrideLogoVariation);
-
-      // Cache per draft token so BYO undo can restore without re-rendering.
-      if (this.logoDraftToken) {
-        this.variationsByDraftToken[this.logoDraftToken] =
-          this.editableLogoVariations.map((v) => ({ ...v }));
-      }
-    },
-
-    // Stamp editableLogoVariations[*].base64 across header/footer + every
-    // LogoContent. Called by the live edit path post-render, and by
-    // undo/redo to repopulate the stripped logoImageBase64Url fields.
-    stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number): void {
       const pageSettingStore = useUiPageSettingsStore();
 
       [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
@@ -462,18 +444,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
       });
     },
 
-    // Restore variations grid for a draft token from the per-token cache.
-    // 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(
       defaultPrimaryText?: string,
       resetLogoTemplateMetadata = false,
@@ -536,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: {
@@ -551,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,17 +0,0 @@
-import { type ComputedRef } from 'vue';
-/**
- * Returns whether undo/redo is active for the current maker session. All
- * three 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.
- *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
- *      admin maker uses the same components but a different editing flow
- *      (template authoring) where undo/redo is out of scope.
- */
-export declare function useUndoRedoFlag(): ComputedRef<boolean>;

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

@@ -1,25 +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. All
- * three 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.
- *   3. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
- *      admin maker uses the same components but a different editing flow
- *      (template authoring) where undo/redo is out of scope.
- */
-export function useUndoRedoFlag() {
-    const userStore = useBrandPageMakerUserStore();
-    const brandPageMakerStore = useBrandPageMakerStore();
-    return computed(() => userStore.features.canUseUndoRedo &&
-        brandPageMakerStore.isBrandSite &&
-        !userStore.isAdmin);
-}

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

@@ -1,83 +0,0 @@
-/**
- * A single history entry. `snapshot` is JSON-stringified up-front so Pinia
- * treats it as opaque (no per-field reactivity) and `sizeBytes` is exact.
- * Sidecar state not in `brandPageData` rides along on this entry —
- * `activePageId` for page-tab restore, `logoEdits` for pre-purchase logo
- * form state.
- */
-export interface HistoryEntry {
-    snapshot: string;
-    timestamp: string;
-    source: 'manual_edit' | 'template_switch' | 'ai_changeset' | 'rich_text';
-    actor: 'user' | 'ai_builder';
-    label?: string;
-    sizeBytes: number;
-    /** Active page id at capture time. Empty before first router push. */
-    activePageId: string;
-    /** JSON-stringified `editableLogoStore.logoEdits`. Undefined if logo tab never opened. */
-    logoEdits?: 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';
-    mergeNextMutation: () => void;
-    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';
-    mergeNextMutation: () => void;
-    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';
-    mergeNextMutation: () => void;
-    undo: () => Promise<void>;
-    redo: () => Promise<void>;
-    reset: () => void;
-    getCurrentSizeBytes: () => number;
-    getCurrentEntryCount: () => number;
-}, "reset" | "undo" | "redo" | "captureBaseline" | "capture" | "captureTemplateSwitch" | "captureAiChangeset" | "mergeNextMutation" | "getCurrentSizeBytes" | "getCurrentEntryCount">>;