From 08e9b955676f688986a35c7ea9e6f45d0cf52f11 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Tue, 8 Feb 2022 21:21:22 +0100
Subject: [PATCH 1/2] refactor(theme): move stores to pinia store

---
 packages/theme/components/CurrencySelector.vue     |  2 --
 packages/theme/components/StoreSwitcher.vue        |  4 ----
 packages/theme/composables/useConfig/index.ts      |  4 ++--
 .../theme/composables/useMagentoConfiguration.ts   |  4 ++--
 packages/theme/composables/useStore/index.ts       | 11 ++++++++---
 packages/theme/composables/useStore/useStore.d.ts  |  2 +-
 packages/theme/stores/config.ts                    | 14 +++++++++-----
 7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/theme/components/CurrencySelector.vue b/packages/theme/components/CurrencySelector.vue
index e834cd773..bbbafda19 100644
--- a/packages/theme/components/CurrencySelector.vue
+++ b/packages/theme/components/CurrencySelector.vue
@@ -44,7 +44,6 @@ import {
   useCurrency,
 } from '@vue-storefront/magento';
 import {
-  SfImage,
   SfButton,
   SfList,
   SfBottomModal,
@@ -61,7 +60,6 @@ import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 export default defineComponent({
   name: 'CurrencySelector',
   components: {
-    SfImage,
     SfButton,
     SfList,
     SfBottomModal,
diff --git a/packages/theme/components/StoreSwitcher.vue b/packages/theme/components/StoreSwitcher.vue
index 28f422e2d..104a1cb85 100644
--- a/packages/theme/components/StoreSwitcher.vue
+++ b/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,
diff --git a/packages/theme/composables/useConfig/index.ts b/packages/theme/composables/useConfig/index.ts
index f96a21a81..42d820e27 100644
--- a/packages/theme/composables/useConfig/index.ts
+++ b/packages/theme/composables/useConfig/index.ts
@@ -16,7 +16,7 @@ const useConfig = (): UseConfig => {
     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);
@@ -26,7 +26,7 @@ const useConfig = (): UseConfig => {
   };
 
   return {
-    config: computed(() => configStore.config),
+    config: computed(() => configStore.storeConfig),
     loading,
     loadConfig,
   };
diff --git a/packages/theme/composables/useMagentoConfiguration.ts b/packages/theme/composables/useMagentoConfiguration.ts
index a94a773c9..12a8d91d7 100644
--- a/packages/theme/composables/useMagentoConfiguration.ts
+++ b/packages/theme/composables/useMagentoConfiguration.ts
@@ -1,6 +1,5 @@
 import {
   useCurrency,
-  useStore,
   storeConfigGetters,
   Currency,
   AvailableStores,
@@ -9,7 +8,7 @@ import {
 
 import { computed, ComputedRef, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
-import { useConfig } from '~/composables';
+import { useConfig, useStore } from '~/composables';
 
 type UseMagentoConfiguration = () => {
   currencies: ComputedRef<Currency>;
@@ -20,6 +19,7 @@ type UseMagentoConfiguration = () => {
   selectedStore: ComputedRef<string | undefined>;
   loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => Promise<void>;
 };
+
 // @ts-ignore
 export const useMagentoConfiguration: UseMagentoConfiguration = () => {
   const { app } = useContext();
diff --git a/packages/theme/composables/useStore/index.ts b/packages/theme/composables/useStore/index.ts
index 39a23a84c..733a28975 100644
--- a/packages/theme/composables/useStore/index.ts
+++ b/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 { 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 {
@@ -48,7 +53,7 @@ const useStore: UseStore = (): UseStoreInterface => {
   return {
     load,
     change,
-    stores,
+    stores: computed(() => configStore.stores),
     loading,
     error,
   };
diff --git a/packages/theme/composables/useStore/useStore.d.ts b/packages/theme/composables/useStore/useStore.d.ts
index 6e88e193b..fca673e9e 100644
--- a/packages/theme/composables/useStore/useStore.d.ts
+++ b/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>,
diff --git a/packages/theme/stores/config.ts b/packages/theme/stores/config.ts
index 3477b7d9a..21324b02f 100644
--- a/packages/theme/stores/config.ts
+++ b/packages/theme/stores/config.ts
@@ -1,10 +1,14 @@
 import { defineStore } from 'pinia';
-import { StoreConfig } from '@vue-storefront/magento';
+import { AvailableStores, StoreConfig } from '@vue-storefront/magento';
 
-const config: StoreConfig = {};
+interface ConfigState {
+  storeConfig: StoreConfig,
+  stores: AvailableStores
+}
 
-export const useConfigStore = defineStore('storeConfig', {
-  state: () => ({
-    config,
+export const useConfigStore = defineStore('magentoConfig', {
+  state: (): ConfigState => ({
+    storeConfig: {},
+    stores: [],
   }),
 });

From f68855bef26ae989ec99e6ae2165ea750fbd90ef Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 9 Feb 2022 09:51:08 +0100
Subject: [PATCH 2/2] refactor(theme): refactor useCurrency composable BREAKING
 CHANGES: - mark useCurrency as a deprecated in composables module -  add
 refactored and lightweight useCurrency in theme with usage of pinia store
 management

---
 packages/composables/nuxt/plugin.js           |  1 +
 .../src/composables/useCurrency/index.ts      |  5 ++
 .../src/factories/useCurrencyFactory.ts       |  5 ++
 .../theme/components/CurrencySelector.vue     |  8 +--
 packages/theme/composables/index.ts           |  1 +
 packages/theme/composables/useConfig/index.ts | 22 ++++---
 .../composables/useConfig/useConfig.d.ts      |  6 +-
 .../theme/composables/useCurrency/index.ts    | 63 +++++++++++++++++++
 .../composables/useCurrency/useCurrency.d.ts  | 16 +++++
 .../composables/useMagentoConfiguration.ts    | 38 ++++++-----
 packages/theme/composables/useStore/index.ts  |  4 +-
 packages/theme/stores/config.ts               |  4 +-
 12 files changed, 140 insertions(+), 33 deletions(-)
 create mode 100644 packages/theme/composables/useCurrency/index.ts
 create mode 100644 packages/theme/composables/useCurrency/useCurrency.d.ts

diff --git a/packages/composables/nuxt/plugin.js b/packages/composables/nuxt/plugin.js
index 00a24f3f1..0a9fc943f 100644
--- a/packages/composables/nuxt/plugin.js
+++ b/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;
diff --git a/packages/composables/src/composables/useCurrency/index.ts b/packages/composables/src/composables/useCurrency/index.ts
index f117b04fe..b5a43346d 100644
--- a/packages/composables/src/composables/useCurrency/index.ts
+++ b/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';
diff --git a/packages/composables/src/factories/useCurrencyFactory.ts b/packages/composables/src/factories/useCurrencyFactory.ts
index 17e00874a..d93452d0a 100644
--- a/packages/composables/src/factories/useCurrencyFactory.ts
+++ b/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,
diff --git a/packages/theme/components/CurrencySelector.vue b/packages/theme/components/CurrencySelector.vue
index bbbafda19..f359c9dcd 100644
--- a/packages/theme/components/CurrencySelector.vue
+++ b/packages/theme/components/CurrencySelector.vue
@@ -40,9 +40,6 @@
 </template>
 
 <script>
-import {
-  useCurrency,
-} from '@vue-storefront/magento';
 import {
   SfButton,
   SfList,
@@ -54,6 +51,7 @@ import {
   computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
+import { useCurrency } from '~/composables';
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
 import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 
@@ -76,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();
 
@@ -102,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,
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index 1b4fd6b38..34bc94fe7 100644
--- a/packages/theme/composables/index.ts
+++ b/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';
diff --git a/packages/theme/composables/useConfig/index.ts b/packages/theme/composables/useConfig/index.ts
index 42d820e27..88e02aa10 100644
--- a/packages/theme/composables/useConfig/index.ts
+++ b/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.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.storeConfig),
+    config,
     loading,
-    loadConfig,
+    load,
   };
 };
 
diff --git a/packages/theme/composables/useConfig/useConfig.d.ts b/packages/theme/composables/useConfig/useConfig.d.ts
index a0d4a1792..77412d7e8 100644
--- a/packages/theme/composables/useConfig/useConfig.d.ts
+++ b/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>
 };
diff --git a/packages/theme/composables/useCurrency/index.ts b/packages/theme/composables/useCurrency/index.ts
new file mode 100644
index 000000000..4ac5af56e
--- /dev/null
+++ b/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;
diff --git a/packages/theme/composables/useCurrency/useCurrency.d.ts b/packages/theme/composables/useCurrency/useCurrency.d.ts
new file mode 100644
index 000000000..7fac23fc7
--- /dev/null
+++ b/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>;
+}
diff --git a/packages/theme/composables/useMagentoConfiguration.ts b/packages/theme/composables/useMagentoConfiguration.ts
index 12a8d91d7..0c57be484 100644
--- a/packages/theme/composables/useMagentoConfiguration.ts
+++ b/packages/theme/composables/useMagentoConfiguration.ts
@@ -1,5 +1,4 @@
 import {
-  useCurrency,
   storeConfigGetters,
   Currency,
   AvailableStores,
@@ -8,10 +7,10 @@ import {
 
 import { computed, ComputedRef, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
-import { useConfig, useStore } 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>;
@@ -23,9 +22,10 @@ type UseMagentoConfiguration = () => {
 // @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,
diff --git a/packages/theme/composables/useStore/index.ts b/packages/theme/composables/useStore/index.ts
index 733a28975..d1ae36392 100644
--- a/packages/theme/composables/useStore/index.ts
+++ b/packages/theme/composables/useStore/index.ts
@@ -12,7 +12,7 @@ const useStore: UseStore = (): UseStoreInterface => {
   const loading: Ref<boolean> = ref(false);
   const error: Ref<UseStoreErrors> = ref({ load: null, change: null });
   const configStore = useConfigStore();
-
+  const stores = computed(() => configStore.stores);
   const { app } = useContext();
 
   const load = async (customQuery = { availableStores: 'availableStores' }): Promise<void> => {
@@ -53,7 +53,7 @@ const useStore: UseStore = (): UseStoreInterface => {
   return {
     load,
     change,
-    stores: computed(() => configStore.stores),
+    stores,
     loading,
     error,
   };
diff --git a/packages/theme/stores/config.ts b/packages/theme/stores/config.ts
index 21324b02f..e0f6f67ce 100644
--- a/packages/theme/stores/config.ts
+++ b/packages/theme/stores/config.ts
@@ -1,14 +1,16 @@
 import { defineStore } from 'pinia';
-import { AvailableStores, StoreConfig } from '@vue-storefront/magento';
+import { AvailableStores, Currency, StoreConfig } from '@vue-storefront/magento';
 
 interface ConfigState {
   storeConfig: StoreConfig,
   stores: AvailableStores
+  currency: Currency
 }
 
 export const useConfigStore = defineStore('magentoConfig', {
   state: (): ConfigState => ({
     storeConfig: {},
     stores: [],
+    currency: {},
   }),
 });