@designcrowd/library.brand-page 5.16.3-background-9 → 5.16.3-contact-1

package/lib/src/{CreatedOnBrandCrowd-de-de--KpngFdf.js → CreatedOnBrandCrowd-de-de-CjTkWjbu.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-DtxY4Z2d.js → CreatedOnBrandCrowd-en-us-BTWvzrdZ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-uDQh1CTo.js → CreatedOnBrandCrowd-es-es-9UbwEQL1.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BiB8cMX_.js → CreatedOnBrandCrowd-fr-ca-4rEZ91Cd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BiB8cMX_.js → CreatedOnBrandCrowd-fr-fr-4rEZ91Cd.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-D3sXSjw8.js → CreatedOnBrandCrowd-pt-br-BotkL5zF.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-D3sXSjw8.js → CreatedOnBrandCrowd-pt-pt-BotkL5zF.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-BIGyHbSf.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-CMssXwxW.js → CreatedOnDcom-de-de-GZHy0fXf.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BIGyHbSf.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-CagKWzBt.js → CreatedOnDcom-en-us-C4edzsrP.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BIGyHbSf.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DGmFkW7a.js → CreatedOnDcom-es-es-BHJ4ztAW.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BIGyHbSf.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-BEG1Lwj5.js → CreatedOnDcom-fr-ca-hAvFIPy4.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BIGyHbSf.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-o4G0x8pw.js → CreatedOnDcom-fr-fr-BRGdIwlq.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-BIGyHbSf.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-iTLOgDpS.js → CreatedOnDcom-pt-br-WRd5Sscx.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BIGyHbSf.js";
+import { _ as M } from "./lib-Ceyq_7_v.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-D3-ovGCA.js → CreatedOnDcom-pt-pt-CfB_QDWq.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BIGyHbSf.js";
+import { _ as M } from "./lib-Ceyq_7_v.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -79,18 +79,15 @@ export default defineComponent({
         },
         backgroundShapes() {
             const backgroundShapes = [
-                ...(this.viewModel?.styles?.backgroundStylesViewModel
-                    ?.backgroundShapes || []),
+                ...(this.viewModel?.styles?.backgroundStyles?.backgroundShapes || []),
             ];
             // TODO: create style viewmodel object to include backgroundImageContent attribute only on viewmodel
             // p.s backgroundImageUrl can be url or SVG content string
-            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
+            if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl) {
                 backgroundShapes.splice(0, 0, {
-                    name: this.viewModel.styles.backgroundStylesViewModel
-                        .backgroundImageUrl,
+                    name: this.viewModel.styles.backgroundStyles.backgroundImageUrl,
                     style: {
-                        ...this.viewModel.styles.backgroundStylesViewModel
-                            .backgroundShapeStyle,
+                        ...this.viewModel.styles.backgroundStyles.backgroundShapeStyle,
                         width: `100%`,
                         height: `100%`,
                     },
@@ -100,11 +97,10 @@ export default defineComponent({
         },
         rootElementStyles() {
             let styles = {};
-            if (!this.viewModel?.styles?.backgroundStylesViewModel
-                ?.backgroundImageUrl &&
-                this.viewModel?.styles?.backgroundStylesViewModel?.style) {
+            if (!this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl &&
+                this.viewModel?.styles?.backgroundStyles?.style) {
                 styles = {
-                    ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
+                    ...this.viewModel?.styles?.backgroundStyles?.style,
                 };
             }
             Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
@@ -121,26 +117,26 @@ export default defineComponent({
         },
         rootBackgroundStyles() {
             const styles = {
-                ...(this.viewModel?.styles?.backgroundStylesViewModel?.style || {}),
+                ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
             };
             delete styles.backgroundAttachment;
-            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl &&
-                (this.viewModel.styles.backgroundStylesViewModel.backgroundImageUrl.endsWith(`.svg`) ||
-                    !this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl.startsWith('http'))) {
+            if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl &&
+                (this.viewModel.styles.backgroundStyles.backgroundImageUrl.endsWith(`.svg`) ||
+                    !this.viewModel.styles?.backgroundStyles?.backgroundImageUrl.startsWith('http'))) {
                 // Any backgroundImageUrl that handles svg file, svg markup is handled as BackgroundShape object
                 delete styles.backgroundImage;
             }
-            else if (this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
+            else if (this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl) {
                 // if background is a gradient
-                if (this.viewModel?.styles?.backgroundStylesViewModel?.style?.background?.startsWith('linear-gradient')) {
+                if (this.viewModel?.styles?.backgroundStyles?.style?.background?.startsWith('linear-gradient')) {
                     // combine image and gradient into the `background` property
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStylesViewModel?.style?.background}`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStyles?.style?.background}`;
                     delete styles.background;
                 }
                 else {
                     // background is a solid color
                     styles.backgroundColor = styles.background;
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl})`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
                     delete styles.background;
                 }
             }

package/lib/src/brand-page/components/page/Page.stories.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import Page from './Page.vue';
-import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, mapToViewModel, } from '../../utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToViewModel, } from '../../utils';
 import { BRAND_PAGE_TYPES, BrandPageModel, SENSITIVE_CONTENT_TYPES, VIEWPORTS, } from '../../models';
 export default {
     title: 'Components/BrandPage/Page',
@@ -17,7 +17,7 @@ const pages = brandPageModel.pages.map((p) => ({
 }));
 const viewModel = {
     showBrandCrowdLogo: true,
-    styles: mapToPageStyleViewModel(brandPageModel.styles, {}),
+    styles: brandPageModel.styles,
     headerViewModelDesktop: mapToPageHeaderViewModel(brandPageModel.pageHeaderDesktop, brandPageModel.styles, pages),
     headerViewModelMobile: mapToPageHeaderViewModel(brandPageModel.pageHeaderMobile, brandPageModel.styles, pages),
     footerViewModelDesktop: mapToPageFooterViewModel(brandPageModel.pageFooterDesktop, brandPageModel.styles),

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

@@ -37,7 +37,6 @@ export interface AbTestResult {
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
     bp_4092_rotating_upsells_at_publish?: AbTestResult;
-    bp_4572_ai_text_generation_post_purchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {
     readonly size1x: "size1x";

package/lib/src/brand-page/models/brand-page-context.model.js

@@ -25,7 +25,6 @@ export const AB_TEST_FLAG = {
 const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
     BP_4092_ROTATING_UPSELLS_AT_PUBLISH: 'bc-bp-4092-rotating-upsells-at-website-publish',
-    BP_4572_AI_TEXT_GENERATION_POST_PURCHASE: 'bc-bp-4572-ai-text-generation-post-purchase',
 };
 export const MEDIA_SIZES = {
     size1x: 'size1x',
@@ -47,9 +46,5 @@ export const getAbTestResults = (abtestKeyValues) => {
     if (abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]) {
         abTests.bp_3926_freemium_watermark = getValueType(AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK, abtestKeyValues[AB_TEST_KEYS.BP_3926_FREEMIUM_WATERMARK]);
     }
-    // AB Test for BP-4572 - AI Text Generation Post Purchase
-    if (abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE]) {
-        abTests.bp_4572_ai_text_generation_post_purchase = getValueType(AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE, abtestKeyValues[AB_TEST_KEYS.BP_4572_AI_TEXT_GENERATION_POST_PURCHASE]);
-    }
     return abTests;
 };

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

@@ -32,7 +32,6 @@ export declare class BackgroundStyles {
     backgroundImageUrl: string;
     backgroundShapes: BackgroundShape[];
     personalisationRole?: PersonalisationRole;
-    media?: AbstractMedia;
     constructor(option?: Partial<BackgroundStyles>);
 }
 export declare const GALLERY_TYPES: {
@@ -200,6 +199,9 @@ export declare const FORM_FIELD_IDS: {
     readonly emailAddress: "emailAddress";
     readonly phoneNumber: "phoneNumber";
     readonly message: "message";
+    readonly customField1: "customField1";
+    readonly customField2: "customField2";
+    readonly customField3: "customField3";
 };
 export declare const BUTTON_LINK_TYPE: {
     readonly url: "url";

package/lib/src/brand-page/models/index.js

@@ -47,7 +47,6 @@ export class BackgroundStyles {
     backgroundImageUrl;
     backgroundShapes;
     personalisationRole;
-    media;
     constructor(option = {}) {
         this.backgroundImageUrl = option.backgroundImageUrl || '';
         this.backgroundShapes = (option.backgroundShapes ||
@@ -60,7 +59,6 @@ export class BackgroundStyles {
                 background: '',
             };
         this.personalisationRole = option.personalisationRole;
-        this.media = option.media || undefined;
     }
 }
 export const GALLERY_TYPES = {
@@ -131,6 +129,9 @@ export const FORM_FIELD_IDS = {
     emailAddress: 'emailAddress',
     phoneNumber: 'phoneNumber',
     message: 'message',
+    customField1: 'customField1',
+    customField2: 'customField2',
+    customField3: 'customField3',
 };
 export const BUTTON_LINK_TYPE = {
     url: 'url',

package/lib/src/brand-page/utils/view-model.util.d.ts

@@ -1,5 +1,5 @@
 import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, BannerSectionContent, ImagesSectionContent, BrandPageType, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent } from '../models';
-import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel } from '../view-models';
+import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel } from '../view-models';
 export declare const applyViewModelTextStyles: <T extends ContentViewModel>(content: T, styles: PageStyles) => T;
 export declare const mapToImageViewModel: (content: ImageContent) => ImageViewModel;
 export declare const mapToImageGalleryViewModel: (content: ImageGalleryContent, globalStyles: GalleryStyles) => ImageGalleryViewModel;
@@ -8,7 +8,6 @@ export declare const mapToTextViewModel: (content: TextContent, styles: PageStyl
 export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles, options: ViewModelMappingOptions) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
-export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;

package/lib/src/brand-page/utils/view-model.util.js

@@ -604,15 +604,6 @@ export const mapToBookingSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
-export const mapToPageStyleViewModel = (pageStyles, options) => {
-    return {
-        backgroundStylesViewModel: mapBackgroundStylesToViewModel(pageStyles.backgroundStyles, options),
-        buttonStyles: pageStyles.buttonStyles,
-        logoStyles: pageStyles.logoStyles,
-        textStyles: pageStyles.textStyles,
-        galleryStyles: pageStyles.galleryStyles,
-    };
-};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -758,22 +749,6 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             assertUnreachable();
     }
 };
-const mapBackgroundStylesToViewModel = (backgroundStyles, options) => {
-    // TODO(jyao): These need to be mapped to a view model eventually
-    return {
-        style: backgroundStyles.style,
-        backgroundShapeStyle: backgroundStyles.backgroundShapeStyle,
-        backgroundImageUrl: backgroundStyles.backgroundImageUrl,
-        backgroundShapes: backgroundStyles.backgroundShapes,
-        personalisationRole: backgroundStyles.personalisationRole,
-        mediaViewModel: backgroundStyles.media
-            ? mapMediaToContentViewModel({
-                media: backgroundStyles.media,
-                options,
-            })
-            : undefined,
-    };
-};
 export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true, options) => {
     const pages = model.pages.map((p) => {
         const contents = p.contents
@@ -790,7 +765,7 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         brandPageToken,
         pages,
         showBrandCrowdLogo,
-        styles: mapToPageStyleViewModel(model.styles, options),
+        styles: model.styles,
         headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, options.useOldLogoRenderSize),
         headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, options.useOldLogoRenderSize),
         footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles, options.useOldLogoRenderSize),
@@ -875,7 +850,7 @@ export const getCriticalResourceURLs = (viewModel) => {
             }
         }
         // shapes
-        const bgShapeFullBg = viewModel.styles?.backgroundStylesViewModel.backgroundImageUrl;
+        const bgShapeFullBg = viewModel.styles?.backgroundStyles.backgroundImageUrl;
         if (typeof bgShapeFullBg !== 'undefined' && isValidSvgUrl(bgShapeFullBg)) {
             shapes.push(String(bgShapeFullBg));
         }

package/lib/src/brand-page/view-models.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole } from './models';
+import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -134,25 +134,10 @@ export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeader
 export interface PageFooterViewModel extends Omit<PageFooterDesktop | PageFooterMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth'> {
     logo: LogoViewModel;
 }
-export interface BackgroundStylesViewModel {
-    style: BackgroundStyle;
-    backgroundShapeStyle: BackgroundStyle;
-    backgroundImageUrl: string;
-    backgroundShapes: BackgroundShape[];
-    personalisationRole?: PersonalisationRole;
-    mediaViewModel?: MediaViewModel;
-}
-export interface PageStylesViewModel {
-    backgroundStylesViewModel: BackgroundStylesViewModel;
-    buttonStyles: ButtonStyles;
-    logoStyles: LogoStyles;
-    textStyles: TextStyles;
-    galleryStyles: GalleryStyles;
-}
 export interface BrandPageViewModel {
     brandPageToken?: string;
     showBrandCrowdLogo: boolean;
-    styles: PageStylesViewModel;
+    styles: PageStyles;
     pages: PageViewModel[];
     brandPageType: BrandPageType;
     headerViewModelDesktop: PageHeaderViewModel;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -48,6 +48,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
+            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -79,7 +80,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
-            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -92,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
+            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -123,7 +124,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
-            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -181,9 +181,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             };
         }[];
         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-        media?: {
-            type: import("../../../brand-page").MediaTypes;
-        } | undefined;
     }>;
     uiStore: import("pinia").Store<"ui", import("../../../lib").UIRootState, {
         endpoints: () => import("../../../lib").Endpoints;
@@ -258,8 +255,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
-        setBackgroundMedia(payload: import("src/shared/my-uploads/models").MediaBaseSelectedPayload): void;
-        removeBackgroundVideo(): void;
     }>;
 }, {
     isColorMatch: {};

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -1146,17 +1146,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getProductModel(): import("../../../brand-page/models/shop.model").ProductModel;
     }>;
     router: import("vue-router").Router;
-    snapshotStore: import("pinia").Store<"snapshot", import("../../stores").SnapshotState, {
-        hasSnapshot: (state: {
-            snapshotBase64: string | null;
-            isCapturing: boolean;
-        } & import("pinia").PiniaCustomStateProperties<import("../../stores").SnapshotState>) => boolean;
-    }, {
-        setBase64Snapshot(base64: string | null): void;
-        setIsCapturing(isCapturing: boolean): void;
-        clearSnapshot(): void;
-    }>;
-    captureSnapshot: (element: HTMLElement | null) => Promise<string | null>;
     videoStore: import("pinia").Store<"video", import("../../stores").videoStoreState, {
         getVideoUrlsForToken: (state: {
             videoUrls: {
@@ -1197,10 +1186,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showSaveSuccessMessage: boolean;
 }, {
     previewContainer(): any;
-    previewContent(): any;
 }, {
     getBrandPageFromFallback(viewModel: any): BrandPageData;
-    handleCaptureSnapshot(): Promise<void>;
     onResizeWithDebounce(): void;
     onResize(): void;
     setUiScreenSizeModeBasedOnDeviceWidth(): void;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -10,7 +10,7 @@ import { createInitialBrandPage } from '../../models';
 import { navigateToPageBySlug } from '../../routing';
 import { useBrandPageContainerStore } from '../../stores';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '../../../shared/models';
-import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useSnapshotStore, useVideoStore, } from '../../stores';
+import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useUiStore, useVideoStore, } from '../../stores';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
@@ -21,7 +21,6 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '../../../composables/useTranslate';
-import { useSnapshot } from '../../../composables/useSnapshot';
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
 export default defineComponent({
     props: {
@@ -43,8 +42,6 @@ export default defineComponent({
         const productSettingStore = useProductConfigStore();
         const router = useRouter();
         const localisedRouteStore = useLocalisedRouteStore();
-        const snapshotStore = useSnapshotStore();
-        const { captureSnapshot } = useSnapshot();
         const videoStore = useVideoStore();
         return {
             commonTr,
@@ -87,8 +84,6 @@ export default defineComponent({
             shopSettingStore,
             productSettingStore,
             router,
-            snapshotStore,
-            captureSnapshot,
             videoStore,
         };
     },
@@ -104,9 +99,6 @@ export default defineComponent({
         previewContainer() {
             return this.$refs.previewContainer;
         },
-        previewContent() {
-            return this.$refs.previewContent;
-        },
     },
     async created() {
         if (!this.viewModel?.logoDraftDesignAttributes?.logoTheme ||
@@ -221,27 +213,6 @@ export default defineComponent({
                 return createInitialBrandPage(viewModel.brandPageType);
             }
         },
-        async handleCaptureSnapshot() {
-            if (!this.previewContent) {
-                return;
-            }
-            this.snapshotStore.setIsCapturing(true);
-            try {
-                const snapshot = await this.captureSnapshot(this.previewContent);
-                if (snapshot) {
-                    this.snapshotStore.setBase64Snapshot(snapshot);
-                }
-                else {
-                    console.warn('⚠️ Snapshot capture returned null');
-                }
-            }
-            catch (error) {
-                console.error('❌ Failed to capture snapshot:', error);
-            }
-            finally {
-                this.snapshotStore.setIsCapturing(false);
-            }
-        },
         onResizeWithDebounce() {
             if (this.debounceOnResize) {
                 this.debounceOnResize();

package/lib/src/brand-page-maker/components/preview/Preview.stories.js

@@ -3,7 +3,7 @@ import Preview from './Preview.vue';
 import { brandPageData } from '../../../brand-page/__fixtures__/brand-page-sample-data';
 import { PageStyles, BRAND_PAGE_TYPES, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, SENSITIVE_CONTENT_TYPES, } from '../../../brand-page';
 import { setupStoryPinia } from '../brand-page-maker/__fixtures__/store-fixture';
-import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, mapToViewModel, } from '../../../brand-page/utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToViewModel, } from '../../../brand-page/utils';
 export default {
     title: 'Components/BrandPageMaker/Preview',
     component: Preview,
@@ -21,7 +21,7 @@ const pages = [
 ];
 const viewModel = {
     showBrandCrowdLogo: true,
-    styles: mapToPageStyleViewModel(pageStyles, {}),
+    styles: pageStyles,
     headerViewModelDesktop: mapToPageHeaderViewModel(new PageHeaderDesktop(), pageStyles, pages),
     headerViewModelMobile: mapToPageHeaderViewModel(new PageHeaderMobile(), pageStyles, pages),
     footerViewModelDesktop: mapToPageFooterViewModel(new PageFooterDesktop(), pageStyles),