@designcrowd/fe-shared-lib 1.5.36 → 1.6.0-eng-4039

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

@@ -1,222 +1,222 @@
-<template>
-  <template v-if="!!$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"
-          @on-buy-now-click="onBuyNowClick"
-        />
-      </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 || domainSearchHeaderTitle"
-          :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
-          :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 '../../../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';
-import { getCurrentLocale, sellDomainNameModalApplicationTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Modal,
-    SellDomainNameSearch,
-    SellDomainNameSearchResult,
-  },
-  props: {
-    headerSubtitle: {
-      type: String,
-      default: null,
-    },
-    headerTitle: {
-      type: String,
-      default: null,
-    },
-    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,
-    },
-  },
-  setup() {
-    return {
-      domainSearchHeaderTitle: sellDomainNameModalApplicationTr('domainSearchHeaderTitle'),
-      domainSearchHeaderSubtitle: sellDomainNameModalApplicationTr('domainSearchHeaderSubtitle'),
-    };
-  },
-  data: () => ({
-    domainNameItems: [],
-    userCurrency: {},
-    isBusy: false,
-    searchText: '',
-    previousSearchText: '',
-  }),
-  created() {
-    if (this.initialSearchTerm) {
-      this.searchText = this.initialSearchTerm;
-      this.searchDomainName(false);
-    }
-  },
-  computed: {
-    currentLocale() {
-      return getCurrentLocale();
-    },
-  },
-  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;
-        }
-
-        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;
-        }
-        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');
-    },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
-    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="!!$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"
+          @on-buy-now-click="onBuyNowClick"
+        />
+      </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 || domainSearchHeaderTitle"
+          :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
+          :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 '../../../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';
+import { getCurrentLocale, sellDomainNameModalApplicationTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Modal,
+    SellDomainNameSearch,
+    SellDomainNameSearchResult,
+  },
+  props: {
+    headerSubtitle: {
+      type: String,
+      default: null,
+    },
+    headerTitle: {
+      type: String,
+      default: null,
+    },
+    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,
+    },
+  },
+  setup() {
+    return {
+      domainSearchHeaderTitle: sellDomainNameModalApplicationTr('domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: sellDomainNameModalApplicationTr('domainSearchHeaderSubtitle'),
+    };
+  },
+  data: () => ({
+    domainNameItems: [],
+    userCurrency: {},
+    isBusy: false,
+    searchText: '',
+    previousSearchText: '',
+  }),
+  created() {
+    if (this.initialSearchTerm) {
+      this.searchText = this.initialSearchTerm;
+      this.searchDomainName(false);
+    }
+  },
+  computed: {
+    currentLocale() {
+      return getCurrentLocale();
+    },
+  },
+  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;
+        }
+
+        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;
+        }
+        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');
+    },
+    onBuyNowClick() {
+      this.$emit('on-buy-now-click');
+    },
+    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>

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.de-DE.json

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Domainname suchen",
-    "domainSearchHeaderSubtitle" : "Kaufen Sie eine passende Domain für Ihre Marke"
-  }
+{
+  "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

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Busca un nombre de dominio",
-    "domainSearchHeaderSubtitle" : "Compra un nombre de dominio que coincida con tu marca"
-  }
+{
+  "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-CA.json

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Rechercher un nom de domaine",
-    "domainSearchHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque"
-  }
+{
+  "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.fr-FR.json

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Rechercher un nom de domaine",
-    "domainSearchHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque"
-  }
+{
+  "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

@@ -1,6 +1,6 @@
-{
-    "sellDomainNameModalApplication": {
-        "domainSearchHeaderTitle": "Search a domain name",
-        "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
-    }
+{
+    "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-BR.json

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Pesquisar um nome de domínio",
-    "domainSearchHeaderSubtitle" : "Compre um nome de domínio correspondente à sua marca"
-  }
+{
+  "sellDomainNameModalApplication" : {
+    "domainSearchHeaderTitle" : "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle" : "Compre um nome de domínio correspondente à sua marca"
+  }
 }

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.pt-PT.json

@@ -1,6 +1,6 @@
-{
-  "sellDomainNameModalApplication" : {
-    "domainSearchHeaderTitle" : "Pesquisar um nome de domínio",
-    "domainSearchHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca"
-  }
+{
+  "sellDomainNameModalApplication" : {
+    "domainSearchHeaderTitle" : "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca"
+  }
 }

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.de-DE.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Suche",
-    "searchBarLabel" : "Suche",
-    "searchBarPlaceholder" : "Domainnamen suchen",
-    "searchBarPreText" : "Domainname"
-  }
+{
+  "sellDomainNameSearch" : {
+    "searchButtonLabel" : "Suche",
+    "searchBarLabel" : "Suche",
+    "searchBarPlaceholder" : "Domainnamen suchen",
+    "searchBarPreText" : "Domainname"
+  }
 }

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.es-ES.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Buscar",
-    "searchBarLabel" : "Buscar",
-    "searchBarPlaceholder" : "Busca nombres de dominio",
-    "searchBarPreText" : "Nombre de dominio"
-  }
+{
+  "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-CA.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Rechercher",
-    "searchBarLabel" : "Rechercher",
-    "searchBarPlaceholder" : "Rechercher des noms de domaine",
-    "searchBarPreText" : "Nom de domaine"
-  }
+{
+  "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.fr-FR.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Rechercher",
-    "searchBarLabel" : "Rechercher",
-    "searchBarPlaceholder" : "Rechercher des noms de domaine",
-    "searchBarPreText" : "Nom de domaine"
-  }
+{
+  "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

@@ -1,8 +1,8 @@
-{
-    "sellDomainNameSearch": {
-        "searchButtonLabel": "Search",
-        "searchBarLabel": "Search",
-        "searchBarPlaceholder": "Search domain names",
-        "searchBarPreText": "Domain name"
-    }
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "searchBarPreText": "Domain name"
+    }
 }

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.pt-BR.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Pesquisar",
-    "searchBarLabel" : "Pesquisar",
-    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
-    "searchBarPreText" : "Nome de domínio"
-  }
+{
+  "sellDomainNameSearch" : {
+    "searchButtonLabel" : "Pesquisar",
+    "searchBarLabel" : "Pesquisar",
+    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
+    "searchBarPreText" : "Nome de domínio"
+  }
 }

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.pt-PT.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameSearch" : {
-    "searchButtonLabel" : "Pesquisar",
-    "searchBarLabel" : "Pesquisar",
-    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
-    "searchBarPreText" : "Nome de domínio"
-  }
+{
+  "sellDomainNameSearch" : {
+    "searchButtonLabel" : "Pesquisar",
+    "searchBarLabel" : "Pesquisar",
+    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
+    "searchBarPreText" : "Nome de domínio"
+  }
 }