@designcrowd/fe-shared-lib 1.5.9-kp-6 → 1.5.9-kp-4550-2

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

@@ -1,26 +1,24 @@
 {
-  "publishBrandPageModal": {
-    "firstTimePublishHeaderLabel": "Establece la URL para {{brandPageDisplayName}}",
-    "sitePublishedLabel": "¡Sitio publicado!",
-    "publishSuccessLabel": "¡Tu {{brandPageDisplayName}} está activo! Comienza a usar tu enlace:",
-    "freePublishCardTitleLabel": "Dirección gratuita",
-    "freePublishCardDescriptionLabel": "Elige una dirección gratuita para publicar ahora. Siempre puedes editar la URL más tarde",
-    "slugInputPlaceholderYourNameLabel": "tu-nombre",
-    "slugInputPlaceholderYourBusinessNameLabel": "nombre-de-tu-negocio",
-    "freeDomainLabel": "Dominio gratis",
-    "purchasedDomainLabel": "Dominio adquirido",
-    "setUrlLabel": "Establece URL",
-    "publishLabel": "Publicar",
-    "viewMoreDomainLabel": "VER MÁS DOMINIOS",
-    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
-    "copyLabel": "Copiar",
-    "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",
-    "websiteFriendlyName": "Sitio web",
-    "digitalBusinessCardFriendlyName": "Tarjeta de visita digital",
-    "alreadyHaveADomainLabel": "¿Ya tienes un dominio?",
-    "useExistingDomainLabel": "Usa el dominio existente"
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Establece la URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "¡Sitio publicado!",
+    "publishSuccessLabel" : "¡Tu {{brandPageDisplayName}} está activo! Comienza a usar tu enlace:",
+    "freePublishCardTitleLabel" : "Dirección gratuita",
+    "freePublishCardDescriptionLabel" : "Elige una dirección gratuita para publicar ahora. Siempre puedes editar la URL más tarde",
+    "slugInputPlaceholderYourNameLabel" : "tu-nombre",
+    "slugInputPlaceholderYourBusinessNameLabel" : "nombre-de-tu-negocio",
+    "freeDomainLabel" : "Dominio gratis",
+    "purchasedDomainLabel" : "Dominio adquirido",
+    "setUrlLabel" : "Establece URL",
+    "publishLabel" : "Publicar",
+    "viewMoreDomainLabel" : "VER MÁS DOMINIOS",
+    "viewMyWebsiteLabel" : "Ver {{brandPageDisplayName}}",
+    "copyLabel" : "Copiar",
+    "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",
+    "websiteFriendlyName" : "Sitio web",
+    "digitalBusinessCardFriendlyName" : "Tarjeta de visita digital"
   }
 }

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

@@ -1,26 +1,24 @@
 {
-  "publishBrandPageModal": {
-    "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",
-    "sitePublishedLabel": "Site publié !",
-    "publishSuccessLabel": "Votre {{brandPageDisplayName}} est en ligne ! Commencez à utiliser votre lien :",
-    "freePublishCardTitleLabel": "Adresse libre",
-    "freePublishCardDescriptionLabel": "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
-    "slugInputPlaceholderYourNameLabel": "your-name",
-    "slugInputPlaceholderYourBusinessNameLabel": "nom-de-votre-entreprise",
-    "freeDomainLabel": "Domaine gratuit",
-    "purchasedDomainLabel": "Domaine acheté",
-    "setUrlLabel": "Définir l'URL",
-    "publishLabel": "Publier",
-    "viewMoreDomainLabel": "VOIR PLUS DE NOMS DE DOMAINE",
-    "viewMyWebsiteLabel": "Voir {{brandPageDisplayName}}",
-    "copyLabel": "Copier",
-    "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",
-    "websiteFriendlyName": "Site Web",
-    "digitalBusinessCardFriendlyName": "Carte professionnelle numérique",
-    "alreadyHaveADomainLabel": "Vous avez déjà un domaine?",
-    "useExistingDomainLabel": "Utiliser un domaine existant"
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Définissez l'URL pour {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publié !",
+    "publishSuccessLabel" : "Votre {{brandPageDisplayName}} est en ligne ! Commencez à utiliser votre lien :",
+    "freePublishCardTitleLabel" : "Adresse libre",
+    "freePublishCardDescriptionLabel" : "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
+    "slugInputPlaceholderYourNameLabel" : "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel" : "nom-de-votre-entreprise",
+    "freeDomainLabel" : "Domaine gratuit",
+    "purchasedDomainLabel" : "Domaine acheté",
+    "setUrlLabel" : "Définir l'URL",
+    "publishLabel" : "Publier",
+    "viewMoreDomainLabel" : "VOIR PLUS DE NOMS DE DOMAINE",
+    "viewMyWebsiteLabel" : "Voir {{brandPageDisplayName}}",
+    "copyLabel" : "Copier",
+    "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",
+    "websiteFriendlyName" : "Site Web",
+    "digitalBusinessCardFriendlyName" : "Carte professionnelle numérique"
   }
 }

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

@@ -1,26 +1,24 @@
 {
-  "publishBrandPageModal": {
-    "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",
-    "sitePublishedLabel": "Site publié !",
-    "publishSuccessLabel": "Votre {{brandPageDisplayName}} est en ligne ! Commencez à utiliser votre lien :",
-    "freePublishCardTitleLabel": "Adresse libre",
-    "freePublishCardDescriptionLabel": "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
-    "slugInputPlaceholderYourNameLabel": "your-name",
-    "slugInputPlaceholderYourBusinessNameLabel": "nom-de-votre-entreprise",
-    "freeDomainLabel": "Domaine gratuit",
-    "purchasedDomainLabel": "Domaine acheté",
-    "setUrlLabel": "Définir l'URL",
-    "publishLabel": "Publier",
-    "viewMoreDomainLabel": "VOIR PLUS DE NOMS DE DOMAINE",
-    "viewMyWebsiteLabel": "Voir {{brandPageDisplayName}}",
-    "copyLabel": "Copier",
-    "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",
-    "websiteFriendlyName": "Site Web",
-    "digitalBusinessCardFriendlyName": "Carte de visite numérique",
-    "alreadyHaveADomainLabel": "Vous avez déjà un domaine ?",
-    "useExistingDomainLabel": "Utiliser un domaine existant"
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Définissez l'URL pour {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publié !",
+    "publishSuccessLabel" : "Votre {{brandPageDisplayName}} est en ligne ! Commencez à utiliser votre lien :",
+    "freePublishCardTitleLabel" : "Adresse libre",
+    "freePublishCardDescriptionLabel" : "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
+    "slugInputPlaceholderYourNameLabel" : "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel" : "nom-de-votre-entreprise",
+    "freeDomainLabel" : "Domaine gratuit",
+    "purchasedDomainLabel" : "Domaine acheté",
+    "setUrlLabel" : "Définir l'URL",
+    "publishLabel" : "Publier",
+    "viewMoreDomainLabel" : "VOIR PLUS DE NOMS DE DOMAINE",
+    "viewMyWebsiteLabel" : "Voir {{brandPageDisplayName}}",
+    "copyLabel" : "Copier",
+    "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",
+    "websiteFriendlyName" : "Site Web",
+    "digitalBusinessCardFriendlyName" : "Carte de visite numérique"
   }
 }

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

@@ -19,8 +19,6 @@
     "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
     "selectDomainDropdownPlaceholder": "Select domain name",
     "websiteFriendlyName": "Website",
-    "digitalBusinessCardFriendlyName": "Digital Business Card",
-    "alreadyHaveADomainLabel": "Already have a domain?",
-    "useExistingDomainLabel": "Use my existing domain"
+    "digitalBusinessCardFriendlyName": "Digital Business Card"
   }
 }

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

@@ -1,26 +1,24 @@
 {
-  "publishBrandPageModal": {
-    "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",
-    "sitePublishedLabel": "Site publicado!",
-    "publishSuccessLabel": "Seu {{brandPageDisplayName}} está ativo! Comece a usar seu link:",
-    "freePublishCardTitleLabel": "Endereço gratuito",
-    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Você pode editar o URL depois",
-    "slugInputPlaceholderYourNameLabel": "Seu nome",
-    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
-    "freeDomainLabel": "Domínio gratuito",
-    "purchasedDomainLabel": "Domínio comprado",
-    "setUrlLabel": "Definir URL",
-    "publishLabel": "Publicar",
-    "viewMoreDomainLabel": "Ver mais domínios",
-    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
-    "copyLabel": "Copiar",
-    "copySuccessLabel": "Copiado!",
-    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
-    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado. Talvez depois",
-    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio",
-    "websiteFriendlyName": "Site",
-    "digitalBusinessCardFriendlyName": "Cartão de visita digital",
-    "alreadyHaveADomainLabel": "Já tem um domínio?",
-    "useExistingDomainLabel": "Usar domínio existente"
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publicado!",
+    "publishSuccessLabel" : "Seu {{brandPageDisplayName}} está ativo! Comece a usar seu link:",
+    "freePublishCardTitleLabel" : "Endereço gratuito",
+    "freePublishCardDescriptionLabel" : "Escolha um endereço gratuito para publicar agora. Você pode editar o URL depois",
+    "slugInputPlaceholderYourNameLabel" : "Seu nome",
+    "slugInputPlaceholderYourBusinessNameLabel" : "nome-da-sua-empresa",
+    "freeDomainLabel" : "Domínio gratuito",
+    "purchasedDomainLabel" : "Domínio comprado",
+    "setUrlLabel" : "Definir URL",
+    "publishLabel" : "Publicar",
+    "viewMoreDomainLabel" : "Ver mais domínios",
+    "viewMyWebsiteLabel" : "Ver {{brandPageDisplayName}}",
+    "copyLabel" : "Copiar",
+    "copySuccessLabel" : "Copiado!",
+    "publishedSuccessDescriptionLabel" : "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel" : "Não, obrigado. Talvez depois",
+    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio",
+    "websiteFriendlyName" : "Site",
+    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
   }
 }

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

@@ -1,26 +1,24 @@
 {
-  "publishBrandPageModal": {
-    "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",
-    "sitePublishedLabel": "Site publicado!",
-    "publishSuccessLabel": "A sua página {{brandPageDisplayName}} está ativa! Comece a utilizar o link:",
-    "freePublishCardTitleLabel": "Endereço gratuito",
-    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
-    "slugInputPlaceholderYourNameLabel": "o-seu-nome",
-    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
-    "freeDomainLabel": "Domínio gratuito",
-    "purchasedDomainLabel": "Domínio comprado",
-    "setUrlLabel": "Definir URL",
-    "publishLabel": "Publicar",
-    "viewMoreDomainLabel": "VER MAIS DOMÍNIOS",
-    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
-    "copyLabel": "Copiar",
-    "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",
-    "websiteFriendlyName": "Website",
-    "digitalBusinessCardFriendlyName": "Cartão de visita digital",
-    "alreadyHaveADomainLabel": "Já tem um domínio?",
-    "useExistingDomainLabel": "Utilizar domínio existente"
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publicado!",
+    "publishSuccessLabel" : "A sua página {{brandPageDisplayName}} está ativa! Comece a utilizar o link:",
+    "freePublishCardTitleLabel" : "Endereço gratuito",
+    "freePublishCardDescriptionLabel" : "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
+    "slugInputPlaceholderYourNameLabel" : "o-seu-nome",
+    "slugInputPlaceholderYourBusinessNameLabel" : "nome-da-sua-empresa",
+    "freeDomainLabel" : "Domínio gratuito",
+    "purchasedDomainLabel" : "Domínio comprado",
+    "setUrlLabel" : "Definir URL",
+    "publishLabel" : "Publicar",
+    "viewMoreDomainLabel" : "VER MAIS DOMÍNIOS",
+    "viewMyWebsiteLabel" : "Ver {{brandPageDisplayName}}",
+    "copyLabel" : "Copiar",
+    "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",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
   }
 }

package/src/experiences/components/PublishBrandPageModal/views/PublishWhenNoDomainsView.vue

@@ -46,14 +46,6 @@
     <div class="tw-mt-4">
       <slot name="recommended" />
     </div>
-    <div class="tw-m-4 tw-text-center">
-      <p :class="{ 'tw-text-grayscale-600': isDesignCom }">
-        {{ alreadyHaveADomainLabel }}
-        <a href="#" class="tw-text-primary-500 hover:tw-text-primary-600" @click.prevent="onUseExistingDomain">{{
-          useExistingDomainLabel
-        }}</a>
-      </p>
-    </div>
   </div>
 </template>
 <script>
@@ -115,7 +107,7 @@ export default {
       default: '',
     },
   },
-  emits: ['internal-publish-brand-page', 'on-slug-changed', 'on-use-existing-domain'],
+  emits: ['internal-publish-brand-page', 'on-slug-changed'],
   setup() {
     return {
       publishBrandPageModalTr,
@@ -124,8 +116,6 @@ export default {
       slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
       slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
       publishLabel: publishBrandPageModalTr('publishLabel'),
-      alreadyHaveADomainLabel: publishBrandPageModalTr('alreadyHaveADomainLabel'),
-      useExistingDomainLabel: publishBrandPageModalTr('useExistingDomainLabel'),
     };
   },
   data() {
@@ -173,9 +163,6 @@ export default {
     onPublish() {
       this.$emit('internal-publish-brand-page', this.internalSlug);
     },
-    onUseExistingDomain() {
-      this.$emit('on-use-existing-domain');
-    },
   },
 };
 </script>

package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.stories.js

@@ -0,0 +1,157 @@
+import WebsiteContextualUpgradeModal from './WebsiteContextualUpgradeModal.vue';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
+
+export default {
+  title: 'Components/WebsitesContextualUpgradeModal',
+  component: WebsiteContextualUpgradeModal,
+};
+
+const locale = 'en-US';
+
+const loadTranslationAsync = async () => {
+  await setSharedLibLocaleAsync(locale);
+};
+
+export const UpgradeToAddPage = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/add-page',
+      brandPageType: 'brandContact',
+      contentType: 'AddPage',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToAddPage.loaders = [loadTranslationAsync];
+
+export const UpgradeToContactForm = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/contact-form',
+      brandPageType: 'brandContact',
+      contentType: 'ContactForm',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToContactForm.loaders = [loadTranslationAsync];
+
+export const UpgradeToMaps = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/maps',
+      brandPageType: 'brandContact',
+      contentType: 'Maps',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToMaps.loaders = [loadTranslationAsync];
+
+export const UpgradeToVideos = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/videos',
+      brandPageType: 'brandContact',
+      contentType: 'Videos',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToVideos.loaders = [loadTranslationAsync];
+
+export const UpgradeToRemoveWatermark = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/remove-watermark',
+      brandPageType: 'brandContact',
+      contentType: 'RemoveWatermark',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToRemoveWatermark.loaders = [loadTranslationAsync];
+
+export const UpgradeToPublish = () => ({
+  components: { WebsiteContextualUpgradeModal },
+  data() {
+    return {
+      isUpgradeModalVisible: true,
+      isDesignCom: true,
+      upgradeUrl: 'https://brand.site/upgrade/publish',
+      brandPageType: 'brandContact',
+      contentType: 'Publish',
+    };
+  },
+  template: `
+    <WebsiteContextualUpgradeModal
+      :is-upgrade-modal-visible="isUpgradeModalVisible"
+      :is-design-com="isDesignCom"
+      :upgrade-url="upgradeUrl"
+      :brand-page-type="brandPageType"
+      :content-type="contentType"
+    />
+  `,
+});
+
+UpgradeToPublish.loaders = [loadTranslationAsync];

package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue

@@ -0,0 +1,135 @@
+<template>
+  <Modal
+    :visible="props.isUpgradeModalVisible"
+    full-screen-breakpoint="sm"
+    :show-modal-background-image="!isDesignCom"
+    classes="tw-max-w-3xl tw-p-8"
+    @close-modal="closeUpgradeModal"
+  >
+    <div class="tw-flex tw-flex-col tw-text-black">
+      <div class="tw-flex tw-flex-col tw-pb-16 md:tw-pb-0">
+        <Icon
+          v-if="iconName"
+          :name="iconName"
+          :view-box="'0 0 100 100'"
+          size="5xl"
+          :class="{
+            'tw-text-primary-500': isDesignCom,
+            'tw-text-white': !isDesignCom,
+          }"
+          class="tw-mb-4"
+        />
+        <h2 v-if="titleText" class="tw-font-bold tw-text-3xl tw-mb-2">
+          {{ titleText }}
+        </h2>
+        <span class="tw-text-grayscale-600 tw-mb-2" v-html="descriptionText" />
+        <br />
+        <p class="tw-font-bold">{{ websiteContextualUpgradeModalTr('premiumUpgradeNote') }}</p>
+        <div class="tw-flex tw-flex-col md:tw-flex-row tw-mt-2">
+          <div
+            class="tw-order-last md:tw-order-first tw-w-full md:tw-w-3/4 tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4"
+          >
+            <div v-for="(feature, i) in features" :key="i" class="tw-flex tw-items-center tw-text-sm tw-rounded-md">
+              <Icon class="tw-text-success-500" name="check" size="sm" />
+              <span class="tw-ml-2 tw-text-grayscale-600" v-html="feature" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-bar tw-mt-4 tw-bg-grayscale-200">
+        <div class="bottom-bar tw-mt-6 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2">
+          <div class="button-size md:tw-flex-1">
+            <Button
+              data-test-upgrade-button
+              :label="upgradeButtonText"
+              size="medium"
+              :variant="'primary'"
+              icon="chevron-right-wide"
+              :url="upgradeUrl"
+              classes="tw-w-full"
+              @on-click="onUpgradeClick"
+            />
+          </div>
+          <div class="md:tw-flex-1 md:tw-max-w-40 tw-mt-3 md:tw-mt-0">
+            <Button
+              data-test-upgrade-button
+              :label="websiteContextualUpgradeModalTr('closeButtonText')"
+              size="medium"
+              :variant="'no-border'"
+              :url="upgradeUrl"
+              classes="tw-w-full"
+              @on-click="closeUpgradeModal"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup lang="ts">
+import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+import { websiteContextualUpgradeModalTr } from '../../../useSharedLibTranslate';
+import { Ref, ref } from 'vue';
+import unescape from 'lodash/unescape';
+
+const titleText: Ref<string> = ref('');
+const descriptionText: Ref<string> = ref('');
+const iconName: Ref<string> = ref('');
+const upgradeButtonText: Ref<string> = ref('');
+const features: Ref<string[]> = ref([]);
+
+const props = defineProps<{
+  isUpgradeModalVisible: boolean;
+  isDesignCom: boolean;
+  upgradeUrl: string;
+  brandPageType: string;
+  contentType: string | 'ContactForm' | 'Videos' | 'Maps' | 'AddPage' | 'Publish' | 'RemoveWatermark';
+}>();
+const toKebabCase = (value: string) =>
+  value
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase();
+
+const initModalContent = (websiteName: string) => {
+  const titleForIcon = `upgradeTo${props.contentType}`;
+  iconName.value = `websites-${toKebabCase(titleForIcon)}`;
+
+  titleText.value = websiteContextualUpgradeModalTr(`${titleForIcon}Title`);
+  descriptionText.value = websiteContextualUpgradeModalTr(`upgradeTo${props.contentType}Description`);
+  upgradeButtonText.value = websiteContextualUpgradeModalTr('upgradeButtonText');
+
+  features.value = [
+    websiteContextualUpgradeModalTr('featureCustomerCare'),
+    websiteContextualUpgradeModalTr('featureCustomDomain'),
+    websiteContextualUpgradeModalTr('featureNoWatermark', { websiteName }),
+    websiteContextualUpgradeModalTr('featureUnlimitedPages'),
+    websiteContextualUpgradeModalTr('featurePremiumContent'),
+    unescape(websiteContextualUpgradeModalTr('featureCancelAnytime')),
+    websiteContextualUpgradeModalTr('featureStore'),
+  ];
+};
+
+const websiteName = props.isDesignCom ? 'Design.com' : 'BrandCrowd';
+initModalContent(websiteName);
+
+const emit = defineEmits<{
+  'on-close-upgrade-modal': [];
+  'on-upgrade-button-clicked': [];
+}>();
+
+const closeUpgradeModal = () => {
+  emit('on-close-upgrade-modal');
+};
+
+const onUpgradeClick = () => {
+  emit('on-upgrade-button-clicked');
+};
+</script>
+<style scoped>
+.button-size {
+  @apply tw-w-full md:tw-max-w-40;
+}
+</style>

package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.de-DE.json

@@ -0,0 +1,26 @@
+{
+  "websiteContextualUpgradeModal": {
+    "upgradeButtonText": "Upgrade Now",
+    "closeButtonText": "No Thanks",
+    "upgradeToAddPageTitle": "Upgrade to add more pages",
+    "upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
+    "upgradeToContactFormTitle": "Upgrade to unlock contact form",
+    "upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
+    "upgradeToMapsTitle": "Upgrade to unlock maps",
+    "upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
+    "upgradeToVideosTitle": "Upgrade to unlock videos",
+    "upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
+    "upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
+    "upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
+    "upgradeToPublishTitle": "Upgrade to publish your site",
+    "upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
+    "featureCustomerCare": "24/7 customer care",
+    "featureCustomDomain": "Connect a custom domain",
+    "featureNoWatermark": "No {{websiteName}} watermark",
+    "featureUnlimitedPages": "Unlimited pages",
+    "featurePremiumContent": "Contact forms, videos and maps",
+    "featureStore": "Basic online store",
+    "featureCancelAnytime": "<div class=\"tw-text-success-500\"><strong>Cancel anytime</strong></div>",
+    "premiumUpgradeNote": "With Premium, you'll get:"
+  }
+}

package/src/experiences/components/WebsitesContextualUpgradeModal/i18n/website-contextual-upgrade-modal.es-ES.json

@@ -0,0 +1,26 @@
+{
+  "websiteContextualUpgradeModal": {
+    "upgradeButtonText": "Upgrade Now",
+    "closeButtonText": "No Thanks",
+    "upgradeToAddPageTitle": "Upgrade to add more pages",
+    "upgradeToAddPageDescription": "You've reached the free page limit. Upgrade to keep building your site and access all premium features.",
+    "upgradeToContactFormTitle": "Upgrade to unlock contact form",
+    "upgradeToContactFormDescription": "Let visitors reach you directly. Upgrade to add a contact form to your site and access all premium features.",
+    "upgradeToMapsTitle": "Upgrade to unlock maps",
+    "upgradeToMapsDescription": "Help visitors find you easily. Upgrade to embed interactive maps to your site and access all premium features.",
+    "upgradeToVideosTitle": "Upgrade to unlock videos",
+    "upgradeToVideosDescription": "Bring your content to life. Upgrade to embed and play videos to your site and access all premium features.",
+    "upgradeToRemoveWatermarkTitle": "Upgrade to remove watermark",
+    "upgradeToRemoveWatermarkDescription": "Make it truly yours. Upgrade to remove our watermark from your site and access all premium features.",
+    "upgradeToPublishTitle": "Upgrade to publish your site",
+    "upgradeToPublishDescription": "Each subscription lets you publish one website. Add another subscription to publish this site and access all premium features.",
+    "featureCustomerCare": "24/7 customer care",
+    "featureCustomDomain": "Connect a custom domain",
+    "featureNoWatermark": "No {{websiteName}} watermark",
+    "featureUnlimitedPages": "Unlimited pages",
+    "featurePremiumContent": "Contact forms, videos and maps",
+    "featureStore": "Basic online store",
+    "featureCancelAnytime": "<div class=\"tw-text-success-500\"><strong>Cancel anytime</strong></div>",
+    "premiumUpgradeNote": "With Premium, you'll get:"
+  }
+}