@designcrowd/library.brand-page 5.16.0 → 5.16.2-ast-preview-1

package/lib/src/{CreatedOnBrandCrowd-de-de-DqoHzxXx.js → CreatedOnBrandCrowd-de-de-BTQjYiwH.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BmtA8uCU.js → CreatedOnBrandCrowd-en-us-DzswEvvL.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-D1cIlk-E.js → CreatedOnBrandCrowd-es-es-DPCSqIpT.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C_v_2nKA.js → CreatedOnBrandCrowd-fr-ca-CZ29VWa6.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C_v_2nKA.js → CreatedOnBrandCrowd-fr-fr-CZ29VWa6.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Bg05a8ef.js → CreatedOnBrandCrowd-pt-br-Da_WGhKg.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Bg05a8ef.js → CreatedOnBrandCrowd-pt-pt-Da_WGhKg.js}

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

package/lib/src/{CreatedOnDcom-de-de-BuZW8uEb.js → CreatedOnDcom-de-de-blHR4WbT.js}

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

package/lib/src/{CreatedOnDcom-en-us-DKNTU2Em.js → CreatedOnDcom-en-us-fRN0Ox2R.js}

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

package/lib/src/{CreatedOnDcom-es-es-BrEOCA3u.js → CreatedOnDcom-es-es-afLu2Y1A.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BlqNBDRR.js → CreatedOnDcom-fr-ca-fvpFoGkr.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CPXKbL_j.js → CreatedOnDcom-fr-fr-CEnbchMK.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CwiIOKS2.js → CreatedOnDcom-pt-br-B0QuvNvD.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BIGL3yHI.js → CreatedOnDcom-pt-pt-Cg-reIwt.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BmBek0uR.js";
+import { _ as M } from "./lib-xSt_yR6c.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/action-bar/ActionBar.mixin.d.ts

@@ -11,6 +11,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("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;

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

@@ -197,6 +197,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): void;
     }>;
     containerStore: import("pinia").Store<"brandPageContainer", import("../../stores").BrandPageContainerState, {
         brandPageContentTypes(): string[];
@@ -1021,6 +1024,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("../../../shared/template-settings/models").TemplateSettingsTemplate | undefined;
+        setupLogoChangeWatcher(): void;
     }>;
     shopSettingStore: import("pinia").Store<"shopConfig", import("../../../shared/ecommerce-settings/store/shop-settings-store").ShopConfigState, {
         productsJson(state: {

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

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

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

@@ -375,6 +375,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentPublishedSlugUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
+            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -393,6 +394,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentBrandPageUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
+            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -412,6 +414,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getBuilderLandingPageByTypeUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
+            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -428,6 +431,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             localisedBaseUrl: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").LocalisedRouteState>) => (isPreview: boolean, brandPageType: string, isDesignCom: boolean, locale: string) => string;
         getWebsiteBaseUrl: () => (isDesignCom: boolean) => "https://www.design.com" | "https://www.brandcrowd.com";
+        getTemplatePreviewUrl: (state: {
+            baseFabricRenderDomain: string;
+            baseBrandPageDomain: string;
+            baseTemplatePreviewDomain: string;
+            upgradeSubscriptionUrlPath: string;
+            reactivationUrlPath: string;
+            backToWebsiteManageUrlPath: string;
+            manageWebsiteDesignsUrlPath: string;
+            createNewDesignUrlPath: string;
+            termsOfUseUrlPath: string;
+            websiteBuilderUrlPath: string;
+            digitalBusinessCardBuilderUrlPath: string;
+            linkInBioBuilderUrlPath: string;
+            brandPageEditorUrlPath: string;
+            brandSiteEditorUrlPath: string;
+            brandContactEditorUrlPath: string;
+            logoEditUrlPath: string;
+            localisedBaseUrl: string;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").LocalisedRouteState>) => (templateId: string, logoDraftToken: string, deviceType: "desktop" | "mobile", contentKey?: string | undefined, userToken?: string | undefined, runtimeEnvironment?: string | undefined, isAiTemplate?: boolean | undefined) => string;
     }, {
         initialise(payload: any): void;
     }>;

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,242 @@ 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>;
+    isAdmin: import("vue").ComputedRef<boolean>;
+    userToken: import("vue").ComputedRef<string | undefined>;
+    isBrandSite: import("vue").ComputedRef<boolean>;
+    selectedTab: import("vue").ComputedRef<string>;
+    brandPageMakerUserStore: import("pinia").Store<"brandPageMakerUser", import("../../stores").UserState, {}, {
+        setEmailAddress(payload: string): void;
+        setFeatures(payload: Partial<import("../../../constants/ui").UIUserFeatures>): void;
+        setHasBrandPagePremiumSubscription(payload: boolean): void;
+        setIsAdmin(payload: {
+            isAdmin: boolean;
+        }): void;
+        setBrandPageCommissionPercentage(payload: number): void;
+        setUserToken(payload: {
+            userToken: string;
+        }): 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>;
+    }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;
@@ -194,10 +432,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
     cssVariablesStyle(): Record<string, string>;
+    previewImageUrl(): string;
 }, {
     onOverlayClicked(): void;
     onResize(): void;
     onSetPreviewStyles(styles: BrandPageCssStyle): void;
+    onImageError(): void;
+    onImageLoad(): void;
+    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,9 +2,11 @@ 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, useBrandPageMakerUserStore, } from '../../stores';
+import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import { applyLogoImageBase64UrlToBrandPageTemplateModel, applyLogoImageToBrandPageTemplateModel, applyLogoTemplateImageToBrandPageTemplateModel, } from '../../../brand-page/utils/logo.util';
 import { useVideoStore } from '../../../lib';
 const DEBOUNCE_IN_MS = 250;
@@ -12,8 +14,19 @@ export default defineComponent({
     emits: ['template-selected'],
     setup() {
         const brandPageMakerStore = useBrandPageMakerStore();
+        const brandPageContainerStore = useBrandPageContainerStore();
+        const brandPageMakerUserStore = useBrandPageMakerUserStore();
+        const templateSettingsStore = useUiTemplateSettingsStore();
         return {
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
+            isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
+            runtimeEnvironment: computed(() => brandPageContainerStore.runtimeEnvironment),
+            isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
+            userToken: computed(() => brandPageMakerUserStore.userToken),
+            isBrandSite: computed(() => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite),
+            selectedTab: computed(() => templateSettingsStore.selectedTab.key),
+            brandPageMakerUserStore,
+            brandPageContainerStore,
             brandPageMakerStore,
         };
     },
@@ -73,6 +86,8 @@ export default defineComponent({
             renderWidth: 400,
             rootStyles: {},
             viewModel: undefined,
+            imageLoadError: false,
+            imageLoading: true,
         };
         return data;
     },
@@ -147,16 +162,44 @@ export default defineComponent({
             });
             return cssVariables;
         },
+        previewImageUrl() {
+            let previewImageUrl = this.template.previewImageUrl;
+            if (!previewImageUrl) {
+                return '';
+            }
+            if (this.selectedTab === TEMPLATE_TABS.AI &&
+                this.template.contentKey &&
+                this.userToken) {
+                previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+            }
+            return previewImageUrl;
+        },
     },
     watch: {
+        template() {
+            if (this.isAdmin || this.isPrePurchase) {
+                this.updateViewModel();
+            }
+            else {
+                // Reset loading state when template changes for image-based previews
+                this.imageLoading = true;
+                this.imageLoadError = false;
+            }
+        },
         logoTheme: {
             handler() {
-                this.updateViewModel();
+                if (this.isAdmin || this.isPrePurchase) {
+                    this.updateViewModel();
+                }
             },
             deep: true,
         },
-        template() {
-            this.updateViewModel();
+        previewImageUrl() {
+            // Reset loading state whenever the preview URL changes
+            if (!this.isAdmin && !this.isPrePurchase) {
+                this.imageLoading = true;
+                this.imageLoadError = false;
+            }
         },
     },
     created() {
@@ -197,7 +240,24 @@ export default defineComponent({
         onSetPreviewStyles(styles) {
             this.rootStyles = styles;
         },
+        onImageError() {
+            this.imageLoadError = true;
+            this.imageLoading = false;
+        },
+        onImageLoad() {
+            this.imageLoadError = false;
+            this.imageLoading = false;
+        },
+        regeneratePreview() {
+            this.imageLoadError = false;
+            this.imageLoading = true;
+            this.$forceUpdate();
+        },
         async updateViewModel(forceUpdate = true) {
+            // Only update view model for admin or pre-purchase mode
+            if (!this.isAdmin && !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,21 @@ 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?.brandPageModel) {
+                console.error('Failed to fetch template brandPageModel');
+                return;
+            }
             this.isApplyingTemplate = true;
             let brandPageModel = cloneDeep(template.brandPageModel);
             // Apply selected logo image to logo contents