@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

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

@@ -1,155 +1,155 @@
-<template>
-  <div>
-    {{ domainSearchOrConnectHeaderSubtitle }}
-    <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="searchButtonLabel"
-        :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"
-      :search-button-label="searchButtonLabel"
-      @close-modal="onSellDomainNameListCloseModal"
-      @search="onSearchDomainName(true)"
-    />
-  </div>
-</template>
-<script>
-import { sellDomainNameWidgetTr } from '../../../useSharedLibTranslate';
-import Button from '../../../atoms/components/Button/Button.vue';
-import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
-import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import { sellDomainNameMinSearchTextLength } 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,
-    },
-  },
-  setup() {
-    return {
-      searchButtonLabel: sellDomainNameWidgetTr('searchButtonLabel'),
-      searchBarLabel: sellDomainNameWidgetTr('searchBarLabel'),
-      searchBarPlaceholder: sellDomainNameWidgetTr('searchBarPlaceholder'),
-      domainSearchOrConnectHeaderSubtitle: sellDomainNameWidgetTr('domainSearchOrConnectHeaderSubtitle'),
-    };
-  },
-  data: () => ({
-    domainNameItems: undefined,
-    userCurrency: undefined,
-    isBusy: false,
-    isSearchDomainListModalVisible: false,
-    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>
+    {{ domainSearchOrConnectHeaderSubtitle }}
+    <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="searchButtonLabel"
+        :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"
+      :search-button-label="searchButtonLabel"
+      @close-modal="onSellDomainNameListCloseModal"
+      @search="onSearchDomainName(true)"
+    />
+  </div>
+</template>
+<script>
+import { sellDomainNameWidgetTr } from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
+import { sellDomainNameMinSearchTextLength } 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,
+    },
+  },
+  setup() {
+    return {
+      searchButtonLabel: sellDomainNameWidgetTr('searchButtonLabel'),
+      searchBarLabel: sellDomainNameWidgetTr('searchBarLabel'),
+      searchBarPlaceholder: sellDomainNameWidgetTr('searchBarPlaceholder'),
+      domainSearchOrConnectHeaderSubtitle: sellDomainNameWidgetTr('domainSearchOrConnectHeaderSubtitle'),
+    };
+  },
+  data: () => ({
+    domainNameItems: undefined,
+    userCurrency: undefined,
+    isBusy: false,
+    isSearchDomainListModalVisible: false,
+    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>

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.de-DE.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Suche",
-    "searchBarLabel" : "Suche",
-    "searchBarPlaceholder" : "Domainnamen suchen",
-    "domainSearchOrConnectHeaderSubtitle" : "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Suche",
+    "searchBarLabel" : "Suche",
+    "searchBarPlaceholder" : "Domainnamen suchen",
+    "domainSearchOrConnectHeaderSubtitle" : "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
+  }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.es-ES.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Buscar",
-    "searchBarLabel" : "Buscar",
-    "searchBarPlaceholder" : "Busca nombres de dominio",
-    "domainSearchOrConnectHeaderSubtitle" : "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Buscar",
+    "searchBarLabel" : "Buscar",
+    "searchBarPlaceholder" : "Busca nombres de dominio",
+    "domainSearchOrConnectHeaderSubtitle" : "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
+  }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.fr-CA.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Rechercher",
-    "searchBarLabel" : "Rechercher",
-    "searchBarPlaceholder" : "Rechercher des noms de domaine",
-    "domainSearchOrConnectHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Rechercher",
+    "searchBarLabel" : "Rechercher",
+    "searchBarPlaceholder" : "Rechercher des noms de domaine",
+    "domainSearchOrConnectHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
+  }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.fr-FR.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Rechercher",
-    "searchBarLabel" : "Rechercher",
-    "searchBarPlaceholder" : "Rechercher des noms de domaine",
-    "domainSearchOrConnectHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Rechercher",
+    "searchBarLabel" : "Rechercher",
+    "searchBarPlaceholder" : "Rechercher des noms de domaine",
+    "domainSearchOrConnectHeaderSubtitle" : "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
+  }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.json

@@ -1,8 +1,8 @@
-{
-    "sellDomainNameWidget": {
-        "searchButtonLabel": "Search",
-        "searchBarLabel": "Search",
-        "searchBarPlaceholder": "Search domain names",
-        "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
-    }
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
+    }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.pt-BR.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Pesquisar",
-    "searchBarLabel" : "Pesquisar",
-    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
-    "domainSearchOrConnectHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Pesquisar",
+    "searchBarLabel" : "Pesquisar",
+    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  }
 }

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.pt-PT.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameWidget" : {
-    "searchButtonLabel" : "Pesquisar",
-    "searchBarLabel" : "Pesquisar",
-    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
-    "domainSearchOrConnectHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
-  }
+{
+  "sellDomainNameWidget" : {
+    "searchButtonLabel" : "Pesquisar",
+    "searchBarLabel" : "Pesquisar",
+    "searchBarPlaceholder" : "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle" : "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  }
 }

package/src/experiences/components/SideNavigationPanel/MenuCta.vue

@@ -1,62 +1,62 @@
-<template>
-  <component :is="componentTag" class="menu-item" :class="variantClasses" v-bind="componentAttrs" @click="handleClick">
-    <Icon v-if="icon" :name="icon" :size="iconSize" />
-    <span>{{ label }}</span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-type MenuCtaVariant = 'primary' | 'secondary' | 'empty';
-
-interface MenuCtaProps {
-  label: string;
-  variant?: MenuCtaVariant;
-  icon?: string;
-  iconSize?: 'sm' | 'md' | 'lg';
-  url?: string;
-  action?: () => void;
-}
-
-const props = withDefaults(defineProps<MenuCtaProps>(), {
-  variant: 'primary',
-  iconSize: 'sm',
-});
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-const componentTag = computed(() => (props.action ? 'button' : 'a'));
-
-const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
-
-const variantClasses = computed(() => {
-  switch (props.variant) {
-    case 'primary':
-      return 'tw-bg-primary-500 tw-text-white hover:tw-bg-primary-700';
-    case 'secondary':
-      return 'tw-justify-center tw-bg-secondary-500 tw-text-white hover:tw-bg-secondary-700';
-    case 'empty':
-      return 'tw-justify-center tw-text-grayscale-700 hover:tw-bg-gray-600 tw-text-center';
-    default:
-      return '';
-  }
-});
-
-const handleClick = (event: MouseEvent) => {
-  if (props.action) {
-    props.action();
-  }
-  emit('click', event);
-};
-</script>
-
-<style scoped>
-.menu-item {
-  @apply tw-p-2 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-font-normal tw-cursor-pointer;
-  height: 36px;
-}
-</style>
+<template>
+  <component :is="componentTag" class="menu-item" :class="variantClasses" v-bind="componentAttrs" @click="handleClick">
+    <Icon v-if="icon" :name="icon" :size="iconSize" />
+    <span>{{ label }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+type MenuCtaVariant = 'primary' | 'secondary' | 'empty';
+
+interface MenuCtaProps {
+  label: string;
+  variant?: MenuCtaVariant;
+  icon?: string;
+  iconSize?: 'sm' | 'md' | 'lg';
+  url?: string;
+  action?: () => void;
+}
+
+const props = withDefaults(defineProps<MenuCtaProps>(), {
+  variant: 'primary',
+  iconSize: 'sm',
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const componentTag = computed(() => (props.action ? 'button' : 'a'));
+
+const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
+
+const variantClasses = computed(() => {
+  switch (props.variant) {
+    case 'primary':
+      return 'tw-bg-primary-500 tw-text-white hover:tw-bg-primary-700';
+    case 'secondary':
+      return 'tw-justify-center tw-bg-secondary-500 tw-text-white hover:tw-bg-secondary-700';
+    case 'empty':
+      return 'tw-justify-center tw-text-grayscale-700 hover:tw-bg-gray-600 tw-text-center';
+    default:
+      return '';
+  }
+});
+
+const handleClick = (event: MouseEvent) => {
+  if (props.action) {
+    props.action();
+  }
+  emit('click', event);
+};
+</script>
+
+<style scoped>
+.menu-item {
+  @apply tw-p-2 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-font-normal tw-cursor-pointer;
+  height: 36px;
+}
+</style>

package/src/experiences/components/SideNavigationPanel/MenuItem.vue

@@ -1,40 +1,40 @@
-<template>
-  <component
-    :is="componentTag"
-    class="menu-item"
-    :class="{ 'tw-bg-grayscale-400': isActive, 'hover:tw-bg-grayscale-300': !isActive }"
-    v-bind="componentAttrs"
-    @click="handleClick"
-  >
-    <Icon class="icon" :name="icon" size="sm" />
-    <span class="tw-text-md tw-font-medium tw-text-grayscale-700">{{ label }}</span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-import type { IMenuItem } from './types';
-
-const props = defineProps<IMenuItem>();
-
-const componentTag = computed(() => (props.action ? 'button' : 'a'));
-
-const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
-
-const handleClick = () => {
-  if (props.action) {
-    props.action();
-  }
-};
-</script>
-
-<style scoped>
-.menu-item {
-  @apply tw-p-2 tw-mb-1 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-cursor-pointer;
-  height: 36px;
-}
-.icon svg {
-  color: var(--text-secondary, rgba(61, 61, 61, 1));
-}
-</style>
+<template>
+  <component
+    :is="componentTag"
+    class="menu-item"
+    :class="{ 'tw-bg-grayscale-400': isActive, 'hover:tw-bg-grayscale-300': !isActive }"
+    v-bind="componentAttrs"
+    @click="handleClick"
+  >
+    <Icon class="icon" :name="icon" size="sm" />
+    <span class="tw-text-md tw-font-medium tw-text-grayscale-700">{{ label }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+import type { IMenuItem } from './types';
+
+const props = defineProps<IMenuItem>();
+
+const componentTag = computed(() => (props.action ? 'button' : 'a'));
+
+const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
+
+const handleClick = () => {
+  if (props.action) {
+    props.action();
+  }
+};
+</script>
+
+<style scoped>
+.menu-item {
+  @apply tw-p-2 tw-mb-1 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-cursor-pointer;
+  height: 36px;
+}
+.icon svg {
+  color: var(--text-secondary, rgba(61, 61, 61, 1));
+}
+</style>