@designcrowd/fe-shared-lib 1.2.0-ml-jj-6 → 1.2.0-ml-jj-8

package/index.js

@@ -19,8 +19,7 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
-export { default as useSellDomainNameSearchContent } from './src/experiences/components/SellDomainNameSearch/UseSellDomainNameSearchContent';
-export { default as useSellDomainNameListSearchResultContent } from './src/experiences/components/SellDomainNameSearchResult/UseSellDomainNameListSearchResultContent';
+export { default as useSellDomainContent } from './src/experiences/components/SellDomainNameSearch/useSellDomainContent';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0-ml-jj-6",
+  "version": "1.2.0-ml-jj-8",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

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

@@ -7,7 +7,7 @@ export default {
   component: PublishBrandPageModal,
 };
 
-const locale = 'en-test';
+const locale = 'en-US';
 
 const localePublishBrandPageModalContent = {
   'en-US': {
@@ -32,28 +32,6 @@ const localePublishBrandPageModalContent = {
       hasAlreadyPurchasedDomainCloseButtonLabel: 'No thanks, maybe later',
     },
   },
-  'en-test': {
-    searchButtonLabel: '++Search',
-    publishBrandPageModalContent: {
-      firstTimePublishHeaderLabel: `++Set the URL for your Website`,
-      sitePublishedLabel: `++Site published!`,
-      publishSuccessLabel: `++Your Website is live! Start using your link:`,
-      freePublishCardTitleLabel: `++Free Address`,
-      freePublishCardDescriptionLabel: `++Choose a free address to publish now. You can always edit the URL later`,
-      slugInputPlaceholderYourNameLabel: '++your-name',
-      slugInputPlaceholderYourBusinessNameLabel: '++your-business-name',
-      freeDomainLabel: `++Free domain`,
-      purchasedDomainLabel: `++Purchased domain`,
-      setUrlLabel: '++Set URL',
-      publishLabel: '++Publish',
-      viewMoreDomainLabel: '++VIEW MORE DOMAINS',
-      viewMyWebsiteLabel: '++View Website',
-      copyLabel: '++Copy',
-      copySuccessLabel: '++Copied!',
-      publishedSuccessDescriptionLabel: '++Buy matching domain name for your brand',
-      hasAlreadyPurchasedDomainCloseButtonLabel: '++No thanks, maybe later',
-    },
-  },
 };
 
 export const NotPublishedWithPurchasedDomains = () => {

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -241,6 +241,7 @@
       :domain-name-items="domainNameItems"
       :previous-search-text="previousSearchText"
       :visible="isModalVisible"
+      :search-button-label="content.searchButtonLabel"
       :domain-search-location="sitePublishedModal"
       @close-modal="onSellDomainNameListCloseModal"
       @search="searchDomainName(true)"
@@ -424,8 +425,7 @@ export default {
       publishSuccessLabel: this.content.publishBrandPageModalContent.publishSuccessLabel,
       freePublishCardTitleLabel: this.content.publishBrandPageModalContent.freePublishCardTitleLabel,
       freePublishCardDescriptionLabel: this.content.publishBrandPageModalContent.freePublishCardDescriptionLabel,
-      slugInputPlaceholderYourNameLabel:
-        this.content.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
+      slugInputPlaceholderYourNameLabel: this.content.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
       slugInputPlaceholderYourBusinessNameLabel:
         this.content.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
       freeDomainLabel: this.content.publishBrandPageModalContent.freeDomainLabel,

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

@@ -22,7 +22,7 @@
             {{ 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>
+            <span class="tw-mr-2"> {{ costPriceLabel }} </span>
             <Price
               class="tw-font-bold"
               :amount="getCostPrice(item)"
@@ -30,7 +30,7 @@
               :currency="currency"
               fraction="2"
               :show-abbreviation="false"
-              suffix="/yr"
+              :suffix="pricePerYearLabel"
             />
           </div>
           <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
@@ -41,7 +41,7 @@
               :currency="currency"
               fraction="2"
               :show-abbreviation="false"
-              suffix="/yr"
+              :suffix="pricePerYearLabel"
             />
           </div>
         </div>
@@ -63,9 +63,10 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Price from '../../../../src/atoms/components/Price/Price.vue';
-
+import { computed } from 'vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import Price from '../../../atoms/components/Price/Price.vue';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
 import Events from '../../constants/event-constants';
 
 export default {
@@ -108,6 +109,16 @@ export default {
     },
   },
   emits: ['load-more-domains'],
+  setup() {
+    const contentProvider = useSellDomainContent();
+    const content = contentProvider.getContent();
+    return {
+      freeDomainButtonLabel: computed(() => content.value.freeDomainButtonLabel),
+      buyNowButtonLabel: computed(() => content.value.buyNowButtonLabel),
+      pricePerYearLabel: computed(() => content.value.pricePerYearLabel),
+      costPriceLabel: computed(() => content.value.costPriceLabel),
+    };
+  },
   methods: {
     onBuyNowClick(domain) {
       const request = domain;
@@ -133,7 +144,7 @@ export default {
       return parseFloat(domain.price) === 0;
     },
     getPurchaseLabel(domain) {
-      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
+      return this.isFree(domain) ? this.freeDomainButtonLabel : this.buyNowButtonLabel;
     },
   },
 };

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

@@ -1,5 +1,6 @@
 import { domainNamesFixture } from '../SellDomainNameList/SellDomainNameList.fixtures';
 import SellDomainNameListModal from './SellDomainNameListModal.vue';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
 
 export default {
   title: 'Components/SellDomainNameListModal',
@@ -11,6 +12,20 @@ export const Sample = () => {
     components: {
       SellDomainNameListModal,
     },
+    setup() {
+      const contentProvider = useSellDomainContent();
+
+      setTimeout(() => {
+        console.log('SETTE');
+        contentProvider.setGlobalContentHandler(() => {
+          return {
+            domainSearchHeaderTitle: '++++Search a domain name',
+          };
+        });
+      }, 7000);
+
+      return {};
+    },
     data() {
       return {
         domainNamesFixture,

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

@@ -13,9 +13,10 @@
       <SellDomainNameSearch
         v-if="visible"
         :is-design-com="isDesignCom"
-        :header-title="headerTitle"
-        :header-subtitle="headerSubtitle"
+        :header-title="headerTitle || domainSearchHeaderTitle"
+        :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
         :initial-search-term="modelValue"
+        :search-button-label="searchButtonLabel"
         @onSearch="onSearch"
         @onSearchTextInputChange="onSearchTextInputChange"
       />
@@ -38,9 +39,8 @@ import Modal from '../../../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';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
+import { computed } from 'vue';
 
 export default {
   components: {
@@ -60,11 +60,11 @@ export default {
     },
     headerSubtitle: {
       type: String,
-      default: () => headerSubtitle,
+      default: null,
     },
     headerTitle: {
       type: String,
-      default: () => headerTitle,
+      default: null,
     },
     isBusy: {
       type: Boolean,
@@ -92,8 +92,20 @@ export default {
       type: String,
       default: undefined,
     },
+    searchButtonLabel: {
+      type: String,
+      default: 'Search',
+    },
   },
   emits: ['close-modal', 'input', 'search'],
+  setup() {
+    const contentProvider = useSellDomainContent();
+    const content = contentProvider.getContent();
+    return {
+      domainSearchHeaderTitle: computed(() => content.value.domainSearchHeaderTitle),
+      domainSearchHeaderSubtitle: computed(() => content.value.domainSearchHeaderSubtitle),
+    };
+  },
   methods: {
     onSearch() {
       this.$emit('search');

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

@@ -49,8 +49,8 @@
         <SellDomainNameSearch
           v-if="visible"
           :is-design-com="isDesignCom"
-          :header-title="headerTitle"
-          :header-subtitle="headerSubtitle"
+          :header-title="headerTitle || domainSearchHeaderTitle"
+          :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
           :initial-search-term="initialSearchTerm"
           @onSearch="onSearchDomainName"
           @onSearchTextInputChange="onSearchTextInputChange"
@@ -71,14 +71,13 @@
   </template>
 </template>
 <script>
+import { computed } from 'vue';
 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';
-
-const headerSubtitle = 'Buy matching domain name for your brand';
-const headerTitle = 'Search a domain name';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
 
 export default {
   components: {
@@ -89,11 +88,11 @@ export default {
   props: {
     headerSubtitle: {
       type: String,
-      default: () => headerSubtitle,
+      default: null,
     },
     headerTitle: {
       type: String,
-      default: () => headerTitle,
+      default: null,
     },
     modelValue: {
       type: String,
@@ -122,6 +121,14 @@ export default {
       default: undefined,
     },
   },
+  setup() {
+    const contentProvider = useSellDomainContent();
+    const content = contentProvider.getContent();
+    return {
+      domainSearchHeaderTitle: computed(() => content.value.domainSearchHeaderTitle),
+      domainSearchHeaderSubtitle: computed(() => content.value.domainSearchHeaderSubtitle),
+    };
+  },
   data: () => ({
     domainNameItems: [],
     userCurrency: {},

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

@@ -41,10 +41,10 @@
   </div>
 </template>
 <script>
+import { computed } from 'vue';
 import Button from '../../../atoms/components/Button/Button.vue';
 import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
-import useSellDomainNameSearchContent from './UseSellDomainNameSearchContent';
-
+import useSellDomainContent from './useSellDomainContent';
 import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 
 export default {
@@ -83,14 +83,14 @@ export default {
   },
   emits: ['onSearch', 'onSearchTextInputChange'],
   setup(props) {
-    const contentProvider = useSellDomainNameSearchContent(props.contentOverride);
+    const contentProvider = useSellDomainContent(props.contentOverride);
     const content = contentProvider.getContent();
 
     return {
-      searchButtonLabel: content.searchButtonLabel,
-      searchBarLabel: content.searchBarLabel,
-      searchBarPlaceholder: content.searchBarPlaceholder,
-      searchBarPreText: content.searchBarPreText,
+      searchButtonLabel: computed(() => content.value.searchButtonLabel),
+      searchBarLabel: computed(() => content.value.searchBarLabel),
+      searchBarPlaceholder: computed(() => content.value.searchBarPlaceholder),
+      searchBarPreText: computed(() => content.value.searchBarPreText),
     };
   },
   data() {

package/src/experiences/components/SellDomainNameSearch/useSellDomainContent.js

@@ -0,0 +1,46 @@
+import { ref, computed } from 'vue';
+import {
+  sellDomainNameSearchBarLabel,
+  sellDomainNameSearchBarPlaceholder,
+  sellDomainNameSearchBarPreText,
+} from '../../constants/sell-domain-name-constants';
+
+const globalContentProvider = ref(null);
+
+const defaultContent = {
+  searchButtonLabel: 'Search',
+  searchBarLabel: sellDomainNameSearchBarLabel,
+  searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
+  searchBarPreText: sellDomainNameSearchBarPreText,
+  domainSearchEmptyMessage: `Sorry, we couldn't find any domain for "{domainNameSearchTerm}".`,
+  searchAnotherDomainMessage: `Try searching with another domain name.`,
+
+  freeDomainButtonLabel: 'Free Domain',
+  buyNowButtonLabel: 'Buy Now',
+  pricePerYearLabel: '/yr',
+  costPriceLabel: 'Cost Price:',
+  domainSearchHeaderTitle: 'Search a domain name',
+  domainSearchHeaderSubtitle: 'Buy matching domain name for your brand',
+  domainSearchOrConnectHeaderSubtitle: 'Buy matching domain name for your brand or connect your existing domain',
+};
+
+const useSellDomainContent = (overrides = {}) => {
+  const setGlobalContentHandler = (handler) => {
+    globalContentProvider.value = handler;
+  };
+
+  return {
+    setGlobalContentHandler,
+    getContent: () => {
+      return computed(() => {
+        return {
+          ...defaultContent,
+          ...(globalContentProvider.value ? globalContentProvider.value() : {}), // provide global content through global injection
+          ...overrides, // can override specific contents on demand
+        };
+      });
+    },
+  };
+};
+
+export default useSellDomainContent;

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -36,12 +36,12 @@
 </template>
 
 <script>
+import { computed } from 'vue';
 import Loader from '../../../atoms/components/Loader/Loader.vue';
 import Picture from '../../../atoms/components/Picture/Picture.vue';
-
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';
-import useSellDomainNameListSearchResultContent from './UseSellDomainNameListSearchResultContent';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
 
 export default {
   components: {
@@ -102,12 +102,12 @@ export default {
     },
   },
   setup(props) {
-    const contentProvider = useSellDomainNameListSearchResultContent(props.contentOverride);
+    const contentProvider = useSellDomainContent(props.contentOverride);
     const content = contentProvider.getContent();
 
     return {
-      domainSearchEmptyMessage: content.domainSearchEmptyMessage,
-      searchAnotherDomainMessage: content.searchAnotherDomainMessage,
+      domainSearchEmptyMessage: computed(() => content.value.domainSearchEmptyMessage),
+      searchAnotherDomainMessage: computed(() => content.value.searchAnotherDomainMessage),
     };
   },
   data() {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Buy matching domain name for your brand or connect your existing domain
+    {{ domainSearchOrConnectHeaderSubtitle }}
     <div class="tw-flex tw-flex-col md:tw-flex-row tw-mt-4 tw-mb-4">
       <TextInput
         v-model="searchText"
@@ -18,7 +18,7 @@
       <Button
         classes="tw-w-full tw-mt-2 md:tw-rounded-l-none md:tw-mt-0"
         variant="primary"
-        label="Search"
+        :label="searchButtonLabel"
         :disabled="false"
         @on-click="onSearchBarClick"
       />
@@ -31,23 +31,21 @@
       :domain-name-items="domainNameItems"
       :previous-search-text="previousSearchText"
       :visible="isSearchDomainListModalVisible"
+      :search-button-label="searchButtonLabel"
       @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 { computed } from 'vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-} from '../../constants/sell-domain-name-constants';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 import Events from '../../constants/event-constants';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
+import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
 
 export default {
   components: {
@@ -76,13 +74,21 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const contentProvider = useSellDomainContent();
+    const content = contentProvider.getContent();
+    return {
+      searchButtonLabel: computed(() => content.value.searchButtonLabel),
+      searchBarLabel: computed(() => content.value.searchBarLabel),
+      searchBarPlaceholder: computed(() => content.value.searchBarPlaceholder),
+      domainSearchOrConnectHeaderSubtitle: computed(() => content.value.domainSearchOrConnectHeaderSubtitle),
+    };
+  },
   data: () => ({
     domainNameItems: undefined,
     userCurrency: undefined,
     isBusy: false,
     isSearchDomainListModalVisible: false,
-    searchBarLabel: sellDomainNameSearchBarLabel,
-    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
     searchText: '',
     previousSearchText: '',
   }),

package/src/experiences/components/SellDomainNameSearch/UseSellDomainNameSearchContent.js

@@ -1,33 +0,0 @@
-import {
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-  sellDomainNameSearchBarPreText,
-} from '../../constants/sell-domain-name-constants';
-
-let globalContentProvider = null;
-
-const defaultContent = {
-  searchButtonLabel: 'Search',
-  searchBarLabel: sellDomainNameSearchBarLabel,
-  searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
-  searchBarPreText: sellDomainNameSearchBarPreText,
-};
-
-const useSellDomainNameSearchContent = (overrides = {}) => {
-  const setGlobalContentHandler = (handler) => {
-    globalContentProvider = handler;
-  };
-
-  return {
-    setGlobalContentHandler,
-    getContent: () => {
-      return {
-        ...defaultContent,
-        ...(globalContentProvider ? globalContentProvider() : {}), // provide global content through global injection
-        ...overrides, // can override specific contents on demand
-      };
-    },
-  };
-};
-
-export default useSellDomainNameSearchContent;

package/src/experiences/components/SellDomainNameSearchResult/UseSellDomainNameListSearchResultContent.js

@@ -1,25 +0,0 @@
-let globalContentProvider = null;
-
-const defaultContent = {
-  domainSearchEmptyMessage: `Sorry, we couldn't find any domain for "{domainNameSearchTerm}".`,
-  searchAnotherDomainMessage: `Try searching with another domain name.`,
-};
-
-const useSellDomainNameListSearchResultContent = (overrides = {}) => {
-  const setGlobalContentHandler = (handler) => {
-    globalContentProvider = handler;
-  };
-
-  return {
-    setGlobalContentHandler,
-    getContent: () => {
-      return {
-        ...defaultContent,
-        ...(globalContentProvider ? globalContentProvider() : {}), // provide global content through global injection
-        ...overrides, // can override specific contents on demand
-      };
-    },
-  };
-};
-
-export default useSellDomainNameListSearchResultContent;