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

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 "
       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,9 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
+          <div v-if="showUpsellRotation" class="tw-border-t tw-border-solid tw-border-grayscale-500">
+            <slot name="upsellContainer" />
+          </div>
         </div>
       </template>
     </Modal>
@@ -403,6 +420,11 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.json

@@ -17,6 +17,8 @@
         "copySuccessLabel": "Copied!",
         "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
         "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
-        "selectDomainDropdownPlaceholder": "Select domain name"
+        "selectDomainDropdownPlaceholder": "Select domain name",
+        "upgradeNowLabel": "Upgrade Now",
+        "getStartedLabel": "Get Started"
     }
 }