@designcrowd/fe-shared-lib 1.2.6 → 1.2.7-rr-debugging

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,25 +44,25 @@
               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"
             >
               <template #slug>
                 <div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
-                  <div>
+                  <div class="tw-grow md:tw-mr-2">
                     <TextInput
                       v-model="internalSlug"
-                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
-                      :prefix-text="`${brandPageBaseUrl}/`"
+                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md"
+                      :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                       :error="!!slugValidationError"
                       :disabled="isInputEnabled"
                       :placeholder="getPlaceHolder"
@@ -78,9 +78,9 @@
                     </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"
+                    class="tw-flex tw-items-center tw-justify-center tw-mt-2 md:tw-mt-0 tw-font-bold tw-transition-colors tw-duration-300"
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
@@ -97,7 +97,7 @@
               <TextInput
                 v-model="internalSlug"
                 element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
-                :prefix-text="`${brandPageBaseUrl}/`"
+                :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                 :error="!!slugValidationError"
                 :disabled="isInputEnabled"
                 :placeholder="getPlaceHolder"
@@ -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">
@@ -143,7 +143,7 @@
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
                   }"
-                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || 'Select domain name'"
+                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || selectDomainDropdownPlaceholder"
                 >
                   <DropdownItem
                     v-for="purchasedDomain of domains"
@@ -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';
@@ -260,9 +261,7 @@ import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameLi
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 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';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
 
 const DOMAIN_TYPES = {
   slug: 'slug',
@@ -417,8 +416,22 @@ export default {
   ],
   setup() {
     return {
-      tr,
-      testMessage: computed(() => tr('publishModal.test')),
+      publishBrandPageModalTr,
+      sitePublishedLabel: publishBrandPageModalTr('sitePublishedLabel'),
+      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
+      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
+      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
+      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
+      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
+      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
+      publishLabel: publishBrandPageModalTr('publishLabel'),
+      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
+      copyLabel: publishBrandPageModalTr('copyLabel'),
+      copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
+      publishedSuccessDescriptionLabel: publishBrandPageModalTr('publishedSuccessDescriptionLabel'),
+      selectDomainDropdownPlaceholder: publishBrandPageModalTr('selectDomainDropdownPlaceholder'),
     };
   },
   data() {
@@ -427,7 +440,6 @@ export default {
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
-      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -438,6 +450,24 @@ export default {
     };
   },
   computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
+    firstTimePublishHeaderLabel() {
+      return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    publishSuccessLabel() {
+      return this.publishBrandPageModalTr('publishSuccessLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    viewMyWebsiteLabel() {
+      return this.publishBrandPageModalTr('viewMyWebsiteLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
     allowPublish() {
       if (this.domainTypeValue === DOMAIN_TYPES.slug) {
         return this.internalSlug && !this.slugValidationError;
@@ -466,7 +496,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,22 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Legen Sie die URL für {{brandPageDisplayName}} fest",
+    "sitePublishedLabel" : "Seite veröffentlicht!",
+    "publishSuccessLabel" : "Ihr {{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",
+    "selectDomainDropdownPlaceholder" : "Domain auswählen"
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "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"
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "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"
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+    "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",
+        "selectDomainDropdownPlaceholder": "Select domain name"
+    }
+}

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

@@ -0,0 +1,22 @@
+{
+  "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"
+  }
+}

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 { sellDomainNameListTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -108,6 +108,14 @@ export default {
     },
   },
   emits: ['load-more-domains'],
+  setup() {
+    return {
+      freeDomainButtonLabel: sellDomainNameListTr('freeDomainButtonLabel'),
+      buyNowButtonLabel: sellDomainNameListTr('buyNowButtonLabel'),
+      pricePerYearLabel: sellDomainNameListTr('pricePerYearLabel'),
+      costPriceLabel: sellDomainNameListTr('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 { sellDomainNameListModalTr } 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: sellDomainNameListModalTr('domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: sellDomainNameListModalTr('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"
+  }
+}

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!!this.$slots['header']">
+  <template v-if="!!$slots.header">
     <Modal
       classes="sell-domain-name-list-modal--modal tw-text-black"
       close-on-esc
@@ -49,8 +49,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="initialSearchTerm"
           @onSearch="onSearchDomainName"
           @onSearchTextInputChange="onSearchTextInputChange"
@@ -71,14 +71,12 @@
   </template>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
 import Events from '../../constants/event-constants';
-
-const headerSubtitle = 'Buy matching domain name for your brand';
-const headerTitle = 'Search a domain name';
+import { sellDomainNameModalApplicationTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -89,11 +87,11 @@ export default {
   props: {
     headerSubtitle: {
       type: String,
-      default: () => headerSubtitle,
+      default: null,
     },
     headerTitle: {
       type: String,
-      default: () => headerTitle,
+      default: null,
     },
     modelValue: {
       type: String,
@@ -122,6 +120,12 @@ export default {
       default: undefined,
     },
   },
+  setup() {
+    return {
+      domainSearchHeaderTitle: sellDomainNameModalApplicationTr('domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: sellDomainNameModalApplicationTr('domainSearchHeaderTitle'),
+    };
+  },
   data: () => ({
     domainNameItems: [],
     userCurrency: {},

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.de-DE.json

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

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.es-ES.json

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

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.fr-FR.json

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

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.json

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

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.pt-PT.json

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