refactor: refactored useAddresses (#743)

Author: Marcin Kwiatkowski

packages/composables/src/composables/useAddresses/index.ts

@@ -25,6 +25,9 @@ type RemoveAddressInput = {
   }
 } & CustomQueryParams;
 
+/**
+ * @deprecated since version 1.0.0
+ */
 const factoryParams: UseAddressesParams<CustomerAddress,
   CustomQueryParams,
   SaveAddressInput,

packages/composables/src/factories/useAddressesFactory.ts

@@ -24,6 +24,9 @@ export interface UseAddressesParams<ADDRESS,
   remove: (context: Context, params: ComposableFunctionArgs<REMOVE_ADDRESS_PARAMS>) => Promise<boolean>;
 }
 
+/**
+ * @deprecated since version 1.0.0
+ */
 export const useAddressesFactory = <ADDRESS,
   LOAD_ADDRESS_PARAMS extends { customQuery?: CustomQuery },
   SAVE_ADDRESS_PARAMS extends { customQuery?: CustomQuery },

packages/theme/components/MyAccount/AddressForm.vue

@@ -194,8 +194,6 @@ import {
   SfCheckbox,
 } from '@storefront-ui/vue';
 import {
-  addressGetter,
-  useAddresses,
   useCountrySearch,
 } from '@vue-storefront/magento';
 import { required, min, oneOf } from 'vee-validate/dist/rules';
@@ -211,6 +209,7 @@ import {
   defineComponent,
 } from '@nuxtjs/composition-api';
 import omitDeep from 'omit-deep';
+import { addressGetter } from '~/getters';
 
 extend('required', {
   ...required,
@@ -274,10 +273,6 @@ export default defineComponent({
       country,
     } = useCountrySearch('my-account-shipping');
 
-    const {
-      load,
-    } = useAddresses();
-
     const form = reactive({
       apartment: props.address.apartment,
       city: props.address.city,
@@ -292,8 +287,8 @@ export default defineComponent({
       },
       street: props.address.street,
       telephone: props.address.telephone,
-      default_shipping: props.address.default_shipping,
-      default_billing: props.address.default_billing,
+      default_shipping: props.address.default_shipping || false,
+      default_billing: props.address.default_billing || false,
       ...(props.isNew ? {} : { id: props.address.id }),
     });
     // @ts-ignore
@@ -308,9 +303,6 @@ export default defineComponent({
 
       emit('submit', {
         form: omitDeep(form, ['__typename']),
-        onComplete: async () => {
-          await load();
-        },
         // TODO: Handle Error
         onError: () => {},
       });

packages/theme/composables/index.ts

@@ -22,3 +22,4 @@ export { default as useShippingProvider } from './useShippingProvider';
 export { default as useBilling } from './useBilling';
 export { default as useRelatedProducts } from './useRelatedProducts';
 export { default as usePaymentProvider } from './usePaymentProvider';
+export { default as useAddresses } from './useAddresses';

packages/theme/composables/useAddresses/index.ts

@@ -0,0 +1,114 @@
+import { Ref, ref, useContext } from '@nuxtjs/composition-api';
+import { Logger } from '@vue-storefront/core';
+import { transformUserCreateAddressInput, transformUserUpdateAddressInput } from '@vue-storefront/magento';
+import { ComposableFunctionArgs } from '~/composables/types';
+import { UseAddressesInterface, UseAddressesParamsInput, UseAddressesErrors } from '~/composables/useAddresses/useAddresses';
+
+export const useAddresses = () : UseAddressesInterface => {
+  const error: Ref<UseAddressesErrors> = ref({
+    load: null,
+    save: null,
+    remove: null,
+    update: null,
+  });
+  const loading: Ref<boolean> = ref(false);
+  const { app } = useContext();
+  const context = app.$vsf;
+
+  const load = async () => {
+    Logger.debug('[Magento] load user addresses');
+    let results = null;
+
+    try {
+      loading.value = true;
+      const { data } = await context.$magento.api.getCustomerAddresses();
+      results = data?.customer?.addresses ?? [];
+      Logger.debug('[Magento] load user addresses results:', results);
+      error.value.load = null;
+    } catch (err) {
+      error.value.load = err;
+      Logger.error('Magento] load user addresses error', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  const save = async (saveParams: ComposableFunctionArgs<UseAddressesParamsInput>) => {
+    Logger.debug('[Magento] save user address:', saveParams.address);
+    let results = null;
+
+    try {
+      loading.value = true;
+      const { data } = await context.$magento.api.createCustomerAddress(
+        transformUserCreateAddressInput(saveParams),
+      );
+      results = data?.createCustomerAddress ?? {};
+      Logger.debug('[Magento] save user address results:', saveParams.address);
+      error.value.save = null;
+    } catch (err) {
+      error.value.save = err;
+      Logger.error('[Magento] save user address error:', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  const update = async (updateParams: ComposableFunctionArgs<UseAddressesParamsInput>) => {
+    Logger.debug('[Magento] update user address:', updateParams.address);
+    let results = null;
+
+    try {
+      loading.value = true;
+      const { data } = await context.$magento.api.updateCustomerAddress(
+        transformUserUpdateAddressInput(updateParams),
+      );
+      results = data?.updateCustomerAddress ?? {};
+      Logger.debug('[Magento] update user address results:', results);
+      error.value.update = null;
+    } catch (err) {
+      error.value.update = err;
+      Logger.error('[Magento] update user address error:', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  const remove = async (removeParams: ComposableFunctionArgs<UseAddressesParamsInput>) => {
+    Logger.debug('[Magento] remove user address:', removeParams.address);
+    let results = null;
+
+    try {
+      loading.value = true;
+      const { data } = await context.$magento.api.deleteCustomerAddress(
+        removeParams.address.id,
+      );
+      results = !!data.deleteCustomerAddress;
+      Logger.debug('[Magento] remove user address results:', results);
+      error.value.remove = null;
+    } catch (err) {
+      error.value.remove = err;
+      Logger.error('[Magento] remove user address error:', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  return {
+    error,
+    loading,
+    load,
+    save,
+    update,
+    remove,
+  };
+};
+
+export default useAddresses;

packages/theme/composables/useAddresses/useAddresses.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs } from '@vue-storefront/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { CustomerAddress } from '@vue-storefront/magento-api';
+
+export type UseAddressesErrors = {
+  load: Error;
+  save: Error;
+  remove: Error;
+  update: Error;
+};
+
+export type UseAddressesParamsInput = {
+  address: CustomerAddress
+};
+
+export interface UseAddressesInterface {
+  error: Ref<UseAddressesErrors>,
+  loading: Ref<boolean>,
+  load: () => Promise<Array<CustomerAddress>>,
+  save: (saveParams: ComposableFunctionArgs<UseAddressesParamsInput>) => Promise<CustomerAddress>,
+  update: (updateParams?: ComposableFunctionArgs<UseAddressesParamsInput>) => Promise<CustomerAddress>,
+  remove: (removeParams?: ComposableFunctionArgs<UseAddressesParamsInput>) => Promise<boolean>,
+}

packages/theme/pages/MyAccount/AddressesDetails.vue

@@ -16,6 +16,7 @@
         <AddressForm
           :address="activeAddress"
           :is-new="isNewAddress"
+          v-if="activeAddress && activeAddress.id || isNewAddress"
           @submit="saveAddress"
         />
       </SfTab>
@@ -82,16 +83,17 @@
 </template>
 <script>
 import { SfTabs, SfButton } from '@storefront-ui/vue';
-import { useAddresses } from '@vue-storefront/magento';
-import { userAddressesGetters } from '~/getters';
 import {
   computed,
   defineComponent,
   useRouter,
   useRoute,
   useContext,
+  ref,
+  useFetch,
 } from '@nuxtjs/composition-api';
-import { onSSR } from '@vue-storefront/core';
+import { useAddresses } from '~/composables';
+import { userAddressesGetters } from '~/getters';
 import AddressForm from '~/components/MyAccount/AddressForm.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
@@ -107,22 +109,20 @@ export default defineComponent({
   },
   setup() {
     const {
-      addresses, load, remove, update, save,
+      load, remove, update, save,
     } = useAddresses();
 
-    const userAddresses = computed(() => userAddressesGetters.getAddresses(addresses.value));
     const router = useRouter();
     const route = useRoute();
     const { app } = useContext();
-    const activeAddress = computed(() => userAddresses.value
-      .filter((address) => String(address?.id) === route.value.query.id)
-      .pop());
-
+    const userAddresses = ref([]);
+    const activeAddress = ref({});
     const getTranslatedUrlAddress = (title) => app.i18n.t(`${title}`).toLowerCase().replace(' ', '-');
-    const isNewAddress = computed(() => !activeAddress.value);
+    const isNewAddress = computed(() => route.value.query.id === 'new');
     const editingAddress = computed(() => !!route.value.query.id);
     const changeAddress = async (address) => {
       const addressId = address?.id || 'new';
+
       await router.push(
         `${app.localePath({
           path: `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
@@ -139,23 +139,31 @@ export default defineComponent({
       }
     };
 
-    const saveAddress = async ({ form, onComplete, onError }) => {
+    const saveAddress = async ({ form, onError }) => {
       try {
         const actionMethod = isNewAddress.value ? save : update;
         const data = await actionMethod({ address: form });
-        await onComplete(data);
         await router.push(
           app.localePath(
             `/my-account/${getTranslatedUrlAddress('Addresses details')}`,
           ),
         );
+        addresses.value = data;
+        userAddresses.value = userAddressesGetters.getAddresses(data);
       } catch (error) {
         onError(error);
       }
     };
 
-    onSSR(async () => {
-      await load({});
+    useFetch(async () => {
+      const addressesData = await load();
+      userAddresses.value = userAddressesGetters.getAddresses(addressesData);
+
+      const activeAddressData = userAddresses.value
+        .filter((address) => String(address?.id) === route.value.query.id)
+        .pop();
+
+      activeAddress.value = activeAddressData;
     });
 
     return {