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

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

@@ -1,7 +1,41 @@
-import axios from 'axios';
+import axios, { type AxiosInstance } from 'axios';
 import type { BrandPageType } from '../brand-page';
 import { BRAND_PAGE_TYPES } from '../brand-page';
 import type { WebsiteSlugCheckResponse } from '../brand-page-maker/models/api.model';
+import { getCurrentLocale } from '../composables/useTranslate';
+
+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;
+}
+
+let AXIOS_INSTANCE: AxiosInstance;
+
+const getAxiosInstance = () => {
+  if (!AXIOS_INSTANCE) {
+    AXIOS_INSTANCE = axios.create({
+      headers: {
+        'Accept-Language': getCurrentLocale(),
+      },
+    });
+  }
+
+  return AXIOS_INSTANCE;
+};
 
 const getApiUrlPrefix = (brandPageType: BrandPageType) => {
   switch (brandPageType) {
@@ -20,12 +54,12 @@ const saveBrandPageAsync = async (
   brandPageType: BrandPageType,
   request: any,
   designDraftToken?: string,
-) => {
+): Promise<SaveBrandPageResponse | null> => {
   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;
@@ -38,12 +72,12 @@ const setBrandPageSlugAsync = async (
   brandPageType: BrandPageType,
   designDraftToken,
   options,
-) => {
+): Promise<PublishBrandPageResponse | null> => {
   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 || [],
@@ -65,7 +99,7 @@ const createDefaultBrandPage = async (
     brandPageType,
   )}/${slug}/default/${logoDraftToken}`;
 
-  const response = await axios.get(url);
+  const response = await getAxiosInstance().get(url);
 
   if (response.status !== 200) {
     return null;
@@ -77,10 +111,10 @@ const createDefaultBrandPage = async (
 const unpublishBrandPageAsync = async (
   brandPageType: BrandPageType,
   designDraftToken,
-) => {
+): Promise<PublishBrandPageResponse | null> => {
   const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/unpublish`;
 
-  const response = await axios.post(url);
+  const response = await getAxiosInstance().post(url);
 
   if (response.status !== 200) {
     return null;
@@ -96,7 +130,7 @@ const updateBrandPageMetaAsync = async (
 ) => {
   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;
@@ -112,7 +146,7 @@ const updateSensitiveContentAsync = async (
 ) => {
   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;
@@ -130,7 +164,7 @@ const triggerBrandPageSavedEvent = async (
     brandPageType,
   )}/${designDraftToken}/events/saved`;
 
-  await axios.post(url, request);
+  await getAxiosInstance().post(url, request);
 };
 
 const getStripeOnboardingUrl = async (
@@ -145,7 +179,7 @@ const getStripeOnboardingUrl = async (
     taxId ? `?taxId=${taxId}` : ''
   }`;
 
-  const response = await axios.post(url, options);
+  const response = await getAxiosInstance().post(url, options);
 
   if (response.status !== 200) {
     return null;
@@ -162,7 +196,7 @@ const getBrandPageCustomDomainStatusAsync = async (
     brandPageType,
   )}/${designDraftToken}/custom-domains/latest`;
 
-  const response = await axios.get(url);
+  const response = await getAxiosInstance().get(url);
 
   return response.data;
 };
@@ -177,7 +211,7 @@ const createBrandPageCustomDomainAsync = async (
     ? `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/purchased-domains`
     : `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/custom-domains`;
 
-  const response = await axios.post(
+  const response = await getAxiosInstance().post(
     url,
     { domainName },
     {
@@ -196,7 +230,8 @@ const checkWebsiteSlugAsync = async (
   const url = `${getApiUrlPrefix(brandPageType)}/${designDraftToken}/slug-check?slug=${encodeURIComponent(slug)}`;
 
   try {
-    const response = await axios.get<WebsiteSlugCheckResponse>(url);
+    const response =
+      await getAxiosInstance().get<WebsiteSlugCheckResponse>(url);
 
     return response.data;
   } catch (error) {
@@ -218,7 +253,7 @@ const deleteBrandPageCustomDomainByCustomDomainIdAsync = async (
     brandPageType,
   )}/${designDraftToken}/custom-domains/${customDomainId}`;
 
-  await axios.delete(url);
+  await getAxiosInstance().delete(url);
 };
 
 const getBrandPageCustomDomainConfigAsync = async (
@@ -228,7 +263,7 @@ const getBrandPageCustomDomainConfigAsync = async (
     brandPageType,
   )}/custom-domains/configs/default`;
 
-  const response = await axios.get(url);
+  const response = await getAxiosInstance().get(url);
 
   return response.data;
 };
@@ -242,7 +277,7 @@ const updateBrandPageIsCustomDomainEnabledAsync = async (
     brandPageType,
   )}/${designDraftToken}/is-custom-domain-enabled`;
 
-  const response = await axios.put(url, { isCustomDomainEnabled });
+  const response = await getAxiosInstance().put(url, { isCustomDomainEnabled });
 
   return response.data;
 };
@@ -255,7 +290,7 @@ const getBrandPageIsCustomDomainEnabledAsync = async (
     brandPageType,
   )}/${designDraftToken}/is-custom-domain-enabled`;
 
-  const response = await axios.get(url);
+  const response = await getAxiosInstance().get(url);
 
   return response.data;
 };
@@ -268,7 +303,7 @@ const getBrandPageCustomDomainAsync = async (
     brandPageType,
   )}/${designDraftToken}/custom-domains/latest`;
 
-  const response = await axios.get(url, {
+  const response = await getAxiosInstance().get(url, {
     validateStatus: (status) => status === 200 || status === 404,
   });
 

package/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.ts

@@ -17,6 +17,7 @@ import {
   useEventTracker,
 } from '../../brand-page-maker/composables/useEventTracker';
 import { publishBrandPageModalWithStateTr } from '../../composables/useTranslate';
+import { BRAND_PAGE_TYPES } from '../../brand-page/models';
 
 export default defineComponent({
   props: {
@@ -40,7 +41,13 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['on-close', 'on-publish', 'on-slug-changed', 'on-publish-options'],
+  emits: [
+    'on-close',
+    'on-publish',
+    'on-slug-changed',
+    'on-publish-options',
+    'upsell-offered',
+  ],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const brandPageContainerStore = useBrandPageContainerStore();
@@ -98,7 +105,11 @@ export default defineComponent({
       isBrandPageSlugEditMode: computed(
         () => brandPageContainerStore.isBrandPageSlugEditMode,
       ),
+      abTests: computed(() => brandPageContainerStore.abTests),
       brandPageType: computed(() => brandPageMakerStore.brandPageType),
+      isSubsequentPublish: computed(
+        () => brandPageContainerStore.isSubsequentPublish,
+      ),
       brandPageMakerStore,
       brandPageContainerStore,
       eventTracker,
@@ -166,6 +177,13 @@ export default defineComponent({
           CUSTOM_DOMAIN_STATUSES.active
       );
     },
+    showUpsellRotation(): boolean {
+      return (
+        this.abTests.bp_4092_rotating_upsells_at_publish &&
+        this.abTests.bp_4092_rotating_upsells_at_publish.isVariation &&
+        this.brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite
+      );
+    },
   },
   watch: {
     customDomain(newCustomDomain) {
@@ -275,11 +293,22 @@ export default defineComponent({
           domain: domain,
           isPurchasedDomain: this.hasPurchasedDomains,
         });
+
+        this.brandPageContainerStore.setIsPublishModalVisible({
+          isVisible: true,
+        });
       } else {
-        await this.publishBrandPage({
+        const response = await this.publishBrandPage({
           shouldPublish: this.shouldPublish,
           slug: slug,
         });
+
+        this.brandPageContainerStore.setIsPublishModalVisible({
+          isVisible: true,
+          websiteUpsellModalViewModel: response?.websiteUpsellModalViewModel
+            ? response.websiteUpsellModalViewModel
+            : undefined,
+        });
       }
 
       this.eventTracker.sendPublishContinuationEvent(

package/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.vue

@@ -26,6 +26,8 @@
     :is-busy="false"
     :is-custom-domain-active="isCustomDomainActive"
     :brand-page-type="brandPageType"
+    :show-upsell-rotation="showUpsellRotation"
+    :is-subsequent-publish="isSubsequentPublish"
     @close-modal="closeModal"
     @on-slug-changed="onSlugChanged"
     @internal-publish-brand-page="onPublish"
@@ -50,6 +52,12 @@
         @on-show-domain-list-modal="onShowDomainListModal"
       />
     </template>
+
+    <template #upsellContainer>
+      <div @on-show-domain-modal="onShowDomainListModal">
+        <slot name="upsell" />
+      </div>
+    </template>
   </PublishBrandPageModal>
 </template>
 <script>