@designcrowd/fe-shared-lib 1.2.13 → 1.2.14-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 WebsiteUpsell } from './src/atoms/components/Upsell/Website.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.13",
+  "version": "1.2.14-ast-upsell-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-brandCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1966,6 +1975,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2155,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-brandCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 151 215 / var(--tw-text-opacity));
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandCrowd .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-brandPage.css

@@ -699,6 +699,9 @@ video {
 .theme-brandPage .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandPage .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandPage .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandPage .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandPage .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandPage .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandPage .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandPage .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandPage .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1754,6 +1763,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandPage .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandPage .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1829,6 +1843,16 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandPage .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.theme-brandPage .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandPage .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-crazyDomains.css

@@ -699,6 +699,9 @@ video {
 .theme-crazyDomains .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-crazyDomains .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-crazyDomains .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-crazyDomains .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-crazyDomains .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-crazyDomains .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-crazyDomains .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-crazyDomains .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-crazyDomains .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1966,6 +1975,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2155,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-crazyDomains .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCom.css

@@ -699,6 +699,9 @@ video {
 .theme-designCom .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCom .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCom .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCom .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCom .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCom .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCom .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCom .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCom .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1966,6 +1975,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2155,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCom .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-designCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1966,6 +1975,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2155,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCrowd .sm\:tw-absolute {
     position: absolute;

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.vue

@@ -52,8 +52,8 @@ export default {
   },
   data() {
     return {
-      domainCreditUsed: priceTr('domainCreditUsed'),
-      free: priceTr('free'),
+      domainCreditUsed: priceTr('domainCreditUsed') ?? 'Domain credit used',
+      free: priceTr('free') ?? 'Free',
     };
   },
   computed: {

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="tw-m-5">
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ upsellProps.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="upsellProps.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">
+      {{ upsellProps.subtitle }}
+    </div>
+    <div v-if="upsellProps.checkoutUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="primary"
+        :label="upgradeNowLabel"
+        classes="tw-flex-1"
+        :url="upsellProps.checkoutUrl"
+      />
+    </div>
+    <div v-else class="tw-flex tw-justify-center tw-items-center tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="success"
+        :label="getStartedLabel"
+        classes="tw-w-full"
+        :url="upsellProps.url"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    upsellProps: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      upgradeNowLabel: publishBrandPageModalTr('upgradeNowLabel')
+        ? publishBrandPageModalTr('upgradeNowLabel')
+        : 'Upgrade Now',
+      getStartedLabel: publishBrandPageModalTr('getStartedLabel')
+        ? publishBrandPageModalTr('getStartedLabel')
+        : 'Get Started',
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="tw-m-5">
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ upsellProps.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="upsellProps.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">
+      {{ upsellProps.subtitle }}
+    </div>
+    <div v-if="upsellProps.checkoutUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="primary"
+        :label="upgradeNowLabel"
+        classes="tw-flex-1"
+        :url="upsellProps.checkoutUrl"
+      />
+    </div>
+    <div v-else class="tw-flex tw-justify-center tw-items-center tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="success"
+        :label="getStartedLabel"
+        classes="tw-w-full"
+        :url="upsellProps.url"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    upsellProps: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      upgradeNowLabel: publishBrandPageModalTr('upgradeNowLabel')
+        ? publishBrandPageModalTr('upgradeNowLabel')
+        : 'Upgrade Now',
+      getStartedLabel: publishBrandPageModalTr('getStartedLabel')
+        ? publishBrandPageModalTr('getStartedLabel')
+        : 'Get Started',
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="tw-m-5">
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ upsellProps.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="upsellProps.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">
+      {{ upsellProps.subtitle }}
+    </div>
+    <div v-if="upsellProps.checkoutUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="primary"
+        :label="upgradeNowLabel"
+        classes="tw-flex-1"
+        :url="upsellProps.checkoutUrl"
+      />
+    </div>
+    <div v-else class="tw-flex tw-justify-center tw-items-center tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="success"
+        :label="getStartedLabel"
+        classes="tw-w-full"
+        :url="upsellProps.url"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    upsellProps: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      upgradeNowLabel: publishBrandPageModalTr('upgradeNowLabel')
+        ? publishBrandPageModalTr('upgradeNowLabel')
+        : 'Upgrade Now',
+      getStartedLabel: publishBrandPageModalTr('getStartedLabel')
+        ? publishBrandPageModalTr('getStartedLabel')
+        : 'Get Started',
+    };
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="tw-m-5">
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ upsellProps.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="upsellProps.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">
+      {{ upsellProps.subtitle }}
+    </div>
+    <div v-if="upsellProps.checkoutUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="primary"
+        :label="upgradeNowLabel"
+        classes="tw-flex-1"
+        :url="upsellProps.checkoutUrl"
+      />
+    </div>
+    <div v-else class="tw-flex tw-justify-center tw-items-center tw-mt-5">
+      <Button
+        :full-width="true"
+        variant="success"
+        :label="getStartedLabel"
+        classes="tw-w-full"
+        :url="upsellProps.url"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    upsellProps: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      upgradeNowLabel: publishBrandPageModalTr('upgradeNowLabel')
+        ? publishBrandPageModalTr('upgradeNowLabel')
+        : 'Upgrade Now',
+      getStartedLabel: publishBrandPageModalTr('getStartedLabel')
+        ? publishBrandPageModalTr('getStartedLabel')
+        : 'Get Started',
+    };
+  },
+};
+</script>

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",
+    "upgradeNowLabel": "Upgrade Now",
+    "getStartedLabel": "Get Started"
   },
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Free Domain",

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

@@ -1,5 +1,9 @@
 import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
+import UpgradeWebsite from '../../../atoms/components/Upsell/UpgradeWebsite.vue';
+import Website from '../../../atoms/components/Upsell/Website.vue';
+import DigitalBusinessCard from '../../../atoms/components/Upsell/DigitalBusinessCard.vue';
+import LinkInBio from '../../../atoms/components/Upsell/LinkInBio.vue';
 import { domains } from './__fixtures__/data';
 import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 
@@ -224,3 +228,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
+            :upsell-props="upgradeProps"
+          />
+      </PublishBrandPageModal>
+  `,
+  };
+};
+
+PublishedNoDomainsABtestUpgrade.loaders = [loadTranslationAsync];