@designcrowd/library.brand-page 5.18.1-undo-33 → 5.18.1

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -74,7 +74,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         },
         makerFonts: [],
         isLogoDraftSaved: false,
-        variationsByDraftToken: {},
     }),
     actions: {
         async setStateAsync(payload) {
@@ -218,17 +217,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation, layout) {
             const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             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) {
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
                 [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
@@ -255,15 +243,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) {
-            const cached = this.variationsByDraftToken[logoDraftToken];
-            if (!cached)
-                return false;
-            this.editableLogoVariations = cached.map((v) => ({ ...v }));
-            return true;
-        },
         async updateMetadataAsync(defaultPrimaryText, resetLogoTemplateMetadata = false, layout) {
             const result = await this.postEditableLogoRequestAsync({
                 returnJson: true,
@@ -306,13 +285,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const logoDraft = logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
             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({
@@ -321,9 +293,6 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                         metadata,
                         tick: Date.now(),
                         isByo: logoStore.logoTemplateAsset?.isByo || false,
-                        templateAsset: logoStore.logoTemplateAsset
-                            ? { ...logoStore.logoTemplateAsset }
-                            : undefined,
                     },
                 });
             }

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3124,7 +3124,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         canUseGettyVideos: boolean;
         canUseGoogleAdsense: boolean;
         googleAdsenseEnabled: boolean;
-        canUseUndoRedo: boolean;
     }>;
     isAdmin: import("vue").ComputedRef<boolean>;
     isBrandSite: import("vue").ComputedRef<boolean>;
@@ -3836,21 +3835,16 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): Promise<void>;
+        onChangeTemplateConfirmModalConfirm(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
-        _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
-        _navigateToActivePage(activePageId?: string | undefined): void;
-        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -4793,22 +4787,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
-        sendUndoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendRedoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendHistoryCappedEvent: (props: {
-            entries_count: number;
-            size_bytes: number;
-        }) => void;
-        sendHistoryOversizedEvent: (props: {
-            attempted_bytes: number;
-            source: string;
-        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4269,7 +4269,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoTemplateMetadata: string;
             isLogoDraftSaved: boolean;
             isTextOnlyLogo: boolean;
-            variationsByDraftToken: Record<string, import("@shared/logo-settings/store").EditableLogoVariation[]>;
         } & import("pinia").PiniaCustomStateProperties<import("@shared/logo-settings/store").EditableLogoState>) => () => string | undefined;
     }, {
         setStateAsync(payload: {
@@ -4287,8 +4286,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
         updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
-        stampLogoBase64IntoBrandPageData(overrideLogoVariation?: number | undefined): void;
-        restoreVariationsForDraftToken(logoDraftToken: string): boolean;
         updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
         updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
@@ -4396,21 +4393,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): Promise<void>;
+        onChangeTemplateConfirmModalConfirm(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
-        _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
-        _navigateToActivePage(activePageId?: string | undefined): void;
-        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -173,21 +173,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): Promise<void>;
+        onChangeTemplateConfirmModalConfirm(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page/models").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
-        _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
-        _navigateToActivePage(activePageId?: string | undefined): void;
-        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page/models").BrandPageModel): void;
         export(): import("@brand-page/models").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -484,22 +479,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
-        sendUndoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendRedoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendHistoryCappedEvent: (props: {
-            entries_count: number;
-            size_bytes: number;
-        }) => void;
-        sendHistoryOversizedEvent: (props: {
-            attempted_bytes: number;
-            source: string;
-        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,22 +17,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
-        sendUndoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendRedoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendHistoryCappedEvent: (props: {
-            entries_count: number;
-            size_bytes: number;
-        }) => void;
-        sendHistoryOversizedEvent: (props: {
-            attempted_bytes: number;
-            source: string;
-        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -565,21 +565,16 @@ declare const _default: import("vue").DefineComponent<{}, {
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
         onChangeTemplateConfirmModalCancel(): void;
-        onChangeTemplateConfirmModalConfirm(): Promise<void>;
+        onChangeTemplateConfirmModalConfirm(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
-        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
+        onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): void;
         setSelectedTabName(payload: any): void;
         showNextNotificationMessage(): Promise<void>;
         updateContent<TContent extends import("@brand-page").Content, P extends {
             id: string;
             content: TContent;
         }>(payload: P): Promise<void>;
-        _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
-        _navigateToActivePage(activePageId?: string | undefined): void;
-        _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page").BrandPageModel): void;
         export(): import("@brand-page").BrandPageModel;
         setBrandPageType({ brandPageType }: {
             brandPageType: "default" | "brandSite" | "brandContact";
@@ -920,22 +915,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
-        sendUndoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendRedoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendHistoryCappedEvent: (props: {
-            entries_count: number;
-            size_bytes: number;
-        }) => void;
-        sendHistoryOversizedEvent: (props: {
-            attempted_bytes: number;
-            source: string;
-        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -565,22 +565,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
-        sendUndoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendRedoEvent: (props: {
-            entries_count: number;
-            actor: string | undefined;
-        }) => void;
-        sendHistoryCappedEvent: (props: {
-            entries_count: number;
-            size_bytes: number;
-        }) => void;
-        sendHistoryOversizedEvent: (props: {
-            attempted_bytes: number;
-            source: string;
-        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.1-undo-33",
+  "version": "5.18.1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -35,8 +35,6 @@ import {
   useSnapshotStore,
   useVideoStore,
 } from '@brand-page-maker/stores';
-import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
-import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -285,15 +283,6 @@ export default defineComponent({
     // Mark brand page as fully loaded
     this.brandPageMakerStore.setIsBrandPageLoaded(true);
 
-    // Capture baseline for undo/redo when the feature is active for this
-    // session. `useUndoRedoFlag` requires both the LaunchDarkly feature
-    // (`userStore.features.canUseUndoRedo`) AND the maker being a brand-site
-    // — V1 scope is brand-site only; brand-page and brand-contact don't get
-    // undo/redo. See useUndoRedoFlag.ts for the rationale.
-    if (useUndoRedoFlag().value) {
-      useHistoryStore().captureBaseline();
-    }
-
     this.$emit(EVENTS.Initialised);
   },
   mounted() {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -23,6 +23,7 @@
     >
       <div class="tw-flex tw-flex-col tw-w-full tw-h-full">
         <QuickLinkBar
+          v-if="isPublished && !isAdmin"
           class="c-quick-link-bar"
           :brand-page-base-url="brandPageBaseUrl"
           :slug="brandPageSlug"
@@ -86,8 +87,8 @@
             v-if="isBrandPageLoaded"
             :is-mobile-device="isMobileDevice"
             :is-design-com="isDesignCom"
-            :container="previewContainer"
             :has-quick-links="isPublished"
+            :container="previewContainer"
           >
             <div ref="previewContent" class="tw-h-full">
               <PreviewWithState :device-mode="deviceMode" />
@@ -122,9 +123,9 @@
       </div>
 
       <SideBar
+        :has-quick-links="isPublished"
         :mobile-tab-name="SideBarTabNames.PREVIEW"
         :is-mobile-screen-size="isMobileScreenSize"
-        :has-quick-links="isPublished"
       >
         <template #tab>
           <component

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -90,7 +90,6 @@ export const userFeatures: UserFeatures = {
   canUseGettyVideos: false,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: false,
-  canUseUndoRedo: false,
 };
 
 export const BRAND_PAGE: BrandPageData = {

package/src/brand-page-maker/components/cookie-collection/CookieSettings.vue

@@ -20,14 +20,14 @@
           </div>
           <Toggle
             id="show-cookie-banner"
-            :model-value="isToggled"
+            :model-value="data.isToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowCookieBanner()"
           />
         </div>
       </div>
-      <div v-if="isToggled" class="tw-flex-none tw-mt-4">
+      <div v-if="data.isToggled" class="tw-flex-none tw-mt-4">
         <div
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
           @click="onShowPreviewCookieBanner"
@@ -41,7 +41,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="isPreviewToggled"
+            :model-value="data.isPreviewToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowPreviewCookieBanner()"
@@ -55,10 +55,10 @@
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import { cookieSettingTr } from '@src/composables/useTranslate';
 import type { CookieOptions } from '@brand-page/models';
-import { computed, type PropType } from 'vue';
+import { reactive, type PropType } from 'vue';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 
-defineProps({
+const props = defineProps({
   viewModel: {
     type: Object as PropType<CookieOptions>,
     required: true,
@@ -67,26 +67,25 @@ defineProps({
 
 const brandPageMakerStore = useBrandPageMakerStore();
 
-// Read directly from the store so undo/redo (and any other external
-// mutation of cookieOptions) is reflected in the toggles.
-const isToggled = computed(
-  () => brandPageMakerStore.cookieOptions.isCookieEnabled,
-);
-const isPreviewToggled = computed(
-  () => brandPageMakerStore.cookieOptions.isCookiePreviewEnabled,
-);
+const data = reactive({
+  isToggled: props.viewModel.isCookieEnabled,
+  isPreviewToggled: props.viewModel.isCookiePreviewEnabled,
+});
 
 const onShowCookieBanner = () => {
-  const next = !isToggled.value;
-
-  brandPageMakerStore.setCookieEnabled({ isCookieEnabled: next });
+  data.isToggled = !data.isToggled;
+  brandPageMakerStore.setCookieEnabled({
+    isCookieEnabled: data.isToggled,
+  });
+  data.isPreviewToggled = data.isToggled;
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: next,
+    isCookiePreviewEnabled: data.isPreviewToggled,
   });
 };
 const onShowPreviewCookieBanner = () => {
+  data.isPreviewToggled = !data.isPreviewToggled;
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: !isPreviewToggled.value,
+    isCookiePreviewEnabled: data.isPreviewToggled,
   });
 };
 </script>

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.ts

@@ -4,7 +4,6 @@ import {
   useBrandPageContainerStore,
   useEventManagerStore,
 } from '@brand-page-maker/stores';
-import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
@@ -22,7 +21,6 @@ export default defineComponent({
     return {
       brandPageContainerStore: useBrandPageContainerStore(),
       eventManagerStore: useEventManagerStore(),
-      undoRedoEnabled: useUndoRedoFlag(),
     };
   },
   data() {
@@ -31,17 +29,6 @@ export default defineComponent({
     };
   },
   computed: {
-    isPublished(): boolean {
-      return this.brandPageContainerStore.isPublished;
-    },
-
-    // Only render the bar when at least one inner cluster has something to
-    // show. Otherwise we'd render an empty white strip — e.g. on an
-    // unpublished page with the undo flag off.
-    shouldShowBar(): boolean {
-      return Boolean(this.undoRedoEnabled) || this.isPublished;
-    },
-
     brandPageUrl(): string {
       if (
         this.brandPageContainerStore.isCustomDomainEnabled &&

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.vue

@@ -1,24 +1,10 @@
 <template>
   <div
-    v-if="shouldShowBar"
     data-component="quick-link-bar"
     class="c-quick-links tw-w-full tw-flex-none tw-bg-white md:tw-h-12 tw-border-b tw-border-grayscale-500 tw-px-2 lg:tw-px-4 tw-box-border tw-flex tw-items-center tw-text-grayscale-800 tw-fixed lg:tw-static"
   >
-    <!-- Left slot: Undo/Redo buttons. Always rendered for layout balance
-         (flex-1 reserves equal space on left and right) so the center
-         cluster stays geometrically centered in the bar regardless of
-         whether the buttons are visible. -->
-    <div class="tw-flex tw-flex-1 tw-justify-start tw-gap-1">
-      <template v-if="undoRedoEnabled">
-        <UndoButton />
-        <RedoButton />
-      </template>
-    </div>
-
-    <!-- Center cluster: URL label, link, copy button -->
-    <div
-      v-if="isPublished"
-      class="tw-flex tw-items-center tw-gap-2 tw-justify-center"
+    <p
+      class="tw-flex tw-items-center tw-justify-between lg:tw-justify-center tw-w-full"
     >
       <strong class="tw-font-semibold tw-hidden xl:tw-inline-block">
         {{ quickLinkBarTr('myWebPageLabel') }}
@@ -41,12 +27,7 @@
         }"
         @on-click.stop="onCopyClick"
       />
-    </div>
-
-    <!-- Right spacer: balances the left slot so the center cluster is
-         geometrically centered. -->
-    <div class="tw-flex-1" />
-
+    </p>
     <textarea ref="textarea" :value="brandPageUrl" class="tw-sr-only" />
   </div>
 </template>
@@ -54,14 +35,10 @@
 import QuickLinkBarMixin from './QuickLinkBar.mixin.ts';
 import { Button } from '@designcrowd/fe-shared-lib';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
-import UndoButton from './UndoButton.vue';
-import RedoButton from './RedoButton.vue';
 
 export default {
   components: {
     Button,
-    UndoButton,
-    RedoButton,
   },
   mixins: [QuickLinkBarMixin],
   setup(props, context) {

package/src/brand-page-maker/components/quick-link-bar/i18n/quick-link-bar.json

@@ -2,8 +2,6 @@
   "quickLinkBar": {
     "myWebPageLabel": "My web page:",
     "copyButton": "Copy",
-    "copiedButton": "Copied!",
-    "undoLabel": "Undo",
-    "redoLabel": "Redo"
+    "copiedButton": "Copied!"
   }
 }

package/src/brand-page-maker/components/save-contact/SaveContact.vue

@@ -19,7 +19,7 @@
           </div>
           <Toggle
             id="save-contact-enabled"
-            :model-value="isSavingEnabled"
+            :model-value="data.isToggled"
             color="primary"
             @update:model-value="onSavingEnabled()"
           />
@@ -27,7 +27,7 @@
       </div>
       <div class="tw-flex-none tw-mt-4">
         <div
-          v-if="!isAdmin && !isPrePurchase && isSavingEnabled"
+          v-if="!isAdmin && !isPrePurchase && data.isToggled"
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer tw-gap-1"
           @click="onHideBranding"
         >
@@ -62,7 +62,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="hideBranding"
+            :model-value="data.hideBranding"
             color="primary"
             @update:model-value="onHideBranding()"
           />
@@ -78,7 +78,7 @@ import {
   useBrandPageContainerStore,
 } from '@brand-page-maker/stores';
 import { saveContactSettingsTr } from '@src/composables/useTranslate';
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import {
   EVENTS,
   useEventTracker,
@@ -107,6 +107,11 @@ const showBrandCrowdLogo = computed(
   () => brandPageMakerStore.showBrandCrowdLogo,
 );
 
+const data = reactive({
+  isToggled: isSavingEnabled.value,
+  hideBranding: hideBranding.value,
+});
+
 const siteName = computed((): string => {
   return props.isDesignCom ? 'Design.com' : 'BrandCrowd';
 });
@@ -122,28 +127,30 @@ const hideBrandingTooltip = computed((): string => {
 });
 
 const onSavingEnabled = () => {
-  const next = !isSavingEnabled.value;
-
-  brandPageMakerStore.setSavingEnabled({ isSavingEnabled: next });
+  data.isToggled = !data.isToggled;
+  brandPageMakerStore.setSavingEnabled({
+    isSavingEnabled: data.isToggled,
+  });
   eventTracker.sendWebsiteEvent({
     eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_SAVE_CONTACT_TOGGLE,
     eventProps: {
       cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-      toggle_value: next ? 'enabled' : 'disabled',
+      toggle_value: data.isToggled ? 'enabled' : 'disabled',
     },
   });
 };
 
 const onHideBranding = async () => {
   if (!showBrandCrowdLogo.value) {
-    const next = !hideBranding.value;
-
-    brandPageMakerStore.setHideBranding({ hideBranding: next });
+    data.hideBranding = !data.hideBranding;
+    brandPageMakerStore.setHideBranding({
+      hideBranding: data.hideBranding,
+    });
     eventTracker.sendWebsiteEvent({
       eventName: EVENTS.WEBSITE_MAKER_DIGITAL_BUSINESS_CARDS_HIDE_POPUP,
       eventProps: {
         cta_location: UPGRADE_CTA_LOCATIONS.SAVE_CONTACT_SETTINGS,
-        toggle_value: next ? 'enabled' : 'disabled',
+        toggle_value: data.hideBranding ? 'enabled' : 'disabled',
       },
     });
   } else {