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

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

@@ -1,7 +1,7 @@
 import { shallowRef } from 'vue';
-// 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',
@@ -21,6 +21,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 = {
     MAKER_PREVIEW: 'maker_preview',
@@ -66,12 +68,12 @@ const bridgeState = shallowRef({
     publishOpenEventProps: {},
 });
 const LISTENERS = shallowRef([]);
-const _publishEvent = (eventName, eventProps) => {
+const _publishEvent = (eventName, eventProps, excludeGlobal = false) => {
     LISTENERS.value.forEach((listener) => {
         listener({
             eventName: eventName,
             eventProps: {
-                ...GLOBAL_EVENT_PROPS.value,
+                ...(excludeGlobal ? {} : GLOBAL_EVENT_PROPS.value),
                 ...eventProps,
             },
         });
@@ -79,6 +81,12 @@ const _publishEvent = (eventName, eventProps) => {
 };
 const useEventTracker = () => {
     return {
+        sendExperimentStartedEvent: (abTestKey, abTestValue) => {
+            _publishEvent(EVENTS.EXPERIMENT_STARTED, {
+                'Experiment name': abTestKey,
+                'Variant name': abTestValue,
+            }, true);
+        },
         setGlobalEventProps: (props) => {
             GLOBAL_EVENT_PROPS.value = { ...GLOBAL_EVENT_PROPS.value, ...props };
         },
@@ -118,6 +126,12 @@ const useEventTracker = () => {
                 continuation: null,
             });
         },
+        appendPublishBridgeState: (props) => {
+            bridgeState.value.publishOpenEventProps = {
+                ...bridgeState.value.publishOpenEventProps,
+                ...props,
+            };
+        },
         sendPublishContinuationEvent: (continuation, domain) => {
             _publishEvent(EVENTS.WEBSITE_MAKER_PUBLISH_MODAL, {
                 ...bridgeState.value.publishOpenEventProps,
@@ -182,6 +196,17 @@ const useEventTracker = () => {
                 continuation,
             });
         },
+        sendUpsellOfferEvent: (upsellType) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_UPSELL_OFFER, {
+                upsellType,
+            });
+        },
+        sendUpsellOfferActionEvent: (upsellType, action) => {
+            _publishEvent(EVENTS.WEBSITE_MAKER_UPSELL_ACTION, {
+                upsellType,
+                action,
+            });
+        },
     };
 };
 export { useEventTracker };

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

@@ -44,8 +44,10 @@ export interface BrandPageContainerState {
     isPrePurchase: boolean;
     makerFonts: any[];
     eventButtonLocation?: string;
+    websiteUpsellModalViewModel?: any;
     showPublishOptionModal?: boolean;
     abTests: Record<string, string>;
+    isSubsequentPublish: boolean;
 }
 export type InitialisePayload = Omit<BrandPageContainerState, 'customDomain' | 'customDomainConfig'> & {
     logoDraftToken?: string;
@@ -117,8 +119,10 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
         isPrePurchase: boolean;
         makerFonts: any[];
         eventButtonLocation?: string | undefined;
+        websiteUpsellModalViewModel?: any;
         showPublishOptionModal?: boolean | undefined;
         abTests: Record<string, string>;
+        isSubsequentPublish: boolean;
     } & import("pinia").PiniaCustomStateProperties<BrandPageContainerState>) => boolean;
     isUserDraft: (state: {
         availableTaxes: any[];
@@ -176,8 +180,10 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
         isPrePurchase: boolean;
         makerFonts: any[];
         eventButtonLocation?: string | undefined;
+        websiteUpsellModalViewModel?: any;
         showPublishOptionModal?: boolean | undefined;
         abTests: Record<string, string>;
+        isSubsequentPublish: boolean;
     } & import("pinia").PiniaCustomStateProperties<BrandPageContainerState>) => boolean;
 }, {
     clearTriggerSaveEventApiOnPublishModalClose(): void;
@@ -210,6 +216,7 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
     }): void;
     setCreateCustomDomainErrorMessage(payload: any): void;
     setBrandPageIsCustomDomainEnabled(payload: any): void;
+    setIsSubsequentPublish(payload: any): void;
     clearPublishErrorMessage(): void;
     closePublishModal(payload?: {
         skipShowNextNotificationMessage?: boolean;
@@ -219,7 +226,10 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
     publishBrandPage({ shouldPublish, slug }: {
         shouldPublish: any;
         slug: any;
-    }): Promise<boolean>;
+    }): Promise<false | {
+        success: boolean;
+        websiteUpsellModalViewModel: any;
+    }>;
     publishBrandPageWithCustomDomainAsync({ shouldPublish, slug, domain, isPurchasedDomain, }: {
         shouldPublish: any;
         slug: any;
@@ -236,12 +246,13 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
         eventButtonLocation?: string;
     }): 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): void;
+    showPublishModal(eventButtonLocation?: string, websiteUpsellModalViewModel?: any, isSubsequentPublish?: boolean): void;
     showBrandPageSlugEditModal(): Promise<void>;
     showUpgradeModalAndSaveAsync(): Promise<void>;
     showStripeOnboardingModal(): void;

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

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import brandPageClient from '../../../clients/brand-page-client';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useLocalisedRouteStore, useLogoStore, useUiStore, } from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
-import { BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, getAbTestResults, } from '../../../brand-page';
+import { BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, getAbTestResults, getValueType, } from '../../../brand-page';
 import { isLogoContent } from '../../../brand-page/utils';
 import { useUiEditableLogoStore } from '../../../shared/logo-settings/store';
 import uniq from 'lodash.uniq';
@@ -11,7 +11,6 @@ import { useShopConfigStore } from '../../../shared/ecommerce-settings/store/sho
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '../../composables/useEventTracker';
 import { navigationTr } from '../../../composables/useTranslate';
 import { errorTr, constantsTr } from '../../../composables/useTranslate';
-import { useUiTemplateSettingsStore } from '../../../shared/template-settings/store';
 export const BRANDPAGE_STATUS = Object.freeze({
     Published: 'Published',
     Unpublished: 'Unpublished',
@@ -61,8 +60,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             isPrePurchase: false,
             makerFonts: [],
             eventButtonLocation: undefined,
+            websiteUpsellModalViewModel: undefined,
             showPublishOptionModal: false,
             abTests: {},
+            isSubsequentPublish: false,
         };
     },
     actions: {
@@ -120,6 +121,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             this.makerFonts = payload.makerFonts || [];
             this.showPublishOptionModal = payload.showPublishOptionModal;
             this.abTests = getAbTestResults(payload.abTests || {});
+            this.isSubsequentPublish = payload.isSubsequentPublish;
             const logoStore = useLogoStore();
             logoStore.initialise({
                 logoTemplateAsset: payload.logoTemplateAsset,
@@ -148,6 +150,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         setIsPublishModalVisible(payload) {
             this.isPublishModalVisible = payload.isVisible;
             this.eventButtonLocation = payload.eventButtonLocation;
+            this.websiteUpsellModalViewModel = payload.websiteUpsellModalViewModel;
         },
         setIsPublishUpgradeModal(payload) {
             this.isPublishUpgradeModal = payload;
@@ -208,6 +211,9 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         setBrandPageIsCustomDomainEnabled(payload) {
             this.isCustomDomainEnabled = payload.isCustomDomainEnabled;
         },
+        setIsSubsequentPublish(payload) {
+            this.isSubsequentPublish = payload.isSubsequentPublish;
+        },
         clearPublishErrorMessage() {
             this.setPublishErrorMessage({ errorMessage: undefined });
         },
@@ -249,6 +255,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         },
         async publishBrandPage({ shouldPublish, slug }) {
             const brandPageMakerStore = useBrandPageMakerStore();
+            const eventTracker = useEventTracker();
             if (!this.designDraftToken) {
                 throw new Error('unable to publish brand page when designDraftToken is not set');
             }
@@ -262,6 +269,13 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     shouldPublish,
                     brandPageContentTypes: this.brandPageContentTypes,
                 });
+                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();
                 }
@@ -287,7 +301,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 else {
                     await this.closePublishModal();
                 }
-                return true;
+                return {
+                    success: true,
+                    websiteUpsellModalViewModel: response.websiteUpsellModalViewModel,
+                };
             }
             catch (err) {
                 if (err.response?.data?.showUpgradeModal === true) {
@@ -318,12 +335,12 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 return false;
             }
             finally {
-                this.setIsPublishModalVisible({ isVisible: true });
                 this.setIsPublishing({ isPublishing: false });
             }
         },
         async publishBrandPageWithCustomDomainAsync({ shouldPublish, slug, domain, isPurchasedDomain, }) {
             const brandPageMakerStore = useBrandPageMakerStore();
+            const eventTracker = useEventTracker();
             if (!this.designDraftToken) {
                 throw new Error('unable to publish brand page when designDraftToken is not set');
             }
@@ -355,6 +372,13 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                         shouldPublish,
                         brandPageContentTypes: this.brandPageContentTypes,
                     });
+                    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({
@@ -534,6 +558,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         async saveBrandPage(payload = {}) {
             const userStore = useBrandPageMakerUserStore();
             const brandPageMakerStore = useBrandPageMakerStore();
+            const eventTracker = useEventTracker();
             if (userStore.isAdmin) {
                 throw new Error('save brand page is not allowed in admin mode');
             }
@@ -550,6 +575,10 @@ 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);
                 }
@@ -595,7 +624,11 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                     await this.showSaveSuccessMessage();
                     await brandPageMakerStore.showNextNotificationMessage();
                 }
-                return { saved: true, canPublish: response.canPublish };
+                return {
+                    saved: true,
+                    canPublish: response.canPublish,
+                    websiteUpsellModalViewModel: response.websiteUpsellModalViewModel,
+                };
             }
             catch (err) {
                 if (err.response?.data?.showUpgradeModal === true) {
@@ -640,7 +673,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 return;
             }
             else {
-                await this.showPublishModal(eventButtonLocation);
+                await this.showPublishModal(eventButtonLocation, response.websiteUpsellModalViewModel);
             }
         },
         async saveTemplate() {
@@ -667,10 +700,24 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         async setBrandPageStatus(status) {
             this.brandPageStatus = status;
         },
-        showPublishModal(eventButtonLocation) {
+        showPublishModal(eventButtonLocation, websiteUpsellModalViewModel, isSubsequentPublish) {
             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() {
             await this.startBrandPageSlugEditMode();
@@ -720,7 +767,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
             const brandPageMakerStore = useBrandPageMakerStore();
             try {
                 const response = await brandPageClient.unpublishBrandPageAsync(brandPageMakerStore.brandPageType, this.designDraftToken);
-                await this.setBrandPageStatus(response.status);
+                await this.setBrandPageStatus(response?.status);
             }
             catch (err) {
                 console.error(err);

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

@@ -7,20 +7,26 @@ const getLocalisedSlug = (defaultSlug, locale) => {
         '/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',
         },
     };
     return translations[defaultSlug]?.[locale] || defaultSlug;

package/lib/src/clients/brand-page-client.d.ts

@@ -1,9 +1,26 @@
 import type { WebsiteSlugCheckResponse } from '../brand-page-maker/models/api.model';
+export interface SaveBrandPageResponse {
+    designDraftToken: string;
+    status: string;
+    slug: string;
+    canPublish: boolean;
+    websiteUpsellAbTestKey: string;
+    websiteUpsellAbTestValue: string;
+    websiteUpsellModalViewModel: any;
+}
+export interface PublishBrandPageResponse {
+    designDraftToken: string;
+    status: string;
+    slug: string;
+    websiteUpsellAbTestKey: string;
+    websiteUpsellAbTestValue: string;
+    websiteUpsellModalViewModel: any;
+}
 declare const _default: {
-    saveBrandPageAsync: (brandPageType: "default" | "brandSite" | "brandContact", request: any, designDraftToken?: string | undefined) => Promise<any>;
-    setBrandPageSlugAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any, options: any) => Promise<any>;
+    saveBrandPageAsync: (brandPageType: "default" | "brandSite" | "brandContact", request: any, designDraftToken?: string | undefined) => Promise<SaveBrandPageResponse | null>;
+    setBrandPageSlugAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any, options: any) => Promise<PublishBrandPageResponse | null>;
     createDefaultBrandPage: (brandPageType: "default" | "brandSite" | "brandContact", slug: any, logoDraftToken: any) => Promise<any>;
-    unpublishBrandPageAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any) => Promise<any>;
+    unpublishBrandPageAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any) => Promise<PublishBrandPageResponse | null>;
     updateBrandPageMetaAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any, request: any) => Promise<any>;
     updateSensitiveContentAsync: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any, request: any) => Promise<any>;
     triggerBrandPageSavedEvent: (brandPageType: "default" | "brandSite" | "brandContact", designDraftToken: any, request: any) => Promise<void>;

package/lib/src/clients/brand-page-client.js

@@ -1,5 +1,17 @@
-import axios from 'axios';
+import axios, {} from 'axios';
 import { BRAND_PAGE_TYPES } from '../brand-page';
+import { getCurrentLocale } from '../composables/useTranslate';
+let AXIOS_INSTANCE;
+const getAxiosInstance = () => {
+    if (!AXIOS_INSTANCE) {
+        AXIOS_INSTANCE = axios.create({
+            headers: {
+                'Accept-Language': getCurrentLocale(),
+            },
+        });
+    }
+    return AXIOS_INSTANCE;
+};
 const getApiUrlPrefix = (brandPageType) => {
     switch (brandPageType) {
         case BRAND_PAGE_TYPES.default:
@@ -14,7 +26,7 @@ const getApiUrlPrefix = (brandPageType) => {
 };
 const saveBrandPageAsync = async (brandPageType, request, designDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}${designDraftToken ? `/${designDraftToken}` : ''}`;
-    const response = await axios.post(url, request);
+    const response = await getAxiosInstance().post(url, request);
     if (response.status === 200) {
         return response.data;
     }
@@ -23,7 +35,7 @@ const saveBrandPageAsync = async (brandPageType, request, designDraftToken) => {
 const setBrandPageSlugAsync = async (brandPageType, designDraftToken, options) => {
     const { slug, shouldPublish, brandPageContentTypes } = options;
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/publish`;
-    const response = await axios.post(url, {
+    const response = await getAxiosInstance().post(url, {
         slug,
         shouldPublish,
         brandPageContentTypes: brandPageContentTypes || [],
@@ -35,7 +47,7 @@ const setBrandPageSlugAsync = async (brandPageType, designDraftToken, options) =
 };
 const createDefaultBrandPage = async (brandPageType, slug, logoDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${slug}/default/${logoDraftToken}`;
-    const response = await axios.get(url);
+    const response = await getAxiosInstance().get(url);
     if (response.status !== 200) {
         return null;
     }
@@ -43,7 +55,7 @@ const createDefaultBrandPage = async (brandPageType, slug, logoDraftToken) => {
 };
 const unpublishBrandPageAsync = async (brandPageType, designDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/unpublish`;
-    const response = await axios.post(url);
+    const response = await getAxiosInstance().post(url);
     if (response.status !== 200) {
         return null;
     }
@@ -51,7 +63,7 @@ const unpublishBrandPageAsync = async (brandPageType, designDraftToken) => {
 };
 const updateBrandPageMetaAsync = async (brandPageType, designDraftToken, request) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/meta`;
-    const response = await axios.put(url, request);
+    const response = await getAxiosInstance().put(url, request);
     if (response.status !== 200) {
         return null;
     }
@@ -59,7 +71,7 @@ const updateBrandPageMetaAsync = async (brandPageType, designDraftToken, request
 };
 const updateSensitiveContentAsync = async (brandPageType, designDraftToken, request) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/updateSensitiveContent`;
-    const response = await axios.put(url, request);
+    const response = await getAxiosInstance().put(url, request);
     if (response.status !== 200) {
         return null;
     }
@@ -67,11 +79,11 @@ const updateSensitiveContentAsync = async (brandPageType, designDraftToken, requ
 };
 const triggerBrandPageSavedEvent = async (brandPageType, designDraftToken, request) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/events/saved`;
-    await axios.post(url, request);
+    await getAxiosInstance().post(url, request);
 };
 const getStripeOnboardingUrl = async (brandPageType, designDraftToken, taxId, options = {}) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/payment-providers/stripe/onboarding${taxId ? `?taxId=${taxId}` : ''}`;
-    const response = await axios.post(url, options);
+    const response = await getAxiosInstance().post(url, options);
     if (response.status !== 200) {
         return null;
     }
@@ -79,14 +91,14 @@ const getStripeOnboardingUrl = async (brandPageType, designDraftToken, taxId, op
 };
 const getBrandPageCustomDomainStatusAsync = async (brandPageType, designDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/custom-domains/latest`;
-    const response = await axios.get(url);
+    const response = await getAxiosInstance().get(url);
     return response.data;
 };
 const createBrandPageCustomDomainAsync = async (brandPageType, designDraftToken, domainName, isPurchasedDomain) => {
     const url = isPurchasedDomain
         ? `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/purchased-domains`
         : `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/custom-domains`;
-    const response = await axios.post(url, { domainName }, {
+    const response = await getAxiosInstance().post(url, { domainName }, {
         validateStatus: () => true,
     });
     return response;
@@ -94,7 +106,7 @@ const createBrandPageCustomDomainAsync = async (brandPageType, designDraftToken,
 const checkWebsiteSlugAsync = async (brandPageType, designDraftToken, slug) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/slug-check?slug=${encodeURIComponent(slug)}`;
     try {
-        const response = await axios.get(url);
+        const response = await getAxiosInstance().get(url);
         return response.data;
     }
     catch (error) {
@@ -107,26 +119,26 @@ const checkWebsiteSlugAsync = async (brandPageType, designDraftToken, slug) => {
 };
 const deleteBrandPageCustomDomainByCustomDomainIdAsync = async (brandPageType, designDraftToken, customDomainId) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/custom-domains/${customDomainId}`;
-    await axios.delete(url);
+    await getAxiosInstance().delete(url);
 };
 const getBrandPageCustomDomainConfigAsync = async (brandPageType) => {
     const url = `${getApiUrlPrefix(brandPageType)}/custom-domains/configs/default`;
-    const response = await axios.get(url);
+    const response = await getAxiosInstance().get(url);
     return response.data;
 };
 const updateBrandPageIsCustomDomainEnabledAsync = async (brandPageType, designDraftToken, isCustomDomainEnabled) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/is-custom-domain-enabled`;
-    const response = await axios.put(url, { isCustomDomainEnabled });
+    const response = await getAxiosInstance().put(url, { isCustomDomainEnabled });
     return response.data;
 };
 const getBrandPageIsCustomDomainEnabledAsync = async (brandPageType, designDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/is-custom-domain-enabled`;
-    const response = await axios.get(url);
+    const response = await getAxiosInstance().get(url);
     return response.data;
 };
 const getBrandPageCustomDomainAsync = async (brandPageType, designDraftToken) => {
     const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/custom-domains/latest`;
-    const response = await axios.get(url, {
+    const response = await getAxiosInstance().get(url, {
         validateStatus: (status) => status === 200 || status === 404,
     });
     return response.status === 200 ? response.data : null;

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -2437,6 +2437,9 @@ a.maker-anchor {
 .tw-p-4 {
     padding: 1rem
 }
+.tw-p-5 {
+    padding: 1.25rem
+}
 .tw-p-6 {
     padding: 1.5rem
 }
@@ -4201,31 +4204,31 @@ a.maker-anchor {
 }
 
 /* Ensure modal height is not longer than screen */
-.modal[data-v-e5bec848] {
+.modal[data-v-2696e479] {
   max-height: 100vh;
 }
-.modal.modal-bg[data-v-e5bec848] {
+.modal.modal-bg[data-v-2696e479] {
   background-image: url(https://bcassetcdn.com/scl-assets/images/modal-background.svg);
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-.modal .hide-scroll[data-v-e5bec848]::-webkit-scrollbar {
+.modal .hide-scroll[data-v-2696e479]::-webkit-scrollbar {
   display: none;
 }
-.modal .hide-scroll[data-v-e5bec848] {
+.modal .hide-scroll[data-v-2696e479] {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
-.modal .header-min-height[data-v-e5bec848] {
+.modal .header-min-height[data-v-2696e479] {
   min-height: 32px; /* For close button */
 }
-.modal.modal-image .modal-content img[data-v-e5bec848] {
+.modal.modal-image .modal-content img[data-v-2696e479] {
   max-width: 100%;
   max-height: 90vh;
 }
 
 /* Swiper keyboard event will not work if wrapper content height is larger than the screen height */
-.modal[data-v-e5bec848] .swiper-wrapper {
+.modal[data-v-2696e479] .swiper-wrapper {
   max-height: 90vh;
 }
 
@@ -4271,26 +4274,26 @@ a.maker-anchor {
 }
 
 @media (max-width: 640px) {
-.desktop-cta[data-v-704aaea4] {
+.desktop-cta[data-v-ddc11969] {
     display: none;
     width: 100%;
 }
 }
 @media (min-width: 640px) {
-.mobile-cta[data-v-704aaea4] {
+.mobile-cta[data-v-ddc11969] {
     display: none;
     width: 100%;
 }
 }
 
 @media (max-width: 640px) {
-[data-v-54be42f0] .publish-bp--modal {
+[data-v-1d823e14] .publish-bp--modal {
     max-height: 90vh;
     width: 90vw;
 }
 }
 @media (min-width: 640px) {
-[data-v-54be42f0] .publish-bp--modal {
+[data-v-1d823e14] .publish-bp--modal {
     max-height: 80vh;
     width: 90vw;
 }