Integrated basic info with API

packages/commercetools/api-client/src/api/addCustomerAddress/index.ts

@@ -0,0 +1,17 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+
+const addCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      addAddress: { address }
+    }]
+  },
+  fetchPolicy: 'no-cache'
+});
+
+export default addCustomerAddress;

packages/commercetools/api-client/src/api/assignCustomerAddress/index.ts

@@ -0,0 +1,29 @@
+import { Customer, Address } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+import { apolloClient } from '../..';
+
+const getActionKey = (type: 'billing' | 'shipping'): string => {
+  switch (type) {
+    case 'billing':
+      return 'addBillingAddressId';
+    case 'shipping':
+      return 'addShippingAddressId';
+    default:
+      throw new Error('Unknown action type');
+  }
+};
+
+const assignCustomerAddress = (customer: Customer, address: Address, type: 'billing' | 'shipping'): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      [getActionKey(type)]: {
+        addressId: address.id
+      }
+    }]
+  }
+});
+
+export default assignCustomerAddress;

packages/commercetools/api-client/src/api/getMe/defaultQuery.ts

@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import { CartFragment, CustomerFragment } from './../../fragments';
+import { CartFragment, CustomerFragment, AddressFragment } from './../../fragments';
 
 const basicProfile = gql`
   ${CartFragment}
@@ -16,6 +16,7 @@ const basicProfile = gql`
 const fullProfile = gql`
   ${CartFragment}
   ${CustomerFragment}
+  ${AddressFragment}
 
   query getMe($locale: Locale!) {
     me {
@@ -24,6 +25,17 @@ const fullProfile = gql`
       }
       customer {
         ...DefaultCustomer
+        addresses {
+          ...DefaultAddress
+        }
+        defaultBillingAddress {
+          ...DefaultAddress
+        }
+        defaultShippingAddress {
+          ...DefaultAddress
+        }
+        shippingAddressIds
+        billingAddressIds
       }
     }
   }

packages/commercetools/api-client/src/api/removeCustomerAddress/index.ts

@@ -0,0 +1,18 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+const removeCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      removeAddress: {
+        addressId: address.id
+      }
+    }]
+  }
+});
+
+export default removeCustomerAddress;

packages/commercetools/api-client/src/api/updateCustomerAddress/index.ts

@@ -0,0 +1,19 @@
+import { Customer, AddressInput } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+const updateCustomerAddress = (customer: Customer, address: AddressInput): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: [{
+      changeAddress: {
+        addressId: address.id,
+        address
+      }
+    }]
+  }
+});
+
+export default updateCustomerAddress;

packages/commercetools/api-client/src/api/updateCustomerPersonalDetails/index.ts

@@ -0,0 +1,44 @@
+import { Customer } from '../../types/GraphQL';
+import { UpdateMyCustomerResponse } from '../../types/Api';
+import { apolloClient } from '../../index';
+import updateMyCustomer from '../updateMyCustomer/defaultMutation';
+
+interface PersonalDetails {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+}
+
+const generateActions = (personalDetails: PersonalDetails): any[] => {
+  const actions = [];
+
+  personalDetails.email && actions.push({
+    changeEmail: {
+      email: personalDetails.email
+    }
+  });
+
+  personalDetails.firstName && actions.push({
+    setFirstName: {
+      firstName: personalDetails.firstName
+    }
+  });
+
+  personalDetails.lastName && actions.push({
+    setLastName: {
+      lastName: personalDetails.lastName
+    }
+  });
+
+  return actions;
+};
+
+const updateCustomerPersonalDetails = (customer: Customer, personalDetails: PersonalDetails): Promise<UpdateMyCustomerResponse> => apolloClient.mutate({
+  mutation: updateMyCustomer,
+  variables: {
+    version: customer.version,
+    actions: generateActions(personalDetails)
+  }
+});
+
+export default updateCustomerPersonalDetails;

packages/commercetools/api-client/src/api/updateMyCustomer/defaultMutation.ts

@@ -0,0 +1,18 @@
+import gql from 'graphql-tag';
+import { CustomerFragment, AddressFragment } from '../../fragments';
+
+export default gql`
+  ${AddressFragment}
+  ${CustomerFragment}
+
+  mutation updateMyCustomer($version: Long!, $actions: [MyCustomerUpdateAction!]!, $storeKey: KeyReferenceInput) {
+    updateMyCustomer(version: $version, actions: $actions, storeKey: $storeKey) {
+      shippingAddressIds
+      billingAddressIds
+      addresses {
+        ...DefaultAddress
+      }
+      ...DefaultCustomer
+    }
+  }
+`;

packages/commercetools/api-client/src/fragments/index.ts

@@ -1,6 +1,7 @@
 
 export const AddressFragment = `
   fragment DefaultAddress on Address {
+    id
     title
     firstName
     lastName
@@ -11,6 +12,13 @@ export const AddressFragment = `
     region
     country
     company
+    apartment
+    contactInfo {
+      phone
+      mobile
+      email
+      fax
+    }
   }
 `;
 

packages/commercetools/api-client/src/index.ts

@@ -7,6 +7,11 @@ import getCategory from './api/getCategory';
 import createCart from './api/createCart';
 import updateCart from './api/updateCart';
 import getCart from './api/getCart';
+import addCustomerAddress from './api/addCustomerAddress';
+import assignCustomerAddress from './api/assignCustomerAddress';
+import removeCustomerAddress from './api/removeCustomerAddress';
+import updateCustomerAddress from './api/updateCustomerAddress';
+import updateCustomerPersonalDetails from './api/updateCustomerPersonalDetails';
 import addToCart from './api/addToCart';
 import removeFromCart from './api/removeFromCart';
 import updateCartQuantity from './api/updateCartQuantity';
@@ -72,6 +77,11 @@ export {
   updateCart,
   getCart,
   addToCart,
+  addCustomerAddress,
+  assignCustomerAddress,
+  removeCustomerAddress,
+  updateCustomerAddress,
+  updateCustomerPersonalDetails,
   removeFromCart,
   getMe,
   updateCartQuantity,

packages/commercetools/api-client/src/types/Api.ts

@@ -41,3 +41,4 @@ export type OrderResponse = OrderQueryResponse | OrderMutationResponse
 export type ShippingMethodsResponse = QueryResponse<'shippingMethods', ShippingMethod>
 export type SignInResponse = QueryResponse<'user', CustomerSignInResult>
 export type ChangeMyPasswordResponse = QueryResponse<'user', Customer>
+export type UpdateMyCustomerResponse = MutationResponse<'updateMyCustomer', Customer>

packages/commercetools/composables/src/index.ts

@@ -5,8 +5,10 @@ import useProduct from './useProduct';
 import useCart from './useCart';
 import useCheckout from './useCheckout';
 import useUser from './useUser';
+import useUserAddress from './useUserAddress';
 import useLocale from './useLocale';
 import useUserOrders from './useUserOrders';
+
 import {
   cartGetters,
   categoryGetters,
@@ -22,6 +24,7 @@ export {
   useCart,
   useCheckout,
   useUser,
+  useUserAddress,
   useLocale,
   useUserOrders,
   cartGetters,

packages/commercetools/composables/src/useUser/factoryParams.ts

@@ -1,7 +1,8 @@
-import {UseUserFactoryParams} from '@vue-storefront/factories';
-import {Customer} from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { UseUserFactoryParams } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
 import { authenticate } from './authenticate';
 import {
+  updateCustomerPersonalDetails,
   customerSignMeUp as apiCustomerSignMeUp,
   customerSignMeIn as apiCustomerSignMeIn,
   customerSignOut as apiCustomerSignOut,
@@ -10,7 +11,9 @@ import {
 } from '@vue-storefront/commercetools-api';
 import useCart from '../useCart';
 
-export const params: UseUserFactoryParams<Customer, any, any> = {
+export type UpdateUserParams = Customer & { clientSideOnly?: boolean };
+
+export const params: UseUserFactoryParams<Customer, UpdateUserParams, any> = {
   loadUser: async () => {
     try {
       const profile = await apiGetMe({ customer: true });
@@ -27,9 +30,19 @@ export const params: UseUserFactoryParams<Customer, any, any> = {
     await useCart().refreshCart();
     await apiCustomerSignOut();
   },
-  updateUser: async ({currentUser, updatedUserData}): Promise<Customer> => {
-    // Change code below if the apiClient receive userUpdate method
-    return Promise.resolve({currentUser, updatedUserData} as any);
+  updateUser: async ({ currentUser, updatedUserData }): Promise<Customer> => {
+    if (updatedUserData.clientSideOnly) {
+      return Promise.resolve({currentUser, updatedUserData} as any);
+    }
+
+    const { firstName, lastName, email } = updatedUserData;
+
+    const { data } = await updateCustomerPersonalDetails(currentUser, { firstName, lastName, email });
+
+    return {
+      ...currentUser,
+      ...data.updateMyCustomer
+    };
   },
   register: async ({email, password, firstName, lastName}) => {
     return await authenticate({email, password, firstName, lastName}, apiCustomerSignMeUp);

packages/commercetools/composables/src/useUserAddress/factoryParams.ts

@@ -0,0 +1,52 @@
+import { addCustomerAddress, assignCustomerAddress, removeCustomerAddress, updateCustomerAddress } from '@vue-storefront/commercetools-api';
+import { UseUserAddressFactoryParams, UpdatedUserAddresses } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { Address } from '../types/GraphQL';
+import useUser from '../useUser';
+import { UpdateUserParams } from '../useUser/factoryParams';
+import { UserAddressType } from '@vue-storefront/interfaces';
+
+const userComposable = useUser();
+
+const transformAddresses = (customer: Customer): UpdatedUserAddresses<Address, UpdateUserParams> => ({
+  addresses: customer.addresses,
+  updateUserParams: { ...customer, clientSideOnly: true }
+});
+
+export const params: UseUserAddressFactoryParams<Customer, Address, UserAddressType, { [x: string]: any }, UpdateUserParams> = {
+  userComposable,
+  addresses: userComposable.user.value && userComposable.user.value.id ? userComposable.user.value.addresses : [],
+  addAddress: async (address, type) => {
+    const { data } = await addCustomerAddress(userComposable.user.value, address);
+    const newAddress = data.updateMyCustomer.addresses.pop();
+
+    const { data: { updateMyCustomer } } = await assignCustomerAddress(
+      { ...userComposable.user.value, ...data.updateMyCustomer },
+      newAddress,
+      type
+    );
+
+    return transformAddresses(updateMyCustomer);
+  },
+  updateAddress: async (address) => {
+    const { data } = await updateCustomerAddress(userComposable.user.value, address);
+
+    return transformAddresses(data.updateMyCustomer);
+  },
+  deleteAddress: async (address) => {
+    const { data } = await removeCustomerAddress(userComposable.user.value, address);
+
+    return transformAddresses(data.updateMyCustomer);
+  },
+  getBillingAddresses: () => {
+    const { addresses, billingAddressIds } = userComposable.user.value;
+
+    return (addresses || []).filter(({ id }) => (billingAddressIds || []).includes(id));
+  },
+  getShippingAddresses: () => {
+    const { addresses, shippingAddressIds } = userComposable.user.value;
+
+    return (addresses || []).filter(({ id }) => (shippingAddressIds || []).includes(id));
+  },
+  searchAddresses: async () => userComposable.user.value.addresses
+};

packages/commercetools/composables/src/useUserAddress/index.ts

@@ -0,0 +1,9 @@
+import { UseUserAddress } from '@vue-storefront/interfaces';
+import { Address } from '../types/GraphQL';
+import { useUserAddressFactory } from '@vue-storefront/factories';
+import { Customer } from '@vue-storefront/commercetools-api/lib//types/GraphQL';
+import { params } from './factoryParams';
+
+const useUserAddress: () => UseUserAddress<Address> = useUserAddressFactory<Customer, Address>(params);
+
+export default useUserAddress;