@designcrowd/library.brand-page 6.1.0-websitev2-dev-2 → 6.1.0

package/lib/src/lib.js

@@ -22,7 +22,6 @@ export { BrandPageMaker, SeoPageSettings, UrlSettings, GoogleAnalytics, PublishB
 import LogoRender from './brand-page/components/logo/LogoRender.vue';
 export { LogoRender };
 export { default as Page } from './brand-page/components/page/Page.vue';
-export { Loader } from '@designcrowd/fe-shared-lib';
 export { default as CookieConsent } from './brand-page/components/cookie-consent/CookieConsent.vue';
 export { default as SensitiveContentModal } from './brand-page/components/sensitive-content/SensitiveContentModal.vue';
 // functions

package/lib/src/metadata-builder/builders/global-styles-builder.js

@@ -1,7 +1,6 @@
 import {} from '../../brand-page/models';
 import { BaseMetadataBuilder, } from '../models';
 import { GLOBAL_STYLE_CHECKS, TEXT_STYLE_OPTION_KEYS, } from './section-rules/global-styles.rules';
-import { collectChangedFontFamilies, propagateFontFamiliesToContents, } from './global-font-propagation';
 export class GlobalStylesBuilder extends BaseMetadataBuilder {
     constructor(request, logger) {
         super(request, logger);
@@ -31,21 +30,6 @@ export class GlobalStylesBuilder extends BaseMetadataBuilder {
         }
         if (args.textStyles) {
             this.applyTextStyles(model, args.textStyles);
-            // A category font change only reaches preset-bound content by itself;
-            // detached section styles and inline RTE font marks would still render
-            // the old family. Propagate so the change is actually visible (BP-5780).
-            const changedFamilies = collectChangedFontFamilies(args.textStyles);
-            if (Object.keys(changedFamilies).length) {
-                try {
-                    propagateFontFamiliesToContents(model, changedFamilies);
-                }
-                catch (error) {
-                    this.log({
-                        message: 'Global font propagation to existing contents failed — presets still updated',
-                        error,
-                    });
-                }
-            }
         }
         if (args.buttonStyles) {
             this.applyButtonStyles(model, args.buttonStyles);

package/lib/src/metadata-builder/builders/section-builders/index.d.ts

@@ -1,7 +1,6 @@
 export { BaseSectionBuilder, type SectionBuilderPayload, } from './base-section-builder';
 export { BannerSectionBuilder } from './banner-section-builder';
 export { BookingSectionBuilder } from './booking-section-builder';
-export { SupportMeBuilder } from './support-me-builder';
 export { AboutSectionBuilder } from './about-section-builder';
 export { ContactFormBuilder } from './contact-form-builder';
 export { DividerSectionBuilder } from './divider-section-builder';

package/lib/src/metadata-builder/builders/section-builders/index.js

@@ -1,7 +1,6 @@
 export { BaseSectionBuilder, } from './base-section-builder';
 export { BannerSectionBuilder } from './banner-section-builder';
 export { BookingSectionBuilder } from './booking-section-builder';
-export { SupportMeBuilder } from './support-me-builder';
 export { AboutSectionBuilder } from './about-section-builder';
 export { ContactFormBuilder } from './contact-form-builder';
 export { DividerSectionBuilder } from './divider-section-builder';

package/lib/src/metadata-builder/builders/section-builders/text-section-builder.js

@@ -131,17 +131,14 @@ export class TextSectionBuilder extends BaseSectionBuilder {
             applyTextItems(content, args.items, textStyleOptions);
         }
         else if (this.mode === 'create') {
-            // An EMPTY items array must not shadow the single text field — the AI emits
-            // `items: []` alongside `text` and the section rendered blank (QA 2026-07-05,
-            // T06: items=[] set textItems=[] and `text` was silently discarded).
-            if (args.items && Array.isArray(args.items) && args.items.length > 0) {
+            if (args.items && Array.isArray(args.items)) {
                 applyTextItems(content, args.items, textStyleOptions);
             }
             else {
                 applySingleTextField(content, args, textStyleOptions);
             }
         }
-        else if ((args.items && Array.isArray(args.items) && args.items.length > 0) ||
+        else if ((args.items && Array.isArray(args.items)) ||
             args._remove_item_ids?.length) {
             // Update: id-based add / edit / move / remove in a single pass.
             mergeTextItems(content, args.items ?? [], args._remove_item_ids, textStyleOptions);

package/lib/src/metadata-builder/builders/section-field-maps.js

@@ -131,16 +131,9 @@ const socialButtonFields = defineFieldMap({
     title: 'title',
     url: 'url',
 });
-const supportMeFields = defineFieldMap({
-    title: 'title',
-    description: 'description',
-    success_message: 'successMessage',
-    display_style: 'displayStyle',
-});
 export const SECTION_FIELD_MAPS = {
     'banner-section': bannerFields,
     'booking-section': bookingFields,
-    'support-me': supportMeFields,
     'about-section': aboutFields,
     'testimonial-section': testimonialFields,
     'images-section': imagesSectionFields,
@@ -215,13 +208,6 @@ const mailingListStyleFields = defineFieldMap({
     title_style: 'titleStyle',
     button_text_style: 'buttonTextStyle',
 });
-const supportMeStyleFields = defineFieldMap({
-    title_style: 'titleStyle',
-    heading_style: 'headingStyle',
-    description_style: 'descriptionStyle',
-    item_text_style: 'itemTextStyle',
-    button_text_style: 'buttonTextStyle',
-});
 const socialLinksStyleFields = defineFieldMap({
     icon_fill_style: 'iconFillStyles',
     icon_background_style: 'iconBackgroundStyles',
@@ -229,7 +215,6 @@ const socialLinksStyleFields = defineFieldMap({
 export const STYLE_FIELD_MAPS = {
     'banner-section': bannerStyleFields,
     'booking-section': bookingStyleFields,
-    'support-me': supportMeStyleFields,
     'about-section': aboutStyleFields,
     text: textStyleFields,
     'testimonial-section': testimonialStyleFields,

package/lib/src/metadata-builder/builders/section-field-utils.d.ts

@@ -53,10 +53,5 @@ export declare const resolveGlobalPresetIntoStyle: (style: object | undefined, t
  * updates without re-resolving a preset.
  */
 export declare const applyDetachedStyleOverride: <T extends object>(current: T | undefined, updates: Partial<T>, textStyleOptions: TextStyleOptions | undefined) => T;
-/**
- * Rewrites the stored RTE HTML's inline colour marks. Injectable for tests;
- * the default uses the external Tiptap editor (font-propagation precedent).
- */
-export type ApplyColorToRTE = (html: string, color: string) => string;
-export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions, applyColor?: ApplyColorToRTE) => void;
+export declare const applyStyleFields: (content: Content, args: SectionToolArguments, sectionType: string, textStyleOptions?: TextStyleOptions) => void;
 export {};

package/lib/src/metadata-builder/builders/section-field-utils.js

@@ -1,8 +1,5 @@
 import { BUTTON_LINK_TYPE } from '../../brand-page/models';
 import { isTiptapDocument, } from '../parsers/section-tool-arguments';
-import { hasRTEContent } from '../../brand-page-maker/utils';
-import { useExternalRichTextEditor } from '../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { applyStyleToRTEText } from '../helpers/rte.helpers';
 import { getSectionFieldMap, getStyleFieldMap } from './section-field-maps';
 const isUrlField = (aiKey) => aiKey.endsWith('_url');
 export const isValidUrl = (value) => {
@@ -120,55 +117,22 @@ export const applyDetachedStyleOverride = (current, updates, textStyleOptions) =
     ...resolveGlobalPresetIntoStyle(current, textStyleOptions),
     ...updates,
 });
-export const applyStyleFields = (content, args, sectionType, textStyleOptions, applyColor) => {
+export const applyStyleFields = (content, args, sectionType, textStyleOptions) => {
     const styleMap = getStyleFieldMap(sectionType);
     if (!styleMap)
         return;
     const record = content;
-    let editor;
-    const applyColorToHtml = applyColor ??
-        ((html, color) => {
-            editor = editor ?? useExternalRichTextEditor().externalEditor;
-            return applyStyleToRTEText(editor, html, {
-                color,
-            });
-        });
-    try {
-        for (const [aiKey, modelKey] of Object.entries(styleMap)) {
-            if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
-                continue;
-            const aiStyle = args[aiKey];
-            const filtered = {};
-            for (const [k, v] of Object.entries(aiStyle)) {
-                const normalized = normalizeStyleValue(k, v);
-                if (normalized !== undefined)
-                    filtered[k] = normalized;
-            }
-            const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
-            record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
-            // A colour patch without new text leaves the field's EXISTING inline
-            // textStyle marks in place — and inline marks override every style layer
-            // at render, so the old colour survives on a recoloured band (invisible
-            // text, AI QA 2026-07-05 rerun). Propagate the new colour into the
-            // stored HTML, mirroring global-font-propagation for font families.
-            const textKey = modelKey.endsWith('Style')
-                ? modelKey.slice(0, -'Style'.length)
-                : undefined;
-            const textAiKey = aiKey.endsWith('_style')
-                ? aiKey.slice(0, -'_style'.length)
-                : undefined;
-            const newColor = filtered.color;
-            if (textKey &&
-                typeof newColor === 'string' &&
-                newColor &&
-                !(textAiKey && textAiKey in args) &&
-                typeof record[textKey] === 'string' &&
-                hasRTEContent(record[textKey])) {
-                record[textKey] = applyColorToHtml(record[textKey], newColor);
-            }
+    for (const [aiKey, modelKey] of Object.entries(styleMap)) {
+        if (!(aiKey in args) || !args[aiKey] || typeof args[aiKey] !== 'object')
+            continue;
+        const aiStyle = args[aiKey];
+        const filtered = {};
+        for (const [k, v] of Object.entries(aiStyle)) {
+            const normalized = normalizeStyleValue(k, v);
+            if (normalized !== undefined)
+                filtered[k] = normalized;
         }
-    }
-    finally {
-        editor?.destroy();
+        const resolved = resolveGlobalPresetIntoStyle(content[modelKey], textStyleOptions);
+        record[modelKey] = { ...resolved, ...filtered, textStyleType: undefined };
     }
 };

package/lib/src/metadata-builder/metadata-executor.js

@@ -3,7 +3,7 @@ import {} from '../brand-page/models';
 import { BUILDER_TYPES, } from './models';
 import { UpdateContentTextBuilder } from './builders/update-content-text-builder';
 import { UpdateContentTextStyleBuilder } from './builders/update-content-text-style-builder';
-import { BannerSectionBuilder, BookingSectionBuilder, SupportMeBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
+import { BannerSectionBuilder, BookingSectionBuilder, AboutSectionBuilder, ContactFormBuilder, DividerSectionBuilder, TextSectionBuilder, TestimonialSectionBuilder, ImagesSectionBuilder, ShapesSectionBuilder, SocialLinksBuilder, ImageGalleryBuilder, ProfileSectionBuilder, MailingListSectionBuilder, ButtonSectionBuilder, DeleteSectionBuilder, MoveSectionBuilder, } from './builders/section-builders';
 import { AddPageBuilder } from './builders/add-page-builder';
 import { RemovePageBuilder } from './builders/remove-page-builder';
 import { RenamePageBuilder } from './builders/rename-page-builder';
@@ -20,7 +20,6 @@ const getBuilderRegistry = () => ({
     // Section builders (create)
     [BUILDER_TYPES.CREATE_BANNER_SECTION]: BannerSectionBuilder,
     [BUILDER_TYPES.CREATE_BOOKING_SECTION]: BookingSectionBuilder,
-    [BUILDER_TYPES.CREATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.CREATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.CREATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.CREATE_DIVIDER_SECTION]: DividerSectionBuilder,
@@ -47,7 +46,6 @@ const getBuilderRegistry = () => ({
     // Section builders (update)
     [BUILDER_TYPES.UPDATE_BANNER_SECTION]: BannerSectionBuilder,
     [BUILDER_TYPES.UPDATE_BOOKING_SECTION]: BookingSectionBuilder,
-    [BUILDER_TYPES.UPDATE_SUPPORT_ME]: SupportMeBuilder,
     [BUILDER_TYPES.UPDATE_ABOUT_SECTION]: AboutSectionBuilder,
     [BUILDER_TYPES.UPDATE_CONTACT_FORM]: ContactFormBuilder,
     [BUILDER_TYPES.UPDATE_DIVIDER_SECTION]: DividerSectionBuilder,

package/lib/src/metadata-builder/models.d.ts

@@ -29,7 +29,6 @@ export declare const BUILDER_TYPES: {
     readonly CREATE_TWITCH: "create-twitch";
     readonly CREATE_TIKTOK: "create-tiktok";
     readonly CREATE_BOOKING_SECTION: "create-booking-section";
-    readonly CREATE_SUPPORT_ME: "create-support-me";
     readonly UPDATE_BANNER_SECTION: "update-banner-section";
     readonly UPDATE_ABOUT_SECTION: "update-about-section";
     readonly UPDATE_CONTACT_FORM: "update-contact-form";
@@ -55,7 +54,6 @@ export declare const BUILDER_TYPES: {
     readonly UPDATE_TWITCH: "update-twitch";
     readonly UPDATE_TIKTOK: "update-tiktok";
     readonly UPDATE_BOOKING_SECTION: "update-booking-section";
-    readonly UPDATE_SUPPORT_ME: "update-support-me";
     readonly DELETE_SECTION: "delete-section";
     readonly MOVE_SECTION: "move-section";
     readonly ADD_PAGE: "add-page";

package/lib/src/metadata-builder/models.js

@@ -28,7 +28,6 @@ export const BUILDER_TYPES = {
     CREATE_TWITCH: 'create-twitch',
     CREATE_TIKTOK: 'create-tiktok',
     CREATE_BOOKING_SECTION: 'create-booking-section',
-    CREATE_SUPPORT_ME: 'create-support-me',
     // Per-section builder types (update)
     UPDATE_BANNER_SECTION: 'update-banner-section',
     UPDATE_ABOUT_SECTION: 'update-about-section',
@@ -55,7 +54,6 @@ export const BUILDER_TYPES = {
     UPDATE_TWITCH: 'update-twitch',
     UPDATE_TIKTOK: 'update-tiktok',
     UPDATE_BOOKING_SECTION: 'update-booking-section',
-    UPDATE_SUPPORT_ME: 'update-support-me',
     // Section-level operations
     DELETE_SECTION: 'delete-section',
     MOVE_SECTION: 'move-section',

package/lib/src/metadata-builder/parsers/ai-toolcall-parser.d.ts

@@ -30,7 +30,6 @@ export declare const AI_ASSISTANT_TOOL_NAMES: {
     readonly BUILD_TESTIMONIAL_SECTION: "build_testimonial-section_section";
     readonly BUILD_DIVIDER_SECTION: "build_divider-section_section";
     readonly BUILD_BOOKING_SECTION: "build_booking-section_section";
-    readonly BUILD_SUPPORT_ME_SECTION: "build_support-me_section";
     readonly DELETE_SECTION: "delete_section";
     readonly MOVE_SECTION: "move_section";
     readonly ADD_PAGE: "add_page";

package/lib/src/metadata-builder/parsers/ai-toolcall-parser.js

@@ -34,7 +34,6 @@ export const AI_ASSISTANT_TOOL_NAMES = {
     BUILD_TESTIMONIAL_SECTION: 'build_testimonial-section_section',
     BUILD_DIVIDER_SECTION: 'build_divider-section_section',
     BUILD_BOOKING_SECTION: 'build_booking-section_section',
-    BUILD_SUPPORT_ME_SECTION: 'build_support-me_section',
     // Section-level operation tools
     DELETE_SECTION: 'delete_section',
     MOVE_SECTION: 'move_section',
@@ -114,9 +113,6 @@ export const SECTION_TOOL_MAP = {
     [AI_ASSISTANT_TOOL_NAMES.BUILD_BOOKING_SECTION]: {
         sectionType: 'booking-section',
     },
-    [AI_ASSISTANT_TOOL_NAMES.BUILD_SUPPORT_ME_SECTION]: {
-        sectionType: 'support-me',
-    },
 };
 export const parseToolCalls = (toolCalls) => {
     if (!toolCalls || toolCalls.length === 0) {

package/lib/src/metadata-builder/parsers/section-tool-arguments.d.ts

@@ -6,7 +6,7 @@
  */
 import type { ContentType } from '../../brand-page/models';
 /** Content types not supported by the AI builder. */
-type UnsupportedContentType = 'logo' | 'video' | 'map' | 'request-payment' | 'shop-section';
+type UnsupportedContentType = 'logo' | 'video' | 'map' | 'request-payment' | 'support-me' | 'shop-section';
 export type SectionType = Exclude<ContentType, UnsupportedContentType>;
 export interface TiptapMark {
     type: 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'textStyle' | 'highlight';
@@ -407,25 +407,13 @@ export interface BookingSectionArguments {
     padding_top?: number;
     padding_bottom?: number;
 }
-export interface SupportMeArguments {
-    title?: string;
-    description?: string;
-    success_message?: string;
-    /** Matches DISPLAY_STYLE_PREVIEW / DISPLAY_STYLE_COLLAPSED. */
-    display_style?: 'preview' | 'collapsed';
-    title_style?: TextStyleArguments;
-    heading_style?: TextStyleArguments;
-    description_style?: TextStyleArguments;
-    item_text_style?: TextStyleArguments;
-    button_text_style?: ButtonTextStyleArguments;
-}
 export interface DividerSectionArguments {
     divider_style?: 'none' | 'thin' | 'thick';
     divider_color?: string | null;
     background_color?: string | null;
     padding?: number;
 }
-export type SectionToolArguments = ProfileSectionArguments | TextSectionArguments | ImageSectionArguments | ImageGallerySectionArguments | GeneralLinkSectionArguments | WebsiteSectionArguments | EmailSectionArguments | PhoneSectionArguments | FacebookSectionArguments | XSectionArguments | InstagramSectionArguments | YoutubeSectionArguments | LinkedinSectionArguments | PinterestSectionArguments | TwitchSectionArguments | TiktokSectionArguments | SocialLinksSectionArguments | MailingListSectionArguments | ContactFormSectionArguments | BannerSectionArguments | AboutSectionArguments | ImagesSectionArguments | TestimonialSectionArguments | ShapesSectionArguments | BookingSectionArguments | SupportMeArguments | DividerSectionArguments;
+export type SectionToolArguments = ProfileSectionArguments | TextSectionArguments | ImageSectionArguments | ImageGallerySectionArguments | GeneralLinkSectionArguments | WebsiteSectionArguments | EmailSectionArguments | PhoneSectionArguments | FacebookSectionArguments | XSectionArguments | InstagramSectionArguments | YoutubeSectionArguments | LinkedinSectionArguments | PinterestSectionArguments | TwitchSectionArguments | TiktokSectionArguments | SocialLinksSectionArguments | MailingListSectionArguments | ContactFormSectionArguments | BannerSectionArguments | AboutSectionArguments | ImagesSectionArguments | TestimonialSectionArguments | ShapesSectionArguments | BookingSectionArguments | DividerSectionArguments;
 export interface SectionToolCallShape {
     mode: 'create' | 'update';
     type: string;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -355,18 +355,11 @@ const minifyContent = (content, editor, assets) => {
         case 'logo':
             return base;
         case 'request-payment':
-            return {
-                ...base,
-                ...st('title', c.title, editor),
-                ...st('description', c.description, editor),
-            };
         case 'support-me':
             return {
                 ...base,
                 ...st('title', c.title, editor),
                 ...st('description', c.description, editor),
-                ...st('successMessage', c.successMessage, editor),
-                ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
             };
         default:
             return base;

package/package.json

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

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

@@ -12,7 +12,6 @@ import {
   getMessageValidationError,
   getNameValidationError,
   getPhoneValidationError,
-  isPreviewMode,
 } from '@brand-page/utils';
 import { isDecorativeButtonStyle } from '../../utils/button.util';
 import brandPageClient from '../../clients/brand-page.client';
@@ -263,11 +262,7 @@ export default defineComponent({
       }));
   },
   mounted(): void {
-    if (
-      this.context?.recaptchaSiteKey &&
-      !isPreviewMode(this.context) &&
-      this.recaptcha
-    ) {
+    if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
       this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
     }
   },
@@ -279,7 +274,7 @@ export default defineComponent({
         return;
       }
 
-      if (isPreviewMode(this.context) || !this.context.brandPageToken) {
+      if (this.isPreview || !this.context.brandPageToken) {
         if (
           process.env.NODE_ENV !== 'production' &&
           !this.context.brandPageSlug

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

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

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

@@ -1,9 +1,5 @@
 <template>
-  <div
-    ref="containerRef"
-    data-component="navigation-carousel"
-    class="tw-flex tw-items-center tw-gap-2"
-  >
+  <div ref="containerRef" 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, 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,7 @@
         :icon-style="socialLinksIconStyle"
         :is-stack-layout-on-mobile="false"
         :links="viewModel.socialLinks"
-        :is-preview="isInPreviewMode"
+        :is-preview="context.isPreview"
         :context="context"
       />
       <!-- end social links -->

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

@@ -18,7 +18,6 @@ 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(
@@ -100,11 +99,11 @@ export default defineComponent({
     },
 
     canMakePayment(): boolean {
-      return !isPreviewMode(this.context) && this.isPaymentConfigActive;
+      return !this.context.isPreview && this.isPaymentConfigActive;
     },
 
     showPaymentBlock(): boolean {
-      return isPreviewMode(this.context) || this.isPaymentConfigActive;
+      return this.context.isPreview || this.isPaymentConfigActive;
     },
 
     paymentOptions(): PaymentOption[] {
@@ -215,7 +214,7 @@ export default defineComponent({
         ? paymentState.PaymentOptionSelection
         : paymentState.IncompleteConfig;
 
-      if (isPreviewMode(this.context) || !paymentConfigId) {
+      if (this.context.isPreview || !paymentConfigId) {
         return;
       }
 

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

@@ -14,10 +14,7 @@ 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,
-  isPreviewMode,
-} from '../../../utils';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 
 const MAX_CUSTOM_REQUEST_CHARS = 500;
@@ -46,10 +43,6 @@ 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 || isInPreviewMode)
+                  (paymentOption.imageUrl || context.isPreview)
                 "
                 class="tw-rounded tw-overflow-hidden tw-shrink-0"
                 :class="{

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

@@ -51,7 +51,6 @@ 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';
@@ -186,7 +185,7 @@ const url = computed((): string => {
   }
 
   return localisedRouteStore.getBuilderLandingPageByTypeUrl(
-    isPreviewMode(props.context),
+    props.context.isPreview,
     props.context.brandPageType,
     props.context.isDesignCom,
     getCurrentLocale(),

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

@@ -148,10 +148,7 @@ 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,
-  isPreviewMode,
-} from '@brand-page/utils';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -169,13 +166,13 @@ const cart = computed(() => cartSettingsStore.cartItems);
 const PAYMENT_CONFIG_ACTIVE = 'Active';
 
 const shouldShowContainer = computed(() => {
-  return isPreviewMode(props.context) || data.isActivePaymentProvider;
+  return props.context.isPreview || data.isActivePaymentProvider;
 });
 
 const checkPaymentConfigStatus = async () => {
   const paymentConfigId = props.viewModel.shopPaymentConfig.paymentConfig?.id;
 
-  if (isPreviewMode(props.context) || !paymentConfigId) {
+  if (props.context.isPreview || !paymentConfigId) {
     return;
   }
 

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

@@ -33,10 +33,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(
@@ -90,7 +87,7 @@ const id = computed((): string => {
 });
 
 const isPreview = computed((): boolean => {
-  return isPreviewMode(props.context);
+  return props.context.isPreview;
 });
 
 const links = computed((): LinksItem[] => {