@designcrowd/library.brand-page 6.1.3 → 6.1.4-ast-prepurchase

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -17,7 +17,6 @@
       />
       <SocialLinksItems
         :id="id"
-        :is-preview="isPreview"
         :container-style="iconContainerStyle"
         :icon-style="iconStyle"
         :links="links"
@@ -33,10 +32,7 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
 import type { BrandPageContext, LinksItem } from '@brand-page/models';
-import {
-  contentPaddingStyle as toContentPaddingStyle,
-  isPreviewMode,
-} from '@brand-page/utils';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -89,10 +85,6 @@ const id = computed((): string => {
   return props.viewModel.id;
 });
 
-const isPreview = computed((): boolean => {
-  return isPreviewMode(props.context);
-});
-
 const links = computed((): LinksItem[] => {
   return props.viewModel.links;
 });

package/src/brand-page/components/social-links/SocialLinks.vue.test.ts

@@ -115,7 +115,6 @@ describe('Social Links', () => {
         id: faker.datatype.uuid(),
         containerStyle: {},
         iconStyle: {},
-        isPreview: false,
         links: [
           {
             id: 'social-link-facebook',
@@ -137,16 +136,13 @@ describe('Social Links', () => {
     expect(anchor.attributes()['href']).toBe(undefined);
   });
 
-  test('href attribute should match url', () => {
-    const context = createTestBrandPageContext();
-
-    const wrapper = shallowMount(SocialLinksItems, {
+  const mountWithContext = (context: BrandPageContext) =>
+    shallowMount(SocialLinksItems, {
       propsData: {
         context,
         id: faker.datatype.uuid(),
         containerStyle: {},
         iconStyle: {},
-        isPreview: false,
         links: [
           {
             id: 'social-link-facebook',
@@ -163,8 +159,32 @@ describe('Social Links', () => {
       },
     });
 
-    const anchor = wrapper.find('.c-social-links__links-container li a');
+  const hrefOf = (wrapper: ReturnType<typeof shallowMount>) =>
+    wrapper.find('.c-social-links__links-container li a').attributes()['href'];
+
+  // Published site: no preview flags — the real href renders. (unchanged)
+  test('href attribute should match url', () => {
+    expect(hrefOf(mountWithContext(createTestBrandPageContext()))).toBe(
+      'https://www.fb.com',
+    );
+  });
+
+  // Editor/maker canvas: href stripped so a designer can't click out. (unchanged)
+  test('editor preview (context.isPreview) strips the href', () => {
+    const context = { ...createTestBrandPageContext(), isPreview: true };
+
+    expect(hrefOf(mountWithContext(context))).toBe(undefined);
+  });
+
+  // Customer live preview: href now RENDERS (BP-5959) so internal links resolve
+  // in-frame; external ones are blocked by the web-renderer preview gate instead.
+  test('live preview (context.isLivePreview) renders the href', () => {
+    const context = {
+      ...createTestBrandPageContext(),
+      isPreview: false,
+      isLivePreview: true,
+    };
 
-    expect(anchor.attributes()['href']).toBe('https://www.fb.com');
+    expect(hrefOf(mountWithContext(context))).toBe('https://www.fb.com');
   });
 });

package/src/brand-page/components/social-links/SocialLinksItems.vue

@@ -45,7 +45,6 @@ interface Props {
   id: string;
   containerStyle: BrandPageCssStyle;
   iconStyle: BrandPageCssStyle;
-  isPreview: boolean;
   links: LinksItem[];
   context: BrandPageContext;
   contentIndex: number | undefined;
@@ -62,7 +61,12 @@ const isUrl = computed(() => {
 });
 
 const getValidInput = (value: string): string | undefined => {
-  if (props.isPreview || !value) return undefined;
+  // Strip the href in the EDITOR preview only (`context.isPreview`), so a
+  // designer can't click out of the canvas. In the customer LIVE preview
+  // (`context.isLivePreview`) the href stays so internal links resolve in-frame
+  // (see web-renderer resolveInternalPreviewPaths); external ones get blocked by
+  // the preview gate anyway. (BP-5959)
+  if (props.context.isPreview || !value) return undefined;
 
   if (isEmail(value)) {
     return `mailto:${value}`;

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -33,7 +33,7 @@
         :hide-bullets-on-mobile="false"
       >
         <template #arrow-left>
-          <div id="button-prev">
+          <div id="button-prev" data-preview-interactive>
             <Icon
               classes="sm:tw-hidden tw--mb-1 tw-mr-2 tw-cursor-pointer"
               name="chevron-left"
@@ -120,7 +120,7 @@
           </div>
         </template>
         <template #arrow-right>
-          <div id="button-next">
+          <div id="button-next" data-preview-interactive>
             <Icon
               classes="sm:tw-hidden tw--mb-1 tw-ml-2 tw-cursor-pointer"
               name="chevron-right"

package/src/brand-page/components/video/Video.vue

@@ -8,7 +8,10 @@
         :class="{ 'tw-pb-4': isCollapsed, 'tw-pb-0.5': !isCollapsed }"
         :style="containerStyle"
       >
+        <!-- Video rolls its own header, so the `collapsible` allow-list entry can't
+             reach it. Expanding is viewing, not acting. -->
         <div
+          data-preview-interactive
           class="tw-relative tw-text-center tw-w-full hover:tw-cursor-pointer"
           :class="{ 'tw-mb-4': !isCollapsed }"
           @click="onHeaderToggleClick"

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

@@ -49,11 +49,18 @@ export interface AbTestResult {
 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 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 const MEDIA_SIZES = {
@@ -143,5 +150,21 @@ export const getAbTestResults = (abtestKeyValues: AbTest): AbTest => {
     );
   }
 
+  // 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/src/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -2,6 +2,7 @@ import { EVENTS } from '../../../constants/brand-page-maker';
 import {
   useBrandPageMakerUserStore,
   useBrandPageMakerStore,
+  useBrandPageContainerStore,
 } from '@brand-page-maker/stores';
 import { computed, defineComponent } from 'vue';
 import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
@@ -12,9 +13,20 @@ 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(
@@ -32,6 +44,9 @@ export default defineComponent({
     saveBrandPage() {
       this.$emit(EVENTS.Save);
     },
+    previewBrandPage() {
+      this.$emit(EVENTS.Preview);
+    },
     saveAndPublishBrandPage(isActionBar: boolean) {
       if (!this.isPublishButtonEnabled) {
         return;

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -0,0 +1,95 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import ActionBarNavigation from './ActionBarNavigation.vue';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import { getAbTestResults } from '@brand-page/models/brand-page-context.model';
+
+// Must match `CampaignNames.LivePreview*` in bc-net. The two experiments share
+// one set of variation values — they're told apart by campaign key, not value.
+const PREPURCHASE = 'bc-bp-5873-live-preview-prepurchase';
+const POSTPURCHASE = 'bc-bp-5873-live-preview-postpurchase';
+const VARIATION_1 = 'bp-5873-variation-1';
+const CONTROL = 'bp-5873-control';
+
+const mountBar = () => shallowMount(ActionBarNavigation);
+
+const hasPreviewButton = (wrapper: ReturnType<typeof mountBar>) =>
+  wrapper.find('[data-test-preview-button]').exists();
+
+// The AB value arrives as the raw bc-net campaign string, so go through the real
+// parser rather than hand-building an AbTestResult — that's the contract under test.
+const setAbTest = (
+  store: ReturnType<typeof useBrandPageContainerStore>,
+  key: string,
+  value: string,
+) => {
+  store.abTests = getAbTestResults({ [key]: value } as never);
+};
+
+describe('ActionBarNavigation — BP-5873 preview AB test', () => {
+  let containerStore: ReturnType<typeof useBrandPageContainerStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    containerStore = useBrandPageContainerStore();
+  });
+
+  test('hides Preview when no AB value has been sent', () => {
+    expect(hasPreviewButton(mountBar())).toBe(false);
+  });
+
+  test('post-purchase: shows Preview on variation-1, hides it on control', () => {
+    containerStore.isPrePurchase = false;
+
+    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
+    expect(hasPreviewButton(mountBar())).toBe(true);
+
+    setAbTest(containerStore, POSTPURCHASE, CONTROL);
+    expect(hasPreviewButton(mountBar())).toBe(false);
+  });
+
+  test('pre-purchase: shows Preview on variation-1, hides it on control', () => {
+    containerStore.isPrePurchase = true;
+
+    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
+    expect(hasPreviewButton(mountBar())).toBe(true);
+
+    setAbTest(containerStore, PREPURCHASE, CONTROL);
+    expect(hasPreviewButton(mountBar())).toBe(false);
+  });
+
+  // Two separate experiments, so a value on one side must never satisfy the other —
+  // otherwise a post-purchase variation would leak the button into pre-purchase.
+  test('the two experiments never read each other', () => {
+    containerStore.isPrePurchase = true;
+    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
+    expect(hasPreviewButton(mountBar())).toBe(false);
+
+    containerStore.isPrePurchase = false;
+    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
+    expect(hasPreviewButton(mountBar())).toBe(false);
+  });
+
+  // The mobile nav row is equal columns: 3 with Save, 2 once the site is published and
+  // Save drops out. Preview must be a real column like the rest — while it was content
+  // width, Publish ate the whole remaining row on a published site.
+  test('Preview shares the mobile row equally with the other buttons', () => {
+    containerStore.isPrePurchase = false;
+    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
+    containerStore.brandPageStatus = 'Published';
+
+    const wrapper = mountBar();
+    const buttons = wrapper.findAllComponents({ name: 'Button' });
+
+    // Save is gone once published, so this is the two-column case.
+    expect(buttons).toHaveLength(2);
+    expect(hasPreviewButton(wrapper)).toBe(true);
+
+    // Every visible column carries the same width contract, so they halve the row.
+    buttons.forEach((button) => {
+      expect(button.classes()).toContain('tw-w-full');
+      expect(button.classes()).toContain('lg:tw-w-auto');
+    });
+  });
+});

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -1,8 +1,21 @@
 <template>
   <div
     data-component="action-bar-navigation"
-    class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
+    class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
+    <Button
+      v-if="!isAdmin && isLivePreviewEnabled"
+      :label="constantsTr('previewDisplayName')"
+      variant="no-border"
+      :white="true"
+      size="small-medium"
+      icon-left="preview"
+      icon-left-size="sm"
+      class="tw-w-full lg:tw-w-auto tw-inline-flex"
+      classes="tw-w-full lg:tw-w-auto tw-whitespace-nowrap !tw-px-0 lg:!tw-px-4"
+      data-test-preview-button
+      @on-click.stop="previewBrandPage"
+    />
     <Button
       v-if="!isPublished"
       :label="
@@ -13,7 +26,7 @@
       :white="true"
       size="small-medium"
       class="tw-w-full lg:tw-w-auto"
-      classes="tw-px-6 tw-w-full lg:tw-w-auto"
+      classes="!tw-px-3 lg:!tw-px-6 tw-w-full lg:tw-w-auto tw-whitespace-nowrap"
       @on-click.stop="saveBrandPage"
     />
     <Button
@@ -33,7 +46,7 @@
       :disabled="!isPublishButtonEnabled"
       size="small-medium"
       class="tw-w-full lg:tw-w-auto"
-      classes="tw-px-6 tw-w-full lg:tw-w-auto"
+      classes="!tw-px-3 lg:!tw-px-6 tw-w-full lg:tw-w-auto tw-whitespace-nowrap"
       @on-click.stop="saveAndPublishBrandPage(true)"
     />
   </div>
@@ -41,7 +54,8 @@
 <script>
 import { Button } from '@designcrowd/fe-shared-lib';
 import ActionBarMixin from './ActionBar.mixin.ts';
-import { actionBarTr } from '@src/composables/useTranslate';
+// Preview reuses the translated sidebar tab label — no new Smartling string.
+import { actionBarTr, constantsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {
@@ -52,6 +66,7 @@ export default {
     return {
       ...ActionBarMixin.setup(props, context),
       actionBarTr,
+      constantsTr,
     };
   },
 };

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

@@ -177,6 +177,7 @@ export default defineComponent({
       mounted: false,
       debounceOnResize: undefined as DebounceHandle | undefined,
       showSaveSuccessMessage: false,
+      isPreviewModalVisible: false,
     };
   },
   computed: {
@@ -303,6 +304,24 @@ 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?: string) {
+      if (
+        !livePreviewUrl ||
+        !this.containerStore.isPrePurchase ||
+        this.isPreviewModalVisible
+      ) {
+        return;
+      }
+
+      this.isPreviewModalVisible = true;
+      this.$emit(EVENTS.Preview);
+    },
+  },
   mounted() {
     if (window) {
       window.removeEventListener('resize', this.onResizeWithDebounce);
@@ -434,9 +453,47 @@ 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/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.preview-gate.test.ts

@@ -0,0 +1,113 @@
+import { describe, test, expect, vi } from 'vitest';
+import BrandPageMakerMixin from './BrandPageMaker.mixin';
+import { EVENTS } from '../../../constants/brand-page-maker';
+
+// The preview frames a SAVED, owned draft, so who saves it decides when the modal
+// may open. Signed out: nobody owns a draft, so hand off to the host's Save Progress
+// flow. Post-purchase: the modal saves through the maker store itself, so it can open
+// first and show its loader.
+//
+// Pre-purchase: the HOST owns the save, so nothing opens until that save hands back a
+// signed URL — the `livePreviewUrl` watcher is what opens the modal.
+//
+// Mounting the whole editor to reach these branches would dwarf what is tested, so the
+// mixin's methods and watcher are driven directly.
+const onPreview = (BrandPageMakerMixin as any).methods.onPreview;
+const onLivePreviewUrlChanged = (BrandPageMakerMixin as any).watch[
+  'containerStore.livePreviewUrl'
+];
+
+const createContext = (
+  overrides: {
+    isUserAuthenticated?: boolean;
+    isPreviewModalVisible?: boolean;
+    containerStore?: { isPrePurchase: boolean; livePreviewUrl?: string };
+  } = {},
+) => ({
+  isUserAuthenticated: true,
+  isPreviewModalVisible: false,
+  containerStore: { isPrePurchase: false, livePreviewUrl: undefined },
+  $emit: vi.fn(),
+  ...overrides,
+});
+
+describe('BrandPageMaker.onPreview', () => {
+  test('a signed-out customer is sent through Save Progress instead', () => {
+    const context = createContext({ isUserAuthenticated: false });
+
+    onPreview.call(context);
+
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.LivePreviewClicked);
+    expect(context.isPreviewModalVisible).toBe(false);
+  });
+
+  test('post-purchase opens the preview, which saves through the maker store', () => {
+    const context = createContext();
+
+    onPreview.call(context);
+
+    expect(context.isPreviewModalVisible).toBe(true);
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.Preview);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.LivePreviewClicked);
+  });
+
+  // Opening here would mean waiting inside the modal on a host save it can't see the
+  // outcome of — which is how the loader used to hang forever (BP-5870).
+  test('pre-purchase asks the host to save and stays closed', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: 'https://stale' },
+    });
+
+    onPreview.call(context);
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.LivePreviewClicked);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+    // A stale URL from an earlier preview must not open the frame on the next click.
+    expect(context.containerStore.livePreviewUrl).toBeUndefined();
+  });
+});
+
+describe('BrandPageMaker livePreviewUrl watcher', () => {
+  test('opens the preview once the host save hands back a URL', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(
+      context,
+      'https://brand.site/_p/request?token=x',
+    );
+
+    expect(context.isPreviewModalVisible).toBe(true);
+    expect(context.$emit).toHaveBeenCalledWith(EVENTS.Preview);
+  });
+
+  // A failed save or a customer sent to register never sets a URL, and the editor has
+  // already surfaced that — so nothing should open.
+  test('stays closed when the save produced no URL', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: true, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(context, undefined);
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+  });
+
+  // Post-purchase opens the modal itself, so the watcher must not double-open it.
+  test('ignores post-purchase, which opens the modal itself', () => {
+    const context = createContext({
+      containerStore: { isPrePurchase: false, livePreviewUrl: undefined },
+    });
+
+    onLivePreviewUrlChanged.call(
+      context,
+      'https://brand.site/_p/request?token=x',
+    );
+
+    expect(context.isPreviewModalVisible).toBe(false);
+    expect(context.$emit).not.toHaveBeenCalledWith(EVENTS.Preview);
+  });
+});

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -15,6 +15,7 @@
       @back="onBackBrandPage"
       @save="saveBrandPage('Navigation')"
       @publish="saveAndPublishBrandPage(false)"
+      @preview="onPreview"
       @create-team-cards="onCreateTeamCards"
     />
     <slot name="editButtonHeader" />
@@ -148,6 +149,12 @@
       @cancel="onChangeTemplateConfirmModalCancel"
     />
     <!-- End template change confirm modal -->
+
+    <PreviewModalWithState
+      :visible="isPreviewModalVisible"
+      @publish="onPreviewPublish"
+      @close="onClosePreview"
+    />
   </div>
 </template>
 <script>
@@ -171,6 +178,7 @@ import AdminLogoSettings from '../admin-logo-settings/AdminLogoSettings.vue';
 import AdminBackgroundSettings from '../admin-background-settings/AdminBackgroundSettings.vue';
 import ConfirmModal from '@shared/confirm-modal/ConfirmModal.vue';
 import ProductConfigModal from '@brand-page-maker/components/shop/ProductConfigModal.vue';
+import PreviewModalWithState from '../preview-modal/PreviewModalWithState.vue';
 import VideoPlayButton from '../video-play/VideoPlayButton.vue';
 
 import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
@@ -205,6 +213,7 @@ export default {
     SideBar,
     StyleSettings,
     ProductConfigModal,
+    PreviewModalWithState,
     VideoPlayButton,
     TemplatesSettings: BrandPageMakerTemplateSettings,
     SparkleIcon,
@@ -215,8 +224,24 @@ export default {
       type: Boolean,
       default: false,
     },
+    // Whether the current user is signed in. When false, clicking Preview asks
+    // the host to prompt sign-in first (the editor preview saves + mints an
+    // owner-gated token) instead of opening it. Defaults true so hosts that
+    // don't pass it keep the previous behaviour.
+    isUserAuthenticated: {
+      type: Boolean,
+      default: true,
+    },
   },
-  emits: ['contactsupportclicked', 'initialised', 'save', 'publish', 'Back'],
+  emits: [
+    'contactsupportclicked',
+    'initialised',
+    'save',
+    'publish',
+    'preview',
+    'livepreviewclicked',
+    'Back',
+  ],
   setup(props, context) {
     const localisedRouteStore = useLocalisedRouteStore();
     const brandPageMakerStore = useBrandPageMakerStore();

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

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

package/src/brand-page-maker/components/navigation/Navigation.vue

@@ -34,6 +34,7 @@
       <ActionBarNavigation
         @save="saveBrandPage"
         @publish="saveAndPublishBrandPage"
+        @preview="previewBrandPage"
         @create-team-cards="onCreateTeamCards"
       />
     </div>