From 2129596944c4e9971ae701f73a0c7e845481991e Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 25 May 2020 11:59:23 +0200
Subject: [PATCH 1/3] Add sku column to fulfillment cards

---
 .../OrderFulfillment/OrderFulfillment.tsx     |  16 +-
 .../OrderUnfulfilledItems.tsx                 |  14 +
 .../__snapshots__/Stories.test.ts.snap        | 444 ++++++++++++++++++
 3 files changed, 473 insertions(+), 1 deletion(-)

diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
index 5fc0a42b1..f0445f870 100644
--- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
+++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx
@@ -43,6 +43,11 @@ const useStyles = makeStyles(
       textAlign: "center",
       width: 120
     },
+    colSku: {
+      textAlign: "right",
+      textOverflow: "ellipsis",
+      width: 120
+    },
     colTotal: {
       textAlign: "right",
       width: 120
@@ -165,6 +170,12 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
                 />
               </span>
             </TableCell>
+            <TableCell className={classes.colSku}>
+              <FormattedMessage
+                defaultMessage="SKU"
+                description="ordered product sku"
+              />
+            </TableCell>
             <TableCell className={classes.colQuantity}>
               <FormattedMessage
                 defaultMessage="Quantity"
@@ -198,8 +209,11 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
               >
                 {maybe(() => line.orderLine.productName) || <Skeleton />}
               </TableCellAvatar>
+              <TableCell className={classes.colSku}>
+                {line?.orderLine.productSku || <Skeleton />}
+              </TableCell>
               <TableCell className={classes.colQuantity}>
-                {maybe(() => line.quantity) || <Skeleton />}
+                {line?.quantity || <Skeleton />}
               </TableCell>
               <TableCell className={classes.colPrice}>
                 {maybe(() => line.orderLine.unitPrice.gross) ? (
diff --git a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
index b00e30df7..47634f897 100644
--- a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
+++ b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
@@ -40,6 +40,11 @@ const useStyles = makeStyles(
       textAlign: "center",
       width: 120
     },
+    colSku: {
+      textAlign: "right",
+      textOverflow: "ellipsis",
+      width: 120
+    },
     colTotal: {
       textAlign: "right",
       width: 120
@@ -97,6 +102,12 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
                 />
               </span>
             </TableCell>
+            <TableCell className={classes.colSku}>
+              <FormattedMessage
+                defaultMessage="SKU"
+                description="ordered product sku"
+              />
+            </TableCell>
             <TableCell className={classes.colQuantity}>
               <FormattedMessage
                 defaultMessage="Quantity"
@@ -130,6 +141,9 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
               >
                 {maybe(() => line.productName) || <Skeleton />}
               </TableCellAvatar>
+              <TableCell className={classes.colSku}>
+                {line?.productSku || <Skeleton />}
+              </TableCell>
               <TableCell className={classes.colQuantity}>
                 {maybe(() => line.quantity - line.quantityFulfilled) || (
                   <Skeleton />
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index ae0c2bc8f..52aaa5a23 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -66148,6 +66148,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -66195,6 +66201,11 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -66270,6 +66281,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -66317,6 +66334,11 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -66414,6 +66436,12 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -66461,6 +66489,11 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -67011,6 +67044,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -67058,6 +67097,11 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -67174,6 +67218,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -67221,6 +67271,11 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -67359,6 +67414,12 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -67406,6 +67467,11 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -68037,6 +68103,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -68084,6 +68156,11 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -68200,6 +68277,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -68247,6 +68330,11 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -68385,6 +68473,12 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -68432,6 +68526,11 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -69066,6 +69165,12 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -69124,6 +69229,15 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    <span
+                      class="Skeleton-skeleton-id"
+                    >
+                      ‌
+                    </span>
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -69633,6 +69747,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -69680,6 +69800,11 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -69796,6 +69921,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -69843,6 +69974,11 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -69981,6 +70117,12 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -70028,6 +70170,11 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -70659,6 +70806,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -70706,6 +70859,11 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -70822,6 +70980,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -70869,6 +71033,11 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -71007,6 +71176,12 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -71054,6 +71229,11 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -71685,6 +71865,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -71732,6 +71918,11 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -71848,6 +72039,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -71895,6 +72092,11 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -72033,6 +72235,12 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -72080,6 +72288,11 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -72711,6 +72924,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -72758,6 +72977,11 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -72874,6 +73098,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -72921,6 +73151,11 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -73059,6 +73294,12 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -73106,6 +73347,11 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -73737,6 +73983,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -73784,6 +74036,11 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -73900,6 +74157,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -73947,6 +74210,11 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -74085,6 +74353,12 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -74132,6 +74406,11 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -74763,6 +75042,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -74810,6 +75095,11 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -74926,6 +75216,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -74973,6 +75269,11 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -75111,6 +75412,12 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -75158,6 +75465,11 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -75789,6 +76101,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -75836,6 +76154,11 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -75952,6 +76275,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -75999,6 +76328,11 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -76137,6 +76471,12 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -76184,6 +76524,11 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -76815,6 +77160,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -76862,6 +77213,11 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -76978,6 +77334,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -77025,6 +77387,11 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -77163,6 +77530,12 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -77210,6 +77583,11 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -77841,6 +78219,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -77888,6 +78272,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -78004,6 +78393,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -78051,6 +78446,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -78189,6 +78589,12 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -78236,6 +78642,11 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -78867,6 +79278,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                     scope="col"
@@ -78914,6 +79331,11 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colSku-id"
+                  >
+                    59-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                   >
@@ -79030,6 +79452,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -79077,6 +79505,11 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >
@@ -79215,6 +79648,12 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       Product
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colSku-id"
+                    scope="col"
+                  >
+                    SKU
+                  </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                     scope="col"
@@ -79262,6 +79701,11 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                       </div>
                     </div>
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colSku-id"
+                  >
+                    5-1337
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                   >

From 539f72150d4ef8179fa2540b0e88d3717be5c08a Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 25 May 2020 12:06:37 +0200
Subject: [PATCH 2/3] Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56c31ece8..0eea309f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable, unreleased changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- Add sku column to fulfillment cards - #538 by @dominik-zeglen
+
 ## 2.10.0
 
 - Fix minor bugs - #244 by @dominik-zeglen

From 93c89f2a4cb7f2fe7877569e3a1c5f3d532742bd Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 25 May 2020 12:07:45 +0200
Subject: [PATCH 3/3] Update messages

---
 locale/defaultMessages.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index b94bb5e2f..2d255cd00 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -2532,6 +2532,10 @@
     "context": "cancelled fulfillment, section header",
     "string": "Cancelled ({quantity})"
   },
+  "src_dot_orders_dot_components_dot_OrderFulfillment_dot_693960049": {
+    "context": "ordered product sku",
+    "string": "SKU"
+  },
   "src_dot_orders_dot_components_dot_OrderFulfillment_dot_732594284": {
     "context": "button",
     "string": "Cancel Fulfillment"
@@ -2813,6 +2817,10 @@
     "context": "section header",
     "string": "Unfulfilled ({quantity})"
   },
+  "src_dot_orders_dot_components_dot_OrderUnfulfilledItems_dot_693960049": {
+    "context": "ordered product sku",
+    "string": "SKU"
+  },
   "src_dot_orders_dot_components_dot_OrderUnfulfilledItems_dot_878013594": {
     "context": "order line total price",
     "string": "Total"