refactor: refactored useCOuntrySearch composable (#757)

Author: Marcin Kwiatkowski

packages/composables/src/composables/useCountrySearch/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   Context, Logger,
 } from '@vue-storefront/core';

packages/composables/src/factories/useCountrySearchFactory.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import { computed } from '@vue/composition-api';
 import {
   Context,

packages/theme/components/MyAccount/AddressForm.vue

@@ -193,9 +193,6 @@ import {
   SfSelect,
   SfCheckbox,
 } from '@storefront-ui/vue';
-import {
-  useCountrySearch,
-} from '@vue-storefront/magento';
 import { required, min, oneOf } from 'vee-validate/dist/rules';
 import {
   ValidationProvider,
@@ -207,8 +204,10 @@ import {
   computed,
   onBeforeMount,
   defineComponent,
+  ref,
 } from '@nuxtjs/composition-api';
 import omitDeep from 'omit-deep';
+import { useCountrySearch } from '~/composables';
 import { addressGetter } from '~/getters';
 
 extend('required', {
@@ -268,10 +267,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const {
       load: loadCountries,
-      countries,
       search: searchCountry,
-      country,
-    } = useCountrySearch('my-account-shipping');
+    } = useCountrySearch();
+
+    const countries = ref([]);
+    const country = ref(null);
 
     const form = reactive({
       apartment: props.address.apartment,
@@ -309,9 +309,9 @@ export default defineComponent({
     };
 
     onBeforeMount(async () => {
-      await loadCountries();
+      countries.value = await loadCountries();
       if (props.address.country_code) {
-        await searchCountry({ id: props.address.country_code });
+        country.value = await searchCountry({ id: props.address.country_code });
       }
     });
 

packages/theme/composables/index.ts

@@ -27,3 +27,4 @@ export { default as useAddresses } from './useAddresses';
 export { default as useMakeOrder } from './useMakeOrder';
 export { default as useUserOrder } from './useUserOrder';
 export { default as useUserAddress } from './useUserAddress';
+export { default as useCountrySearch } from './useCountrySearch';

packages/theme/composables/types.d.ts

@@ -51530,3 +51530,4 @@ export interface FacetResultsData {
   itemsPerPage: number;
   availableFilters: Record<string, any>;
 }
+

packages/theme/composables/useCountrySearch/index.ts

@@ -0,0 +1,69 @@
+import { ref, useContext } from '@nuxtjs/composition-api';
+import { Logger } from '@vue-storefront/core';
+import { ComposableFunctionArgs, Maybe, Country, Countries } from '~/composables/types';
+
+export const useCountrySearch = () => {
+  const { app } = useContext();
+  const loading = ref(false);
+  const error = ref({
+    search: null,
+    load: null,
+  });
+
+  const search = async (params: ComposableFunctionArgs<{ id: string }>): Promise<Maybe<Country>> => {
+    let results = null;
+
+    try {
+      loading.value = true;
+
+      Logger.debug('[Magento]: Search country information based on', { params });
+
+      const { data } = await app.$vsf.$magento.api.country(params.id);
+
+      Logger.debug('[Result]:', { data });
+
+      results = data?.country ?? null;
+      error.value.search = null;
+    } catch (err) {
+      error.value.search = err;
+      Logger.error('useCountrySearch/search', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  const load = async (): Promise<Array<Countries>> => {
+    let results = [];
+
+    try {
+      loading.value = true;
+
+      Logger.debug('[Magento]: Load available countries on store');
+
+      const { data } = await app.$vsf.$magento.api.countries();
+
+      Logger.debug('[Result]:', { data });
+
+      results = data?.countries ?? [];
+      error.value.search = null;
+    } catch (err) {
+      error.value.search = err;
+      Logger.error('useCountrySearch/load', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  return {
+    load,
+    search,
+    loading,
+    error,
+  };
+};
+
+export default useCountrySearch;

packages/theme/pages/Checkout/Billing.vue

@@ -275,10 +275,6 @@ import {
   SfSelect,
   SfCheckbox,
 } from '@storefront-ui/vue';
-import {
-  useCountrySearch,
-  addressGetter,
-} from '@vue-storefront/magento';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import {
@@ -290,9 +286,9 @@ import {
   defineComponent,
   useContext,
 } from '@nuxtjs/composition-api';
-import { userBillingGetters } from '~/getters';
+import { userBillingGetters, addressGetter } from '~/getters';
 import {
-  useShipping, useUser, useBilling, useUserAddress,
+  useShipping, useUser, useBilling, useUserAddress, useCountrySearch,
 } from '~/composables';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import {
@@ -349,10 +345,10 @@ export default defineComponent({
     } = useShipping();
     const {
       load: loadCountries,
-      countries,
       search: searchCountry,
-      country,
-    } = useCountrySearch('Step:Billing');
+    } = useCountrySearch();
+    const countries = ref([]);
+    const country = ref(null);
     const { isAuthenticated } = useUser();
     let oldBilling = null;
     const sameAsShipping = ref(false);
@@ -412,21 +408,21 @@ export default defineComponent({
       sameAsShipping.value = !sameAsShipping.value;
       if (sameAsShipping.value) {
         shippingDetails.value = await loadShipping();
-        await searchCountry({ id: shippingDetails.value.country_code });
+        country.value = await searchCountry({ id: shippingDetails.value.country_code });
         oldBilling = { ...billingDetails.value };
         billingDetails.value = {
           ...formatAddressReturnToData(shippingDetails.value),
         };
         currentAddressId.value = NOT_SELECTED_ADDRESS;
         setAsDefault.value = false;
         if (billingDetails.value.country_code) {
-          await searchCountry({ id: billingDetails?.value.country_code });
+          country.value = await searchCountry({ id: billingDetails?.value.country_code });
         }
         return;
       }
       billingDetails.value = oldBilling;
       if (billingDetails.value.country_code) {
-        await searchCountry({ id: billingDetails?.value.country_code });
+        country.value = await searchCountry({ id: billingDetails?.value.country_code });
       }
     };
 
@@ -465,7 +461,7 @@ export default defineComponent({
 
     const changeCountry = async (id) => {
       changeBillingDetails('country_code', id);
-      await searchCountry({ id });
+      country.value = await searchCountry({ id });
     };
 
     watch(billingAddress, (addr) => {
@@ -478,10 +474,11 @@ export default defineComponent({
         await router.push(app.localePath('/checkout/user-account'));
       }
 
-      const [loadedBilling] = await Promise.all([load(), loadCountries()]);
+      const [loadedBilling, loadedCountries] = await Promise.all([load(), loadCountries()]);
       billingAddress.value = loadedBilling;
+      countries.value = loadedCountries;
       if (billingDetails.value?.country_code) {
-        await searchCountry({ id: billingDetails.value.country_code });
+        country.value = await searchCountry({ id: billingDetails.value.country_code });
       }
 
       if (!userBilling.value?.addresses && isAuthenticated.value) {

packages/theme/pages/Checkout/Shipping.vue

@@ -270,13 +270,10 @@ import {
   useRouter,
   useContext,
 } from '@nuxtjs/composition-api';
-import {
-  useCountrySearch,
-} from '@vue-storefront/magento';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { userShippingGetters, addressGetter } from '~/getters';
-import { useUser, useShipping, useUserAddress } from '~/composables';
+import { useUser, useShipping, useUserAddress, useCountrySearch } from '~/composables';
 import { addressFromApiToForm } from '~/helpers/checkout/address';
 import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
@@ -325,10 +322,10 @@ export default defineComponent({
 
     const {
       load: loadCountries,
-      countries,
       search: searchCountry,
-      country,
-    } = useCountrySearch('Step:Shipping');
+    } = useCountrySearch();
+    const countries = ref([]);
+    const country = ref(null);
     const { isAuthenticated } = useUser();
     const shippingDetails = ref(addressFromApiToForm(address.value) || {});
     const shippingMethods = ref([]);
@@ -419,7 +416,7 @@ export default defineComponent({
 
     const changeCountry = async (id) => {
       changeShippingDetails('country_code', id);
-      await searchCountry({ id });
+      country.value = await searchCountry({ id });
     };
 
     watch(address, (addr) => {
@@ -430,17 +427,18 @@ export default defineComponent({
       if (!validStep) {
         await router.push(app.localePath('/checkout/user-account'));
       }
-      const [loadedShippingInfo, loadedUserShipping] = await Promise.all([
+      const [loadedShippingInfo, loadedUserShipping, loadedCountries] = await Promise.all([
         loadShipping(),
         loadUserShipping(),
         loadCountries(),
       ]);
 
       address.value = loadedShippingInfo;
       userShipping.value = loadedUserShipping;
+      countries.value = loadedCountries;
 
       if (shippingDetails.value?.country_code) {
-        await searchCountry({ id: shippingDetails.value.country_code });
+        country.value = await searchCountry({ id: shippingDetails.value.country_code });
       }
 
       const shippingAddresses = userShippingGetters.getAddresses(