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

package/lib/src/{CreatedOnBrandCrowd-de-de-YFZqI0x7.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-oCydCj0r.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-8LWCIMUL.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-HZ_V70no.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-HZ_V70no.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-7jPL-cgd.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-7jPL-cgd.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-BdYJIcz_.js";
+import { _ as t } from "./lib-Ceyq_7_v.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-D-SliPlT.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-BdYJIcz_.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DWB_vdQE.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-BdYJIcz_.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DMuIffFr.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-BdYJIcz_.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DM8vq9tc.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-BdYJIcz_.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-8yITfFk9.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-BdYJIcz_.js";
+import { _ as e } from "./lib-Ceyq_7_v.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-BlTWg3Np.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-BdYJIcz_.js";
+import { _ as M } from "./lib-Ceyq_7_v.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-L8gg-C55.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-BdYJIcz_.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/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/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),

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1665,6 +1665,11 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
     isLocked: false,
     type: 'support-me',
 });
+const CONTACT_FORM_GROUPS = {
+    formFields: 'formFields',
+    settings: 'settings',
+    style: 'style',
+};
 export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
     type: 'contact-form',
     category: 'general',
@@ -1672,25 +1677,41 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
     defaultIconName: 'form',
     displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
     displayName: contentSettingsTr(`contactFormDisplayName`),
-    fieldGroups: SETTINGS_STYLE_FIElD_GROUPS(),
+    fieldGroups: [
+        {
+            id: CONTACT_FORM_GROUPS.settings,
+            displayName: contentSettingsTr(`settingsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: CONTACT_FORM_GROUPS.formFields,
+            displayName: contentSettingsTr(`formFieldsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: CONTACT_FORM_GROUPS.style,
+            displayName: contentSettingsTr(`styleDisplayName`),
+            isCollapsed: true,
+        },
+    ],
     fields: {
         imageUrl: {
             type: 'image',
             replaceImageSettings: contactFormReplaceImageSettings(),
             title: contentSettingsTr(`imageTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: imageUrlVisibilityAssessor,
         },
         imageUrlOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => imageUrlVisibilityAssessor(c, b) &&
                 personalisationOverrideVisibility(c, b, 'imageUrl'),
         },
         colorReplacements: {
             type: 'color-replacements',
             title: contentSettingsTr(`shapeColorsTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: colorReplacementVisibilityTypeAssessor,
         },
         displayStyle: {
@@ -1699,67 +1720,67 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             defaultValue: DISPLAY_STYLE_PREVIEW,
             title: contentSettingsTr(`displayStyleTitle`),
             optionsConvertor: displayStyleConvertor,
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: displayTypeVisibilityAssessor,
         },
         title: {
             type: 'text',
             placeholder: contentSettingsTr(`titlePlaceholder`),
             title: contentSettingsTr(`titleTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             maxLength: 200,
         },
         titleOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'title'),
         },
         description: {
             type: 'textarea',
             placeholder: contentSettingsTr(`descriptionPlaceholder`),
             title: contentSettingsTr(`descriptionTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             maxLength: 1000,
         },
         descriptionOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'description'),
         },
         buttonText: {
             type: 'text',
             title: contentSettingsTr(`buttonTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             showToggle: false,
             maxLength: 60,
         },
         buttonTextOverride: {
             type: 'personalisation-override',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
             visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'buttonText'),
         },
         fields: {
             type: 'form-fields',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.formFields,
         },
         successMessage: {
             type: 'textarea',
             placeholder: contentSettingsTr(`successMessagePlaceholder`),
             title: contentSettingsTr(`successMessageTitle`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
         },
         responseEmail: {
             type: 'email',
             title: contentSettingsTr(`sendResponsesToTitle`),
             placeholder: contentSettingsTr(`recipientEmailPlaceholder`),
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            groupId: CONTACT_FORM_GROUPS.settings,
         },
         layoutStyle: {
             type: 'radio',
             role: 'multi',
             title: contentSettingsTr(`displayStyleTitle`),
             optionsConvertor: contactLayoutStyleConvertor,
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             variant: 'icon',
             visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
@@ -1768,7 +1789,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         cardStyle: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,
@@ -1779,7 +1800,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         },
         backgroundStyle: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,
@@ -1788,7 +1809,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
         },
         messageTextColor: {
             type: 'color',
-            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            groupId: CONTACT_FORM_GROUPS.style,
             defaultValue: {},
             isInline: true,
             showToggle: false,

package/lib/src/brand-page-maker/models/content-settings.js

@@ -397,6 +397,27 @@ export const createInitialContactFormContent = (options) => {
                 required: true,
                 type: 'text-area',
             },
+            {
+                id: FORM_FIELD_IDS.customField1,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text-area',
+            },
+            {
+                id: FORM_FIELD_IDS.customField2,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text-area',
+            },
+            {
+                id: FORM_FIELD_IDS.customField3,
+                name: contentSettingsTr(`customFieldLabel`),
+                enabled: false,
+                required: false,
+                type: 'text-area',
+            },
         ],
         successMessage: contentSettingsTr(`formSuccessMessage`),
         responseEmail: options?.userState.emailAddress || '',