@designcrowd/fe-shared-lib 1.2.2-data-id-2 → 1.2.2-ml-jj-1

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -12,10 +12,10 @@
                 {{ title }}
               </p>
               <span
-                v-if="showLabel"
+                v-if="pillLabel"
                 class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
               >
-                Recommended
+                {{ pillLabel }}
               </span>
             </div>
             <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
@@ -27,15 +27,15 @@
           </div>
           <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
             <Button
-              label="Search"
+              :label="searchButtonLabel"
               class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
               data-test-brand-page-search-button
               variant="primary"
               size="small-medium"
-              @on-click="onClick"
               :class="{
                 'tw-uppercase': !isDesignCom,
               }"
+              @on-click="onClick"
             />
           </div>
         </div>
@@ -47,23 +47,23 @@
       </div>
       <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
         <Button
-          label="Search"
+          :label="searchButtonLabel"
           class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
           data-test-brand-page-search-button
           variant="primary"
           size="small-medium"
           :full-width="true"
-          @on-click="onClick"
           :class="{
             'tw-uppercase': !isDesignCom,
           }"
+          @on-click="onClick"
         />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 const props = defineProps({
   title: {
@@ -86,9 +86,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  showLabel: {
-    type: Boolean,
-    default: false,
+  searchButtonLabel: {
+    type: String,
+    default: () => 'Search',
+  },
+  pillLabel: {
+    type: String,
+    default: null,
   },
 });
 

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

@@ -1,12 +1,20 @@
 import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
 import { domains } from './__fixtures__/data';
+import { setLocaleAsync } from '../../../useSharedLibTranslate';
 
 export default {
   title: 'Components/PublishBrandPageModal',
   component: PublishBrandPageModal,
 };
 
+const locale = 'en-US';
+
+const loadTranslationAsync = async () => {
+  console.log('HERE');
+  await setLocaleAsync(locale);
+};
+
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -15,6 +23,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
+        show: false,
       };
     },
     methods: {},
@@ -34,6 +43,8 @@ export const NotPublishedWithPurchasedDomains = () => {
   };
 };
 
+NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
+
 export const PublishWithSelectedDomain = () => {
   return {
     components: {
@@ -75,6 +86,8 @@ export const PublishWithSelectedDomain = () => {
   };
 };
 
+PublishWithSelectedDomain.loaders = [loadTranslationAsync];
+
 export const SetSlug = () => {
   return {
     components: {
@@ -101,6 +114,9 @@ export const SetSlug = () => {
     `,
   };
 };
+
+SetSlug.loaders = [loadTranslationAsync];
+
 export const Published = () => {
   return {
     components: {
@@ -126,6 +142,9 @@ export const Published = () => {
     `,
   };
 };
+
+Published.loaders = [loadTranslationAsync];
+
 export const PublishedNoDomains = () => {
   return {
     components: {
@@ -153,6 +172,9 @@ export const PublishedNoDomains = () => {
   `,
   };
 };
+
+PublishedNoDomains.loaders = [loadTranslationAsync];
+
 export const Free = () => {
   return {
     components: {
@@ -201,3 +223,5 @@ export const Free = () => {
     `,
   };
 };
+
+Free.loaders = [loadTranslationAsync];

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

@@ -11,15 +11,15 @@
     >
       <template #header>
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
-          <span>Set the URL for your {{ brandPageDisplayName }}</span>
+          <span>{{ firstTimePublishHeaderLabel }}</span>
         </div>
         <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
-          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">Site published!</p>
+          <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">
-            Your {{ brandPageDisplayName }} is live! Start using your link:
+            {{ publishSuccessLabel }}
           </p>
           <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ headerSubtitle }}
+            {{ publishedSuccessDescriptionLabel }}
           </p>
         </div>
       </template>
@@ -44,15 +44,15 @@
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
-              <span class="tw-inline-block tw-rounded-full">Free domain</span>
+              <span class="tw-inline-block tw-rounded-full">{{ freeDomainLabel }}</span>
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
               :img-url="iconUrl"
-              title="Free Address"
-              description="Choose a free address to publish now. You can always edit the URL later"
+              :title="freePublishCardTitleLabel"
+              :description="freePublishCardDescriptionLabel"
               :is-design-com="isDesignCom"
               :has-search-button="false"
             >
@@ -78,7 +78,7 @@
                     </div>
                   </div>
                   <Button
-                    label="Publish"
+                    :label="publishLabel"
                     :disabled="isPublishingDisabled"
                     class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
                     data-test-brand-page-publish-button
@@ -128,7 +128,7 @@
                   for="domain-type"
                   class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
                 >
-                  <span class="tw-inline-block tw-rounded-full">Purchased domain</span>
+                  <span class="tw-inline-block tw-rounded-full">{{ purchasedDomainLabel }}</span>
                 </label>
               </div>
               <div class="tw-mt-4 domain-dropdown">
@@ -167,7 +167,7 @@
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
             <Button
-              :label="isSlugEditMode ? 'Set URL' : 'Publish'"
+              :label="isSlugEditMode ? setUrlLabel : publishLabel"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               :disabled="isPublishingDisabled"
@@ -177,7 +177,7 @@
               @on-click="onPublish"
             />
             <Button
-              label="No thanks, maybe later"
+              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
               variant="no-border"
               size="large"
               class="tw-my-4"
@@ -200,7 +200,7 @@
               />
             </div>
             <Button
-              label="VIEW MORE DOMAINS"
+              :label="viewMoreDomainLabel"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -211,11 +211,13 @@
             <TextCopyField
               button-variant="secondary"
               :text="brandPageUrl"
+              :default-copy-button-text="copyLabel"
+              :copied-button-text="copySuccessLabel"
               data-test-brand-page-copy-input
               @on-click="onCopyUrlClick"
             />
             <Button
-              :label="`View ${brandPageDisplayName}`"
+              :label="viewMyWebsiteLabel"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               size="medium"
@@ -246,7 +248,6 @@
   </div>
 </template>
 <script>
-import { computed } from 'vue';
 import Modal from '../../../atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.vue';
 import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
@@ -262,8 +263,6 @@ import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
 import { tr } from '../../../useSharedLibTranslate';
 
-const headerSubtitle = 'Buy matching domain name for your brand';
-
 const DOMAIN_TYPES = {
   slug: 'slug',
   purchased: 'purchased',
@@ -402,7 +401,7 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: false,
+      default: '',
     },
   },
   emits: [
@@ -418,7 +417,20 @@ export default {
   setup() {
     return {
       tr,
-      testMessage: computed(() => tr('publishModal.test')),
+      sitePublishedLabel: tr('publishBrandPageModal.sitePublishedLabel'),
+      freePublishCardTitleLabel: tr('publishBrandPageModal.freePublishCardTitleLabel'),
+      freePublishCardDescriptionLabel: tr('publishBrandPageModal.freePublishCardDescriptionLabel'),
+      slugInputPlaceholderYourNameLabel: tr('publishBrandPageModal.slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: tr('publishBrandPageModal.slugInputPlaceholderYourBusinessNameLabel'),
+      freeDomainLabel: tr('publishBrandPageModal.freeDomainLabel'),
+      purchasedDomainLabel: tr('publishBrandPageModal.purchasedDomainLabel'),
+      setUrlLabel: tr('publishBrandPageModal.setUrlLabel'),
+      publishLabel: tr('publishBrandPageModal.publishLabel'),
+      viewMoreDomainLabel: tr('publishBrandPageModal.viewMoreDomainLabel'),
+      copyLabel: tr('publishBrandPageModal.copyLabel'),
+      copySuccessLabel: tr('publishBrandPageModal.copySuccessLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: tr('publishBrandPageModal.hasAlreadyPurchasedDomainCloseButtonLabel'),
+      publishedSuccessDescriptionLabel: tr('publishBrandPageModal.publishedSuccessDescriptionLabel'),
     };
   },
   data() {
@@ -427,7 +439,6 @@ export default {
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
-      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -438,6 +449,22 @@ export default {
     };
   },
   computed: {
+    firstTimePublishHeaderLabel() {
+      console.log('aaa', this.brandPageDisplayName);
+      return this.tr('publishBrandPageModal.firstTimePublishHeaderLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    publishSuccessLabel() {
+      return this.tr('publishBrandPageModal.publishSuccessLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    viewMyWebsiteLabel() {
+      return this.tr('publishBrandPageModal.viewMyWebsiteLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
     allowPublish() {
       if (this.domainTypeValue === DOMAIN_TYPES.slug) {
         return this.internalSlug && !this.slugValidationError;
@@ -466,7 +493,9 @@ export default {
       return !this.allowPublish || this.isPublishing;
     },
     getPlaceHolder() {
-      return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
+      return this.brandPageType === 'brandContact'
+        ? this.slugInputPlaceholderYourNameLabel
+        : this.slugInputPlaceholderYourBusinessNameLabel;
     },
   },
   watch: {

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

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Legen Sie die URL für Ihre {{brandPageDisplayName}} fest",
+        "sitePublishedLabel": "Seite veröffentlicht!",
+        "publishSuccessLabel": "Ihre {{brandPageDisplayName}} ist live! Beginnen Sie mit der Nutzung Ihres Links:",
+        "freePublishCardTitleLabel": "Freie Adresse",
+        "freePublishCardDescriptionLabel": "Wählen Sie jetzt eine kostenlose Adresse zur Veröffentlichung aus. Sie können die URL später jederzeit bearbeiten",
+        "slugInputPlaceholderYourNameLabel": "ihr-name",
+        "slugInputPlaceholderYourBusinessNameLabel": "ihr-firmen-name",
+        "freeDomainLabel": "Kostenlose Domain",
+        "purchasedDomainLabel": "Erworbene Domain",
+        "setUrlLabel": "URL festlegen",
+        "publishLabel": "Veröffentlichen",
+        "viewMoreDomainLabel": "WEITERE DOMAINS ANZEIGEN",
+        "viewMyWebsiteLabel": "{{brandPageDisplayName}} anzeigen",
+        "copyLabel": "Kopieren",
+        "copySuccessLabel": "Kopiert!",
+        "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später"
+    }
+}

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

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Define la URL de tu sitio {{brandPageDisplayName}}",
+        "sitePublishedLabel": "¡Sitio publicado!",
+        "publishSuccessLabel": "¡Tu sitio {{brandPageDisplayName}} está online! Comienza a usar el 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 sitio {{brandPageDisplayName}}",
+        "copyLabel": "Copiar",
+        "copySuccessLabel": "¡Copiado!",
+        "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde"
+    }
+}

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

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Définissez l'URL de votre site {{brandPageDisplayName}}",
+        "sitePublishedLabel": "Site publié !",
+        "publishSuccessLabel": "Votre site {{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 le site {{brandPageDisplayName}}",
+        "copyLabel": "Copier",
+        "copySuccessLabel": "Copié!",
+        "publishedSuccessDescriptionLabel": "Achetez un nom de domaine correspondant à votre marque",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "Non merci, peut-être plus tard"
+    }
+}

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

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",
+        "sitePublishedLabel": "Site published!",
+        "publishSuccessLabel": "Your {{brandPageDisplayName}} is live! Start using your link:",
+        "freePublishCardTitleLabel": "Free Address",
+        "freePublishCardDescriptionLabel": "Choose a free address to publish now. You can always edit the URL later",
+        "slugInputPlaceholderYourNameLabel": "your-name",
+        "slugInputPlaceholderYourBusinessNameLabel": "your-business-name",
+        "freeDomainLabel": "Free domain",
+        "purchasedDomainLabel": "Purchased domain",
+        "setUrlLabel": "Set URL",
+        "publishLabel": "Publish",
+        "viewMoreDomainLabel": "VIEW MORE DOMAINS",
+        "viewMyWebsiteLabel": "View {{brandPageDisplayName}}",
+        "copyLabel": "Copy",
+        "copySuccessLabel": "Copied!",
+        "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later"
+    }
+}

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

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Defina o URL do seu {{brandPageDisplayName}}",
+        "sitePublishedLabel": "Site publicado!",
+        "publishSuccessLabel": "O seu {{brandPageDisplayName}} está ativo! Comece a usar o seu 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"
+    }
+}

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -22,7 +22,7 @@
             {{ item.domainName }}
           </div>
           <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
-            <span class="tw-mr-2"> Cost Price: </span>
+            <span class="tw-mr-2"> {{ costPriceLabel }} </span>
             <Price
               class="tw-font-bold"
               :amount="getCostPrice(item)"
@@ -30,7 +30,7 @@
               :currency="currency"
               fraction="2"
               :show-abbreviation="false"
-              suffix="/yr"
+              :suffix="pricePerYearLabel"
             />
           </div>
           <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
@@ -41,7 +41,7 @@
               :currency="currency"
               fraction="2"
               :show-abbreviation="false"
-              suffix="/yr"
+              :suffix="pricePerYearLabel"
             />
           </div>
         </div>
@@ -63,10 +63,10 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Price from '../../../../src/atoms/components/Price/Price.vue';
-
+import Button from '../../../atoms/components/Button/Button.vue';
+import Price from '../../../atoms/components/Price/Price.vue';
 import Events from '../../constants/event-constants';
+import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -108,6 +108,14 @@ export default {
     },
   },
   emits: ['load-more-domains'],
+  setup() {
+    return {
+      freeDomainButtonLabel: tr('sellDomainNameList.freeDomainButtonLabel'),
+      buyNowButtonLabel: tr('sellDomainNameList.buyNowButtonLabel'),
+      pricePerYearLabel: tr('sellDomainNameList.pricePerYearLabel'),
+      costPriceLabel: tr('sellDomainNameList.costPriceLabel'),
+    };
+  },
   methods: {
     onBuyNowClick(domain) {
       const request = domain;
@@ -134,7 +142,7 @@ export default {
       return parseFloat(domain.price) === 0;
     },
     getPurchaseLabel(domain) {
-      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
+      return this.isFree(domain) ? this.freeDomainButtonLabel : this.buyNowButtonLabel;
     },
   },
 };

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.de-DE.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameList": {
+        "freeDomainButtonLabel": "Kostenlose Domain",
+        "buyNowButtonLabel": "Jetzt kaufen",
+        "pricePerYearLabel": "/yr",
+        "costPriceLabel": "Kostenpreis:"
+    }
+}

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.es-ES.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameList": {
+        "freeDomainButtonLabel": "Dominio gratis",
+        "buyNowButtonLabel": "Comprar ahora",
+        "pricePerYearLabel": "/yr",
+        "costPriceLabel": "Precio de coste:"
+    }
+}

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.fr-FR.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameList": {
+        "freeDomainButtonLabel": "Domaine gratuit",
+        "buyNowButtonLabel": "Acheter",
+        "pricePerYearLabel": "/yr",
+        "costPriceLabel": "Prix de revient:"
+    }
+}

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameList": {
+        "freeDomainButtonLabel": "Free Domain",
+        "buyNowButtonLabel": "Buy Now",
+        "pricePerYearLabel": "/yr",
+        "costPriceLabel": "Cost Price:"
+    }
+}

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.pt-PT.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameList": {
+        "freeDomainButtonLabel": "Domínio gratuito",
+        "buyNowButtonLabel": "Comprar Agora",
+        "pricePerYearLabel": "/yr",
+        "costPriceLabel": "Preço de Custo:"
+    }
+}

package/src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue

@@ -13,8 +13,8 @@
       <SellDomainNameSearch
         v-if="visible"
         :is-design-com="isDesignCom"
-        :header-title="headerTitle"
-        :header-subtitle="headerSubtitle"
+        :header-title="headerTitle || domainSearchHeaderTitle"
+        :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
         :initial-search-term="modelValue"
         @onSearch="onSearch"
         @onSearchTextInputChange="onSearchTextInputChange"
@@ -34,14 +34,12 @@
   </Modal>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
+import { tr } from '../../../useSharedLibTranslate';
 
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
 
-const headerSubtitle = 'Buy matching domain name for your brand';
-const headerTitle = 'Search a domain name';
-
 export default {
   components: {
     Modal,
@@ -60,11 +58,11 @@ export default {
     },
     headerSubtitle: {
       type: String,
-      default: () => headerSubtitle,
+      default: null,
     },
     headerTitle: {
       type: String,
-      default: () => headerTitle,
+      default: null,
     },
     isBusy: {
       type: Boolean,
@@ -94,6 +92,12 @@ export default {
     },
   },
   emits: ['close-modal', 'input', 'search'],
+  setup() {
+    return {
+      domainSearchHeaderTitle: tr('sellDomainNameListModal.domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: tr('sellDomainNameListModal.domainSearchHeaderSubtitle'),
+    };
+  },
   methods: {
     onSearch() {
       this.$emit('search');

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.de-DE.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Domainname suchen",
+        "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+    }
+}

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.es-ES.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Busca un nombre de dominio",
+        "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+    }
+}

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.fr-FR.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+        "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+    }
+}

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Search a domain name",
+        "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+    }
+}

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.pt-PT.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+        "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+    }
+}