@designcrowd/fe-shared-lib 1.2.2-ml-jj-5 → 1.2.2

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',
@@ -401,7 +402,7 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: '',
+      default: false,
     },
   },
   emits: [
@@ -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');

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

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!!$slots.header">
+  <template v-if="!!this.$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 || domainSearchHeaderTitle"
-          :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
+          :header-title="headerTitle"
+          :header-subtitle="headerSubtitle"
           :initial-search-term="initialSearchTerm"
           @onSearch="onSearchDomainName"
           @onSearchTextInputChange="onSearchTextInputChange"
@@ -71,12 +71,14 @@
   </template>
 </template>
 <script>
-import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Modal from '../../../../src/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';
-import { tr } from '../../../useSharedLibTranslate';
+
+const headerSubtitle = 'Buy matching domain name for your brand';
+const headerTitle = 'Search a domain name';
 
 export default {
   components: {
@@ -87,11 +89,11 @@ export default {
   props: {
     headerSubtitle: {
       type: String,
-      default: null,
+      default: () => headerSubtitle,
     },
     headerTitle: {
       type: String,
-      default: null,
+      default: () => headerTitle,
     },
     modelValue: {
       type: String,
@@ -120,12 +122,6 @@ export default {
       default: undefined,
     },
   },
-  setup() {
-    return {
-      domainSearchHeaderTitle: tr('sellDomainNameModalApplication.domainSearchHeaderTitle'),
-      domainSearchHeaderSubtitle: tr('sellDomainNameModalApplication.domainSearchHeaderTitle'),
-    };
-  },
   data: () => ({
     domainNameItems: [],
     userCurrency: {},

package/src/experiences/components/SellDomainNameSearch/SellDomainNameSearch.vue

@@ -32,7 +32,7 @@
         <Button
           :classes="searchButtonClasses"
           variant="primary"
-          :label="searchButtonLabel"
+          label="Search"
           :disabled="false"
           @on-click="onSearchBarClick"
         />
@@ -41,10 +41,15 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
-import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
-import { tr } from '../../../useSharedLibTranslate';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
+
+import {
+  sellDomainNameMinSearchTextLength,
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+  sellDomainNameSearchBarPreText,
+} from '../../constants/sell-domain-name-constants';
 
 export default {
   components: {
@@ -74,24 +79,14 @@ export default {
       type: Boolean,
       required: false,
     },
-    contentOverride: {
-      type: Object,
-      required: false,
-      default: null,
-    },
   },
   emits: ['onSearch', 'onSearchTextInputChange'],
-  setup() {
-    return {
-      searchButtonLabel: tr('sellDomainNameSearch.searchButtonLabel'),
-      searchBarLabel: tr('sellDomainNameSearch.searchBarLabel'),
-      searchBarPlaceholder: tr('sellDomainNameSearch.searchBarPlaceholder'),
-      searchBarPreText: tr('sellDomainNameSearch.searchBarPreText'),
-    };
-  },
   data() {
     return {
+      searchBarLabel: sellDomainNameSearchBarLabel,
+      searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
       searchText: this.initialSearchTerm ?? '',
+      searchBarPreText: sellDomainNameSearchBarPreText,
     };
   },
   computed: {

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -28,20 +28,20 @@
       @on-buy-now-click="onBuyNowClick"
     />
     <div v-else-if="shouldShowDomainNameNotFound" class="tw-flex tw-justify-center tw-text-center">
-      {{ domainSearchEmptyMessageWithUserDomainName }}
+      Sorry, we couldn't find any domain for "{{ previousSearchText }}".
       <br />
-      {{ searchAnotherDomainMessage }}
+      Try searching with another domain name.
     </div>
     <div v-else></div>
   </div>
 </template>
 
 <script>
-import Loader from '../../../atoms/components/Loader/Loader.vue';
-import Picture from '../../../atoms/components/Picture/Picture.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Picture from '../../../../src/atoms/components/Picture/Picture.vue';
+
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';
-import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -101,23 +101,12 @@ export default {
       default: undefined,
     },
   },
-  setup() {
-    return {
-      tr,
-      searchAnotherDomainMessage: tr('sellDomainNameListSearchResult.searchAnotherDomainMessage'),
-    };
-  },
   data() {
     return {
       domainNameItemsInView: undefined,
     };
   },
   computed: {
-    domainSearchEmptyMessageWithUserDomainName() {
-      return tr('sellDomainNameListSearchResult.domainSearchEmptyMessage', {
-        domainNameSearchTerm: this.previousSearchText,
-      });
-    },
     shouldShowDomainNameNotFound() {
       return (
         !this.isBusy &&

package/src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    {{ domainSearchOrConnectHeaderSubtitle }}
+    Buy matching domain name for your brand or connect your existing domain
     <div class="tw-flex tw-flex-col md:tw-flex-row tw-mt-4 tw-mb-4">
       <TextInput
         v-model="searchText"
@@ -18,7 +18,7 @@
       <Button
         classes="tw-w-full tw-mt-2 md:tw-rounded-l-none md:tw-mt-0"
         variant="primary"
-        :label="searchButtonLabel"
+        label="Search"
         :disabled="false"
         @on-click="onSearchBarClick"
       />
@@ -31,18 +31,21 @@
       :domain-name-items="domainNameItems"
       :previous-search-text="previousSearchText"
       :visible="isSearchDomainListModalVisible"
-      :search-button-label="searchButtonLabel"
       @close-modal="onSellDomainNameListCloseModal"
       @search="onSearchDomainName(true)"
     />
   </div>
 </template>
 <script>
-import { tr } from '../../../useSharedLibTranslate';
-import Button from '../../../atoms/components/Button/Button.vue';
-import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
+
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
+import {
+  sellDomainNameMinSearchTextLength,
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+} from '../../constants/sell-domain-name-constants';
 import Events from '../../constants/event-constants';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 
@@ -73,19 +76,13 @@ export default {
       default: false,
     },
   },
-  setup() {
-    return {
-      searchButtonLabel: tr('sellDomainNameWidget.searchButtonLabel'),
-      searchBarLabel: tr('sellDomainNameWidget.searchBarLabel'),
-      searchBarPlaceholder: tr('sellDomainNameWidget.searchBarPlaceholder'),
-      domainSearchOrConnectHeaderSubtitle: tr('sellDomainNameWidget.domainSearchOrConnectHeaderSubtitle'),
-    };
-  },
   data: () => ({
     domainNameItems: undefined,
     userCurrency: undefined,
     isBusy: false,
     isSearchDomainListModalVisible: false,
+    searchBarLabel: sellDomainNameSearchBarLabel,
+    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
     searchText: '',
     previousSearchText: '',
   }),