@designcrowd/fe-shared-lib 1.2.15 → 1.2.16-ast-upsell-3

package/src/atoms/components/Upsell/WebDesignSupport.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ title }}
+    </h3>
+    <div class="tw-flex tw-justify-center tw-items-center">
+      <figure
+        class="tw-relative tw-block tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow tw-w-72"
+      >
+        <img :src="imageUrl" alt="" loading="lazy" class="tw-w-full tw-rounded-md tw-h-full" />
+      </figure>
+    </div>
+    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-2">
+      {{ subtitle }}
+    </div>
+    <div v-if="buttonUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button :full-width="true" variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const { t, te, locale } = useI18n();
+    const lowerCaseLocal = locale.value.toLowerCase();
+
+    return {
+      t,
+      te,
+      lowerCaseLocal,
+    };
+  },
+  computed: {
+    title() {
+      return this.te('webSupportTitle') ? this.t('webSupportTitle') : 'Get Professional Web Design Support';
+    },
+    subtitle() {
+      return this.te('webSupportSubtitle')
+        ? this.t('webSupportSubtitle')
+        : 'Our professional web design team will help you build and get the most out of your website';
+    },
+    imageUrl() {
+      return `https://bcassetcdn.com/assets/images/modal/brandpage-design-support@2x.${this.lowerCaseLocal}.png`;
+    },
+    buttonLabel() {
+      return this.te('webDesignButtonLabel') ? this.t('webDesignButtonLabel') : 'Get Web Design Support';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>
+
+<i18n locale="en-US" src="../i18n/upsell-modal-components.json" />
+<!-- <i18n locale="fr-FR" src="../i18n/upsell-modal-components.fr-FR.json" />
+<i18n locale="de-DE" src="../i18n/upsell-modal-components.de-DE.json" />
+<i18n locale="es-ES" src="../i18n/upsell-modal-components.es-ES.json" />
+<i18n locale="pt-PT" src="../i18n/upsell-modal-components.pt-PT.json" /> -->

package/src/atoms/components/Upsell/i18n/upsell-modal-components.json

@@ -0,0 +1,15 @@
+{
+  "getStartedLabel": "Get Started",
+  "upgradeNowLabel": "Upgrade Now",
+  "linkInBioTitle": "Create your Link in Bio",
+  "linkInBioSubtitle": "Launch a link in bio that drives connections and elevates",
+  "webSupportTitle": "Get Professional Web Design Support",
+  "webSupportSubtitle": "Our professional web design team will help you build and get the most out of your website",
+  "webDesignButtonLabel": "Get Web Design Support",
+  "digitalBusinessCardTitle": "Create your digital business card",
+  "digitalBusinessCardSubtitle": "Launch a digital business card that drives connections and elevates your brand",
+  "upgradeWebsiteTitle": "Upgrade to premium website",
+  "upgradeWebsiteSubtitle": "Unlock all advanced features for more flexibility",
+  "legalZoomTitle": "Start your LLC for free",
+  "legalZoomSubtitle": "In partnership with LegalZoom, kickstart your LLC for free"
+}

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",
+    "upgradeNowLabel": "Jetzt upgraden",
+    "getStartedLabel": "Los geht’s"
   },
   "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",
+    "upgradeNowLabel": "Hazte prémium ya",
+    "getStartedLabel": "Comienza"
   },
   "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",
+    "upgradeNowLabel": "Mettre à niveau maintenant",
+    "getStartedLabel": "Commencez"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domaine gratuit",

package/src/bundles/bundled-translations.json

@@ -3,6 +3,19 @@
     "domainCreditUsed": "Domain credit used",
     "free": "Free"
   },
+  "getStartedLabel": "Get Started",
+  "upgradeNowLabel": "Upgrade Now",
+  "linkInBioTitle": "Create your Link in Bio",
+  "linkInBioSubtitle": "Launch a link in bio that drives connections and elevates",
+  "webSupportTitle": "Get Professional Web Design Support",
+  "webSupportSubtitle": "Our professional web design team will help you build and get the most out of your website",
+  "webDesignButtonLabel": "Get Web Design Support",
+  "digitalBusinessCardTitle": "Create your digital business card",
+  "digitalBusinessCardSubtitle": "Launch a digital business card that drives connections and elevates your brand",
+  "upgradeWebsiteTitle": "Upgrade to premium website",
+  "upgradeWebsiteSubtitle": "Unlock all advanced features for more flexibility",
+  "legalZoomTitle": "Start your LLC for free",
+  "legalZoomSubtitle": "In partnership with LegalZoom, kickstart your LLC for free",
   "sharedPaymentConfig": {
     "onboardingIncomplete": "Onboarding Incomplete",
     "pendingVerification": "Pending Verification",

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",
+    "upgradeNowLabel": "Faça upgrade agora",
+    "getStartedLabel": "Comece"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domínio gratuito",

package/src/experiences/components/AuthFlow/SignIn.vue

@@ -57,7 +57,7 @@
           </p>
           <div class="tw-flex tw-flex-col">
             <div>
-              <form id="signin" action="/identity/account/signin" method="post" @submit="validate">
+              <form id="signin" :action="getSignInAction" method="post" @submit="validate">
                 <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
                 <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
                 <input
@@ -170,6 +170,7 @@ import themeMixin from '../../mixins/themeMixin';
 import { SIGN_IN } from '../../constants/partner-dictionary-constants';
 import isValidEmail from '../../helpers/email-validator';
 import SocialSignIn from './SocialSignIn.vue';
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -334,6 +335,9 @@ export default {
     isLoading() {
       return this.emailLoading || this.facebookLoading || this.googleLoading;
     },
+    currentLocale() {
+      return getCurrentLocale();
+    },
     submissionButtonLabelLowercase() {
       return this.submissionButtonLabel.toLowerCase();
     },
@@ -369,6 +373,11 @@ export default {
       }
       return this.signUpText;
     },
+    getSignInAction() {
+      const params = new URLSearchParams();
+      params.set('locale', this.currentLocale);
+      return `/identity/account/signin?${params.toString()}`;
+    },
   },
   watch: {
     capturePassword() {

package/src/experiences/components/AuthFlow/SignUp.vue

@@ -34,6 +34,7 @@
           </h2>
           <form id="signup" action="/identity/account/signup" method="post" @submit="validate">
             <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
+            <input name="requestLocale" type="hidden" :value="currentLocale" />
             <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
             <input
               v-model="aUserName"
@@ -116,6 +117,7 @@ import SocialSignIn from './SocialSignIn.vue';
 import SubmissionButton from './SubmissionButton.vue';
 import AuthLegal from './AuthLegal.vue';
 import themeMixin from '../../mixins/themeMixin';
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -229,6 +231,9 @@ export default {
       }
       return url?.toString();
     },
+    currentLocale() {
+      return getCurrentLocale();
+    },
   },
   methods: {
     validate(e) {

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

@@ -1,5 +1,6 @@
 import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
+import UpgradeWebsite from '../../../atoms/components/Upsell/UpgradeWebsite.vue';
 import { domains } from './__fixtures__/data';
 import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 
@@ -224,3 +225,43 @@ export const Free = () => {
 };
 
 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
+            button-url="https://example.com/upgrade"
+          />
+      </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,21 @@
         </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"
+                  show-view-more-button
+                  @on-change-search="onSearchTextChanged"
+                  @on-buy-now-click="onBuyNowClick"
+                  @on-view-more="onViewMore"
+                />
+              </div>
             </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 +239,9 @@
               @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" />
+          </div>
         </div>
       </template>
     </Modal>
@@ -403,6 +415,16 @@ export default {
       required: true,
       default: '',
     },
+    showUpsellRotation: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    selectedUpsellProp: {
+      type: Object,
+      required: true,
+      default: null,
+    },
   },
   emits: [
     'close-modal',

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",
+    "upgradeNowLabel" : "Jetzt upgraden",
+    "getStartedLabel" : "Los geht’s"
   }
 }

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",
+    "upgradeNowLabel" : "Hazte prémium ya",
+    "getStartedLabel" : "Comienza"
   }
 }

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",
+    "upgradeNowLabel" : "Mettre à niveau maintenant",
+    "getStartedLabel" : "Commencez"
   }
 }

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",
+    "upgradeNowLabel" : "Faça upgrade agora",
+    "getStartedLabel" : "Comece"
   }
 }

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>

package/src/useSharedLibTranslate.js

@@ -27,6 +27,8 @@ const setSharedLibLocaleAsync = async (locale = 'en-US') => {
   await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
     ...languageFile,
   });
+
+  await i18next.changeLanguage(localeToUse);
 };
 
 const tr = (key, valuesToInterpolate = {}) => {