@designcrowd/fe-shared-lib 1.2.0-kp-1 → 1.2.0-ml-jj-2

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,11 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import useSellDomainNameSearchContent from './UseSellDomainNameSearchContent';
 
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-  sellDomainNameSearchBarPreText,
-} from '../../constants/sell-domain-name-constants';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 
 export default {
   components: {
@@ -79,14 +75,27 @@ export default {
       type: Boolean,
       required: false,
     },
+    contentOverride: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   emits: ['onSearch', 'onSearchTextInputChange'],
+  setup(props) {
+    const contentProvider = useSellDomainNameSearchContent(props.contentOverride);
+    const content = contentProvider.getContent();
+
+    return {
+      searchButtonLabel: content.searchButtonLabel,
+      searchBarLabel: content.searchBarLabel,
+      searchBarPlaceholder: content.searchBarPlaceholder,
+      searchBarPreText: content.searchBarPreText,
+    };
+  },
   data() {
     return {
-      searchBarLabel: sellDomainNameSearchBarLabel,
-      searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
       searchText: this.initialSearchTerm ?? '',
-      searchBarPreText: sellDomainNameSearchBarPreText,
     };
   },
   computed: {

package/src/experiences/components/SellDomainNameSearch/UseSellDomainNameSearchContent.js

@@ -0,0 +1,33 @@
+import {
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+  sellDomainNameSearchBarPreText,
+} from '../../constants/sell-domain-name-constants';
+
+let globalContentProvider = null;
+
+const defaultContent = {
+  searchButtonLabel: 'Search---',
+  searchBarLabel: sellDomainNameSearchBarLabel,
+  searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
+  searchBarPreText: sellDomainNameSearchBarPreText,
+};
+
+const useSellDomainNameSearchContent = (overrides = {}) => {
+  const setGlobalContentHandler = (handler) => {
+    globalContentProvider = handler;
+  };
+
+  return {
+    setGlobalContentHandler,
+    getContent: () => {
+      return {
+        ...defaultContent,
+        ...(globalContentProvider ? globalContentProvider() : {}), // provide global content through global injection
+        ...overrides, // can override specific contents on demand
+      };
+    },
+  };
+};
+
+export default useSellDomainNameSearchContent;

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

@@ -25,20 +25,19 @@
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
       @load-more-domains="onLoadMoreDomains"
-      @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';
@@ -100,13 +99,22 @@ export default {
       type: String,
       default: undefined,
     },
+    content: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
+      domainSearchEmptyMessage: this.content.sellDomainNameListSearchResult.domainSearchEmptyMessage,
+      searchAnotherDomainMessage: this.content.sellDomainNameListSearchResult.searchAnotherDomainMessage,
       domainNameItemsInView: undefined,
     };
   },
   computed: {
+    domainSearchEmptyMessageWithUserDomainName() {
+      return this.domainSearchEmptyMessage.replace('{domainNameSearchTerm}', this.previousSearchText);
+    },
     shouldShowDomainNameNotFound() {
       return (
         !this.isBusy &&
@@ -146,9 +154,6 @@ export default {
       window.dispatchEvent(new CustomEvent(Events.DomainLoadMoreEvent));
       this.domainNameItemsInView += this.domainNameItemsPerPage;
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     resetDomainNameItemsInView() {
       this.domainNameItemsInView = this.domainNameItemsPerPage;
     },

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -4,6 +4,7 @@
       :is-design-com="isDesignCom"
       :initial-search-term="initialSearchTerm"
       :show-white-search-background="showWhiteSearchBackground"
+      :search-button-label="content.searchButtonLabel"
       @onSearch="onSearchDomainName"
     />
     <SellDomainNameSearchResult
@@ -20,7 +21,7 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
-      @on-buy-now-click="onBuyNowClick"
+      :content="content"
     />
   </div>
 </template>
@@ -101,6 +102,10 @@ export default {
       type: Number,
       default: undefined,
     },
+    content: {
+      type: Object,
+      required: true,
+    },
   },
   data: () => ({
     domainNameItems: undefined,
@@ -171,9 +176,6 @@ export default {
         this.isBusy = false;
       }
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     cleanText(inputText) {
       // In this function, we use the Unicode property escapes \p{L} and \p{N} to match any Unicode letters (characters from various scripts) and Unicode numbers, respectively.
       const cleanedText = inputText.replace(/[^\p{L}\p{N}\-.]+/gu, '');