@designcrowd/library.brand-page 5.16.8 → 5.16.10-getty-10

package/lib/src/{CreatedOnBrandCrowd-de-de-BIOe-8IA.js → CreatedOnBrandCrowd-de-de-BIjRKi0F.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DV20bca1.js → CreatedOnBrandCrowd-en-us-BJtBDIyA.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DKqBeyh-.js → CreatedOnBrandCrowd-es-es-B7J67yjT.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BzxDd-OM.js → CreatedOnBrandCrowd-fr-ca-C5TLsBYX.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BzxDd-OM.js → CreatedOnBrandCrowd-fr-fr-C5TLsBYX.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B1jO4ynE.js → CreatedOnBrandCrowd-pt-br-D-KHM2hS.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-B1jO4ynE.js → CreatedOnBrandCrowd-pt-pt-D-KHM2hS.js}

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

package/lib/src/{CreatedOnDcom-de-de-Dbz_XUoY.js → CreatedOnDcom-de-de--GWR7Qla.js}

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

package/lib/src/{CreatedOnDcom-en-us-C5klzL2y.js → CreatedOnDcom-en-us-BO2F6SS7.js}

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

package/lib/src/{CreatedOnDcom-es-es-CP1DRQVG.js → CreatedOnDcom-es-es-33HIiu3I.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-Dh-kd_pp.js → CreatedOnDcom-fr-ca-UUaaDmf2.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DP2Sztda.js → CreatedOnDcom-fr-fr-oUrNkYca.js}

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

package/lib/src/{CreatedOnDcom-pt-br-C8n0YKop.js → CreatedOnDcom-pt-br-1EEVqgW5.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DqGJHyCL.js → CreatedOnDcom-pt-pt-JNtXR9kt.js}

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

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -79,15 +79,18 @@ export default defineComponent({
         },
         backgroundShapes() {
             const backgroundShapes = [
-                ...(this.viewModel?.styles?.backgroundStyles?.backgroundShapes || []),
+                ...(this.viewModel?.styles?.backgroundStylesViewModel
+                    ?.backgroundShapes || []),
             ];
             // TODO: create style viewmodel object to include backgroundImageContent attribute only on viewmodel
             // p.s backgroundImageUrl can be url or SVG content string
-            if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl) {
+            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
                 backgroundShapes.splice(0, 0, {
-                    name: this.viewModel.styles.backgroundStyles.backgroundImageUrl,
+                    name: this.viewModel.styles.backgroundStylesViewModel
+                        .backgroundImageUrl,
                     style: {
-                        ...this.viewModel.styles.backgroundStyles.backgroundShapeStyle,
+                        ...this.viewModel.styles.backgroundStylesViewModel
+                            .backgroundShapeStyle,
                         width: `100%`,
                         height: `100%`,
                     },
@@ -97,10 +100,11 @@ export default defineComponent({
         },
         rootElementStyles() {
             let styles = {};
-            if (!this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl &&
-                this.viewModel?.styles?.backgroundStyles?.style) {
+            if (!this.viewModel?.styles?.backgroundStylesViewModel
+                ?.backgroundImageUrl &&
+                this.viewModel?.styles?.backgroundStylesViewModel?.style) {
                 styles = {
-                    ...this.viewModel?.styles?.backgroundStyles?.style,
+                    ...this.viewModel?.styles?.backgroundStylesViewModel?.style,
                 };
             }
             Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
@@ -117,26 +121,26 @@ export default defineComponent({
         },
         rootBackgroundStyles() {
             const styles = {
-                ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
+                ...(this.viewModel?.styles?.backgroundStylesViewModel?.style || {}),
             };
             delete styles.backgroundAttachment;
-            if (this.viewModel.styles?.backgroundStyles?.backgroundImageUrl &&
-                (this.viewModel.styles.backgroundStyles.backgroundImageUrl.endsWith(`.svg`) ||
-                    !this.viewModel.styles?.backgroundStyles?.backgroundImageUrl.startsWith('http'))) {
+            if (this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl &&
+                (this.viewModel.styles.backgroundStylesViewModel.backgroundImageUrl.endsWith(`.svg`) ||
+                    !this.viewModel.styles?.backgroundStylesViewModel?.backgroundImageUrl.startsWith('http'))) {
                 // Any backgroundImageUrl that handles svg file, svg markup is handled as BackgroundShape object
                 delete styles.backgroundImage;
             }
-            else if (this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl) {
+            else if (this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl) {
                 // if background is a gradient
-                if (this.viewModel?.styles?.backgroundStyles?.style?.background?.startsWith('linear-gradient')) {
+                if (this.viewModel?.styles?.backgroundStylesViewModel?.style?.background?.startsWith('linear-gradient')) {
                     // combine image and gradient into the `background` property
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStyles?.style?.background}`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl}), ${this.viewModel?.styles?.backgroundStylesViewModel?.style?.background}`;
                     delete styles.background;
                 }
                 else {
                     // background is a solid color
                     styles.backgroundColor = styles.background;
-                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
+                    styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStylesViewModel?.backgroundImageUrl})`;
                     delete styles.background;
                 }
             }

package/lib/src/brand-page/components/page/Page.stories.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import Page from './Page.vue';
-import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToViewModel, } from '../../utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, mapToViewModel, } from '../../utils';
 import { BRAND_PAGE_TYPES, BrandPageModel, SENSITIVE_CONTENT_TYPES, VIEWPORTS, } from '../../models';
 export default {
     title: 'Components/BrandPage/Page',
@@ -17,7 +17,7 @@ const pages = brandPageModel.pages.map((p) => ({
 }));
 const viewModel = {
     showBrandCrowdLogo: true,
-    styles: brandPageModel.styles,
+    styles: mapToPageStyleViewModel(brandPageModel.styles, {}),
     headerViewModelDesktop: mapToPageHeaderViewModel(brandPageModel.pageHeaderDesktop, brandPageModel.styles, pages),
     headerViewModelMobile: mapToPageHeaderViewModel(brandPageModel.pageHeaderMobile, brandPageModel.styles, pages),
     footerViewModelDesktop: mapToPageFooterViewModel(brandPageModel.pageFooterDesktop, brandPageModel.styles),

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

@@ -36,7 +36,6 @@ export interface AbTestResult {
 }
 export interface AbTest {
     bp_3926_freemium_watermark?: AbTestResult;
-    bp_4092_rotating_upsells_at_publish?: AbTestResult;
     bp_4572_ai_text_generation_post_purchase?: AbTestResult;
 }
 export declare const MEDIA_SIZES: {

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

@@ -24,7 +24,6 @@ export const AB_TEST_FLAG = {
 };
 const AB_TEST_KEYS = {
     BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
-    BP_4092_ROTATING_UPSELLS_AT_PUBLISH: 'bc-bp-4092-rotating-upsells-at-website-publish',
     BP_4572_AI_TEXT_GENERATION_POST_PURCHASE: 'bc-bp-4572-ai-text-generation-post-purchase',
 };
 export const MEDIA_SIZES = {

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

@@ -32,6 +32,7 @@ export declare class BackgroundStyles {
     backgroundImageUrl: string;
     backgroundShapes: BackgroundShape[];
     personalisationRole?: PersonalisationRole;
+    media?: AbstractMedia;
     constructor(option?: Partial<BackgroundStyles>);
 }
 export declare const GALLERY_TYPES: {

package/lib/src/brand-page/models/index.js

@@ -47,6 +47,7 @@ export class BackgroundStyles {
     backgroundImageUrl;
     backgroundShapes;
     personalisationRole;
+    media;
     constructor(option = {}) {
         this.backgroundImageUrl = option.backgroundImageUrl || '';
         this.backgroundShapes = (option.backgroundShapes ||
@@ -59,6 +60,7 @@ export class BackgroundStyles {
                 background: '',
             };
         this.personalisationRole = option.personalisationRole;
+        this.media = option.media || undefined;
     }
 }
 export const GALLERY_TYPES = {

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

@@ -1,5 +1,5 @@
 import type { ImageContent, ProfileContent, TextContent, PageStyles, Content, BrandPageModel, ImageGalleryContent, GalleryStyles, BannerSectionContent, ImagesSectionContent, BrandPageType, PageHeaderDesktop, PageFooterDesktop, PageFooterMobile, PageHeaderMobile, LogoImageModel, LogoTemplateImageModel, BookingSectionContent } from '../models';
-import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel } from '../view-models';
+import type { ImageViewModel, LogoViewModel, ProfileViewModel, TextViewModel, ContentViewModel, BrandPageViewModel, ImageGalleryViewModel, PageViewModel, BannerSectionViewModel, PageHeaderViewModel, PageFooterViewModel, TextImageSectionViewModel, BookingSectionViewModel, PageStylesViewModel } from '../view-models';
 export declare const applyViewModelTextStyles: <T extends ContentViewModel>(content: T, styles: PageStyles) => T;
 export declare const mapToImageViewModel: (content: ImageContent) => ImageViewModel;
 export declare const mapToImageGalleryViewModel: (content: ImageGalleryContent, globalStyles: GalleryStyles) => ImageGalleryViewModel;
@@ -8,6 +8,7 @@ export declare const mapToTextViewModel: (content: TextContent, styles: PageStyl
 export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles, options: ViewModelMappingOptions) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
+export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;

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

@@ -604,6 +604,15 @@ export const mapToBookingSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
+export const mapToPageStyleViewModel = (pageStyles, options) => {
+    return {
+        backgroundStylesViewModel: mapBackgroundStylesToViewModel(pageStyles.backgroundStyles, options),
+        buttonStyles: pageStyles.buttonStyles,
+        logoStyles: pageStyles.logoStyles,
+        textStyles: pageStyles.textStyles,
+        galleryStyles: pageStyles.galleryStyles,
+    };
+};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -749,6 +758,22 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             assertUnreachable();
     }
 };
+const mapBackgroundStylesToViewModel = (backgroundStyles, options) => {
+    // TODO(jyao): These need to be mapped to a view model eventually
+    return {
+        style: backgroundStyles.style,
+        backgroundShapeStyle: backgroundStyles.backgroundShapeStyle,
+        backgroundImageUrl: backgroundStyles.backgroundImageUrl,
+        backgroundShapes: backgroundStyles.backgroundShapes,
+        personalisationRole: backgroundStyles.personalisationRole,
+        mediaViewModel: backgroundStyles.media
+            ? mapMediaToContentViewModel({
+                media: backgroundStyles.media,
+                options,
+            })
+            : undefined,
+    };
+};
 export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true, options) => {
     const pages = model.pages.map((p) => {
         const contents = p.contents
@@ -765,7 +790,7 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         brandPageToken,
         pages,
         showBrandCrowdLogo,
-        styles: model.styles,
+        styles: mapToPageStyleViewModel(model.styles, options),
         headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, options.useOldLogoRenderSize),
         headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, options.useOldLogoRenderSize),
         footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles, options.useOldLogoRenderSize),
@@ -850,7 +875,7 @@ export const getCriticalResourceURLs = (viewModel) => {
             }
         }
         // shapes
-        const bgShapeFullBg = viewModel.styles?.backgroundStyles.backgroundImageUrl;
+        const bgShapeFullBg = viewModel.styles?.backgroundStylesViewModel.backgroundImageUrl;
         if (typeof bgShapeFullBg !== 'undefined' && isValidSvgUrl(bgShapeFullBg)) {
             shapes.push(String(bgShapeFullBg));
         }

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

@@ -1,4 +1,4 @@
-import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -134,10 +134,25 @@ export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeader
 export interface PageFooterViewModel extends Omit<PageFooterDesktop | PageFooterMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth'> {
     logo: LogoViewModel;
 }
+export interface BackgroundStylesViewModel {
+    style: BackgroundStyle;
+    backgroundShapeStyle: BackgroundStyle;
+    backgroundImageUrl: string;
+    backgroundShapes: BackgroundShape[];
+    personalisationRole?: PersonalisationRole;
+    mediaViewModel?: MediaViewModel;
+}
+export interface PageStylesViewModel {
+    backgroundStylesViewModel: BackgroundStylesViewModel;
+    buttonStyles: ButtonStyles;
+    logoStyles: LogoStyles;
+    textStyles: TextStyles;
+    galleryStyles: GalleryStyles;
+}
 export interface BrandPageViewModel {
     brandPageToken?: string;
     showBrandCrowdLogo: boolean;
-    styles: PageStyles;
+    styles: PageStylesViewModel;
     pages: PageViewModel[];
     brandPageType: BrandPageType;
     headerViewModelDesktop: PageHeaderViewModel;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -48,7 +48,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -80,6 +79,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -92,7 +92,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             aspectRatio?: string | undefined;
             width?: string | undefined;
             height?: string | undefined;
-            textAlign?: string | undefined;
             backgroundAttachment?: string | undefined;
             background?: string | undefined;
             backgroundImage?: string | undefined;
@@ -124,6 +123,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             overflowWrap?: string | undefined;
             paddingTop?: string | undefined;
             position?: string | undefined;
+            textAlign?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
             transform?: string | undefined;
@@ -181,6 +181,9 @@ declare const _default: import("vue").DefineComponent<{}, {
             };
         }[];
         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+        media?: {
+            type: import("../../../brand-page").MediaTypes;
+        } | undefined;
     }>;
     uiStore: import("pinia").Store<"ui", import("../../../lib").UIRootState, {
         endpoints: () => import("../../../lib").Endpoints;
@@ -255,6 +258,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundMode(payload: {
             backgroundMode: "images" | "edit";
         }): void;
+        setBackgroundMedia(payload: import("src/shared/my-uploads/models").MediaBaseSelectedPayload): void;
+        removeBackgroundVideo(): void;
     }>;
 }, {
     isColorMatch: {};

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

@@ -1009,6 +1009,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
     };
     externalEditor: import("@tiptap/vue-3").Editor;
     styleSettingsStore: import("pinia").Store<"uiStyleSettings", import("../../../shared/style-settings/store").StyleSettingsState, {

package/lib/src/brand-page-maker/components/preview/Preview.stories.js

@@ -3,7 +3,7 @@ import Preview from './Preview.vue';
 import { brandPageData } from '../../../brand-page/__fixtures__/brand-page-sample-data';
 import { PageStyles, BRAND_PAGE_TYPES, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, SENSITIVE_CONTENT_TYPES, } from '../../../brand-page';
 import { setupStoryPinia } from '../brand-page-maker/__fixtures__/store-fixture';
-import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToViewModel, } from '../../../brand-page/utils';
+import { mapToPageFooterViewModel, mapToPageHeaderViewModel, mapToPageStyleViewModel, mapToViewModel, } from '../../../brand-page/utils';
 export default {
     title: 'Components/BrandPageMaker/Preview',
     component: Preview,
@@ -21,7 +21,7 @@ const pages = [
 ];
 const viewModel = {
     showBrandCrowdLogo: true,
-    styles: pageStyles,
+    styles: mapToPageStyleViewModel(pageStyles, {}),
     headerViewModelDesktop: mapToPageHeaderViewModel(new PageHeaderDesktop(), pageStyles, pages),
     headerViewModelMobile: mapToPageHeaderViewModel(new PageHeaderMobile(), pageStyles, pages),
     footerViewModelDesktop: mapToPageFooterViewModel(new PageFooterDesktop(), pageStyles),

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

@@ -42,6 +42,11 @@ export declare const EVENTS: {
     WEBSITE_MAKER_UPSELL_ACTION: string;
     WEBSITE_MAKER_SWITCH_LOGO: string;
     WEBSITE_MAKER_SWITCH_LOGO_MODAL: string;
+    WEBSITE_MAKER_AI_GENERATE_TEXT: string;
+    WEBSITE_MAKER_AI_REGENERATE_TEXT: string;
+    WEBSITE_MAKER_AI_SEND_PROMPT: string;
+    WEBSITE_MAKER_AI_COPY_RESPONSE: string;
+    WEBSITE_MAKER_AI_STOP_GENERATION: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;
@@ -62,6 +67,14 @@ export declare const UPGRADE_CTA_LOCATIONS: {
     SLUG_CHANGE_MANAGE_PAGE: string;
     GOOGLE_ADSENSE: string;
 };
+export declare const GENERATE_AI_TEXT_CTA_LOCATIONS: {
+    BANNER_DESCRIPTION: string;
+    BANNER_TITLE: string;
+    ABOUT_TITLE: string;
+    ABOUT_PARAGRAPH: string;
+    TEXT_ITEM: string;
+    TESTIMONIAL_ITEM: string;
+};
 export declare const TRIGGER_TYPE: {
     AUTOMATIC: string;
     USER_TRIGGERED: string;
@@ -74,6 +87,10 @@ export declare const PUBLISH_MODAL_CONTINUATION_EVENTS: {
     COPY_LINK: string;
     VIEW_WEBSITE: string;
 };
+export declare const GENERATE_TEXT_CONTINUATION_EVENTS: {
+    USE_TEXT: string;
+    EXIT: string;
+};
 export declare const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS: {
     PREMIUM: string;
     EXIT: string;
@@ -104,5 +121,6 @@ declare const useEventTracker: () => {
     sendAddContentContinuationEvent: (continuation: string) => void;
     sendUpsellOfferEvent: (upsellType: string) => void;
     sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+    sendGenerateTextContinuationEvent: (cta_location: string, continuation: string | null) => void;
 };
 export { useEventTracker };

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

@@ -25,6 +25,11 @@ export const EVENTS = {
     WEBSITE_MAKER_UPSELL_ACTION: 'website_maker_upsell_action',
     WEBSITE_MAKER_SWITCH_LOGO: 'website_maker_switch_logo',
     WEBSITE_MAKER_SWITCH_LOGO_MODAL: 'website_maker_switch_logo_modal',
+    WEBSITE_MAKER_AI_GENERATE_TEXT: 'website_maker_ai_generate_text',
+    WEBSITE_MAKER_AI_REGENERATE_TEXT: 'website_maker_ai_regenerate_text',
+    WEBSITE_MAKER_AI_SEND_PROMPT: 'website_maker_ai_send_prompt',
+    WEBSITE_MAKER_AI_COPY_RESPONSE: 'website_maker_ai_copy_response',
+    WEBSITE_MAKER_AI_STOP_GENERATION: 'website_maker_ai_stop_generation',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',
@@ -45,6 +50,14 @@ export const UPGRADE_CTA_LOCATIONS = {
     SLUG_CHANGE_MANAGE_PAGE: 'slug_change_manage_page',
     GOOGLE_ADSENSE: 'google_adsense',
 };
+export const GENERATE_AI_TEXT_CTA_LOCATIONS = {
+    BANNER_DESCRIPTION: 'banner_description',
+    BANNER_TITLE: 'banner_title',
+    ABOUT_TITLE: 'about_title',
+    ABOUT_PARAGRAPH: 'about_paragraph',
+    TEXT_ITEM: 'text_item',
+    TESTIMONIAL_ITEM: 'testimonial_item',
+};
 export const TRIGGER_TYPE = {
     AUTOMATIC: 'automatic',
     USER_TRIGGERED: 'user_triggered',
@@ -57,6 +70,10 @@ export const PUBLISH_MODAL_CONTINUATION_EVENTS = {
     COPY_LINK: 'copy_link',
     VIEW_WEBSITE: 'view_website',
 };
+export const GENERATE_TEXT_CONTINUATION_EVENTS = {
+    USE_TEXT: 'use_text',
+    EXIT: 'exit',
+};
 export const PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS = {
     PREMIUM: 'premium',
     EXIT: 'exit',
@@ -212,6 +229,12 @@ const useEventTracker = () => {
                 action,
             });
         },
+        sendGenerateTextContinuationEvent: (cta_location, continuation) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_AI_GENERATE_TEXT, {
+                cta_location,
+                continuation,
+            });
+        },
     };
 };
 export { useEventTracker };

package/lib/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.js

@@ -255,10 +255,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 if (!response) {
                     throw new Error('Failed to set brand page slug');
                 }
-                if (response.websiteUpsellAbTestKey) {
-                    this.abTests.bp_4092_rotating_upsells_at_publish = getValueType(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                    eventTracker.sendExperimentStartedEvent(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                }
                 if (response.status) {
                     await this.setBrandPageStatus(response.status);
                 }
@@ -357,10 +353,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     if (!response) {
                         throw new Error('Failed to set brand page slug');
                     }
-                    if (response.websiteUpsellAbTestKey) {
-                        this.abTests.bp_4092_rotating_upsells_at_publish = getValueType(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                        eventTracker.sendExperimentStartedEvent(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                    }
                     await brandPageClient.getBrandPageIsCustomDomainEnabledAsync(brandPageMakerStore.brandPageType, this.designDraftToken);
                     const updatedIsCustomDomainEnabled = await brandPageClient.updateBrandPageIsCustomDomainEnabledAsync(brandPageMakerStore.brandPageType, this.designDraftToken, true);
                     this.setBrandPageIsCustomDomainEnabled({
@@ -561,10 +553,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 if (!response) {
                     return false;
                 }
-                if (response.websiteUpsellAbTestKey) {
-                    this.abTests.bp_4092_rotating_upsells_at_publish = getValueType(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                    eventTracker.sendExperimentStartedEvent(response.websiteUpsellAbTestKey, response.websiteUpsellAbTestValue);
-                }
                 if (this.brandPageStatus !== response.status) {
                     await this.setBrandPageStatus(response.status);
                 }

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

@@ -0,0 +1 @@
+export declare const getCtaLocationFromFieldType: (fieldType: string, sectionType?: string) => string;

package/lib/src/brand-page-maker/utils/mixpanel.util.js

@@ -0,0 +1,29 @@
+import { GENERATE_AI_TEXT_CTA_LOCATIONS } from '../composables/useEventTracker';
+export const getCtaLocationFromFieldType = (fieldType, sectionType) => {
+    if (fieldType === 'text') {
+        return GENERATE_AI_TEXT_CTA_LOCATIONS.TEXT_ITEM;
+    }
+    if (fieldType === 'testimonials') {
+        return GENERATE_AI_TEXT_CTA_LOCATIONS.TESTIMONIAL_ITEM;
+    }
+    if (sectionType === 'banner-section') {
+        if (fieldType === 'description') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_DESCRIPTION;
+        }
+        if (fieldType === 'title') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.BANNER_TITLE;
+        }
+    }
+    if (sectionType === 'about-section') {
+        if (fieldType === 'title') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_TITLE;
+        }
+        if (fieldType === 'paragraph') {
+            return GENERATE_AI_TEXT_CTA_LOCATIONS.ABOUT_PARAGRAPH;
+        }
+    }
+    // Fallback: try to match directly with field type
+    // This handles cases where fieldType might already be in the correct format
+    const matchingLocation = Object.values(GENERATE_AI_TEXT_CTA_LOCATIONS).find((location) => location === fieldType);
+    return matchingLocation || fieldType;
+};