@designcrowd/library.brand-page 5.15.21 → 5.15.24-ast-previews-2

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

@@ -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,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     selectedTemplateId: import("vue").ComputedRef<string | false>;
+    isPrePurchase: import("vue").ComputedRef<boolean>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;
@@ -72,6 +75,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         brandPageTemplate(): any;
         brandPageTitle(): string;
         brandPageViewModel(): BrandPageViewModel;
+        gettyVideoIds(): string[];
         isInteractivePreviewEnabled(): boolean;
         isProduction(): boolean;
         isPublishButtonEnabled(): boolean;
@@ -186,6 +190,224 @@ 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;
@@ -193,10 +415,16 @@ 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;
+    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

@@ -4,16 +4,20 @@ import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageMode
 import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 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';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
     emits: ['template-selected'],
     setup() {
         const brandPageMakerStore = useBrandPageMakerStore();
+        const brandPageContainerStore = useBrandPageContainerStore();
         return {
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
+            isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
             brandPageMakerStore,
+            brandPageContainerStore,
         };
     },
     props: {
@@ -72,6 +76,8 @@ export default defineComponent({
             renderWidth: 400,
             rootStyles: {},
             viewModel: undefined,
+            imageLoadError: false,
+            imageLoading: true,
         };
         return data;
     },
@@ -100,6 +106,7 @@ export default defineComponent({
                 options: {
                     disableNavigationSideMenu: true,
                     mediaSizes: MEDIA_SIZES.sizeThumb,
+                    renderVideoAsImage: true,
                 },
                 isCapturingPreview: false,
             };
@@ -145,16 +152,40 @@ export default defineComponent({
             });
             return cssVariables;
         },
+        previewImageUrl() {
+            return this.generatePreviewImageUrl();
+        },
     },
     watch: {
-        logoTheme: {
-            handler() {
+        template() {
+            if (this.isPrePurchase) {
                 this.updateViewModel();
+            }
+        },
+        logoImage: {
+            handler() {
+                if (this.isPrePurchase) {
+                    this.regeneratePreview();
+                }
             },
             deep: true,
         },
-        template() {
-            this.updateViewModel();
+        logoTemplateImage: {
+            handler() {
+                // Only regenerate preview in pre-purchase mode
+                if (this.isPrePurchase) {
+                    this.regeneratePreview();
+                }
+            },
+            deep: true,
+        },
+        logoTheme: {
+            handler() {
+                if (this.isPrePurchase) {
+                    this.updateViewModel();
+                }
+            },
+            deep: true,
         },
     },
     created() {
@@ -195,7 +226,39 @@ 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';
+            const envPrefix = window.location.hostname.split('.')[0];
+            return `https://preview-${envPrefix}${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) {
                 model = applyLogoImageBase64UrlToBrandPageTemplateModel(model, this.logoImageBase64Url);
@@ -211,7 +274,10 @@ export default defineComponent({
                 model = result.model;
             }
             model = applyLogoThemeToBrandPageModel(this.logoTheme, model).model;
-            this.viewModel = await getBrandPageViewModelFromBrandPageModel(model, undefined, false);
+            this.viewModel = await getBrandPageViewModelFromBrandPageModel(model, undefined, false, {
+                useOldLogoRenderSize: false,
+                getVideoUrls: videoStore.getS3VideoUrlsForToken,
+            });
             if (forceUpdate) {
                 this.$forceUpdate();
             }

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1,4 +1,4 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../brand-page';
+import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '../../brand-page';
 import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '../../brand-page';
@@ -225,11 +225,12 @@ const shopReplaceImageSettings = () => ({
     desiredHeight: undefined,
     desiredWidth: undefined,
 });
+// TOOD(jyao): This should be reworked to bannerSectionReplaceMediaSettings
 const bannerSectionReplaceImageSettings = () => ({
     tabs: ['MY_UPLOADS', 'IMAGE_LIBRARY', 'VIDEO_LIBRARY', 'SHAPE_LIBRARY'],
-    buttonTitleAdd: contentSettingsTr(`addImageButtonTitle`),
-    titleAdd: contentSettingsTr(`addImageHeaderTitle`),
-    titleReplace: contentSettingsTr(`imageReplaceTitle`),
+    buttonTitleAdd: contentSettingsTr(`addMediaTitle`),
+    titleAdd: contentSettingsTr(`addMediaTitle`),
+    titleReplace: contentSettingsTr(`replaceMediaTitle`),
     contentMediaFieldName: MediaFieldNames.avatarImageUrl,
     openByDefault: false,
     mediaType: MEDIA_TYPES.image,
@@ -238,12 +239,28 @@ const bannerSectionReplaceImageSettings = () => ({
     desiredHeight: undefined,
     desiredWidth: undefined,
     setContentMedia: (content, value) => {
-        content.imageUrl = value.imageUrl;
-        content.mediaType = MEDIA_TYPES.image;
-        if (isValidSvgUrl(content.imageUrl)) {
-            content.size = DEFAULT_SHAPE_SIZE;
-            content.mediaType = MEDIA_TYPES.shape;
-            content.colorReplacements = value.colorReplacements || [];
+        if (value.media && value.media.type === 'getty-video') {
+            const gettyMedia = value.media;
+            content.media = new GettyVideoMedia({
+                gettyToken: gettyMedia.token,
+                gettyAssetId: gettyMedia.assetId,
+                mimeType: gettyMedia.mimeType,
+                settings: {
+                    autoPlay: gettyMedia.autoPlay,
+                },
+            });
+            content.imageUrl = '';
+        }
+        else {
+            content.imageUrl = value.imageUrl;
+            content.mediaType = MEDIA_TYPES.image;
+            // Note(jyao): Temporarily here until we move all images/shapes to media
+            content.media = undefined;
+            if (isValidSvgUrl(content.imageUrl)) {
+                content.size = DEFAULT_SHAPE_SIZE;
+                content.mediaType = MEDIA_TYPES.shape;
+                content.colorReplacements = value.colorReplacements || [];
+            }
         }
     },
 });
@@ -1836,7 +1853,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG = () => ({
         imageUrl: {
             type: 'image',
             replaceImageSettings: bannerSectionReplaceImageSettings(),
-            title: contentSettingsTr(`imageTitle`),
+            title: contentSettingsTr(`media`),
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
         },
         imageUrlOverride: {

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

@@ -47,12 +47,24 @@ export interface BrandPageContainerState {
     abTests: Record<string, string>;
     isSubsequentPublish: boolean;
 }
+export type GettyVideoEditorViewModelResponse = {
+    assetId: string;
+    token: string;
+    isGettyAsset: string;
+    videoPreviewAsset: {
+        uri: string;
+    };
+    imagePreviewAsset: {
+        uri: string;
+    };
+};
 export type InitialisePayload = Omit<BrandPageContainerState, 'customDomain' | 'customDomainConfig'> & {
     logoDraftToken?: string;
     brandPageCustomDomain?: CustomDomainModel;
     isBrandPageCustomDomainEnabled: boolean;
     logoTemplateAsset: LogoTemplateAsset | undefined;
     logoDraftAssets: LogoDraftAsset[];
+    gettyVideos: GettyVideoEditorViewModelResponse[];
 };
 export declare const BRANDPAGE_STATUS: Readonly<{
     Published: "Published";

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

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import brandPageClient from '../../../clients/brand-page-client';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useLogoStore, useUiStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useLogoStore, useUiStore, useVideoStore, } from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
 import { BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, getAbTestResults, getValueType, } from '../../../brand-page';
 import { isLogoContent } from '../../../brand-page/utils';
@@ -11,6 +11,7 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../composables/useEventTracker';
 import { navigationTr } from '../../../composables/useTranslate';
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
+import { findValuesByKey } from '../../../helpers/ts.helper';
 export const BRANDPAGE_STATUS = Object.freeze({
     Published: 'Published',
     Unpublished: 'Unpublished',
@@ -67,6 +68,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     actions: {
         initialise(payload) {
             const localisedRouteStore = useLocalisedRouteStore();
+            const videoStore = useVideoStore();
             if (process.env.NODE_ENV !== 'production') {
                 if (typeof localisedRouteStore.baseBrandPageDomain !== 'string') {
                     console.error('brandPageBaseUrl should not be undefined');
@@ -128,6 +130,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             if (payload.logoDraftToken) {
                 uiStore.setLogoDraftToken({ logoDraftToken: payload.logoDraftToken });
             }
+            payload?.gettyVideos?.forEach((video) => videoStore.setVideoUrlsWithToken(video.token, video.videoPreviewAsset.uri, video.imagePreviewAsset.uri, video.assetId));
         },
         setDesignTemplateToken(payload) {
             this.designTemplateToken = payload.designTemplateToken;
@@ -241,11 +244,13 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 return false;
             }
             this.setIsPublishing({ isPublishing: true });
+            const gettyVideoIds = brandPageMakerStore.gettyVideoIds;
             try {
                 const response = await brandPageClient.setBrandPageSlugAsync(brandPageMakerStore.brandPageType, this.designDraftToken, {
                     slug,
                     shouldPublish,
                     brandPageContentTypes: this.brandPageContentTypes,
+                    gettyVideoIds,
                 });
                 if (!response) {
                     throw new Error('Failed to set brand page slug');
@@ -341,11 +346,13 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     return;
                 }
                 this.setBrandPageCustomDomain({ customDomain: customDomainResponse });
+                const gettyVideoIds = brandPageMakerStore.gettyVideoIds;
                 if (customDomainResponse) {
                     const response = await brandPageClient.setBrandPageSlugAsync(brandPageMakerStore.brandPageType, this.designDraftToken, {
                         slug: bpSlug,
                         shouldPublish,
                         brandPageContentTypes: this.brandPageContentTypes,
+                        gettyVideoIds,
                     });
                     if (!response) {
                         throw new Error('Failed to set brand page slug');
@@ -519,6 +526,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     .map((x) => x.logoImage.logoDraftToken)
                     .filter((x) => !!x));
             }
+            const gettyAssetIds = findValuesByKey(brandPageData, 'gettyAssetId');
             return {
                 designTemplateToken: this.designTemplateToken,
                 logoDraftToken: uiStore.logoDraftToken, // TODO: remove this property after the release as second release for smooth release transition use below `logoDraftTokens`
@@ -529,6 +537,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     : undefined,
                 brandPageContentTypes: this.brandPageContentTypes,
                 shouldPublish: this.isPublished,
+                gettyAssetIds,
                 ...prepurchaseExportData,
             };
         },
@@ -662,11 +671,19 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             if (!userStore.isAdmin) {
                 throw new Error('saveTemplate is not allowed in non admin mode');
             }
-            const data = JSON.stringify(brandPageMakerStore.brandPageTemplate);
+            const dataObject = brandPageMakerStore.brandPageTemplate;
+            const data = JSON.stringify(dataObject);
             if (typeof window?.parent?.saveTemplate !== 'function') {
                 throw new Error('required saveTemplate function is undefined');
             }
-            const success = await window.parent.saveTemplate(!this.designTemplateToken, data);
+            const gettyAssetIds = findValuesByKey(dataObject, 'gettyAssetId');
+            const exportedOptions = {
+                designAttributes: {
+                    gettyAssetIds: gettyAssetIds,
+                    hasGettyVideos: gettyAssetIds.length > 0,
+                },
+            };
+            const success = await window.parent.saveTemplate(!this.designTemplateToken, data, exportedOptions);
             if (success) {
                 await brandPageMakerStore.enqueueSaveSuccessMessage({
                     description: 'Template saved',

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

@@ -94,6 +94,7 @@ export declare const useBrandPageMakerStore: import("pinia").StoreDefinition<"br
     brandPageTemplate(): BrandPageData;
     brandPageTitle(): string;
     brandPageViewModel(): BrandPageViewModel;
+    gettyVideoIds(): string[];
     isInteractivePreviewEnabled(): boolean;
     isProduction(): boolean;
     isPublishButtonEnabled(): boolean;