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

package/package.json

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

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

@@ -63,10 +63,10 @@
   </div>
 </template>
 <script>
+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 {
@@ -113,10 +113,10 @@ export default {
     const contentProvider = useSellDomainContent();
     const content = contentProvider.getContent();
     return {
-      freeDomainButtonLabel: content.freeDomainButtonLabel,
-      buyNowButtonLabel: content.buyNowButtonLabel,
-      pricePerYearLabel: content.pricePerYearLabel,
-      costPriceLabel: content.costPriceLabel,
+      freeDomainButtonLabel: computed(() => content.value.freeDomainButtonLabel),
+      buyNowButtonLabel: computed(() => content.value.buyNowButtonLabel),
+      pricePerYearLabel: computed(() => content.value.pricePerYearLabel),
+      costPriceLabel: computed(() => content.value.costPriceLabel),
     };
   },
   methods: {

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

@@ -40,6 +40,7 @@ import Modal from '../../../atoms/components/Modal/Modal.vue';
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
 import useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
+import { computed } from 'vue';
 
 export default {
   components: {
@@ -101,8 +102,8 @@ export default {
     const contentProvider = useSellDomainContent();
     const content = contentProvider.getContent();
     return {
-      domainSearchHeaderTitle: content.domainSearchHeaderTitle,
-      domainSearchHeaderSubtitle: content.domainSearchHeaderSubtitle,
+      domainSearchHeaderTitle: computed(() => content.value.domainSearchHeaderTitle),
+      domainSearchHeaderSubtitle: computed(() => content.value.domainSearchHeaderSubtitle),
     };
   },
   methods: {

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

@@ -71,6 +71,7 @@
   </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';
@@ -124,8 +125,8 @@ export default {
     const contentProvider = useSellDomainContent();
     const content = contentProvider.getContent();
     return {
-      domainSearchHeaderTitle: content.domainSearchHeaderTitle,
-      domainSearchHeaderSubtitle: content.domainSearchHeaderSubtitle,
+      domainSearchHeaderTitle: computed(() => content.value.domainSearchHeaderTitle),
+      domainSearchHeaderSubtitle: computed(() => content.value.domainSearchHeaderSubtitle),
     };
   },
   data: () => ({

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 useSellDomainContent from './useSellDomainContent';
-
 import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 
 export default {
@@ -87,10 +87,10 @@ export default {
     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

@@ -1,10 +1,11 @@
+import { ref, computed } from 'vue';
 import {
   sellDomainNameSearchBarLabel,
   sellDomainNameSearchBarPlaceholder,
   sellDomainNameSearchBarPreText,
 } from '../../constants/sell-domain-name-constants';
 
-let globalContentProvider = null;
+const globalContentProvider = ref(null);
 
 const defaultContent = {
   searchButtonLabel: 'Search',
@@ -25,17 +26,19 @@ const defaultContent = {
 
 const useSellDomainContent = (overrides = {}) => {
   const setGlobalContentHandler = (handler) => {
-    globalContentProvider = handler;
+    globalContentProvider.value = handler;
   };
 
   return {
     setGlobalContentHandler,
     getContent: () => {
-      return {
-        ...defaultContent,
-        ...(globalContentProvider ? globalContentProvider() : {}), // provide global content through global injection
-        ...overrides, // can override specific contents on demand
-      };
+      return computed(() => {
+        return {
+          ...defaultContent,
+          ...(globalContentProvider.value ? globalContentProvider.value() : {}), // provide global content through global injection
+          ...overrides, // can override specific contents on demand
+        };
+      });
     },
   };
 };

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

@@ -36,9 +36,9 @@
 </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 useSellDomainContent from '../SellDomainNameSearch/useSellDomainContent';
@@ -106,8 +106,8 @@ export default {
     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

@@ -38,9 +38,9 @@
   </div>
 </template>
 <script>
+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 } from '../../constants/sell-domain-name-constants';
 import Events from '../../constants/event-constants';
@@ -78,10 +78,10 @@ export default {
     const contentProvider = useSellDomainContent();
     const content = contentProvider.getContent();
     return {
-      searchButtonLabel: content.searchButtonLabel,
-      searchBarLabel: content.searchBarLabel,
-      searchBarPlaceholder: content.searchBarPlaceholder,
-      domainSearchOrConnectHeaderSubtitle: content.domainSearchOrConnectHeaderSubtitle,
+      searchButtonLabel: computed(() => content.value.searchButtonLabel),
+      searchBarLabel: computed(() => content.value.searchBarLabel),
+      searchBarPlaceholder: computed(() => content.value.searchBarPlaceholder),
+      domainSearchOrConnectHeaderSubtitle: computed(() => content.value.domainSearchOrConnectHeaderSubtitle),
     };
   },
   data: () => ({