@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

package/src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.vue

@@ -1,124 +1,124 @@
-<template>
-  <Modal
-    classes="sell-domain-name-list-modal--modal tw-text-black"
-    close-on-esc
-    full-screen-breakpoint="md"
-    :visible="visible"
-    :hide-scrollbar="false"
-    :show-modal-background-image="false"
-    :content-classes="isBusy ? ['tw-overflow-y-hidden'] : []"
-    @close-modal="onCloseModal"
-  >
-    <template #header>
-      <SellDomainNameSearch
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :header-title="headerTitle"
-        :header-subtitle="headerSubtitle"
-        :initial-search-term="modelValue"
-        @onSearch="onSearch"
-        @onSearchTextInputChange="onSearchTextInputChange"
-      />
-    </template>
-    <template #default>
-      <SellDomainNameSearchResult
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :previous-search-text="previousSearchText"
-        :is-busy="isBusy"
-        :domain-name-items="domainNameItems"
-        :currency="currency"
-        :domain-search-location="domainSearchLocation"
-      />
-    </template>
-  </Modal>
-</template>
-<script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
-
-import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
-import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
-
-const headerSubtitle = 'Buy matching domain name for your brand';
-const headerTitle = 'Search a domain name';
-
-export default {
-  components: {
-    Modal,
-    SellDomainNameSearch,
-    SellDomainNameSearchResult,
-  },
-  props: {
-    currency: {
-      type: Object,
-      required: true,
-    },
-    domainNameItems: {
-      type: Array,
-      required: false,
-      default: undefined,
-    },
-    headerSubtitle: {
-      type: String,
-      default: () => headerSubtitle,
-    },
-    headerTitle: {
-      type: String,
-      default: () => headerTitle,
-    },
-    isBusy: {
-      type: Boolean,
-      required: true,
-    },
-    previousSearchText: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    domainSearchLocation: {
-      type: String,
-      default: undefined,
-    },
-  },
-  emits: ['close-modal', 'input', 'search'],
-  methods: {
-    onSearch() {
-      this.$emit('search');
-    },
-    onCloseModal() {
-      this.$emit('close-modal');
-    },
-    onSearchTextInputChange(newVal) {
-      this.$emit('update:model-value', newVal);
-    },
-  },
-};
-</script>
-<style scoped>
-@media (max-width: 640px) {
-  :deep(.sell-domain-name-list-modal--modal) {
-    height: 90vh;
-    width: 90vw;
-  }
-}
-
-@media (min-width: 640px) {
-  :deep(.sell-domain-name-list-modal--modal) {
-    height: 70vh;
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <Modal
+    classes="sell-domain-name-list-modal--modal tw-text-black"
+    close-on-esc
+    full-screen-breakpoint="md"
+    :visible="visible"
+    :hide-scrollbar="false"
+    :show-modal-background-image="false"
+    :content-classes="isBusy ? ['tw-overflow-y-hidden'] : []"
+    @close-modal="onCloseModal"
+  >
+    <template #header>
+      <SellDomainNameSearch
+        v-if="visible"
+        :is-design-com="isDesignCom"
+        :header-title="headerTitle"
+        :header-subtitle="headerSubtitle"
+        :initial-search-term="modelValue"
+        @onSearch="onSearch"
+        @onSearchTextInputChange="onSearchTextInputChange"
+      />
+    </template>
+    <template #default>
+      <SellDomainNameSearchResult
+        v-if="visible"
+        :is-design-com="isDesignCom"
+        :previous-search-text="previousSearchText"
+        :is-busy="isBusy"
+        :domain-name-items="domainNameItems"
+        :currency="currency"
+        :domain-search-location="domainSearchLocation"
+      />
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+
+import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
+import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
+
+const headerSubtitle = 'Buy matching domain name for your brand';
+const headerTitle = 'Search a domain name';
+
+export default {
+  components: {
+    Modal,
+    SellDomainNameSearch,
+    SellDomainNameSearchResult,
+  },
+  props: {
+    currency: {
+      type: Object,
+      required: true,
+    },
+    domainNameItems: {
+      type: Array,
+      required: false,
+      default: undefined,
+    },
+    headerSubtitle: {
+      type: String,
+      default: () => headerSubtitle,
+    },
+    headerTitle: {
+      type: String,
+      default: () => headerTitle,
+    },
+    isBusy: {
+      type: Boolean,
+      required: true,
+    },
+    previousSearchText: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    domainSearchLocation: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['close-modal', 'input', 'search'],
+  methods: {
+    onSearch() {
+      this.$emit('search');
+    },
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+    onSearchTextInputChange(newVal) {
+      this.$emit('update:model-value', newVal);
+    },
+  },
+};
+</script>
+<style scoped>
+@media (max-width: 640px) {
+  :deep(.sell-domain-name-list-modal--modal) {
+    height: 90vh;
+    width: 90vw;
+  }
+}
+
+@media (min-width: 640px) {
+  :deep(.sell-domain-name-list-modal--modal) {
+    height: 70vh;
+    width: 100%;
+  }
+}
+</style>

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,205 +1,205 @@
-<template>
-  <template v-if="!!this.$slots['header']">
-    <Modal
-      classes="sell-domain-name-list-modal--modal tw-text-black"
-      close-on-esc
-      full-screen-breakpoint="md"
-      :visible="visible"
-      :hide-scrollbar="false"
-      :show-modal-background-image="false"
-      @close-modal="onCloseModal"
-    >
-      <template #header>
-        <slot name="header" />
-        <hr class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-grayscale-400 tw-py-2 header-divider" />
-      </template>
-      <template #default>
-        <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-my-5 tw-mb-0">{{ headerTitle }}</h3>
-        <div class="tw-text-center tw-mb-8 tw-text-grayscale-600">{{ headerSubtitle }}</div>
-        <SellDomainNameSearch
-          v-if="visible"
-          :is-design-com="isDesignCom"
-          :initial-search-term="initialSearchTerm"
-          @onSearch="onSearchDomainName"
-          @onSearchTextInputChange="onSearchTextInputChange"
-        />
-        <SellDomainNameSearchResult
-          v-if="visible"
-          :is-design-com="isDesignCom"
-          :previous-search-text="previousSearchText"
-          :is-busy="isBusy"
-          :domain-name-items="domainNameItems"
-          :currency="userCurrency"
-          :model-value="modelValue"
-        />
-      </template>
-    </Modal>
-  </template>
-  <template v-else>
-    <Modal
-      classes="sell-domain-name-list-modal--modal tw-text-black"
-      close-on-esc
-      full-screen-breakpoint="md"
-      :visible="visible"
-      :hide-scrollbar="false"
-      :show-modal-background-image="false"
-      @close-modal="onCloseModal"
-    >
-      <template #header>
-        <SellDomainNameSearch
-          v-if="visible"
-          :is-design-com="isDesignCom"
-          :header-title="headerTitle"
-          :header-subtitle="headerSubtitle"
-          :initial-search-term="initialSearchTerm"
-          @onSearch="onSearchDomainName"
-          @onSearchTextInputChange="onSearchTextInputChange"
-        />
-      </template>
-      <template #default>
-        <SellDomainNameSearchResult
-          v-if="visible"
-          :is-design-com="isDesignCom"
-          :previous-search-text="previousSearchText"
-          :is-busy="isBusy"
-          :domain-name-items="domainNameItems"
-          :currency="userCurrency"
-          :model-value="modelValue"
-        />
-      </template>
-    </Modal>
-  </template>
-</template>
-<script>
-import Modal from '../../../../src/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';
-
-export default {
-  components: {
-    Modal,
-    SellDomainNameSearch,
-    SellDomainNameSearchResult,
-  },
-  props: {
-    headerSubtitle: {
-      type: String,
-      default: () => headerSubtitle,
-    },
-    headerTitle: {
-      type: String,
-      default: () => headerTitle,
-    },
-    modelValue: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    initialSearchTerm: {
-      type: String,
-      default: null,
-    },
-    designDraftToken: {
-      type: String,
-      default: undefined,
-    },
-    logoDraftToken: {
-      type: String,
-      default: undefined,
-    },
-  },
-  data: () => ({
-    domainNameItems: [],
-    userCurrency: {},
-    isBusy: false,
-    searchText: '',
-    previousSearchText: '',
-  }),
-  created() {
-    if (this.initialSearchTerm) {
-      this.searchText = this.initialSearchTerm;
-      this.searchDomainName(false);
-    }
-  },
-  methods: {
-    async onSearchDomainName(event) {
-      this.searchText = event.searchText;
-      await this.searchDomainName(event.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;
-        }
-
-        if (this.logoDraftToken) {
-          request.logoDraftToken = this.logoDraftToken;
-        }
-
-        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;
-        this.$emit('on-search-results-loaded');
-      }
-    },
-    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();
-    },
-    onCloseModal() {
-      this.$emit('close-modal');
-    },
-    onSearchTextInputChange(newVal) {
-      this.searchText = newVal;
-    },
-  },
-};
-</script>
-<style scoped>
-@media (max-width: 640px) {
-  :deep(.sell-domain-name-list-modal--modal) {
-    height: 90vh;
-    width: 90vw;
-  }
-}
-
-@media (min-width: 640px) {
-  :deep(.sell-domain-name-list-modal--modal) {
-    height: 70vh;
-    width: 100%;
-  }
-}
-
-.header-divider {
-  margin: 0 -1rem;
-}
-</style>
+<template>
+  <template v-if="!!this.$slots['header']">
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <slot name="header" />
+        <hr class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-grayscale-400 tw-py-2 header-divider" />
+      </template>
+      <template #default>
+        <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-my-5 tw-mb-0">{{ headerTitle }}</h3>
+        <div class="tw-text-center tw-mb-8 tw-text-grayscale-600">{{ headerSubtitle }}</div>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
+  <template v-else>
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :header-title="headerTitle"
+          :header-subtitle="headerSubtitle"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+      </template>
+      <template #default>
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
+</template>
+<script>
+import Modal from '../../../../src/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';
+
+export default {
+  components: {
+    Modal,
+    SellDomainNameSearch,
+    SellDomainNameSearchResult,
+  },
+  props: {
+    headerSubtitle: {
+      type: String,
+      default: () => headerSubtitle,
+    },
+    headerTitle: {
+      type: String,
+      default: () => headerTitle,
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    initialSearchTerm: {
+      type: String,
+      default: null,
+    },
+    designDraftToken: {
+      type: String,
+      default: undefined,
+    },
+    logoDraftToken: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data: () => ({
+    domainNameItems: [],
+    userCurrency: {},
+    isBusy: false,
+    searchText: '',
+    previousSearchText: '',
+  }),
+  created() {
+    if (this.initialSearchTerm) {
+      this.searchText = this.initialSearchTerm;
+      this.searchDomainName(false);
+    }
+  },
+  methods: {
+    async onSearchDomainName(event) {
+      this.searchText = event.searchText;
+      await this.searchDomainName(event.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;
+        }
+
+        if (this.logoDraftToken) {
+          request.logoDraftToken = this.logoDraftToken;
+        }
+
+        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;
+        this.$emit('on-search-results-loaded');
+      }
+    },
+    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();
+    },
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+    onSearchTextInputChange(newVal) {
+      this.searchText = newVal;
+    },
+  },
+};
+</script>
+<style scoped>
+@media (max-width: 640px) {
+  :deep(.sell-domain-name-list-modal--modal) {
+    height: 90vh;
+    width: 90vw;
+  }
+}
+
+@media (min-width: 640px) {
+  :deep(.sell-domain-name-list-modal--modal) {
+    height: 70vh;
+    width: 100%;
+  }
+}
+
+.header-divider {
+  margin: 0 -1rem;
+}
+</style>