@designcrowd/fe-shared-lib 1.2.18 → 1.2.19-ast-upsell-2

package/index.js

@@ -54,3 +54,7 @@ export { default as HashRouteModal } from './src/atoms/components/Modal/HashRout
 export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
+export { default as WebDesignSupportUpsell } from './src/atoms/components/Upsell/WebDesignSupport.vue';
+export { default as DigitalBusinessCardUpsell } from './src/atoms/components/Upsell/DigitalBusinessCard.vue';
+export { default as LinkInBioUpsell } from './src/atoms/components/Upsell/LinkInBio.vue';
+export { default as UpgradeWebsiteUpsell } from './src/atoms/components/Upsell/UpgradeWebsite.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.18",
+  "version": "1.2.19-ast-upsell-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

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/atoms/components/Price/Price.fixtures.js

@@ -11,15 +11,75 @@ export const audCurrency = {
   name: 'Australian Dollars',
   iso4127Code: 'AUD',
   symbol: '$',
-  abbreviation: 'AU',
+  abbreviation: 'A',
+};
+
+export const gbpCurrency = {
+  id: 3,
+  name: 'British Pound',
+  iso4127Code: 'GBP',
+  symbol: '£',
+  abbreviation: 'UK',
 };
 
 export const euroCurrency = {
-  id: 999,
+  id: 4,
   name: 'Euro',
   iso4127Code: 'EUR',
   symbol: '€',
   abbreviation: 'EU',
 };
 
-export const currencies = [usdCurrency, audCurrency, euroCurrency];
+export const inrCurrency = {
+  id: 5,
+  name: 'Indian Rupee',
+  iso4127Code: 'INR',
+  symbol: '₹',
+  abbreviation: 'IN',
+};
+
+export const phpCurrency = {
+  id: 6,
+  name: 'Philippine Peso',
+  iso4127Code: 'PHP',
+  symbol: '₱',
+  abbreviation: 'PH',
+};
+
+export const brlCurrency = {
+  id: 7,
+  name: 'Brazilian Real',
+  iso4127Code: 'BRL',
+  symbol: 'R$',
+  abbreviation: 'R',
+};
+
+export const mxnCurrency = {
+  id: 8,
+  name: 'Mexican Peso',
+  iso4127Code: 'MXN',
+  symbol: 'MX$',
+  abbreviation: 'MX',
+};
+
+export const zarCurrency = {
+  id: 9,
+  name: 'South African Rand',
+  iso4127Code: 'ZAR',
+  symbol: 'R',
+  abbreviation: 'R',
+};
+
+export const currencies = [
+  usdCurrency,
+  audCurrency,
+  gbpCurrency,
+  euroCurrency,
+  inrCurrency,
+  phpCurrency,
+  brlCurrency,
+  mxnCurrency,
+  zarCurrency,
+];
+
+export const locales = [ 'en-US', 'fr-FR', 'es-ES', 'pt-PT', 'de-DE']

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

@@ -1,5 +1,9 @@
 import Price from './Price.vue';
-import { currencies } from './Price.fixtures';
+import { currencies, locales } from './Price.fixtures';
+import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
+import { defineComponent } from "vue";
+
+await setSharedLibLocaleAsync();
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -7,6 +11,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
+    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -16,6 +21,10 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
+    locale: {
+      control: { type: 'select' },
+      options: locales,
+    },
   },
 };
 
@@ -31,12 +40,16 @@ export const Sample = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
         <price 
             v-bind="args"
             :currency="selectedCurrency"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -59,6 +72,9 @@ export const WithFraction = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -66,7 +82,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -89,6 +105,9 @@ export const AlwaysShowFractionOn = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -97,7 +116,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
         />
       </span>
     `,
@@ -128,7 +147,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -151,6 +170,9 @@ export const WithSuffix = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
       },
       template: `
       <span>
@@ -159,8 +181,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :show-abbreviation="true"
             :suffix="suffix"
+            :locale="selectedLocale"
           />
       </span>
     `,
@@ -171,3 +193,100 @@ export const WithSuffix = {
     suffix: '/yr',
   },
 };
+
+export const WithLocale = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+  },
+};
+
+export const AllLocalesAndCurrencies = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookPriceComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      const combos = new Array(locales.length).fill(0);
+      combos.forEach((item, index) => {
+        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
+      })
+      return {
+        variants: combos,
+      };
+    },
+    template: `
+      <StorybookPriceComponent
+          :variants="variants"/>
+      <StorybookPriceComponent
+          :variants="variants"
+          :show-abbreviation="true"
+      />
+    `,
+  };
+};
+
+const StorybookPriceComponent = defineComponent({
+    components: {
+      Price,
+    },
+    props: {
+      variants: {
+        type: Array,
+        required: true,
+      },
+      showAbbreviation: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    template: `
+    <table class="tw-w-full">
+      <thead>
+        <tr>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="locale in variants" class="tw-bg-grayscale-200">
+          <td>{{ locale[0].locale }}</td>
+          <td v-for="item in locale" class="tw-p-4">
+            <price
+                :amount=10.00
+                :currency="item.currency"
+                :locale="item.locale"
+                :show-abbreviation="showAbbreviation"
+                fraction="2"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
+});

package/src/atoms/components/Price/Price.vue

@@ -5,7 +5,8 @@
   </span>
 </template>
 <script>
-import { priceTr } from '../../../useSharedLibTranslate';
+
+import { priceTr, formatCurrency } from "../../../useSharedLibTranslate";
 
 export default {
   props: {
@@ -24,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    locale: {
+      type: String,
+      required: false,
+      default: null,
+    },
     fraction: {
       type: [Number, String],
       required: false,
@@ -66,6 +72,21 @@ export default {
         return this.free;
       }
 
+      if (this.locale != null)
+      {
+        const formattedCurrency = formatCurrency(
+          this.amount,
+          this.locale,
+          this.currency,
+          this.fraction,
+          this.showAbbreviation
+        );
+        
+        if (formattedCurrency) {
+          return formattedCurrency;
+        }
+      }
+
       const parsedAmount = Number.parseFloat(this.amount);
 
       if (Number.isNaN(parsedAmount)) {
@@ -81,10 +102,10 @@ export default {
       return parsedAmount.toFixed(this.fraction);
     },
     currencyAbbreviation() {
-      return this.showAbbreviation && this.amount > 0 ? this.currency?.abbreviation?.trim() : '';
+      return this.showAbbreviation && this.amount && !this.locale ? this.currency?.abbreviation?.trim() : '';
     },
     currencySymbol() {
-      if (!this.amount || this.amount === 0) {
+      if (!this.amount || this.amount === 0 || this.locale) {
         return '';
       }
 

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

@@ -0,0 +1,63 @@
+<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 variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('digitalBusinessCardTitle') || 'Create your digital business card';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('digitalBusinessCardSubtitle') ||
+        'Launch a digital business card that drives connections and elevates your brand'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/website-xsell-digital-business-card@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('getStartedLabel') || 'Get Started';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,62 @@
+<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 variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('linkInBioTitle') || 'Create your Link in Bio';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('linkInBioSubtitle') || 'Launch a link in bio that drives connections and elevates'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/website-xsell-link-in-bio@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('getStartedLabel') || 'Get Started';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,60 @@
+<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 variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('upgradeWebsiteTitle') || 'Upgrade to premium website';
+    },
+    subtitle() {
+      return upsellModalComponentsTr('upgradeWebsiteSubtitle') || 'Unlock all advanced features for more flexibility';
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/onboarding-upsell-website@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('upgradeNowLabel') || 'Upgrade Now';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,63 @@
+<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 variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('webSupportTitle') || 'Get Professional Web Design Support';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('webSupportSubtitle') ||
+        'Our professional web design team will help you build and get the most out of your website'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/brandpage-design-support@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('webDesignButtonLabel') || 'Get Web Design Support';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,17 @@
+{
+  "upsellModalComponents" : {
+    "getStartedLabel" : "Los geht’s",
+    "upgradeNowLabel" : "Jetzt upgraden",
+    "linkInBioTitle" : "BIO-LINK-SEITE ERSTELLEN",
+    "linkInBioSubtitle" : "Erstellen Sie einen Bio-Link, mit dem Sie neue Kontakte knüpfen und Ihre Marke stärken",
+    "webSupportTitle" : "Professionelle Unterstützung für Webdesign anfordern",
+    "webSupportSubtitle" : "Unser professionelles Webdesign-Team unterstützt Sie beim Aufbau und der Optimierung Ihrer Website",
+    "webDesignButtonLabel" : "Webdesign-Unterstützung anfordern",
+    "digitalBusinessCardTitle" : "Erstellen Sie Ihre digitale Visitenkarte",
+    "digitalBusinessCardSubtitle" : "Erstellen Sie eine digitale Visitenkarte, mit der Sie neue Kontakte knüpfen und Ihre Marke stärken",
+    "upgradeWebsiteTitle" : "Auf Premium-Website upgraden",
+    "upgradeWebsiteSubtitle" : "Schalten Sie alle erweiterten Funktionen für mehr Flexibilität frei",
+    "legalZoomTitle" : "Launchen Sie kostenlos Ihre eigene LLC",
+    "legalZoomSubtitle" : "In Zusammenarbeit mit LegalZoom können Sie jetzt kostenlos eine eigene LLC gründen."
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "upsellModalComponents" : {
+    "getStartedLabel" : "Comienza",
+    "upgradeNowLabel" : "Hazte prémium ya",
+    "linkInBioTitle" : "CREA TU ENLACE A LA BIO",
+    "linkInBioSubtitle" : "Lanza un enlace en tu biografía que impulse las conexiones y eleve tu presencia",
+    "webSupportTitle" : "Obtén soporte profesional en diseño web",
+    "webSupportSubtitle" : "Nuestro equipo profesional de diseño web te ayudará a crear y sacar el máximo partido a tu sitio web",
+    "webDesignButtonLabel" : "Obtén soporte de diseño web",
+    "digitalBusinessCardTitle" : "Crea tu tarjeta de visita digital",
+    "digitalBusinessCardSubtitle" : "Lanza una tarjeta de visita digital que impulse las conexiones y eleve tu marca",
+    "upgradeWebsiteTitle" : "Pásate a un sitio web prémium",
+    "upgradeWebsiteSubtitle" : "Accede a todas las funciones avanzadas para disfrutar de mayor flexibilidad",
+    "legalZoomTitle" : "Inicia tu LLC gratis",
+    "legalZoomSubtitle" : "En colaboración con LegalZoom, inicia tu LLC gratis"
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "upsellModalComponents" : {
+    "getStartedLabel" : "Commencez",
+    "upgradeNowLabel" : "Mettre à niveau maintenant",
+    "linkInBioTitle" : "CRÉEZ VOTRE LIEN DANS LA BIO",
+    "linkInBioSubtitle" : "Lancez un lien dans la bio qui favorise les connexions et booste",
+    "webSupportTitle" : "Profitez d'une assistance professionnelle à la conception de sites Web",
+    "webSupportSubtitle" : "Notre équipe professionnelle de conception de sites Web vous aidera à créer votre site Web et à en tirer le meilleur parti.",
+    "webDesignButtonLabel" : "Assistance Web",
+    "digitalBusinessCardTitle" : "Créez votre carte de visite numérique",
+    "digitalBusinessCardSubtitle" : "Profitez d'une carte de visite numérique qui favorise les connexions et booste votre marque",
+    "upgradeWebsiteTitle" : "Passez à un site Web premium",
+    "upgradeWebsiteSubtitle" : "Débloquez toutes les fonctionnalités avancées pour plus de flexibilité",
+    "legalZoomTitle" : "Créez votre entreprise gratuitement",
+    "legalZoomSubtitle" : "En partenariat avec LegalZoom, créez votre entreprise gratuitement"
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "upsellModalComponents": {
+    "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/atoms/components/Upsell/i18n/upsell-modal-components.pt-PT.json

@@ -0,0 +1,17 @@
+{
+  "upsellModalComponents" : {
+    "getStartedLabel" : "Comece",
+    "upgradeNowLabel" : "Faça upgrade agora",
+    "linkInBioTitle" : "CRIAR LINK NA BIOGRAFIA",
+    "linkInBioSubtitle" : "Lance um link na bio que promova ligações e eleve",
+    "webSupportTitle" : "Obter apoio profissional ao web design",
+    "webSupportSubtitle" : "A nossa equipa profissional de design Web design vai ajudar a construir e a tirar o máximo partido do seu website.",
+    "webDesignButtonLabel" : "Obter apoio ao web design",
+    "digitalBusinessCardTitle" : "Crie o seu Cartão de Visita Digital",
+    "digitalBusinessCardSubtitle" : "Lance um cartão de visita digital que promove ligações e eleva a sua marca",
+    "upgradeWebsiteTitle" : "Upgrade para Website premium",
+    "upgradeWebsiteSubtitle" : "Desbloqueie todas as funcionalidades avançadas para maior flexibilidade",
+    "legalZoomTitle" : "Crie a sua sociedade gratuitamente",
+    "legalZoomSubtitle" : "Em parceria com a LegalZoom, crie a sua sociedade gratuitamente"
+  }
+}

package/src/bundles/bundled-translations.de-DE.json

@@ -3,6 +3,21 @@
     "domainCreditUsed": "Verwendetes Domain-Guthaben",
     "free": "Kostenlos"
   },
+  "upsellModalComponents": {
+    "getStartedLabel": "Los geht’s",
+    "upgradeNowLabel": "Jetzt upgraden",
+    "linkInBioTitle": "BIO-LINK-SEITE ERSTELLEN",
+    "linkInBioSubtitle": "Erstellen Sie einen Bio-Link, mit dem Sie neue Kontakte knüpfen und Ihre Marke stärken",
+    "webSupportTitle": "Professionelle Unterstützung für Webdesign anfordern",
+    "webSupportSubtitle": "Unser professionelles Webdesign-Team unterstützt Sie beim Aufbau und der Optimierung Ihrer Website",
+    "webDesignButtonLabel": "Webdesign-Unterstützung anfordern",
+    "digitalBusinessCardTitle": "Erstellen Sie Ihre digitale Visitenkarte",
+    "digitalBusinessCardSubtitle": "Erstellen Sie eine digitale Visitenkarte, mit der Sie neue Kontakte knüpfen und Ihre Marke stärken",
+    "upgradeWebsiteTitle": "Auf Premium-Website upgraden",
+    "upgradeWebsiteSubtitle": "Schalten Sie alle erweiterten Funktionen für mehr Flexibilität frei",
+    "legalZoomTitle": "Launchen Sie kostenlos Ihre eigene LLC",
+    "legalZoomSubtitle": "In Zusammenarbeit mit LegalZoom können Sie jetzt kostenlos eine eigene LLC gründen."
+  },
   "sharedPaymentConfig": {
     "onboardingIncomplete": "Das Onboarding wurde noch nicht abgeschlossen.",
     "pendingVerification": "Ausstehende Verifizierung",

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

@@ -3,6 +3,21 @@
     "domainCreditUsed": "Crédito del dominio usado",
     "free": "Gratis"
   },
+  "upsellModalComponents": {
+    "getStartedLabel": "Comienza",
+    "upgradeNowLabel": "Hazte prémium ya",
+    "linkInBioTitle": "CREA TU ENLACE A LA BIO",
+    "linkInBioSubtitle": "Lanza un enlace en tu biografía que impulse las conexiones y eleve tu presencia",
+    "webSupportTitle": "Obtén soporte profesional en diseño web",
+    "webSupportSubtitle": "Nuestro equipo profesional de diseño web te ayudará a crear y sacar el máximo partido a tu sitio web",
+    "webDesignButtonLabel": "Obtén soporte de diseño web",
+    "digitalBusinessCardTitle": "Crea tu tarjeta de visita digital",
+    "digitalBusinessCardSubtitle": "Lanza una tarjeta de visita digital que impulse las conexiones y eleve tu marca",
+    "upgradeWebsiteTitle": "Pásate a un sitio web prémium",
+    "upgradeWebsiteSubtitle": "Accede a todas las funciones avanzadas para disfrutar de mayor flexibilidad",
+    "legalZoomTitle": "Inicia tu LLC gratis",
+    "legalZoomSubtitle": "En colaboración con LegalZoom, inicia tu LLC gratis"
+  },
   "sharedPaymentConfig": {
     "onboardingIncomplete": "Incorporación incompleta",
     "pendingVerification": "Pendiente de verificación",

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

@@ -3,6 +3,21 @@
     "domainCreditUsed": "Crédit de domaine utilisé",
     "free": "Gratuit"
   },
+  "upsellModalComponents": {
+    "getStartedLabel": "Commencez",
+    "upgradeNowLabel": "Mettre à niveau maintenant",
+    "linkInBioTitle": "CRÉEZ VOTRE LIEN DANS LA BIO",
+    "linkInBioSubtitle": "Lancez un lien dans la bio qui favorise les connexions et booste",
+    "webSupportTitle": "Profitez d'une assistance professionnelle à la conception de sites Web",
+    "webSupportSubtitle": "Notre équipe professionnelle de conception de sites Web vous aidera à créer votre site Web et à en tirer le meilleur parti.",
+    "webDesignButtonLabel": "Assistance Web",
+    "digitalBusinessCardTitle": "Créez votre carte de visite numérique",
+    "digitalBusinessCardSubtitle": "Profitez d'une carte de visite numérique qui favorise les connexions et booste votre marque",
+    "upgradeWebsiteTitle": "Passez à un site Web premium",
+    "upgradeWebsiteSubtitle": "Débloquez toutes les fonctionnalités avancées pour plus de flexibilité",
+    "legalZoomTitle": "Créez votre entreprise gratuitement",
+    "legalZoomSubtitle": "En partenariat avec LegalZoom, créez votre entreprise gratuitement"
+  },
   "sharedPaymentConfig": {
     "onboardingIncomplete": "Inscription incomplète",
     "pendingVerification": "Vérification en attente",

package/src/bundles/bundled-translations.json

@@ -3,6 +3,21 @@
     "domainCreditUsed": "Domain credit used",
     "free": "Free"
   },
+  "upsellModalComponents": {
+    "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

@@ -3,6 +3,21 @@
     "domainCreditUsed": "Crédito de domínio utilizado",
     "free": "Grátis"
   },
+  "upsellModalComponents": {
+    "getStartedLabel": "Comece",
+    "upgradeNowLabel": "Faça upgrade agora",
+    "linkInBioTitle": "CRIAR LINK NA BIOGRAFIA",
+    "linkInBioSubtitle": "Lance um link na bio que promova ligações e eleve",
+    "webSupportTitle": "Obter apoio profissional ao web design",
+    "webSupportSubtitle": "A nossa equipa profissional de design Web design vai ajudar a construir e a tirar o máximo partido do seu website.",
+    "webDesignButtonLabel": "Obter apoio ao web design",
+    "digitalBusinessCardTitle": "Crie o seu Cartão de Visita Digital",
+    "digitalBusinessCardSubtitle": "Lance um cartão de visita digital que promove ligações e eleva a sua marca",
+    "upgradeWebsiteTitle": "Upgrade para Website premium",
+    "upgradeWebsiteSubtitle": "Desbloqueie todas as funcionalidades avançadas para maior flexibilidade",
+    "legalZoomTitle": "Crie a sua sociedade gratuitamente",
+    "legalZoomSubtitle": "Em parceria com a LegalZoom, crie a sua sociedade gratuitamente"
+  },
   "sharedPaymentConfig": {
     "onboardingIncomplete": "Integração incompleta",
     "pendingVerification": "Verificação Pendente",

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/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

@@ -63,10 +63,48 @@ const sharedPaymentConfigTr = (key, valuesToInterpolate = {}) => tr(`sharedPayme
 
 const priceTr = (key, valuesToInterpolate = {}) => tr(`price.${key}`, valuesToInterpolate);
 
+const upsellModalComponentsTr = (key, valuesToInterpolate = {}) => tr(`upsellModalComponents.${key}`, valuesToInterpolate);
+
 const getCurrentLocale = () => {
   return i18next.language || 'en-US';
 };
 
+const formatCurrency = (amount, locale, currency, fraction = 0, showAbbreviation = false) => {
+  let localeAmount = i18next.t('{{val, currency}}', {
+    ns: 'fe-shared-lib',
+    val: amount,
+    currency: currency.iso4127Code,
+    locale: locale,
+    maximumFractionDigits: fraction,
+    useGrouping: false,
+  });
+
+  const abbreviationTrimmed = currency.abbreviation.trim();
+  const symbolTrimmed = currency.symbol.trim();
+
+  // i18next always uses iso code for some locale/currency combos like ZAR, prefer symbol over iso code
+  if (localeAmount.includes(currency.iso4127Code)) {
+    localeAmount = localeAmount.replace(currency.iso4127Code, symbolTrimmed);
+  }
+
+  // show abbreviation locale logic
+  // note: showAbbreviation is only passed as true for symbol = "$"
+  if (currency.symbol.trim() !== '$') {
+    return localeAmount;
+  }
+
+  const altAudAbbreviation = 'AU';
+  if (showAbbreviation && !localeAmount.includes(abbreviationTrimmed)) {
+    return localeAmount.replace(symbolTrimmed, `${abbreviationTrimmed}${symbolTrimmed}`);
+  } else if (!showAbbreviation && localeAmount.includes(altAudAbbreviation)) {
+    return localeAmount.replace(altAudAbbreviation, '');
+  } else if (!showAbbreviation && localeAmount.includes(abbreviationTrimmed)) {
+    return localeAmount.replace(abbreviationTrimmed, '');
+  }
+
+  return localeAmount;
+}
+
 export {
   setSharedLibLocaleAsync,
   getCurrentLocale,
@@ -81,4 +119,6 @@ export {
   uploadYourLogoTr,
   sharedPaymentConfigTr,
   priceTr,
+  upsellModalComponentsTr,
+  formatCurrency,
 };