@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="tw-flex tw-w-full tw-flex-col">
+    <ul :class="{ 'tw-ml-4': !hasBorderBoxListStyling }">
+      <li
+        v-for="(item, idx) in domainNameItems"
+        :key="`${item.domainName}-${idx}`"
+        class="tw-flex tw-w-full tw-items-center tw-border-grayscale-500"
+        :class="{
+          'tw-py-3': !hasBorderBoxListStyling,
+          'tw-border-solid tw-border-0 tw-border-t': idx > 0 && !hasBorderBoxListStyling,
+          'tw-border tw-bg-white tw-my-4 tw-py-5 tw-px-4 tw-drop-shadow-sm': hasBorderBoxListStyling,
+          'tw-rounded': isDesignCom && hasBorderBoxListStyling,
+        }"
+      >
+        <div class="tw-grow tw-flex tw-flex-col sm:tw-flex-row tw-justify-start">
+          <div
+            :class="{
+              'tw-text-lg': hasBorderBoxListStyling,
+            }"
+            class="tw-grow tw-font-bold tw-break-all"
+          >
+            {{ item.domainName }}
+          </div>
+          <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
+            <span class="tw-mr-2"> Cost Price: </span>
+            <Price
+              class="tw-font-bold"
+              :amount="getCostPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              suffix="/yr"
+            />
+          </div>
+          <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
+            <Price
+              class="tw-font-bold"
+              :amount="getPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              suffix="/yr"
+            />
+          </div>
+        </div>
+        <Button
+          :label="getPurchaseLabel(item)"
+          class="c-sell-domain-name-list--button tw-flex tw-justify-end"
+          variant="outline-success"
+          @on-click="onBuyNowClick(item)"
+        />
+      </li>
+    </ul>
+    <Button
+      v-if="shouldShowLoadMoreDomainsButton"
+      :label="loadMoreDomainsButtonText"
+      class="tw-self-center"
+      variant="outline"
+      @on-click="$emit('load-more-domains')"
+    />
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Price from '../../../../src/atoms/components/Price/Price.vue';
+
+import Events from '../../constants/event-constants';
+
+export default {
+  components: {
+    Button,
+    Price,
+  },
+  props: {
+    domainNameItems: {
+      type: Array,
+      required: true,
+    },
+    currency: {
+      type: Object,
+      required: true,
+    },
+    hasBorderBoxListStyling: {
+      type: Boolean,
+      default: false,
+    },
+    isUserAuthenticated: {
+      type: Boolean,
+      default: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowLoadMoreDomainsButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadMoreDomainsButtonText: {
+      type: String,
+      default: 'Load more domains',
+    },
+    domainSearchLocation: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['load-more-domains'],
+  methods: {
+    onBuyNowClick(domain) {
+      const request = domain;
+      if (typeof this.domainSearchLocation !== 'undefined') {
+        request.domainSearchLocation = this.domainSearchLocation;
+      }
+      window.dispatchEvent(
+        new CustomEvent(Events.DomainSelectedEvent, {
+          detail: request,
+        }),
+      );
+      if (this.isUserAuthenticated) {
+        window.location.href = domain.checkoutUrl;
+      }
+    },
+    getPrice(domain) {
+      return domain.price / (domain.recurringYears ?? 1);
+    },
+    getCostPrice(domain) {
+      return domain.costPrice / (domain.recurringYears ?? 1);
+    },
+    isFree(domain) {
+      return parseFloat(domain.price) === 0;
+    },
+    getPurchaseLabel(domain) {
+      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
+    },
+  },
+};
+</script>
+<style scoped>
+:deep(.c-sell-domain-name-list--button) {
+  min-width: 7rem;
+}
+</style>

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

@@ -0,0 +1,74 @@
+import { domainNamesFixture } from '../SellDomainNameList/SellDomainNameList.fixtures';
+import SellDomainNameListModal from './SellDomainNameListModal.vue';
+
+export default {
+  title: 'Components/SellDomainNameListModal',
+  component: SellDomainNameListModal,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      SellDomainNameListModal,
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: false,
+        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>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `,
+  };
+};
+
+export const SampleLoading = () => {
+  return {
+    components: {
+      SellDomainNameListModal,
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: true,
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US',
+        },
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log(`onSearch: ignored ${payload}`);
+      },
+    },
+    template: `
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `,
+  };
+};

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

@@ -0,0 +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>

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

@@ -0,0 +1,163 @@
+<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"
+    @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>
+<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 = searchSlug;
+      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%;
+  }
+}
+</style>

package/src/experiences/components/SellDomainNameSearch/SellDomainNameSearch.vue

@@ -0,0 +1,147 @@
+<template>
+  <div
+    :class="{
+      'tw-bg-white tw-py-4 tw-px-2 tw-align-middle tw-drop-shadow-sm tw-flex tw-justify-center':
+        showWhiteSearchBackground,
+    }"
+  >
+    <div :class="{ 'tw-container': showWhiteSearchBackground }">
+      <div v-if="headerTitle" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-2 tw-mt-8">{{ headerTitle }}</div>
+      <div v-if="headerSubtitle" class="tw-text-center tw-mb-8 tw-text-grayscale-600">{{ headerSubtitle }}</div>
+      <div
+        :class="{
+          'tw-gap-4': showWhiteSearchBackground,
+          'tw-mb-6 tw-mx-4': !showWhiteSearchBackground,
+        }"
+        class="tw-flex tw-flex-col md:tw-flex-row"
+      >
+        <div v-if="showWhiteSearchBackground" class="tw-flex tw-items-center">
+          <span class="tw-font-bold"> {{ searchBarPreText }} </span>
+        </div>
+        <TextInput
+          :model-value="searchText"
+          class="tw-grow"
+          icon="search"
+          :element-classes="searchTextFieldClasses"
+          :enable-clear="true"
+          :placeholder="searchBarPlaceholder"
+          @update:modelValue="onSearchTextInputChange"
+          @on-clear="onSearchTextInputClear"
+          @enter-key-up="onSearchTextInputEnterKeyUp"
+        />
+        <Button
+          :classes="searchButtonClasses"
+          variant="primary"
+          label="Search"
+          :disabled="false"
+          @on-click="onSearchBarClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
+
+import {
+  sellDomainNameMinSearchTextLength,
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+  sellDomainNameSearchBarPreText,
+} from '../../constants/sell-domain-name-constants';
+
+export default {
+  components: {
+    Button,
+    TextInput,
+  },
+  props: {
+    headerSubtitle: {
+      type: String,
+      default: null,
+    },
+    headerTitle: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    initialSearchTerm: {
+      type: String,
+      default: null,
+    },
+    showWhiteSearchBackground: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  emits: ['onSearch', 'onSearchTextInputChange'],
+  data() {
+    return {
+      searchBarLabel: sellDomainNameSearchBarLabel,
+      searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
+      searchText: this.initialSearchTerm ?? '',
+      searchBarPreText: sellDomainNameSearchBarPreText,
+    };
+  },
+  computed: {
+    searchTextFieldClasses() {
+      let textFieldClasses = '';
+      if (this.isDesignCom) {
+        textFieldClasses += 'tw-h-12 tw-mb-0 tw-rounded ';
+        if (!this.showWhiteSearchBackground) {
+          textFieldClasses += '!tw-rounded-r-none';
+        }
+      } else {
+        textFieldClasses += 'tw-h-12 tw-mb-0 ';
+        if (!this.showWhiteSearchBackground) {
+          textFieldClasses += 'md:tw-rounded-r-none';
+        }
+      }
+      return textFieldClasses;
+    },
+    searchButtonClasses() {
+      let searchButtonClasses = 'tw-w-full tw-mt-2 md:tw-mt-0 ';
+      if (!this.showWhiteSearchBackground) {
+        searchButtonClasses += 'md:tw-rounded-l-none';
+      }
+      return searchButtonClasses;
+    },
+  },
+  watch: {
+    initialSearchTerm(val) {
+      this.searchText = val;
+    },
+  },
+  mounted() {
+    this.searchText = this.initialSearchTerm;
+  },
+  methods: {
+    onSearchTextInputClear() {
+      this.searchText = '';
+    },
+    onSearchBarClick() {
+      this.onSearch();
+    },
+    onSearchTextInputEnterKeyUp() {
+      this.onSearch();
+    },
+    onSearch() {
+      if (this.searchText.length < sellDomainNameMinSearchTextLength) {
+        return;
+      }
+
+      this.$emit('onSearch', { searchText: this.searchText, isUserTriggered: true });
+    },
+    onSearchTextInputChange($event) {
+      this.searchText = $event;
+      this.$emit('onSearchTextInputChange', this.searchText);
+    },
+  },
+};
+</script>