@designcrowd/library.brand-page 5.18.4 → 5.18.5

package/src/bundles/bundled-translations.fr-CA.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
-    "copiedButton": "Copié !"
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permettez aux visiteurs d'enregistrer vos coordonnées lorsqu'ils consultent votre carte professionnelle numérique",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Ma page Web :",
     "copyButton": "Copier",
-    "copiedButton": "Copié !"
+    "copiedButton": "Copié !",
+    "undoLabel": "Annuler",
+    "redoLabel": "Rétablir"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permettez aux visiteurs d'enregistrer vos coordonnées lorsqu'ils consultent votre carte de visite numérique",

package/src/bundles/bundled-translations.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
-    "copiedButton": "Copied!"
+    "copiedButton": "Copied!",
+    "undoLabel": "Undo",
+    "redoLabel": "Redo"
   },
   "saveContactSettings": {
     "saveContentInfo": "Let visitors save your contact information when they view your Digital Business Card",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "Minha página web:",
     "copyButton": "Copiar",
-    "copiedButton": "Copiado!"
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permita que os visitantes salvem suas informações de contato quando visualizarem seu cartão de visita digital",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1126,7 +1126,9 @@
   "quickLinkBar": {
     "myWebPageLabel": "A minha página Web:",
     "copyButton": "Copiar",
-    "copiedButton": "Copiado!"
+    "copiedButton": "Copiado!",
+    "undoLabel": "Desfazer",
+    "redoLabel": "Refazer"
   },
   "saveContactSettings": {
     "saveContentInfo": "Permita que os visitantes guardem a sua informação de contacto quando visualizarem o seu cartão de visita digital",

package/src/constants/ui.ts

@@ -14,6 +14,7 @@ export interface UIUserFeatures {
   canUseGettyVideos: boolean;
   canUseGoogleAdsense: boolean;
   googleAdsenseEnabled: boolean;
+  canUseUndoRedo: boolean;
 }
 
 export const TEMPLATE_FIRST_PAGE_NO = 1;

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/color-field/ColorField.vue

@@ -269,12 +269,17 @@ const onColorMatchToggled = (value: boolean) => {
     } else {
       newColor.value = STYLE_THEME_KEYS.LogoTextColor;
     }
+  } else if (props.name === 'background') {
+    newColor.value = '';
+  } else if (props.disableTransparent) {
+    // Fields that disallow transparent (e.g. font colour) must not fall back to
+    // transparent when color match is turned off - resolve to the actual logo colour.
+    newColor.value =
+      color.value === STYLE_THEME_KEYS.LogoBackgroundColor
+        ? props.logoTheme.logoBackgroundColor.rgb
+        : props.logoTheme.logoTextColor.rgb;
   } else {
-    if (props.name === 'background') {
-      newColor.value = '';
-    } else {
-      newColor.value = 'transparent';
-    }
+    newColor.value = 'transparent';
   }
 
   changeColor();

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,8 @@ export default defineComponent({
   },
   mounted() {
     if (this.canUseRichTextEditor) {
+      // RTE rewrap on tab mount — fold into current head.
+      this.historyStore.mergeNextMutation();
       switchAllContentToRTE(
         this.pageSettingsStore,
         this.externalEditor,

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

@@ -32,6 +32,7 @@ export const Sample = (): any => {
     canUseGettyVideos: true,
     canUseGoogleAdsense: false,
     googleAdsenseEnabled: false,
+    canUseUndoRedo: false,
   };
 
   const pinia = setupStoryPinia();

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.mixin.ts

@@ -76,6 +76,12 @@ export default defineComponent({
     schema: 'https',
     textIcon: 'globe',
     textIcons: [] as string[],
+    // Display-only override for the focused URL input. While a row is
+    // focused we strip the schema visually but MUST NOT mutate modelValue —
+    // doing so would land in the store and trigger a spurious undo/redo
+    // history entry between focus and blur (BP-5506).
+    focusedIndex: null as number | null,
+    focusedDisplay: '',
   }),
   computed: {
     items: {
@@ -162,15 +168,26 @@ export default defineComponent({
     },
 
     onFocusOverride(index: number, itemValue: string): void {
-      const value = [...this.modelValue];
       const match = URL_RE.exec(itemValue);
 
       if (match) {
         this.schema = match[1];
-        value[index][this.valuePropName] = match[2];
+        this.focusedIndex = index;
+        this.focusedDisplay = match[2];
+      } else {
+        this.focusedIndex = index;
+        this.focusedDisplay = itemValue;
       }
     },
+    inputDisplayValue(index: number): string {
+      return this.focusedIndex === index
+        ? this.focusedDisplay
+        : this.itemValue(index);
+    },
     onBlurOverride(index: number, itemValue: string): void {
+      this.focusedIndex = null;
+      this.focusedDisplay = '';
+
       const value = [...this.modelValue];
 
       let isValid = true;

package/src/shared/content-settings/components/draggable-item-list/DraggableItemList.vue

@@ -70,7 +70,7 @@
                     hasError[index],
                 }"
                 :placeholder="placeholderPrefix"
-                :value="itemValue(index)"
+                :value="inputDisplayValue(index)"
                 :data-test-tag="'image-url-text-input'"
                 @focus="onFocusOverride(index, $event.target.value)"
                 @blur="onBlurOverride(index, $event.target.value)"

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import type { PropType } from 'vue';
 import type { FormField } from '@brand-page';
 import { formFieldsTr } from '@src/composables/useTranslate';
@@ -49,18 +49,34 @@ 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: ref(
-        props.value.map((field) => {
-          return {
-            field: field,
-            isCollapsed: true,
-            isTypeDropdownOpen: false,
-          };
-        }),
-      ),
+      valueWithState,
     };
   },
   methods: {

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

@@ -59,7 +59,7 @@
       </template>
     </ButtonGroup>
     <div
-      v-if="data.selectedOption === 1 && !containerStore.isPrePurchase"
+      v-if="selectedOption === 1 && !containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <div class="tw-flex tw-items-center">
@@ -90,7 +90,7 @@
       </div>
     </div>
     <div
-      v-if="data.selectedOption === 1 && containerStore.isPrePurchase"
+      v-if="selectedOption === 1 && containerStore.isPrePurchase"
       class="tw-mb-4"
     >
       <LogoVariations
@@ -99,7 +99,7 @@
         @logo-variation-selected="onEditableLogoVariationSelected"
       />
     </div>
-    <div v-if="data.selectedOption === 2" class="tw-mb-4">
+    <div v-if="selectedOption === 2" class="tw-mb-4">
       <UploadLogoModal>
         <template #main="mainProp">
           <LogoField
@@ -188,88 +188,100 @@ const logoTabs: Tab[] = reactive([
 ]);
 
 const data = reactive({
-  selectedOption: 1,
-  currentLogoIsByo: false,
+  // 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,
   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: data.selectedOption === 0,
+      isSelected: selectedOption.value === 0,
       iconName: `ban`,
       iconSize: 'sm',
     },
     {
       label: commonTr('logo'),
       value: '1',
-      isSelected: data.selectedOption === 1,
+      isSelected: selectedOption.value === 1,
       iconName: `bc-mast`,
       iconSize: 'sm',
     },
     {
       label: commonTr('upload'),
       value: '2',
-      isSelected: data.selectedOption === 2,
+      isSelected: selectedOption.value === 2,
       iconName: `upload-arrow`,
       iconSize: 'sm',
     },
   ];
 
-  if (data.currentLogoIsByo) {
+  if (currentLogoIsByo.value) {
     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 || '';
+};
 
-  if (!props.isLogoVisible) {
-    data.selectedOption = 0;
-  } else {
-    if (logoDraftAsset?.isByo) {
-      data.selectedOption = 2;
-    } else {
-      data.selectedOption = data.selectedOption || 1;
-    }
-  }
+onMounted(() => updateState());
 
-  if (logoDraftAsset?.isByo) {
-    data.currentLogoIsByo = true;
-  }
-};
+// 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();
+  },
+);
+
+watch(() => props.isLogoVisible, updateState);
+watch(() => props.selectedLogo, updateState);
 
 const logoSettingStore = useUiLogoSettingsStore();
 
@@ -320,9 +332,14 @@ const onEditableLogoVariationSelected = (selectedLogoVariation: {
 };
 
 const onOptionSelected = (selected: ButtonGroupOption) => {
-  data.selectedOption = parseInt(selected.value);
+  const next = parseInt(selected.value);
 
-  emit('on-logo-visible-changed', data.selectedOption !== 0);
+  // 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);
 };
 
 const handleLogoVisibleToggle = () => {
@@ -363,8 +380,6 @@ 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,6 +24,7 @@ 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';
@@ -50,6 +51,7 @@ const emit = defineEmits<{
 const pageNavigationStore = usePageNavigationStore();
 const pageSettingsStore = useUiPageSettingsStore();
 const userStore = useBrandPageMakerUserStore();
+const historyStore = useHistoryStore();
 
 const selectedPage = ref('');
 
@@ -109,6 +111,8 @@ 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,6 +15,7 @@ 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: {
@@ -41,6 +42,7 @@ export default defineComponent({
     const uiPageSettingsStore = useUiPageSettingsStore();
     const eventManagerStore = useEventManagerStore();
     const shopConfigStore = useShopConfigStore();
+    const historyStore = useHistoryStore();
 
     return {
       brandPageToken: computed(() => brandPageContainerStore.brandPageToken),
@@ -51,6 +53,7 @@ export default defineComponent({
       eventManagerStore,
       shopConfigStore,
       uiPageSettingsStore,
+      historyStore,
     };
   },
   emits: ['update:modelValue'],
@@ -116,6 +119,10 @@ 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,6 +3,7 @@
     <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,10 +565,15 @@ const onImageLinkToggleChange = (enabled: boolean, index: number): void => {
   emitChange();
 };
 
-onMounted(() => {
-  options.value = cloneDeep(props.value);
-  mediaType.value = props.settings.replaceImageSettings.mediaType;
-  options.value = options.value.map((o) => ({
+// 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) => ({
     ...o,
     mediaType: mediaType.value,
     imageLink: o.imageLink !== undefined ? o.imageLink : false,
@@ -578,15 +583,39 @@ onMounted(() => {
     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,6 +83,17 @@ 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) {