@designcrowd/fe-shared-lib 1.2.25 → 1.2.26-ast-upsell

package/src/atoms/components/Icon/Icon.stories.js

@@ -82,6 +82,7 @@ export const IconSample = () => {
           { name: 'error' },
           { name: 'envelope-email' },
           { name: 'eye-crossed' },
+          { name: 'eye-open' },
           { name: 'fees' },
           { name: 'filter' },
           { name: 'filter-crazy-domains' },

package/src/atoms/components/Icon/Icon.vue

@@ -117,6 +117,7 @@ import IconError from './icons/error.vue';
 import IconEllipsis from './icons/ellipsis.vue';
 import IconEnvelopeEmail from './icons/envelope-email.vue';
 import IconEyeCrossed from './icons/eye-crossed.vue';
+import IconEyeOpen from './icons/eye-open.vue';
 import IconFees from './icons/fees.vue';
 import IconFilter from './icons/filter.vue';
 import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
@@ -473,6 +474,7 @@ export default {
     IconError,
     IconEnvelopeEmail,
     IconEyeCrossed,
+    IconEyeOpen,
     IconFees,
     IconFilter,
     IconFilterCrazyDomains,

package/src/atoms/components/Icon/icons/eye-open.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      opacity="0.9"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.4181 4.32617C10.3175 3.62909 9.18444 3.34961 8.00013 3.34961C6.8155 3.34961 5.68265 3.62903 4.57728 4.3252C3.48286 5.01447 2.44779 6.09218 1.41615 7.63965C1.27079 7.85788 1.27079 8.14212 1.41615 8.36035C2.44917 9.90989 3.49435 10.9873 4.5929 11.6758C5.70138 12.3705 6.83403 12.6504 8.00013 12.6504C10.3963 12.6502 12.9746 10.971 14.5568 8.33398C14.6687 8.14732 14.6792 7.91929 14.589 7.72559L14.5441 7.64453C13.533 6.09549 12.5081 5.01658 11.4181 4.32617ZM5.26966 5.4248C6.14901 4.87098 7.03773 4.65039 8.00013 4.65039C8.9627 4.65039 9.85008 4.87112 10.7228 5.42383C11.5338 5.93754 12.3581 6.75756 13.2208 8.01074C11.802 10.1554 9.72686 11.3494 8.00013 11.3496C7.05919 11.3496 6.16934 11.1295 5.28333 10.5742C4.4643 10.0609 3.62437 9.24441 2.7472 8C3.62417 6.75384 4.45564 5.93751 5.26966 5.4248ZM10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z"
+      fill="black"
+    />
+  </svg>
+</template>

package/src/atoms/components/Modal/Modal.vue

@@ -15,7 +15,7 @@
       :class="[
         {
           'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
+          'tw-p-4': !removeHorizontalPadding && !simple,
           'tw-max-w-md': size === 'md',
           'tw-max-w-xl': size === 'xl',
           'tw-max-w-2xl': !size && !isImageMode,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    removeHorizontalPadding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: false,

package/src/bundles/bundled-translations.pt-BR.json

@@ -1 +1,24 @@
-{}
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site published!",
+    "publishSuccessLabel": "Your {{brandPageDisplayName}} is live! Start using your link:",
+    "freePublishCardTitleLabel": "Free Address",
+    "freePublishCardDescriptionLabel": "Choose a free address to publish now. You can always edit the URL later",
+    "slugInputPlaceholderYourNameLabel": "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "your-business-name",
+    "freeDomainLabel": "Free domain",
+    "purchasedDomainLabel": "Purchased domain",
+    "setUrlLabel": "Set URL",
+    "publishLabel": "Publish",
+    "viewMoreDomainLabel": "VIEW MORE DOMAINS",
+    "viewMyWebsiteLabel": "View {{brandPageDisplayName}}",
+    "copyLabel": "Copy",
+    "copySuccessLabel": "Copied!",
+    "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
+    "selectDomainDropdownPlaceholder": "Select domain name",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Digital Business Card"
+  }
+}

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

@@ -75,8 +75,8 @@ const props = defineProps({
     default: '',
   },
   imgUrl: {
-    type: Boolean,
-    default: true,
+    type: String,
+    default: '',
   },
   isDesignCom: {
     type: Boolean,

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="showUpsellRotationContainer && !isCustomDomainActive && !hasPurchasedDomains"
+      :class="{
+        'tw-px-2 md:tw-px-8': !showUpsellRotationContainer && 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 ': !showUpsellRotationContainer,
+          }"
+        >
           <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="!showUpsellRotationContainer">
+            <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>
@@ -187,7 +199,7 @@
           </div>
         </div>
         <div v-else class="tw-font-sans">
-          <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
+          <div v-if="!showUpsellRotationContainer" class="tw-mb-6 tw-text-left">
             <div class="tw-mb-6">
               <SellDomainNameSearchWithResults
                 :is-design-com="isDesignCom"
@@ -195,17 +207,12 @@
                 :currency="userCurrency"
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
+                show-view-more-button
                 @on-change-search="onSearchTextChanged"
                 @on-buy-now-click="onBuyNowClick"
+                @on-view-more="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 +237,9 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
+          <div v-if="showUpsellRotationContainer" class="tw-border-t tw-border-solid tw-border-grayscale-500 tw-p-5">
+            <slot name="upsellContainer" />
+          </div>
         </div>
       </template>
     </Modal>
@@ -405,6 +415,11 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',
@@ -503,6 +518,17 @@ export default {
         ? this.slugInputPlaceholderYourNameLabel
         : this.slugInputPlaceholderYourBusinessNameLabel;
     },
+    showUpsellRotationContainer() {
+      // Should be false if no brandPageSlug or already published
+      if (
+        (this.brandPageSlug && this.brandPageSlug.trim() !== '') ||
+        this.isPublished ||
+        this.isBrandPageSlugEditMode
+      ) {
+        return false;
+      }
+      return this.showUpsellRotation && !this.isCustomDomainActive && !this.hasPurchasedDomains;
+    },
   },
   watch: {
     brandPageSlug(slug) {

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

@@ -0,0 +1,24 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Set the URL for {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site published!",
+    "publishSuccessLabel" : "Your {{brandPageDisplayName}} is live! Start using your link:",
+    "freePublishCardTitleLabel" : "Free Address",
+    "freePublishCardDescriptionLabel" : "Choose a free address to publish now. You can always edit the URL later",
+    "slugInputPlaceholderYourNameLabel" : "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel" : "your-business-name",
+    "freeDomainLabel" : "Free domain",
+    "purchasedDomainLabel" : "Purchased domain",
+    "setUrlLabel" : "Set URL",
+    "publishLabel" : "Publish",
+    "viewMoreDomainLabel" : "VIEW MORE DOMAINS",
+    "viewMyWebsiteLabel" : "View {{brandPageDisplayName}}",
+    "copyLabel" : "Copy",
+    "copySuccessLabel" : "Copied!",
+    "publishedSuccessDescriptionLabel" : "Buy matching domain name for your brand",
+    "hasAlreadyPurchasedDomainCloseButtonLabel" : "No thanks, maybe later",
+    "selectDomainDropdownPlaceholder" : "Select domain name",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Digital Business Card"
+  }
+}

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -22,6 +22,14 @@
       :domain-search-location="domainSearchLocation"
       @on-buy-now-click="onBuyNowClick"
     />
+    <Button
+      v-if="showViewMoreButton"
+      :label="viewMoreDomainLabel"
+      variant="no-border"
+      size="small-medium"
+      class="tw-text-center tw-pt-6"
+      @on-click="onViewMore"
+    />
   </div>
 </template>
 <script>
@@ -30,6 +38,8 @@ import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomain
 
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events from '../../constants/event-constants';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 const TEXT_CHANGED_PARAM = 'textChanged';
 
@@ -37,6 +47,7 @@ export default {
   components: {
     SellDomainNameSearch,
     SellDomainNameSearchResult,
+    Button,
   },
   props: {
     currency: {
@@ -101,6 +112,16 @@ export default {
       type: Number,
       default: undefined,
     },
+    showViewMoreButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
+    };
   },
   data: () => ({
     domainNameItems: undefined,
@@ -126,6 +147,7 @@ export default {
   methods: {
     async onSearchDomainName(args) {
       this.$emit('on-change-search', args.searchText);
+      this.$emit('on-domain-search');
       await this.searchDomainName(args.searchText, args.isUserTriggered);
     },
     async searchDomainName(searchText, isUserTriggered) {
@@ -184,6 +206,9 @@ export default {
       const urlParams = new URLSearchParams(window.location.search);
       return urlParams.get(TEXT_CHANGED_PARAM)?.toUpperCase() === 'TRUE' || false;
     },
+    onViewMore() {
+      this.$emit('on-view-more');
+    },
   },
 };
 </script>