@designcrowd/library.brand-page 5.16.2 → 5.16.3-background-1

package/lib/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.d.ts

@@ -16,7 +16,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -48,6 +47,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -60,7 +60,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -92,6 +91,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -149,6 +149,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
         }[];
         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+        media?: {
+            type: import("../../../../brand-page").MediaTypes;
+        } | undefined;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("../../../../brand-page-maker/stores").UserState, {}, {
         setEmailAddress(payload: string): void;
@@ -158,6 +161,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     backgroundSettingsStore: import("pinia").Store<"uiBackgroundSettings", import("../../store").BackgroundSettingsState, {}, {
         onBackgroundChanged(): void;
@@ -194,6 +200,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
+        setBackgroundMedia(payload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
     }>;
 }, {}, {
     color(): string;

package/lib/src/shared/background-settings/store/background-settings-store.d.ts

@@ -2,6 +2,7 @@ import type { BackgroundShape, BackgroundStyle, BackgroundStyles, Personalisatio
 import { type BrandPageSettingsMode } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import type { SetBackgroundShapeSettingsPayload, SetLogoColorsPayload, SetRecommendedLogoColorsPayload } from '../background-settings-models';
 import type { BackgroundSetStatePayload, BackgroundSettingsTabId } from '../models';
+import type { MediaBaseSelectedPayload } from '../../my-uploads/models';
 export interface BackgroundSettingsState {
     backgroundStyles: BackgroundStyles;
     logoColors: string[];
@@ -45,4 +46,6 @@ export declare const useUiBackgroundSettingsStore: import("pinia").StoreDefiniti
     setBackgroundMode(payload: {
         backgroundMode: BrandPageSettingsMode;
     }): void;
+    setBackgroundMedia(payload: MediaBaseSelectedPayload): void;
+    removeBackgroundVideo(): void;
 }>;

package/lib/src/shared/background-settings/store/background-settings-store.js

@@ -1,8 +1,8 @@
-import { PageStyles } from '../../../brand-page';
+import { GettyVideoMedia, PageStyles } from '../../../brand-page';
 import { BRANDPAGE_SETTINGS_MODES, } from '../../../brand-page-maker/stores/brandpage-maker/brandpage-maker-store';
 import { backgroundSettingsTabId } from '../models';
 import { defineStore } from 'pinia';
-import { useUiStore } from '../../../brand-page-maker/stores';
+import { useUiStore, useVideoStore } from '../../../brand-page-maker/stores';
 export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings', {
     state: () => ({
         backgroundStyles: {
@@ -10,6 +10,7 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
             backgroundShapeStyle: {},
             backgroundShapes: [],
             backgroundImageUrl: '',
+            media: undefined,
         },
         logoColors: [],
         recommendedLogoColors: [],
@@ -130,5 +131,36 @@ export const useUiBackgroundSettingsStore = defineStore('uiBackgroundSettings',
         setBackgroundMode(payload) {
             this.backgroundMode = payload.backgroundMode;
         },
+        setBackgroundMedia(payload) {
+            console.log('Here in the background settings store', payload);
+            if (payload.type === 'getty-video') {
+                const gettyMedia = payload;
+                const videoStore = useVideoStore();
+                videoStore.setVideoUrlsWithToken(gettyMedia.token, gettyMedia.videoSrc, gettyMedia.imageSrc, gettyMedia.assetId);
+                this.backgroundStyles.media = new GettyVideoMedia({
+                    gettyToken: gettyMedia.token,
+                    gettyAssetId: gettyMedia.assetId,
+                    mimeType: gettyMedia.mimeType,
+                    settings: {
+                        autoPlay: gettyMedia.autoPlay,
+                    },
+                });
+                // Clear any existing background image/shape
+                this.backgroundStyles.backgroundImageUrl = '';
+                // Default background style for videos
+                this.setBackgroundStyle({
+                    backgroundStyle: {
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'center center',
+                        backgroundSize: 'cover',
+                    },
+                });
+                this.onBackgroundChanged();
+            }
+        },
+        removeBackgroundVideo() {
+            this.backgroundStyles.media = undefined;
+            this.onBackgroundChanged();
+        },
     },
 });

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -481,6 +481,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     pageSettingsStore: import("pinia").Store<"uiPageSettings", import("../../../page-settings/store").PageSettingsState, {
         pageIndex(): number;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -636,6 +636,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     uiStore: import("pinia").Store<"ui", import("../../../models").UIRootState, {
         endpoints: () => import("../../../models").Endpoints;
@@ -757,6 +760,29 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         collapseAllSections(): void;
         setPreviousSelectedDisplayStyle(viewport: string, displayStyle: string): void;
     }>;
+    uiLogoSettingsStore: import("pinia").Store<"uiLogoSettings", import("../../../logo-settings/store").LogoSettingsState, {
+        selectedLogoImageUrl(): {
+            logoImageUrl: string | undefined;
+            logoImageBase64Url: string | undefined;
+        };
+        selectedLogoTemplateImage(): import("../../../../brand-page").LogoTemplateImageModel | undefined;
+        logoVariationImageUrls(): Record<number, string>;
+    }, {
+        redirectToCreateNewDesignPage(): Promise<void>;
+        setState(payload: {
+            newState: import("../../../logo-settings/store").LogoSettingsState;
+        }): void;
+        addDefaultLogoContentToCurrentPage(): void;
+        setLogoImageToAllContentsAndSections({ logoImage, keepLogoVariation, }: {
+            logoImage: import("../../../../brand-page").LogoImageModel;
+            keepLogoVariation?: boolean | undefined;
+        }): void;
+        setSelectedLogoImage(selectedLogoImage: import("../../../../brand-page").LogoImageModel): void;
+        setSelectedLogoImageToAll(payload: import("../../../logo-settings/store").SetSelectedLogoImagePayload): void;
+        applyLogoDesignAttributes(logoDesignAttributes: import("../../../../clients/fabric-render-client").BrandPageLogoDesignAttributesModel): void;
+        setLogoVariation(payload: import("../../../logo-settings/store").SetLogoVariationPayload): void;
+        setLogoToAllContentsAndSectionsByCreateByoLogoDraftResult(result: import("../../../models").CreateByoLogoDraftResult): void;
+    }>;
 }, {
     isToggled: boolean;
 }, {

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js

@@ -8,6 +8,7 @@ import { SIDE_BAR_TAB_NAMES } from '../../../../brand-page-maker/constants';
 import { ITEM_FIELD_TYPES, } from '../../../../brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
+import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 const RTE_ALLOWED_SECTION_TYPES = [
     'banner-section',
     'text',
@@ -49,6 +50,7 @@ export default defineComponent({
         const uiStore = useUiStore();
         const sideBarStore = useUiSideBarStore();
         const pageSettingsStore = useUiPageSettingsStore();
+        const uiLogoSettingsStore = useUiLogoSettingsStore();
         return {
             getFieldSettings: computed(() => contentSettingsStore.getFieldSettings),
             getContent: computed(() => contentSettingsStore.getContent),
@@ -65,6 +67,7 @@ export default defineComponent({
             uiStore,
             sideBarStore,
             pageSettingsStore,
+            uiLogoSettingsStore,
         };
     },
     data: () => ({
@@ -193,11 +196,13 @@ export default defineComponent({
                 // for brand page, when first page logo content is changing we want to keep the header and footer logo synced even if they are not used becuase of designlink
                 const logoContentItem = this.contentSettingsStore.items.find((i) => i.type === 'logo');
                 if (logoContentItem) {
+                    const logoImage = JSON.parse(JSON.stringify(logoContentItem.settings.content.logoImage));
+                    this.uiLogoSettingsStore.setSelectedLogoImage(logoImage);
                     [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
                         [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewPort) => {
                             this.pageSettingsStore.setPageSettingsSectionLogoImage({
                                 sectionName: section,
-                                logoImage: JSON.parse(JSON.stringify(logoContentItem.settings.content.logoImage)),
+                                logoImage: logoImage,
                                 logoTemplateImage: undefined,
                                 logoImageBase64Url: logoContentItem.settings.content.logoImageBase64Url,
                                 viewport: viewPort,

package/lib/src/shared/content-settings/components/image-field/ImageField.mixin.js

@@ -109,7 +109,9 @@ export default defineComponent({
             });
         },
         onRemove() {
-            this.content.media = undefined;
+            if (this.content?.media) {
+                this.content.media = undefined;
+            }
             this.imgValue = '';
             this.imageUrl = '';
         },

package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.d.ts

@@ -105,6 +105,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
 }, {
     dropdownValues: {};

package/lib/src/shared/page-settings/components/delete-page-modal/DeletePageModal.mixin.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {}, {}, {
     onCancel(): void;
     onConfirm(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("confirm" | "cancel")[], "confirm" | "cancel", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isVisible: {
         type: BooleanConstructor;
         required: false;

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

@@ -3893,6 +3893,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     pageSettingsStore: import("pinia").Store<"uiPageSettings", import("../../store").PageSettingsState, {
         pageIndex(): number;

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

@@ -261,6 +261,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     'side-bar-content': import("vue").Ref<null, null>;
     isPrepurchase: import("vue").ComputedRef<boolean>;

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

@@ -470,6 +470,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../../brand-page-maker/stores").BrandPageMakerState, {
         contentErrorCount(): number;
@@ -850,6 +853,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
+        setBackgroundMedia(payload: import("../../my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
     }>;
     eventTracker: {
         sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;

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

@@ -514,6 +514,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): TemplateSettingsTemplate | undefined;
+        setupLogoChangeWatcher(): void;
     }>;
     uiStore: import("pinia").Store<"ui", import("../../models").UIRootState, {
         endpoints: () => import("../../models").Endpoints;

package/lib/src/shared/template-settings/models.d.ts

@@ -4,6 +4,8 @@ export interface TemplateSettingsTemplate {
     isPersonalisable?: boolean;
     personalisationContentIndex?: number;
     brandPageModel: BrandPageModel;
+    contentKey?: string;
+    previewImageUrl?: string;
 }
 export type DesignTemplateType = 'Facebook cover' | 'Brand Page' | 'Brand Site' | 'Brand Contact';
 export declare const TEMPLATE_TABS: {

package/lib/src/shared/template-settings/store/template-settings-store.d.ts

@@ -19,6 +19,8 @@ export interface TemplatesSettingState {
     selectedCategory: string | undefined;
     searchTerm: string | undefined;
     tabsWithTranslations: SelectedTabType[];
+    logoChangeWatcherInitialized: boolean;
+    renderAsImage: boolean;
 }
 export declare const useUiTemplateSettingsStore: import("pinia").StoreDefinition<"uiTemplateSettings", TemplatesSettingState, {}, {
     _addTemplates({ templates }: {
@@ -71,5 +73,9 @@ export declare const useUiTemplateSettingsStore: import("pinia").StoreDefinition
     }): void;
     clearTemplates(): void;
     getTemplateByTemplateId(id: string): TemplateSettingsTemplate | undefined;
+    /**
+     * re-fetch templates when the logo changes to regenerate preview images with the new logo.
+     */
+    setupLogoChangeWatcher(): void;
 }>;
 export {};

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -2,48 +2,58 @@ import { TEMPLATE_TABS } from '../models';
 import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
 import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '../../../brand-page-maker/constants';
-import { defineStore } from 'pinia';
-import { useBrandPageContainerStore, useBrandPageMakerStore, useUiStore, } from '../../../brand-page-maker/stores';
+import { defineStore, storeToRefs } from 'pinia';
+import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, } from '../../../brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { BrandPageModel } from '../../../brand-page/models';
 import { migrateBrandPageModel } from '../../../brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../../brand-page-maker/utils/ai-content-selection.util';
 import { useUiLogoSettingsStore } from '../../logo-settings/store';
 import { templateSettingsTr, getCurrentLocale, } from '../../../composables/useTranslate';
+import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
 const LOAD_PAGE_RETRY_DELAY = 250;
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
-    state: () => ({
-        isBusy: false,
-        pageCount: 0,
-        pageNo: 1,
-        pageNoLoaded: 0,
-        pageSize: DEFAULT_PAGE_SIZE,
-        templateType: BP_DEFAULT_TEMPLATE_TYPE_NAME,
-        templates: [],
-        selectedTab: {
-            key: 'all',
-            displayName: templateSettingsTr(`headerAll`),
-        },
-        searchTerm: undefined,
-        selectedCategory: undefined,
-        templateCategories: [],
-        tabsWithTranslations: [
-            {
+    state: () => {
+        const brandPageContainerStore = useBrandPageContainerStore();
+        const brandPageMakerUserStore = useBrandPageMakerUserStore();
+        // Set renderAsImage to true if not admin AND not pre-purchase
+        const renderAsImage = !brandPageMakerUserStore.isAdmin &&
+            !brandPageContainerStore.isPrePurchase;
+        return {
+            isBusy: false,
+            pageCount: 0,
+            pageNo: 1,
+            pageNoLoaded: 0,
+            pageSize: DEFAULT_PAGE_SIZE,
+            templateType: BP_DEFAULT_TEMPLATE_TYPE_NAME,
+            templates: [],
+            selectedTab: {
                 key: 'all',
                 displayName: templateSettingsTr(`headerAll`),
             },
-            {
-                key: 'categories',
-                displayName: templateSettingsTr(`headerCategories`),
-            },
-            {
-                key: 'ai',
-                displayName: templateSettingsTr(`headerAi`),
-            },
-        ],
-        cachedTemplates: {},
-    }),
+            searchTerm: undefined,
+            selectedCategory: undefined,
+            templateCategories: [],
+            tabsWithTranslations: [
+                {
+                    key: 'all',
+                    displayName: templateSettingsTr(`headerAll`),
+                },
+                {
+                    key: 'categories',
+                    displayName: templateSettingsTr(`headerCategories`),
+                },
+                {
+                    key: 'ai',
+                    displayName: templateSettingsTr(`headerAi`),
+                },
+            ],
+            cachedTemplates: {},
+            logoChangeWatcherInitialized: false,
+            renderAsImage,
+        };
+    },
     actions: {
         _addTemplates({ templates }) {
             this.templates = this.templates.concat(templates);
@@ -132,6 +142,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         async loadPageNo({ pageNo }) {
             const brandPageMakerStore = useBrandPageMakerStore();
             const brandPageContainerStore = useBrandPageContainerStore();
+            const brandPageMakerUserStore = useBrandPageMakerUserStore();
             const logoSettingsStore = useUiLogoSettingsStore();
             const designTemplateToken = brandPageContainerStore.designTemplateToken;
             if (brandPageMakerStore.isInitialising) {
@@ -163,6 +174,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     categoryName: this.selectedCategory,
                     searchTerm: this.searchTerm,
                     logoDraftToken: logoSettingsStore.selectedLogoImage.logoDraftToken,
+                    logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
                     personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                     selectedTemplateToken: designTemplateToken,
                     locale: currentLocale,
@@ -171,11 +183,39 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     return;
                 }
                 this._setPageCount({ pageCount: result.pageCount });
-                const templates = (await Promise.all(result.paginatedItems.map(async (i) => {
-                    const template = await designTemplateClient.getTemplateByTemplateToken(i.designTemplateToken);
-                    return this.safeMapToTemplateSettingsTemplate(template);
-                }))).filter((t) => Boolean(t));
-                this._addTemplates({ templates });
+                const templates = await Promise.all(result.paginatedItems.map(async (item) => {
+                    try {
+                        if (brandPageContainerStore.isPrePurchase ||
+                            brandPageMakerUserStore.isAdmin) {
+                            // Pre-purchase: full template with brandPageModel for live rendering
+                            const template = await designTemplateClient.getTemplateByTemplateToken(item.designTemplateToken);
+                            return this.safeMapToTemplateSettingsTemplate(template);
+                        }
+                        else {
+                            let personalisationContentIndex;
+                            let contentKey;
+                            if (uiStore.personalisationData?.length) {
+                                personalisationContentIndex =
+                                    await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, uiStore.personalisationData.length);
+                                // Get the contentKey from the selected personalisation variation
+                                // This is needed for the backend preview URL to show the correct variation
+                                const selectedPersonalisation = uiStore.personalisationData[personalisationContentIndex];
+                                contentKey = selectedPersonalisation.contentKey;
+                            }
+                            return {
+                                id: item.designTemplateToken,
+                                contentKey,
+                                previewImageUrl: item.previewImageUrl,
+                            };
+                        }
+                    }
+                    catch (error) {
+                        return null;
+                    }
+                }));
+                // Filter out null templates before adding
+                const validTemplates = templates.filter((t) => t !== null);
+                this._addTemplates({ templates: validTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {
@@ -244,6 +284,10 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 throw new Error('templateType should not be falsy');
             }
             this.templateType = templateType;
+            if (!this.logoChangeWatcherInitialized) {
+                this.setupLogoChangeWatcher();
+                this.logoChangeWatcherInitialized = true;
+            }
         },
         async setTemplateCategories(payload) {
             await this._setTemplateCategories({
@@ -270,5 +314,35 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         getTemplateByTemplateId(id) {
             return (this.templates.find((t) => t.id === id) || this.cachedTemplates[id]);
         },
+        /**
+         * re-fetch templates when the logo changes to regenerate preview images with the new logo.
+         */
+        setupLogoChangeWatcher() {
+            const logoSettingsStore = useUiLogoSettingsStore();
+            const brandPageContainerStore = useBrandPageContainerStore();
+            const brandPageMakerUserStore = useBrandPageMakerUserStore();
+            const { selectedLogoImage } = storeToRefs(logoSettingsStore);
+            // Watch for changes to logoImage (token or variation changes)
+            watch(() => selectedLogoImage.value, async (newLogoImage, oldLogoImage) => {
+                // Skip initial load when oldLogoImage is undefined
+                if (!oldLogoImage) {
+                    return;
+                }
+                // Only refetch for post-purchase users and when logo actually changes
+                const hasLogoChanged = newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken ||
+                    newLogoImage.logoVariation !== oldLogoImage.logoVariation;
+                if (!brandPageContainerStore.isPrePurchase &&
+                    !brandPageMakerUserStore.isAdmin &&
+                    newLogoImage.logoDraftToken &&
+                    hasLogoChanged) {
+                    // Reset templates state and reload with new logo
+                    // Use the same pattern as onCategorySelected and onSearch
+                    await this._setTemplates({ templates: [] });
+                    await this._setPageNoLoaded({ pageNoLoaded: 0 });
+                    await this._setPageNo({ pageNo: 1 });
+                    await this.loadPageNo({ pageNo: 1 });
+                }
+            }, { deep: true });
+        },
     },
 });

package/package.json

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

package/src/brand-page/components/page/Page.mixin.ts

@@ -99,16 +99,21 @@ export default defineComponent({
 
     backgroundShapes(): BackgroundShape[] {
       const backgroundShapes: BackgroundShape[] = [
-        ...(this.viewModel?.styles?.backgroundStyles?.backgroundShapes || []),
+        ...(this.viewModel?.styles?.backgroundStylesViewModel
+          ?.backgroundShapes || []),
       ];
 
       // TODO: create style viewmodel object to include backgroundImageContent attribute only on viewmodel
       // p.s backgroundImageUrl can be url or SVG content string
-      if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl) {
+      if (
+        this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl
+      ) {
         backgroundShapes.splice(0, 0, {
-          name: this.viewModel.styles.backgroundStyles.backgroundImageUrl,
+          name: this.viewModel.styles.backgroundStylesViewModel
+            .backgroundImageUrl,
           style: {
-            ...this.viewModel.styles.backgroundStyles.backgroundShapeStyle,
+            ...this.viewModel.styles.backgroundStylesViewModel
+              .backgroundShapeStyle,
             width: `100%`,
             height: `100%`,
           },
@@ -122,11 +127,12 @@ export default defineComponent({
       let styles: BrandPageCssStyle = {};
 
       if (
-        !this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl &&
-        this.viewModel?.styles?.backgroundStyles?.style
+        !this.viewModel?.styles?.backgroundStylesViewModel
+          ?.backgroundImageUrl &&
+        this.viewModel?.styles?.backgroundStylesViewModel?.style
       ) {
         styles = {
-          ...this.viewModel?.styles?.backgroundStyles?.style,
+          ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
         };
       }
 
@@ -149,38 +155,41 @@ export default defineComponent({
     },
 
     rootBackgroundStyles(): BrandPageCssStyle {
+      console.log('vm styles ', this.viewModel.styles);
       const styles: BrandPageCssStyle = {
-        ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
+        ...(this.viewModel?.styles?.backgroundStylesViewModel?.style || {}),
       };
 
       delete styles.backgroundAttachment;
 
       if (
-        this.viewModel.styles?.backgroundStyles?.backgroundImageUrl &&
-        (this.viewModel.styles.backgroundStyles.backgroundImageUrl.endsWith(
+        this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl &&
+        (this.viewModel.styles.backgroundStylesViewModel.backgroundImageUrl.endsWith(
           `.svg`,
         ) ||
-          !this.viewModel.styles?.backgroundStyles?.backgroundImageUrl.startsWith(
+          !this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl.startsWith(
             'http',
           ))
       ) {
         // Any backgroundImageUrl that handles svg file, svg markup is handled as BackgroundShape object
         delete styles.backgroundImage;
-      } else if (this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl) {
+      } else if (
+        this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl
+      ) {
         // if background is a gradient
         if (
-          this.viewModel?.styles?.backgroundStyles?.style?.background?.startsWith(
+          this.viewModel?.styles?.backgroundStylesViewModel?.style?.background?.startsWith(
             'linear-gradient',
           )
         ) {
           // combine image and gradient into the `background` property
-          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStyles?.style?.background}`;
+          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStylesViewModel?.style?.background}`;
 
           delete styles.background;
         } else {
           // background is a solid color
           styles.backgroundColor = styles.background;
-          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
+          styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl})`;
 
           delete styles.background;
         }