From 9d9462b5900ef2320641f39cd6447d256972cd9a Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Fri, 18 Mar 2022 11:03:57 +0100
Subject: [PATCH] refactor(composable): refactor useUserShipping - move
 useUserShipping to the theme - mark useUserShipping in composable package as
 deprecated

---
 .../src/composables/useUserShipping/index.ts  |   3 +
 .../Checkout/UserShippingAddresses.vue        |  23 ++-
 packages/theme/composables/index.ts           |   1 +
 packages/theme/composables/useUser/index.ts   |  10 +-
 .../theme/composables/useUser/useUser.d.ts    |   3 +-
 .../commands/createCustomerAddressCommand.ts  |   9 ++
 .../commands/deleteCustomerAddressCommand.ts  |   9 ++
 .../commands/updateCustomerAddressCommand.ts  |  12 ++
 .../composables/useUserShipping/index.ts      | 149 ++++++++++++++++++
 .../useUserShipping/useUserShipping.d.ts      |   7 +
 packages/theme/composables/utils/mask.ts      |  19 +++
 packages/theme/pages/Checkout/Shipping.vue    |  31 ++--
 12 files changed, 241 insertions(+), 35 deletions(-)
 create mode 100644 packages/theme/composables/useUserShipping/commands/createCustomerAddressCommand.ts
 create mode 100644 packages/theme/composables/useUserShipping/commands/deleteCustomerAddressCommand.ts
 create mode 100644 packages/theme/composables/useUserShipping/commands/updateCustomerAddressCommand.ts
 create mode 100644 packages/theme/composables/useUserShipping/index.ts
 create mode 100644 packages/theme/composables/useUserShipping/useUserShipping.d.ts
 create mode 100644 packages/theme/composables/utils/mask.ts

diff --git a/packages/composables/src/composables/useUserShipping/index.ts b/packages/composables/src/composables/useUserShipping/index.ts
index 69d81b707..de231d6c1 100644
--- a/packages/composables/src/composables/useUserShipping/index.ts
+++ b/packages/composables/src/composables/useUserShipping/index.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated since version 1.0.0
+ */
 import {
   Context,
   Logger,
diff --git a/packages/theme/components/Checkout/UserShippingAddresses.vue b/packages/theme/components/Checkout/UserShippingAddresses.vue
index 1f36106f7..ca7c8e448 100644
--- a/packages/theme/components/Checkout/UserShippingAddresses.vue
+++ b/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,
     };
   },
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index c5c3188f9..62881bcf0 100644
--- a/packages/theme/composables/index.ts
+++ b/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';
diff --git a/packages/theme/composables/useUser/index.ts b/packages/theme/composables/useUser/index.ts
index c02930b1c..87e1d5b30 100644
--- a/packages/theme/composables/useUser/index.ts
+++ b/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
diff --git a/packages/theme/composables/useUser/useUser.d.ts b/packages/theme/composables/useUser/useUser.d.ts
index 6b163d23e..5fe02f345 100644
--- a/packages/theme/composables/useUser/useUser.d.ts
+++ b/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>
 };
diff --git a/packages/theme/composables/useUserShipping/commands/createCustomerAddressCommand.ts b/packages/theme/composables/useUserShipping/commands/createCustomerAddressCommand.ts
new file mode 100644
index 000000000..8ec6b2326
--- /dev/null
+++ b/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 ?? {};
+  },
+};
diff --git a/packages/theme/composables/useUserShipping/commands/deleteCustomerAddressCommand.ts b/packages/theme/composables/useUserShipping/commands/deleteCustomerAddressCommand.ts
new file mode 100644
index 000000000..3e8d56faa
--- /dev/null
+++ b/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 ?? {};
+  },
+};
diff --git a/packages/theme/composables/useUserShipping/commands/updateCustomerAddressCommand.ts b/packages/theme/composables/useUserShipping/commands/updateCustomerAddressCommand.ts
new file mode 100644
index 000000000..185c9f63e
--- /dev/null
+++ b/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 ?? {};
+  },
+};
diff --git a/packages/theme/composables/useUserShipping/index.ts b/packages/theme/composables/useUserShipping/index.ts
new file mode 100644
index 000000000..feff2cb6e
--- /dev/null
+++ b/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;
diff --git a/packages/theme/composables/useUserShipping/useUserShipping.d.ts b/packages/theme/composables/useUserShipping/useUserShipping.d.ts
new file mode 100644
index 000000000..6a99bf52d
--- /dev/null
+++ b/packages/theme/composables/useUserShipping/useUserShipping.d.ts
@@ -0,0 +1,7 @@
+export interface UseUserShippingErrors {
+  addAddress: Error;
+  deleteAddress: Error;
+  updateAddress: Error;
+  load: Error;
+  setDefaultAddress: Error;
+}
diff --git a/packages/theme/composables/utils/mask.ts b/packages/theme/composables/utils/mask.ts
new file mode 100644
index 000000000..709743796
--- /dev/null
+++ b/packages/theme/composables/utils/mask.ts
@@ -0,0 +1,19 @@
+const maskString = (el: string) => `${el.charAt(0)}***${el.slice(-1)}`;
+
+const maskAny = (el: any) => {
+  if (typeof el === 'string') {
+    return maskString(el);
+  }
+
+  return '***';
+};
+
+const mask = (el: Object): any => {
+  if (typeof el === 'object' && !Array.isArray(el)) {
+    return Object.fromEntries(Object.keys(el).map((key) => [key, maskAny(el[key])]));
+  }
+
+  return maskAny(el);
+};
+
+export default mask;
diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
index 1712379b1..30e5154b9 100644
--- a/packages/theme/pages/Checkout/Shipping.vue
+++ b/packages/theme/pages/Checkout/Shipping.vue
@@ -13,6 +13,7 @@
         v-model="setAsDefault"
         v-e2e="'shipping-addresses'"
         :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+        :shipping-addresses="addresses"
         @setCurrentAddress="handleSetCurrentAddress"
       />
       <div
@@ -270,14 +271,12 @@ import {
   useContext,
 } from '@nuxtjs/composition-api';
 import {
-  addressGetter,
   useCountrySearch,
-  useUserShipping,
 } from '@vue-storefront/magento';
-import { userShippingGetters } from '~/getters';
 import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { useUser, useShipping } from '~/composables';
+import { userShippingGetters, addressGetter } from '~/getters';
+import { useUser, useShipping, useUserShipping } from '~/composables';
 import { addressFromApiToForm } from '~/helpers/checkout/address';
 import { mergeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
@@ -313,14 +312,13 @@ export default defineComponent({
     const router = useRouter();
     const { app } = useContext();
     const address = ref({});
-
+    const userShipping = ref({});
     const {
       load: loadShipping,
       save: saveShipping,
       loading: isShippingLoading,
     } = useShipping();
     const {
-      shipping: userShipping,
       load: loadUserShipping,
       setDefaultAddress,
     } = useUserShipping();
@@ -340,6 +338,7 @@ export default defineComponent({
     const canAddNewAddress = ref(true);
 
     const isShippingDetailsStepCompleted = ref(false);
+    const addresses = computed(() => userShippingGetters.getAddresses(userShipping.value));
 
     const canMoveForward = computed(() => !isShippingLoading.value && shippingDetails.value && Object.keys(
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
@@ -350,8 +349,7 @@ export default defineComponent({
       if (!isAuthenticated.value || !userShipping.value) {
         return false;
       }
-      const addresses = userShippingGetters.getAddresses(userShipping.value);
-      return Boolean(addresses?.length);
+      return addresses.value.length > 0;
     });
     // @ts-ignore
     const countriesList = computed(() => addressGetter.countriesList(countries.value));
@@ -371,12 +369,14 @@ export default defineComponent({
       shippingMethods.value = shippingInfo.available_shipping_methods;
 
       if (addressId !== NOT_SELECTED_ADDRESS && setAsDefault.value) {
-        const chosenAddress = userShippingGetters.getAddresses(
+        const [chosenAddress] = userShippingGetters.getAddresses(
           userShipping.value,
           { id: addressId },
         );
-        if (chosenAddress && chosenAddress.length > 0) {
-          await setDefaultAddress({ address: chosenAddress[0] });
+        chosenAddress.default_shipping = setAsDefault.value;
+        if (chosenAddress) {
+          await setDefaultAddress({ address: chosenAddress });
+          userShipping.value = await loadUserShipping(true);
         }
       }
       reset();
@@ -430,13 +430,14 @@ export default defineComponent({
         await router.push(app.localePath('/checkout/user-account'));
       }
 
-      const [shippingInfo] = await Promise.all([
+      const [loadedShippingInfo, loadedUserShipping] = await Promise.all([
         loadShipping(),
-        loadCountries(),
         loadUserShipping(),
+        loadCountries(),
       ]);
 
-      address.value = shippingInfo;
+      address.value = loadedShippingInfo;
+      userShipping.value = loadedUserShipping;
 
       if (shippingDetails.value?.country_code) {
         await searchCountry({ id: shippingDetails.value.country_code });
@@ -452,6 +453,7 @@ export default defineComponent({
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       const hasEmptyShippingDetails = !shippingDetails.value
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         || Object.keys(shippingDetails.value).length === 0;
       if (hasEmptyShippingDetails) {
         selectDefaultAddress();
@@ -480,6 +482,7 @@ export default defineComponent({
       setAsDefault,
       shippingDetails,
       shippingMethods,
+      addresses,
     };
   },
 });