Merge 004a341 into b1228f4

src/routes/Dashboard/components/Dashboard.jsx

@@ -24,4 +24,4 @@ Dashboard.propTypes = {
   dbdata: React.PropTypes.object.isRequired,
   getAdminData: React.PropTypes.func.isRequired,
   params: React.PropTypes.object.isRequired,
-};
+};

src/routes/Dashboard/components/PopUpCard/PopUpCard.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import Paper from 'material-ui/Paper';
+import { Toolbar, ToolbarTitle } from 'material-ui/Toolbar';
+import classes from './PopUpCard.scss';
+
+
+const styles = {
+  paper: {
+    height: 300,
+    width: 220,
+    margin: 20,
+    overflow: 'scroll',
+  },
+};
+
+
+const PopUpCard = (props) => {
+  let currentLocation;
+  let estimatedTimeOfArrival;
+  let updatedAt;
+  if(props.shipment){
+    const shipment = props.shipment;
+    if (shipment.currentLocation) {
+      currentLocation = (
+        <div><h6>CURRENT LOCATION</h6> {shipment.currentLocation.city},
+          {shipment.currentLocation.state}</div>
+      );
+    }
+    if (shipment.estimatedTimeOfArrival) {
+      estimatedTimeOfArrival = (
+        <div><h6>ESTIMATED TOA</h6> {shipment.estimatedTimeOfArrival}</div>
+      );
+    }
+    if (shipment.updatedAt) {
+      updatedAt = (
+        <div><h6>LAST UPDATED</h6> {shipment.updatedAt}</div>
+      );
+    }
+  }
+  const title = props.shipment
+    ? `Shipment ${props.shipment.id}`
+    : '...';
+  return (
+    <Paper style={styles.paper} zDepth={2}>
+      <Toolbar>
+        <ToolbarTitle text={title} />
+      </Toolbar>
+      <div className={classes.mainSection}>
+          <div className={classes.col1}>
+            <h6>ORDER</h6>
+              { props.shipment ? props.shipment.id : '...'}{"\n"}
+          </div>
+          <div className={classes.col2}>
+            <h6>STATUS</h6>
+            { props.shipment ? props.shipment.status : 'loading...'}{"\n"}
+          </div>
+
+          { currentLocation }
+          { estimatedTimeOfArrival }
+          { updatedAt }
+
+
+      </div>
+    </Paper>
+  );
+};
+
+PopUpCard.propTypes = {
+  shipment: React.PropTypes.object.isRequired,
+};
+
+export default PopUpCard;

src/routes/Dashboard/components/PopUpCard/PopUpCard.scss

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.mainSection {
+  padding: .5rem;
+}
+.col1 {
+    float: left;
+    width: 50%;
+    margin: 0;
+}
+
+.col2 {
+    margin-left: 50%;
+}
+
+h6 {
+  margin-top:12px;
+}

src/routes/Dashboard/components/PopUpCard/PopUpCard.story.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import PopUpCard from './PopUpCard';
+
+const shipment1 = {
+  toId: 462,
+  estimatedTimeOfArrival: '2016-10-22T00:00:00.000Z',
+  status: 'DELIVERED',
+  updatedAt: '2016-10-20T12:15:37.000Z',
+  currentLocation: {
+    state: 'Texas',
+    latitude: 32.74,
+    country: 'US',
+    longitude: -96.8,
+    city: 'Dallas',
+  },
+  fromId: 2,
+  deliveredAt: null,
+  createdAt: '2016-09-08T16:26:16.933Z',
+  id: 810,
+};
+const shipment2 = {
+  toId: 473,
+  estimatedTimeOfArrival: '2016-10-16T00:00:00.000Z',
+  status: 'NEW',
+  updatedAt: null,
+  currentLocation: null,
+  fromId: 2,
+  deliveredAt: null,
+  createdAt: '2016-09-08T20:05:30.001Z',
+  id: 827,
+};
+storiesOf('PopUpCard', module)
+  .add('shipment1', () => (
+    <PopUpCard
+      shipment={shipment1}
+    />
+)).add('shipment2', () => (
+  <PopUpCard
+    shipment={shipment2}
+  />
+  ));

src/routes/Dashboard/components/PopUpCard/index.js

@@ -0,0 +1,3 @@
+import PopUpCard from './PopUpCard';
+
+export default PopUpCard;

src/routes/Dashboard/containers/DashboardContainer.js

@@ -7,7 +7,7 @@ const mapActionCreators = {
 };
 
 const mapStateToProps = (state) => ({
-  demoName: state.demoSession.name,
+  demoName: state.demoSession.name || 'loading...',
   dbdata: state.dashboard,
 });