refactor(theme): M2 155. refactor useCurrency composable

packages/composables/nuxt/plugin.js

@@ -5,6 +5,7 @@ import cookie from '@vue-storefront/magento/nuxt/cookie';
 
 const moduleOptions = JSON.parse('<%= JSON.stringify(options) %>');
 
+// TODO should be moved to THEME and expose consistent cookie management API
 export default integrationPlugin(({ app, res, req, integration }) => {
   const cartCookieName = moduleOptions.cookies?.cartCookieName || defaultConfig.cookies.cartCookieName;
   const customerCookieName = moduleOptions.cookies?.customerCookieName || defaultConfig.cookies.customerCookieName;

packages/composables/src/composables/useCurrency/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import { Context } from '@vue-storefront/core';
 import { Currency } from '@vue-storefront/magento-api';
 import { useCurrencyFactory, UseCurrencyFactoryParams } from '../../factories/useCurrencyFactory';

packages/composables/src/factories/useCurrencyFactory.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import { computed } from '@vue/composition-api';
 import {
   Context,

packages/theme/components/CurrencySelector.vue

@@ -41,10 +41,6 @@
 
 <script>
 import {
-  useCurrency,
-} from '@vue-storefront/magento';
-import {
-  SfImage,
   SfButton,
   SfList,
   SfBottomModal,
@@ -55,13 +51,13 @@ import {
   computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
+import { useCurrency } from '~/composables';
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
 import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 
 export default defineComponent({
   name: 'CurrencySelector',
   components: {
-    SfImage,
     SfButton,
     SfList,
     SfBottomModal,
@@ -78,7 +74,7 @@ export default defineComponent({
      * enables the switch of currency without returning to the browser one with i18n
      */
     const {
-      currencies,
+      currency,
       change: changeCurrency,
     } = useCurrency();
 
@@ -104,7 +100,7 @@ export default defineComponent({
 
     const isCurrencyModalOpen = ref(false);
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
+    const availableCurrencies = computed(() => currency.value?.available_currency_codes || []);
 
     return {
       currentCurrencySymbol,

packages/theme/components/StoreSwitcher.vue

@@ -77,7 +77,6 @@ import {
 
 import {
   ref,
-  computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
 
@@ -99,15 +98,12 @@ export default defineComponent({
 
     const {
       stores,
-      load: loadStores,
       change: changeStore,
     } = useStore();
 
     const { handleChanges } = useHandleChanges();
     const isLangModalOpen = ref(false);
 
-    loadStores();
-
     return {
       availableStores: stores,
       changeStore,

packages/theme/composables/index.ts

@@ -4,4 +4,5 @@ export { default as useUiState } from './useUiState';
 export { default as useImage } from './useImage';
 export { default as useConfig } from './useConfig';
 export { default as useStore } from './useStore';
+export { default as useCurrency } from './useCurrency';
 export { default as useExternalCheckout } from './useExternalCheckout';

packages/theme/composables/useConfig/index.ts

@@ -3,32 +3,38 @@ import {
 } from '@nuxtjs/composition-api';
 import { Logger } from '@vue-storefront/core';
 import { useConfigStore } from '~/stores/config';
-import { UseConfig } from '~/composables/useConfig/useConfig';
+import { UseConfig, UseConfigErrors } from '~/composables/useConfig/useConfig';
 
 const useConfig = (): UseConfig => {
   const { app } = useContext();
   const loading = ref(false);
+  const error = ref<UseConfigErrors>({ load: null });
   const configStore = useConfigStore();
+  const config = computed(() => configStore.storeConfig);
 
-  const loadConfig = async () => {
-    Logger.debug('useConfig/loadConfig');
+  const load = async () => {
+    error.value.load = null;
     loading.value = true;
+
+    Logger.debug('useConfig/load');
+
     try {
       const { data } = await app.$vsf.$magento.api.storeConfig();
       configStore.$patch((state) => {
-        state.config = data.storeConfig || {};
+        state.storeConfig = data.storeConfig || {};
       });
     } catch (err) {
-      Logger.debug(err);
+      Logger.debug('[ERROR] useConfig/load', err);
+      error.value.load = err;
+    } finally {
+      loading.value = false;
     }
-
-    loading.value = false;
   };
 
   return {
-    config: computed(() => configStore.config),
+    config,
     loading,
-    loadConfig,
+    load,
   };
 };
 

packages/theme/composables/useConfig/useConfig.d.ts

@@ -1,8 +1,12 @@
 import { ComputedRef, Ref } from '@nuxtjs/composition-api';
 import { StoreConfig } from '@vue-storefront/magento';
 
+export interface UseConfigErrors {
+  load: Error | null;
+}
+
 export type UseConfig = {
   config: ComputedRef<StoreConfig>,
   loading: Ref<boolean>,
-  loadConfig (): Promise<void>
+  load (): Promise<void>
 };

packages/theme/composables/useCurrency/index.ts

@@ -0,0 +1,63 @@
+import {
+  Logger,
+  ComposableFunctionArgs,
+} from '@vue-storefront/core';
+
+import {
+  ref, computed, useContext,
+} from '@nuxtjs/composition-api';
+import { UseCurrency, UseCurrencyErrors } from '~/composables/useCurrency/useCurrency';
+import { useConfigStore } from '~/stores/config';
+
+const useCurrency = (): UseCurrency => {
+  const { app } = useContext();
+  const loading = ref(false);
+  const error = ref<UseCurrencyErrors>({ load: null, change: null });
+  const configStore = useConfigStore();
+  const currency = computed(() => configStore.currency);
+
+  const load = async (params?: ComposableFunctionArgs<{}>) => {
+    error.value.load = null;
+    loading.value = true;
+
+    Logger.debug('useCurrency/load');
+
+    try {
+      const { data } = await app.$vsf.$magento.api.currency(params);
+      configStore.$patch((state) => {
+        state.currency = data?.currency ?? {};
+      });
+    } catch (err) {
+      Logger.debug('[ERROR] useCurrency/load', err);
+      error.value.load = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const change = async (params: ComposableFunctionArgs<{ id: string }>) => {
+    error.value.change = null;
+    loading.value = true;
+
+    Logger.debug('useCurrency/change');
+
+    try {
+      await app.$vsf.$magento.config.state.setCurrency(params.id);
+    } catch (err) {
+      Logger.debug('[ERROR] useCurrency/change', err);
+      error.value.change = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    load,
+    change,
+    currency,
+    loading,
+    error,
+  };
+};
+
+export default useCurrency;

packages/theme/composables/useCurrency/useCurrency.d.ts

@@ -0,0 +1,16 @@
+import { ComposableFunctionArgs } from '@vue-storefront/core';
+import { ComputedRef, Ref } from '@nuxtjs/composition-api';
+import { Currency } from '@vue-storefront/magento-api';
+
+export interface UseCurrencyErrors {
+  load: Error | null;
+  change: Error | null;
+}
+
+export interface UseCurrency {
+  load: (params?: ComposableFunctionArgs<{}>) => Promise<void>;
+  change: (params: ComposableFunctionArgs<{ id: string }>) => void;
+  currency: ComputedRef<Currency>;
+  loading: Ref<boolean>;
+  error: Ref<UseCurrencyErrors>;
+}

packages/theme/composables/useMagentoConfiguration.ts

@@ -1,6 +1,4 @@
 import {
-  useCurrency,
-  useStore,
   storeConfigGetters,
   Currency,
   AvailableStores,
@@ -9,23 +7,25 @@ import {
 
 import { computed, ComputedRef, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
-import { useConfig } from '~/composables';
+import { useConfig, useStore, useCurrency } from '~/composables';
 
 type UseMagentoConfiguration = () => {
-  currencies: ComputedRef<Currency>;
+  currency: ComputedRef<Currency>;
   stores: ComputedRef<AvailableStores>;
   storeConfig: ComputedRef<StoreConfig>;
   selectedCurrency: ComputedRef<string | undefined>;
   selectedLocale: ComputedRef<string | undefined>;
   selectedStore: ComputedRef<string | undefined>;
   loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => Promise<void>;
 };
+
 // @ts-ignore
 export const useMagentoConfiguration: UseMagentoConfiguration = () => {
   const { app } = useContext();
+
   const {
     config: storeConfig,
-    loadConfig,
+    load: loadConfig,
   } = useConfig();
 
   const {
@@ -34,14 +34,12 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
   } = useStore();
 
   const {
-    currencies,
+    currency,
     load: loadCurrencies,
   } = useCurrency();
 
   const selectedCurrency = computed<string | undefined>(() => app.$cookies.get(cookieNames.currencyCookieName));
-
   const selectedLocale = computed<string | undefined>(() => app.$cookies.get(cookieNames.localeCookieName));
-
   const selectedStore = computed<string | undefined>(() => app.$cookies.get(cookieNames.storeCookieName));
 
   const loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => void = (params = {
@@ -53,33 +51,41 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
       updateLocale,
     } = params;
 
+    loadStores();
+    loadCurrencies();
+
     // eslint-disable-next-line promise/catch-or-return
     loadConfig().then(() => {
       if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
-        app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value));
+        app.$cookies.set(
+          cookieNames.storeCookieName,
+          storeConfigGetters.getCode(storeConfig.value as StoreConfig),
+        );
       }
 
       if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
-        app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getCode(storeConfig.value));
+        app.$cookies.set(
+          cookieNames.localeCookieName,
+          storeConfigGetters.getCode(storeConfig.value as StoreConfig),
+        );
       }
 
       if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
-        app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value));
+        app.$cookies.set(
+          cookieNames.currencyCookieName,
+          storeConfigGetters.getCurrency(storeConfig.value as StoreConfig),
+        );
       }
 
       if (updateLocale) {
-        app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
+        app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value as StoreConfig));
       }
-
       return true;
     });
-
-    loadStores();
-    loadCurrencies();
   };
 
   return {
-    currencies,
+    currency,
     stores,
     storeConfig,
     selectedCurrency,

packages/theme/composables/useStore/index.ts

@@ -1,15 +1,18 @@
 import {
+  computed,
   ref, Ref, useContext,
 } from '@nuxtjs/composition-api';
 import { Logger } from '@vue-storefront/core';
 import { StoreConfig } from '@vue-storefront/magento-api';
 import { storeConfigGetters } from '@vue-storefront/magento';
 import { UseStoreInterface, UseStore, UseStoreErrors } from '~/composables/useStore/useStore';
+import { useConfigStore } from '~/stores/config';
 
 const useStore: UseStore = (): UseStoreInterface => {
   const loading: Ref<boolean> = ref(false);
   const error: Ref<UseStoreErrors> = ref({ load: null, change: null });
-  const stores: Ref = ref([]);
+  const configStore = useConfigStore();
+  const stores = computed(() => configStore.stores);
   const { app } = useContext();
 
   const load = async (customQuery = { availableStores: 'availableStores' }): Promise<void> => {
@@ -20,7 +23,9 @@ const useStore: UseStore = (): UseStoreInterface => {
       loading.value = true;
       const { data } = await app.$vsf.$magento.api.availableStores(customQuery);
 
-      stores.value = data.availableStores || [];
+      configStore.$patch((state) => {
+        state.stores = data?.availableStores ?? [];
+      });
     } catch (err) {
       error.value.load = err;
     } finally {

packages/theme/composables/useStore/useStore.d.ts

@@ -4,7 +4,7 @@ import { UseStoreErrors } from '@vue-storefront/core';
 
 export interface UseStoreInterface {
   change(store: StoreConfig): void;
-  load(customQuery: { availableStores: string }): Promise<void>;
+  load(customQuery?: { availableStores: string }): Promise<void>;
   stores: Ref<AvailableStores>,
   loading: Ref<boolean>,
   error: Ref<UseStoreErrors>,