@designcrowd/fe-shared-lib 1.2.14 → 1.2.15-ast-upsell-2

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js

@@ -1,226 +1,270 @@
-import Card from './PublishBrandPageCard.vue';
-import PublishBrandPageModal from './PublishBrandPageModal.vue';
-import { domains } from './__fixtures__/data';
-import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
-
-export default {
-  title: 'Components/PublishBrandPageModal',
-  component: PublishBrandPageModal,
-};
-
-const locale = 'en-US';
-
-const loadTranslationAsync = async () => {
-  await setSharedLibLocaleAsync(locale);
-};
-
-export const NotPublishedWithPurchasedDomains = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-        show: false,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        :is-published="false"
-        :is-search-domain-list-modal-visible="false"
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site" 
-        radio-value="slug"
-        :show-radio-buttons="domains.length > 0"
-      />
-    `,
-  };
-};
-
-NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
-
-export const PublishWithSelectedDomain = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-        domainType: 'purchased',
-        customDomain: {
-          domainName: 'doggers.info',
-          created: '2024-07-26T01:44:22.257',
-          updated: null,
-          isAutoRenewEnabled: true,
-          isRegistrationComplete: false,
-          status: 'Active',
-        },
-      };
-    },
-    methods: {
-      onRadioButtonChanged(val) {
-        this.domainType = val;
-      },
-    },
-    template: `
-      <PublishBrandPageModal
-        visible
-        :is-published="false"
-        should-publish
-        :domains="domains"
-        :custom-domain="customDomain"
-        brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site"
-        radio-value="purchased"
-        :show-radio-buttons="domains.length > 0"
-        @radio-button-changed="onRadioButtonChanged"
-      />
-    `,
-  };
-};
-
-PublishWithSelectedDomain.loaders = [loadTranslationAsync];
-
-export const SetSlug = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-brand-page-slug-edit-mode
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site"
-        brand-page-slug='test-slug' 
-        :show-radio-buttons="domains.length > 0"
-      />
-    `,
-  };
-};
-
-SetSlug.loaders = [loadTranslationAsync];
-
-export const Published = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains,
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/brandname"
-      />
-    `,
-  };
-};
-
-Published.loaders = [loadTranslationAsync];
-
-export const PublishedNoDomains = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-    },
-    data() {
-      return {
-        domains: [],
-      };
-    },
-    methods: {},
-    template: `
-      <PublishBrandPageModal
-        visible
-        is-design-com
-        is-published
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-slug='test-slug' 
-        brand-page-base-url="https://brand.site" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/test-slug"
-      />
-  `,
-  };
-};
-
-PublishedNoDomains.loaders = [loadTranslationAsync];
-
-export const Free = () => {
-  return {
-    components: {
-      PublishBrandPageModal,
-      Card,
-    },
-    data() {
-      return {
-        domains: [],
-        isSearchDomainListModalVisible: false,
-        isDesignCom: false,
-      };
-    },
-    methods: {
-      onHideDomainListModal() {
-        this.isSearchDomainListModalVisible = false;
-      },
-      onShowDomainListModal() {
-        this.isSearchDomainListModalVisible = true;
-      },
-    },
-    template: `
-      <PublishBrandPageModal
-        visible
-        should-publish
-        :domains="domains"
-        brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site" 
-        radio-value="slug"
-        brand-page-url="https://brand.site/brandname"
-        :show-radio-buttons="domains.length > 0"
-        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
-        @on-hide-domain-modal="onHideDomainListModal"
-      >
-        <template #recommended>
-            <Card
-              :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
-              title="Custom Domain"
-              description="Make it easy for customers to find you with a domain that matches your business"
-              :is-design-com="isDesignCom"
-              :has-search-button="true"
-              :show-label="true"
-            />
-        </template>
-      </PublishBrandPageModal>
-    `,
-  };
-};
-
-Free.loaders = [loadTranslationAsync];
+import Card from './PublishBrandPageCard.vue';
+import PublishBrandPageModal from './PublishBrandPageModal.vue';
+import UpgradeWebsite from '../../../atoms/components/Upsell/UpgradeWebsite.vue';
+import Website from '../../../atoms/components/Upsell/Website.vue';
+import DigitalBusinessCard from '../../../atoms/components/Upsell/DigitalBusinessCard.vue';
+import LinkInBio from '../../../atoms/components/Upsell/LinkInBio.vue';
+import { domains } from './__fixtures__/data';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
+
+export default {
+  title: 'Components/PublishBrandPageModal',
+  component: PublishBrandPageModal,
+};
+
+const locale = 'en-US';
+
+const loadTranslationAsync = async () => {
+  await setSharedLibLocaleAsync(locale);
+};
+
+export const NotPublishedWithPurchasedDomains = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+        show: false,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        :is-search-domain-list-modal-visible="false"
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site" 
+        radio-value="slug"
+        :show-radio-buttons="domains.length > 0"
+      />
+    `,
+  };
+};
+
+NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
+
+export const PublishWithSelectedDomain = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+        domainType: 'purchased',
+        customDomain: {
+          domainName: 'doggers.info',
+          created: '2024-07-26T01:44:22.257',
+          updated: null,
+          isAutoRenewEnabled: true,
+          isRegistrationComplete: false,
+          status: 'Active',
+        },
+      };
+    },
+    methods: {
+      onRadioButtonChanged(val) {
+        this.domainType = val;
+      },
+    },
+    template: `
+      <PublishBrandPageModal
+        visible
+        :is-published="false"
+        should-publish
+        :domains="domains"
+        :custom-domain="customDomain"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site"
+        radio-value="purchased"
+        :show-radio-buttons="domains.length > 0"
+        @radio-button-changed="onRadioButtonChanged"
+      />
+    `,
+  };
+};
+
+PublishWithSelectedDomain.loaders = [loadTranslationAsync];
+
+export const SetSlug = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-brand-page-slug-edit-mode
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website'
+        brand-page-base-url="https://brand.site"
+        brand-page-slug='test-slug' 
+        :show-radio-buttons="domains.length > 0"
+      />
+    `,
+  };
+};
+
+SetSlug.loaders = [loadTranslationAsync];
+
+export const Published = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains,
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+      />
+    `,
+  };
+};
+
+Published.loaders = [loadTranslationAsync];
+
+export const PublishedNoDomains = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+    },
+    data() {
+      return {
+        domains: [],
+      };
+    },
+    methods: {},
+    template: `
+      <PublishBrandPageModal
+        visible
+        is-design-com
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-slug='test-slug' 
+        brand-page-base-url="https://brand.site" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/test-slug"
+      />
+  `,
+  };
+};
+
+PublishedNoDomains.loaders = [loadTranslationAsync];
+
+export const Free = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+      Card,
+    },
+    data() {
+      return {
+        domains: [],
+        isSearchDomainListModalVisible: false,
+        isDesignCom: false,
+      };
+    },
+    methods: {
+      onHideDomainListModal() {
+        this.isSearchDomainListModalVisible = false;
+      },
+      onShowDomainListModal() {
+        this.isSearchDomainListModalVisible = true;
+      },
+    },
+    template: `
+      <PublishBrandPageModal
+        visible
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-base-url="https://brand.site" 
+        radio-value="slug"
+        brand-page-url="https://brand.site/brandname"
+        :show-radio-buttons="domains.length > 0"
+        :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        @on-hide-domain-modal="onHideDomainListModal"
+      >
+        <template #recommended>
+            <Card
+              :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
+              title="Custom Domain"
+              description="Make it easy for customers to find you with a domain that matches your business"
+              :is-design-com="isDesignCom"
+              :has-search-button="true"
+              :show-label="true"
+            />
+        </template>
+      </PublishBrandPageModal>
+    `,
+  };
+};
+
+Free.loaders = [loadTranslationAsync];
+
+export const PublishedNoDomainsABtestUpgrade = () => {
+  return {
+    components: {
+      PublishBrandPageModal,
+      UpgradeWebsite
+    },
+    data() {
+      return {
+        domains: [],
+        upgradeProps: {
+          title: 'Upgrade to premium website',
+          subtitle: 'Unlock all advanced features for more flexibility',
+          imageUrl: 'https://bcassetcdn.com/assets/images/modal/onboarding-upsell-website@2x.en-us.png',
+        },
+      };
+    },
+    template: `
+      <PublishBrandPageModal
+        visible
+        :is-design-com="false"
+        is-published
+        should-publish
+        :domains="domains"
+        brand-page-display-name='Website' 
+        brand-page-slug='test-slug' 
+        brand-page-base-url="https://brand.site" 
+        radio-value="slug"
+        show-upsell-rotation
+        brand-page-url="https://brand.site/test-slug">
+        <template #upsellContainer>
+          <UpgradeWebsite
+            :upsell-props="upgradeProps"
+          />
+      </PublishBrandPageModal>
+  `,
+  };
+};
+
+PublishedNoDomainsABtestUpgrade.loaders = [loadTranslationAsync];

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -1,26 +1,38 @@
 <template>
   <div class="publish-bp--container">
     <Modal
-      classes="publish-bp--modal tw-px-2 md:tw-px-8"
+      classes="publish-bp--modal tw-pt-4"
       close-on-esc
       :visible="visible"
       :hide-scrollbar="false"
       :show-modal-background-image="showModalBackgroundImage"
       :content-classes="isBusy ? ['tw-overflow-y-hidden'] : []"
+      :remove-horizontal-padding="showUpsellRotation && !isCustomDomainActive && !hasPurchasedDomains"
+      :class="{
+        'tw-px-2 md:tw-px-8': !showUpsellRotation && isCustomDomainActive && hasPurchasedDomains,
+      }"
       @close-modal="onCloseModal"
     >
       <template #header>
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
           <span>{{ firstTimePublishHeaderLabel }}</span>
         </div>
-        <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
+        <div
+          v-if="isPublished && !isSlugEditMode"
+          class="tw-text-center tw-font-bold tw-mt-8"
+          :class="{
+            'tw-mb-8 ': !showUpsellRotation,
+          }"
+        >
           <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">{{ sitePublishedLabel }}</p>
-          <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            {{ publishSuccessLabel }}
-          </p>
-          <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ publishedSuccessDescriptionLabel }}
-          </p>
+          <div v-if="!showUpsellRotation">
+            <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
+              {{ publishSuccessLabel }}
+            </p>
+            <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
+              {{ publishedSuccessDescriptionLabel }}
+            </p>
+          </div>
         </div>
       </template>
       <template #default>
@@ -188,24 +200,26 @@
         </div>
         <div v-else class="tw-font-sans">
           <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
-            <div class="tw-mb-6">
-              <SellDomainNameSearchWithResults
-                :is-design-com="isDesignCom"
-                :initial-search-term="searchText"
-                :currency="userCurrency"
-                :display-result-limit="4"
-                :domain-search-location="sitePublishedModal"
-                @on-change-search="onSearchTextChanged"
-                @on-buy-now-click="onBuyNowClick"
+            <div v-if="!showUpsellRotation">
+              <div class="tw-mb-6">
+                <SellDomainNameSearchWithResults
+                  :is-design-com="isDesignCom"
+                  :initial-search-term="searchText"
+                  :currency="userCurrency"
+                  :display-result-limit="4"
+                  :domain-search-location="sitePublishedModal"
+                  @on-change-search="onSearchTextChanged"
+                  @on-buy-now-click="onBuyNowClick"
+                />
+              </div>
+              <Button
+                :label="viewMoreDomainLabel"
+                variant="no-border"
+                size="small-medium"
+                class="tw-text-center"
+                @on-click="onViewMore"
               />
             </div>
-            <Button
-              :label="viewMoreDomainLabel"
-              variant="no-border"
-              size="small-medium"
-              class="tw-text-center"
-              @on-click="onViewMore"
-            />
           </div>
           <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
             <TextCopyField
@@ -230,6 +244,17 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
+          <div v-if="showUpsellRotation" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
+            <slot name="upsellContainer" />
+            <Button
+              v-if="selectedUpsellProp && selectedUpsellProp.type === 'domainName'"
+              :label="viewMoreDomainLabel"
+              variant="no-border"
+              size="small-medium"
+              class="tw-text-center"
+              @on-click="onViewMore"
+            />
+          </div>
         </div>
       </template>
     </Modal>
@@ -403,6 +428,16 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    selectedUpsellProp: {
+      type: Object,
+      required: true,
+      default: null,
+    },
   },
   emits: [
     'close-modal',