@designcrowd/library.brand-page 5.15.17-ast-previews → 5.15.17

package/lib/src/{CreatedOnBrandCrowd-de-de-DhqVq1R4.js → CreatedOnBrandCrowd-de-de-DwjHHx8U.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-gHKO7Euu.js → CreatedOnBrandCrowd-en-us-wnQWDaLj.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BiqMA1-P.js → CreatedOnBrandCrowd-es-es-BPLwmFYf.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DeD80sNd.js → CreatedOnBrandCrowd-fr-ca-ZLo9mFvK.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DeD80sNd.js → CreatedOnBrandCrowd-fr-fr-ZLo9mFvK.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-FYtTRyJj.js → CreatedOnBrandCrowd-pt-br-PeE8kWqc.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-FYtTRyJj.js → CreatedOnBrandCrowd-pt-pt-PeE8kWqc.js}

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

package/lib/src/{CreatedOnDcom-de-de-DiyaqKgn.js → CreatedOnDcom-de-de-DckpvOP7.js}

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

package/lib/src/{CreatedOnDcom-en-us-BsH92alk.js → CreatedOnDcom-en-us-CFzquTUz.js}

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

package/lib/src/{CreatedOnDcom-es-es-DXv36XgZ.js → CreatedOnDcom-es-es-BpbcQQtf.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DwCGXfKv.js → CreatedOnDcom-fr-ca-bV4zOxfZ.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-zHQ4Y1xm.js → CreatedOnDcom-fr-fr-dGkZsGAG.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CZoYGQlg.js → CreatedOnDcom-pt-br-C2hFs0vl.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BZOFxo9Q.js → CreatedOnDcom-pt-pt-VWtI0WwK.js}

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

package/lib/src/brand-page/utils/migration/migration-07.js

@@ -1,4 +1,4 @@
-import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } from '../..';
+import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
 export const migration07 = async (migrationResult, options) => {

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -82,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

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

@@ -1,7 +1,7 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { DebounceHandle } from 'lodash.debounce';
-import { type BrandPageType, type ViewportsType, type UserPersonalisationContent } from '../../../brand-page';
+import { type BrandPageData, type BrandPageType, type ViewportsType, type UserPersonalisationContent } from '../../../brand-page';
 import type { InitialCategories, TemplateCategory } from '../../../shared/template-settings/models';
 import type { UserFeatures } from '../../stores';
 import { type LogoDesignAttributesModel } from '../../../shared/models';
@@ -10,6 +10,7 @@ import type { UpdateItemValuePayload } from '../../../shared/content-settings/mo
 export interface BrandPageMakerViewModel {
     adminPreviewLogoTemplateModels?: AdminPreviewLogoTemplateModel[];
     brandPageData?: string;
+    brandPageMetadataS3Url?: string;
     emailAddress: string;
     features: UserFeatures;
     logoVariationImageUrls: string[];
@@ -124,6 +125,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;
@@ -1136,11 +1138,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     router: import("vue-router").Router;
 }, {
     mounted: boolean;
+    isBrandPageLoaded: boolean;
     debounceOnResize: DebounceHandle | undefined;
     showSaveSuccessMessage: boolean;
 }, {
     previewContainer(): any;
 }, {
+    getBrandPageFromFallback(viewModel: any): BrandPageData;
     onResizeWithDebounce(): void;
     onResize(): void;
     setUiScreenSizeModeBasedOnDeviceWidth(): void;

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

@@ -16,6 +16,7 @@ import { useUiTemplateSettingsStore } from '../../../shared/template-settings/st
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
 import { useRouter } from 'vue-router';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
+import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
@@ -83,6 +84,7 @@ export default defineComponent({
     data() {
         return {
             mounted: false,
+            isBrandPageLoaded: false,
             debounceOnResize: undefined,
             showSaveSuccessMessage: false,
         };
@@ -97,9 +99,22 @@ export default defineComponent({
             typeof this.viewModel?.logoDraftDesignAttributes.logoTheme !== 'object') {
             console.error('logo theme is missing');
         }
-        const brandPage = typeof this.viewModel?.brandPageData === 'string'
-            ? JSON.parse(this.viewModel.brandPageData)
-            : createInitialBrandPage(this.viewModel.brandPageType);
+        let brandPage;
+        if (this.viewModel?.brandPageMetadataS3Url) {
+            const assetClient = new AssetLibraryClient({
+                baseUrl: '',
+            });
+            const metadata = await assetClient.getBrandPageMetadataAsync(this.viewModel.brandPageMetadataS3Url);
+            if (metadata) {
+                brandPage = metadata;
+            }
+            else {
+                brandPage = this.getBrandPageFromFallback(this.viewModel);
+            }
+        }
+        else {
+            brandPage = this.getBrandPageFromFallback(this.viewModel);
+        }
         const shopConfigData = this.viewModel?.shopConfigData?.trim()
             ? JSON.parse(this.viewModel.shopConfigData)
             : null;
@@ -147,6 +162,16 @@ export default defineComponent({
             navigateToPageBySlug(this.brandPageViewModel.pages[0].slug);
         }
         this.brandPageMakerStore.selectInitialCategories(this.viewModel.initialCategories);
+        // Mark brand page as fully loaded
+        this.isBrandPageLoaded = true;
+        this.brandPageMakerStore.setIsBrandPageLoaded(true);
+        // set initial screen size mode
+        if (this.isBrandPageOrIsBrandContact) {
+            this.brandPageMakerStore.setViewport({ viewport: VIEWPORTS.mobile });
+        }
+        else {
+            this.setViewportBasedOnDeviceWidth(true);
+        }
         this.$emit(EVENTS.Initialised);
     },
     mounted() {
@@ -173,6 +198,14 @@ export default defineComponent({
         }, 800);
     },
     methods: {
+        getBrandPageFromFallback(viewModel) {
+            if (typeof viewModel?.brandPageData === 'string') {
+                return JSON.parse(viewModel.brandPageData);
+            }
+            else {
+                return createInitialBrandPage(viewModel.brandPageType);
+            }
+        },
         onResizeWithDebounce() {
             if (this.debounceOnResize) {
                 this.debounceOnResize();

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -577,6 +577,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -79,6 +79,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -316,6 +316,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -315,6 +315,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -89,6 +89,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -1,17 +1,20 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
-import type { BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '../../../brand-page';
+import type { BrandPageContext, BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '../../../brand-page';
 import type { TemplateSettingsTemplate } from '../../../shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
-export interface TemplatePreviewData {
-    containerStyle: Record<string, string>;
+interface TemplatePreviewData {
+    containerStyle: BrandPageCssStyle;
     debouncedOnResize?: DebounceHandle;
     resizeObserver?: ResizeObserver;
+    viewModel?: BrandPageViewModel;
     resized: boolean;
     scale: number;
+    mobileRenderHeight: number;
+    desktopRenderHeight: number;
     renderHeight: number;
     renderWidth: number;
-    imageLoadError: boolean;
+    rootStyles: BrandPageCssStyle;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     logoImage: {
@@ -128,6 +131,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setIsInitialising(payload: {
             isInitialising: boolean;
         }): void;
+        setIsBrandPageLoaded(isLoaded: boolean): void;
         setIsModifiedAfterTemplateApplied({ isModified, }?: import("../../stores").SetIsModifiedPayload): void;
         setSelectedTemplateId(payload: {
             templateId: string | false;
@@ -183,20 +187,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         selectInitialCategories(payload: import("../../../shared/template-settings/models").InitialCategories): void;
     }>;
 }, TemplatePreviewData, {
-    scaledContainerStyle(): Record<string, string>;
-    innerContainerStyle(): Record<string, string>;
-    previewImageUrl(): string;
-    themeFilterStyle(): Record<string, string>;
+    context(): BrandPageContext;
+    previewViewport(): string;
+    scaledContainerStyle(): BrandPageCssStyle;
+    innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
+    cssVariablesStyle(): Record<string, string>;
 }, {
     onOverlayClicked(): void;
     onResize(): void;
-    onImageError(): void;
-    onImageLoad(): void;
-    generatePreviewImageUrl(): string;
-    getPreviewBaseUrl(): string;
-    regeneratePreview(): void;
-    generateFullViewModel(): Promise<BrandPageViewModel>;
+    onSetPreviewStyles(styles: BrandPageCssStyle): void;
+    updateViewModel(forceUpdate?: boolean): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "template-selected"[], "template-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     logoImage: {
         type: PropType<LogoImageModel>;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -1,5 +1,7 @@
 import { computed, defineComponent } from 'vue';
+import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '../../../brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '../../../brand-page/utils';
+import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
 import { useBrandPageMakerStore } from '../../stores';
@@ -64,13 +66,51 @@ export default defineComponent({
             debouncedOnResize: undefined,
             resized: false,
             scale: 1,
+            mobileRenderHeight: 650,
+            desktopRenderHeight: 900,
             renderHeight: 900,
             renderWidth: 400,
-            imageLoadError: false,
+            rootStyles: {},
+            viewModel: undefined,
         };
         return data;
     },
     computed: {
+        context() {
+            return {
+                isTemplate: true,
+                isPreview: true,
+                isProduction: true,
+                isDesignCom: false,
+                isServerRender: false,
+                brandPageSlug: '',
+                brandPageToken: this.viewModel?.brandPageToken,
+                runtimeEnvironment: '',
+                stripePublishableKey: undefined,
+                pageTitle: this.brandPageTitle,
+                pages: this.viewModel?.pages || [],
+                currentPageSlug: this.viewModel?.pages[0]?.slug || '',
+                customDomain: undefined,
+                brandPageType: this.viewModel?.brandPageType || BRAND_PAGE_TYPES.default,
+                isBrandPage: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default,
+                isBrandPageOrIsBrandContact: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default ||
+                    this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
+                isBrandSite: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+                isBrandContact: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
+                options: {
+                    disableNavigationSideMenu: true,
+                    mediaSizes: MEDIA_SIZES.sizeThumb,
+                },
+                isCapturingPreview: false,
+            };
+        },
+        previewViewport() {
+            if (!this.viewModel?.brandPageType ||
+                this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default) {
+                return VIEWPORTS.mobile;
+            }
+            return VIEWPORTS.desktop;
+        },
         scaledContainerStyle() {
             return {
                 transform: 'scale(' + this.scale + ')',
@@ -81,49 +121,44 @@ export default defineComponent({
             return {
                 width: `${this.renderWidth}px`,
                 height: `${this.renderHeight}px`,
+                ...this.rootStyles,
+                backgroundAttachment: 'scroll',
                 position: 'relative',
             };
         },
-        previewImageUrl() {
-            return this.generatePreviewImageUrl();
+        isPersonalisable() {
+            return this.template.isPersonalisable || false;
         },
-        themeFilterStyle() {
-            if (!this.logoTheme?.logoBackgroundColor?.hsl) {
+        cssVariablesStyle() {
+            if (!this.logoTheme) {
                 return {};
             }
-            const hue = this.logoTheme.logoBackgroundColor.hsl.h;
-            return {
-                filter: `hue-rotate(${hue}deg)`,
-            };
-        },
-        isPersonalisable() {
-            return this.template.isPersonalisable || false;
+            const cssVariables = {};
+            // Generate CSS variables for logo theme colors
+            Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
+                const themeColor = key.includes('Background')
+                    ? this.logoTheme.logoBackgroundColor
+                    : this.logoTheme.logoTextColor;
+                if (themeColor?.rgb) {
+                    cssVariables[`--${value}`] = themeColor.rgb;
+                }
+            });
+            return cssVariables;
         },
     },
     watch: {
-        template() {
-            this.regeneratePreview();
-        },
-        logoImage: {
-            handler() {
-                this.regeneratePreview();
-            },
-            deep: true,
-        },
-        logoTemplateImage: {
-            handler() {
-                this.regeneratePreview();
-            },
-            deep: true,
-        },
         logoTheme: {
             handler() {
-                this.regeneratePreview();
+                this.updateViewModel();
             },
             deep: true,
         },
+        template() {
+            this.updateViewModel();
+        },
     },
     created() {
+        this.updateViewModel(false);
         this.debouncedOnResize = debounce(this.onResize, DEBOUNCE_IN_MS);
         this.$nextTick(() => {
             this.resized = true;
@@ -157,34 +192,10 @@ export default defineComponent({
             this.scale = container.clientWidth / this.renderWidth;
             this.containerStyle.height = `${this.renderHeight * this.scale}px`;
         },
-        onImageError() {
-            console.warn(`Failed to load preview image for template ${this.template.id}`);
-            this.imageLoadError = true;
-        },
-        onImageLoad() {
-            this.imageLoadError = false;
-        },
-        generatePreviewImageUrl() {
-            const baseUrl = this.getPreviewBaseUrl();
-            const logoDraftToken = this.logoImage?.logoDraftToken ||
-                '0B660926-D94A-4E29-99D1-F07E67AA6E49';
-            return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=mobile`;
-        },
-        getPreviewBaseUrl() {
-            let domainSuffix = '.brand.page';
-            if (this.brandPageMakerStore.brandPageType === 'brandSite') {
-                domainSuffix = '.brand.site';
-            }
-            else if (this.brandPageMakerStore.brandPageType === 'brandContact') {
-                domainSuffix = '.brand.contact';
-            }
-            return `https://preview-${window.location.hostname}${domainSuffix}`;
+        onSetPreviewStyles(styles) {
+            this.rootStyles = styles;
         },
-        regeneratePreview() {
-            this.imageLoadError = false;
-            this.$forceUpdate();
-        },
-        async generateFullViewModel() {
+        async updateViewModel(forceUpdate = true) {
             let model = this.template.brandPageModel;
             if (this.logoImageBase64Url) {
                 model = applyLogoImageBase64UrlToBrandPageTemplateModel(model, this.logoImageBase64Url);
@@ -200,7 +211,10 @@ export default defineComponent({
                 model = result.model;
             }
             model = applyLogoThemeToBrandPageModel(this.logoTheme, model).model;
-            return await getBrandPageViewModelFromBrandPageModel(model, undefined, false);
+            this.viewModel = await getBrandPageViewModelFromBrandPageModel(model, undefined, false);
+            if (forceUpdate) {
+                this.$forceUpdate();
+            }
         },
     },
 });

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

@@ -37,6 +37,7 @@ export interface BrandPageMakerState {
     isPageNavigating: boolean;
     isChangeTemplateConfirmModalVisible: boolean;
     isInitialising: boolean;
+    isBrandPageLoaded: boolean;
     isModifiedAfterTemplateApplied: boolean;
     notificationMessageQueue: NotificationMessage[];
     selectedTemplateId: string | false;
@@ -152,6 +153,7 @@ export declare const useBrandPageMakerStore: import("pinia").StoreDefinition<"br
     setIsInitialising(payload: {
         isInitialising: boolean;
     }): void;
+    setIsBrandPageLoaded(isLoaded: boolean): void;
     setIsModifiedAfterTemplateApplied({ isModified, }?: SetIsModifiedPayload): void;
     setSelectedTemplateId(payload: {
         templateId: string | false;

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

@@ -46,6 +46,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         isApplyingTemplate: false,
         isChangeTemplateConfirmModalVisible: false,
         isInitialising: false,
+        isBrandPageLoaded: false,
         isPageNavigating: false,
         isModifiedAfterTemplateApplied: false,
         notificationMessageQueue: [],
@@ -141,6 +142,9 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         setIsInitialising(payload) {
             this.isInitialising = payload.isInitialising;
         },
+        setIsBrandPageLoaded(isLoaded) {
+            this.isBrandPageLoaded = isLoaded;
+        },
         setIsModifiedAfterTemplateApplied({ isModified, } = {}) {
             const sideBarStore = useUiSideBarStore();
             if (this.isApplyingTemplate ||