refactor: introduced the useApi composable, refactored loading configuration

packages/composables/src/composables/useCart/index.ts

@@ -388,7 +388,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
     const apiState = context.$magento.config.state;
     const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
 
-    return data.cart.total_quantity;
+    return data?.cart?.total_quantity;
   },
 };
 

packages/composables/src/composables/useConfig/index.ts

@@ -1,4 +1,4 @@
-import { Context } from '@vue-storefront/core';
+import {Context, Logger} from '@vue-storefront/core';
 import { StoreConfig } from '@vue-storefront/magento-api';
 import { useConfigFactory, UseConfigFactoryParams } from '../../factories/useConfigFactory';
 import { UseConfig } from '../../types/composables';
@@ -7,6 +7,8 @@ const factoryParams: UseConfigFactoryParams<StoreConfig> = {
   loadConfig: async (context: Context) => {
     const { data } = await context.$magento.api.storeConfig();
 
+    Logger.debug('[Magento] useConfig:loadConfig data', { data });
+
     return data.storeConfig || {};
   },
 };

packages/composables/src/composables/useCustomQuery/index.ts

@@ -4,6 +4,10 @@ import {
 } from '../../factories/useCustomQueryFactory';
 import { FetchPolicy } from '../../types';
 
+/**
+ * @deprecated Will be removed in 1.1.0 release
+ * @use @vue-storefront/magento-theme/composables/useApi instead
+ */
 export default useCustomQueryFactory({
   query: async (context: Context, {
     query,

packages/composables/src/factories/useCustomQueryFactory.ts

@@ -10,6 +10,10 @@ import { PlatformApi } from '@vue-storefront/core/lib/src/types';
 import { FetchPolicy } from '../types';
 import { UseCustomQuery } from '../types/composables';
 
+/**
+ * @deprecated Will be removed in 1.1.0 release
+ * @use @vue-storefront/magento-theme/composables/useApi instead
+ */
 export interface UseCustomQueryFactoryFactoryParams<QUERY_VARIABLES, QUERY_RETURN, API extends PlatformApi = any> extends FactoryParams<API> {
   query: (context: Context, {
     variables,

packages/theme/components/CurrencySelector.vue

@@ -6,82 +6,38 @@
     >
       {{ currentCurrencySymbol }}
     </SfButton>
-    <SfBottomModal
-      :is-open="isCurrencyModalOpen"
-      title="Choose Currency"
-      @click:close="isCurrencyModalOpen = !isCurrencyModalOpen"
-    >
-      <SfList
-        v-if="availableCurrencies.length > 1"
-      >
-        <SfListItem
-          v-for="currency in availableCurrencies"
-          :key="currency"
-        >
-          <a
-            href="/"
-            :class="selectedCurrency === currency ? 'container__currency--selected-label' : ''"
-            @click.prevent="handleChanges({
-              callback: () => changeCurrency({id: currency}),
-              redirect: false,
-              refresh: true
-            })"
-          >
-            <SfCharacteristic class="currency">
-              <template #title>
-                <span>{{ currency }}</span>
-              </template>
-            </SfCharacteristic>
-          </a>
-        </SfListItem>
-      </SfList>
-    </SfBottomModal>
+    <CurrenciesModal
+      v-if="isCurrencyModalOpen"
+      :is-modal-open="isCurrencyModalOpen"
+      :selected-currency="selectedCurrency"
+      @closeModal="isCurrencyModalOpen = false"
+    />
   </div>
 </template>
-
 <script>
 import {
-  useCurrency,
-} from '@vue-storefront/magento';
-import {
-  SfImage,
   SfButton,
-  SfList,
-  SfBottomModal,
-  SfCharacteristic,
 } from '@storefront-ui/vue';
 import {
   ref,
   computed,
   defineComponent,
 } from '@nuxtjs/composition-api';
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
-import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
+import CurrenciesModal from './CurrencySelector/CurrenciesModal';
 
 export default defineComponent({
   name: 'CurrencySelector',
   components: {
-    SfImage,
+    CurrenciesModal,
     SfButton,
-    SfList,
-    SfBottomModal,
-    SfCharacteristic,
   },
   setup() {
     const {
       selectedCurrency,
       selectedLocale,
     } = useMagentoConfiguration();
 
-    /**
-     * The currency switch is commented, until the Core package
-     * enables the switch of currency without returning to the browser one with i18n
-     */
-    const {
-      currencies,
-      change: changeCurrency,
-    } = useCurrency();
-
     const currentCurrencySymbol = computed(() => {
       try {
         return (0).toLocaleString(
@@ -100,17 +56,10 @@ export default defineComponent({
       }
     });
 
-    const { handleChanges } = useHandleChanges();
-
     const isCurrencyModalOpen = ref(false);
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
-
     return {
       currentCurrencySymbol,
-      availableCurrencies,
-      changeCurrency,
-      handleChanges,
       isCurrencyModalOpen,
       selectedCurrency,
       selectedLocale,
@@ -127,70 +76,28 @@ export default defineComponent({
   flex-wrap: nowrap;
   align-items: center;
   position: relative;
+}
 
-  .sf-bottom-modal {
-    z-index: 2;
-    left: 0;
-    @include for-desktop {
-      --bottom-modal-height: 100vh;
-    }
-  }
-
-  .sf-bottom-modal::v-deep .sf-bottom-modal__close {
-    position: var(--circle-icon-position, absolute);
-    top: var(--spacer-xs);
-    right: var(--spacer-xs);
-  }
-
-  .sf-list {
-    .language {
-      padding: var(--spacer-sm);
-
-      &__flag {
-        margin-right: var(--spacer-sm);
-      }
-    }
-
-    @include for-desktop {
-      display: flex;
-    }
+.container__currency {
+  width: 20px;
+  --button-box-shadow: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.5;
+  border: none;
+  margin-right: 15px;
+  background-color: white;
+  color: black;
+  border-radius: 50px;
+
+  &--selected-label {
+    font-weight: bold;
   }
 
-  &__currency {
-    &--selected-label {
-      font-weight: bold;
-    }
-
-    width: 20px;
-    --button-box-shadow: none;
-    padding: 0px;
-    display: flex;
-    align-items: center;
-    opacity: 0.5;
-    border: none;
-    margin-right: 15px;
-    background-color: white;
-    color: black;
-    border-radius: 50px;
-
-    &:hover,
-    &--selected {
-      opacity: 1;
-    }
-
-    &--title {
-      --heading-title-font-weight: var(--font-weight--normal);
-      padding: var(
-              --bottom-modal-title-padding,
-              var(--spacer-sm) var(--spacer-lg)
-      );
-      color: var(--bottom-modal-title-color, var(--c-text));
-      text-align: var(--bottom-modal-title-text-align, center);
-      @include for-mobile {
-        --heading-title-font-size: var(--font-size--xs);
-        --heading-title-font-weight: var(--font-weight--bold);
-      }
-    }
+  &:hover,
+  &--selected {
+    opacity: 1;
   }
 }
 </style>

packages/theme/components/CurrencySelector/CurrenciesModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <SfBottomModal
+    :is-open="isModalOpen"
+    title="Choose Currency"
+    @click:close="closeModal"
+  >
+    <SfList
+      v-if="availableCurrencies.length > 1"
+    >
+      <SfListItem
+        v-for="currency in availableCurrencies"
+        :key="currency"
+      >
+        <a
+          href="/"
+          :class="selectedCurrency === currency ? 'container__currency--selected-label' : ''"
+          @click.prevent="handleChanges({
+            callback: () => changeCurrency({id: currency}),
+            redirect: false,
+            refresh: true
+          })"
+        >
+          <SfCharacteristic class="currency">
+            <template #title>
+              <span>{{ currency }}</span>
+            </template>
+          </SfCharacteristic>
+        </a>
+      </SfListItem>
+    </SfList>
+  </SfBottomModal>
+</template>
+<script>
+import {
+  defineComponent, computed, onMounted,
+} from '@nuxtjs/composition-api';
+import {
+  SfList,
+  SfBottomModal,
+  SfCharacteristic,
+} from '@storefront-ui/vue';
+import {
+  useCurrency,
+} from '@vue-storefront/magento';
+import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
+
+export default defineComponent({
+  name: 'CurrenciesModal',
+  components: {
+    SfList,
+    SfBottomModal,
+    SfCharacteristic,
+  },
+  props: {
+    isModalOpen: Boolean,
+    selectedCurrency: String,
+  },
+  emits: ['closeModal'],
+  setup() {
+    const {
+      currencies,
+      change: changeCurrency,
+      load: loadCurrencies,
+    } = useCurrency('header-currency');
+
+    const { handleChanges } = useHandleChanges();
+
+    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
+
+    onMounted(() => {
+      if (currencies.value && currencies.value?.available_currency_codes) return;
+      loadCurrencies();
+    });
+
+    return {
+      changeCurrency,
+      handleChanges,
+      availableCurrencies,
+    };
+  },
+  methods: {
+    closeModal() {
+      this.$emit('closeModal');
+    },
+  },
+});
+</script>
+<style lang="scss" scoped>
+.sf-bottom-modal {
+  z-index: 2;
+  left: 0;
+  @include for-desktop {
+    --bottom-modal-height: 100vh;
+  }
+}
+.sf-bottom-modal::v-deep .sf-bottom-modal__close {
+  position: var(--circle-icon-position, absolute);
+  top: var(--spacer-xs);
+  right: var(--spacer-xs);
+}
+
+.sf-list {
+  .language {
+    padding: var(--spacer-sm);
+
+    &__flag {
+      margin-right: var(--spacer-sm);
+    }
+  }
+
+  @include for-desktop {
+    display: flex;
+  }
+}
+
+.container__currency {
+  &--selected-label {
+    font-weight: bold;
+  }
+
+  &:hover,
+  &--selected {
+    opacity: 1;
+  }
+}
+</style>