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

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

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

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.de-DE.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Suche",
+        "searchBarLabel": "Suche",
+        "searchBarPlaceholder": "Domainnamen suchen",
+        "searchBarPreText": "Domainname"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.es-ES.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Buscar",
+        "searchBarLabel": "Buscar",
+        "searchBarPlaceholder": "Busca nombres de dominio",
+        "searchBarPreText": "Nombre de dominio"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.fr-FR.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Rechercher",
+        "searchBarLabel": "Rechercher",
+        "searchBarPlaceholder": "Rechercher des noms de domaine",
+        "searchBarPreText": "Nom de domaine"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "searchBarPreText": "Domain name"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.pt-PT.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Pesquisar",
+        "searchBarLabel": "Pesquisar",
+        "searchBarPlaceholder": "Pesquisar nomes de domínio",
+        "searchBarPreText": "Nome de domínio"
+    }
+}

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">
-      Sorry, we couldn't find any domain for "{{ previousSearchText }}".
+      {{ domainSearchEmptyMessageWithUserDomainName }}
       <br />
-      Try searching with another domain name.
+      {{ searchAnotherDomainMessage }}
     </div>
     <div v-else></div>
   </div>
 </template>
 
 <script>
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-import Picture from '../../../../src/atoms/components/Picture/Picture.vue';
-
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import Picture from '../../../atoms/components/Picture/Picture.vue';
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';
+import { sellDomainNameListSearchResultTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -101,12 +101,23 @@ export default {
       default: undefined,
     },
   },
+  setup() {
+    return {
+      tr,
+      searchAnotherDomainMessage: sellDomainNameListSearchResultTr('searchAnotherDomainMessage'),
+    };
+  },
   data() {
     return {
       domainNameItemsInView: undefined,
     };
   },
   computed: {
+    domainSearchEmptyMessageWithUserDomainName() {
+      return sellDomainNameListSearchResultTr('domainSearchEmptyMessage', {
+        domainNameSearchTerm: this.previousSearchText,
+      });
+    },
     shouldShowDomainNameNotFound() {
       return (
         !this.isBusy &&

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.de-DE.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Leider konnten wir keine Domain für \"{domainNameSearchTerm}\" finden.",
+        "searchAnotherDomainMessage": "Versuchen Sie, mit einer anderen Domain zu suchen."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.es-ES.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Lo siento, no hemos podido encontrar ningún dominio para \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Prueba a buscar con otro nombre de dominio."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.fr-FR.json

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

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Sorry, we couldn't find any domain for \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Try searching with another domain name."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.pt-PT.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+    }
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Buy matching domain name for your brand or connect your existing domain
+    {{ domainSearchOrConnectHeaderSubtitle }}
     <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="Search"
+        :label="searchButtonLabel"
         :disabled="false"
         @on-click="onSearchBarClick"
       />
@@ -31,21 +31,18 @@
       :domain-name-items="domainNameItems"
       :previous-search-text="previousSearchText"
       :visible="isSearchDomainListModalVisible"
+      :search-button-label="searchButtonLabel"
       @close-modal="onSellDomainNameListCloseModal"
       @search="onSearchDomainName(true)"
     />
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-
+import { sellDomainNameWidgetTr } from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-} from '../../constants/sell-domain-name-constants';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 import Events from '../../constants/event-constants';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 
@@ -76,13 +73,19 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return {
+      searchButtonLabel: sellDomainNameWidgetTr('searchButtonLabel'),
+      searchBarLabel: sellDomainNameWidgetTr('searchBarLabel'),
+      searchBarPlaceholder: sellDomainNameWidgetTr('searchBarPlaceholder'),
+      domainSearchOrConnectHeaderSubtitle: sellDomainNameWidgetTr('domainSearchOrConnectHeaderSubtitle'),
+    };
+  },
   data: () => ({
     domainNameItems: undefined,
     userCurrency: undefined,
     isBusy: false,
     isSearchDomainListModalVisible: false,
-    searchBarLabel: sellDomainNameSearchBarLabel,
-    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
     searchText: '',
     previousSearchText: '',
   }),

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.de-DE.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Suche",
+        "searchBarLabel": "Suche",
+        "searchBarPlaceholder": "Domainnamen suchen",
+        "domainSearchOrConnectHeaderSubtitle": "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.es-ES.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Buscar",
+        "searchBarLabel": "Buscar",
+        "searchBarPlaceholder": "Busca nombres de dominio",
+        "domainSearchOrConnectHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.fr-FR.json

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

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.pt-PT.json

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

package/src/useSharedLibTranslate.js

@@ -11,8 +11,8 @@ const relativePathsToTranslationFiles = {
   'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
 };
 
-const setLocaleAsync = async (locale = 'en-US') => {
-  const localeToUse = locale;
+const setSharedLibLocaleAsync = async (locale = 'en-US') => {
+  const localeToUse = locale || 'en-US';
 
   if (!i18next.isInitialized) {
     await i18next.init({
@@ -35,4 +35,34 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
-export { setLocaleAsync, tr };
+const publishBrandPageModalTr = (key, valuesToInterpolate = {}) =>
+  tr(`publishBrandPageModal.${key}`, valuesToInterpolate);
+
+const sellDomainNameWidgetTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameWidget.${key}`, valuesToInterpolate);
+
+const sellDomainNameListSearchResultTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameListSearchResult.${key}`, valuesToInterpolate);
+
+const sellDomainNameSearchTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameSearch.${key}`, valuesToInterpolate);
+
+const sellDomainNameModalApplicationTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameModalApplication.${key}`, valuesToInterpolate);
+
+const sellDomainNameListModalTr = (key, valuesToInterpolate = {}) =>
+  tr(`sellDomainNameListModal.${key}`, valuesToInterpolate);
+
+const sellDomainNameListTr = (key, valuesToInterpolate = {}) => tr(`sellDomainNameList.${key}`, valuesToInterpolate);
+
+export {
+  setSharedLibLocaleAsync,
+  tr,
+  publishBrandPageModalTr,
+  sellDomainNameWidgetTr,
+  sellDomainNameListSearchResultTr,
+  sellDomainNameSearchTr,
+  sellDomainNameModalApplicationTr,
+  sellDomainNameListModalTr,
+  sellDomainNameListTr,
+};

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

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

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

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

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

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

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

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

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

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