refactor(composable): refactor useUserShipping (#751)

- move useUserShipping to the theme
- mark useUserShipping in composable package as deprecated

Author: Friendly-superdev

packages/composables/src/composables/useUserShipping/index.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   Context,
   Logger,

packages/theme/components/Checkout/UserShippingAddresses.vue

@@ -28,9 +28,9 @@
 
 <script>
 import { SfCheckbox, SfAddressPicker } from '@storefront-ui/vue';
-import { useUserShipping } from '@vue-storefront/magento';
+import { defineComponent } from '@nuxtjs/composition-api';
+
 import { userShippingGetters } from '~/getters';
-import { computed, defineComponent } from '@nuxtjs/composition-api';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
 
 export default defineComponent({
@@ -49,29 +49,24 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    shippingAddresses: {
+      type: Array,
+      required: true,
+    },
   },
   emits: ['setCurrentAddress'],
-  setup(props, { emit }) {
-    const { shipping: userShipping } = useUserShipping();
-
+  setup({ shippingAddresses }, { emit }) {
     const setCurrentAddress = (addressId) => {
-      const selectedAddress = userShippingGetters.getAddresses(
-        userShipping.value,
-        { id: Number.parseInt(addressId, 10) },
-      );
-
+      const selectedAddress = shippingAddresses.find((address) => address.id === Number(addressId));
       if (!selectedAddress) {
         return;
       }
 
-      emit('setCurrentAddress', selectedAddress[0]);
+      emit('setCurrentAddress', selectedAddress);
     };
 
-    const shippingAddresses = computed(() => userShippingGetters.getAddresses(userShipping.value));
-
     return {
       setCurrentAddress,
-      shippingAddresses,
       userShippingGetters,
     };
   },

packages/theme/composables/index.ts

@@ -26,3 +26,4 @@ export { default as usePaymentProvider } from './usePaymentProvider';
 export { default as useAddresses } from './useAddresses';
 export { default as useMakeOrder } from './useMakeOrder';
 export { default as useUserOrder } from './useUserOrder';
+export { default as useUserShipping } from './useUserShipping';

packages/theme/composables/useUser/index.ts

@@ -95,8 +95,6 @@ export const useUser = (): UseUser => {
 
     try {
       loading.value = true;
-      // user.value = await _factoryParams.load({customQuery});
-
       const apiState = app.context.$vsf.$magento.config.state;
 
       if (!apiState.getCustomerToken()) {
@@ -108,8 +106,6 @@ export const useUser = (): UseUser => {
         Logger.debug('[Result]:', { data });
 
         customerStore.user = data?.customer ?? {};
-
-        return customerStore.user;
       } catch {
         // eslint-disable-next-line no-void
         // @ts-ignore
@@ -122,6 +118,8 @@ export const useUser = (): UseUser => {
     } finally {
       loading.value = false;
     }
+
+    return customerStore.user;
   };
 
   // eslint-disable-next-line @typescript-eslint/require-await,no-empty-pattern
@@ -178,14 +176,14 @@ export const useUser = (): UseUser => {
 
       error.value.login = null;
       customerStore.user = load();
-
-      return customerStore.user;
     } catch (err) {
       error.value.login = err;
       Logger.error('useUser/login', err);
     } finally {
       loading.value = false;
     }
+
+    return customerStore.user;
   };
 
   // eslint-disable-next-line consistent-return

packages/theme/composables/useUser/useUser.d.ts

@@ -11,6 +11,7 @@ export interface UseUserErrors {
 }
 
 export interface Customer {
+  id: string
   email: string
   firstname: string
   password: string
@@ -52,6 +53,6 @@ export type UseUser = {
     }>
   ) => Promise<void>
   load: (
-    params: ComposableFunctionArgs<{}>
+    params?: ComposableFunctionArgs<{}>
   ) => Promise<Customer>
 };

packages/theme/composables/useUserShipping/commands/createCustomerAddressCommand.ts

@@ -0,0 +1,9 @@
+import { CustomerAddressInput } from '~/modules/GraphQL/types';
+
+export const createCustomerAddressCommand = {
+  execute: async (context, params: CustomerAddressInput) => {
+    const { data } = await context.$vsf.$magento.api.createCustomerAddress(params);
+
+    return data?.createCustomerAddress ?? {};
+  },
+};

packages/theme/composables/useUserShipping/commands/deleteCustomerAddressCommand.ts

@@ -0,0 +1,9 @@
+import { CustomerAddress } from '~/modules/GraphQL/types';
+
+export const deleteCustomerAddressCommand = {
+  execute: async (context, address: CustomerAddress) => {
+    const { data } = await context.$vsf.$magento.api.deleteCustomerAddress(address.id);
+
+    return data?.deleteCustomerAddress ?? {};
+  },
+};

packages/theme/composables/useUserShipping/commands/updateCustomerAddressCommand.ts

@@ -0,0 +1,12 @@
+import { CustomerAddressInput } from '~/modules/GraphQL/types';
+
+export const updateCustomerAddressCommand = {
+  execute: async (context, params: {
+    addressId: number;
+    input: CustomerAddressInput;
+  }) => {
+    const { data } = await context.$vsf.$magento.api.updateCustomerAddress(params);
+
+    return data?.updateCustomerAddress ?? {};
+  },
+};

packages/theme/composables/useUserShipping/index.ts

@@ -0,0 +1,149 @@
+import { Ref, ref, useContext } from '@nuxtjs/composition-api';
+import { Logger } from '@vue-storefront/core';
+import { UseUserShippingErrors } from '~/composables/useUserShipping/useUserShipping';
+import { useUser } from '~/composables';
+import { transformUserCreateAddressInput, transformUserUpdateAddressInput } from '~/helpers/userAddressManipulator';
+import { createCustomerAddressCommand } from '~/composables/useUserShipping/commands/createCustomerAddressCommand';
+import { deleteCustomerAddressCommand } from '~/composables/useUserShipping/commands/deleteCustomerAddressCommand';
+import { updateCustomerAddressCommand } from '~/composables/useUserShipping/commands/updateCustomerAddressCommand';
+import { CustomerAddress } from '~/modules/GraphQL/types';
+import mask from '../utils/mask';
+
+export const useUserShipping = () => {
+  const loading = ref(false);
+  const shipping = ref({});
+  const error: Ref<UseUserShippingErrors> = ref({
+    addAddress: null,
+    deleteAddress: null,
+    updateAddress: null,
+    load: null,
+    setDefaultAddress: null,
+  });
+  const { user, load: loadUser } = useUser();
+  const context = useContext();
+
+  const addAddress = async ({ address, customQuery }: { address: CustomerAddress, customQuery: any }) => {
+    Logger.debug('useUserShipping.addAddress', mask(address));
+    let result = {};
+    try {
+      loading.value = true;
+      const customerAddressInput = transformUserCreateAddressInput({
+        address,
+        shipping: shipping.value,
+        customQuery,
+      });
+      result = await createCustomerAddressCommand.execute(context, customerAddressInput);
+      error.value.addAddress = null;
+    } catch (err) {
+      error.value.addAddress = err;
+      Logger.error('useUserShipping/addAddress', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result: mask(result) });
+
+    return result;
+  };
+
+  const deleteAddress = async (address: CustomerAddress) => {
+    Logger.debug('useUserShipping.deleteAddress', address);
+    let result = {};
+
+    try {
+      loading.value = true;
+      result = await deleteCustomerAddressCommand.execute(context, address);
+      error.value.deleteAddress = null;
+    } catch (err) {
+      error.value.deleteAddress = err;
+      Logger.error('useUserShipping/deleteAddress', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result: mask(result) });
+
+    return result;
+  };
+
+  const updateAddress = async ({ address, customQuery }: { address: CustomerAddress, customQuery: any }) => {
+    Logger.debug('useUserShipping.updateAddress', mask(address));
+    let result = {};
+
+    try {
+      loading.value = true;
+      const customerAddressInput = transformUserUpdateAddressInput({
+        address,
+        shipping: shipping.value,
+        customQuery,
+      });
+      result = await updateCustomerAddressCommand.execute(context, customerAddressInput);
+      error.value.updateAddress = null;
+    } catch (err) {
+      error.value.updateAddress = err;
+      Logger.error('useUserShipping/updateAddress', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result: mask(result) });
+
+    return result;
+  };
+
+  const load = async (force: false) => {
+    Logger.debug('useUserShipping.load');
+
+    try {
+      loading.value = true;
+      if (force || !user?.value?.id) {
+        await loadUser();
+      }
+    } catch (err) {
+      error.value.load = err;
+      Logger.error('useUserShipping/load', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return user?.value;
+  };
+
+  const setDefaultAddress = async ({ address, customQuery }: { address: CustomerAddress, customQuery: any }) => {
+    Logger.debug('useUserShipping.setDefaultAddress', mask(address));
+    let result = {};
+
+    try {
+      loading.value = true;
+      const updateAddressInput = transformUserUpdateAddressInput({
+        address,
+        shipping: shipping.value,
+        customQuery,
+      });
+
+      result = await updateCustomerAddressCommand.execute(context, updateAddressInput);
+      error.value.setDefaultAddress = null;
+    } catch (err) {
+      error.value.setDefaultAddress = err;
+      Logger.error('useUserShipping/setDefaultAddress', err);
+    } finally {
+      loading.value = false;
+    }
+
+    Logger.debug('[Result]:', { result: mask(result) });
+
+    return result;
+  };
+
+  return {
+    loading,
+    error,
+    addAddress,
+    deleteAddress,
+    updateAddress,
+    load,
+    setDefaultAddress,
+  };
+};
+
+export default useUserShipping;

packages/theme/composables/useUserShipping/useUserShipping.d.ts

@@ -0,0 +1,7 @@
+export interface UseUserShippingErrors {
+  addAddress: Error;
+  deleteAddress: Error;
+  updateAddress: Error;
+  load: Error;
+  setDefaultAddress: Error;
+}