CIF-1398 - [My Account] Address book management

.circleci/codecov.yml

@@ -50,4 +50,4 @@ flags:
       - ui.apps/
   jest:
     paths:
-      - react-components/
+      - react-components/

react-components/i18n/en/account.json

@@ -33,5 +33,14 @@
   "forgot-password-cancel": "Cancel",
   "create-cancel": "Cancel",
   "change-password-cancel": "Cancel",
-  "sign-in-form-title": "Sign-in to Your Account"
+  "sign-in-form-title": "Sign-in to Your Account",
+  "add-an-address": "Add an address",
+  "address-save": "Save",
+  "address-book-sign-in-text": "Please Sign in to see your address book.",
+  "address-delete-cancel": "Cancel",
+  "address-delete-confirm": "Delete",
+  "address-edit": "Edit",
+  "address-delete": "Delete",
+  "address-default-tag": "Default",
+  "address-form-heading": "Address"
 }

react-components/i18n/en/checkout.json

@@ -26,5 +26,7 @@
   "use-shipping-method": "Use Method",
   "specify-shipping-method": "Specify Shipping Method",
   "order-confirmation": "The order number is <1>{{orderId}}</1>. You will receive an order confirmation email with order status and other details.",
-  "add-shipping-information": "Add Shipping Information"
+  "add-shipping-information": "Add Shipping Information",
+  "address-default-address": "Make my default address",
+  "address-form-heading": "Shipping Address"
 }

react-components/jest.config.js

@@ -17,11 +17,12 @@ module.exports = {
     moduleDirectories: ['node_modules', 'src/utils'],
     coverageDirectory: '<rootDir>/coverage',
     coverageReporters: ['json', 'lcov'],
+    coveragePathIgnorePatterns: ['<rootDir>/src/queries'],
     testPathIgnorePatterns: ['<rootDir>/node_modules/'],
-    reporters: ['default', ['jest-junit', { outputDirectory: './test-results'}]],
+    reporters: ['default', ['jest-junit', { outputDirectory: './test-results' }]],
     transform: {
         '\\.(gql|graphql)$': 'jest-transform-graphql',
-        ".+\\.json": "./__mocks__/jsonTransform.js",
+        '.+\\.json': './__mocks__/jsonTransform.js',
         '.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
     },
     moduleNameMapper: {

react-components/src/actions/user/__test__/actions.test.js

@@ -11,7 +11,7 @@
  *    governing permissions and limitations under the License.
  *
  ******************************************************************************/
-import { resetCustomerCart, signOutUser } from '../actions';
+import { resetCustomerCart, signOutUser, createAddress, updateAddress, deleteAddress } from '../actions';
 
 const setCartCookie = jest.fn();
 const setUserCookie = jest.fn();
@@ -67,4 +67,123 @@ describe('User actions', () => {
         expect(dispatch).toHaveBeenCalledTimes(1);
         expect(dispatch).toHaveBeenCalledWith({ type: 'error', error: 'Error: Failed to sign out' });
     });
+
+    it('create the customer address', async () => {
+        const variables = {
+            region: {
+                region_code: 'LA'
+            },
+            street: ['14 Stamford Court'],
+            default_shipping: false,
+            default_billing: false
+        };
+
+        const createCustomerAddress = jest.fn(() => {
+            return { data: { createCustomerAddress: variables } };
+        });
+
+        await createAddress({ createCustomerAddress, variables, dispatch });
+
+        expect(createCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith({ type: 'postCreateAddress', address: variables });
+    });
+
+    it('fails to create the customer address', async () => {
+        const variables = {
+            region: {
+                region_code: 'LA'
+            },
+            street: ['14 Stamford Court'],
+            default_shipping: false,
+            default_billing: false
+        };
+
+        const createCustomerAddress = jest.fn().mockRejectedValueOnce(new Error('Failed to create the address'));
+
+        await createAddress({ createCustomerAddress, variables, dispatch });
+
+        expect(createCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        dispatch({ type: 'setAddressFormError', error: 'Error: Failed to create the address' });
+    });
+
+    it('update the customer address', async () => {
+        const variables = {
+            id: 'my-address-id',
+            region: {
+                region_code: 'LA'
+            },
+            street: ['14 Stamford Court'],
+            default_shipping: false,
+            default_billing: false
+        };
+
+        const updateCustomerAddress = jest.fn(() => {
+            return { data: { updateCustomerAddress: variables } };
+        });
+
+        await updateAddress({ updateCustomerAddress, variables, dispatch });
+
+        expect(updateCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith({ type: 'postUpdateAddress', address: variables });
+    });
+
+    it('fails to update the customer address', async () => {
+        const variables = {
+            id: 'my-address-id',
+            region: {
+                region_code: 'LA'
+            },
+            street: ['14 Stamford Court'],
+            default_shipping: false,
+            default_billing: false
+        };
+
+        const updateCustomerAddress = jest.fn().mockRejectedValueOnce(new Error('Failed to update the address'));
+
+        await updateAddress({ updateCustomerAddress, variables, dispatch });
+
+        expect(updateCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        dispatch({ type: 'setAddressFormError', error: 'Error: Failed to update the address' });
+    });
+
+    it('delete the customer address', async () => {
+        const address = {
+            id: 'my-address-id'
+        };
+
+        const deleteCustomerAddress = jest.fn();
+
+        await deleteAddress({ deleteCustomerAddress, address, dispatch });
+
+        expect(deleteCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith({ type: 'postDeleteAddress', address });
+    });
+
+    it('fails to delete the customer address', async () => {
+        const address = {
+            id: 'my-address-id'
+        };
+
+        const deleteCustomerAddress = jest.fn().mockRejectedValueOnce(new Error('Failed to delete the address'));
+
+        await deleteAddress({ deleteCustomerAddress, address, dispatch });
+
+        expect(deleteCustomerAddress).toHaveBeenCalledTimes(1);
+
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'deleteAddressError',
+            error: 'Error: Failed to delete the address'
+        });
+    });
 });

react-components/src/actions/user/actions.js

@@ -38,3 +38,33 @@ export const signOutUser = async ({ revokeCustomerToken, setCartCookie, setUserC
         dispatch({ type: 'error', error: error.toString() });
     }
 };
+
+export const createAddress = async ({ createCustomerAddress, variables, resetFields, dispatch }) => {
+    try {
+        const { data } = await createCustomerAddress({ variables: variables });
+        dispatch({ type: 'postCreateAddress', address: data.createCustomerAddress, resetFields });
+    } catch (error) {
+        console.error('An error occurred during creating customer address', error);
+        dispatch({ type: 'setAddressFormError', error: error.toString() });
+    }
+};
+
+export const updateAddress = async ({ updateCustomerAddress, variables, resetFields, dispatch }) => {
+    try {
+        const { data } = await updateCustomerAddress({ variables: variables });
+        dispatch({ type: 'postUpdateAddress', address: data.updateCustomerAddress, resetFields });
+    } catch (error) {
+        console.error('An error occurred during updating customer address', error);
+        dispatch({ type: 'setAddressFormError', error: error.toString() });
+    }
+};
+
+export const deleteAddress = async ({ deleteCustomerAddress, address, dispatch }) => {
+    try {
+        await deleteCustomerAddress({ variables: { id: address.id } });
+        dispatch({ type: 'postDeleteAddress', address });
+    } catch (error) {
+        console.error('An error occurred during deleting customer address', error);
+        dispatch({ type: 'deleteAddressError', error: error.toString() });
+    }
+};

react-components/src/components/AccountContainer/accountDropdown.js

@@ -26,7 +26,15 @@ import classes from './accountDropdown.css';
 const AccountDropdown = () => {
     const [
         { isAccountDropdownOpen, accountDropdownView },
-        { showSignIn, showMyAccount, showForgotPassword, showCreateAccount, showAccountCreated, showChangePassword }
+        {
+            showSignIn,
+            showMyAccount,
+            showForgotPassword,
+            showCreateAccount,
+            showAccountCreated,
+            showChangePassword,
+            showAddressBook
+        }
     ] = useUserContext();
 
     const [t] = useTranslation('account');
@@ -49,7 +57,7 @@ const AccountDropdown = () => {
             child = (
                 <MyAccount
                     showChangePassword={showChangePassword}
-                    showAddressBook={() => {}}
+                    showAddressBook={showAddressBook}
                     showAccountInformation={() => {}}
                 />
             );

react-components/src/components/AddressBook/__test__/__snapshots__/addAddressButton.test.js.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddAddressButton> renders the component 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Add an address"
+    class="root"
+  >
+    <span
+      class="icon"
+    >
+      <svg
+        fill="none"
+        height="18"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="3"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="8"
+          y2="16"
+        />
+        <line
+          x1="8"
+          x2="16"
+          y1="12"
+          y2="12"
+        />
+      </svg>
+    </span>
+    <span
+      class="label"
+    >
+      Add an address
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`<AddAddressButton> renders the component with list display type 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Add an address"
+    class="list"
+  >
+    <span
+      class="icon"
+    >
+      <svg
+        fill="none"
+        height="18"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="3"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="8"
+          y2="16"
+        />
+        <line
+          x1="8"
+          x2="16"
+          y1="12"
+          y2="12"
+        />
+      </svg>
+    </span>
+    <span
+      class="label"
+    >
+      Add an address
+    </span>
+  </button>
+</DocumentFragment>
+`;