Add warehouse info

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}>
+            <TableCell className={classes.infoRow} colSpan={numberOfColumns}>
+              <Typography color="textSecondary" variant="body2">
+                <FormattedMessage
+                  defaultMessage="Fulfilled from: {warehouseName}"
+                  description="fulfillment group"
+                  values={{
+                    warehouseName: (
+                      <Typography
+                        className={classNames(classes.infoLabel, {
+                          [classes.infoLabelWithMargin]: !!fulfillment?.trackingNumber
+                        })}
+                        color="textPrimary"
+                        variant="body2"
+                      >
+                        default
+                      </Typography>
+                    )
+                  }}
+                />
+              </Typography>
+              <Typography color="textSecondary" variant="body2">
+                {fulfillment?.trackingNumber && (
                   <FormattedMessage
                     defaultMessage="Tracking Number: {trackingNumber}"
                     values={{
-                    trackingNumber: fulfillment.trackingNumber
+                      trackingNumber: (
+                        <Typography
+                          className={classes.infoLabel}
+                          color="textPrimary"
+                          variant="body2"
+                        >
+                          {fulfillment.trackingNumber}
+                        </Typography>
+                      )
                     }}
                   />
+                )}
+              </Typography>
             </TableCell>
           </TableRow>
-          )}
         </TableBody>
       </ResponsiveTable>
       {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (

src/orders/fixtures.ts

@@ -905,7 +905,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
         }
       ],
       status: FulfillmentStatus.FULFILLED,
-      trackingNumber: ""
+      trackingNumber: "01nn12399su12nndfsy"
     }
   ],
   id: "T3JkZXI6OQ==",

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