@designcrowd/fe-shared-lib 1.2.23 → 1.2.24-ast-upsell

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.de-DE.json

@@ -29,7 +29,9 @@
     "copySuccessLabel": "Kopiert!",
     "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später",
-    "selectDomainDropdownPlaceholder": "Domain auswählen"
+    "selectDomainDropdownPlaceholder": "Domain auswählen",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Digitale Visitenkarte"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Kostenlose Domain",

package/src/bundles/bundled-translations.es-ES.json

@@ -29,7 +29,9 @@
     "copySuccessLabel": "¡Copiado!",
     "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde",
-    "selectDomainDropdownPlaceholder": "Selecciona un nombre de dominio"
+    "selectDomainDropdownPlaceholder": "Selecciona un nombre de dominio",
+    "websiteFriendlyName": "Sitio web",
+    "digitalBusinessCardFriendlyName": "Tarjeta de visita digital"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Dominio gratis",

package/src/bundles/bundled-translations.fr-FR.json

@@ -29,7 +29,9 @@
     "copySuccessLabel": "Copié !",
     "publishedSuccessDescriptionLabel": "Achetez un nom de domaine correspondant à votre marque",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Non merci, peut-être plus tard",
-    "selectDomainDropdownPlaceholder": "Sélectionner un nom de domaine"
+    "selectDomainDropdownPlaceholder": "Sélectionner un nom de domaine",
+    "websiteFriendlyName": "Site Web",
+    "digitalBusinessCardFriendlyName": "Carte de visite numérique"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domaine gratuit",

package/src/bundles/bundled-translations.json

@@ -29,7 +29,9 @@
     "copySuccessLabel": "Copied!",
     "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
-    "selectDomainDropdownPlaceholder": "Select domain name"
+    "selectDomainDropdownPlaceholder": "Select domain name",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Digital Business Card"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Free Domain",

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

@@ -29,7 +29,9 @@
     "copySuccessLabel": "Copiado!",
     "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde",
-    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio"
+    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Cartão de visita digital"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domínio gratuito",

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,10 @@
           </div>
         </div>
         <div v-else class="tw-font-sans">
-          <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
+          <div
+            v-if="!isCustomDomainActive && !hasPurchasedDomains && !showUpsellRotationContainer"
+            class="tw-mb-6 tw-text-left"
+          >
             <div class="tw-mb-6">
               <SellDomainNameSearchWithResults
                 :is-design-com="isDesignCom"
@@ -195,17 +210,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 +240,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>
@@ -270,6 +283,8 @@ const DOMAIN_TYPES = {
 
 const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
 const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
+const WEBSITE_FRIENDLY_NAME = 'Website';
+export const DIGITAL_BUSINESS_CARD = 'Digital Business Card';
 
 export default {
   components: {
@@ -403,6 +418,16 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    selectedUpsellProp: {
+      type: Object,
+      required: true,
+      default: null,
+    },
   },
   emits: [
     'close-modal',
@@ -454,8 +479,9 @@ export default {
       return this.brandPageBaseUrl.replace('https://', '');
     },
     firstTimePublishHeaderLabel() {
+      const translatedBrandPageName = this.getLanguageAwareBrandPageDisplayName(this.brandPageDisplayName);
       return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
-        brandPageDisplayName: this.brandPageDisplayName,
+        brandPageDisplayName: translatedBrandPageName,
       });
     },
     publishSuccessLabel() {
@@ -500,6 +526,9 @@ export default {
         ? this.slugInputPlaceholderYourNameLabel
         : this.slugInputPlaceholderYourBusinessNameLabel;
     },
+    showUpsellRotationContainer() {
+      return this.showUpsellRotation && this.selectedUpsellProp;
+    },
   },
   watch: {
     brandPageSlug(slug) {
@@ -520,6 +549,16 @@ export default {
     this.isModalVisible = this.isSearchDomainListModalVisible;
   },
   methods: {
+    getLanguageAwareBrandPageDisplayName(brandPageName) {
+      switch (brandPageName) {
+        case WEBSITE_FRIENDLY_NAME:
+          return this.publishBrandPageModalTr('websiteFriendlyName');
+        case DIGITAL_BUSINESS_CARD:
+          return this.publishBrandPageModalTr('digitalBusinessCardFriendlyName');
+        default:
+          return brandPageName;
+      }
+    },
     onDomainTypeRadioButtonClick(domain) {
       this.domainTypeValue = domain;
       this.closePurchasedDomainDropdown();

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

@@ -17,6 +17,8 @@
     "copySuccessLabel" : "Kopiert!",
     "publishedSuccessDescriptionLabel" : "Kaufen Sie eine passende Domain für Ihre Marke",
     "hasAlreadyPurchasedDomainCloseButtonLabel" : "Nein, danke, vielleicht später",
-    "selectDomainDropdownPlaceholder" : "Domain auswählen"
+    "selectDomainDropdownPlaceholder" : "Domain auswählen",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Digitale Visitenkarte"
   }
-}
+}

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

@@ -17,6 +17,8 @@
     "copySuccessLabel" : "¡Copiado!",
     "publishedSuccessDescriptionLabel" : "Compra un nombre de dominio que coincida con tu marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel" : "No gracias, quizás más tarde",
-    "selectDomainDropdownPlaceholder" : "Selecciona un nombre de dominio"
+    "selectDomainDropdownPlaceholder" : "Selecciona un nombre de dominio",
+    "websiteFriendlyName" : "Sitio web",
+    "digitalBusinessCardFriendlyName" : "Tarjeta de visita digital"
   }
-}
+}

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

@@ -17,6 +17,8 @@
     "copySuccessLabel" : "Copié !",
     "publishedSuccessDescriptionLabel" : "Achetez un nom de domaine correspondant à votre marque",
     "hasAlreadyPurchasedDomainCloseButtonLabel" : "Non merci, peut-être plus tard",
-    "selectDomainDropdownPlaceholder" : "Sélectionner un nom de domaine"
+    "selectDomainDropdownPlaceholder" : "Sélectionner un nom de domaine",
+    "websiteFriendlyName" : "Site Web",
+    "digitalBusinessCardFriendlyName" : "Carte de visite numérique"
   }
-}
+}

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

@@ -1,22 +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"
-    }
-}
+  "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/i18n/publish-brand-page-modal.pt-PT.json

@@ -17,6 +17,8 @@
     "copySuccessLabel" : "Copiado!",
     "publishedSuccessDescriptionLabel" : "Compre um nome de domínio que corresponda à sua marca",
     "hasAlreadyPurchasedDomainCloseButtonLabel" : "Não, obrigado, talvez mais tarde",
-    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio"
+    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
   }
-}
+}

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,
@@ -184,6 +205,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>