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

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

@@ -5,11 +5,11 @@ import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<{}, {
     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;
@@ -73,7 +73,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -84,11 +84,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;
@@ -122,7 +122,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => 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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -133,11 +133,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;
@@ -171,7 +171,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("../../../shared/content-settings/models").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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -182,11 +182,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;
@@ -220,7 +220,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => 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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -231,11 +231,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;
@@ -269,7 +269,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => string | 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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -280,11 +280,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;
@@ -318,7 +318,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/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("../../../shared/content-settings/models").CreateInitialContentOptions) => Content;
                 displayName: string;
@@ -329,11 +329,11 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             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;

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -1,7 +1,7 @@
 import { type ModelRef, type ComputedRef, type Ref, type WritableComputedRef } from 'vue';
 import { Editor } from '@tiptap/vue-3';
 import type { StyleTextFontFamilyOption } from '../../../shared/style-settings/models';
-import type { TextStyles } from '../../../brand-page';
+import type { HyperlinkType, TextStyles } from '../../../brand-page';
 import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
 import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
 interface UseRichTextEditorReturn {
@@ -70,6 +70,7 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     placeholder: string;
     textItemIndex: number;
     item: TextItem;
+    contentType: string;
 }, emit: (event: 'focus' | 'blur' | 'update:modelValue', ...args: any[]) => void, fontSettings: {
     selectedTextStyle: string;
     selectedFont: string;
@@ -77,5 +78,5 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     selectedFontSizePx: number;
     selectedTextColor: string;
     selectedBackgroundColor: string;
-}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>) => UseRichTextEditorReturn;
+}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>, selectedLinkTypeValue: Ref<HyperlinkType>) => UseRichTextEditorReturn;
 export {};

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -18,7 +18,7 @@ import { useFont } from './font';
 import { useSpacing } from './spacing';
 import Color from 'color';
 import { buildInitialMarks, emToPx, isStyleChanged, pxToEm, sanitiseClientSideRTE, skipStyleDetection, } from '../../../brand-page-maker/utils';
-import {} from '../../../brand-page';
+import { HYPERLINK_TYPE, } from '../../../brand-page';
 import { letterSpacingValueConvertor, colorConvertor, backgroundColorConvertor, } from '../../../brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
 import { AllSelection } from 'prosemirror-state';
@@ -27,6 +27,7 @@ import { AutoLink } from './extensions/AutoLink';
 import { useHyperlink } from './hyperlink';
 import { useBubbleMenu } from './bubbleMenu';
 import { hasLogoColorVar, isLogoColor, getRTEColor, } from '../../utils/rich-text-editor.util';
+import { useEventTracker, EVENTS } from '../useEventTracker';
 export const useExternalRichTextEditor = () => {
     const externalEditor = new Editor({
         editable: false,
@@ -69,7 +70,7 @@ export const useExternalRichTextEditor = () => {
         externalEditor,
     };
 };
-export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen) => {
+export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen, selectedLinkTypeValue) => {
     const editor = new Editor({
         content: model.value ?? '',
         editable: !props.readOnly,
@@ -206,6 +207,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         },
     });
     const contentSettingStore = useUiContentSettingsStore();
+    const eventTracker = useEventTracker();
     const { toggleBold, toggleItalic, toggleUnderline, toggleStrike, toggleTextColor, toggleBackgroundColor, toggleBoldAll, toggleItalicAll, toggleUnderlineAll, toggleStrikeAll, toggleTextColorAll, unsetAllMarks, } = createFormattingActions(editor);
     const { currentAlignment, toggleTextAlign, idx: currentAlignmentIndex, keys: alignmentKeys, } = useTextAlign(editor);
     const { selectedFont, toggleFont, toggleFontSize, toggleFontAll, toggleFontSizeAll, } = useFont(editor, fontSettings, fontStyleDropdownRef);
@@ -505,8 +507,18 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
         emit('blur');
     };
     const handleHyperlink = (action, data) => {
+        const linkType = selectedLinkTypeValue.value === HYPERLINK_TYPE.page
+            ? 'internal_link'
+            : 'external_link';
         switch (action) {
             case 'toggle':
+                eventTracker.sendWebsiteEvent({
+                    eventName: EVENTS.WEBSITE_MAKER_HYPERLINK_CLICK,
+                    eventProps: {
+                        link_type: linkType,
+                        content_type: props.contentType,
+                    },
+                });
                 isHyperlinkPopupOpen.value = !isHyperlinkPopupOpen.value;
                 if (isHyperlinkPopupOpen.value) {
                     if (data?.href && data?.text) {
@@ -534,6 +546,14 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 }
                 break;
             case 'apply':
+                // Track Mixpanel event for hyperlink attachment
+                eventTracker.sendWebsiteEvent({
+                    eventName: EVENTS.WEBSITE_MAKER_HYPERLINK_ADD,
+                    eventProps: {
+                        link_type: linkType,
+                        content_type: props.contentType,
+                    },
+                });
                 const url = hyperlinkValue.value.value;
                 const text = markedText.value;
                 if (!url.trim()) {
@@ -548,6 +568,13 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
                 isHyperlinkPopupOpen.value = false;
                 break;
             case 'remove':
+                eventTracker.sendWebsiteEvent({
+                    eventName: EVENTS.WEBSITE_MAKER_HYPERLINK_REMOVE,
+                    eventProps: {
+                        link_type: linkType,
+                        content_type: props.contentType,
+                    },
+                });
                 removeHyperlinkFromComposable();
                 isHyperlinkPopupOpen.value = false;
                 break;

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -32,6 +32,10 @@ export declare const EVENTS: {
     WEBSITE_MAKER_TEMPLATE_SELECT: string;
     WEBSITE_MAKER_TEMPLATE_CATEGORY_SELECT: string;
     WEBSITE_SIDEBAR_TAB_CLICKED: string;
+    WEBSITE_MAKER_HYPERLINK_ADD: string;
+    WEBSITE_MAKER_HYPERLINK_REMOVE: string;
+    WEBSITE_MAKER_HYPERLINK_CLICK: string;
+    WEBSITE_MAKER_HYPERLINK_EDIT: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -15,6 +15,10 @@ export const EVENTS = {
     WEBSITE_MAKER_TEMPLATE_SELECT: 'website_maker_template_select',
     WEBSITE_MAKER_TEMPLATE_CATEGORY_SELECT: 'website_maker_template_category_select',
     WEBSITE_SIDEBAR_TAB_CLICKED: 'website_sidebar_tab_clicked',
+    WEBSITE_MAKER_HYPERLINK_ADD: 'website_maker_hyperlink_add',
+    WEBSITE_MAKER_HYPERLINK_REMOVE: 'website_maker_hyperlink_remove',
+    WEBSITE_MAKER_HYPERLINK_CLICK: 'website_maker_hyperlink_click',
+    WEBSITE_MAKER_HYPERLINK_EDIT: 'website_maker_hyperlink_edit',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',

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

@@ -1,4 +1,4 @@
-import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, TwitterContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent } from '../../brand-page';
+import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, TwitterContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '../../brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
 export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, 'version' | 'logoVariation' | 'logoImageHeight' | 'logoImageWidth' | 'logoLastUpdate' | 'logoImageBase64Url'>>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
@@ -47,4 +47,5 @@ export declare const SHAPES_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig
 export declare const SHOP_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<ShopContent, {
     paymentConfig: any;
 }>;
+export declare const BOOKING_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<BookingSectionContent>;
 export declare const CONTENT_SETTINGS_CONFIGS: () => Record<ContentType, ContentSettingsConfig<any>>;

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

@@ -1,5 +1,5 @@
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, } from '../../brand-page';
-import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, } from '../models';
+import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '../../brand-page';
 import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactBackgroundDisplayTypeVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
@@ -2560,6 +2560,105 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
     isLocked: false,
     type: 'shop-section',
 });
+export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
+    type: 'booking-section',
+    category: 'sections',
+    createInitialContent: createInitialBookingSectionContent,
+    displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
+    defaultIconName: 'calendar',
+    displayName: contentSettingsTr(`bookingSectionDisplayName`),
+    fieldGroups: [
+        {
+            id: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            displayName: contentSettingsTr(`settingsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            displayName: contentSettingsTr(`styleDisplayName`),
+            isCollapsed: true,
+        },
+    ],
+    fields: {
+        titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
+        descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
+        buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+        title: {
+            type: 'text',
+            placeholder: contentSettingsTr(`titlePlaceholder`),
+            title: contentSettingsTr(`titleTitle`),
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            maxLength: 200,
+        },
+        titleOverride: {
+            type: 'personalisation-override',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'title'),
+        },
+        description: {
+            type: 'textarea',
+            placeholder: contentSettingsTr(`descriptionPlaceholder`),
+            title: contentSettingsTr(`descriptionTitle`),
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            maxLength: 1000,
+        },
+        descriptionOverride: {
+            type: 'personalisation-override',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'description'),
+        },
+        buttonText: {
+            type: 'text',
+            placeholder: contentSettingsTr(`getStartedPlaceholder`),
+            title: contentSettingsTr(`buttonTitle`),
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            maxLength: 60,
+        },
+        buttonTextOverride: {
+            type: 'personalisation-override',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'buttonText'),
+        },
+        backgroundStyle: {
+            type: 'color',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+        },
+        buttonLinkType: {
+            type: 'radio',
+            role: 'multi',
+            defaultValue: BUTTON_LINK_TYPE.url,
+            title: contentSettingsTr(`buttonLinkTitle`),
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            optionsConvertor: buttonLinkStyleConvertor,
+            visibilityAssessor: bannerLinkTypeVisibilityAssessor,
+        },
+        pageSlug: {
+            type: 'page-dropdown',
+            placeholder: contentSettingsTr(`selectAPagePlaceholder`),
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: bannerSectionPageVisibilityAssessor,
+            validator: pageValidator,
+            defaultValue: '',
+        },
+        url: {
+            type: 'url',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
+            fieldTypeAssessor: bannerSectionFieldTypeAssessor,
+            roleAssessor: bannerSectionRoleTypeAssessor,
+            placeholderAssessor: bannerPlaceholderFieldTypeAssessor,
+            visibilityAssessor: bannerSectionUrlVisibilityAssessor,
+            validator: urlValidator,
+            defaultValue: '',
+        },
+    },
+    isEnabled: true,
+    isLocked: false,
+});
 export const CONTENT_SETTINGS_CONFIGS = () => ({
     logo: LOGO_SETTINGS_CONFIG(),
     'general-link': GENERAL_LINK_CONTENT_SETTINGS_CONFIG(),
@@ -2592,4 +2691,5 @@ export const CONTENT_SETTINGS_CONFIGS = () => ({
     'divider-section': DIVIDER_SECTION_SETTINGS_CONFIG(),
     'shapes-section': SHAPES_SECTION_SETTINGS_CONFIG(),
     'shop-section': SHOP_SECTION_SETTINGS_CONFIG(),
+    'booking-section': BOOKING_SECTION_SETTINGS_CONFIG(),
 });

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

@@ -1,5 +1,5 @@
 import { BrandPageModel } from '../../brand-page';
-import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent } from '../../brand-page';
+import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent } from '../../brand-page';
 import type { CreateInitialContentFunction } from './content-settings-configs';
 import type { CreateInitialContentOptions } from '../../shared/content-settings/models';
 export declare const createInitialButtonContent: (type: ContentType, iconUrl: string, options?: CreateInitialContentOptions) => () => ButtonContent;
@@ -17,6 +17,7 @@ export declare const createInitialShopContent: (options?: CreateInitialContentOp
 export declare const createInitialSupportMeContent: (options?: CreateInitialContentOptions) => SupportMeContent;
 export declare const createInitialContactFormContent: CreateInitialContentFunction<ContactFormContent>;
 export declare const createInitialBannerSectionContent: CreateInitialContentFunction<BannerSectionContent>;
+export declare const createInitialBookingSectionContent: CreateInitialContentFunction<BookingSectionContent>;
 export declare const createInitialImagesSectionContent: CreateInitialContentFunction<ImagesSectionContent>;
 export declare const createInitialTestimonialSectionContent: CreateInitialContentFunction<TestimonialSectionContent>;
 export declare const createInitialAboutSectionContent: CreateInitialContentFunction<AboutSectionContent>;

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

@@ -418,6 +418,34 @@ export const createInitialBannerSectionContent = (options) => {
         overlayOpacity: 50,
     };
 };
+export const createInitialBookingSectionContent = (options) => {
+    return {
+        id: uuid.v4(),
+        title: contentSettingsTr(`defaultBookingTitle`),
+        description: contentSettingsTr(`defaultBookingDescription`),
+        buttonText: contentSettingsTr(`bookNowLabel`),
+        url: '',
+        type: 'booking-section',
+        descriptionStyle: {
+            applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+            textStyleType: TEXT_STYLE_TYPES.paragraphs,
+            textAlign: 'center',
+        },
+        titleStyle: {
+            applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+            textStyleType: TEXT_STYLE_TYPES.titles,
+            textAlign: 'center',
+        },
+        backgroundStyle: {},
+        pageSlug: '',
+        buttonLinkType: BUTTON_LINK_TYPE.url,
+        buttonTextStyle: {
+            applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+            textStyleType: TEXT_STYLE_TYPES.buttons,
+            textAlign: 'center',
+        },
+    };
+};
 export const createInitialImagesSectionContent = (options) => {
     return {
         id: uuid.v4(),

package/lib/src/brand-page-maker/validators/section-button.validator.d.ts

@@ -1,5 +1,5 @@
-import { type BannerSectionContent } from '../../brand-page/models';
+import { type BannerSectionContent, type BookingSectionContent } from '../../brand-page/models';
 import type { ContentValidator } from '../models';
 export declare const textValidator: ContentValidator<BannerSectionContent>;
-export declare const urlValidator: ContentValidator<BannerSectionContent>;
-export declare const pageValidator: ContentValidator<BannerSectionContent>;
+export declare const urlValidator: ContentValidator<BannerSectionContent | BookingSectionContent>;
+export declare const pageValidator: ContentValidator<BannerSectionContent | BookingSectionContent>;