From 596cc41a7f98fe5b63b16a18d8e5305e24496f0f Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Wed, 22 Apr 2020 00:37:06 +0200
Subject: [PATCH] Add warehouse info

---
 .../OrderFulfillment/OrderFulfillment.tsx     | 58 +++++++++++++++----
 src/orders/fixtures.ts                        |  2 +-
 src/orders/queries.ts                         | 29 ++++++----
 3 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index 2a43cd0c7..1f778f5e4 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -9,6 +9,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import classNames from "classnames";
 
 import CardMenu from "@saleor/components/CardMenu";
 import CardTitle from "@saleor/components/CardTitle";
@@ -46,7 +47,15 @@ const useStyles = makeStyles(
       textAlign: "right",
       width: 120
     },
-
+    infoLabel: {
+      display: "inline-block"
+    },
+    infoLabelWithMargin: {
+      marginBottom: theme.spacing()
+    },
+    infoRow: {
+      padding: theme.spacing(2, 3)
+    },
     orderNumber: {
       display: "inline",
       marginLeft: theme.spacing(1)
@@ -68,7 +77,7 @@ interface OrderFulfillmentProps {
   onTrackingCodeAdd: () => void;
 }
 
-const numberOfColumns = 3;
+const numberOfColumns = 4;
 
 const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
   const {
@@ -216,18 +225,47 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
               </TableCell>
             </TableRow>
           ))}
-          {maybe(() => fulfillment.trackingNumber) && (
-            <TableRow>
-              <TableCell colSpan={numberOfColumns}>
+          <TableRow>
+            <TableCell className={classes.infoRow} colSpan={numberOfColumns}>
+              <Typography color="textSecondary" variant="body2">
                 <FormattedMessage
-                  defaultMessage="Tracking Number: {trackingNumber}"
+                  defaultMessage="Fulfilled from: {warehouseName}"
+                  description="fulfillment group"
                   values={{
-                    trackingNumber: fulfillment.trackingNumber
+                    warehouseName: (
+                      <Typography
+                        className={classNames(classes.infoLabel, {
+                          [classes.infoLabelWithMargin]: !!fulfillment?.trackingNumber
+                        })}
+                        color="textPrimary"
+                        variant="body2"
+                      >
+                        default
+                      </Typography>
+                    )
                   }}
                 />
-              </TableCell>
-            </TableRow>
-          )}
+              </Typography>
+              <Typography color="textSecondary" variant="body2">
+                {fulfillment?.trackingNumber && (
+                  <FormattedMessage
+                    defaultMessage="Tracking Number: {trackingNumber}"
+                    values={{
+                      trackingNumber: (
+                        <Typography
+                          className={classes.infoLabel}
+                          color="textPrimary"
+                          variant="body2"
+                        >
+                          {fulfillment.trackingNumber}
+                        </Typography>
+                      )
+                    }}
+                  />
+                )}
+              </Typography>
+            </TableCell>
+          </TableRow>
         </TableBody>
       </ResponsiveTable>
       {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts
index a07af34ac..c08cf001f 100644
--- a/src/orders/fixtures.ts
+++ b/src/orders/fixtures.ts
@@ -905,7 +905,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
         }
       ],
       status: FulfillmentStatus.FULFILLED,
-      trackingNumber: ""
+      trackingNumber: "01nn12399su12nndfsy"
     }
   ],
   id: "T3JkZXI6OQ==",
diff --git a/src/orders/queries.ts b/src/orders/queries.ts
index 896a2f665..b69b3c65c 100644
--- a/src/orders/queries.ts
+++ b/src/orders/queries.ts
@@ -73,11 +73,28 @@ export const fragmentOrderLine = gql`
     }
   }
 `;
+export const fulfillmentFragment = gql`
+  ${fragmentOrderLine}
+  fragment FulfillmentFragment on Fulfillment {
+    id
+    lines {
+      id
+      quantity
+      orderLine {
+        ...OrderLineFragment
+      }
+    }
+    fulfillmentOrder
+    status
+    trackingNumber
+  }
+`;
 
 export const fragmentOrderDetails = gql`
   ${fragmentAddress}
   ${fragmentOrderEvent}
   ${fragmentOrderLine}
+  ${fulfillmentFragment}
   fragment OrderDetailsFragment on Order {
     id
     billingAddress {
@@ -90,17 +107,7 @@ export const fragmentOrderDetails = gql`
       ...OrderEventFragment
     }
     fulfillments {
-      id
-      lines {
-        id
-        quantity
-        orderLine {
-          ...OrderLineFragment
-        }
-      }
-      fulfillmentOrder
-      status
-      trackingNumber
+      ...FulfillmentFragment
     }
     lines {
       ...OrderLineFragment