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

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 { tr } 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: tr('sellDomainNameModalApplication.domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: tr('sellDomainNameModalApplication.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"
+    }
+}

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 { tr } 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: 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/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 { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -101,12 +101,23 @@ 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/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 { tr } 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: 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: '',
   }),

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,7 +11,7 @@ const relativePathsToTranslationFiles = {
   'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
 };
 
-const setSharedLibLocaleAsync = async (locale = 'en-US') => {
+const setLocaleAsync = async (locale = 'en-US') => {
   const localeToUse = locale;
 
   if (!i18next.isInitialized) {
@@ -24,6 +24,8 @@ const setSharedLibLocaleAsync = async (locale = 'en-US') => {
 
   const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
 
+  console.log('ss', localeToUse, languageFile);
+
   await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
     ...languageFile,
   });
@@ -35,4 +37,4 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
-export { setSharedLibLocaleAsync, tr };
+export { setLocaleAsync, tr };

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"
-    }
-}