@designcrowd/fe-shared-lib 1.2.0-ml-jj-1 → 1.2.0-ml-jj-3

package/index.js

@@ -19,6 +19,8 @@ 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 Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
 export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';

package/package.json

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

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

@@ -11,42 +11,56 @@ const locale = 'en-test';
 
 const localePublishBrandPageModalContent = {
   'en-US': {
-    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',
+    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',
+    },
+    sellDomainNameListSearchResult: {
+      domainSearchEmptyMessage: 'Sorry, we couldn\'t find any domain for "{domainNameSearchTerm}".',
+      searchAnotherDomainMessage: 'Try searching with another domain name.',
+    },
   },
   'en-test': {
-    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',
+    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',
+    },
+    sellDomainNameListSearchResult: {
+      domainSearchEmptyMessage: '++Sorry, we couldn\'t find any domain for "{domainNameSearchTerm}".',
+      searchAnotherDomainMessage: '++Try searching with another domain name.',
+    },
   },
 };
 
@@ -58,7 +72,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -73,7 +87,7 @@ export const NotPublishedWithPurchasedDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
       />
     `,
   };
@@ -96,7 +110,7 @@ export const PublishWithSelectedDomain = () => {
           isRegistrationComplete: false,
           status: 'Active',
         },
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -115,7 +129,7 @@ export const PublishWithSelectedDomain = () => {
         brand-page-base-url="https://brand.site/"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
         @radio-button-changed="onRadioButtonChanged"
       />
     `,
@@ -130,7 +144,7 @@ export const SetSlug = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -145,7 +159,7 @@ export const SetSlug = () => {
         brand-page-base-url="https://brand.site/"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
       />
     `,
   };
@@ -158,7 +172,7 @@ export const Published = () => {
     data() {
       return {
         domains,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -172,7 +186,7 @@ export const Published = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
       />
     `,
   };
@@ -185,7 +199,7 @@ export const PublishedNoDomains = () => {
     data() {
       return {
         domains: [],
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -201,7 +215,7 @@ export const PublishedNoDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
       />
   `,
   };
@@ -217,7 +231,7 @@ export const Free = () => {
         domains: [],
         isSearchDomainListModalVisible: false,
         isDesignCom: false,
-        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -239,7 +253,7 @@ export const Free = () => {
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"
         :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
-        :publishBrandPageModalContent="publishBrandPageModalContent"
+        :content="content"
         @on-hide-domain-modal="onHideDomainListModal"
       >
         <template #recommended>

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

@@ -195,6 +195,7 @@
                 :currency="userCurrency"
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
+                :content="content"
                 @on-change-search="onSearchTextChanged"
               />
             </div>
@@ -401,7 +402,7 @@ export default {
       required: true,
       default: '',
     },
-    publishBrandPageModalContent: {
+    content: {
       type: Object,
       required: true,
     },
@@ -418,26 +419,26 @@ export default {
   ],
   data() {
     return {
-      firstTimePublishHeaderLabel: this.publishBrandPageModalContent.firstTimePublishHeaderLabel,
-      sitePublishedLabel: this.publishBrandPageModalContent.sitePublishedLabel,
-      publishSuccessLabel: this.publishBrandPageModalContent.publishSuccessLabel,
-      freePublishCardTitleLabel: this.publishBrandPageModalContent.freePublishCardTitleLabel,
-      freePublishCardDescriptionLabel: this.publishBrandPageModalContent.freePublishCardDescriptionLabel,
-      slugInputPlaceholderYourNameLabel: this.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
+      firstTimePublishHeaderLabel: this.content.publishBrandPageModalContent.firstTimePublishHeaderLabel,
+      sitePublishedLabel: this.content.publishBrandPageModalContent.sitePublishedLabel,
+      publishSuccessLabel: this.content.publishBrandPageModalContent.publishSuccessLabel,
+      freePublishCardTitleLabel: this.content.publishBrandPageModalContent.freePublishCardTitleLabel,
+      freePublishCardDescriptionLabel: this.content.publishBrandPageModalContent.freePublishCardDescriptionLabel,
+      slugInputPlaceholderYourNameLabel:
+        this.content.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
       slugInputPlaceholderYourBusinessNameLabel:
-        this.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
-      freeDomainLabel: this.publishBrandPageModalContent.freeDomainLabel,
-      purchasedDomainLabel: this.publishBrandPageModalContent.purchasedDomainLabel,
-      setUrlLabel: this.publishBrandPageModalContent.setUrlLabel,
-      publishLabel: this.publishBrandPageModalContent.publishLabel,
-      viewMoreDomainLabel: this.publishBrandPageModalContent.viewMoreDomainLabel,
-      viewMyWebsiteLabel: this.publishBrandPageModalContent.viewMyWebsiteLabel,
-      copyLabel: this.publishBrandPageModalContent.copyLabel,
-      copySuccessLabel: this.publishBrandPageModalContent.copySuccessLabel,
+        this.content.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
+      freeDomainLabel: this.content.publishBrandPageModalContent.freeDomainLabel,
+      purchasedDomainLabel: this.content.publishBrandPageModalContent.purchasedDomainLabel,
+      setUrlLabel: this.content.publishBrandPageModalContent.setUrlLabel,
+      publishLabel: this.content.publishBrandPageModalContent.publishLabel,
+      viewMoreDomainLabel: this.content.publishBrandPageModalContent.viewMoreDomainLabel,
+      viewMyWebsiteLabel: this.content.publishBrandPageModalContent.viewMyWebsiteLabel,
+      copyLabel: this.content.publishBrandPageModalContent.copyLabel,
+      copySuccessLabel: this.content.publishBrandPageModalContent.copySuccessLabel,
       hasAlreadyPurchasedDomainCloseButtonLabel:
-        this.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
-      publishedSuccessDescriptionLabel: this.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
-
+        this.content.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
+      publishedSuccessDescriptionLabel: this.content.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
       DOMAIN_TYPES,
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,

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

@@ -32,7 +32,7 @@
         <Button
           :classes="searchButtonClasses"
           variant="primary"
-          label="Search"
+          :label="searchButtonLabel"
           :disabled="false"
           @on-click="onSearchBarClick"
         />
@@ -41,15 +41,11 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import useSellDomainNameSearchContent from './UseSellDomainNameSearchContent';
 
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-  sellDomainNameSearchBarPreText,
-} from '../../constants/sell-domain-name-constants';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 
 export default {
   components: {
@@ -79,14 +75,27 @@ export default {
       type: Boolean,
       required: false,
     },
+    contentOverride: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   emits: ['onSearch', 'onSearchTextInputChange'],
+  setup(props) {
+    const contentProvider = useSellDomainNameSearchContent(props.contentOverride);
+    const content = contentProvider.getContent();
+
+    return {
+      searchButtonLabel: content.searchButtonLabel,
+      searchBarLabel: content.searchBarLabel,
+      searchBarPlaceholder: content.searchBarPlaceholder,
+      searchBarPreText: content.searchBarPreText,
+    };
+  },
   data() {
     return {
-      searchBarLabel: sellDomainNameSearchBarLabel,
-      searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
       searchText: this.initialSearchTerm ?? '',
-      searchBarPreText: sellDomainNameSearchBarPreText,
     };
   },
   computed: {

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

@@ -0,0 +1,33 @@
+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/SellDomainNameListSearchResult.vue

@@ -27,9 +27,9 @@
       @load-more-domains="onLoadMoreDomains"
     />
     <div v-else-if="shouldShowDomainNameNotFound" class="tw-flex tw-justify-center tw-text-center">
-      Sorry, we couldn't find any domain for "{{ previousSearchText }}".
+      {{ domainSearchEmptyMessageWithUserDomainName }}
       <br />
-      Try searching with another domain name.
+      {{ searchAnotherDomainMessage }}
     </div>
     <div v-else></div>
   </div>
@@ -99,13 +99,22 @@ export default {
       type: String,
       default: undefined,
     },
+    content: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
+      domainSearchEmptyMessage: this.content.sellDomainNameListSearchResult.domainSearchEmptyMessage,
+      searchAnotherDomainMessage: this.content.sellDomainNameListSearchResult.searchAnotherDomainMessage,
       domainNameItemsInView: undefined,
     };
   },
   computed: {
+    domainSearchEmptyMessageWithUserDomainName() {
+      return this.domainSearchEmptyMessage.replace('{domainNameSearchTerm}', this.previousSearchText);
+    },
     shouldShowDomainNameNotFound() {
       return (
         !this.isBusy &&

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -4,6 +4,7 @@
       :is-design-com="isDesignCom"
       :initial-search-term="initialSearchTerm"
       :show-white-search-background="showWhiteSearchBackground"
+      :search-button-label="content.searchButtonLabel"
       @onSearch="onSearchDomainName"
     />
     <SellDomainNameSearchResult
@@ -20,6 +21,7 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
+      :content="content"
     />
   </div>
 </template>
@@ -100,6 +102,10 @@ export default {
       type: Number,
       default: undefined,
     },
+    content: {
+      type: Object,
+      required: true,
+    },
   },
   data: () => ({
     domainNameItems: undefined,