@designcrowd/library.brand-page 5.16.10 → 5.16.11-contact-1

package/lib/src/{CreatedOnBrandCrowd-de-de-Br0lVuG3.js → CreatedOnBrandCrowd-de-de-D79Mwrx5.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BUh01IwB.js → CreatedOnBrandCrowd-en-us-CtyUXDxl.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CpsF5FnB.js → CreatedOnBrandCrowd-es-es-CGhK163V.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Cf9afSIR.js → CreatedOnBrandCrowd-fr-ca-sSzV7xsY.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Cf9afSIR.js → CreatedOnBrandCrowd-fr-fr-sSzV7xsY.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CFdOEKvD.js → CreatedOnBrandCrowd-pt-br-Bx8PU5VO.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-CFdOEKvD.js → CreatedOnBrandCrowd-pt-pt-Bx8PU5VO.js}

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

package/lib/src/{CreatedOnDcom-de-de-cmu5K1ho.js → CreatedOnDcom-de-de-CrAZimT2.js}

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

package/lib/src/{CreatedOnDcom-en-us-B268amgO.js → CreatedOnDcom-en-us-DgjW71Ea.js}

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

package/lib/src/{CreatedOnDcom-es-es-CfGG58vu.js → CreatedOnDcom-es-es-BBjjpycu.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-Bjl75MMT.js → CreatedOnDcom-fr-ca-85Eax8i4.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-kklHfB6q.js → CreatedOnDcom-fr-fr-jiyAEqxK.js}

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

package/lib/src/{CreatedOnDcom-pt-br-D_kwlo71.js → CreatedOnDcom-pt-br-DnKsyaNG.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-XwJDiVHY.js → CreatedOnDcom-pt-pt-DyCaX6iL.js}

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

package/lib/src/brand-page/clients/brand-page.client.d.ts

@@ -5,6 +5,8 @@ export interface FormResult {
 }
 export interface ContactFormField {
     id: string;
+    name: string;
+    type: string;
     value: string;
 }
 export interface CartForShopRequest {

package/lib/src/brand-page/clients/brand-page.client.js

@@ -33,7 +33,7 @@ const submitContactForm = async (brandPageToken, contentBlockId, values) => {
         const csrfToken = csrfUtil.getCsrfTokenFromMetaHeader();
         const formBody = {
             contentBlockId,
-            ...values.reduce((b, i) => ({ ...b, [i.id]: i.value }), {}),
+            fields: values,
         };
         await axios.post(`/api/contact/${brandPageToken}`, formBody, {
             headers: {

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

@@ -146,7 +146,12 @@ export default defineComponent({
             let result;
             this.isSubmitting = true;
             try {
-                result = await brandPageClient.submitContactForm(this.context.brandPageToken, this.viewModel.id, this.values.map((v) => ({ id: v.field.id, value: v.value })));
+                result = await brandPageClient.submitContactForm(this.context.brandPageToken, this.viewModel.id, this.values.map((v) => ({
+                    id: v.field.id,
+                    name: v.field.name,
+                    type: v.field.type,
+                    value: v.value,
+                })));
             }
             finally {
                 this.isSubmitting = false;

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);
@@ -117,26 +121,26 @@ export default defineComponent({
         },
         rootBackgroundStyles() {
             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: {
@@ -199,6 +200,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,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 = {
@@ -129,6 +131,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/migration/migration-09.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration09: (migrationResult: MigrationData) => Promise<MigrationData>;

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

@@ -0,0 +1,34 @@
+import { FORM_FIELD_IDS } from '../..';
+import { isContact } from '../model.util';
+export const migration09 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (isContact(content)) {
+                const contactForm = content;
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField1,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField2,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+                contactForm.fields.push({
+                    id: FORM_FIELD_IDS.customField3,
+                    name: 'Custom Field',
+                    enabled: false,
+                    required: false,
+                    type: 'text',
+                });
+            }
+        });
+    });
+    return migrationResult;
+};

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

@@ -11,6 +11,7 @@ import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
 import { migration07 } from './migration/migration-07';
 import { migration08 } from './migration/migration-08';
+import { migration09 } from './migration/migration-09';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -68,6 +69,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration08,
         description: 'Migrating logo content sizes for brandPage and brandContact',
     },
+    {
+        version: 9,
+        migrateFn: migration09,
+        description: 'Migrating contact form with additional 3 custom fields',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page/utils/validation.util.js

@@ -1,19 +1,20 @@
 import { isEmail } from '../../utils/validator.util';
+import { errorTr } from '../../composables/useTranslate';
 const MAX_EMAIL_LENGTH = 320;
 const MAX_PHONE_LENGTH = 50;
 const MAX_NAME_LENGTH = 250;
-const MAX_MESSAGE_LENGTH = 600;
+const MAX_MESSAGE_LENGTH = 1000;
 export const getEmailValidationError = (email, isRequired) => {
     if (email.trim() === '') {
         if (isRequired) {
-            return 'Please enter your email address.';
+            return errorTr('contactFormEmailFieldRequired');
         }
     }
     else if (!isEmail(email)) {
-        return 'The email address you entered is invalid.';
+        return errorTr('contactFormEmailFieldInvalid');
     }
     else if (email.length >= MAX_EMAIL_LENGTH) {
-        return 'The email address you entered is too long.';
+        return errorTr('contactFormEmailFieldTooLong');
     }
     else {
         return undefined;
@@ -21,25 +22,29 @@ export const getEmailValidationError = (email, isRequired) => {
 };
 export const getPhoneValidationError = (phone, isRequired) => {
     if (phone.trim() === '' && isRequired) {
-        return 'Please enter your phone number.';
+        return errorTr('contactFormPhoneFieldRequired');
     }
     else if (phone.length > MAX_PHONE_LENGTH) {
-        return 'The phone number you entered is too long.';
+        return errorTr('contactFormPhoneFieldTooLong');
     }
 };
 export const getNameValidationError = (name, isRequired) => {
     if (name.trim() === '' && isRequired) {
-        return 'Please enter your name.';
+        return errorTr('contactFormFieldRequired');
     }
     else if (name.length > MAX_NAME_LENGTH) {
-        return 'The name you entered is too long.';
+        return errorTr('contactFormFieldTooLong', {
+            MAX_LENGTH: MAX_NAME_LENGTH,
+        });
     }
 };
 export const getMessageValidationError = (message, isRequired) => {
     if (message.trim() === '' && isRequired) {
-        return 'Please enter your message.';
+        return errorTr('contactFormFieldRequired');
     }
     else if (message.length > MAX_MESSAGE_LENGTH) {
-        return `The message you entered is too long. The maximum length is ${MAX_MESSAGE_LENGTH}`;
+        return errorTr('contactFormFieldTooLong', {
+            MAX_LENGTH: MAX_MESSAGE_LENGTH,
+        });
     }
 };

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/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/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),