Merge pull request #317 from reactioncommerce/feat-300-nnnnat-add-viewerInfo

feat: 300 nnnnat add viewer info

Author: rosshadden

src/components/Header/Header.js

@@ -10,6 +10,7 @@ import { NavigationDesktop } from "components/NavigationDesktop";
 import { NavigationMobile, NavigationToggleMobile } from "components/NavigationMobile";
 import AccountDropdown from "components/AccountDropdown";
 import ShopLogo from "@reactioncommerce/components/ShopLogo/v1";
+import ViewerInfo from "@reactioncommerce/components/ViewerInfo/v1";
 import Link from "components/Link";
 import MiniCart from "components/MiniCart";
 
@@ -46,7 +47,8 @@ class Header extends Component {
     }).isRequired,
     uiStore: PropTypes.shape({
       toggleMenuDrawerOpen: PropTypes.func.isRequired
-    }).isRequired
+    }).isRequired,
+    viewer: PropTypes.object
   };
 
   static defaultProps = {
@@ -57,8 +59,31 @@ class Header extends Component {
     this.props.uiStore.toggleMenuDrawerOpen();
   };
 
+  // TODO: quick fix until we figure out the viewer name stuff.
+  // See https://github.com/reactioncommerce/reaction/issues/4646
+  get splitNames() {
+    const { viewer: { name } } = this.props;
+    const firstName =
+      name &&
+      name
+        .split(" ")
+        .slice(0, -1)
+        .join(" ");
+    const lastName =
+      name &&
+      name
+        .split(" ")
+        .slice(-1)
+        .join(" ");
+
+    return {
+      firstName,
+      lastName
+    };
+  }
+
   render() {
-    const { classes: { appBar, controls, toolbar, title }, shop } = this.props;
+    const { classes: { appBar, controls, toolbar, title }, shop, viewer } = this.props;
 
     return (
       <AppBar position="static" elevation={0} className={appBar}>
@@ -79,7 +104,7 @@ class Header extends Component {
             </Hidden>
           </div>
 
-          <AccountDropdown />
+          {viewer ? <ViewerInfo viewer={{ ...this.splitNames, ...viewer }} /> : <AccountDropdown />}
           <MiniCart />
         </Toolbar>
         <NavigationMobile />

src/components/Layout/Layout.js

@@ -26,20 +26,21 @@ class Layout extends Component {
     classes: PropTypes.object,
     shop: PropTypes.shape({
       name: PropTypes.string
-    }).isRequired
+    }).isRequired,
+    viewer: PropTypes.object
   };
 
   static defaultProps = {
     classes: {}
   };
 
   render() {
-    const { classes, children, shop } = this.props;
+    const { classes, children, shop, viewer } = this.props;
 
     return (
       <React.Fragment>
         <div className={classes.root}>
-          <Header shop={shop} />
+          <Header shop={shop} viewer={viewer} />
           <main className={classes.main}>
             <article className={classes.article}>{children}</article>
           </main>

src/containers/account/viewer.gql

@@ -5,5 +5,6 @@ query viewer {
       address
     }
     name
+    primaryEmailAddress
   }
 }

src/pages/_app.js

@@ -67,7 +67,7 @@ export default class App extends NextApp {
   }
 
   render() {
-    const { Component, pageProps, shop, ...rest } = this.props;
+    const { Component, pageProps, shop, viewer, ...rest } = this.props;
     const { route } = this.props.router;
     const { stripe } = this.state;
 
@@ -79,22 +79,17 @@ export default class App extends NextApp {
             generateClassName={this.pageContext.generateClassName}
           >
             <RuiThemeProvider theme={componentTheme}>
-              <MuiThemeProvider
-                theme={this.pageContext.theme}
-                sheetsManager={this.pageContext.sheetsManager}
-              >
+              <MuiThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
                 <CssBaseline />
-                {
-                  (route === "/checkout" || route === "/login") ? (
-                    <StripeProvider stripe={stripe}>
-                      <Component pageContext={this.pageContext} shop={shop} {...rest} {...pageProps} />
-                    </StripeProvider>
-                  ) : (
-                    <Layout shop={shop}>
-                      <Component pageContext={this.pageContext} shop={shop} {...rest} {...pageProps} />
-                    </Layout>
-                  )
-                }
+                {route === "/checkout" || route === "/login" ? (
+                  <StripeProvider stripe={stripe}>
+                    <Component pageContext={this.pageContext} shop={shop} {...rest} {...pageProps} />
+                  </StripeProvider>
+                ) : (
+                  <Layout shop={shop} viewer={viewer}>
+                    <Component pageContext={this.pageContext} shop={shop} {...rest} {...pageProps} />
+                  </Layout>
+                )}
               </MuiThemeProvider>
             </RuiThemeProvider>
           </JssProvider>