From 3ac4ac4c1b0441145eda53190040db9d48309357 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Thu, 7 Jul 2022 17:28:12 +0200
Subject: [PATCH] Fix fulfilling deleted variants (#2090)

* Add optional chaining

* Fix type

* Fix a similar bug in the stock exceeded dialog

* Add keys to fulfillment lines

* Add undefined to return type
---
 src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx | 1 +
 .../OrderFulfillStockExceededDialogLine.tsx                 | 2 +-
 src/orders/utils/data.ts                                    | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
index 26d90aba6..5ddf1dde4 100644
--- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
+++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
@@ -230,6 +230,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                         getToFulfillOrderLines(order?.lines),
                         (line: OrderFulfillLineFragment, lineIndex) => (
                           <OrderFulfillLine
+                            key={line.id}
                             line={line}
                             lineIndex={lineIndex}
                             warehouseId={warehouse?.id}
diff --git a/src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx b/src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx
index 2a4379da1..cbba166cd 100644
--- a/src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx
+++ b/src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx
@@ -38,7 +38,7 @@ const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDia
         thumbnail={line?.thumbnail?.url}
       >
         {line?.productName}
-        {"attributes" in line.variant && (
+        {line.variant && "attributes" in line.variant && (
           <Typography color="textSecondary" variant="caption">
             {getAttributesCaption(line.variant?.attributes)}
           </Typography>
diff --git a/src/orders/utils/data.ts b/src/orders/utils/data.ts
index c24f3ec58..3c816d29f 100644
--- a/src/orders/utils/data.ts
+++ b/src/orders/utils/data.ts
@@ -372,10 +372,10 @@ export const transformFuflillmentLinesToStockInputFormsetData = (
   }));
 
 export const getAttributesCaption = (
-  attributes: OrderFulfillLineFragment["variant"]["attributes"],
-): string =>
+  attributes: OrderFulfillLineFragment["variant"]["attributes"] | undefined,
+): string | undefined =>
   attributes
-    .map(attribute =>
+    ?.map(attribute =>
       attribute.values.map(attributeValue => attributeValue.name).join(", "),
     )
     .join(" / ");