@designcrowd/library.brand-page 5.16.2-ast-preview-1 → 5.16.2-background-1

package/lib/src/{CreatedOnBrandCrowd-de-de-BTQjYiwH.js → CreatedOnBrandCrowd-de-de-DNU1Er-B.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DzswEvvL.js → CreatedOnBrandCrowd-en-us-_rEZobcJ.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DPCSqIpT.js → CreatedOnBrandCrowd-es-es-Z8MVwPkv.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CZ29VWa6.js → CreatedOnBrandCrowd-fr-ca-DD-ahmng.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CZ29VWa6.js → CreatedOnBrandCrowd-fr-fr-DD-ahmng.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Da_WGhKg.js → CreatedOnBrandCrowd-pt-br-IBuHKnVv.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Da_WGhKg.js → CreatedOnBrandCrowd-pt-pt-IBuHKnVv.js}

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

package/lib/src/{CreatedOnDcom-de-de-blHR4WbT.js → CreatedOnDcom-de-de-3Og8TFZa.js}

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

package/lib/src/{CreatedOnDcom-en-us-fRN0Ox2R.js → CreatedOnDcom-en-us-C4Fb7TIR.js}

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

package/lib/src/{CreatedOnDcom-es-es-afLu2Y1A.js → CreatedOnDcom-es-es-DE5IMJv7.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-fvpFoGkr.js → CreatedOnDcom-fr-ca-Cz86k5KW.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CEnbchMK.js → CreatedOnDcom-fr-fr-DdQ9z_Rb.js}

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

package/lib/src/{CreatedOnDcom-pt-br-B0QuvNvD.js → CreatedOnDcom-pt-br-DItYjheI.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Cg-reIwt.js → CreatedOnDcom-pt-pt-C0YW3Q40.js}

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

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

@@ -79,15 +79,18 @@ export default defineComponent({
         },
         backgroundShapes() {
             const backgroundShapes = [
-                ...(this.viewModel?.styles?.backgroundStyles?.backgroundShapes || []),
+                ...(this.viewModel?.styles?.backgroundStylesViewModel
+                    ?.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?.backgroundStyles?.backgroundImageUrl) {
+            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
                 backgroundShapes.splice(0, 0, {
-                    name: this.viewModel.styles.backgroundStyles.backgroundImageUrl,
+                    name: this.viewModel.styles.backgroundStylesViewModel
+                        .backgroundImageUrl,
                     style: {
-                        ...this.viewModel.styles.backgroundStyles.backgroundShapeStyle,
+                        ...this.viewModel.styles.backgroundStylesViewModel
+                            .backgroundShapeStyle,
                         width: `100%`,
                         height: `100%`,
                     },
@@ -97,10 +100,11 @@ export default defineComponent({
         },
         rootElementStyles() {
             let styles = {};
-            if (!this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl &&
-                this.viewModel?.styles?.backgroundStyles?.style) {
+            if (!this.viewModel?.styles?.backgroundStylesViewModel
+                ?.backgroundImageUrl &&
+                this.viewModel?.styles?.backgroundStylesViewModel?.style) {
                 styles = {
-                    ...this.viewModel?.styles?.backgroundStyles?.style,
+                    ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
                 };
             }
             Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
@@ -116,27 +120,28 @@ export default defineComponent({
             return styles;
         },
         rootBackgroundStyles() {
+            console.log('vm styles ', this.viewModel.styles);
             const styles = {
-                ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
+                ...(this.viewModel?.styles?.backgroundStylesViewModel?.style || {}),
             };
             delete styles.backgroundAttachment;
-            if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl &&
-                (this.viewModel.styles.backgroundStyles.backgroundImageUrl.endsWith(`.svg`) ||
-                    !this.viewModel.styles?.backgroundStyles?.backgroundImageUrl.startsWith('http'))) {
+            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl &&
+                (this.viewModel.styles.backgroundStylesViewModel.backgroundImageUrl.endsWith(`.svg`) ||
+                    !this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl.startsWith('http'))) {
                 // Any backgroundImageUrl that handles svg file, svg markup is handled as BackgroundShape object
                 delete styles.backgroundImage;
             }
-            else if (this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl) {
+            else if (this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
                 // if background is a gradient
-                if (this.viewModel?.styles?.backgroundStyles?.style?.background?.startsWith('linear-gradient')) {
+                if (this.viewModel?.styles?.backgroundStylesViewModel?.style?.background?.startsWith('linear-gradient')) {
                     // combine image and gradient into the `background` property
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStyles?.style?.background}`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStylesViewModel?.style?.background}`;
                     delete styles.background;
                 }
                 else {
                     // background is a solid color
                     styles.backgroundColor = styles.background;
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.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, mapToViewModel, } from '../../utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, 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: brandPageModel.styles,
+    styles: mapToPageStyleViewModel(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/index.d.ts

@@ -32,6 +32,7 @@ export declare class BackgroundStyles {
     backgroundImageUrl: string;
     backgroundShapes: BackgroundShape[];
     personalisationRole?: PersonalisationRole;
+    media?: AbstractMedia;
     constructor(option?: Partial<BackgroundStyles>);
 }
 export declare const GALLERY_TYPES: {

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

@@ -47,6 +47,7 @@ export class BackgroundStyles {
     backgroundImageUrl;
     backgroundShapes;
     personalisationRole;
+    media;
     constructor(option = {}) {
         this.backgroundImageUrl = option.backgroundImageUrl || '';
         this.backgroundShapes = (option.backgroundShapes ||
@@ -59,6 +60,7 @@ export class BackgroundStyles {
                 background: '',
             };
         this.personalisationRole = option.personalisationRole;
+        this.media = option.media || undefined;
     }
 }
 export const GALLERY_TYPES = {

package/lib/src/brand-page/utils/migration/migration-07.js

@@ -1,4 +1,4 @@
-import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } from '../..';
+import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
 export const migration07 = async (migrationResult, options) => {

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 } from '../view-models';
+import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel } 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,6 +8,7 @@ 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,6 +604,15 @@ 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 = {
@@ -749,6 +758,22 @@ 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
@@ -765,7 +790,7 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         brandPageToken,
         pages,
         showBrandCrowdLogo,
-        styles: model.styles,
+        styles: mapToPageStyleViewModel(model.styles, options),
         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),
@@ -850,7 +875,7 @@ export const getCriticalResourceURLs = (viewModel) => {
             }
         }
         // shapes
-        const bgShapeFullBg = viewModel.styles?.backgroundStyles.backgroundImageUrl;
+        const bgShapeFullBg = viewModel.styles?.backgroundStylesViewModel.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 { 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 { 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 { 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,10 +134,25 @@ 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: PageStyles;
+    styles: PageStylesViewModel;
     pages: PageViewModel[];
     brandPageType: BrandPageType;
     headerViewModelDesktop: PageHeaderViewModel;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -11,9 +11,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
-        setUserToken(payload: {
-            userToken: string;
-        }): void;
     }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;

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

@@ -48,7 +48,6 @@ 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;
@@ -80,6 +79,7 @@ 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,7 +92,6 @@ 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;
@@ -124,6 +123,7 @@ 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,6 +181,9 @@ 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;
@@ -255,6 +258,8 @@ 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

@@ -197,9 +197,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
-        setUserToken(payload: {
-            userToken: string;
-        }): void;
     }>;
     containerStore: import("pinia").Store<"brandPageContainer", import("../../stores").BrandPageContainerState, {
         brandPageContentTypes(): string[];
@@ -1024,7 +1021,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("../../../shared/template-settings/models").TemplateSettingsTemplate | undefined;
-        setupLogoChangeWatcher(): void;
     }>;
     shopSettingStore: import("pinia").Store<"shopConfig", import("../../../shared/ecommerce-settings/store/shop-settings-store").ShopConfigState, {
         productsJson(state: {

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -143,9 +143,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isAdmin: boolean;
         }): void;
         setBrandPageCommissionPercentage(payload: number): void;
-        setUserToken(payload: {
-            userToken: string;
-        }): void;
     }>;
 }, {
     imageExtension: string[];

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, mapToViewModel, } from '../../../brand-page/utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, mapToViewModel, } from '../../../brand-page/utils';
 export default {
     title: 'Components/BrandPageMaker/Preview',
     component: Preview,
@@ -21,7 +21,7 @@ const pages = [
 ];
 const viewModel = {
     showBrandCrowdLogo: true,
-    styles: pageStyles,
+    styles: mapToPageStyleViewModel(pageStyles, {}),
     headerViewModelDesktop: mapToPageHeaderViewModel(new PageHeaderDesktop(), pageStyles, pages),
     headerViewModelMobile: mapToPageHeaderViewModel(new PageHeaderMobile(), pageStyles, pages),
     footerViewModelDesktop: mapToPageFooterViewModel(new PageFooterDesktop(), pageStyles),

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -375,7 +375,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentPublishedSlugUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
-            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -394,7 +393,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentBrandPageUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
-            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -414,7 +412,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         getBuilderLandingPageByTypeUrl: (state: {
             baseFabricRenderDomain: string;
             baseBrandPageDomain: string;
-            baseTemplatePreviewDomain: string;
             upgradeSubscriptionUrlPath: string;
             reactivationUrlPath: string;
             backToWebsiteManageUrlPath: string;
@@ -431,25 +428,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             localisedBaseUrl: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../stores").LocalisedRouteState>) => (isPreview: boolean, brandPageType: string, isDesignCom: boolean, locale: string) => string;
         getWebsiteBaseUrl: () => (isDesignCom: boolean) => "https://www.design.com" | "https://www.brandcrowd.com";
-        getTemplatePreviewUrl: (state: {
-            baseFabricRenderDomain: string;
-            baseBrandPageDomain: string;
-            baseTemplatePreviewDomain: string;
-            upgradeSubscriptionUrlPath: string;
-            reactivationUrlPath: string;
-            backToWebsiteManageUrlPath: string;
-            manageWebsiteDesignsUrlPath: string;
-            createNewDesignUrlPath: string;
-            termsOfUseUrlPath: string;
-            websiteBuilderUrlPath: string;
-            digitalBusinessCardBuilderUrlPath: string;
-            linkInBioBuilderUrlPath: string;
-            brandPageEditorUrlPath: string;
-            brandSiteEditorUrlPath: string;
-            brandContactEditorUrlPath: string;
-            logoEditUrlPath: string;
-            localisedBaseUrl: string;
-        } & import("pinia").PiniaCustomStateProperties<import("../../stores").LocalisedRouteState>) => (templateId: string, logoDraftToken: string, deviceType: "desktop" | "mobile", contentKey?: string | undefined, userToken?: string | undefined, runtimeEnvironment?: string | undefined, isAiTemplate?: boolean | undefined) => string;
     }, {
         initialise(payload: any): void;
     }>;