@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-2

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

@@ -1,214 +1,223 @@
-<template>
-  <div>
-    <SellDomainNameSearch
-      :is-design-com="isDesignCom"
-      :initial-search-term="initialSearchTerm"
-      :show-white-search-background="showWhiteSearchBackground"
-      @onSearch="onSearchDomainName"
-    />
-    <SellDomainNameSearchResult
-      v-model="searchText"
-      :is-design-com="isDesignCom"
-      :currency="userCurrency || currency"
-      :domain-name-items="domainNameItems"
-      :previous-search-text="previousSearchText"
-      :is-busy="isBusy"
-      :has-border-box-list-styling="hasBorderBoxListStyling"
-      :is-container-width="isContainerWidth"
-      :is-user-authenticated="isUserAuthenticated"
-      :empty-domain-search="emptyDomainSearch"
-      :domain-name-items-per-page="domainNameItemsPerPage"
-      :load-more-domains-button-text="loadMoreDomainsButtonText"
-      :domain-search-location="domainSearchLocation"
-      @on-buy-now-click="onBuyNowClick"
-    />
-    <Button
-      v-if="showViewMoreButton"
-      :label="viewMoreDomainLabel"
-      variant="no-border"
-      size="small-medium"
-      class="tw-text-center tw-pt-6"
-      @on-click="onViewMore"
-    />
-  </div>
-</template>
-<script>
-import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
-import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
-
-import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
-import Events from '../../constants/event-constants';
-import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
-import Button from '../../../atoms/components/Button/Button.vue';
-
-const TEXT_CHANGED_PARAM = 'textChanged';
-
-export default {
-  components: {
-    SellDomainNameSearch,
-    SellDomainNameSearchResult,
-    Button,
-  },
-  props: {
-    currency: {
-      type: Object,
-      required: true,
-    },
-    designDraftToken: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    initialSearchTerm: {
-      type: String,
-      default: null,
-    },
-    showWhiteSearchBackground: {
-      type: Boolean,
-      required: false,
-    },
-    isContainerWidth: {
-      type: Boolean,
-      default: false,
-    },
-    hasBorderBoxListStyling: {
-      type: Boolean,
-      default: false,
-    },
-    isUserAuthenticated: {
-      type: Boolean,
-      default: true,
-    },
-    domainNameSearchOrigin: {
-      type: String,
-      default: undefined,
-    },
-    domainSearchLocation: {
-      type: String,
-      default: undefined,
-    },
-    emptyDomainSearch: {
-      type: Object,
-      default: null,
-    },
-    domainNameSearchLimit: {
-      type: Number,
-      default: null,
-    },
-    domainNameItemsPerPage: {
-      type: Number,
-      default: null,
-    },
-    loadMoreDomainsButtonText: {
-      type: String,
-      default: undefined,
-    },
-    displayResultLimit: {
-      type: Number,
-      default: undefined,
-    },
-    showViewMoreButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    return {
-      publishBrandPageModalTr,
-      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
-    };
-  },
-  data: () => ({
-    domainNameItems: undefined,
-    userCurrency: undefined,
-    isBusy: false,
-    isSearchDomainListModalVisible: false,
-    searchText: '',
-    previousSearchText: '',
-  }),
-  watch: {
-    initialSearchTerm(val) {
-      this.searchText = val;
-      this.searchDomainName(this.initialSearchTerm, true);
-    },
-  },
-  mounted() {
-    if (this.initialSearchTerm) {
-      this.previousSearchText = this.initialSearchTerm;
-      const isUserTriggered = this.isUserTriggered();
-      this.searchDomainName(this.initialSearchTerm, isUserTriggered);
-    }
-  },
-  methods: {
-    async onSearchDomainName(args) {
-      this.$emit('on-change-search', args.searchText);
-      this.$emit('on-domain-search');
-      await this.searchDomainName(args.searchText, args.isUserTriggered);
-    },
-    async searchDomainName(searchText, isUserTriggered) {
-      this.isBusy = true;
-      const searchSlug = this.cleanText(searchText);
-      this.previousSearchText = searchText;
-      try {
-        const request = {
-          keyword: searchSlug,
-          isUserTriggered,
-          userText: searchText,
-          limit: this.domainNameSearchLimit,
-        };
-
-        if (this.designDraftToken) {
-          request.designDraftToken = this.designDraftToken;
-        }
-
-        if (this.domainNameSearchOrigin) {
-          request.domainNameSearchOrigin = this.domainNameSearchOrigin;
-        }
-
-        if (this.domainSearchLocation) {
-          request.domainSearchLocation = this.domainSearchLocation;
-        }
-
-        window.dispatchEvent(new CustomEvent(Events.DomainSearchEvent, { detail: request }));
-        const result = await brandCrowdApiClient.searchDomainNamesByKeywordAsync(request);
-        if (!result) {
-          this.domainNameItems = [];
-          return;
-        }
-
-        if (this.displayResultLimit) {
-          this.domainNameItems = result.items.slice(0, this.displayResultLimit);
-        } else {
-          this.domainNameItems = result.items;
-        }
-        this.userCurrency = result.currency;
-      } catch {
-        this.domainNameItems = [];
-      } finally {
-        this.isBusy = false;
-        this.$emit('on-search-results-loaded');
-      }
-    },
-    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, '');
-      return cleanedText.toLowerCase();
-    },
-    isUserTriggered() {
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(TEXT_CHANGED_PARAM)?.toUpperCase() === 'TRUE' || false;
-    },
-    onViewMore() {
-      this.$emit('on-view-more');
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <SellDomainNameSearch
+      :is-design-com="isDesignCom"
+      :initial-search-term="initialSearchTerm"
+      :show-white-search-background="showWhiteSearchBackground"
+      @onSearch="onSearchDomainName"
+    />
+    <SellDomainNameSearchResult
+      v-model="searchText"
+      :is-design-com="isDesignCom"
+      :currency="userCurrency || currency"
+      :domain-name-items="domainNameItems"
+      :previous-search-text="previousSearchText"
+      :is-busy="isBusy"
+      :has-border-box-list-styling="hasBorderBoxListStyling"
+      :is-container-width="isContainerWidth"
+      :is-user-authenticated="isUserAuthenticated"
+      :empty-domain-search="emptyDomainSearch"
+      :domain-name-items-per-page="domainNameItemsPerPage"
+      :load-more-domains-button-text="loadMoreDomainsButtonText"
+      :domain-search-location="domainSearchLocation"
+      @on-buy-now-click="onBuyNowClick"
+    />
+    <Button
+      v-if="showViewMoreButton"
+      :label="viewMoreDomainLabel"
+      variant="no-border"
+      size="small-medium"
+      class="tw-text-center tw-pt-6"
+      @on-click="onViewMore"
+    />
+  </div>
+</template>
+<script>
+import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
+import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
+
+import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
+import Events from '../../constants/event-constants';
+import {getCurrentLocale, publishBrandPageModalTr} from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
+
+const TEXT_CHANGED_PARAM = 'textChanged';
+
+export default {
+  components: {
+    SellDomainNameSearch,
+    SellDomainNameSearchResult,
+    Button,
+  },
+  props: {
+    currency: {
+      type: Object,
+      required: true,
+    },
+    designDraftToken: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    initialSearchTerm: {
+      type: String,
+      default: null,
+    },
+    showWhiteSearchBackground: {
+      type: Boolean,
+      required: false,
+    },
+    isContainerWidth: {
+      type: Boolean,
+      default: false,
+    },
+    hasBorderBoxListStyling: {
+      type: Boolean,
+      default: false,
+    },
+    isUserAuthenticated: {
+      type: Boolean,
+      default: true,
+    },
+    domainNameSearchOrigin: {
+      type: String,
+      default: undefined,
+    },
+    domainSearchLocation: {
+      type: String,
+      default: undefined,
+    },
+    emptyDomainSearch: {
+      type: Object,
+      default: null,
+    },
+    domainNameSearchLimit: {
+      type: Number,
+      default: null,
+    },
+    domainNameItemsPerPage: {
+      type: Number,
+      default: null,
+    },
+    loadMoreDomainsButtonText: {
+      type: String,
+      default: undefined,
+    },
+    displayResultLimit: {
+      type: Number,
+      default: undefined,
+    },
+    showViewMoreButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {
+      publishBrandPageModalTr,
+      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
+    };
+  },
+  data: () => ({
+    domainNameItems: undefined,
+    userCurrency: undefined,
+    isBusy: false,
+    isSearchDomainListModalVisible: false,
+    searchText: '',
+    previousSearchText: '',
+  }),
+  watch: {
+    initialSearchTerm(val) {
+      this.searchText = val;
+      this.searchDomainName(this.initialSearchTerm, true);
+    },
+  },
+  computed: {
+    currentLocale() {
+      return getCurrentLocale();
+    },
+  },
+  mounted() {
+    if (this.initialSearchTerm) {
+      this.previousSearchText = this.initialSearchTerm;
+      const isUserTriggered = this.isUserTriggered();
+      this.searchDomainName(this.initialSearchTerm, isUserTriggered);
+    }
+  },
+  methods: {
+    async onSearchDomainName(args) {
+      this.$emit('on-change-search', args.searchText);
+      this.$emit('on-domain-search');
+      await this.searchDomainName(args.searchText, args.isUserTriggered);
+    },
+    async searchDomainName(searchText, isUserTriggered) {
+      this.isBusy = true;
+      const searchSlug = this.cleanText(searchText);
+      this.previousSearchText = searchText;
+      try {
+        const request = {
+          keyword: searchSlug,
+          isUserTriggered,
+          userText: searchText,
+          limit: this.domainNameSearchLimit,
+        };
+
+        if (this.designDraftToken) {
+          request.designDraftToken = this.designDraftToken;
+        }
+
+        if (this.domainNameSearchOrigin) {
+          request.domainNameSearchOrigin = this.domainNameSearchOrigin;
+        }
+
+        if (this.domainSearchLocation) {
+          request.domainSearchLocation = this.domainSearchLocation;
+        }
+
+        if (this.currentLocale) {
+          request.locale = this.currentLocale;
+        }
+
+        window.dispatchEvent(new CustomEvent(Events.DomainSearchEvent, { detail: request }));
+        const result = await brandCrowdApiClient.searchDomainNamesByKeywordAsync(request);
+        if (!result) {
+          this.domainNameItems = [];
+          return;
+        }
+
+        if (this.displayResultLimit) {
+          this.domainNameItems = result.items.slice(0, this.displayResultLimit);
+        } else {
+          this.domainNameItems = result.items;
+        }
+        this.userCurrency = result.currency;
+      } catch {
+        this.domainNameItems = [];
+      } finally {
+        this.isBusy = false;
+        this.$emit('on-search-results-loaded');
+      }
+    },
+    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, '');
+      return cleanedText.toLowerCase();
+    },
+    isUserTriggered() {
+      const urlParams = new URLSearchParams(window.location.search);
+      return urlParams.get(TEXT_CHANGED_PARAM)?.toUpperCase() === 'TRUE' || false;
+    },
+    onViewMore() {
+      this.$emit('on-view-more');
+    },
+  },
+};
+</script>

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

@@ -1,40 +1,40 @@
-import SellDomainNameWidget from './SellDomainNameWidget.vue';
-
-export default {
-  title: 'Components/SellDomainNameWidget',
-  component: SellDomainNameWidget,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      SellDomainNameWidget,
-    },
-    data() {
-      return {
-        currency: {
-          id: 1,
-          name: 'United State Dollars',
-          iso4127Code: 'USD',
-          symbol: '$',
-          abbreviation: 'US',
-        },
-      };
-    },
-    methods: {
-      onSearch(payload) {
-        console.log('onSearch', payload);
-        this.isBusy = true;
-
-        setTimeout(() => {
-          this.isBusy = false;
-        }, 1000);
-      },
-    },
-    template: `
-      <div>
-        <SellDomainNameWidget business-name="Acme Corporation" :currency="currency"/>
-      </div>
-    `,
-  };
-};
+import SellDomainNameWidget from './SellDomainNameWidget.vue';
+
+export default {
+  title: 'Components/SellDomainNameWidget',
+  component: SellDomainNameWidget,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      SellDomainNameWidget,
+    },
+    data() {
+      return {
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US',
+        },
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log('onSearch', payload);
+        this.isBusy = true;
+
+        setTimeout(() => {
+          this.isBusy = false;
+        }, 1000);
+      },
+    },
+    template: `
+      <div>
+        <SellDomainNameWidget business-name="Acme Corporation" :currency="currency"/>
+      </div>
+    `,
+  };
+};