@designcrowd/library.brand-page 6.1.1-json-prereq-3 → 6.1.1

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

@@ -12,6 +12,7 @@ import {
   getMessageValidationError,
   getNameValidationError,
   getPhoneValidationError,
+  isPreviewMode,
 } from '@brand-page/utils';
 import { isDecorativeButtonStyle } from '../../utils/button.util';
 import brandPageClient from '../../clients/brand-page.client';
@@ -32,7 +33,7 @@ import {
   mutedTextForBackground,
   backgroundColorFromStyle,
 } from '@brand-page/utils';
-import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
 export interface FieldValue {
@@ -180,10 +181,7 @@ export default defineComponent({
     },
 
     title(): string {
-      // BP-5787: title may be RTE JSON (not a string), so `.trim()` would
-      // throw — read the visible text via getPlainTextFromRTE to decide
-      // whether to fall back to the default.
-      return getPlainTextFromRTE(this.viewModel.title)
+      return this.viewModel.title && this.viewModel.title.trim() !== ''
         ? this.viewModel.title
         : 'Contact Us';
     },
@@ -265,7 +263,11 @@ export default defineComponent({
       }));
   },
   mounted(): void {
-    if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+    if (
+      this.context?.recaptchaSiteKey &&
+      !isPreviewMode(this.context) &&
+      this.recaptcha
+    ) {
       this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
     }
   },
@@ -277,7 +279,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.isPreview || !this.context.brandPageToken) {
+      if (isPreviewMode(this.context) || !this.context.brandPageToken) {
         if (
           process.env.NODE_ENV !== 'production' &&
           !this.context.brandPageSlug

package/src/brand-page/components/cookie-consent/CookieConsent.vue

@@ -21,6 +21,7 @@ watch(
   <div
     v-if="isEnabled"
     id="cookie-consent-modal"
+    data-component="cookie-consent"
     class="c-container tw-fixed tw-bottom-0 tw-left-0 tw-right-0 tw-z-50 tw-p-6 tw-flex tw-gap-4 tw-justify-between tw-flex-col tw-bg-white tw-items-center"
   >
     <p class="c-text tw-font-sans tw-m-0 tw-text-grayscale-800">

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

@@ -5,6 +5,7 @@ import brandPageClient from '../../clients/brand-page.client';
 import {
   getEmailValidationError,
   contentPaddingStyle as toContentPaddingStyle,
+  isPreviewMode,
   mutedTextForBackground,
   backgroundColorFromStyle,
 } from '@brand-page/utils';
@@ -61,7 +62,11 @@ export default defineComponent({
   mounted() {
     this.show = true;
 
-    if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+    if (
+      this.context?.recaptchaSiteKey &&
+      !isPreviewMode(this.context) &&
+      this.recaptcha
+    ) {
       this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
     }
   },
@@ -138,7 +143,7 @@ export default defineComponent({
     isFormDisabled(): boolean {
       return (
         this.hasFormError ||
-        this.isPreview ||
+        isPreviewMode(this.context) ||
         !this.brandPageToken ||
         this.isSubmitting
       );
@@ -166,7 +171,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.isPreview || !this.brandPageToken) {
+      if (isPreviewMode(this.context) || !this.brandPageToken) {
         return;
       }
 

package/src/brand-page/components/navigation/navigation-carousel/NavigationCarousel.vue

@@ -1,5 +1,9 @@
 <template>
-  <div ref="containerRef" class="tw-flex tw-items-center tw-gap-2">
+  <div
+    ref="containerRef"
+    data-component="navigation-carousel"
+    class="tw-flex tw-items-center tw-gap-2"
+  >
     <div
       :class="[
         'tw-flex-shrink-0',

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 } from '@brand-page/utils';
+import { getRenderText, isPreviewMode } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
 
 export default defineComponent({
@@ -27,6 +27,9 @@ 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,7 @@
         :icon-style="socialLinksIconStyle"
         :is-stack-layout-on-mobile="false"
         :links="viewModel.socialLinks"
-        :is-preview="context.isPreview"
+        :is-preview="isInPreviewMode"
         :context="context"
       />
       <!-- end social links -->

package/src/brand-page/components/payment/Payment.mixin.ts

@@ -18,6 +18,7 @@ import type {
   SupportMeViewModel,
 } from '@brand-page/view-models';
 import raygunUtil from '@brand-page/utils/raygun.util';
+import { isPreviewMode } from '@brand-page/utils';
 import { paymentTr } from '@src/composables/useTranslate';
 
 const DEFAULT_PAYMENT_SUCCESS_MESSAGE = paymentTr(
@@ -99,11 +100,11 @@ export default defineComponent({
     },
 
     canMakePayment(): boolean {
-      return !this.context.isPreview && this.isPaymentConfigActive;
+      return !isPreviewMode(this.context) && this.isPaymentConfigActive;
     },
 
     showPaymentBlock(): boolean {
-      return this.context.isPreview || this.isPaymentConfigActive;
+      return isPreviewMode(this.context) || this.isPaymentConfigActive;
     },
 
     paymentOptions(): PaymentOption[] {
@@ -214,7 +215,7 @@ export default defineComponent({
         ? paymentState.PaymentOptionSelection
         : paymentState.IncompleteConfig;
 
-      if (this.context.isPreview || !paymentConfigId) {
+      if (isPreviewMode(this.context) || !paymentConfigId) {
         return;
       }
 

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

@@ -14,7 +14,10 @@ import type { RequestPaymentViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
-import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
+import {
+  contentPaddingStyle as toContentPaddingStyle,
+  isPreviewMode,
+} from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 
 const MAX_CUSTOM_REQUEST_CHARS = 500;
@@ -43,6 +46,10 @@ export default defineComponent({
     };
   },
   computed: {
+    isInPreviewMode(): boolean {
+      return isPreviewMode(this.context);
+    },
+
     contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
       return toContentPaddingStyle(this.viewModel);
     },

package/src/brand-page/components/payment/request-payment/RequestPayment.vue

@@ -51,7 +51,7 @@
               <div
                 v-if="
                   !isTextDisplayStyle &&
-                  (paymentOption.imageUrl || context.isPreview)
+                  (paymentOption.imageUrl || isInPreviewMode)
                 "
                 class="tw-rounded tw-overflow-hidden tw-shrink-0"
                 :class="{

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

@@ -51,6 +51,7 @@ import {
   getCurrentLocale,
 } from '@src/composables/useTranslate';
 import { hasProfileContent, saveContact } from '@brand-page/utils/vcard.util';
+import { isPreviewMode } from '@brand-page/utils';
 import { useConsent } from '../../composables/consent.composable';
 import PopupCard from './popup-card/PopupCard.vue';
 import Button from '../button/Button.vue';
@@ -185,7 +186,7 @@ const url = computed((): string => {
   }
 
   return localisedRouteStore.getBuilderLandingPageByTypeUrl(
-    props.context.isPreview,
+    isPreviewMode(props.context),
     props.context.brandPageType,
     props.context.isDesignCom,
     getCurrentLocale(),

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

@@ -148,7 +148,10 @@ import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { shopTr } from '@src/composables/useTranslate';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
-import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
+import {
+  contentPaddingStyle as toContentPaddingStyle,
+  isPreviewMode,
+} from '@brand-page/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -166,13 +169,13 @@ const cart = computed(() => cartSettingsStore.cartItems);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
 
 const shouldShowContainer = computed(() => {
-  return props.context.isPreview || data.isActivePaymentProvider;
+  return isPreviewMode(props.context) || data.isActivePaymentProvider;
 });
 
 const checkPaymentConfigStatus = async () => {
   const paymentConfigId = props.viewModel.shopPaymentConfig.paymentConfig?.id;
 
-  if (props.context.isPreview || !paymentConfigId) {
+  if (isPreviewMode(props.context) || !paymentConfigId) {
     return;
   }
 

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

@@ -33,7 +33,10 @@ 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 } from '@brand-page/utils';
+import {
+  contentPaddingStyle as toContentPaddingStyle,
+  isPreviewMode,
+} from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -87,7 +90,7 @@ const id = computed((): string => {
 });
 
 const isPreview = computed((): boolean => {
-  return props.context.isPreview;
+  return isPreviewMode(props.context);
 });
 
 const links = computed((): LinksItem[] => {

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -21,13 +21,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import {
-  hasRTEContent,
-  getPlainTextFromRTE,
-  renderRteToHtml,
-  isTiptapDocument,
-  type RichTextValue,
-} from '@brand-page-maker/utils';
+import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
 import {
   type FluidTextData,
   type TextStyleDeclaration,
@@ -43,8 +37,7 @@ import {
 
 interface Props {
   textStyle: TextStyleDeclaration | undefined;
-  // BP-5787: an RTE field is a legacy inline-HTML string or a Tiptap JSON doc.
-  text: RichTextValue;
+  text: string;
   element?: string;
   slug?: string;
 }
@@ -86,20 +79,16 @@ const textStyleRTE = computed(() => {
   };
 });
 
-// Render either form (legacy HTML string or Tiptap JSON) to final HTML.
-// For a string this returns it unchanged, so the legacy path is unaffected.
-const renderedHtml = computed(() => renderRteToHtml(props.text));
-
 const isRTEContent = computed(() => {
-  return isTiptapDocument(props.text) || hasRTEContent(renderedHtml.value);
+  return hasRTEContent(props.text);
 });
 
 const sanitizeText = computed(() => {
-  if (isRTEContent.value && !getPlainTextFromRTE(renderedHtml.value)) {
+  if (isRTEContent.value && !getPlainTextFromRTE(props.text)) {
     return '';
   }
 
-  return renderedHtml.value;
+  return props.text;
 });
 
 const fontSize = computed<any>(() => props.textStyle.fontSize);
@@ -171,7 +160,7 @@ const applyScale = () => {
   }
 
   const fontSizeMatchInRTEText = [
-    ...renderedHtml.value.matchAll(
+    ...props.text.matchAll(
       /style="(?:[^"]*?)\bfont-size\s*:\s*(?<fontSize>[^;"']+)[^"]*?"/gm,
     ),
   ].map((x) => parseFloat(x.groups?.fontSize || '1em'));

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

@@ -38,26 +38,34 @@ type Store = {
   updateConsent: (c: ConsentType) => void;
   featureEnabled: boolean;
   showConsentModal: boolean;
+  /** When false, consent is not read from / written to localStorage — used in
+   * preview so the modal re-shows on every refresh. */
+  persist: boolean;
 };
 
 const store = reactive<Store>({
   consent: undefined,
   featureEnabled: false,
   showConsentModal: false,
+  persist: true,
   updateConsent(c) {
     this.consent = c;
   },
 });
 
 export const useConsent = () => {
-  const initialise = (options: { featureEnabled: boolean }): ConsentType => {
+  const initialise = (options: {
+    featureEnabled: boolean;
+    persist?: boolean;
+  }): ConsentType => {
     if (!options.featureEnabled) {
       return undefined;
     }
 
     store.featureEnabled = options.featureEnabled;
+    store.persist = options.persist ?? true;
 
-    store.consent = getStoredConsent();
+    store.consent = store.persist ? getStoredConsent() : undefined;
 
     store.showConsentModal =
       options.featureEnabled && !accepted.value && !declined.value;
@@ -74,14 +82,20 @@ export const useConsent = () => {
   );
 
   const grant = (cb?: () => unknown) => {
-    storeConsent('granted');
+    if (store.persist) {
+      storeConsent('granted');
+    }
+
     store.updateConsent('granted');
     store.showConsentModal = store.featureEnabled && !accepted.value;
     cb && cb();
   };
 
   const deny = (cb?: () => unknown) => {
-    storeConsent('denied');
+    if (store.persist) {
+      storeConsent('denied');
+    }
+
     store.updateConsent('denied');
     store.showConsentModal = false;
     cb && cb();

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

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

package/src/brand-page/models/index.ts

@@ -30,15 +30,6 @@ import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
 import * as uuid from 'uuid';
 import type { BrandPagePaymentConfig } from './payment.model';
-import type { JSONContent } from '@tiptap/vue-3';
-
-/**
- * BP-5787 — a rich-text field is either a legacy inline-HTML string or a
- * Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
- * `string`) forces every consumer to handle both forms — surfacing at compile
- * time any code that assumes a plain string (e.g. `.replace`, `.length`).
- */
-export type RichTextValue = string | JSONContent;
 
 export * from './brand-page-context.model';
 export * from './payment.model';
@@ -289,7 +280,7 @@ export interface TextContent extends Content {
   /**
    * For BrandPage/BrandContact only
    */
-  text: RichTextValue;
+  text: string;
   /**
    * For BrandSite
    */
@@ -313,9 +304,9 @@ export interface TextContent extends Content {
 
 export interface ProfileContent extends Content {
   avatarImageUrl: string;
-  name: RichTextValue;
-  title: RichTextValue;
-  description: RichTextValue;
+  name: string;
+  title: string;
+  description: string;
   backgroundColor: BrandPageCssStyle;
   colorReplacements: ColorReplacement[];
   mediaType?: string;
@@ -336,7 +327,7 @@ export interface MapContent extends Content {
 
 export interface MailingListContent extends Content {
   acceptedFields?: 'emailOnly' | 'nameAndEmail';
-  title: RichTextValue;
+  title: string;
   buttonText: string;
   titleStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
@@ -396,10 +387,10 @@ export interface FormField {
 export interface ContactFormContent extends Content {
   type: 'contact-form';
   displayStyle: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
-  successMessage: RichTextValue;
+  successMessage: string;
   fields: FormField[];
   responseEmail: string;
   imageUrl?: string;
@@ -419,8 +410,8 @@ export interface ContactFormContent extends Content {
 export interface BannerSectionContent extends Content {
   type: 'banner-section';
   imageUrl: string;
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string | false;
   url: string;
   email?: string;
@@ -450,8 +441,8 @@ export const MEDIA_TYPES = {
 export type MediaType = keyof typeof MEDIA_TYPES;
 
 export interface TextMediaItem extends ImageItem {
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   itemsId: number;
 
   buttonText?: string | false;
@@ -475,8 +466,8 @@ export interface TextShapeItem extends TextMediaItem {
 export interface ShapeItem extends ImageItem {
   colorReplacements: ColorReplacement[];
   mediaType: MediaType;
-  title?: RichTextValue;
-  paragraph?: RichTextValue;
+  title?: string;
+  paragraph?: string;
 
   // overrides for personalisation
   titleOverride?: string;
@@ -487,9 +478,9 @@ export interface TestimonialItems {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
   imageUrl: string;
-  name: RichTextValue;
-  position: RichTextValue;
-  testimonials: RichTextValue;
+  name: string;
+  position: string;
+  testimonials: string;
   colorReplacements: ColorReplacement[];
   mediaType: string;
   size?: string;
@@ -505,7 +496,7 @@ export interface TestimonialItems {
 export interface TextItem {
   /** Stable per-item identifier. See ImageItem.id. */
   id: string;
-  text: RichTextValue;
+  text: string;
   textStyle: TextStyleDeclaration;
 
   // overrides for personalisation
@@ -527,8 +518,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
 }
 
 export interface MediaSection extends Content {
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   items: TextShapeItem[] | TextMediaItem[];
   titleStyle: TextStyleDeclaration;
@@ -547,7 +538,7 @@ export interface ColorReplacement {
 
 export interface TestimonialSectionContent extends Content {
   type: 'testimonial-section';
-  title: RichTextValue;
+  title: string;
   displayStyle: string;
   items: TestimonialItems[];
   titleStyle: TextStyleDeclaration;
@@ -562,8 +553,8 @@ export interface TestimonialSectionContent extends Content {
 export interface AboutSectionContent extends Content {
   type: 'about-section';
   imageUrl: string;
-  title: RichTextValue;
-  paragraph: RichTextValue;
+  title: string;
+  paragraph: string;
   displayStyle: string;
   titleStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
@@ -592,7 +583,7 @@ export type SocialLinksIconDisplayStyle =
 
 export interface SocialLinksContent extends Content {
   type: 'social-links';
-  title: RichTextValue;
+  title: string;
   links: LinksItem[];
   iconDisplayStyle: SocialLinksIconDisplayStyle;
   iconFillStyles: BrandPageCssStyle;
@@ -619,8 +610,8 @@ export interface DividerSectionContent extends Content {
 
 export interface BookingSectionContent extends Content {
   type: 'booking-section';
-  title: RichTextValue;
-  description: RichTextValue;
+  title: string;
+  description: string;
   buttonText: string;
   url: string;
   email?: string;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -462,7 +462,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -914,7 +914,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1373,7 +1373,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 20,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/context.util.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import type { BrandPageContext } from '../models';
+import { getSlugFromContext, isPreviewMode } from './context.util';
+
+const baseContext = {
+  isPreview: false,
+  isLivePreview: false,
+  brandPageSlug: 'my-site',
+} as unknown as BrandPageContext;
+
+describe('isPreviewMode', () => {
+  it('is false for a live render (neither preview flag set)', () => {
+    expect(isPreviewMode(baseContext)).toBe(false);
+  });
+
+  it('is true for the editor preview', () => {
+    expect(isPreviewMode({ ...baseContext, isPreview: true })).toBe(true);
+  });
+
+  it('is true for the customer live-preview', () => {
+    expect(isPreviewMode({ ...baseContext, isLivePreview: true })).toBe(true);
+  });
+
+  it('treats a missing isLivePreview as not-preview', () => {
+    const ctx = { isPreview: false } as unknown as BrandPageContext;
+
+    expect(isPreviewMode(ctx)).toBe(false);
+  });
+});
+
+describe('getSlugFromContext', () => {
+  it('returns the literal editor slug for the editor preview only', () => {
+    expect(getSlugFromContext({ ...baseContext, isPreview: true })).toBe(
+      'slug',
+    );
+  });
+
+  it('returns the real slug for a customer preview (renders like live)', () => {
+    expect(getSlugFromContext({ ...baseContext, isLivePreview: true })).toBe(
+      'my-site',
+    );
+  });
+});

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

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