@designcrowd/library.brand-page 5.12.3 → 5.12.4-ast-booking

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3400,7 +3400,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         contentErrorCount(): number;
         getContent(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3411,11 +3411,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -3449,7 +3449,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../content-settings/store").ContentSettingsState>): (id: string) => import("../../../../brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3460,11 +3460,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -3498,7 +3498,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3509,11 +3509,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -3547,7 +3547,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../content-settings/store").ContentSettingsState>): (id: string) => import("../../../content-settings/models").ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3558,11 +3558,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -3596,7 +3596,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => string | import("../../../../brand-page").Content | undefined;
         getItemState(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3607,11 +3607,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -3645,7 +3645,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../content-settings/store").ContentSettingsState>): (id: string) => import("../../../content-settings/models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
-                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";
                 category: string;
                 createInitialContent: (options: import("../../../content-settings/models").CreateInitialContentOptions) => import("../../../../brand-page").Content;
                 displayName: string;
@@ -3656,11 +3656,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 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;
@@ -4252,11 +4252,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         slug: string;
         contents: {
             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;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     designDraftToken: import("vue").ComputedRef<string | undefined>;
     brandPageViewModel: import("vue").ComputedRef<import("../../brand-page").BrandPageViewModel>;
     backUrl: import("vue").ComputedRef<string>;
-    brandPageDisplayName: import("vue").ComputedRef<string>;
+    brandPageDisplayName: import("vue").ComputedRef<any>;
     publishBrandPage: import("vue").ComputedRef<({ shouldPublish, slug }: {
         shouldPublish: any;
         slug: any;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.js

@@ -45,7 +45,17 @@ export default defineComponent({
             designDraftToken: computed(() => brandPageContainerStore.designDraftToken),
             brandPageViewModel: computed(() => brandPageMakerStore.brandPageViewModel),
             backUrl: computed(() => localisedRouteStore.backToWebsiteManageUrlPath),
-            brandPageDisplayName: computed(() => brandPageContainerStore.brandPageDisplayName),
+            brandPageDisplayName: computed(() => {
+                const brandPageName = brandPageContainerStore.brandPageDisplayName;
+                switch (brandPageName) {
+                    case 'Website':
+                        return publishBrandPageModalWithStateTr('websiteFriendlyName');
+                    case 'Digital Business Card':
+                        return publishBrandPageModalWithStateTr('digitalBusinessCardFriendlyName');
+                    default:
+                        return brandPageName;
+                }
+            }),
             publishBrandPage: computed(() => brandPageContainerStore.publishBrandPage),
             publishCustomDomain: computed(() => brandPageContainerStore.publishBrandPageWithCustomDomainAsync),
             checkWebsiteSlugAsync: computed(() => brandPageContainerStore.checkWebsiteSlugAsync),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.12.3",
+  "version": "5.12.4-ast-booking",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -0,0 +1,240 @@
+<template>
+  <section>
+    <div
+      class="tw-relative tw-px-6 tw-py-8"
+      :style="viewModel.backgroundStyle"
+      style="container-type: inline-size"
+    >
+      <div
+        class="tw-flex tw-gap-8 tw-w-full tw-h-full tw-items-center c_banner-container tw-flex-col tw-gap-5"
+      >
+        <TextWrapper
+          v-if="viewModel.title"
+          :text-style="viewModel.titleStyle"
+          :text="viewModel.title"
+          :slug="context.brandPageSlug"
+          element="h1"
+        />
+        <TextWrapper
+          v-if="hasDescriptionText"
+          :text-style="viewModel.descriptionStyle"
+          :text="renderText"
+          :slug="context.brandPageSlug"
+          element="div"
+        />
+        <div
+          v-if="shouldShowButton"
+          class="tw-w-full tw-flex tw-justify-center"
+        >
+          <button
+            class="tw-block tw-py-4 tw-px-5 tw-text-base tw-text-center tw-w-fit tw-border-0 hover:tw-cursor-pointer"
+            :style="buttonStyle"
+            @click="onClickUrl"
+          >
+            <TextWrapper
+              :text-style="props.viewModel.buttonTextStyle"
+              :text="props.viewModel.buttonText"
+              class="tw-text-center tw-text-base"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import type { PropType, StyleValue } from 'vue';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import type { BookingSectionViewModel } from '../../view-models';
+import type { BrandPageContext } from '../../models';
+import { getRenderText, escapeContentText } from '../../utils';
+import { hasRTEContent } from '../../../brand-page-maker/utils';
+import { isURL, isEmail, isTel } from '../../../utils/validator.util';
+import { getRouteParamsByPage } from '../../utils/route.util';
+import { BP_PAGE_SLUG_ROUTE_NAME, BP_SLUG_ROUTE_NAME } from '../../constants';
+
+const props = defineProps({
+  viewModel: {
+    type: Object as PropType<BookingSectionViewModel>,
+    required: true,
+  },
+  context: {
+    type: Object as PropType<BrandPageContext>,
+    required: true,
+  },
+  containerClientWidth: {
+    type: Number as PropType<number | undefined>,
+    required: false,
+    default: undefined,
+  },
+  containerClientHeight: {
+    type: Number as PropType<number | undefined>,
+    required: false,
+    default: undefined,
+  },
+});
+
+const router = useRouter();
+
+const handleUrlClick = (url: string) => {
+  if (url && isURL(url)) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const handlePageNavigation = (pageSlug: string) => {
+  if (!pageSlug) return;
+
+  const routeParams = getRouteParamsByPage(
+    !!props.context.customDomain,
+    props.context.brandPageSlug,
+    pageSlug,
+  );
+
+  const routeName = !!props.context.customDomain
+    ? BP_SLUG_ROUTE_NAME
+    : BP_PAGE_SLUG_ROUTE_NAME;
+
+  router.push({
+    name: routeName,
+    params: routeParams,
+  });
+};
+
+const handleEmailClick = (email?: string, fallbackUrl?: string) => {
+  if (email && isEmail(email)) {
+    window.location.href = `mailto:${email}`;
+  } else if (fallbackUrl && isEmail(fallbackUrl)) {
+    window.location.href = `mailto:${fallbackUrl}`;
+  }
+};
+
+const handlePhoneClick = (tel?: string, fallbackUrl?: string) => {
+  if (tel && isTel(tel)) {
+    window.location.href = `tel:${tel}`;
+  } else if (fallbackUrl && isTel(fallbackUrl)) {
+    window.location.href = `tel:${fallbackUrl}`;
+  }
+};
+
+const handleFallbackClick = (url?: string) => {
+  if (!url) return;
+
+  if (isEmail(url)) {
+    window.location.href = `mailto:${url}`;
+  } else if (isTel(url)) {
+    window.location.href = `tel:${url}`;
+  } else if (isURL(url)) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const onClickUrl = () => {
+  const { buttonLinkType, url, pageSlug, email, tel } = props.viewModel;
+
+  switch (buttonLinkType) {
+    case 'url':
+      handleUrlClick(url);
+      break;
+
+    case 'page':
+      handlePageNavigation(pageSlug);
+      break;
+
+    case 'mailTo':
+      handleEmailClick(email, url);
+      break;
+
+    case 'tel':
+      handlePhoneClick(tel, url);
+      break;
+
+    default:
+      handleFallbackClick(url);
+      break;
+  }
+};
+
+const renderText = computed((): string => {
+  if (!props.viewModel.description) {
+    return '';
+  }
+
+  if (hasRTEContent(props.viewModel.description)) {
+    return props.viewModel.description;
+  } else {
+    return getRenderText(props.viewModel.description);
+  }
+});
+
+const hasDescriptionText = computed((): boolean => {
+  if (hasRTEContent(props.viewModel.description)) {
+    return escapeContentText(props.viewModel.description) !== '';
+  } else {
+    return props.viewModel?.description?.length > 0;
+  }
+});
+
+const buttonStyle = computed((): StyleValue => {
+  const buttonStyle = {
+    color: props.viewModel.buttonStyles?.style.color,
+    ...props.viewModel.buttonStyles?.style,
+  };
+  const buttonTextStyle = {
+    ...buttonStyle,
+    color: props.viewModel.buttonTextStyle.color,
+  };
+
+  return buttonTextStyle as StyleValue;
+});
+
+const isValidUrl = (url?: string): boolean => !!(url && isURL(url));
+const isValidEmail = (email?: string): boolean => !!(email && isEmail(email));
+const isValidPhone = (tel?: string): boolean => !!(tel && isTel(tel));
+const isValidPage = (pageSlug?: string): boolean => !!pageSlug;
+
+const hasValidTarget = (
+  buttonLinkType: string,
+  url?: string,
+  pageSlug?: string,
+  email?: string,
+  tel?: string,
+): boolean => {
+  switch (buttonLinkType) {
+    case 'url':
+      return isValidUrl(url);
+
+    case 'page':
+      return isValidPage(pageSlug);
+
+    case 'mailTo':
+      return isValidEmail(email) || isValidEmail(url);
+
+    case 'tel':
+      return isValidPhone(tel) || isValidPhone(url);
+
+    default:
+      return isValidUrl(url) || isValidEmail(url) || isValidPhone(url);
+  }
+};
+
+const shouldShowButton = computed((): boolean => {
+  const hasButtonText = !!props.viewModel.buttonText?.length;
+
+  if (!hasButtonText) {
+    return false;
+  }
+
+  const { buttonLinkType, url, pageSlug, email, tel } = props.viewModel;
+  return hasValidTarget(buttonLinkType, url, pageSlug, email, tel);
+});
+</script>
+
+<style scoped>
+.c_banner-container {
+  max-width: var(--brandsite-max-width);
+  margin: 0 auto;
+}
+</style>

package/src/brand-page/components/map/Map.vue

@@ -16,19 +16,27 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import GoogleMap from './GoogleMap.vue';
 import Placeholder from '../placeholder/Placeholder.vue';
-import MapMixin from './Map.mixin.ts';
+import type { MapViewModel } from '../../view-models';
+import type { BrandPageContext } from '../../models';
 import { mapTr } from '../../../composables/useTranslate';
+import { computed } from 'vue';
 
-export default {
-  components: {
-    GoogleMap,
-    Placeholder,
-  },
-  mixins: [MapMixin],
-};
+interface Props {
+  viewModel: MapViewModel;
+  context: BrandPageContext;
+  isPreview?: boolean;
+  isMobileDevice?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isPreview: false,
+  isMobileDevice: false,
+});
+
+const placeId = computed(() => props.viewModel?.address?.placeId);
 </script>
 <style scoped>
 .c-map {

package/src/brand-page/components/page/PageComponent.vue

@@ -33,6 +33,7 @@ import DividerSection from '../divider-section/DividerSection.vue';
 import ShapesSection from '../shapes-section/ShapesSection.vue';
 import PageComponentMixin from './PageComponent.mixin.ts';
 import Shop from '../shop/Shop.vue';
+import BookingSection from '../booking-section/BookingSection.vue';
 
 export default {
   components: {
@@ -57,6 +58,7 @@ export default {
     'bp-divider-section': DividerSection,
     'bp-shapes-section': ShapesSection,
     'bp-shop-section': Shop,
+    'bp-booking-section': BookingSection,
   },
   mixins: [PageComponentMixin],
 };

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

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

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

@@ -581,6 +581,23 @@ export interface DividerSectionContent extends Content {
   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;
+  aspectRatio?: number | null;
+}
+
 export class PageModel {
   title: string;
   slug: string;

package/src/brand-page/utils/style.util.ts

@@ -372,7 +372,7 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   '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 = (

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

@@ -36,6 +36,7 @@ import type {
   LogoTemplateImageModel,
   ShopContent,
   SensitiveContent,
+  BookingSectionContent,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -72,6 +73,7 @@ import type {
   DividerSectionViewModel,
   ShapesSectionViewModel,
   ShopViewModel,
+  BookingSectionViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
@@ -842,6 +844,25 @@ const mapToSocialLinksViewModel = (
   );
 };
 
+export const mapToBookingSectionViewModel = (
+  content: BookingSectionContent,
+  styles: PageStyles,
+): BookingSectionViewModel => {
+  return applyViewModelTextStyles(
+    {
+      ...content,
+      role: content.type,
+      type: 'booking-section',
+      buttonStyles: styles.buttonStyles,
+      buttonTextStyle: {
+        ...content.buttonTextStyle,
+      },
+      isFullWidth: true,
+    },
+    styles,
+  );
+};
+
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1048,6 +1069,12 @@ export const mapToViewModel =
           styles,
         );
 
+      case 'booking-section':
+        return mapToBookingSectionViewModel(
+          content as BookingSectionContent,
+          styles,
+        );
+
       case 'about-section':
         return mapToAboutSectionViewModel(
           content as AboutSectionContent,