@designcrowd/library.brand-page 5.15.24 → 5.15.25-1

package/lib/src/{CreatedOnBrandCrowd-de-de-D7rRFKgr.js → CreatedOnBrandCrowd-de-de-DfxXvPUd.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CaTNBPEK.js → CreatedOnBrandCrowd-en-us-Dfq14eeK.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-zdp6A-zF.js → CreatedOnBrandCrowd-es-es-ntm66WVh.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-TS3XLzo6.js → CreatedOnBrandCrowd-fr-ca-CG5E6eDq.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-TS3XLzo6.js → CreatedOnBrandCrowd-fr-fr-CG5E6eDq.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DkyF49-j.js → CreatedOnBrandCrowd-pt-br-CYDoX0rS.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DkyF49-j.js → CreatedOnBrandCrowd-pt-pt-CYDoX0rS.js}

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

package/lib/src/{CreatedOnDcom-de-de-BckUcm9C.js → CreatedOnDcom-de-de-DHkJnfUc.js}

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

package/lib/src/{CreatedOnDcom-en-us-CqgIo3AG.js → CreatedOnDcom-en-us-DL99PaxQ.js}

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

package/lib/src/{CreatedOnDcom-es-es-DOEOu0Gx.js → CreatedOnDcom-es-es-CAUzJnYl.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DjbwfTN3.js → CreatedOnDcom-fr-ca-CYXn1x12.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-By17z-yX.js → CreatedOnDcom-fr-fr-CHIozLex.js}

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

package/lib/src/{CreatedOnDcom-pt-br-D9AAR_em.js → CreatedOnDcom-pt-br-3LFQpHjY.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Bz8SLuU2.js → CreatedOnDcom-pt-pt-1GiKzEx7.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CgMLUv91.js";
+import { _ as M } from "./lib-D2Te0aey.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, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../..';
+import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } 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/template-preview/TemplatePreview.mixin.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { BrandPageContext, BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '../../../brand-page';
-import type { TemplateSettingsTemplate } from '../../../shared/template-settings/models';
+import { type TemplateSettingsTemplate } from '../../../shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 interface TemplatePreviewData {
     containerStyle: BrandPageCssStyle;
@@ -15,6 +15,8 @@ interface TemplatePreviewData {
     renderHeight: number;
     renderWidth: number;
     rootStyles: BrandPageCssStyle;
+    imageLoadError: boolean;
+    imageLoading: boolean;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     logoImage: {
@@ -61,6 +63,64 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     selectedTemplateId: import("vue").ComputedRef<string | false>;
+    isPrePurchase: import("vue").ComputedRef<boolean>;
+    runtimeEnvironment: import("vue").ComputedRef<string>;
+    selectedTab: import("vue").ComputedRef<{
+        key: string;
+        displayName: string;
+    }>;
+    templateSettingsStore: import("pinia").Store<"uiTemplateSettings", import("../../../shared/template-settings/store").TemplatesSettingState, {}, {
+        _addTemplates({ templates }: {
+            templates: TemplateSettingsTemplate[];
+        }): void;
+        _setTemplates({ templates }: {
+            templates: TemplateSettingsTemplate[];
+        }): void;
+        _setIsBusy({ isBusy }: {
+            isBusy: boolean;
+        }): void;
+        _setPageCount({ pageCount }: {
+            pageCount: number;
+        }): void;
+        _setPageNo({ pageNo }: {
+            pageNo: number;
+        }): void;
+        _setPageNoLoaded({ pageNoLoaded }: {
+            pageNoLoaded: number;
+        }): void;
+        _setSearchTerm({ searchTerm }: {
+            searchTerm: string | undefined;
+        }): void;
+        _setSelectedTab({ tabName }: {
+            tabName: "all" | "AI" | "categories";
+        }): void;
+        _setSelectedCategory({ categoryName, }: {
+            categoryName: string | undefined;
+        }): void;
+        _setTemplateCategories({ categories }: {
+            categories: import("../../../shared/template-settings/models").TemplateCategory[];
+        }): void;
+        gotoNextPage(): Promise<void>;
+        gotoPreviousPage(): Promise<void>;
+        safeMapToTemplateSettingsTemplate(template: import("../../../clients/models").DesignTemplate | null): Promise<TemplateSettingsTemplate | null>;
+        loadPageNo({ pageNo }: {
+            pageNo: number;
+        }): Promise<void>;
+        getCachedTemplateByTokenAsync(token: string): Promise<TemplateSettingsTemplate | undefined>;
+        onTemplateSelected(payload: import("../../../shared/template-settings/models").OnTemplateSelectedPayload): Promise<void>;
+        onCategorySelected(payload: import("../../../shared/template-settings/models").OnCategorySelectedPayload): Promise<void>;
+        onSearch(payload: import("../../../shared/template-settings/models").OnSearchPayload): Promise<void>;
+        onTabSelected(payload: import("../../../shared/template-settings/models").OnTabSelectedPayload): Promise<void>;
+        setTemplateType({ templateType }: {
+            templateType: import("../../../shared/template-settings/models").DesignTemplateType;
+        }): void;
+        setTemplateCategories(payload: import("../../../shared/template-settings/models").SetTemplateCategoriesPayload): Promise<void>;
+        selectInitialTemplateCategory(payload: {
+            selectedCategory: string;
+        }): void;
+        clearTemplates(): void;
+        getTemplateByTemplateId(id: string): TemplateSettingsTemplate | undefined;
+    }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;
@@ -187,17 +247,243 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         showStripeOnboardingModal(): Promise<void>;
         selectInitialCategories(payload: import("../../../shared/template-settings/models").InitialCategories): void;
     }>;
+    brandPageContainerStore: import("pinia").Store<"brandPageContainer", import("../../stores").BrandPageContainerState, {
+        brandPageContentTypes(): string[];
+        isAdmin(): boolean;
+        isPublished: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: "active" | "pending" | "failed" | "renewFailed" | "deleted";
+                dnsConfigurationStatus: "request_expired" | "missing_expected_dns_records" | "invalid_multiple_dns_records_exist" | "unexpected_aaaa_record" | "completed";
+                triggerOrigin?: string | undefined;
+            } | null;
+            createCustomDomainErrorMessage: string | null;
+            customDomainConfig?: {
+                dns: {
+                    ipAddresses: string[];
+                };
+            } | undefined;
+            designDraftToken?: string | undefined;
+            designTemplateToken: string;
+            isCustomDomainEnabled: boolean;
+            isBrandPageSlugEditMode: boolean;
+            isPublishModalVisible: boolean;
+            isUpgradeModalVisible: boolean;
+            isPublishing: boolean;
+            isProduction: boolean;
+            isSellDomainNameEnabled: boolean;
+            isStripeOnboardingModalVisible: boolean;
+            isReactivationModal: boolean;
+            isPublishUpgradeModal: boolean;
+            isSaving: boolean;
+            backButtonLabel: string;
+            manageWebsiteDesignsUrl: string;
+            publishErrorMessage: string;
+            upgradeUrl: string;
+            reactivationUrl: string;
+            runtimeEnvironment: string;
+            selectedTaxId: number | undefined;
+            slug: string;
+            standalone: boolean;
+            triggerSaveSuccessMessage: boolean;
+            isDesignCom: boolean;
+            isPrePurchase: boolean;
+            makerFonts: any[];
+            eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
+            showPublishOptionModal?: boolean | undefined;
+            abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
+        isUserDraft: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: "active" | "pending" | "failed" | "renewFailed" | "deleted";
+                dnsConfigurationStatus: "request_expired" | "missing_expected_dns_records" | "invalid_multiple_dns_records_exist" | "unexpected_aaaa_record" | "completed";
+                triggerOrigin?: string | undefined;
+            } | null;
+            createCustomDomainErrorMessage: string | null;
+            customDomainConfig?: {
+                dns: {
+                    ipAddresses: string[];
+                };
+            } | undefined;
+            designDraftToken?: string | undefined;
+            designTemplateToken: string;
+            isCustomDomainEnabled: boolean;
+            isBrandPageSlugEditMode: boolean;
+            isPublishModalVisible: boolean;
+            isUpgradeModalVisible: boolean;
+            isPublishing: boolean;
+            isProduction: boolean;
+            isSellDomainNameEnabled: boolean;
+            isStripeOnboardingModalVisible: boolean;
+            isReactivationModal: boolean;
+            isPublishUpgradeModal: boolean;
+            isSaving: boolean;
+            backButtonLabel: string;
+            manageWebsiteDesignsUrl: string;
+            publishErrorMessage: string;
+            upgradeUrl: string;
+            reactivationUrl: string;
+            runtimeEnvironment: string;
+            selectedTaxId: number | undefined;
+            slug: string;
+            standalone: boolean;
+            triggerSaveSuccessMessage: boolean;
+            isDesignCom: boolean;
+            isPrePurchase: boolean;
+            makerFonts: any[];
+            eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
+            showPublishOptionModal?: boolean | undefined;
+            abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
+    }, {
+        initialise(payload: import("../../stores/brandpage-container").InitialisePayload): void;
+        setDesignTemplateToken(payload: any): void;
+        setDesignDraftToken(payload: any): void;
+        setIsBrandPageSlugEditMode(payload: any): void;
+        setIsPublishing(payload: any): void;
+        setIsPublishModalVisible(payload: any): void;
+        setIsPublishUpgradeModal(payload: any): void;
+        setIsSaving(payload: any): void;
+        setIsUpgradeModalVisible(payload: any): void;
+        setPublishErrorMessage(payload: any): void;
+        setTriggerSaveSuccessMessage(payload: any): void;
+        setSlug(payload: any): void;
+        updateBrandPageMeta(payload: any): void;
+        updateBrandPageSensitiveContent(payload: any): void;
+        setLogoDraftToken(payload: {
+            logoDraftToken: string;
+        }): void;
+        setBackUrl(payload: any): void;
+        setIsStripeOnboardingModalVisible(payload: any): void;
+        setSelectedTaxId(payload: any): void;
+        setBrandPageCustomDomainConfig({ customDomainConfig }: {
+            customDomainConfig: any;
+        }): void;
+        setBrandPageCustomDomain(payload: {
+            customDomain: import("../../models").CustomDomainModel | null;
+        }): void;
+        setCreateCustomDomainErrorMessage(payload: any): void;
+        setBrandPageIsCustomDomainEnabled(payload: any): void;
+        setIsSubsequentPublish(payload: any): void;
+        clearPublishErrorMessage(): void;
+        closePublishModal(payload?: {
+            skipShowNextNotificationMessage?: boolean | undefined;
+        }): Promise<void>;
+        closeUpgradeModal(): Promise<void>;
+        endBrandPageSlugEditMode(): void;
+        publishBrandPage({ shouldPublish, slug }: {
+            shouldPublish: any;
+            slug: any;
+        }): Promise<false | {
+            success: boolean;
+            websiteUpsellModalViewModel: any;
+        }>;
+        publishBrandPageWithCustomDomainAsync({ shouldPublish, slug, domain, isPurchasedDomain, }: {
+            shouldPublish: any;
+            slug: any;
+            domain: any;
+            isPurchasedDomain: any;
+        }): Promise<boolean | undefined>;
+        checkWebsiteSlugAsync(slug: string): Promise<import("../../models/api.model").WebsiteSlugCheckResponse | null>;
+        redirectToLogoEditPage(logoEditUrl: string, locale: string): Promise<void>;
+        redirectToCreateNewDesignPage(): Promise<void>;
+        redirectToStripeOnboarding(): Promise<void>;
+        exportDesignAsync(): Promise<any>;
+        saveBrandPage(payload?: {
+            isPublish?: boolean | undefined;
+            eventButtonLocation?: string | undefined;
+        }): Promise<false | {
+            saved: boolean;
+            canPublish: boolean;
+            websiteUpsellModalViewModel: any;
+        }>;
+        saveAndPublishBrandPage(eventButtonLocation: string): Promise<void>;
+        saveTemplate(): Promise<void>;
+        setBrandPageStatus(status: any): Promise<void>;
+        showPublishModal(eventButtonLocation?: string | undefined, websiteUpsellModalViewModel?: any, isSubsequentPublish?: boolean | undefined): void;
+        showBrandPageSlugEditModal(eventButtonLocation: string): Promise<void>;
+        showUpgradeModalAndSaveAsync(): Promise<void>;
+        showStripeOnboardingModal(): void;
+        closeStripeOnboardingModal(): void;
+        showSaveSuccessMessage(): Promise<void>;
+        startBrandPageSlugEditMode(): void;
+        triggerLockedContentClickedEvent(contentType: string): Promise<void>;
+        unpublishBrandPage(): Promise<void>;
+        updateBrandPageSettings({ description, title }: {
+            description: any;
+            title: any;
+        }): Promise<void>;
+        updateSensitiveContent({ sensitiveContent }: {
+            sensitiveContent: any;
+        }): Promise<void>;
+        createBrandPageCustomDomain({ domainName }: {
+            domainName: any;
+        }): Promise<false | undefined>;
+        createBrandPageWithPurchasedDomain({ domainName }: {
+            domainName: any;
+        }): Promise<false | undefined>;
+        deleteBrandPageCustomDomain({ designDraftToken, customDomainId }: {
+            designDraftToken: any;
+            customDomainId: any;
+        }): Promise<void>;
+        refreshBrandPageCustomDomainConfig(): Promise<void>;
+        refreshBrandPageCustomDomain(): Promise<void>;
+        updateBrandPageIsCustomDomainEnabled({ isCustomDomainEnabled }: {
+            isCustomDomainEnabled: any;
+        }): Promise<void>;
+    }>;
 }, TemplatePreviewData, {
     context(): BrandPageContext;
     previewViewport(): string;
     scaledContainerStyle(): BrandPageCssStyle;
     innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
+    isAiTemplate(): boolean;
+    shouldRenderAsPage(): boolean;
     cssVariablesStyle(): Record<string, string>;
+    previewImageUrl(): string;
 }, {
     onOverlayClicked(): void;
     onResize(): void;
     onSetPreviewStyles(styles: BrandPageCssStyle): void;
+    onImageError(): void;
+    onImageLoad(): void;
+    generatePreviewImageUrl(): string;
+    getPreviewBaseUrl(): string;
+    regeneratePreview(): void;
     updateViewModel(forceUpdate?: boolean): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "template-selected"[], "template-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     logoImage: {

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

@@ -2,19 +2,28 @@ 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 { TEMPLATE_TABS, } from '../../../shared/template-settings/models';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
-import { useBrandPageMakerStore } from '../../stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, } from '../../stores';
 import { applyLogoImageBase64UrlToBrandPageTemplateModel, applyLogoImageToBrandPageTemplateModel, applyLogoTemplateImageToBrandPageTemplateModel, } from '../../../brand-page/utils/logo.util';
 import { useVideoStore } from '../../../lib';
+import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
     emits: ['template-selected'],
     setup() {
         const brandPageMakerStore = useBrandPageMakerStore();
+        const brandPageContainerStore = useBrandPageContainerStore();
+        const templateSettingsStore = useUiTemplateSettingsStore();
         return {
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
+            isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
+            runtimeEnvironment: computed(() => brandPageContainerStore.runtimeEnvironment),
+            selectedTab: computed(() => templateSettingsStore.selectedTab),
+            templateSettingsStore,
             brandPageMakerStore,
+            brandPageContainerStore,
         };
     },
     props: {
@@ -73,6 +82,8 @@ export default defineComponent({
             renderWidth: 400,
             rootStyles: {},
             viewModel: undefined,
+            imageLoadError: false,
+            imageLoading: true,
         };
         return data;
     },
@@ -131,6 +142,12 @@ export default defineComponent({
         isPersonalisable() {
             return this.template.isPersonalisable || false;
         },
+        isAiTemplate() {
+            return (!!this.personalisationData && this.selectedTab.key === TEMPLATE_TABS.AI);
+        },
+        shouldRenderAsPage() {
+            return this.isPrePurchase || this.isAiTemplate;
+        },
         cssVariablesStyle() {
             if (!this.logoTheme) {
                 return {};
@@ -147,17 +164,24 @@ export default defineComponent({
             });
             return cssVariables;
         },
+        previewImageUrl() {
+            return this.generatePreviewImageUrl();
+        },
     },
     watch: {
+        template() {
+            if (this.isPrePurchase) {
+                this.updateViewModel();
+            }
+        },
         logoTheme: {
             handler() {
-                this.updateViewModel();
+                if (this.isPrePurchase) {
+                    this.updateViewModel();
+                }
             },
             deep: true,
         },
-        template() {
-            this.updateViewModel();
-        },
     },
     created() {
         this.updateViewModel(false);
@@ -197,7 +221,37 @@ export default defineComponent({
         onSetPreviewStyles(styles) {
             this.rootStyles = styles;
         },
+        onImageError() {
+            console.warn(`Failed to load preview image for template ${this.template.id}`);
+            this.imageLoadError = true;
+            this.imageLoading = false;
+        },
+        onImageLoad() {
+            this.imageLoadError = false;
+            this.imageLoading = false;
+        },
+        generatePreviewImageUrl() {
+            const baseUrl = this.getPreviewBaseUrl();
+            const logoDraftToken = this.logoImage?.logoDraftToken ||
+                '0B660926-D94A-4E29-99D1-F07E67AA6E49';
+            const deviceType = this.brandPageMakerStore.brandPageType === 'brandSite'
+                ? 'desktop'
+                : 'mobile';
+            return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=${deviceType}`;
+        },
+        getPreviewBaseUrl() {
+            const domainSuffix = '.brand.page';
+            return `https://preview-${this.runtimeEnvironment}${domainSuffix}`;
+        },
+        regeneratePreview() {
+            this.imageLoadError = false;
+            this.imageLoading = true;
+            this.$forceUpdate();
+        },
         async updateViewModel(forceUpdate = true) {
+            if (!this.isPrePurchase) {
+                return;
+            }
             const videoStore = useVideoStore();
             let model = this.template.brandPageModel;
             if (this.logoImageBase64Url) {

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

@@ -178,13 +178,23 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             if (!this.selectedTemplateId) {
                 return;
             }
-            const template = templateSettingsStore.getTemplateByTemplateId(this.selectedTemplateId);
+            let template = templateSettingsStore.getTemplateByTemplateId(this.selectedTemplateId);
             if (!template) {
                 if (process.env.NODE_ENV !== 'production') {
                     throw new Error('template should not be falsy');
                 }
                 return;
             }
+            // If template doesn't have brandPageModel (post-purchase mode), fetch it
+            if (!template.brandPageModel) {
+                template = await templateSettingsStore.getCachedTemplateByTokenAsync(this.selectedTemplateId);
+                if (!template || !template.brandPageModel) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        throw new Error('Failed to fetch template brandPageModel');
+                    }
+                    return;
+                }
+            }
             this.isApplyingTemplate = true;
             let brandPageModel = cloneDeep(template.brandPageModel);
             // Apply selected logo image to logo contents