(feat): New Profile Address page

package.json

@@ -129,6 +129,7 @@
     ],
     "coverageDirectory": "reports/coverage",
     "reporters": [
+      "default",
       "jest-junit"
     ],
     "roots": [

src/components/AccountDropdown/AccountDropdown.js

@@ -14,7 +14,7 @@ const styles = (theme) => ({
     width: 320,
     padding: theme.spacing.unit * 2
   },
-  authContent: {
+  marginBottom: {
     marginBottom: theme.spacing.unit * 2
   }
 });
@@ -73,6 +73,11 @@ class AccountDropdown extends Component {
           <div className={classes.accountDropdown}>
             {authStore.isAuthenticated ?
               <Fragment>
+                <div className={classes.marginBottom}>
+                  <Button color="primary" fullWidth href="/profile/address">
+                    Profile
+                  </Button>
+                </div>
                 <Button color="primary" fullWidth href={`/logout/${account._id}`} variant="contained">
                   Sign Out
                 </Button>

src/components/ProfileAddressBook/ProfileAddressBook.js

@@ -0,0 +1,75 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { inject, observer } from "mobx-react";
+import Grid from "@material-ui/core/Grid";
+import { withStyles } from "@material-ui/core/styles";
+import AddressBook from "@reactioncommerce/components/AddressBook/v1";
+import withAddressBook from "containers/address/withAddressBook";
+import relayConnectionToArray from "lib/utils/relayConnectionToArray";
+import ErrorPage from "../../pages/_error";
+
+const styles = (theme) => ({
+  accountProfileInfoContainer: {
+    marginBottom: theme.spacing.unit * 4
+  }
+});
+
+@withStyles(styles)
+@withAddressBook
+@inject("authStore")
+@inject("uiStore")
+@observer
+class ProfileAddressBook extends Component {
+  static propTypes = {
+    authStore: PropTypes.shape({
+      account: PropTypes.object.isRequired
+    }),
+    classes: PropTypes.object,
+    onAddressAdded: PropTypes.func.isRequired,
+    onAddressDeleted: PropTypes.func.isRequired,
+    onAddressEdited: PropTypes.func.isRequired,
+    shop: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      description: PropTypes.string
+    })
+  };
+
+  renderAddressBook() {
+    const {
+      authStore: { account: { addressBook } },
+      onAddressAdded,
+      onAddressEdited,
+      onAddressDeleted
+    } = this.props;
+    // Use relayConnectionToArray to remove edges / nodes levels from addressBook object
+    const addresses = (addressBook && relayConnectionToArray(addressBook)) || [];
+
+    // Create data object to pass to AddressBook component
+    const accountAddressBook = {
+      addressBook: addresses
+    };
+
+    return (
+      <AddressBook
+        account={accountAddressBook}
+        onAddressAdded={onAddressAdded}
+        onAddressEdited={onAddressEdited}
+        onAddressDeleted={onAddressDeleted}
+      />
+    );
+  }
+
+  render() {
+    const { authStore: { account }, shop } = this.props;
+
+    if (account && !account._id) return <ErrorPage shop={shop} subtitle="Not Found" />;
+
+    return (
+      <Grid item xs={12} md={12}>
+        {this.renderAddressBook()}
+      </Grid>
+    );
+  }
+}
+
+export default ProfileAddressBook;

src/components/ProfileAddressBook/index.js

@@ -0,0 +1 @@
+export { default } from "./ProfileAddressBook";

src/containers/account/viewer.gql

@@ -1,6 +1,25 @@
 query viewer {
   viewer {
     _id
+    addressBook {
+      edges {
+        node {
+          _id
+          address1
+          address2
+          city
+          company
+          country
+          fullName
+          isBillingDefault
+          isCommercial
+          isShippingDefault
+          phone
+          postal
+          region
+        }
+      }
+    }
     emailRecords {
       address
     }

src/containers/address/fragments.gql

@@ -0,0 +1,20 @@
+fragment AddressCommon on Address {
+  address1
+  address2
+  city
+  postal
+  country
+  region
+}
+
+fragment FullAddressCommon on Address {
+  ...AddressCommon
+  _id
+  fullName
+  company
+  isBillingDefault
+  isCommercial
+  isShippingDefault
+  metafields
+  phone
+}

src/containers/address/mutations.gql

@@ -0,0 +1,59 @@
+mutation addAccountAddressBookEntry($input: AddAccountAddressBookEntryInput!) {
+  addAccountAddressBookEntry(input: $input) {
+    address {
+      _id
+      address1
+      address2
+      city
+      company
+      country
+      fullName
+      isBillingDefault
+      isCommercial
+      isShippingDefault
+      phone
+      postal
+      region
+    }
+  }
+}
+
+mutation updateAccountAddressBookEntry($input: UpdateAccountAddressBookEntryInput!) {
+  updateAccountAddressBookEntry(input: $input) {
+    address {
+      _id
+      address1
+      address2
+      city
+      company
+      country
+      fullName
+      isBillingDefault
+      isCommercial
+      isShippingDefault
+      phone
+      postal
+      region
+    }
+  }
+}
+
+mutation removeAccountAddressBookEntry($input: RemoveAccountAddressBookEntryInput!) {
+  removeAccountAddressBookEntry(input: $input) {
+    address {
+      _id
+      address1
+      address2
+      city
+      company
+      country
+      fullName
+      isBillingDefault
+      isCommercial
+      isShippingDefault
+      phone
+      postal
+      region
+    }
+  }
+}

src/containers/address/withAddressBook.js

@@ -0,0 +1,160 @@
+import React, { Component, Fragment } from "react";
+import PropTypes from "prop-types";
+import hoistNonReactStatic from "hoist-non-react-statics";
+import { withApollo } from "react-apollo";
+import { inject, observer } from "mobx-react";
+import relayConnectionToArray from "lib/utils/relayConnectionToArray";
+import viewerQuery from "../account/viewer.gql";
+import {
+  addAccountAddressBookEntry,
+  updateAccountAddressBookEntry,
+  removeAccountAddressBookEntry
+} from "./mutations.gql";
+
+export default function withAddressBook(Comp) {
+  @withApollo
+  @inject("authStore")
+  @observer
+  class WithAddressBook extends Component {
+    static propTypes = {
+      authStore: PropTypes.shape({
+        account: PropTypes.object.isRequired
+      }),
+      client: PropTypes.shape({
+        query: PropTypes.func.isRequired
+      })
+    };
+
+    state = {};
+
+    get accountId() {
+      const { authStore } = this.props;
+      return authStore && authStore.account && authStore.account._id;
+    }
+
+    get accountAddressBook() {
+      const { authStore: { account: { addressBook } } } = this.props;
+      return (addressBook && relayConnectionToArray(addressBook)) || [];
+    }
+
+    /**
+     * @name handleAddAccountAddressBookEntry
+     * @summary Adds an address to current user's address book
+     * @param {Object} address Address to add
+     * @return {Undefined} undefined
+     */
+    handleAddAccountAddressBookEntry = (address) => {
+      const { client: apolloClient } = this.props;
+
+      // TEMP delete `addressName` prop until API supports it.
+      delete address.addressName;
+
+      apolloClient.mutate({
+        mutation: addAccountAddressBookEntry,
+        variables: {
+          input: {
+            address,
+            accountId: this.accountId
+          }
+        },
+        update: (cache, { data: mutationData }) => {
+          if (mutationData && mutationData.addAccountAddressBookEntry) {
+            const { address: newAddressEntry } = mutationData.addAccountAddressBookEntry;
+            if (newAddressEntry) {
+              const cacheData = cache.readQuery({ query: viewerQuery });
+              if (!cacheData.viewer.addressBook) {
+                cacheData.viewer.addressBook = { edges: [] };
+              }
+              cacheData.viewer.addressBook.edges.push({
+                __typename: "AddressEdge",
+                node: newAddressEntry
+              });
+              // Update Apollo cache
+              cache.writeQuery({
+                query: viewerQuery,
+                data: cacheData
+              });
+            }
+          }
+        }
+      });
+    };
+
+    /**
+     * @name handleEditAccountAddressBookEntry
+     * @summary Updates an address in current user's address book
+     * @param {String} addressId _id of address to update
+     * @param {Object} updates Field updates
+     * @return {Undefined} undefined
+     */
+    handleEditAccountAddressBookEntry = (addressId, updates) => {
+      const { client: apolloClient } = this.props;
+      apolloClient.mutate({
+        mutation: updateAccountAddressBookEntry,
+        variables: {
+          input: {
+            addressId,
+            accountId: this.accountId,
+            updates
+          }
+        }
+      });
+    };
+
+    /**
+     * @name handleRemoveAccountAddressBookEntry
+     * @summary Asks user to confirm, then deletes address from current user's address book
+     * @param {String} addressId _id of address to delete
+     * @return {Undefined} undefined
+     */
+    handleRemoveAccountAddressBookEntry = (addressId) => {
+      const { client: apolloClient } = this.props;
+
+      if (!confirm("Delete this address?")) {
+        return;
+      }
+
+      apolloClient.mutate({
+        mutation: removeAccountAddressBookEntry,
+        variables: {
+          input: {
+            addressId,
+            accountId: this.accountId
+          }
+        },
+        update: (cache, { data: mutationData }) => {
+          if (mutationData && mutationData.removeAccountAddressBookEntry) {
+            const { address: removedAddressEntry } = mutationData.removeAccountAddressBookEntry;
+            if (removedAddressEntry) {
+              const cacheData = cache.readQuery({ query: viewerQuery });
+              const removedIndex = cacheData.viewer.addressBook.edges.findIndex((edge) => edge.node._id === addressId);
+              cacheData.viewer.addressBook.edges.splice(removedIndex, 1);
+              // Update Apollo cache
+              cache.writeQuery({
+                query: viewerQuery,
+                data: cacheData
+              });
+            }
+          }
+        }
+      });
+    };
+
+    render() {
+      return (
+        <Fragment>
+          <Comp
+            {...this.props}
+            onAddressAdded={this.handleAddAccountAddressBookEntry}
+            onAddressEdited={this.handleEditAccountAddressBookEntry}
+            onAddressDeleted={this.handleRemoveAccountAddressBookEntry}
+          />
+        </Fragment>
+      );
+    }
+  }
+
+  hoistNonReactStatic(WithAddressBook, Comp);
+
+  return WithAddressBook;
+}