@designcrowd/library.brand-page 6.1.0 → 6.1.1-ast-preview-2

package/lib/src/{CreatedOnBrandCrowd-de-de-CW5bD06L.js → CreatedOnBrandCrowd-de-de-DbkDeR-_.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CofG4e3V.js → CreatedOnBrandCrowd-en-us-CN0o9YUM.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-XpL0-LWx.js → CreatedOnBrandCrowd-es-es-DX5GXuxd.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-dlVN3zaX.js → CreatedOnBrandCrowd-fr-ca-CA5o_w74.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-dlVN3zaX.js → CreatedOnBrandCrowd-fr-fr-CA5o_w74.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-98gqdDVF.js → CreatedOnBrandCrowd-pt-br-_1uO5jxn.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-98gqdDVF.js → CreatedOnBrandCrowd-pt-pt-_1uO5jxn.js}

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

package/lib/src/{CreatedOnDcom-de-de-Dbmlc0i1.js → CreatedOnDcom-de-de-DAPvckVD.js}

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

package/lib/src/{CreatedOnDcom-en-us-Dy9z7h1o.js → CreatedOnDcom-en-us-DT1NE0ly.js}

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

package/lib/src/{CreatedOnDcom-es-es-B3ksvNj9.js → CreatedOnDcom-es-es-C_HyK7sW.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CC9ieRzX.js → CreatedOnDcom-fr-ca-C6YuMchy.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BtnGJjF2.js → CreatedOnDcom-fr-fr-roY7f_KU.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DT4doFYO.js → CreatedOnDcom-pt-br-CTL6XIe5.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CloXyOe6.js → CreatedOnDcom-pt-pt-Dv8Rlt1U.js}

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

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { FORM_FIELD_TYPES } from '@brand-page/models';
-import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '@brand-page/utils';
+import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, isPreviewMode, } from '@brand-page/utils';
 import { isDecorativeButtonStyle } from '../../utils/button.util';
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
@@ -193,7 +193,9 @@ export default defineComponent({
         }));
     },
     mounted() {
-        if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+        if (this.context?.recaptchaSiteKey &&
+            !isPreviewMode(this.context) &&
+            this.recaptcha) {
             this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
         }
     },
@@ -203,7 +205,7 @@ export default defineComponent({
             if (this.hasFormError) {
                 return;
             }
-            if (this.isPreview || !this.context.brandPageToken) {
+            if (isPreviewMode(this.context) || !this.context.brandPageToken) {
                 if (process.env.NODE_ENV !== 'production' &&
                     !this.context.brandPageSlug) {
                     console.error('brandPageToken is not defined');

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
+import { getEmailValidationError, contentPaddingStyle as toContentPaddingStyle, isPreviewMode, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
 import { contentSettingsTr, mailingListTr, } from '@src/composables/useTranslate';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
@@ -46,7 +46,9 @@ export default defineComponent({
     },
     mounted() {
         this.show = true;
-        if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+        if (this.context?.recaptchaSiteKey &&
+            !isPreviewMode(this.context) &&
+            this.recaptcha) {
             this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
         }
     },
@@ -103,7 +105,7 @@ export default defineComponent({
         },
         isFormDisabled() {
             return (this.hasFormError ||
-                this.isPreview ||
+                isPreviewMode(this.context) ||
                 !this.brandPageToken ||
                 this.isSubmitting);
         },
@@ -125,7 +127,7 @@ export default defineComponent({
             if (this.hasFormError) {
                 return;
             }
-            if (this.isPreview || !this.brandPageToken) {
+            if (isPreviewMode(this.context) || !this.brandPageToken) {
                 return;
             }
             this.isSubmitting = true;

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>, {}, {}, {
+    isInPreviewMode(): boolean;
     containerStyle(): BrandPageCssStyle;
     socialLinksIconStyle(): BrandPageCssStyle;
     isDisplayStyleCentered(): boolean;

package/lib/src/brand-page/components/page-footer/PageFooter.mixin.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { getRenderText } from '@brand-page/utils';
+import { getRenderText, isPreviewMode } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
 export default defineComponent({
     props: {
@@ -23,6 +23,9 @@ export default defineComponent({
     },
     emits: ['on-logo-click', 'footer-container-click'],
     computed: {
+        isInPreviewMode() {
+            return isPreviewMode(this.context);
+        },
         containerStyle() {
             return this.viewModel.backgroundStyle;
         },

package/lib/src/brand-page/components/payment/Payment.mixin.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import { DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, paymentProviders, } from '../../constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
+import { isPreviewMode } from '@brand-page/utils';
 import { paymentTr } from '@src/composables/useTranslate';
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(`defaultPaymentSuccessMessage`);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
@@ -60,10 +61,10 @@ export default defineComponent({
             }
         },
         canMakePayment() {
-            return !this.context.isPreview && this.isPaymentConfigActive;
+            return !isPreviewMode(this.context) && this.isPaymentConfigActive;
         },
         showPaymentBlock() {
-            return this.context.isPreview || this.isPaymentConfigActive;
+            return isPreviewMode(this.context) || this.isPaymentConfigActive;
         },
         paymentOptions() {
             return this.paymentConfig.paymentOptions;
@@ -147,7 +148,7 @@ export default defineComponent({
             this.state = paymentConfigId
                 ? paymentState.PaymentOptionSelection
                 : paymentState.IncompleteConfig;
-            if (this.context.isPreview || !paymentConfigId) {
+            if (isPreviewMode(this.context) || !paymentConfigId) {
                 return;
             }
             try {

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -3,6 +3,7 @@ export declare const context: {
     stripePublishableKey: string;
     isTemplate: boolean;
     isPreview: boolean;
+    isLivePreview?: boolean;
     isMobile?: boolean;
     isDesignCom: boolean;
     isProduction: boolean;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -3,6 +3,7 @@ export declare const context: {
     stripePublishableKey: string;
     isTemplate: boolean;
     isPreview: boolean;
+    isLivePreview?: boolean;
     isMobile?: boolean;
     isDesignCom: boolean;
     isProduction: boolean;

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.d.ts

@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedPaymentOptionIds: string[];
     imageType: string;
 }, {
+    isInPreviewMode(): boolean;
     contentPaddingStyle(): {
         paddingTop: string;
         paddingBottom: string;

package/lib/src/brand-page/components/payment/request-payment/RequestPayment.mixin.js

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../../models';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
-import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
+import { contentPaddingStyle as toContentPaddingStyle, isPreviewMode, } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 const MAX_CUSTOM_REQUEST_CHARS = 500;
 export default defineComponent({
@@ -29,6 +29,9 @@ export default defineComponent({
         };
     },
     computed: {
+        isInPreviewMode() {
+            return isPreviewMode(this.context);
+        },
         contentPaddingStyle() {
             return toContentPaddingStyle(this.viewModel);
         },

package/lib/src/brand-page/composables/consent.composable.d.ts

@@ -4,8 +4,10 @@ export declare const useConsent: () => {
     updateConsent: import("vue").Ref<(c: ConsentType) => void, (c: ConsentType) => void>;
     featureEnabled: import("vue").Ref<boolean, boolean>;
     showConsentModal: import("vue").Ref<boolean, boolean>;
+    persist: import("vue").Ref<boolean, boolean>;
     initialise: (options: {
         featureEnabled: boolean;
+        persist?: boolean;
     }) => ConsentType;
     grant: (cb?: () => unknown) => void;
     deny: (cb?: () => unknown) => void;

package/lib/src/brand-page/composables/consent.composable.js

@@ -28,6 +28,7 @@ const store = reactive({
     consent: undefined,
     featureEnabled: false,
     showConsentModal: false,
+    persist: true,
     updateConsent(c) {
         this.consent = c;
     },
@@ -38,7 +39,8 @@ export const useConsent = () => {
             return undefined;
         }
         store.featureEnabled = options.featureEnabled;
-        store.consent = getStoredConsent();
+        store.persist = options.persist ?? true;
+        store.consent = store.persist ? getStoredConsent() : undefined;
         store.showConsentModal =
             options.featureEnabled && !accepted.value && !declined.value;
         return store.consent;
@@ -46,13 +48,17 @@ export const useConsent = () => {
     const accepted = computed(() => Boolean(store.consent && store.consent === 'granted'));
     const declined = computed(() => Boolean(store.consent && store.consent === 'denied'));
     const grant = (cb) => {
-        storeConsent('granted');
+        if (store.persist) {
+            storeConsent('granted');
+        }
         store.updateConsent('granted');
         store.showConsentModal = store.featureEnabled && !accepted.value;
         cb && cb();
     };
     const deny = (cb) => {
-        storeConsent('denied');
+        if (store.persist) {
+            storeConsent('denied');
+        }
         store.updateConsent('denied');
         store.showConsentModal = false;
         cb && cb();

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";
@@ -47,6 +49,13 @@ export type MediaSizes = keyof typeof MEDIA_SIZES;
 export interface BrandPageContext {
     isTemplate: boolean;
     isPreview: boolean;
+    /**
+     * Rendered as a customer-facing live preview (safe/inert actions, no
+     * watermark, ephemeral consent). Distinct from the editor `isPreview`, which
+     * also drives editor/thumbnail-only behaviour. Use `isPreviewMode()` to gate
+     * inert-action behaviour that applies to both.
+     */
+    isLivePreview?: boolean;
     /** @deprecated should be used on maker only */
     isMobile?: boolean;
     isDesignCom: boolean;

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/utils/context.util.d.ts

@@ -1,2 +1,10 @@
 import type { BrandPageContext } from '../models';
 export declare const getSlugFromContext: (context: BrandPageContext) => string;
+/**
+ * True when interactive actions must be inert and payment/shop blocks always
+ * shown — i.e. the render is a preview, not a live site. Covers both the
+ * editor preview (`isPreview`) and the customer live-preview
+ * (`isLivePreview`). Editor-only artifacts (cursor, nav interception,
+ * placeholders) must keep reading `context.isPreview` directly.
+ */
+export declare const isPreviewMode: (context: BrandPageContext) => boolean;

package/lib/src/brand-page/utils/context.util.js

@@ -4,3 +4,11 @@ export const getSlugFromContext = (context) => {
     }
     return context.brandPageSlug;
 };
+/**
+ * True when interactive actions must be inert and payment/shop blocks always
+ * shown — i.e. the render is a preview, not a live site. Covers both the
+ * editor preview (`isPreview`) and the customer live-preview
+ * (`isLivePreview`). Editor-only artifacts (cursor, nav interception,
+ * placeholders) must keep reading `context.isPreview` directly.
+ */
+export const isPreviewMode = (context) => !!(context.isPreview || context.isLivePreview);

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;