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

package/lib/src/tracker.mjs

@@ -1,4 +1,4 @@
-import { A as N, E as O, G as _, P as A, a as I, S as a, T as S, U as s, u as C } from "./useEventTracker-DmQ6AkNn.js";
+import { A as N, E as O, G as _, P as A, a as I, S as a, T as S, U as s, u as C } from "./useEventTracker-Dmc2jFdN.js";
 export {
   N as AI_CTA_LOCATIONS,
   O as EVENTS,

package/lib/src/{useEventTracker-DmQ6AkNn.js → useEventTracker-Dmc2jFdN.js}

@@ -1,4 +1,4 @@
-import { shallowRef as A } from "vue";
+import { shallowRef as I } from "vue";
 const E = {
   EXPERIMENT_STARTED: "$experiment_started",
   WEBSITE_MAKER_ADD_CONTENT: "website_maker_add_content",
@@ -53,6 +53,7 @@ const E = {
   ADD_CONTENT: "add_content",
   EDITOR_PUBLISH_TOP: "editor_publish_top",
   EDITOR_PUBLISH_BOTTOM: "editor_publish_bottom",
+  EDITOR_PREVIEW_PUBLISH: "editor_preview_publish",
   SLUG_CHANGE_MAKER_SIDEBAR_SETTINGS: "slug_change_maker_sidebar_settings",
   SLUG_CHANGE_MANAGE_PAGE: "slug_change_manage_page",
   GOOGLE_ADSENSE: "google_adsense",
@@ -82,18 +83,18 @@ const E = {
   PREMIUM: "premium",
   EXIT: "exit",
   FREEMIUM: "freemium"
-}, i = A(), n = A({
+}, i = I(), n = I({
   upsellOpenEventProps: {},
   domainUpsellOpenEventProps: {},
   publishOpenEventProps: {}
-}), l = A([]), _ = (o, I, e = !1, t = "maker_editor") => {
+}), l = I([]), _ = (o, A, e = !1, t = "maker_editor") => {
   l.value.forEach((s) => {
     s({
       scope: t,
       eventName: o,
       eventProps: {
         ...e ? {} : i.value,
-        ...I
+        ...A
       }
     });
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.3",
+  "version": "6.1.4-ast-prepurchase",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -19,6 +19,10 @@
       "types": "./lib/src/tracker.d.ts",
       "import": "./lib/src/tracker.mjs"
     },
+    "./preview-modal": {
+      "types": "./lib/src/preview-modal.d.ts",
+      "import": "./lib/src/preview-modal.mjs"
+    },
     "./lib/src/css/*": "./lib/src/css/*",
     "./package.json": "./package.json"
   },

package/src/brand-page/components/button/Button.vue

@@ -62,6 +62,7 @@
           :class="[innerClass, buttonStateClass]"
           :style="buttonStyle"
           rel="noopener"
+          :data-preview-interactive="previewInteractive"
           @click="onClick"
         >
           <ButtonIcon
@@ -89,6 +90,7 @@
       </template>
     </ButtonStyleWrapper>
     <HashRouteModal
+      data-component="button-image-modal"
       mode="image"
       :is-hash-route-enabled="false"
       :visible="isModalVisible"
@@ -149,6 +151,15 @@ const isModalImageUrlValid = computed((): boolean =>
   isURL(props.viewModel.modalImageUrl),
 );
 
+// The live preview is inert by default, so the "Open Design" button needs an
+// explicit opt-in to stay clickable. Only the modal-image action qualifies —
+// external/mailto/tel buttons stay inert in preview. Returns null (not false) so
+// Vue omits the attribute rather than rendering "false", which would still match
+// the gate's selector.
+const previewInteractive = computed((): '' | null =>
+  isModalUrl.value && isModalImageUrlValid.value ? '' : null,
+);
+
 const isBrushStrokeIcon = computed(
   (): boolean =>
     props.viewModel.styles.selectedButtonStyleId === 'BUTTON_STYLE_19',

package/src/brand-page/components/button/Button.vue.test.ts

@@ -173,3 +173,93 @@ describe('Button - page link "back to top" behaviour (BP-5834)', () => {
     expect(scrollToSpy).not.toHaveBeenCalled();
   });
 });
+
+describe('Button - "Open Design" image modal in live preview (BP-5955)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountModalButton = async (overrides: Partial<ButtonViewModel> = {}) => {
+    const router = createTestRouter();
+
+    router.push(OTHER_PAGE_PATH);
+    await router.isReady();
+
+    return mount(Button, {
+      propsData: {
+        context: createTestBrandPageContext(),
+        viewModel: createTestButtonViewModel({
+          buttonLinkType: 'url',
+          clickActionField: 'modalImageUrl',
+          modalImageUrl: 'https://assets.example.com/design.png',
+          ...overrides,
+        }),
+      },
+      global: {
+        plugins: [router],
+      },
+    });
+  };
+
+  test('opts the anchor into the preview gate for a valid modal image (data-preview-interactive="")', async () => {
+    const wrapper = await mountModalButton();
+
+    expect(wrapper.get('a').attributes('data-preview-interactive')).toBe('');
+  });
+
+  test('omits the opt-in attribute entirely for a url-action button (never renders "false")', async () => {
+    const wrapper = await mountModalButton({
+      clickActionField: 'url',
+      url: 'https://example.com',
+      modalImageUrl: '',
+    });
+
+    expect(
+      wrapper.get('a').attributes('data-preview-interactive'),
+    ).toBeUndefined();
+  });
+
+  test('omits the opt-in attribute when the modal image url is invalid', async () => {
+    const wrapper = await mountModalButton({ modalImageUrl: 'not-a-url' });
+
+    expect(
+      wrapper.get('a').attributes('data-preview-interactive'),
+    ).toBeUndefined();
+  });
+
+  // Doubles as the fallthrough-attr runtime check: the data-component must actually
+  // land on a queryable element (Modal's v-show root keeps it in the DOM).
+  test('anchors the popup with data-component="button-image-modal" for the dismissal allow-list', async () => {
+    const wrapper = await mountModalButton();
+
+    expect(wrapper.find('[data-component="button-image-modal"]').exists()).toBe(
+      true,
+    );
+  });
+
+  test('opens the image popup on click and closes it on dismiss', async () => {
+    const wrapper = await mountModalButton();
+
+    expect(
+      wrapper
+        .get('[data-component="button-image-modal"]')
+        .attributes('aria-hidden'),
+    ).toBe('true');
+
+    await wrapper.get('a').trigger('click');
+
+    expect(
+      wrapper
+        .get('[data-component="button-image-modal"]')
+        .attributes('aria-hidden'),
+    ).toBe('false');
+
+    await wrapper.get('[data-test-modal-close-btn]').trigger('click');
+
+    expect(
+      wrapper
+        .get('[data-component="button-image-modal"]')
+        .attributes('aria-hidden'),
+    ).toBe('true');
+  });
+});

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.vue

@@ -2,6 +2,7 @@
   <Masonry
     v-if="items.length > 0"
     ref="masonryRef"
+    data-component="masonry-gallery"
     :gap="5"
     :column-width="columnWidth"
     :items="items"

package/src/brand-page/components/images-section/ImagesSection.vue

@@ -13,6 +13,7 @@
           :class="{
             'tw-cursor-pointer': shouldShowCursor(item),
           }"
+          :data-preview-interactive="previewInteractive(item)"
           @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <FallbackImage
@@ -29,6 +30,7 @@
           :alt="itemImageAltText(item)"
           :context="context"
           :content-index="contentIndex"
+          :data-preview-interactive="previewInteractive(item)"
           @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <Placeholder
@@ -222,6 +224,14 @@ const shouldBeClickable = (item: TextMediaItem): boolean => {
   );
 };
 
+// The live preview is inert by default, so a clickable image needs an explicit
+// opt-in. It mirrors `shouldBeClickable` exactly: whatever an image does on the live
+// site, it does in the preview — the lightbox, or opening its link in a new tab.
+// Returns null (not false) so Vue omits the attribute rather than rendering "false",
+// which would still match the gate's selector.
+const previewInteractive = (item: TextMediaItem): '' | null =>
+  shouldBeClickable(item) ? '' : null;
+
 const onImageModalClose = () => {
   imageModalSelectedImageIndex.value = undefined;
 };

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

@@ -1,9 +1,13 @@
 <template>
   <div v-if="!context.options?.renderVideoAsImage" :class="videoClasses">
+    <!-- Poster paints the thumbnail immediately instead of a blank box while the video
+         streams. `autoplay` uses isPreview, not isPreviewMode, on purpose: the live
+         preview must play like the published site. -->
     <video
       ref="videoElement"
       class="tw-w-full tw-h-full tw-object-cover"
       :src="media?.videoUrl"
+      :poster="media?.previewImageUrl"
       :autoplay="!context.isPreview"
       muted
       loop
@@ -11,6 +15,7 @@
       playsinline
       preload="auto"
       @canplay="attemptAutoplay"
+      @error="scheduleVideoRetry"
     />
   </div>
   <FallbackImage
@@ -25,7 +30,7 @@
   />
 </template>
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { type BrandPageContext, type GettyVideoViewModel } from '../../../lib';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 
@@ -45,6 +50,60 @@ const props = withDefaults(defineProps<Props>(), {
 
 const videoElement = ref<HTMLVideoElement>();
 
+// The video URL is derived from the asset token, and that address only exists once
+// Getty has finished copying the asset into public storage. A video added moments
+// ago is still copying, so the first load 404s and the customer gets a blank box
+// until they refresh. Retry instead — published pages hit this too, not only preview.
+//
+// Spread wide on purpose: a measured copy was still not ready after 30s, so short
+// intervals only burn attempts. Backing off to ~4 minutes total costs six 404s.
+const RETRY_DELAYS_MS = [5000, 10000, 20000, 40000, 60000, 120000];
+
+let retryCount = 0;
+let retryTimer: ReturnType<typeof setTimeout> | undefined;
+
+const clearRetry = () => {
+  if (retryTimer) {
+    clearTimeout(retryTimer);
+    retryTimer = undefined;
+  }
+};
+
+const scheduleVideoRetry = () => {
+  const delay = RETRY_DELAYS_MS[retryCount];
+
+  if (delay === undefined) {
+    return;
+  }
+
+  retryCount += 1;
+  clearRetry();
+
+  retryTimer = setTimeout(() => {
+    const element = videoElement.value;
+
+    if (!element || !props.media?.videoUrl) {
+      return;
+    }
+
+    // CloudFront caches 404s briefly, so a plain reload would keep serving the miss.
+    // The buster is only on retries; the first (normal) load stays cacheable.
+    element.src = `${props.media.videoUrl}?retry=${retryCount}`;
+    element.load();
+  }, delay);
+};
+
+// A different video means a fresh budget.
+watch(
+  () => props.media?.videoUrl,
+  () => {
+    retryCount = 0;
+    clearRetry();
+  },
+);
+
+onUnmounted(clearRetry);
+
 const attemptAutoplay = async () => {
   if (
     props.context.options?.renderVideoAsImage ||

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

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import type { PageFooterViewModel } from '@brand-page/view-models';
 import type { PropType } from 'vue';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText, isPreviewMode } from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
 
 export default defineComponent({
@@ -27,9 +27,6 @@ export default defineComponent({
   },
   emits: ['on-logo-click', 'footer-container-click'],
   computed: {
-    isInPreviewMode(): boolean {
-      return isPreviewMode(this.context);
-    },
     containerStyle(): BrandPageCssStyle {
       return this.viewModel.backgroundStyle;
     },

package/src/brand-page/components/page-footer/PageFooter.vue

@@ -46,7 +46,6 @@
         :icon-style="socialLinksIconStyle"
         :is-stack-layout-on-mobile="false"
         :links="viewModel.socialLinks"
-        :is-preview="isInPreviewMode"
         :context="context"
       />
       <!-- end social links -->

package/src/brand-page/components/payment/Payment.vue

@@ -2,7 +2,10 @@
   <section>
     <div v-if="showPaymentBlock" class="tw-p-4" :style="containerStyle">
       <!-- Start incomplete config state -->
+      <!-- Only the header opts in — pay/checkout below stay inert. Payment rolls its own
+           header, so the `collapsible` allow-list entry can't reach it. -->
       <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/components/payment/request-payment/RequestPayment.vue

@@ -37,6 +37,7 @@
               'tw-justify-center tw-flex': isFeaturedDisplayStyle,
             }"
             :style="getPaymentOptionButtonStyleById(paymentOption.id)"
+            data-preview-interactive
             @click="onPaymentOptionSelect(paymentOption.id)"
           >
             <div

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

@@ -31,9 +31,12 @@
             '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/shop/CartModal.vue

@@ -197,7 +197,12 @@
               }"
               @click="onClose"
             />
+            <!-- Hidden in the live preview: checkout is hard-blocked upstream
+                 (`Shop.vue.onShowPaymentModal` bails on `isPreviewMode`), so a
+                 dead Proceed button would only mislead. The checkout "preview
+                 prompt" UI that replaces it is deferred (needs Figma). -->
             <Button
+              v-if="!props.isCheckoutBlocked"
               classes="tw-px-8 tw-w-full"
               :label="btnLabel"
               variant="primary"
@@ -247,10 +252,14 @@ import { calculatePrice } from '../../../utils/currency.util';
 interface Props {
   isVisible: boolean;
   buttonStyle: BrandPageCssStyle;
+  // True in the live preview: the cart is browsable but checkout is hard-blocked,
+  // so the Proceed button is hidden.
+  isCheckoutBlocked?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isVisible: true,
+  isCheckoutBlocked: false,
 });
 
 const cartSettingsStore = useCartStore();

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

@@ -63,9 +63,14 @@
           :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" />
@@ -83,8 +88,12 @@
         :label="shopTr('itemAddedToCart')"
       >
         <template #cta>
+          <!-- `data-preview-interactive`: the success-bar's View Cart opens the cart
+               to look at it (charges nothing), so it stays clickable in the live
+               preview — same opt-in as the main View Cart button above. -->
           <p
             data-component="shop"
+            data-preview-interactive
             class="tw-underline tw-cursor-pointer"
             @click="onShowCartModal"
           >
@@ -106,6 +115,7 @@
       class="modal-cart"
       :is-visible="data.isCartModalVisible"
       :button-style="buttonStyle"
+      :is-checkout-blocked="isPreviewMode(props.context)"
       @on-close="onCloseCart"
       @on-show-payment="onShowPaymentModal"
     />
@@ -227,6 +237,15 @@ const onShowSuccess = () => {
 };
 
 const onShowPaymentModal = () => {
+  // Safety-critical hard-block: `PaymentModal` mounts `createCart()` on mount, which
+  // POSTs a real cart and creates a Stripe payment intent against the live key the
+  // preview carries. In any preview the shop is browsable but checkout must never
+  // reach payment, so we bail before the modal can mount. Mirrors
+  // Payment.mixin `canMakePayment` (`!isPreviewMode(context) && ...`).
+  if (isPreviewMode(props.context)) {
+    return;
+  }
+
   data.isCartModalVisible = false;
   data.isPaymentModalVisible = true;
 };

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

@@ -1,7 +1,9 @@
 import { vi } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+import { Button } from '@designcrowd/fe-shared-lib';
 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 +12,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 +27,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 +52,7 @@ const createContext = (): BrandPageContext => ({
   isCapturingPreview: false,
   recaptchaSiteKey: undefined,
   nav: { navItems: [] },
+  ...overrides,
 });
 
 const PRODUCT = {
@@ -207,3 +215,175 @@ 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);
+  });
+
+  it('passes is-checkout-blocked to CartModal only in a preview', () => {
+    const previewWrapper = mountShopForCheckout(
+      createContext({ isPreview: false, isLivePreview: true }),
+    );
+
+    expect(
+      previewWrapper.findComponent(CartModal).props('isCheckoutBlocked'),
+    ).toBe(true);
+
+    setActivePinia(createPinia());
+
+    const publishedWrapper = mountShopForCheckout(
+      createContext({ isPreview: false, isLivePreview: false }),
+    );
+
+    expect(
+      publishedWrapper.findComponent(CartModal).props('isCheckoutBlocked'),
+    ).toBe(false);
+  });
+});
+
+// BP-5961: the cart is browsable in a preview, so it can hold items — the Proceed
+// (checkout) button is what must disappear, driven by the new `isCheckoutBlocked` prop.
+describe('CartModal Proceed button (BP-5961)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const mountCartModal = (isCheckoutBlocked: boolean) => {
+    const shopStore = useShopConfigStore();
+
+    shopStore.addProduct({
+      id: '1',
+      name: 'Test',
+      hasVariants: false,
+      imageUrl: '',
+      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,
+    });
+
+    return mount(CartModal, {
+      props: { isVisible: true, buttonStyle: {} as any, isCheckoutBlocked },
+      global: {
+        stubs: {
+          // Render Modal's slots so the footer (with the Proceed button) is present.
+          Modal: {
+            template:
+              '<div><slot name="header" /><slot /><slot name="footer" /></div>',
+          },
+          NumberStepper: true,
+          Textarea: true,
+          Icon: true,
+        },
+      },
+    });
+  };
+
+  const findProceedButton = (wrapper: ReturnType<typeof mount>) =>
+    wrapper
+      .findAllComponents(Button)
+      .find((b) => (b.props('attrs') as any)?.['data-test-tag'] === 'add-btn');
+
+  it('hides the Proceed button when checkout is blocked', () => {
+    expect(findProceedButton(mountCartModal(true))).toBeUndefined();
+  });
+
+  it('shows the Proceed button when checkout is not blocked', () => {
+    expect(findProceedButton(mountCartModal(false))).toBeDefined();
+  });
+});