@designcrowd/library.brand-page 6.1.7 → 6.1.8-ast-header

package/src/brand-page/components/payment/support-me/SupportMe.vue

@@ -31,12 +31,9 @@
             'tw-grid-cols-1': paymentOptions.length < 2,
           }"
         >
-          <!-- Picking an amount is local state only — no cart, no charge. Marked per
-               control, not on the root, which would expose pay/checkout too. -->
           <li
             v-for="paymentOption in paymentOptions"
             :key="`payment-option-${paymentOption.id}`"
-            data-preview-interactive
             class="payment-option tw-flex tw-flex-row tw-flex-wrap tw-justify-center tw-text-sm tw-my-0"
             :class="{
               'payment-option--selected': selectedPaymentOptionIds.some(

package/src/brand-page/components/save-contact/SaveContactWidget.vue

@@ -6,6 +6,7 @@
     <div
       :style="data.buttonPositionStyle"
       class="tw-w-full tw-max-w-md tw-px-4 tw-pointer-events-auto tw-z-50 tw-flex tw-justify-center"
+      data-preview-block
     >
       <Button
         :view-model="getButtonViewModel"

package/src/brand-page/components/save-contact/popup-card/PopupCard.vue

@@ -40,6 +40,7 @@
           'btn-bc tw-uppercase tw-bg-primary-500': !context.isDesignCom,
           'btn-dcom tw-rounded-md tw-font-bold': context.isDesignCom,
         }"
+        data-preview-block
         @click="onStartFree"
       >
         {{ saveContactWidgetTr('startForFree') }}

package/src/brand-page/components/shop/CartModal.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { mount } from '@vue/test-utils';
+import CartModal from './CartModal.vue';
+import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+
+// Preview-mode checkout is blocked in two independent places today: Shop.vue's own
+// isPreviewMode(context) guard around mounting PaymentModal, and this attribute, which
+// PreviewSurface.vue intercepts at the frame level before the click ever reaches Vue.
+// Without it, the checkout button in a customer preview was live and clickable, relying
+// solely on the JS guard elsewhere to make it a no-op.
+describe('CartModal — preview-mode checkout guard', () => {
+  const seedCartWithOneItem = () => {
+    useShopConfigStore().products = [
+      {
+        id: 'product-1',
+        name: 'Mug',
+        description: '',
+        imageUrl: '',
+        defaultPrice: 10,
+        skus: [{ skuKey: 'sku-1' } as any],
+        variant: [],
+        hasVariants: false,
+        enableNotes: false,
+      },
+    ];
+    useCartStore().cartItems = [
+      {
+        skuKey: 'sku-1',
+        productSkuId: 'sku-1',
+        productId: 'product-1',
+        quantity: 1,
+        unitPrice: 10,
+      },
+    ];
+  };
+
+  it('marks the checkout button as a blocked side-effect for the preview frame', () => {
+    setActivePinia(createPinia());
+    seedCartWithOneItem();
+
+    const wrapper = mount(CartModal, {
+      props: { buttonStyle: {} as any },
+    });
+
+    const checkoutButton = wrapper.get('[data-test-tag="add-btn"]');
+
+    expect(checkoutButton.attributes()).toHaveProperty('data-preview-block');
+  });
+});

package/src/brand-page/components/shop/CartModal.vue

@@ -203,6 +203,7 @@
               variant="primary"
               :attrs="{
                 'data-test-tag': 'add-btn',
+                'data-preview-block': true,
               }"
               @click="onShowPaymentModal"
             />

package/src/brand-page/components/shop/FeaturedDisplay.vue

@@ -118,11 +118,16 @@ const onShowProductDetail = (product) => {
   min-width: calc(theme(width.1/6) - theme(spacing.2));
 }
 
+/* Mobile: flex column so the container's `tw-gap-2` is the single gap source, the
+   same in the editor and on the rendered site. `.device--mobile` = maker frame; the
+   media query = published site + live preview, which have no such class. */
 .device--mobile .payment-options {
-  @apply md:tw-block;
+  @apply md:tw-flex md:tw-flex-col;
 }
 
-.device--mobile .payment-option {
-  @apply tw-my-2;
+@media (max-width: 767px) {
+  .payment-options {
+    @apply tw-flex tw-flex-col;
+  }
 }
 </style>

package/src/brand-page/components/shop/Shop.vue

@@ -63,14 +63,9 @@
           :icon-color="viewModel.buttonStyles?.style?.backgroundColor"
           :no-margin="true"
         >
-          <!-- `data-preview-interactive`: opening the cart to look at it charges
-               nothing, so it stays clickable in the live preview even though the shop
-               is inert by default. Scoped to this button — everything inside the cart,
-               Checkout included, stays blocked. -->
           <button
             class="tw-mt-4 tw-block tw-w-full tw-border-0 tw-py-3 tw-select-none tw-text-base hover:tw-cursor-pointer tw-rounded"
             :style="buttonStyle"
-            data-preview-interactive
             @click="onShowCartModal"
           >
             <TextWrapper :text-style="buttonTextStyle" :text="viewCartText" />
@@ -232,6 +227,11 @@ const onShowSuccess = () => {
 };
 
 const onShowPaymentModal = () => {
+  // Safety-critical: mounting PaymentModal creates a real cart + Stripe intent.
+  if (isPreviewMode(props.context)) {
+    return;
+  }
+
   data.isCartModalVisible = false;
   data.isPaymentModalVisible = true;
 };

package/src/brand-page/components/shop/Shop.vue.test.ts

@@ -1,7 +1,8 @@
 import { vi } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import Shop from './Shop.vue';
 import PaymentModal from './PaymentModal.vue';
+import CartModal from './CartModal.vue';
 import { createPinia, setActivePinia } from 'pinia';
 import {
   BRAND_PAGE_TYPES,
@@ -10,6 +11,9 @@ import {
   type BrandPageContext,
 } from '@brand-page/models';
 import type { ShopViewModel } from '@brand-page/view-models';
+import brandPageClient from '../../clients/brand-page.client';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
 
 vi.mock('../../clients/brand-page.client', () => ({
   default: {
@@ -22,7 +26,9 @@ vi.mock('@brand-page/utils/raygun.util', () => ({
   default: { safeSendRaygunError: vi.fn() },
 }));
 
-const createContext = (): BrandPageContext => ({
+const createContext = (
+  overrides: Partial<BrandPageContext> = {},
+): BrandPageContext => ({
   brandPageSlug: 'test',
   brandPageToken: '',
   isMobile: false,
@@ -45,6 +51,7 @@ const createContext = (): BrandPageContext => ({
   isCapturingPreview: false,
   recaptchaSiteKey: undefined,
   nav: { navItems: [] },
+  ...overrides,
 });
 
 const PRODUCT = {
@@ -207,3 +214,98 @@ describe('PaymentModal', () => {
     expect((flatCss as any).style).toBeUndefined();
   });
 });
+
+// BP-5961 SAFETY-CRITICAL: in any preview the shop is browsable but checkout must be
+// hard-blocked. `/api/cart/createCart` and `/api/stripe/createPaymentIntent` are
+// UNGUARDED on the backend and the preview carries a real Stripe key, so this guard
+// in `Shop.vue.onShowPaymentModal` is the SOLE thing preventing a real charge.
+describe('Shop checkout hard-block (BP-5961)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  // PaymentModal stays REAL (its onMounted → createBrandPageCart is what we assert on);
+  // CartModal stays REAL so we can emit `on-show-payment` from it; everything heavy is
+  // stubbed. Stubbing CartModal's `Modal` to `true` also drops its slot content, so we
+  // don't need to stub NumberStepper/Icon/etc.
+  const HARD_BLOCK_STUBS = {
+    HelloBar: true,
+    ButtonStyleWrapper: true,
+    TextWrapper: true,
+    TextDisplay: true,
+    ThumbnailDisplay: true,
+    FeaturedDisplay: true,
+    ProductDetailModal: true,
+    Modal: true,
+    Loader: true,
+    Button: true,
+    RequestPaymentStripe: true,
+  };
+
+  const seedShopWithCartItem = () => {
+    const shopStore = useShopConfigStore();
+
+    shopStore.setPaymentConfig({ id: 'pc-1' } as any);
+    shopStore.addProduct({
+      id: '1',
+      name: 'Test',
+      hasVariants: false,
+      skus: [{ id: 'sku-1', skuKey: 'sku-1', price: 10, variant: [] }],
+    } as any);
+
+    useCartStore().cartItems.push({
+      productId: '1',
+      productSkuId: 'sku-1',
+      skuKey: 'sku-1',
+      unitPrice: 10,
+      quantity: 1,
+    });
+  };
+
+  const mountShopForCheckout = (context: BrandPageContext) => {
+    seedShopWithCartItem();
+
+    return mount(Shop, {
+      props: {
+        context,
+        viewModel: createViewModel({ products: [PRODUCT] }),
+        contentIndex: 0,
+      },
+      global: { stubs: HARD_BLOCK_STUBS },
+    });
+  };
+
+  const triggerCheckout = async (wrapper: ReturnType<typeof mount>) => {
+    // The cart's Proceed button emits this; going through the emit exercises the real
+    // `onShowPaymentModal` guard rather than reaching into component internals.
+    wrapper.findComponent(CartModal).vm.$emit('on-show-payment');
+    await flushPromises();
+  };
+
+  it.each([
+    ['customer live preview', { isPreview: false, isLivePreview: true }],
+    ['editor preview', { isPreview: true, isLivePreview: false }],
+  ])(
+    'no-ops checkout — PaymentModal never mounts and createBrandPageCart is never called (%s)',
+    async (_label, flags) => {
+      const wrapper = mountShopForCheckout(createContext(flags));
+
+      await triggerCheckout(wrapper);
+
+      expect(wrapper.findComponent(PaymentModal).exists()).toBe(false);
+      expect(brandPageClient.createBrandPageCart).not.toHaveBeenCalled();
+    },
+  );
+
+  it('published site is UNCHANGED — PaymentModal mounts and createBrandPageCart is called', async () => {
+    const wrapper = mountShopForCheckout(
+      createContext({ isPreview: false, isLivePreview: false }),
+    );
+
+    await triggerCheckout(wrapper);
+
+    expect(wrapper.findComponent(PaymentModal).exists()).toBe(true);
+    expect(brandPageClient.createBrandPageCart).toHaveBeenCalledTimes(1);
+  });
+});

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" data-preview-interactive>
+          <div id="button-prev">
             <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" data-preview-interactive>
+          <div id="button-next">
             <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,10 +8,7 @@
         :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/utils/route.util.test.ts

@@ -0,0 +1,116 @@
+import { findNavItemByOwnSiteUrl } from './route.util';
+import type { NavItemViewModel } from '@brand-page/view-models';
+
+const navItems = [
+  { pageId: '1', relativePath: '', routeName: 'home', isRoot: true },
+  {
+    pageId: '2',
+    relativePath: 'abb',
+    routeName: 'abb',
+    nestedNavItems: [
+      { pageId: '4', relativePath: 'abb/nested', routeName: 'nested' },
+    ],
+  },
+  { pageId: '3', relativePath: 'about-us', routeName: 'about-us' },
+] as unknown as NavItemViewModel[];
+
+const resolve = (url: string | undefined, overrides = {}) =>
+  findNavItemByOwnSiteUrl({
+    url,
+    navItems,
+    brandPageType: 'brandContact',
+    brandPageSlug: 'cs',
+    ...overrides,
+  });
+
+describe('findNavItemByOwnSiteUrl', () => {
+  describe('on the product domain (multi-tenant, so the slug decides)', () => {
+    it('resolves a typed URL for one of our own pages', () => {
+      expect(resolve('https://uat2.brand.contact/cs/abb')?.routeName).toBe(
+        'abb',
+      );
+    });
+
+    it('resolves the slug on its own to the home page', () => {
+      expect(resolve('https://uat2.brand.contact/cs')?.routeName).toBe('home');
+    });
+
+    it('matches our slug case-insensitively', () => {
+      expect(resolve('https://uat2.brand.contact/CS/abb')?.routeName).toBe(
+        'abb',
+      );
+    });
+
+    // The whole point of the slug gate: another site lives on the same host.
+    it('does NOT resolve another site on the same host', () => {
+      expect(
+        resolve('https://uat2.brand.contact/othercard/abb'),
+      ).toBeUndefined();
+    });
+
+    it('does NOT resolve a look-alike host', () => {
+      expect(resolve('https://evilbrand.contact/cs/abb')).toBeUndefined();
+    });
+
+    it('does NOT resolve the product domain of a different website type', () => {
+      expect(resolve('https://uat2.brand.site/cs/abb')).toBeUndefined();
+    });
+
+    it('does NOT resolve a page this site does not have', () => {
+      expect(resolve('https://uat2.brand.contact/cs/nope')).toBeUndefined();
+    });
+
+    it('resolves a nested page by its parent/child path', () => {
+      expect(
+        resolve('https://uat2.brand.contact/cs/abb/nested')?.routeName,
+      ).toBe('nested');
+    });
+
+    // A route location carries neither, so converting would silently drop them.
+    it.each([
+      ['a query string', 'https://uat2.brand.contact/cs/abb?promo=x'],
+      ['a hash', 'https://uat2.brand.contact/cs/abb#pricing'],
+    ])('leaves a URL with %s to the plain anchor', (_label, url) => {
+      expect(resolve(url)).toBeUndefined();
+    });
+
+    it('does NOT resolve when the slug is only whitespace', () => {
+      expect(
+        resolve('https://uat2.brand.contact/cs/abb', { brandPageSlug: ' ' }),
+      ).toBeUndefined();
+    });
+  });
+
+  describe('on the site custom domain (whole-host, no slug segment)', () => {
+    const onCustomDomain = (url: string) =>
+      resolve(url, { customDomain: 'mycard.com' });
+
+    it('resolves a path without a slug segment', () => {
+      expect(onCustomDomain('https://mycard.com/about-us')?.routeName).toBe(
+        'about-us',
+      );
+    });
+
+    it('resolves the bare domain to home', () => {
+      expect(onCustomDomain('https://mycard.com')?.routeName).toBe('home');
+    });
+
+    it('ignores a www prefix either way', () => {
+      expect(onCustomDomain('https://www.mycard.com/abb')?.routeName).toBe(
+        'abb',
+      );
+    });
+  });
+
+  describe('leaves everything else alone', () => {
+    it.each([
+      ['an external site', 'https://example.com/abb'],
+      ['a mailto', 'mailto:hi@mycard.com'],
+      ['a tel', 'tel:+61400000000'],
+      ['an unparseable href', '/abb'],
+      ['nothing', undefined],
+    ])('does not resolve %s', (_label, url) => {
+      expect(resolve(url as string | undefined)).toBeUndefined();
+    });
+  });
+});

package/src/brand-page/utils/route.util.ts

@@ -1,4 +1,5 @@
 import * as constants from '../constants';
+import type { BrandPageType } from '../models/brand-page-context.model';
 import type { NavItemViewModel } from '../view-models';
 
 export const buildRelativePathFromParams = (params: {
@@ -83,6 +84,87 @@ export const findNavItemByPageId = (
   return undefined;
 };
 
+// Keep in sync with web-renderer's `constants/host.constant` + `getProductHostForType`.
+const PRODUCT_HOST_BY_BRAND_PAGE_TYPE: Record<BrandPageType, string> = {
+  default: 'brand.page',
+  brandSite: 'brand.site',
+  brandContact: 'brand.contact',
+};
+
+const bareHost = (hostname: string): string =>
+  hostname.replace(/^www\./i, '').toLowerCase();
+
+// A typed URL can still address a page of THIS site: whole-host on the site's own
+// custom domain, or under its slug on the multi-tenant product domain.
+export const findNavItemByOwnSiteUrl = ({
+  url,
+  navItems,
+  brandPageType,
+  brandPageSlug,
+  customDomain,
+}: {
+  url: string | undefined;
+  navItems: NavItemViewModel[];
+  brandPageType: BrandPageType;
+  brandPageSlug: string;
+  customDomain?: string;
+}): NavItemViewModel | undefined => {
+  if (!url) {
+    return undefined;
+  }
+
+  let parsed: URL;
+
+  try {
+    parsed = new URL(url);
+  } catch {
+    return undefined;
+  }
+
+  // A route location carries neither, so converting would silently drop them — leave
+  // the author's exact URL to the plain anchor instead.
+  if (parsed.search || parsed.hash) {
+    return undefined;
+  }
+
+  const host = bareHost(parsed.hostname);
+  const segments = parsed.pathname.split('/').filter(Boolean);
+  const productHost = PRODUCT_HOST_BY_BRAND_PAGE_TYPE[brandPageType];
+  // Required by type and always set by in-repo callers, but this now runs on the
+  // published-site render path (Button.vue) — degrade gracefully rather than throw
+  // if a cross-repo caller ever omits it.
+  const slug = brandPageSlug?.trim() ?? '';
+
+  let pagePath: string | undefined;
+
+  if (customDomain && host === bareHost(customDomain)) {
+    pagePath = segments.join('/');
+  } else if (
+    productHost &&
+    (host === productHost || host.endsWith(`.${productHost}`)) &&
+    slug &&
+    segments[0]?.toLowerCase() === slug.toLowerCase()
+  ) {
+    pagePath = segments.slice(1).join('/');
+  }
+
+  if (pagePath === undefined) {
+    return undefined;
+  }
+
+  return pagePath
+    ? findNavItemByRelativePath(navItems, pagePath)
+    : navItems.find((item) => item.isRoot);
+};
+
+// Shared by every caller that resolves a nav item then navigates to it
+// (Button.vue, ImagesSection.vue) — one place to turn "which page" into "where to
+// route", so a resolved nav item is never hand-unpacked into a route object twice.
+export const toRouteLocation = (navItem?: NavItemViewModel) => ({
+  name: navItem?.routeName || '',
+  params: navItem?.routeParams || {},
+});
+
 export const findNavItemByRelativePath = (
   navItems: NavItemViewModel[],
   relativePath: string,

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

@@ -7,6 +7,7 @@ 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';
@@ -48,6 +49,28 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
     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.