@designcrowd/library.brand-page 5.14.1 → 5.14.2-ml3

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -650,8 +650,10 @@ declare const _default: import("vue").DefineComponent<{}, {
             isPrePurchase: boolean;
             makerFonts: any[];
             eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
         isUserDraft: (state: {
             availableTaxes: any[];
@@ -709,8 +711,10 @@ declare const _default: import("vue").DefineComponent<{}, {
             isPrePurchase: boolean;
             makerFonts: any[];
             eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
             showPublishOptionModal?: boolean | undefined;
             abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
         } & import("pinia").PiniaCustomStateProperties<import("../../../brand-page-maker/stores").BrandPageContainerState>) => boolean;
     }, {
         clearTriggerSaveEventApiOnPublishModalClose(): void;
@@ -743,6 +747,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setCreateCustomDomainErrorMessage(payload: any): void;
         setBrandPageIsCustomDomainEnabled(payload: any): void;
+        setIsSubsequentPublish(payload: any): void;
         clearPublishErrorMessage(): void;
         closePublishModal(payload?: {
             skipShowNextNotificationMessage?: boolean | undefined;
@@ -752,7 +757,10 @@ declare const _default: import("vue").DefineComponent<{}, {
         publishBrandPage({ shouldPublish, slug }: {
             shouldPublish: any;
             slug: any;
-        }): Promise<boolean>;
+        }): Promise<false | {
+            success: boolean;
+            websiteUpsellModalViewModel: any;
+        }>;
         publishBrandPageWithCustomDomainAsync({ shouldPublish, slug, domain, isPurchasedDomain, }: {
             shouldPublish: any;
             slug: any;
@@ -769,12 +777,13 @@ declare const _default: import("vue").DefineComponent<{}, {
             eventButtonLocation?: string | undefined;
         }): Promise<false | {
             saved: boolean;
-            canPublish: any;
+            canPublish: boolean;
+            websiteUpsellModalViewModel: any;
         }>;
         saveAndPublishBrandPage(eventButtonLocation: string): Promise<void>;
         saveTemplate(): Promise<void>;
         setBrandPageStatus(status: any): Promise<void>;
-        showPublishModal(eventButtonLocation?: string | undefined): void;
+        showPublishModal(eventButtonLocation?: string | undefined, websiteUpsellModalViewModel?: any, isSubsequentPublish?: boolean | undefined): void;
         showBrandPageSlugEditModal(): Promise<void>;
         showUpgradeModalAndSaveAsync(): Promise<void>;
         showStripeOnboardingModal(): void;
@@ -840,6 +849,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setRecommendedLogoColors(payload: import("../../background-settings/background-settings-models").SetRecommendedLogoColorsPayload): void;
     }>;
     eventTracker: {
+        sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
         setGlobalEventProps: (props: Omit<import("../../../brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
         setUpsellBridgeState: (props: import("../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
         subscribe: (callbackFn: (event: import("../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
@@ -848,6 +858,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendUpsellOpenEvent: () => void;
         sendUpsellContinuationEvent: (continuation: string) => void;
         sendPublishOpenEvent: () => void;
+        appendPublishBridgeState: (props: any) => void;
         sendPublishContinuationEvent: (continuation: string, domain: string | null) => void;
         sendWebsiteManageAddPageEvent: (pageName: string) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string) => void;
@@ -860,6 +871,8 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendTemplateCategorySelectEvent: (category: string) => void;
         sendSidebarCategoryClickedEvent: (tabName: string) => void;
         sendAddContentContinuationEvent: (continuation: string) => void;
+        sendUpsellOfferEvent: (upsellType: string) => void;
+        sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
     };
 }, {
     styleThemeKeys: Readonly<{

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -556,6 +556,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
+        sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
         setGlobalEventProps: (props: Omit<import("../../../brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
         setUpsellBridgeState: (props: import("../../../brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
         subscribe: (callbackFn: (event: import("../../../brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
@@ -564,6 +565,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendUpsellOpenEvent: () => void;
         sendUpsellContinuationEvent: (continuation: string) => void;
         sendPublishOpenEvent: () => void;
+        appendPublishBridgeState: (props: any) => void;
         sendPublishContinuationEvent: (continuation: string, domain: string | null) => void;
         sendWebsiteManageAddPageEvent: (pageName: string) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string) => void;
@@ -576,6 +578,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendTemplateCategorySelectEvent: (category: string) => void;
         sendSidebarCategoryClickedEvent: (tabName: string) => void;
         sendAddContentContinuationEvent: (continuation: string) => void;
+        sendUpsellOfferEvent: (upsellType: string) => void;
+        sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
     };
 }, {
     tabs: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.14.1",
+  "version": "5.14.2-ml3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.3.0",
+    "@designcrowd/fe-shared-lib": "1.3.2",
     "@pinia/nuxt": "0.11.0",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

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

@@ -48,10 +48,13 @@ export interface AbTestResult {
 
 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',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
+  bp_4092_rotating_upsells_at_publish?: AbTestResult;
 }
 export const MEDIA_SIZES = {
   size1x: 'size1x',
@@ -93,7 +96,10 @@ export interface BrandPageContext {
   disableLogoRenderOnServerside?: boolean;
 }
 
-const getValueType = (key: string, abtestValue?: string): AbTestResult => {
+export const getValueType = (
+  key: string,
+  abtestValue?: string,
+): AbTestResult => {
   return {
     key: key,
     value: abtestValue || '',

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -265,6 +265,7 @@ const InitialiseMakerStores = (options: {
     triggerSaveSuccessMessage: false,
     triggerSaveEventApiOnPublishModalClose: false,
     abTests: {},
+    isSubsequentPublish: false,
   });
 
   userStore.setIsAdmin({ isAdmin: options.isAdmin || false });

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

@@ -25,9 +25,9 @@ export interface BpEventTrackerEvent {
   eventProps: any;
 }
 
-// Event names should driven with prefix `bpmaker_` to distinguish the event from other events around the site
+// Event names should driven with prefix `website_maker_` to distinguish the event from other events around the site
 export const EVENTS = {
-  TEST: 'bpmaker_test',
+  EXPERIMENT_STARTED: '$experiment_started',
   WEBSITE_MAKER_ADD_CONTENT: 'website_maker_add_content',
   WEBSITE_MAKER_REMOVE_CONTENT: 'website_maker_remove_content',
   WEBSITE_MAKER_SELECT_CONTENT: 'website_maker_select_content',
@@ -49,6 +49,8 @@ export const EVENTS = {
   WEBSITE_MAKER_HYPERLINK_CLICK: 'website_maker_hyperlink_click',
   WEBSITE_MAKER_HYPERLINK_EDIT: 'website_maker_hyperlink_edit',
   WEBSITE_MAKER_CALENDLY_LINK_CLICKED: 'website_maker_calendly_link_clicked',
+  WEBSITE_MAKER_UPSELL_OFFER: 'website_maker_upsell_offer',
+  WEBSITE_MAKER_UPSELL_ACTION: 'website_maker_upsell_action',
 };
 
 export const SELECT_LOCATIONS = {
@@ -103,12 +105,16 @@ const bridgeState = shallowRef({
 
 const LISTENERS = shallowRef<((event: BpEventTrackerEvent) => void)[]>([]);
 
-const _publishEvent = (eventName: string, eventProps: any) => {
+const _publishEvent = (
+  eventName: string,
+  eventProps: any,
+  excludeGlobal = false,
+) => {
   LISTENERS.value.forEach((listener) => {
     listener({
       eventName: eventName,
       eventProps: {
-        ...GLOBAL_EVENT_PROPS.value,
+        ...(excludeGlobal ? {} : GLOBAL_EVENT_PROPS.value),
         ...eventProps,
       },
     });
@@ -117,6 +123,16 @@ const _publishEvent = (eventName: string, eventProps: any) => {
 
 const useEventTracker = () => {
   return {
+    sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => {
+      _publishEvent(
+        EVENTS.EXPERIMENT_STARTED,
+        {
+          'Experiment name': abTestKey,
+          'Variant name': abTestValue,
+        },
+        true,
+      );
+    },
     setGlobalEventProps: (
       props: Omit<BpGlobalEventProps, 'template_category'>,
     ) => {
@@ -158,6 +174,12 @@ const useEventTracker = () => {
         continuation: null,
       });
     },
+    appendPublishBridgeState: (props) => {
+      bridgeState.value.publishOpenEventProps = {
+        ...bridgeState.value.publishOpenEventProps,
+        ...props,
+      };
+    },
     sendPublishContinuationEvent: (
       continuation: string,
       domain: string | null,
@@ -228,6 +250,17 @@ const useEventTracker = () => {
         continuation,
       });
     },
+    sendUpsellOfferEvent: (upsellType: string) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_UPSELL_OFFER, {
+        upsellType,
+      });
+    },
+    sendUpsellOfferActionEvent: (upsellType: string, action: string) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_UPSELL_ACTION, {
+        upsellType,
+        action,
+      });
+    },
   };
 };
 

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

@@ -15,6 +15,7 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
+  getValueType,
   type LogoContent,
 } from '../../../brand-page';
 import { isLogoContent } from '../../../brand-page/utils';
@@ -30,7 +31,6 @@ import {
 import { navigationTr } from '../../../composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '../../../brand-page-maker/models/api.model';
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 
 export interface BrandPageContainerState {
   availableTaxes: any[];
@@ -75,8 +75,10 @@ export interface BrandPageContainerState {
   isPrePurchase: boolean;
   makerFonts: any[];
   eventButtonLocation?: string;
+  websiteUpsellModalViewModel?: any;
   showPublishOptionModal?: boolean; // select an option modal on publish
   abTests: Record<string, string>;
+  isSubsequentPublish: boolean;
 }
 
 export type InitialisePayload = Omit<
@@ -140,8 +142,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPrePurchase: false,
       makerFonts: [],
       eventButtonLocation: undefined,
+      websiteUpsellModalViewModel: undefined,
       showPublishOptionModal: false,
       abTests: {},
+      isSubsequentPublish: false,
     };
   },
   actions: {
@@ -209,8 +213,8 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.isPrePurchase = payload.isPrePurchase;
       this.makerFonts = payload.makerFonts || [];
       this.showPublishOptionModal = payload.showPublishOptionModal;
-
       this.abTests = getAbTestResults(payload.abTests || {});
+      this.isSubsequentPublish = payload.isSubsequentPublish;
 
       const logoStore = useLogoStore();
 
@@ -249,6 +253,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     setIsPublishModalVisible(payload) {
       this.isPublishModalVisible = payload.isVisible;
       this.eventButtonLocation = payload.eventButtonLocation;
+      this.websiteUpsellModalViewModel = payload.websiteUpsellModalViewModel;
     },
 
     setIsPublishUpgradeModal(payload) {
@@ -334,6 +339,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.isCustomDomainEnabled = payload.isCustomDomainEnabled;
     },
 
+    setIsSubsequentPublish(payload) {
+      this.isSubsequentPublish = payload.isSubsequentPublish;
+    },
+
     clearPublishErrorMessage() {
       this.setPublishErrorMessage({ errorMessage: undefined });
     },
@@ -397,6 +406,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
     async publishBrandPage({ shouldPublish, slug }) {
       const brandPageMakerStore = useBrandPageMakerStore();
+      const eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -421,6 +431,22 @@ 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 (shouldPublish) {
           this.clearTriggerSaveEventApiOnPublishModalClose();
         }
@@ -449,7 +475,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           await this.closePublishModal();
         }
 
-        return true;
+        return {
+          success: true,
+          websiteUpsellModalViewModel: response.websiteUpsellModalViewModel,
+        };
       } catch (err: any) {
         if (err.response?.data?.showUpgradeModal === true) {
           const eventTracker = useEventTracker();
@@ -486,7 +515,6 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
         return false;
       } finally {
-        this.setIsPublishModalVisible({ isVisible: true });
         this.setIsPublishing({ isPublishing: false });
       }
     },
@@ -498,6 +526,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
+      const eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -555,6 +584,22 @@ 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,
@@ -808,6 +853,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
+      const eventTracker = useEventTracker();
 
       if (userStore.isAdmin) {
         throw new Error('save brand page is not allowed in admin mode');
@@ -836,6 +882,18 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           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);
         }
@@ -907,7 +965,11 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           await brandPageMakerStore.showNextNotificationMessage();
         }
 
-        return { saved: true, canPublish: response.canPublish };
+        return {
+          saved: true,
+          canPublish: response.canPublish,
+          websiteUpsellModalViewModel: response.websiteUpsellModalViewModel,
+        };
       } catch (err: any) {
         if (err.response?.data?.showUpgradeModal === true) {
           const eventTracker = useEventTracker();
@@ -964,7 +1026,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
         return;
       } else {
-        await this.showPublishModal(eventButtonLocation);
+        await this.showPublishModal(
+          eventButtonLocation,
+          response.websiteUpsellModalViewModel,
+        );
       }
     },
 
@@ -1002,12 +1067,34 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       this.brandPageStatus = status;
     },
 
-    showPublishModal(eventButtonLocation?: string) {
+    showPublishModal(
+      eventButtonLocation?: string,
+      websiteUpsellModalViewModel?: any,
+      isSubsequentPublish?: boolean,
+    ) {
       const eventTracker = useEventTracker();
 
+      const subsequentPublishValue =
+        isSubsequentPublish !== undefined
+          ? isSubsequentPublish
+          : (this.brandPageSlug && this.brandPageSlug.trim() !== '') ||
+            this.isPublished;
+
+      this.setIsSubsequentPublish({
+        isSubsequentPublish: subsequentPublishValue,
+      });
+
+      eventTracker.appendPublishBridgeState({
+        isSubsequentPublish: this.isSubsequentPublish,
+      });
+
       eventTracker.sendPublishOpenEvent();
 
-      this.setIsPublishModalVisible({ isVisible: true, eventButtonLocation });
+      this.setIsPublishModalVisible({
+        isVisible: true,
+        eventButtonLocation,
+        websiteUpsellModalViewModel,
+      });
     },
 
     async showBrandPageSlugEditModal() {
@@ -1076,7 +1163,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           this.designDraftToken,
         );
 
-        await this.setBrandPageStatus(response.status);
+        await this.setBrandPageStatus(response?.status);
       } catch (err) {
         console.error(err);
       }

package/src/brand-page-maker/stores/route/localised-route-store.ts

@@ -8,20 +8,26 @@ const getLocalisedSlug = (defaultSlug: string, locale: string): string => {
     '/website-builder': {
       'de-DE': '/website-erstellen',
       'fr-FR': '/createur-site-web',
+      'fr-CA': '/createur-site-web',
       'es-ES': '/creador-paginas-web',
       'pt-PT': '/criador-site',
+      'pt-BR': '/criador-site',
     },
     '/digital-business-card': {
       'de-DE': '/digitale-visitenkarte',
       'fr-FR': '/carte-de-visite-numerique',
+      'fr-CA': '/carte-de-visite-numerique',
       'es-ES': '/tarjeta-de-visita-digital',
       'pt-PT': '/cartao-de-visita-digital',
+      'pt-BR': '/cartao-de-visita-digital',
     },
     '/link-in-bio': {
       'de-DE': '/link-in-bio',
       'fr-FR': '/lien-en-bio',
+      'fr-CA': '/lien-en-bio',
       'es-ES': '/link-en-bio',
       'pt-PT': '/link-na-bio',
+      'pt-BR': '/link-na-bio',
     },
   };