@designcrowd/library.brand-page 6.1.2 → 6.1.3-ast-preview-1

package/lib/src/{CreatedOnBrandCrowd-de-de-CU9qFyWP.js → CreatedOnBrandCrowd-de-de-LAQWIjFQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Yjpb7jdP.js → CreatedOnBrandCrowd-en-us-BLlybO-4.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-D2WZ8nVO.js → CreatedOnBrandCrowd-es-es-YDYQpCYc.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-i3ikf-KU.js → CreatedOnBrandCrowd-fr-ca-CIPj4sXQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-i3ikf-KU.js → CreatedOnBrandCrowd-fr-fr-CIPj4sXQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-pjIejWpt.js → CreatedOnBrandCrowd-pt-br-CwnM-eiJ.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-pjIejWpt.js → CreatedOnBrandCrowd-pt-pt-CwnM-eiJ.js}

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

package/lib/src/{CreatedOnDcom-de-de-DpKoYjkj.js → CreatedOnDcom-de-de-CUNm6nv8.js}

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

package/lib/src/{CreatedOnDcom-en-us-CTGKfegI.js → CreatedOnDcom-en-us-DfnAE5UJ.js}

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

package/lib/src/{CreatedOnDcom-es-es-BjeZz5zs.js → CreatedOnDcom-es-es-DBjpJLDG.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CrtEoLCA.js → CreatedOnDcom-fr-ca-s1hWKboZ.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-QFHt16jZ.js → CreatedOnDcom-fr-fr-C-JFVNVD.js}

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

package/lib/src/{CreatedOnDcom-pt-br-D2dgmjtV.js → CreatedOnDcom-pt-br-E1ibQjWA.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-ZSCFPLEN.js → CreatedOnDcom-pt-pt-DGmy_GoR.js}

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

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -37,6 +37,8 @@ export interface AbTestResult {
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
     bp_5245_ai_website_assistant?: AbTestResult;
+    bp_5873_live_preview_prepurchase?: AbTestResult;
+    bp_5873_live_preview_postpurchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -25,6 +25,11 @@ export const AB_TEST_FLAG = {
 const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
     BP_5245_AI_WEBSITE_ASSISTANT: 'bc-bp-5245-ai-website-assistant-postpurchase',
+    // Two separate live-preview experiments — bc-net sends only the one for the
+    // current purchase state, and a user's value on each side is independent
+    // (BP-5873). Keys must match `CampaignNames.LivePreview*Test` in bc-net.
+    BP_5873_LIVE_PREVIEW_PREPURCHASE: 'bc-bp-5873-live-preview-prepurchase',
+    BP_5873_LIVE_PREVIEW_POSTPURCHASE: 'bc-bp-5873-live-preview-postpurchase',
 };
 export const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -50,5 +55,12 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT]) {
         abTests.bp_5245_ai_website_assistant = getValueType(AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT, abtestKeyValues[AB_TEST_KEYS.BP_5245_AI_WEBSITE_ASSISTANT]);
     }
+    // AB Test for BP-5873 - Live preview (pre- and post-purchase run separately)
+    if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]) {
+        abTests.bp_5873_live_preview_prepurchase = getValueType(AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]);
+    }
+    if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]) {
+        abTests.bp_5873_live_preview_postpurchase = getValueType(AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]);
+    }
     return abTests;
 };

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

@@ -1,5 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
     isAdmin: import("vue").ComputedRef<boolean>;
+    isLivePreviewEnabled: import("vue").ComputedRef<boolean>;
     isSaving: import("vue").ComputedRef<boolean>;
     isPublished: import("vue").ComputedRef<boolean>;
     isPublishButtonEnabled: import("vue").ComputedRef<boolean>;
@@ -159,6 +160,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
 }, {}, {}, {
     saveBrandPage(): void;
+    previewBrandPage(): void;
     saveAndPublishBrandPage(isActionBar: boolean): void;
     createTeamCards(isTopNav: boolean): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "create-team-cards"[], "create-team-cards", import("vue").PublicProps, Readonly<{}> & Readonly<{

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

@@ -1,5 +1,5 @@
 import { EVENTS } from '../../../constants/brand-page-maker';
-import { useBrandPageMakerUserStore, useBrandPageMakerStore, } from '@brand-page-maker/stores';
+import { useBrandPageMakerUserStore, useBrandPageMakerStore, useBrandPageContainerStore, } from '@brand-page-maker/stores';
 import { computed, defineComponent } from 'vue';
 import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
@@ -8,8 +8,18 @@ export default defineComponent({
     setup() {
         const userStore = useBrandPageMakerUserStore();
         const brandPageMakerStore = useBrandPageMakerStore();
+        const containerStore = useBrandPageContainerStore();
         return {
             isAdmin: computed(() => userStore.isAdmin),
+            // BP-5873: the Preview button is behind an AB test, and pre/post purchase are
+            // two separate experiments. Pick the one for the current purchase state — a
+            // user's value on the other side is independent and must not leak across.
+            isLivePreviewEnabled: computed(() => {
+                const experiment = containerStore.isPrePurchase
+                    ? containerStore.abTests.bp_5873_live_preview_prepurchase
+                    : containerStore.abTests.bp_5873_live_preview_postpurchase;
+                return !!experiment?.isVariation;
+            }),
             isSaving: computed(() => brandPageMakerStore.isSaving),
             isPublished: computed(() => brandPageMakerStore.isPublished),
             isPublishButtonEnabled: computed(() => brandPageMakerStore.isPublishButtonEnabled),
@@ -22,6 +32,9 @@ export default defineComponent({
         saveBrandPage() {
             this.$emit(EVENTS.Save);
         },
+        previewBrandPage() {
+            this.$emit(EVENTS.Preview);
+        },
         saveAndPublishBrandPage(isActionBar) {
             if (!this.isPublishButtonEnabled) {
                 return;

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

@@ -297,11 +297,27 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
             requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -375,11 +391,121 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
             requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
+        } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
+        isAnyModalVisible: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            templateTypeName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: import("@brand-page-maker/constants").CustomDomainStatus;
+                dnsConfigurationStatus: import("@brand-page-maker/constants").DnsConfigurationStatus;
+                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: {
+                bp_3926_freemium_watermark?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5245_ai_website_assistant?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+            };
+            isSubsequentPublish: boolean;
+            isContextualUpgradeModalVisible: boolean;
+            contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
+            requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../stores/brandpage-container").InitialisePayload): void;
@@ -393,6 +519,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setContextualUpgradeType(payload: any): void;
         setIsSaving(payload: any): void;
         setIsUpgradeModalVisible(payload: any): void;
+        setIsHostModalVisible(payload: {
+            isVisible: boolean;
+        }): void;
         setPublishErrorMessage(payload: any): void;
         setTriggerSaveSuccessMessage(payload: any): void;
         setSlug(payload: any): void;
@@ -440,6 +569,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         saveBrandPage(payload?: {
             isPublish?: boolean;
             eventButtonLocation?: string;
+            saveOnly?: boolean;
         }): Promise<false | {
             saved: boolean;
             canPublish: boolean;
@@ -1311,6 +1441,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     mounted: boolean;
     debounceOnResize: DebounceHandle | undefined;
     showSaveSuccessMessage: boolean;
+    isPreviewModalVisible: boolean;
 }, {
     previewContainer(): any;
     previewContent(): any;
@@ -1324,7 +1455,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     handleSwitchViewport(viewport: ViewportsType): void;
     saveBrandPage(eventButtonLocation: string | undefined): void;
     saveAndPublishBrandPage(isActionBar: any): void;
+    onPreviewPublish(): void;
     onBackBrandPage(): void;
+    onPreview(): void;
+    onClosePreview(): void;
     onChangeTemplateConfirmModalCancel(): void;
     onChangeTemplateConfirmModalConfirm(): void;
     onVideoPlayToggle(): void;

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

@@ -109,6 +109,7 @@ export default defineComponent({
             mounted: false,
             debounceOnResize: undefined,
             showSaveSuccessMessage: false,
+            isPreviewModalVisible: false,
         };
     },
     computed: {
@@ -207,6 +208,21 @@ export default defineComponent({
         }
         this.$emit(EVENTS.Initialised);
     },
+    watch: {
+        // Pre-purchase only: the host's save has produced the signed link, so the frame
+        // can open with it already in hand — no waiting inside the modal. No link means
+        // the save failed or the customer was sent to register, and the editor has
+        // already said so, so nothing opens.
+        'containerStore.livePreviewUrl'(livePreviewUrl) {
+            if (!livePreviewUrl ||
+                !this.containerStore.isPrePurchase ||
+                this.isPreviewModalVisible) {
+                return;
+            }
+            this.isPreviewModalVisible = true;
+            this.$emit(EVENTS.Preview);
+        },
+    },
     mounted() {
         if (window) {
             window.removeEventListener('resize', this.onResizeWithDebounce);
@@ -317,9 +333,43 @@ export default defineComponent({
                     : UPGRADE_CTA_LOCATIONS.EDITOR_PUBLISH_TOP,
             });
         },
+        onPreviewPublish() {
+            // Same host publish flow as the editor button, tracked as its own location.
+            this.$emit(EVENTS.Publish, {
+                eventButtonLocation: UPGRADE_CTA_LOCATIONS.EDITOR_PREVIEW_PUBLISH,
+            });
+        },
         onBackBrandPage() {
             this.$emit(EVENTS.Back);
         },
+        onPreview() {
+            // The preview frames a SAVED, owned draft. A signed-out customer can't have
+            // one, and the save needs an owner — so sign-in comes first, via the host's
+            // Save Progress flow.
+            if (!this.isUserAuthenticated) {
+                this.$emit(EVENTS.LivePreviewClicked);
+                return;
+            }
+            // Pre-purchase drafts are saved by the HOST (`prepurchase/upsert`), never by
+            // the maker store. Ask for that save and stay closed until it hands back a
+            // preview URL (see the `livePreviewUrl` watcher). Opening first would mean
+            // waiting inside the modal on a save it cannot see the outcome of, which is
+            // how the loader used to hang forever when a save failed or asked the customer
+            // to register (BP-5870). A failed save now surfaces the editor's own error and
+            // nothing opens.
+            if (this.containerStore.isPrePurchase) {
+                this.containerStore.livePreviewUrl = undefined;
+                this.$emit(EVENTS.LivePreviewClicked);
+                return;
+            }
+            // Post-purchase saves through the maker store, which reports its own result —
+            // so the modal can open first and show its loader while that runs.
+            this.isPreviewModalVisible = true;
+            this.$emit(EVENTS.Preview);
+        },
+        onClosePreview() {
+            this.isPreviewModalVisible = false;
+        },
         onChangeTemplateConfirmModalCancel() {
             this.brandPageMakerStore.onChangeTemplateConfirmModalCancel();
         },

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

@@ -740,11 +740,27 @@ declare const _default: import("vue").DefineComponent<{}, {
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
             requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -818,11 +834,121 @@ declare const _default: import("vue").DefineComponent<{}, {
                     isVariation: boolean;
                     isExcluded: boolean;
                 } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
             };
             isSubsequentPublish: boolean;
             isContextualUpgradeModalVisible: boolean;
             contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
             requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
+        } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
+        isAnyModalVisible: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            templateTypeName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: import("@brand-page-maker/constants").CustomDomainStatus;
+                dnsConfigurationStatus: import("@brand-page-maker/constants").DnsConfigurationStatus;
+                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: {
+                bp_3926_freemium_watermark?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5245_ai_website_assistant?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_prepurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+                bp_5873_live_preview_postpurchase?: {
+                    key: string;
+                    value: string;
+                    isControl: boolean;
+                    isVariation: boolean;
+                    isExcluded: boolean;
+                } | undefined;
+            };
+            isSubsequentPublish: boolean;
+            isContextualUpgradeModalVisible: boolean;
+            contextualUpgradeType: import("@brand-page-maker/stores").WebsiteContextUpgradeType | undefined;
+            requestVerificationToken?: string | undefined;
+            isHostModalVisible?: boolean | undefined;
+            livePreviewUrl?: string | undefined;
         } & import("pinia").PiniaCustomStateProperties<import("@brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         initialise(payload: import("../../stores/brandpage-container").InitialisePayload): void;
@@ -836,6 +962,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         setContextualUpgradeType(payload: any): void;
         setIsSaving(payload: any): void;
         setIsUpgradeModalVisible(payload: any): void;
+        setIsHostModalVisible(payload: {
+            isVisible: boolean;
+        }): void;
         setPublishErrorMessage(payload: any): void;
         setTriggerSaveSuccessMessage(payload: any): void;
         setSlug(payload: any): void;
@@ -883,6 +1012,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         saveBrandPage(payload?: {
             isPublish?: boolean;
             eventButtonLocation?: string;
+            saveOnly?: boolean;
         }): Promise<false | {
             saved: boolean;
             canPublish: boolean;

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

@@ -37,6 +37,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {}, {}, {
     saveBrandPage(): void;
     saveAndPublishBrandPage(): void;
+    previewBrandPage(): void;
     handleBackClick(): void;
     onCreateTeamCards(payload: {
         cta_location: string;

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

@@ -47,6 +47,9 @@ export default defineComponent({
         saveAndPublishBrandPage() {
             this.$emit(EVENTS.Publish);
         },
+        previewBrandPage() {
+            this.$emit(EVENTS.Preview);
+        },
         handleBackClick() {
             if (!this.backUrl) {
                 this.$emit(EVENTS.Back);