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

package/lib/src/lib.js

@@ -19,7 +19,7 @@ export { default as brandPageClient } from './clients/brand-page-client';
 export { FabricRenderClient } from './clients/fabric-render-client';
 export { WebSocketGatewayClient, } from './clients/websocket-gateway-client';
 // components
-export { BrandPageMaker, SeoPageSettings, UrlSettings, GoogleAnalytics, PublishBrandPageModalWithState, SensitiveContent, UseExistingDomainModal, } from './brand-page-maker/components';
+export { BrandPageMaker, SeoPageSettings, UrlSettings, GoogleAnalytics, PublishBrandPageModalWithState, PreviewModalWithState, SensitiveContent, UseExistingDomainModal, } from './brand-page-maker/components';
 import LogoRender from './brand-page/components/logo/LogoRender.vue';
 export { LogoRender };
 export { default as Page } from './brand-page/components/page/Page.vue';

package/lib/src/shared/components/live-preview-modal/live-preview-modal.utils.d.ts

@@ -0,0 +1,4 @@
+import type { BrandPageType } from '@brand-page';
+import type { UiDeviceMode } from '@shared/models';
+export type LivePreviewCta = 'publish' | 'edit';
+export declare const getDefaultPreviewDeviceMode: (brandPageType: BrandPageType) => UiDeviceMode;

package/lib/src/shared/components/live-preview-modal/live-preview-modal.utils.js

@@ -0,0 +1,3 @@
+// brandSite is desktop-first; others mobile-first. Type-only BrandPageType import keeps
+// the `/preview-modal` subpath free of the renderer runtime graph.
+export const getDefaultPreviewDeviceMode = (brandPageType) => (brandPageType === 'brandSite' ? 'desktop' : 'mobile');

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -5008,6 +5008,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAiSendPromptEvent: (ctaLocation: string) => void;
         sendAiStopGenerationEvent: (ctaLocation: string) => void;
     };
+    pageSettingsView: import("vue").Ref<"list" | "headerSettings", "list" | "headerSettings">;
 }, {
     isDeleteModalVisible: boolean;
     deleteModalPageId: string | undefined;
@@ -5025,7 +5026,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     addPageLabel(): string;
     addPageButtonVariant(): string;
     contentListItems(): ContentItem<Content>[];
-    headerPageSectionStyleOptions(): PageSectionStyleOption[];
     footerPageSectionStyleOptions(): PageSectionStyleOption[];
     footerFontSettingsOptions(): PageSettingsFontSettingsOption[];
     showFooterSettings(): boolean;
@@ -5041,6 +5041,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     onCancelDeletePage(): void;
     onPageTitleInput(pageId: string, title: string): void;
     scrollToPageSettingsSection(sectionName: PageSettingsSection): void;
+    openHeaderSettingsPanel(): void;
+    closeHeaderSettingsPanel(): void;
     onHideBrandPageLogoClickFromFooter(): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.js

@@ -160,6 +160,7 @@ export default defineComponent({
             onDraggingStart,
             onDraggingEnd,
             eventTracker,
+            pageSettingsView: ref('list'),
         };
     },
     data() {
@@ -191,17 +192,6 @@ export default defineComponent({
         contentListItems() {
             return this.contentSettingsStore.items;
         },
-        headerPageSectionStyleOptions() {
-            if (this.isBrandSite) {
-                return [
-                    PAGE_SECTION_STYLE_OPTIONS.logo,
-                    PAGE_SECTION_STYLE_OPTIONS.logoSize,
-                    PAGE_SECTION_STYLE_OPTIONS.backgroundColor,
-                    PAGE_SECTION_STYLE_OPTIONS.headerDisplay,
-                ];
-            }
-            return [PAGE_SECTION_STYLE_OPTIONS.headerDisplay];
-        },
         footerPageSectionStyleOptions() {
             return [
                 PAGE_SECTION_STYLE_OPTIONS.logo,
@@ -330,6 +320,13 @@ export default defineComponent({
             });
         },
         scrollToPageSettingsSection(sectionName) {
+            if (sectionName === PAGE_SETTINGS_SECTIONS.header) {
+                // Header settings live in their own dedicated panel now (BP-5854),
+                // not an inline CollapsiblePanel to scroll to.
+                this.pageSettingsView = 'headerSettings';
+                return;
+            }
+            this.pageSettingsView = 'list';
             this.$nextTick(() => {
                 const $sideBarContent = document.querySelector(`#${SIDE_BAR_CONTENT_ID}`);
                 if (!$sideBarContent) {
@@ -350,6 +347,21 @@ export default defineComponent({
                 $sideBarContent.scrollTop = $el.offsetTop - $sidebarHeader.clientHeight;
             });
         },
+        openHeaderSettingsPanel() {
+            this.pageSettingsView = 'headerSettings';
+        },
+        closeHeaderSettingsPanel() {
+            this.pageSettingsView = 'list';
+            // Keep the store in sync so a repeat click on the header in the
+            // live-preview canvas (which sets selectedSectionName to the same
+            // value it already had) still re-fires the watcher and reopens
+            // this panel, instead of being a no-op.
+            if (this.pageSettingsStore.selectedSectionName) {
+                this.pageSettingsStore.setSelectedSectionName({
+                    sectionName: undefined,
+                });
+            }
+        },
         async onHideBrandPageLogoClickFromFooter() {
             this.eventTracker.setUpsellBridgeState({
                 cta_location: UPGRADE_CTA_LOCATIONS.REMOVE_WATERMARK_FOOTER_SETTINGS,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.7",
+  "version": "6.1.8-ast-header",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -1,7 +1,7 @@
 <template>
   <section class="tw-relative">
     <ButtonStyleWrapper
-      v-if="isPageLink && (viewModel.pageSlug || viewModel.page)"
+      v-if="isInternalLink"
       class="bp-button tw-mb-4"
       :class="{ 'tw-min-h-14': !isPreview }"
       :selected-button-style-id="viewModel.styles.selectedButtonStyleId"
@@ -10,7 +10,7 @@
       <template #default="{ innerClass }">
         <router-link
           class="tw-no-underline"
-          :to="{ name: routes.name, params: routes.routeParams }"
+          :to="routes"
           :class="{ 'tw-w-full': isBrushStrokeIcon }"
           @click="onPageLinkClick"
         >
@@ -89,6 +89,7 @@
       </template>
     </ButtonStyleWrapper>
     <HashRouteModal
+      data-component="button-image-modal"
       mode="image"
       :is-hash-route-enabled="false"
       :visible="isModalVisible"
@@ -106,8 +107,15 @@ import { useRouter } from 'vue-router';
 import { HashRouteModal } from '@designcrowd/fe-shared-lib';
 import { isEmail, isTel, isURL } from '../../../utils/validator.util';
 import type { BrandPageContext } from '@brand-page/models';
-import type { ButtonViewModel } from '@brand-page/view-models';
-import { findNavItemByPageId } from '@src/brand-page/utils/route.util';
+import type {
+  ButtonViewModel,
+  NavItemViewModel,
+} from '@brand-page/view-models';
+import {
+  findNavItemByOwnSiteUrl,
+  findNavItemByPageId,
+  toRouteLocation,
+} from '@src/brand-page/utils/route.util';
 import ButtonIcon from './ButtonIcon.vue';
 import ButtonStyleWrapper from './ButtonStyleWrapper.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -214,16 +222,34 @@ const href = computed((): string | undefined => {
   return url.value;
 });
 
-const routes = computed(() => {
-  const route = findNavItemByPageId(
-    props.context.nav.navItems,
-    props.viewModel.page,
-  );
-  return {
-    name: route?.routeName || '',
-    routeParams: route?.routeParams || {},
-  };
-});
+// A hand-typed URL that points at one of this site's own pages is routed in-app like a
+// picked page rather than opened in a new tab. Needs the site's address in context, so
+// it applies on the published site and in the live preview; the maker's render context
+// carries no slug, so nothing converts in the editor.
+const ownSiteNavItem = computed((): NavItemViewModel | undefined =>
+  isPageLink.value || isModalUrl.value
+    ? undefined
+    : findNavItemByOwnSiteUrl({
+        url: url.value,
+        navItems: props.context.nav.navItems,
+        brandPageType: props.context.brandPageType,
+        brandPageSlug: props.context.brandPageSlug,
+        customDomain: props.context.customDomain,
+      }),
+);
+
+const isInternalLink = computed((): boolean =>
+  isPageLink.value
+    ? Boolean(props.viewModel.pageSlug || props.viewModel.page)
+    : Boolean(ownSiteNavItem.value),
+);
+
+const routes = computed(() =>
+  toRouteLocation(
+    ownSiteNavItem.value ??
+      findNavItemByPageId(props.context.nav.navItems, props.viewModel.page),
+  ),
+);
 
 const buttonStateClass = computed(() => ({
   'c-button--disabled':
@@ -241,10 +267,7 @@ const onPageLinkClick = (): void => {
   // never runs the global guard that scrolls to top, so trigger it explicitly.
   if (!router) return;
 
-  const target = router.resolve({
-    name: routes.value.name,
-    params: routes.value.routeParams,
-  });
+  const target = router.resolve(routes.value);
 
   if (target.fullPath === router.currentRoute.value.fullPath) {
     window.scrollTo(0, 0);

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

@@ -173,3 +173,214 @@ 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],
+      },
+    });
+  };
+
+  // The Open Design trigger is a no-href anchor: it navigates nowhere, so the
+  // preview click-guard (a deny-list keyed on `data-preview-block`) has nothing to
+  // block here.
+  test('renders no data-preview-block guard on the modal button', async () => {
+    const wrapper = await mountModalButton();
+
+    expect(wrapper.get('a').attributes('data-preview-block')).toBeUndefined();
+  });
+
+  // The data-component must land on a queryable element (Modal's v-show root keeps
+  // it in the DOM). It no longer feeds an allow-list — the modal is dismissable
+  // because non-anchor clicks pass the gate freely.
+  test('anchors the popup with data-component="button-image-modal"', 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');
+  });
+});
+
+describe('Button - hand-typed own-site URL routes in-app', () => {
+  const mountUrlButton = async (url: string) => {
+    const router = createTestRouter();
+
+    router.push('/my-brand');
+    await router.isReady();
+
+    return mount(Button, {
+      propsData: {
+        context: createTestBrandPageContext(),
+        viewModel: createTestButtonViewModel({
+          url,
+          buttonLinkType: 'url',
+          clickActionField: 'url',
+          page: '',
+        }),
+      },
+      global: { plugins: [router] },
+    });
+  };
+
+  // The author picked "Link" and typed a URL, but it addresses one of their own
+  // pages — so it must navigate in-app, NOT open a new tab.
+  it('renders a router-link with no target for an own-site URL', async () => {
+    const wrapper = await mountUrlButton(
+      'https://brand.site/my-brand/second-page',
+    );
+
+    expect(wrapper.findComponent(RouterLink).exists()).toBe(true);
+    expect(wrapper.get('a').attributes('target')).toBeUndefined();
+  });
+
+  it('still opens an external URL in a new tab', async () => {
+    const wrapper = await mountUrlButton('https://example.com/pricing');
+
+    expect(wrapper.findComponent(RouterLink).exists()).toBe(false);
+    expect(wrapper.get('a').attributes('target')).toBe('_blank');
+  });
+
+  it('still opens another site on the shared product host in a new tab', async () => {
+    const wrapper = await mountUrlButton(
+      'https://brand.site/someone-else/second-page',
+    );
+
+    expect(wrapper.findComponent(RouterLink).exists()).toBe(false);
+    expect(wrapper.get('a').attributes('target')).toBe('_blank');
+  });
+});
+
+// The reported case: an author types their own site's page URL into a "Url" button.
+// It must navigate in place on BOTH the published site and the live preview — a new tab
+// is only ever correct for a genuinely external link.
+describe('Button - typed own-site page URL behaves the same in preview and published', () => {
+  const SITE_SLUG = 'getty-video-banner';
+  const TYPED_URL = `https://uat2.brand.site/${SITE_SLUG}/page-2`;
+
+  const navItems = [
+    {
+      pageId: 'home',
+      slug: SITE_SLUG,
+      routeName: 'home-route',
+      routeParams: { slug: SITE_SLUG },
+      isRoot: true,
+      relativePath: '',
+      nestedNavItems: [],
+    },
+    {
+      pageId: 'p2',
+      slug: SITE_SLUG,
+      routeName: 'page-route',
+      routeParams: { slug: SITE_SLUG, pageSlug: 'page-2' },
+      isRoot: false,
+      relativePath: 'page-2',
+      nestedNavItems: [],
+    },
+  ] as unknown as NavItemViewModel[];
+
+  // Identical in every field the ownership check reads — which is the point.
+  const publishedContext = () => ({
+    ...createTestBrandPageContext(),
+    brandPageSlug: SITE_SLUG,
+    customDomain: undefined,
+    isPreview: false,
+    nav: { navItems },
+  });
+
+  const livePreviewContext = () => ({
+    ...publishedContext(),
+    isLivePreview: true,
+  });
+
+  const mountWith = async (context: object, url: string) => {
+    const router = createTestRouter();
+
+    router.push(`/${SITE_SLUG}`);
+    await router.isReady();
+
+    return mount(Button, {
+      propsData: {
+        context,
+        viewModel: createTestButtonViewModel({
+          url,
+          buttonLinkType: 'url',
+          clickActionField: 'url',
+          page: '',
+        }),
+      },
+      global: { plugins: [router] },
+    });
+  };
+
+  it.each([
+    ['published', publishedContext],
+    ['live preview', livePreviewContext],
+  ])('routes to page-2 in place on the %s site', async (_label, context) => {
+    const wrapper = await mountWith(context(), TYPED_URL);
+    const anchor = wrapper.get('a');
+
+    expect(wrapper.findComponent(RouterLink).exists()).toBe(true);
+    expect(anchor.attributes('target')).toBeUndefined();
+    expect(anchor.attributes('href')).toBe(`/${SITE_SLUG}/page-2`);
+  });
+
+  it.each([
+    ['published', publishedContext],
+    ['live preview', livePreviewContext],
+  ])(
+    'still opens a genuinely external link in a new tab on the %s site',
+    async (_label, context) => {
+      const wrapper = await mountWith(context(), 'https://instagram.com/acme');
+
+      expect(wrapper.findComponent(RouterLink).exists()).toBe(false);
+      expect(wrapper.get('a').attributes('target')).toBe('_blank');
+    },
+  );
+});

package/src/brand-page/components/images-section/ImagesSection.test.ts

@@ -2,6 +2,7 @@ import type { TextImageSectionViewModel } from '@brand-page/view-models';
 import { type ImagesSectionContentDisplayStyle } from '../../constants';
 import { shallowMount } from '@vue/test-utils';
 import { vi } from 'vitest';
+import { createRouter, createMemoryHistory } from 'vue-router';
 import ImagesSection from './ImagesSection.vue';
 import brandPageTestHelper from '@test-helpers/brand-page.tests-helper';
 
@@ -106,6 +107,96 @@ describe('brand site images section', () => {
     expect((wrapper.vm as any).imageModalSelectedImageIndex).toBeUndefined();
   });
 
+  test('onSelectImage routes an own-site image link in-app (same tab), not a new tab', () => {
+    // Arrange
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', name: 'home', component: { template: '<div />' } },
+        {
+          path: '/:slug/:pageSlug',
+          name: 'page',
+          component: { template: '<div />' },
+        },
+      ],
+    });
+    const pushSpy = vi.spyOn(router, 'push');
+
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      brandPageSlug: 'mysite',
+      pageTitle: '',
+      nav: {
+        navItems: [
+          {
+            relativePath: 'about',
+            routeName: 'page',
+            routeParams: { slug: 'mysite', pageSlug: 'about' },
+            nestedNavItems: [],
+          } as any,
+        ],
+      },
+    };
+
+    const itemWithOwnSiteLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: 'https://brand.site/mysite/about',
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithOwnSiteLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: { context, viewModel },
+      global: { plugins: [router] },
+    });
+
+    // Act
+    (wrapper.vm as any).onSelectImage(itemWithOwnSiteLink);
+
+    // Assert
+    expect(pushSpy).toHaveBeenCalledWith({
+      name: 'page',
+      params: { slug: 'mysite', pageSlug: 'about' },
+    });
+    expect(mockWindowOpen).not.toHaveBeenCalled();
+  });
+
+  test('onSelectImage keeps an external image link inert in the live preview', () => {
+    // Arrange — external link, live customer preview: the gate only blocks anchors,
+    // so this JS navigation must be stopped at the source.
+    const context = {
+      ...brandPageTestHelper.createTestBrandSiteContext(),
+      isLivePreview: true,
+      pageTitle: '',
+    };
+
+    const itemWithExternalLink = {
+      ...brandPageTestHelper.createTextImageSectionViewModelItems(1)[0],
+      imageLink: 'https://example.com',
+    };
+
+    const viewModel: TextImageSectionViewModel = {
+      ...brandPageTestHelper.createTestTextImageSectionViewModel(),
+      enablePopup: false,
+      items: [itemWithExternalLink],
+    };
+
+    const wrapper = shallowMount(ImagesSection, {
+      propsData: { context, viewModel },
+    });
+
+    // Act
+    (wrapper.vm as any).onSelectImage(itemWithExternalLink);
+
+    // Assert
+    expect(mockWindowOpen).not.toHaveBeenCalled();
+    expect((wrapper.vm as any).imageModalSelectedImageIndex).toBeUndefined();
+  });
+
   test('onSelectImage should show popup when enablePopup is true and no imageLink', () => {
     // Arrange
     const context = {

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

@@ -13,7 +13,6 @@
           :class="{
             'tw-cursor-pointer': shouldShowCursor(item),
           }"
-          :data-preview-interactive="previewInteractive(item)"
           @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <FallbackImage
@@ -30,7 +29,6 @@
           :alt="itemImageAltText(item)"
           :context="context"
           :content-index="contentIndex"
-          :data-preview-interactive="previewInteractive(item)"
           @click="shouldBeClickable(item) ? onSelectImage(item) : undefined"
         />
         <Placeholder
@@ -59,6 +57,7 @@
 </template>
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import TextMediaSection from '../text-media-section/TextMediaSection.vue';
 import ImageGalleryModal from '../image-gallery/ImageGalleryModal.vue';
 import BpImage from '../image/Image.vue';
@@ -79,7 +78,12 @@ import { MEDIA_ONLY } from '../../constants';
 import {
   getImageAltText,
   getImagesSectionAspectRatioByDisplayStyle,
+  isPreviewMode,
 } from '@brand-page/utils';
+import {
+  findNavItemByOwnSiteUrl,
+  toRouteLocation,
+} from '@src/brand-page/utils/route.util';
 import isURL from 'validator/lib/isURL';
 
 const DEFAULT_CENTERED_ASPECT_RATIO = '2/1';
@@ -92,6 +96,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const router = useRouter();
+
 const imageModalSelectedImageIndex = ref<number | undefined>(undefined);
 const imagesBroken = reactive<Record<number, boolean>>({});
 
@@ -204,6 +210,27 @@ const showDisplayImageInFullWidth = computed((): boolean => {
 // Methods
 const onSelectImage = (item: TextMediaItem) => {
   if (item.imageLink && isURL(item.imageLink)) {
+    // A link to one of this site's own pages routes in-app (same tab), like a
+    // button/banner link — instead of the old always-new-tab `window.open`.
+    const ownSiteNavItem = findNavItemByOwnSiteUrl({
+      url: item.imageLink,
+      navItems: props.context.nav.navItems,
+      brandPageType: props.context.brandPageType,
+      brandPageSlug: props.context.brandPageSlug,
+      customDomain: props.context.customDomain,
+    });
+
+    if (ownSiteNavItem) {
+      router.push(toRouteLocation(ownSiteNavItem));
+      return;
+    }
+
+    // External link: new tab on the published site. The live preview only blocks
+    // anchors, so guard this JS navigation at the source — it stays inert there.
+    if (isPreviewMode(props.context)) {
+      return;
+    }
+
     window.open(item.imageLink, '_blank', 'noopener,noreferrer');
     return;
   }
@@ -224,14 +251,6 @@ 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/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,10 +2,7 @@
   <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,7 +37,6 @@
               'tw-justify-center tw-flex': isFeaturedDisplayStyle,
             }"
             :style="getPaymentOptionButtonStyleById(paymentOption.id)"
-            data-preview-interactive
             @click="onPaymentOptionSelect(paymentOption.id)"
           >
             <div