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

@@ -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}

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>

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(" / ");