[PWA-245] Shipping Information (Authenticated)

packages/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressBook.js

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useMutation, useQuery } from '@apollo/react-hooks';
+
+import { useAppContext } from '../../../context/app';
+import { useCartContext } from '../../../context/cart';
+
+export const useAddressBook = props => {
+    const {
+        mutations: { setCustomerAddressOnCartMutation },
+        queries: { getCustomerAddressesQuery },
+        toggleActiveContent
+    } = props;
+
+    const [, { toggleDrawer }] = useAppContext();
+    const [{ cartId }] = useCartContext();
+
+    const [activeAddress, setActiveAddress] = useState();
+    const [selectedAddress, setSelectedAddress] = useState();
+
+    const [
+        setCustomerAddressOnCart,
+        { loading: setCustomerAddressOnCartLoading }
+    ] = useMutation(setCustomerAddressOnCartMutation);
+
+    const {
+        data: customerAddressesData,
+        error: customerAddressesError,
+        loading: customerAddressesLoading
+    } = useQuery(getCustomerAddressesQuery);
+
+    useEffect(() => {
+        console.error(customerAddressesError);
+    }, [customerAddressesError]);
+
+    const isLoading =
+        customerAddressesLoading || setCustomerAddressOnCartLoading;
+    const customerAddresses =
+        (customerAddressesData && customerAddressesData.customer.addresses) ||
+        [];
+
+    const handleEditAddress = useCallback(
+        address => {
+            setActiveAddress(address);
+            toggleDrawer('shippingInformation.edit');
+        },
+        [toggleDrawer]
+    );
+
+    const handleAddAddress = useCallback(() => {
+        handleEditAddress();
+    }, [handleEditAddress]);
+
+    const handleSelectAddress = useCallback(addressId => {
+        setSelectedAddress(addressId);
+    }, []);
+
+    const handleApplyAddress = useCallback(async () => {
+        try {
+            await setCustomerAddressOnCart({
+                variables: {
+                    cartId,
+                    addressId: selectedAddress
+                }
+            });
+        } catch (error) {
+            console.error(error);
+        }
+
+        toggleActiveContent();
+    }, [
+        cartId,
+        selectedAddress,
+        setCustomerAddressOnCart,
+        toggleActiveContent
+    ]);
+
+    return {
+        activeAddress,
+        customerAddresses,
+        isLoading,
+        handleAddAddress,
+        handleApplyAddress,
+        handleSelectAddress,
+        handleEditAddress,
+        selectedAddress,
+        setSelectedAddress
+    };
+};

packages/peregrine/lib/talons/CheckoutPage/AddressBook/useAddressCard.js

@@ -0,0 +1,44 @@
+import { useCallback, useMemo } from 'react';
+
+export const useAddressCard = props => {
+    const { address, onEdit, onSelection } = props;
+    const { id: addressId } = address;
+
+    const addressForEdit = useMemo(() => {
+        const { country_code: countryCode, region, ...addressRest } = address;
+        const { region_code: regionCode } = region;
+
+        return {
+            ...addressRest,
+            country: {
+                code: countryCode
+            },
+            region: {
+                code: regionCode
+            }
+        };
+    }, [address]);
+
+    const handleClick = useCallback(() => {
+        onSelection(addressId);
+    }, [addressId, onSelection]);
+
+    const handleKeyPress = useCallback(
+        e => {
+            if (e.key === 'Enter') {
+                onSelection(addressId);
+            }
+        },
+        [addressId, onSelection]
+    );
+
+    const handleEditAddress = useCallback(() => {
+        onEdit(addressForEdit);
+    }, [addressForEdit, onEdit]);
+
+    return {
+        handleClick,
+        handleEditAddress,
+        handleKeyPress
+    };
+};

packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/EditForm/useEditForm.js

@@ -2,25 +2,63 @@ import { useCallback } from 'react';
 import { useMutation } from '@apollo/react-hooks';
 
 import { useCartContext } from '../../../../context/cart';
+import { useUserContext } from '../../../../context/user';
 
 export const useEditForm = props => {
     const {
+        addressType,
         afterSubmit,
-        mutations: { setShippingInformationMutation },
+        mutations: {
+            createCustomerAddressMutation,
+            setDefaultAddressMutation,
+            setGuestShippingMutation,
+            updateCustomerAddressMutaton
+        },
         onCancel,
+        queries: { getCustomerAddresses },
         shippingData
     } = props;
 
     const [{ cartId }] = useCartContext();
-    const [setShippingInformation, { called, loading }] = useMutation(
-        setShippingInformationMutation
-    );
+    const [{ currentUser, isSignedIn }] = useUserContext();
+
+    const [
+        createCustomerAddress,
+        {
+            called: createCustomerAddressCalled,
+            loading: createCustomerAddressLoading
+        }
+    ] = useMutation(createCustomerAddressMutation);
+
+    const [
+        updateCustomerAddress,
+        {
+            called: updateCustomerAddressCalled,
+            loading: updateCustomerAddressLoading
+        }
+    ] = useMutation(updateCustomerAddressMutaton);
+
+    const [
+        setDefaultAddress,
+        { called: setDefaultAddressCalled, loading: setDefaultAddressLoading }
+    ] = useMutation(setDefaultAddressMutation);
+
+    const [
+        setGuestShipping,
+        { called: setGuestShippingCalled, loading: setGuestShippingLoading }
+    ] = useMutation(setGuestShippingMutation);
+
+    const isSaving =
+        (setGuestShippingCalled && setGuestShippingLoading) ||
+        (createCustomerAddressCalled && createCustomerAddressLoading) ||
+        (updateCustomerAddressCalled && updateCustomerAddressLoading) ||
+        (setDefaultAddressCalled && setDefaultAddressLoading);
 
     const { country, region } = shippingData;
     const { code: countryCode } = country;
     const { code: regionCode } = region;
 
-    const initialValues = {
+    let initialValues = {
         ...shippingData,
         country: countryCode,
         region: regionCode
@@ -29,20 +67,91 @@ export const useEditForm = props => {
     // Simple heuristic to indicate form was submitted prior to this render
     const isUpdate = !!shippingData.city;
 
+    if (isSignedIn && !isUpdate) {
+        const { email, firstname, lastname } = currentUser;
+        const defaultUserData = { email, firstname, lastname };
+        initialValues = {
+            ...initialValues,
+            ...defaultUserData
+        };
+    }
+
     const handleSubmit = useCallback(
         async formValues => {
-            const { country, email, ...address } = formValues;
+            const {
+                country,
+                default_shipping: defaultShipping,
+                email,
+                region,
+                ...address
+            } = formValues;
             try {
-                await setShippingInformation({
-                    variables: {
-                        cartId,
-                        email,
-                        address: {
-                            ...address,
-                            country_code: country
+                if (isSignedIn) {
+                    const customerAddress = {
+                        ...address,
+                        country_code: country,
+                        default_shipping: defaultShipping,
+                        // Hard-coding region data until MC-33854/MC-33948 is resolved
+                        region: {
+                            region: 'Alabama',
+                            region_id: 1,
+                            // region_code: region
+                            region_code: 'AL'
+                        }
+                    };
+
+                    if (isUpdate) {
+                        const { id: addressId } = shippingData;
+                        await updateCustomerAddress({
+                            variables: {
+                                addressId,
+                                address: {
+                                    ...customerAddress,
+                                    default_shipping: defaultShipping
+                                }
+                            },
+                            refetchQueries: [{ query: getCustomerAddresses }]
+                        });
+                    } else {
+                        const { data } = await createCustomerAddress({
+                            variables: {
+                                address: {
+                                    ...customerAddress,
+                                    default_shipping:
+                                        addressType === 'checkout'
+                                            ? true
+                                            : defaultShipping
+                                }
+                            },
+                            refetchQueries: [{ query: getCustomerAddresses }]
+                        });
+
+                        const { createCustomerAddress: addressResult } = data;
+                        const { id: addressId } = addressResult;
+
+                        // If creation originated from checkout, set address on cart
+                        if (addressType === 'checkout') {
+                            await setDefaultAddress({
+                                variables: {
+                                    cartId,
+                                    addressId
+                                }
+                            });
                         }
                     }
-                });
+                } else {
+                    await setGuestShipping({
+                        variables: {
+                            cartId,
+                            email,
+                            address: {
+                                ...address,
+                                country_code: country,
+                                region
+                            }
+                        }
+                    });
+                }
             } catch (error) {
                 console.error(error);
             }
@@ -51,7 +160,19 @@ export const useEditForm = props => {
                 afterSubmit();
             }
         },
-        [afterSubmit, cartId, setShippingInformation]
+        [
+            addressType,
+            afterSubmit,
+            cartId,
+            createCustomerAddress,
+            getCustomerAddresses,
+            isSignedIn,
+            isUpdate,
+            setDefaultAddress,
+            setGuestShipping,
+            shippingData,
+            updateCustomerAddress
+        ]
     );
 
     const handleCancel = useCallback(() => {
@@ -62,7 +183,8 @@ export const useEditForm = props => {
         handleCancel,
         handleSubmit,
         initialValues,
-        isSaving: called && loading,
+        isSaving,
+        isSignedIn,
         isUpdate
     };
 };