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

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,243 @@ 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>;
+    renderAsImage: import("vue").ComputedRef<boolean>;
+    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 +433,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,20 @@ 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),
+            renderAsImage: computed(() => templateSettingsStore.renderAsImage),
+            brandPageMakerUserStore,
+            brandPageContainerStore,
             brandPageMakerStore,
         };
     },
@@ -73,6 +87,8 @@ export default defineComponent({
             renderWidth: 400,
             rootStyles: {},
             viewModel: undefined,
+            imageLoadError: false,
+            imageLoading: true,
         };
         return data;
     },
@@ -147,16 +163,47 @@ 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}`;
+            }
+            if (this.logoImage?.logoVariation !== undefined) {
+                previewImageUrl += `&logoVariation=${this.logoImage.logoVariation}`;
+            }
+            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 +244,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

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

@@ -6,6 +6,7 @@ export interface UserState extends UIUserState {
     emailAddress: string;
     hasBrandPagePremiumSubscription: boolean;
     brandPageCommissionPercentage: number | undefined;
+    userToken?: string;
 }
 export declare const DEFAULT_MAX_NUM_OF_PAGES = 2;
 export declare const UNLIMITED_MAX_NUM_OF_PAGES = -1;
@@ -17,4 +18,7 @@ export declare const useBrandPageMakerUserStore: import("pinia").StoreDefinition
         isAdmin: boolean;
     }): void;
     setBrandPageCommissionPercentage(payload: number): void;
+    setUserToken(payload: {
+        userToken: string;
+    }): void;
 }>;

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

@@ -24,6 +24,7 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
         hasBrandPagePremiumSubscription: false,
         brandPageCommissionPercentage: undefined,
         isAdmin: false, // this is currently used as way to identify admin maker mode
+        userToken: undefined,
     }),
     actions: {
         setEmailAddress(payload) {
@@ -41,5 +42,8 @@ export const useBrandPageMakerUserStore = defineStore('brandPageMakerUser', {
         setBrandPageCommissionPercentage(payload) {
             this.brandPageCommissionPercentage = payload;
         },
+        setUserToken(payload) {
+            this.userToken = payload.userToken;
+        },
     },
 });