@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

@@ -1,152 +1,152 @@
-<template>
-  <div>
-    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"
-        class="tw-grow"
-        icon="search"
-        :element-classes="{
-          'tw-h-12 tw-mb-0 tw-rounded !tw-rounded-r-none': isDesignCom,
-          'tw-h-12 md:tw-rounded-r-none tw-mb-0': !isDesignCom,
-        }"
-        :enable-clear="true"
-        :placeholder="searchBarPlaceholder"
-        @on-clear="onSearchTextInputClear"
-        @enter-key-up="onSearchTextInputEnterKeyUp"
-      />
-      <Button
-        classes="tw-w-full tw-mt-2 md:tw-rounded-l-none md:tw-mt-0"
-        variant="primary"
-        label="Search"
-        :disabled="false"
-        @on-click="onSearchBarClick"
-      />
-    </div>
-    <SellDomainNameListModal
-      v-model="searchText"
-      :currency="userCurrency || currency"
-      :is-busy="isBusy"
-      :is-design-com="isDesignCom"
-      :domain-name-items="domainNameItems"
-      :previous-search-text="previousSearchText"
-      :visible="isSearchDomainListModalVisible"
-      @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 SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-} from '../../constants/sell-domain-name-constants';
-import Events from '../../constants/event-constants';
-import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
-
-export default {
-  components: {
-    Button,
-    TextInput,
-    SellDomainNameListModal,
-  },
-  props: {
-    currency: {
-      type: Object,
-      required: true,
-    },
-    businessName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    designDraftToken: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data: () => ({
-    domainNameItems: undefined,
-    userCurrency: undefined,
-    isBusy: false,
-    isSearchDomainListModalVisible: false,
-    searchBarLabel: sellDomainNameSearchBarLabel,
-    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
-    searchText: '',
-    previousSearchText: '',
-  }),
-  created() {
-    if (this.businessName) {
-      this.searchText = this.businessName;
-    }
-  },
-  methods: {
-    async showModal() {
-      this.domainNameItems = [];
-      this.previousSearchText = '';
-
-      this.isSearchDomainListModalVisible = true;
-      if (this.searchText.length > sellDomainNameMinSearchTextLength) {
-        await this.onSearchDomainName(true);
-      }
-    },
-    onSearchTextInputClear() {
-      this.searchText = '';
-    },
-    async onSearchTextInputEnterKeyUp() {
-      await this.showModal();
-    },
-    async onSearchBarClick() {
-      await this.showModal();
-    },
-    onSellDomainNameListCloseModal() {
-      this.isSearchDomainListModalVisible = false;
-    },
-    async onSearchDomainName(isUserTriggered) {
-      await this.searchDomainName(isUserTriggered);
-    },
-    async searchDomainName(isUserTriggered) {
-      this.isBusy = true;
-      const searchSlug = this.cleanText(this.searchText);
-      this.previousSearchText = this.searchText;
-      try {
-        const request = { keyword: searchSlug, isUserTriggered, userText: this.searchText };
-
-        if (this.designDraftToken) {
-          request.designDraftToken = this.designDraftToken;
-        }
-
-        window.dispatchEvent(new CustomEvent(Events.DomainSearchEvent, { detail: request }));
-        const result = await brandCrowdApiClient.searchDomainNamesByKeywordAsync(request);
-        if (!result) {
-          this.domainNameItems = [];
-          return;
-        }
-
-        this.domainNameItems = result.items;
-        this.userCurrency = result.currency;
-      } catch {
-        this.domainNameItems = [];
-      } finally {
-        this.isBusy = false;
-      }
-    },
-    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();
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    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"
+        class="tw-grow"
+        icon="search"
+        :element-classes="{
+          'tw-h-12 tw-mb-0 tw-rounded !tw-rounded-r-none': isDesignCom,
+          'tw-h-12 md:tw-rounded-r-none tw-mb-0': !isDesignCom,
+        }"
+        :enable-clear="true"
+        :placeholder="searchBarPlaceholder"
+        @on-clear="onSearchTextInputClear"
+        @enter-key-up="onSearchTextInputEnterKeyUp"
+      />
+      <Button
+        classes="tw-w-full tw-mt-2 md:tw-rounded-l-none md:tw-mt-0"
+        variant="primary"
+        label="Search"
+        :disabled="false"
+        @on-click="onSearchBarClick"
+      />
+    </div>
+    <SellDomainNameListModal
+      v-model="searchText"
+      :currency="userCurrency || currency"
+      :is-busy="isBusy"
+      :is-design-com="isDesignCom"
+      :domain-name-items="domainNameItems"
+      :previous-search-text="previousSearchText"
+      :visible="isSearchDomainListModalVisible"
+      @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 SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
+import {
+  sellDomainNameMinSearchTextLength,
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+} from '../../constants/sell-domain-name-constants';
+import Events from '../../constants/event-constants';
+import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
+
+export default {
+  components: {
+    Button,
+    TextInput,
+    SellDomainNameListModal,
+  },
+  props: {
+    currency: {
+      type: Object,
+      required: true,
+    },
+    businessName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    designDraftToken: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data: () => ({
+    domainNameItems: undefined,
+    userCurrency: undefined,
+    isBusy: false,
+    isSearchDomainListModalVisible: false,
+    searchBarLabel: sellDomainNameSearchBarLabel,
+    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
+    searchText: '',
+    previousSearchText: '',
+  }),
+  created() {
+    if (this.businessName) {
+      this.searchText = this.businessName;
+    }
+  },
+  methods: {
+    async showModal() {
+      this.domainNameItems = [];
+      this.previousSearchText = '';
+
+      this.isSearchDomainListModalVisible = true;
+      if (this.searchText.length > sellDomainNameMinSearchTextLength) {
+        await this.onSearchDomainName(true);
+      }
+    },
+    onSearchTextInputClear() {
+      this.searchText = '';
+    },
+    async onSearchTextInputEnterKeyUp() {
+      await this.showModal();
+    },
+    async onSearchBarClick() {
+      await this.showModal();
+    },
+    onSellDomainNameListCloseModal() {
+      this.isSearchDomainListModalVisible = false;
+    },
+    async onSearchDomainName(isUserTriggered) {
+      await this.searchDomainName(isUserTriggered);
+    },
+    async searchDomainName(isUserTriggered) {
+      this.isBusy = true;
+      const searchSlug = this.cleanText(this.searchText);
+      this.previousSearchText = this.searchText;
+      try {
+        const request = { keyword: searchSlug, isUserTriggered, userText: this.searchText };
+
+        if (this.designDraftToken) {
+          request.designDraftToken = this.designDraftToken;
+        }
+
+        window.dispatchEvent(new CustomEvent(Events.DomainSearchEvent, { detail: request }));
+        const result = await brandCrowdApiClient.searchDomainNamesByKeywordAsync(request);
+        if (!result) {
+          this.domainNameItems = [];
+          return;
+        }
+
+        this.domainNameItems = result.items;
+        this.userCurrency = result.currency;
+      } catch {
+        this.domainNameItems = [];
+      } finally {
+        this.isBusy = false;
+      }
+    },
+    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();
+    },
+  },
+};
+</script>