@designcrowd/fe-shared-lib 1.2.5-ml-jj-2 → 1.2.5-ml-currency

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

@@ -1,52 +1,5 @@
 {
-  "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"
-  },
-  "sellDomainNameList": {
-    "freeDomainButtonLabel": "Domaine gratuit",
-    "buyNowButtonLabel": "Acheter",
-    "pricePerYearLabel": "/an",
-    "costPriceLabel": "Prix de revient:"
-  },
-  "sellDomainNameListModal": {
-    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
-    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
-  },
-  "sellDomainNameModalApplication": {
-    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
-    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
-  },
-  "sellDomainNameSearch": {
-    "searchButtonLabel": "Rechercher",
-    "searchBarLabel": "Rechercher",
-    "searchBarPlaceholder": "Rechercher des noms de domaine",
-    "searchBarPreText": "Nom de domaine"
-  },
-  "sellDomainNameListSearchResult": {
-    "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour \"{domainNameSearchTerm}\".",
-    "searchAnotherDomainMessage": "Essayez de faire une recherche avec un autre nom de domaine."
-  },
-  "sellDomainNameWidget": {
-    "searchButtonLabel": "Rechercher",
-    "searchBarLabel": "Rechercher",
-    "searchBarPlaceholder": "Rechercher des noms de domaine",
-    "domainSearchOrConnectHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
+  "publishModal": {
+    "test": "FR-Publish Brand Page"
   }
 }

package/src/bundles/bundled-translations.json

@@ -1,52 +1,5 @@
 {
-  "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"
-  },
-  "sellDomainNameList": {
-    "freeDomainButtonLabel": "Free Domain",
-    "buyNowButtonLabel": "Buy Now",
-    "pricePerYearLabel": "/yr",
-    "costPriceLabel": "Cost Price:"
-  },
-  "sellDomainNameListModal": {
-    "domainSearchHeaderTitle": "Search a domain name",
-    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
-  },
-  "sellDomainNameModalApplication": {
-    "domainSearchHeaderTitle": "Search a domain name",
-    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
-  },
-  "sellDomainNameSearch": {
-    "searchButtonLabel": "Search",
-    "searchBarLabel": "Search",
-    "searchBarPlaceholder": "Search domain names",
-    "searchBarPreText": "Domain name"
-  },
-  "sellDomainNameListSearchResult": {
-    "domainSearchEmptyMessage": "Sorry, we couldn't find any domain for \"{domainNameSearchTerm}\".",
-    "searchAnotherDomainMessage": "Try searching with another domain name."
-  },
-  "sellDomainNameWidget": {
-    "searchButtonLabel": "Search",
-    "searchBarLabel": "Search",
-    "searchBarPlaceholder": "Search domain names",
-    "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
+  "publishModal": {
+    "test": "EN-Publish Brand Page"
   }
 }

package/src/bundles/bundled-translations.pt-PT.json

@@ -1,52 +1,5 @@
 {
-  "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"
-  },
-  "sellDomainNameList": {
-    "freeDomainButtonLabel": "Domínio gratuito",
-    "buyNowButtonLabel": "Comprar Agora",
-    "pricePerYearLabel": "/ano",
-    "costPriceLabel": "Preço de Custo:"
-  },
-  "sellDomainNameListModal": {
-    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
-    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
-  },
-  "sellDomainNameModalApplication": {
-    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
-    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
-  },
-  "sellDomainNameSearch": {
-    "searchButtonLabel": "Pesquisar",
-    "searchBarLabel": "Pesquisar",
-    "searchBarPlaceholder": "Pesquisar nomes de domínio",
-    "searchBarPreText": "Nome de domínio"
-  },
-  "sellDomainNameListSearchResult": {
-    "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
-    "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
-  },
-  "sellDomainNameWidget": {
-    "searchButtonLabel": "Pesquisar",
-    "searchBarLabel": "Pesquisar",
-    "searchBarPlaceholder": "Pesquisar nomes de domínio",
-    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  "publishModal": {
+    "test": "PT-Publish Brand Page"
   }
 }

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

@@ -12,10 +12,10 @@
                 {{ title }}
               </p>
               <span
-                v-if="pillLabel"
+                v-if="showLabel"
                 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"
               >
-                {{ pillLabel }}
+                Recommended
               </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="searchButtonLabel"
+              label="Search"
               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="searchButtonLabel"
+          label="Search"
           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 '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 
 const props = defineProps({
   title: {
@@ -86,13 +86,9 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  searchButtonLabel: {
-    type: String,
-    default: () => 'Search',
-  },
-  pillLabel: {
-    type: String,
-    default: null,
+  showLabel: {
+    type: Boolean,
+    default: false,
   },
 });
 

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

@@ -1,19 +1,12 @@
 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 () => {
-  await setLocaleAsync(locale);
-};
-
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -22,7 +15,6 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
-        show: false,
       };
     },
     methods: {},
@@ -42,8 +34,6 @@ export const NotPublishedWithPurchasedDomains = () => {
   };
 };
 
-NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
-
 export const PublishWithSelectedDomain = () => {
   return {
     components: {
@@ -85,8 +75,6 @@ export const PublishWithSelectedDomain = () => {
   };
 };
 
-PublishWithSelectedDomain.loaders = [loadTranslationAsync];
-
 export const SetSlug = () => {
   return {
     components: {
@@ -113,9 +101,6 @@ export const SetSlug = () => {
     `,
   };
 };
-
-SetSlug.loaders = [loadTranslationAsync];
-
 export const Published = () => {
   return {
     components: {
@@ -141,9 +126,6 @@ export const Published = () => {
     `,
   };
 };
-
-Published.loaders = [loadTranslationAsync];
-
 export const PublishedNoDomains = () => {
   return {
     components: {
@@ -171,9 +153,6 @@ export const PublishedNoDomains = () => {
   `,
   };
 };
-
-PublishedNoDomains.loaders = [loadTranslationAsync];
-
 export const Free = () => {
   return {
     components: {
@@ -222,5 +201,3 @@ 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>{{ firstTimePublishHeaderLabel }}</span>
+          <span>Set the URL for your {{ brandPageDisplayName }}</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">{{ sitePublishedLabel }}</p>
+          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">Site published!</p>
           <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            {{ publishSuccessLabel }}
+            Your {{ brandPageDisplayName }} is live! Start using your link:
           </p>
           <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ publishedSuccessDescriptionLabel }}
+            {{ headerSubtitle }}
           </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">{{ freeDomainLabel }}</span>
+              <span class="tw-inline-block tw-rounded-full">Free domain</span>
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
               :img-url="iconUrl"
-              :title="freePublishCardTitleLabel"
-              :description="freePublishCardDescriptionLabel"
+              title="Free Address"
+              description="Choose a free address to publish now. You can always edit the URL later"
               :is-design-com="isDesignCom"
               :has-search-button="false"
             >
@@ -78,7 +78,7 @@
                     </div>
                   </div>
                   <Button
-                    :label="publishLabel"
+                    label="Publish"
                     :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">{{ purchasedDomainLabel }}</span>
+                  <span class="tw-inline-block tw-rounded-full">Purchased domain</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) || selectDomainDropdownPlaceholder"
+                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || 'Select domain name'"
                 >
                   <DropdownItem
                     v-for="purchasedDomain of domains"
@@ -167,7 +167,7 @@
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
             <Button
-              :label="isSlugEditMode ? setUrlLabel : publishLabel"
+              :label="isSlugEditMode ? 'Set URL' : 'Publish'"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               :disabled="isPublishingDisabled"
@@ -177,7 +177,7 @@
               @on-click="onPublish"
             />
             <Button
-              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
+              label="No thanks, maybe later"
               variant="no-border"
               size="large"
               class="tw-my-4"
@@ -200,7 +200,7 @@
               />
             </div>
             <Button
-              :label="viewMoreDomainLabel"
+              label="VIEW MORE DOMAINS"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -211,13 +211,11 @@
             <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="viewMyWebsiteLabel"
+              :label="`View ${brandPageDisplayName}`"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               size="medium"
@@ -248,6 +246,7 @@
   </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';
@@ -263,6 +262,8 @@ 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',
@@ -417,21 +418,7 @@ export default {
   setup() {
     return {
       tr,
-      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'),
-      selectDomainDropdownPlaceholder: tr('publishBrandPageModal.selectDomainDropdownPlaceholder'),
+      testMessage: computed(() => tr('publishModal.test')),
     };
   },
   data() {
@@ -440,6 +427,7 @@ export default {
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
+      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -450,21 +438,6 @@ export default {
     };
   },
   computed: {
-    firstTimePublishHeaderLabel() {
-      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;
@@ -493,9 +466,7 @@ export default {
       return !this.allowPublish || this.isPublishing;
     },
     getPlaceHolder() {
-      return this.brandPageType === 'brandContact'
-        ? this.slugInputPlaceholderYourNameLabel
-        : this.slugInputPlaceholderYourBusinessNameLabel;
+      return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
     },
   },
   watch: {

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

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "DE-Publish Brand Page"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "ES-Publish Brand Page"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "FR-Publish Brand Page"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "EN-Publish Brand Page"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "PT-Publish Brand Page"
+    }
+}

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"> {{ costPriceLabel }} </span>
+            <span class="tw-mr-2"> Cost Price: </span>
             <Price
               class="tw-font-bold"
               :amount="getCostPrice(item)"
@@ -30,7 +30,7 @@
               :currency="currency"
               fraction="2"
               :show-abbreviation="false"
-              :suffix="pricePerYearLabel"
+              suffix="/yr"
             />
           </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="pricePerYearLabel"
+              suffix="/yr"
             />
           </div>
         </div>
@@ -63,10 +63,10 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import Price from '../../../atoms/components/Price/Price.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Price from '../../../../src/atoms/components/Price/Price.vue';
+
 import Events from '../../constants/event-constants';
-import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -108,14 +108,6 @@ 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;
@@ -142,7 +134,7 @@ export default {
       return parseFloat(domain.price) === 0;
     },
     getPurchaseLabel(domain) {
-      return this.isFree(domain) ? this.freeDomainButtonLabel : this.buyNowButtonLabel;
+      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
     },
   },
 };

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

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