@designcrowd/library.brand-page 5.12.10 → 5.12.11-ast-booking

package/lib/src/{CreatedOnBrandCrowd-de-de-D3t60Z73.js → CreatedOnBrandCrowd-de-de-Cas8PeTT.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Cewj15yq.js → CreatedOnBrandCrowd-en-us-B7MbiBHY.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Bw58VPNx.js → CreatedOnBrandCrowd-es-es-Cz5-KuOu.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CxSCS2cD.js → CreatedOnBrandCrowd-fr-fr-Ck-2cfKr.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DA6ISEa6.js → CreatedOnBrandCrowd-pt-pt-9Q-cAf-I.js}

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

package/lib/src/{CreatedOnDcom-de-de-BCc5tNd0.js → CreatedOnDcom-de-de-DsxBVWnF.js}

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

package/lib/src/{CreatedOnDcom-en-us-B81q6Uaf.js → CreatedOnDcom-en-us-B8JtMCvZ.js}

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

package/lib/src/{CreatedOnDcom-es-es-9BUXweOj.js → CreatedOnDcom-es-es-psBzGFlu.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-Du01yNDg.js → CreatedOnDcom-fr-fr-CtRvvcJ8.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CdiSwYCz.js → CreatedOnDcom-pt-pt-BHGHfKvP.js}

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

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.d.ts

@@ -7,14 +7,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     svgData: string;
+    svgDataObjectUrl: string;
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
     backgroundShapesStyle(): BrandPageCssStyle;
     isFullBackground(): boolean;
-    svgAttributes(): string;
+    objectUrl(): string;
 }, {
     isValidSvgUrl(url: string): boolean;
+    applySvgAttributes(svgData: string): string;
     render(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

package/lib/src/brand-page/components/background-shape/BackgroundShape.mixin.js

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { applyColorToSvgString } from '../../utils/svg-color.util';
 import { isURL } from '../../../utils/validator.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
+import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 const SUPPORTED_SHAPE_HOSTS = [
     'https://bc-user-uploads.brandcrowd.com/public',
     'https://bcassetcdn.com/shapes',
@@ -17,7 +18,7 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', originalSvgData: '' };
+        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
     },
     computed: {
         useObjectElement() {
@@ -30,13 +31,11 @@ export default defineComponent({
             return (this.viewModel.style.width === '100%' &&
                 this.viewModel.style.height === '100%');
         },
-        svgAttributes() {
-            const attributes = [];
-            if (this.isFullBackground) {
-                attributes.push('preserveAspectRatio="xMidYMid slice"');
-                attributes.push('style="width: 100%; height: 100%;"');
+        objectUrl() {
+            if (!this.useObjectElement) {
+                return this.svgDataObjectUrl;
             }
-            return attributes.join(' ');
+            return this.viewModel.name;
         },
     },
     watch: {
@@ -61,6 +60,37 @@ export default defineComponent({
             return (!!SUPPORTED_SHAPE_HOSTS.find((h) => url.startsWith(h)) &&
                 url.endsWith('.svg'));
         },
+        applySvgAttributes(svgData) {
+            const attributes = [];
+            if (this.isFullBackground) {
+                const widthRegex = getRegexToMatchAttributeInSvgTag('width');
+                if (svgData.match(widthRegex)) {
+                    svgData = svgData.replace(widthRegex, `$1width="100%"`);
+                }
+                else {
+                    attributes.push(`width="100%"`);
+                }
+                const heightRegex = getRegexToMatchAttributeInSvgTag('height');
+                if (svgData.match(heightRegex)) {
+                    svgData = svgData.replace(heightRegex, `$1height="100%"`);
+                }
+                else {
+                    attributes.push(`height="100%"`);
+                }
+                const preserveAspectRatioRegex = getRegexToMatchAttributeInSvgTag('preserveAspectRatio');
+                if (svgData.match(preserveAspectRatioRegex)) {
+                    svgData = svgData.replace(preserveAspectRatioRegex, `$1preserveAspectRatio="xMidYMid slice"`);
+                }
+                else {
+                    attributes.push(`preserveAspectRatio="xMidYMid slice"`);
+                }
+            }
+            const svgAttributes = attributes.join(' ');
+            if (svgAttributes) {
+                svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
+            }
+            return svgData;
+        },
         async render() {
             if (this.useObjectElement) {
                 return;
@@ -77,7 +107,18 @@ export default defineComponent({
             if (this.viewModel.style.color) {
                 this.svgData = applyColorToSvgString(this.originalSvgData, this.viewModel.style.color);
             }
-            this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
+            else {
+                this.svgData = this.originalSvgData;
+            }
+            this.svgData = this.applySvgAttributes(this.svgData);
+            const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+            const oldSvgDataObjectUrl = this.svgDataObjectUrl;
+            // Create an Object URL
+            this.svgDataObjectUrl = URL.createObjectURL(blob);
+            if (oldSvgDataObjectUrl) {
+                // clean up previous Object URL
+                URL.revokeObjectURL(oldSvgDataObjectUrl);
+            }
         },
     },
 });

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { isURL } from '../../../utils/validator.util';
+import { isURL, hasValidButton as shouldShowButtonUtil, } from '../../../utils/validator.util';
 import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../../constants';
 import { getRenderText, escapeContentText } from '../../utils';
 import { hasRTEContent } from '../../../brand-page-maker/utils';
@@ -123,14 +123,10 @@ export default defineComponent({
             return buttonViewModel;
         },
         shouldShowButton() {
-            const hasButtonText = this.viewModel.buttonText && this.viewModel.buttonText.length > 0;
-            const hasValidButtonTitle = this.viewModel.buttonViewModel?.title?.length > 0 ||
-                (this.viewModel.buttonViewModel?.url &&
-                    isURL(this.viewModel.buttonViewModel.url));
-            if (hasButtonText && hasValidButtonTitle) {
-                return true;
-            }
-            return false;
+            return shouldShowButtonUtil({
+                buttonText: this.viewModel.buttonText,
+                buttonViewModel: this.viewModel.buttonViewModel,
+            });
         },
         isHorizontalAligned() {
             return (this.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||

package/lib/src/brand-page/components/button/Button.mixin.js

@@ -109,7 +109,8 @@ export default defineComponent({
             return this.url;
         },
         isValidUrl() {
-            if (this.viewModel.role === 'banner-section') {
+            if (this.viewModel.role === 'banner-section' ||
+                this.viewModel.role === 'booking-section') {
                 switch (this.viewModel.buttonLinkType) {
                     case 'mailTo':
                         return isEmail(this.viewModel.url);
@@ -129,7 +130,8 @@ export default defineComponent({
             }
         },
         url() {
-            if (this.viewModel.role === 'banner-section') {
+            if (this.viewModel.role === 'banner-section' ||
+                this.viewModel.role === 'booking-section') {
                 switch (this.viewModel.buttonLinkType) {
                     case 'mailTo':
                         return `mailto:${this.viewModel.url}`;

package/lib/src/brand-page/components/media/Shape.mixin.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     svgData: string;
+    svgDataObjectUrl: string;
     originalSvgData: string;
 }, {
     useObjectElement(): boolean;
@@ -36,9 +37,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         width: any;
         height: any;
     };
-    objectUrl(): string;
-    svgAttributes(): string;
+    objectUrl(): any;
 }, {
+    applySvgAttributes(svgData: string): string;
     renderAsInnerHtml(): Promise<void>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {

package/lib/src/brand-page/components/media/Shape.mixin.js

@@ -3,6 +3,7 @@ import ComponentCommonMixin from '../mixins/component-common.mixin';
 import axios from 'axios';
 import { applyColorReplacementsToSvgString } from '../../utils/svg-color.util';
 import { PROXY_SHAPE_URL_REGEX } from '../../../brand-page/constants';
+import { getRegexToMatchAttributeInSvgTag } from '../../../brand-page/utils/svg.util';
 export default defineComponent({
     mixins: [ComponentCommonMixin],
     props: {
@@ -31,7 +32,7 @@ export default defineComponent({
         },
     },
     data() {
-        return { svgData: '', originalSvgData: '' };
+        return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
     },
     computed: {
         useObjectElement() {
@@ -47,6 +48,9 @@ export default defineComponent({
             };
         },
         objectUrl() {
+            if (!this.useObjectElement) {
+                return this.svgDataObjectUrl;
+            }
             let dimensionQuery = ``;
             if (this.size) {
                 const encodedSize = encodeURIComponent(this.size);
@@ -54,18 +58,15 @@ export default defineComponent({
             }
             return `${this.imageUrl}${dimensionQuery}`;
         },
-        svgAttributes() {
-            const attributes = [];
-            if (this.size) {
-                attributes.push(`height=${this.size} width=${this.size}`);
-            }
-            return attributes.join(' ');
-        },
     },
     watch: {
         colorReplacements: {
-            handler() {
-                this.renderAsInnerHtml();
+            handler(newVal, oldVal) {
+                if (newVal &&
+                    oldVal &&
+                    JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+                    this.renderAsInnerHtml();
+                }
             },
             deep: true,
         },
@@ -101,12 +102,44 @@ export default defineComponent({
         }
     },
     methods: {
+        applySvgAttributes(svgData) {
+            const attributes = [];
+            if (this.size) {
+                const widthRegex = getRegexToMatchAttributeInSvgTag('width');
+                if (svgData.match(widthRegex)) {
+                    svgData = svgData.replace(widthRegex, `$1width="${this.size}"`);
+                }
+                else {
+                    attributes.push(`width="${this.size}"`);
+                }
+                const heightRegex = getRegexToMatchAttributeInSvgTag('height');
+                if (svgData.match(heightRegex)) {
+                    svgData = svgData.replace(heightRegex, `$1height="${this.size}"`);
+                }
+                else {
+                    attributes.push(`height="${this.size}"`);
+                }
+            }
+            const svgAttributes = attributes.join(' ');
+            if (svgAttributes) {
+                svgData = svgData.replace('<svg ', `<svg ${svgAttributes} `);
+            }
+            return svgData;
+        },
         async renderAsInnerHtml() {
             if (!this.originalSvgData) {
                 return;
             }
             this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
-            this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
+            this.svgData = this.applySvgAttributes(this.svgData);
+            const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
+            const oldSvgDataObjectUrl = this.svgDataObjectUrl;
+            // Create an Object URL
+            this.svgDataObjectUrl = URL.createObjectURL(blob);
+            if (oldSvgDataObjectUrl) {
+                // clean up previous Object URL
+                URL.revokeObjectURL(oldSvgDataObjectUrl);
+            }
         },
     },
 });

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

@@ -30,6 +30,7 @@ export declare const CONTENT_TYPES: {
     readonly 'social-links': "social-links";
     readonly 'shapes-section': "shapes-section";
     readonly 'shop-section': "shop-section";
+    readonly 'booking-section': "booking-section";
 };
 export type ContentType = keyof typeof CONTENT_TYPES;
 export declare const PERSONALISATION_ROLES: {

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

@@ -30,6 +30,7 @@ export const CONTENT_TYPES = {
     'social-links': 'social-links',
     'shapes-section': 'shapes-section',
     'shop-section': 'shop-section',
+    'booking-section': 'booking-section',
 };
 export const PERSONALISATION_ROLES = {
     profile: 'profile',

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

@@ -409,6 +409,21 @@ export interface DividerSectionContent extends Content {
     dividerColor: BrandPageCssStyle;
     backgroundStyle?: BrandPageCssStyle;
 }
+export interface BookingSectionContent extends Content {
+    type: 'booking-section';
+    title: string;
+    description: string;
+    buttonText: string;
+    url: string;
+    email?: string;
+    tel?: string;
+    titleStyle: TextStyleDeclaration;
+    descriptionStyle: TextStyleDeclaration;
+    backgroundStyle: BrandPageCssStyle;
+    pageSlug: string;
+    buttonLinkType: ButtonLinkType;
+    buttonTextStyle: TextStyleDeclaration;
+}
 export declare class PageModel {
     title: string;
     slug: string;

package/lib/src/brand-page/utils/content-callback-util.d.ts

@@ -1,4 +1,4 @@
-import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel } from '../models';
+import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel, BookingSectionContent } from '../models';
 export type ContentCallback = {
     profileContentCallback: (content: ProfileContent) => void;
     textContentCallback: (content: TextContent) => void;
@@ -16,5 +16,6 @@ export type ContentCallback = {
     shapesSectionContentCallback: (content: ShapesSectionContent) => void;
     shopSectionContentCallback: (content: ShopContent) => void;
     buttonContentCallback: (content: ButtonContent) => void;
+    bookingSectionContentCallback: (content: BookingSectionContent) => void;
 };
 export declare const forEachPageCallContentCallback: (page: PageModel, callbacks: ContentCallback) => void;

package/lib/src/brand-page/utils/content-callback-util.js

@@ -46,6 +46,9 @@ export const forEachPageCallContentCallback = (page, callbacks) => {
             case 'shop-section':
                 callbacks.shopSectionContentCallback(content);
                 break;
+            case 'booking-section':
+                callbacks.bookingSectionContentCallback(content);
+                break;
             case 'general-link':
             case 'website':
             case 'email':

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

@@ -199,7 +199,7 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
-const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
+const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section', 'booking-section'];
 const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;

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

@@ -5,3 +5,4 @@ export declare const normaliseSvgData: (svgData: string) => string;
 export declare const setSvgCssStyle: (svgData: string, cssStyle: string) => string;
 /** svg linear gradient is shared across the DOM, append unique suffix to avoid conflict issue */
 export declare const appendSvgIdSuffix: (svgData: string, svgIdSuffix: string) => string;
+export declare const getRegexToMatchAttributeInSvgTag: (attribute: string) => RegExp;

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

@@ -21,3 +21,6 @@ export const setSvgCssStyle = (svgData, cssStyle) => {
 export const appendSvgIdSuffix = (svgData, svgIdSuffix) => {
     return svgData.replace(/(SVGID(?:_\d+)+)/g, `$1_${svgIdSuffix}`);
 };
+export const getRegexToMatchAttributeInSvgTag = (attribute) => {
+    return new RegExp(`(<svg\\b[^>]*?)${attribute}="[^"]*"`, 'i');
+};

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 } from '../models';
-import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel } from '../view-models';
+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';
 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;
@@ -7,6 +7,7 @@ export declare const mapToProfileViewModel: (content: ProfileContent, styles: Pa
 export declare const mapToTextViewModel: (content: TextContent, styles: PageStyles, brandPageType: BrandPageType) => TextViewModel;
 export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
+export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[]) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType) => (content: Content) => ContentViewModel | undefined;

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

@@ -234,7 +234,7 @@ const mapToButtonViewModel = (content, styles, options) => {
             }
         },
         buttonLinkType: BUTTON_LINK_TYPE.url,
-        pageSlug: '',
+        pageSlug: content.page || '',
     }, styles);
 };
 export const mapToProfileViewModel = (content, styles) => {
@@ -507,6 +507,27 @@ const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
         isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite,
     }, styles);
 };
+export const mapToBookingSectionViewModel = (content, styles) => {
+    return applyViewModelTextStyles({
+        ...content,
+        role: content.type,
+        type: 'booking-section',
+        buttonViewModel: mapToButtonViewModel({
+            ...content,
+            clickActionField: 'url',
+            iconUrl: '',
+            modalImageUrl: '',
+            url: content.url,
+            title: content.buttonText || '',
+            page: content.pageSlug || '',
+            colorReplacements: [],
+            titleStyle: content.buttonTextStyle,
+        }, styles, {
+            titleStyle: content.buttonTextStyle,
+        }),
+        isFullWidth: true,
+    }, styles);
+};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -619,6 +640,8 @@ export const mapToViewModel = (styles, brandPageType) => (content) => {
             return mapToContactFormViewModel(content, styles, brandPageType);
         case 'banner-section':
             return mapToBannerSectionViewModel(content, styles);
+        case 'booking-section':
+            return mapToBookingSectionViewModel(content, styles);
         case 'about-section':
             return mapToAboutSectionViewModel(content, styles);
         case 'images-section':

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

@@ -1,6 +1,6 @@
-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, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions } 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, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent } 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';
+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 {
     id: string;
     type: ViewModelType;
@@ -96,6 +96,10 @@ export interface SocialLinksViewModel extends ContentViewModel, Omit<SocialLinks
 export interface DividerSectionViewModel extends ContentViewModel, Omit<DividerSectionContent, 'type'> {
     isFullWidth: boolean;
 }
+export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingSectionContent, 'type'> {
+    buttonViewModel: ButtonViewModel;
+    isFullWidth: boolean;
+}
 export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth'> {
     logo: LogoViewModel;
     pages: PageViewModel[];

package/lib/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.d.ts

@@ -1,7 +1,7 @@
-import type { BannerSectionContent } from '../../brand-page';
+import type { BannerSectionContent, BookingSectionContent } from '../../brand-page';
 import type { VisibilityAssessor } from '../models';
-export declare const bannerSectionUrlVisibilityAssessor: VisibilityAssessor<BannerSectionContent | undefined>;
-export declare const bannerSectionPageVisibilityAssessor: VisibilityAssessor<BannerSectionContent | undefined>;
-export declare const bannerLinkTypeVisibilityAssessor: VisibilityAssessor<BannerSectionContent | undefined>;
+export declare const bannerSectionUrlVisibilityAssessor: VisibilityAssessor<BannerSectionContent | BookingSectionContent | undefined>;
+export declare const bannerSectionPageVisibilityAssessor: VisibilityAssessor<BannerSectionContent | BookingSectionContent | undefined>;
+export declare const bannerLinkTypeVisibilityAssessor: VisibilityAssessor<BannerSectionContent | BookingSectionContent | undefined>;
 export declare const bannerDisplayTypeVisibilityAssessor: VisibilityAssessor<BannerSectionContent | undefined>;
 export declare const bannerOverlayOptionsVisibilityAssessor: VisibilityAssessor<BannerSectionContent>;

package/lib/src/brand-page-maker/assessors/banner-section-field.assessor.d.ts

@@ -1,5 +1,5 @@
-import type { BannerSectionContent } from '../../brand-page';
+import type { BannerSectionContent, BookingSectionContent } from '../../brand-page';
 import type { FieldTypeAssessor, PlaceholderTypeAssessor } from '../models';
-export declare const bannerSectionFieldTypeAssessor: FieldTypeAssessor<BannerSectionContent | undefined>;
-export declare const bannerSectionRoleTypeAssessor: FieldTypeAssessor<BannerSectionContent | undefined>;
-export declare const bannerPlaceholderFieldTypeAssessor: PlaceholderTypeAssessor<BannerSectionContent | undefined>;
+export declare const bannerSectionFieldTypeAssessor: FieldTypeAssessor<BannerSectionContent | BookingSectionContent | undefined>;
+export declare const bannerSectionRoleTypeAssessor: FieldTypeAssessor<BannerSectionContent | BookingSectionContent | undefined>;
+export declare const bannerPlaceholderFieldTypeAssessor: PlaceholderTypeAssessor<BannerSectionContent | BookingSectionContent | undefined>;

package/lib/src/brand-page-maker/assessors/banner-section-field.assessor.js

@@ -1,13 +1,13 @@
 export const bannerSectionFieldTypeAssessor = (content) => {
     switch (content?.buttonLinkType) {
         case 'url':
-            return 'url';
+            return content?.type === 'booking-section' ? 'booking-url' : 'url';
         case 'mailTo':
             return 'email';
         case 'tel':
             return 'tel';
         default:
-            return 'url';
+            return 'booking-url';
     }
 };
 export const bannerSectionRoleTypeAssessor = (content) => {

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -2,11 +2,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("../../stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
     items: import("vue").ComputedRef<{
         id: string;
-        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
+        type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
         settings: {
             content: {
                 id: string;
-                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
+                type: "website" | "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;