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

package/lib/src/{CreatedOnBrandCrowd-de-de-BIS4HwLB.js → CreatedOnBrandCrowd-de-de-BQeJ_n6B.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DxDARay8.js → CreatedOnBrandCrowd-en-us-Cj3iYC5T.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CooG2xz7.js → CreatedOnBrandCrowd-es-es-Cl7JjVJm.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CGfs-T2d.js → CreatedOnBrandCrowd-fr-fr-DRomv4BA.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CVY8SeTl.js → CreatedOnBrandCrowd-pt-pt-DZFEw5Xl.js}

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

package/lib/src/{CreatedOnDcom-de-de-1fdeLt5s.js → CreatedOnDcom-de-de-DZhX2bER.js}

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

package/lib/src/{CreatedOnDcom-en-us-0ItobO75.js → CreatedOnDcom-en-us-Bh9DHJW3.js}

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

package/lib/src/{CreatedOnDcom-es-es-Bss96GRx.js → CreatedOnDcom-es-es-CUkCHVmG.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CXmnIRMO.js → CreatedOnDcom-fr-fr-CF_tcHWx.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BDYYHpJa.js → CreatedOnDcom-pt-pt-gyRIp-Wi.js}

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

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,22 @@ 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;
+    aspectRatio?: number | null;
+}
 export declare class PageModel {
     title: string;
     slug: string;

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

@@ -507,6 +507,18 @@ 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',
+        buttonStyles: styles.buttonStyles,
+        buttonTextStyle: {
+            ...content.buttonTextStyle,
+        },
+        isFullWidth: true,
+    }, styles);
+};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -619,6 +631,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'> {
+    buttonStyles: ButtonStyles;
+    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/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;

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

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
 }>, {
+    commonTr: (key: any) => any;
     currentNotificationMessage: import("vue").ComputedRef<false | {
         type: "success" | "warning" | "error";
         label: string;
@@ -407,7 +408,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("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -418,11 +419,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;
@@ -456,7 +457,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/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("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -467,11 +468,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;
@@ -505,7 +506,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & 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) => import("../../../brand-page").Content;
                 displayName: string;
@@ -516,11 +517,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;
@@ -554,7 +555,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/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("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -565,11 +566,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;
@@ -603,7 +604,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/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("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -614,11 +615,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;
@@ -652,7 +653,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & 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) => import("../../../brand-page").Content;
                 displayName: string;
@@ -663,11 +664,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;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -19,6 +19,7 @@ import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/shop-settings-store';
 import { useProductConfigStore } from '../../../brand-page-maker/stores/product-config/product-config-store';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
+import { commonTr } from '../../../composables/useTranslate';
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
 export default defineComponent({
     props: {
@@ -41,6 +42,7 @@ export default defineComponent({
         const router = useRouter();
         const localisedRouteStore = useLocalisedRouteStore();
         return {
+            commonTr,
             currentNotificationMessage: computed(() => brandPageMakerStore.currentNotificationMessage),
             isChangeTemplateConfirmModalVisible: computed(() => brandPageMakerStore.isChangeTemplateConfirmModalVisible),
             // the state of Mobile/Desktop tab