@designcrowd/library.brand-page 6.0.0-undo-redo-1 → 6.0.1-ast-bg-shape

package/lib/src/{CreatedOnBrandCrowd-de-de-Cbi1PSNS.js → CreatedOnBrandCrowd-de-de-Dxp4ebC_.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-B2ZTei1t.js → CreatedOnBrandCrowd-en-us-2m-52z9q.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-DGz8UfQQ.js → CreatedOnBrandCrowd-es-es-vyViBkgn.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C4rUBQUM.js → CreatedOnBrandCrowd-fr-ca-WKIdCeR9.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C4rUBQUM.js → CreatedOnBrandCrowd-fr-fr-WKIdCeR9.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Cw7sVI1F.js → CreatedOnBrandCrowd-pt-br-C5gZ1FOh.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-Cw7sVI1F.js → CreatedOnBrandCrowd-pt-pt-C5gZ1FOh.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-IDusUqYG.js";
+import { _ as t } from "./lib-Dfr7gLQv.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-DPSPgKj7.js → CreatedOnDcom-de-de-DvS2wMv_.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-IDusUqYG.js";
+import { _ as e } from "./lib-Dfr7gLQv.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-AXXhwSXg.js → CreatedOnDcom-en-us-C9LSUVh8.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-IDusUqYG.js";
+import { _ as e } from "./lib-Dfr7gLQv.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DY8bmxi_.js → CreatedOnDcom-es-es-DTrd5sLX.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-IDusUqYG.js";
+import { _ as e } from "./lib-Dfr7gLQv.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-D3QxYtYl.js → CreatedOnDcom-fr-ca-BRC4S6qm.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-IDusUqYG.js";
+import { _ as e } from "./lib-Dfr7gLQv.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-KIt7qTPd.js → CreatedOnDcom-fr-fr-B0vfWw2S.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-IDusUqYG.js";
+import { _ as e } from "./lib-Dfr7gLQv.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-Bv4bHhuR.js → CreatedOnDcom-pt-br-7SFPnAev.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-IDusUqYG.js";
+import { _ as M } from "./lib-Dfr7gLQv.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-NNO1huza.js → CreatedOnDcom-pt-pt-DYLzspou.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-IDusUqYG.js";
+import { _ as M } from "./lib-Dfr7gLQv.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/models/index.d.ts

@@ -26,11 +26,13 @@ export declare class BackgroundShape {
     constructor(option?: Partial<BackgroundShape>);
 }
 export type BackgroundStyle = Partial<Omit<BrandPageCssStyle, 'backgroundColor'>>;
+export type BackgroundShapeMode = 'single' | 'multiple';
 export declare class BackgroundStyles {
     style: BackgroundStyle;
     backgroundShapeStyle: BackgroundStyle;
     backgroundImageUrl: string;
     backgroundShapes: BackgroundShape[];
+    shapeMode?: BackgroundShapeMode;
     personalisationRole?: PersonalisationRole;
     media?: AbstractMedia;
     mediaOverlayStyle: BrandPageCssStyle;

package/lib/src/brand-page/models/index.js

@@ -46,6 +46,7 @@ export class BackgroundStyles {
     backgroundShapeStyle;
     backgroundImageUrl;
     backgroundShapes;
+    shapeMode;
     personalisationRole;
     media;
     mediaOverlayStyle;
@@ -53,6 +54,7 @@ export class BackgroundStyles {
         this.backgroundImageUrl = option.backgroundImageUrl || '';
         this.backgroundShapes = (option.backgroundShapes ||
             []);
+        this.shapeMode = option.shapeMode;
         this.style = option.style || {
             background: '',
         };

package/lib/src/brand-page/utils/logo.util.d.ts

@@ -30,20 +30,6 @@ export declare const calculateOptimizedLogoDimensions: (logoData: {
     width: string;
     height: string;
 };
-/**
- * Resolves the "current" logo image from a brand-page MODEL (the raw,
- * deserialized shape — not the live stores, whose contents are wrapped in
- * `settings.content`).
- *
- * Brand-site keeps its logo in the page header; brand-page and brand-contact
- * keep it as a logo CONTENT block on the home page — the same `isBrandSite ?
- * header : content` split the logo-settings store getters/setter use. This is
- * the single source of truth for model-level logo reads: initial load and
- * history-restore both call it so the two paths can't drift. They previously
- * hard-coded `=== brandPage`, which silently excluded brand-contact and read a
- * stale header logo on undo.
- */
-export declare const getLogoImageFromModel: (model: BrandPageModel) => LogoImageModel | undefined;
 export declare const recalculateLogoContentDimensions: (pageData: any, editableLogoVariations: {
     variationId: number;
     width: number;

package/lib/src/brand-page/utils/logo.util.js

@@ -225,25 +225,6 @@ export const calculateOptimizedLogoDimensions = (logoData, currentWidth, current
     }
     return { width: currentWidth, height: currentHeight };
 };
-/**
- * Resolves the "current" logo image from a brand-page MODEL (the raw,
- * deserialized shape — not the live stores, whose contents are wrapped in
- * `settings.content`).
- *
- * Brand-site keeps its logo in the page header; brand-page and brand-contact
- * keep it as a logo CONTENT block on the home page — the same `isBrandSite ?
- * header : content` split the logo-settings store getters/setter use. This is
- * the single source of truth for model-level logo reads: initial load and
- * history-restore both call it so the two paths can't drift. They previously
- * hard-coded `=== brandPage`, which silently excluded brand-contact and read a
- * stale header logo on undo.
- */
-export const getLogoImageFromModel = (model) => {
-    if (model.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-        return model.pageHeaderDesktop?.logoImage;
-    }
-    return model.pages?.[0]?.contents?.find(isLogoContent)?.logoImage;
-};
 export const recalculateLogoContentDimensions = async (pageData, editableLogoVariations, logoImage, isPrePurchase) => {
     try {
         let logoData;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -1,15 +1,14 @@
 import type { BackgroundStylesConfigOption } from '@brand-page-maker/models/background-styles-config';
 import type { UserMediaItem, UserMediaItemWithDimensions } from 'src/shared/my-uploads/models';
-interface BackgroundShapePosition {
-    name: string;
-    screenLeft: number;
-    screenTop: number;
-    originLeft: number;
-    originTop: number;
-    scalePercentage: number;
-    opacityPercentage: number;
-}
 declare const _default: import("vue").DefineComponent<{}, {
+    backgroundShapes: import("vue").ComputedRef<import("@shared/background-settings/composables/useBackgroundShapeControls").BackgroundShapePosition[]>;
+    onShapeScreenXChange: (index: number, value: number) => void;
+    onShapeScreenYChange: (index: number, value: number) => void;
+    onShapeOriginXChange: (index: number, value: number) => void;
+    onShapeOriginYChange: (index: number, value: number) => void;
+    onShapeSizeChange: (index: number, value: number | string) => void;
+    onShapeOpacityChange: (index: number, value: number | string) => void;
+    onDeleteShape: (index: number) => void;
     logoTheme: import("vue").ComputedRef<{
         logoTextColor: {
             rgb: string;
@@ -180,6 +179,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 wordBreak?: string | undefined;
             };
         }[];
+        shapeMode?: import("../../../brand-page").BackgroundShapeMode | undefined;
         personalisationRole?: import("../../../brand-page").PersonalisationRole | undefined;
         media?: {
             type: import("../../../brand-page").MediaTypes;
@@ -282,6 +282,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             backgroundStyle: import("../../../brand-page").BackgroundStyle;
         }): void;
         setBackgroundShapes(payload: import("../../../brand-page").BackgroundShape[]): void;
+        setShapeMode(payload: {
+            shapeMode: import("../../../brand-page").BackgroundShapeMode;
+        }): void;
         setBackgroundPersonalisationRole(payload: {
             personalisationRole: import("../../../brand-page").PersonalisationRole | undefined;
         }): void;
@@ -299,6 +302,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;
         }): void;
+        replaceBackgroundShape({ shapeIndex, shapeUrl, width, height, aspectRatio, }: {
+            shapeIndex: number;
+            shapeUrl: string;
+            width?: number;
+            height?: number;
+            aspectRatio?: number;
+        }): void;
         setLogoColors({ logoColors }: import("../../../shared/background-settings/background-settings-models").SetLogoColorsPayload): void;
         clearUserImageBackgroundImageUrl(): void;
         setAdminBackgroundOptionDefaultValues(): void;
@@ -332,18 +342,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         readonly backgroundShapeStyle: "backgroundShapeStyle";
     };
 }, {
-    backgroundShapes(): BackgroundShapePosition[];
     colorPickerValue(): (key: BackgroundStylesConfigOption) => string;
     backgroundShapeUrl(): string;
 }, {
-    onShapeSettingChange(index: number, updatedSettings: any): void;
-    onShapeScreenXChange(index: number, value: any): void;
-    onShapeScreenYChange(index: number, value: any): void;
-    onShapeOriginXChange(index: number, value: any): void;
-    onShapeOriginYChange(index: number, value: any): void;
-    onShapeSizeChange(index: number, value: any): void;
-    onShapeOpacityChange(index: number, value: any): void;
-    onDeleteShape(index: number): void;
     onColorMatchToggled(option: BackgroundStylesConfigOption, value: boolean): void;
     onColorPickerInput(option: BackgroundStylesConfigOption, value: string | Event): void;
     onBackgroundShapeSelected(shape: UserMediaItemWithDimensions): void;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.js

@@ -2,6 +2,7 @@ import { computed, defineComponent } from 'vue';
 import { BackgroundStylesConfigOptions } from '@brand-page-maker/models/background-styles-config';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
 import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
+import { useBackgroundShapeControls } from '@shared/background-settings/composables/useBackgroundShapeControls';
 import { assertUnreachable, isAnEvent } from '../../../helpers/ts.helper';
 import { isColorMatched } from '@brand-page-maker/utils';
 import { useUiStore } from '@brand-page-maker/stores';
@@ -14,6 +15,8 @@ export default defineComponent({
             backgroundStyles: computed(() => backgroundSettingsStore.backgroundStyles),
             uiStore,
             backgroundSettingsStore,
+            // Per-shape placement/size/opacity mapping + handlers (shared with the customer panel)
+            ...useBackgroundShapeControls(),
         };
     },
     data() {
@@ -27,24 +30,6 @@ export default defineComponent({
         };
     },
     computed: {
-        backgroundShapes() {
-            return (this.backgroundStyles.backgroundShapes?.map((shape) => {
-                const translate = shape.style.transform
-                    ?.match(/\((.*)\)/)
-                    ?.pop()
-                    ?.split(',');
-                return {
-                    name: shape.name,
-                    screenLeft: parseInt(shape.style.left?.replace('%', '') || '50'),
-                    screenTop: parseInt(shape.style.top?.replace('%', '') || '50'),
-                    originLeft: parseInt(translate ? translate[0] : '-50'),
-                    originTop: parseInt(translate ? translate[1] : '-50'),
-                    scalePercentage: Math.round(parseFloat(shape.style.transform.match(/(?:scale)\(([^)]+)\)/)?.pop() ||
-                        '1') * 100),
-                    opacityPercentage: Math.round(parseFloat(shape.style.opacity || '1') * 100),
-                };
-            }) || []);
-        },
         colorPickerValue() {
             return (key) => {
                 switch (key) {
@@ -83,42 +68,6 @@ export default defineComponent({
         });
     },
     methods: {
-        onShapeSettingChange(index, updatedSettings) {
-            const scale = (this.backgroundShapes[index]?.scalePercentage / 100 || 1).toFixed(2);
-            const opacity = (this.backgroundShapes[index]?.opacityPercentage / 100 || 1).toFixed(2);
-            this.backgroundSettingsStore.setBackgroundShapeSettings({
-                index,
-                ...this.backgroundShapes[index],
-                scale,
-                opacity,
-                ...updatedSettings,
-            });
-        },
-        onShapeScreenXChange(index, value) {
-            this.onShapeSettingChange(index, { screenLeft: value });
-        },
-        onShapeScreenYChange(index, value) {
-            this.onShapeSettingChange(index, { screenTop: value });
-        },
-        onShapeOriginXChange(index, value) {
-            this.onShapeSettingChange(index, { originLeft: value });
-        },
-        onShapeOriginYChange(index, value) {
-            this.onShapeSettingChange(index, { originTop: value });
-        },
-        onShapeSizeChange(index, value) {
-            this.onShapeSettingChange(index, {
-                scale: (parseFloat(value) / 100).toFixed(2),
-            });
-        },
-        onShapeOpacityChange(index, value) {
-            this.onShapeSettingChange(index, {
-                opacity: (parseFloat(value) / 100).toFixed(2),
-            });
-        },
-        onDeleteShape(index) {
-            this.backgroundSettingsStore.deleteBackgroundShape({ shapeIndex: index });
-        },
         onColorMatchToggled(option, value) {
             this.isColorMatch[option] = value;
             switch (option) {

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -196,7 +196,7 @@ export default defineComponent({
         this.brandPageMakerStore.setIsBrandPageLoaded(true);
         // Capture baseline for undo/redo when the feature is active for this
         // session — see useUndoRedoFlag.ts for the gate (LaunchDarkly flag +
-        // non-admin maker; all three brands).
+        // brand-site + non-admin maker).
         if (useUndoRedoFlag().value) {
             useHistoryStore().captureBaseline();
         }

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

@@ -1,15 +1,16 @@
 import { type ComputedRef } from 'vue';
 /**
- * Returns whether undo/redo is active for the current maker session. Both
- * conditions must hold:
+ * 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. The
- *      one flag governs all three brands (brand-site, brand-page,
- *      brand-contact) — there is no per-brand gating.
- *   2. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      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.
  */

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

@@ -1,20 +1,25 @@
 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. Both
- * conditions must hold:
+ * 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. The
- *      one flag governs all three brands (brand-site, brand-page,
- *      brand-contact) — there is no per-brand gating.
- *   2. The session is NOT in admin-maker mode (`userStore.isAdmin`). The
+ *      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();
-    return computed(() => userStore.features.canUseUndoRedo && !userStore.isAdmin);
+    const brandPageMakerStore = useBrandPageMakerStore();
+    return computed(() => userStore.features.canUseUndoRedo &&
+        brandPageMakerStore.isBrandSite &&
+        !userStore.isAdmin);
 }

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

@@ -148,6 +148,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;
@@ -5257,6 +5258,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;
@@ -10372,6 +10374,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;
@@ -15481,6 +15484,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;
@@ -20596,6 +20600,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;
@@ -25705,6 +25710,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                             wordBreak?: string | undefined;
                         };
                     }[];
+                    shapeMode?: import("../../../brand-page/models").BackgroundShapeMode | undefined;
                     personalisationRole?: import("../../../brand-page/models").PersonalisationRole | undefined;
                     media?: {
                         type: import("../../../brand-page/models").MediaTypes;

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -622,7 +622,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     console.error('brandpage-maker-store: failed to restore logoEdits', error);
                 }
             }
-            const logoImage = logoUtil.getLogoImageFromModel(snapshot);
+            const logoImage = snapshot.brandPageType === BRAND_PAGE_TYPES.default
+                ? snapshot.pages?.[0]?.contents?.find((c) => c.type === 'logo')?.logoImage
+                : snapshot.pageHeaderDesktop?.logoImage;
             if (!logoImage)
                 return;
             logoSettingsStore.setState({
@@ -846,7 +848,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 this.setBrandPageType({
                     brandPageType: _brandPageType,
                 });
-                let logoImage = logoUtil.getLogoImageFromModel(brandPageModel);
+                let logoImage = brandPageModel.brandPageType === BRAND_PAGE_TYPES.default
+                    ? brandPageModel.pages?.[0].contents.find((c) => c.type === 'logo')?.logoImage
+                    : brandPageModel.pageHeaderDesktop?.logoImage;
                 if (!logoImage?.logoDraftToken) {
                     logoImage = logoUtil.safeGetLogoImageFromLogoImageUrl(logoVariationImageUrls[0]);
                 }