[Amazon] Pull amazon orders/customers

ashes/src/components/common/state.jsx

@@ -59,7 +59,7 @@ export const states = {
 const State = (props): Element<*> => {
   return (
     <span id={props.stateId} className="fc-model-state">
-      {get(states, [props.model, props.value], '[Invalid]')}
+      {get(states, [props.model, props.value], props.value)}
     </span>
   );
 };

ashes/src/components/customer-card/customer-card.jsx

@@ -8,26 +8,12 @@ import TextFit from 'components/text-fit/text-fit';
 import styles from 'components/customers/title-block.css';
 
 type Props = {
-  customer: {
-    id: number,
-    name: string,
-    email: string,
-    isGuest: boolean,
-    groups: Array<string>,
-    avatarUrl?: string,
-    rank: number,
-    phoneNumber: string,
-    location: string,
-  },
+  customer: Customer,
 };
 
 export default class CustomerInfo extends Component {
   props: Props;
 
-  ensureNotEmpty(val: number|string) {
-    return val ? <span>{val}</span> : <span>&nbsp;</span>;
-  }
-
   customerLink(text: string) {
     const params = { customerId: this.props.customer.id };
 
@@ -48,7 +34,7 @@ export default class CustomerInfo extends Component {
         </div>
       );
     } else {
-      return <div>None</div>;
+      return <div styleName="value">None</div>;
     }
   }
 
@@ -61,7 +47,7 @@ export default class CustomerInfo extends Component {
     if (customer.avatarUrl) {
       avatar = <img src={customer.avatarUrl} />;
     } else {
-      avatar = <i className="icon-customer"></i>;
+      avatar = <i className="icon-customer" />;
     }
 
     return (
@@ -88,20 +74,26 @@ export default class CustomerInfo extends Component {
         </div>
         <article styleName="body">
           <ul styleName="fields">
-            <li>
-              <i className="icon-customer"></i>
-              <div>{this.ensureNotEmpty(customer.id)}</div>
-            </li>
-            <li>
-              <i className="icon-phone"></i>
-              <div>{this.ensureNotEmpty(customer.phoneNumber)}</div>
-            </li>
-            <li>
-              <i className="icon-location"></i>
-              <div>{this.ensureNotEmpty(customer.location)}</div>
-            </li>
+            {customer.id &&
+              <li>
+                <i className="icon-customer" />
+                <div styleName="value">{customer.id}</div>
+              </li>
+            }
+            {customer.phoneNumber &&
+              <li>
+                <i className="icon-phone" />
+                <div styleName="value">{customer.phoneNumber}</div>
+              </li>
+            }
+            {customer.location &&
+              <li>
+                <i className="icon-location" />
+                <div styleName="value">{customer.location}</div>
+              </li>
+            }
             <li styleName="groups">
-              <i className="icon-customers"></i>
+              <i className="icon-customers" />
               {this.customerGroups}
             </li>
           </ul>

ashes/src/components/customers/title-block.css

@@ -96,32 +96,38 @@
   display: inline-block;
   width: 50%;
 
+  &:only-child {
+    width: 100%;
+  }
+
   & > li {
     height: 40px;
     display: flex;
     align-items: center;
 
     & > i {
-      width: 40px;
-      font-style: normal;
       font-size: 22px;
-      line-height: 24px;
-      text-align: center;
       color: var(--decor6);
     }
 
     &.fc-customer-info-days > i {
+      margin-right: 8px;
       font-size: 15px;
       font-weight: 700;
       line-height: 20px;
     }
   }
 }
 
+.value {
+  margin-left: 8px;
+  width: 90%;
+  word-wrap: break-word;
+}
+
 .group {
   padding: 5px 10px;
-  margin-right: 5px;
-  margin-bottom: 5px;
+  margin: 0 5px 5px 8px;
   display: inline-block;
   vertical-align: top;
   font-size: 14px;
@@ -135,4 +141,5 @@
 .guest {
   color: var(--decor8);
   padding-top: 5px;
+  margin-left: 8px;
 }

ashes/src/components/discounts-panel/discounts-panel.jsx

@@ -1,4 +1,3 @@
-
 /* @flow */
 
 import React, { Component } from 'react';
@@ -12,7 +11,7 @@ import TableView from 'components/table/tableview';
 import styles from './discounts-panel.css';
 
 type Props = {
-  promotion: Object,
+  promotion: ?Object,
 };
 
 const viewColumns = [
@@ -30,11 +29,13 @@ export default class DiscountsPanel extends Component {
 
   get discounts(): Array<Object> {
     const { promotion } = this.props;
+
     return promotion ? [promotion] : [];
   }
 
   get viewContent() {
     const discounts = this.discounts;
+
     if (_.isEmpty(discounts)) {
       return <div styleName="empty-message">No discounts applied.</div>;
     } else {
@@ -59,7 +60,6 @@ export default class DiscountsPanel extends Component {
   }
 
   render() {
-
     return (
       <ContentBox
         title={this.title}

ashes/src/components/gift-cards/choose-customers.jsx

@@ -32,6 +32,11 @@ class ChooseCustomers extends Component {
   renderCustomer(item: ItemType) {
     // Cast the ItemType to a customer row.
     const customer = ((item: any): Customer);
+
+    if (!customer.id) {
+      return null;
+    }
+
     return <CustomerRow customer={customer} key={customer.id} />;
   }
 

ashes/src/components/gift-cards/customer-row.jsx

@@ -5,12 +5,7 @@ import React from 'react';
 import { Checkbox } from '../checkbox/checkbox';
 
 type Props = {
-  customer: {
-    id: number,
-    email: string,
-    phoneNumber?: string,
-    name: string,
-  },
+  customer: Customer,
   checked?: boolean,
   onToggle?: (id: number) => void,
 };

ashes/src/components/orders/details.jsx

@@ -38,8 +38,12 @@ export default class OrderDetails extends Component {
         <div className="fc-order-details-body">
           <div className="fc-order-details-main">
             <OrderLineItems order={order} />
-            <DiscountsPanel promotion={order.promotion} />
-            <OrderCoupons isCart={false} order={order} />
+            {order.channel !== 'Amazon.com' &&
+              <DiscountsPanel promotion={order.promotion} />
+            }
+            {order.channel !== 'Amazon.com' &&
+            <OrderCoupons isCart={false} coupon={order.coupon} />
+            }
             <OrderShippingAddress isCart={false} order={order} />
             <OrderShippingMethod isCart={false} order={order} />
             <Payments {...this.props} />

ashes/src/components/orders/order-coupons.jsx

@@ -1,16 +1,13 @@
 /* @flow */
 
-import React, { Component, Element } from 'react';
-import _ from 'lodash';
+import React, { Component } from 'react';
 
 import ContentBox from 'components/content-box/content-box';
 import CouponsPanel from 'components/coupons-panel/coupons-panel';
 import PanelHeader from 'components/panel-header/panel-header';
 
 type Props = {
-  order: {
-    coupon: Object,
-  },
+  coupon: ?Object,
 };
 
 const columns = [
@@ -22,17 +19,11 @@ const columns = [
 export default class OrderCoupons extends Component {
   props: Props;
 
-  get coupons(): Array<Object> {
-    const coupon = _.get(this.props, 'order.coupon');
-
-    if (!coupon) return [];
-
-    return [coupon];
-  }
-
   render() {
     const title = <PanelHeader showStatus={false} isOptional={true} text="Coupons" />;
-    const content = <CouponsPanel coupons={this.coupons} columns={columns} />;
+    const coupons = this.props.coupon ? [this.props.coupon] : [];
+    const content = <CouponsPanel coupons={coupons} columns={columns} />;
+
     return (
       <ContentBox
         title={title}

ashes/src/components/orders/order-row.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import MultiSelectRow from '../table/multi-select-row';
+import OrderParagon from 'paragons/order';
 
 const compileShippingStatus = order => {
   if (order.state == 'canceled') {
@@ -76,19 +77,29 @@ const setCellContents = (order, field) => {
   }
 };
 
+type Props = {
+  order: OrderParagon;
+  columns: Array<*>;
+  params: Object;
+};
 
-const OrderRow = (props, context) => {
+const OrderRow = (props: Props) => {
   const { order, columns, params } = props;
-  const key = `order-${order.referenceNumber}`;
+
+  // @todo verify isAmazon more strictly and convenient
+  const email = _.get(order, 'customer.email', '');
+  const isAmazon = email.endsWith('@marketplace.amazon.com');
+  const linkTo = isAmazon ? 'amazon-order' : 'order';
 
   return (
     <MultiSelectRow
       columns={columns}
-      linkTo="order"
+      linkTo={linkTo}
       linkParams={{order: order.referenceNumber}}
       row={order}
       setCellContents={setCellContents}
-      params={params} />
+      params={params}
+    />
   );
 };