handle the case when quantities are null (#2465)

src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ReturnItemsCard.tsx

@@ -24,7 +24,11 @@ import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import OrderCardTitle from "../../OrderCardTitle";
 import { FormsetQuantityData, FormsetReplacementData } from "../form";
-import { getById } from "../utils";
+import {
+  getById,
+  getQuantityDataFromItems,
+  getReplacementDataFromItems,
+} from "../utils";
 import MaximalButton from "./MaximalButton";
 import ProductErrorCell from "./ProductErrorCell";
 
@@ -180,14 +184,18 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
                 variant,
               } = line;
               const isValueError = false;
-              const isRefunded = itemsQuantities.find(getById(id)).data
+              const { isRefunded, currentQuantity } = getQuantityDataFromItems(
-                .isRefunded;
+                itemsQuantities,
+                id,
+              );
+              const { isSelected } = getReplacementDataFromItems(
+                itemsSelections,
+                id,
+              );
               const isReplacable = !!variant && !isRefunded;
               const isReturnable = !!variant;
               const isPreorder = !!variant?.preorder;
               const lineQuantity = fulfilmentId ? quantity : quantityToFulfill;
-              const isSelected = itemsSelections.find(getById(id))?.value;
-              const currentQuantity = itemsQuantities.find(getById(id))?.value;
               const anyLineWithoutVariant = lines.some(
                 ({ variant }) => !variant,
               );

src/orders/components/OrderReturnPage/utils.tsx

@@ -1,7 +1,11 @@
 import { FulfillmentStatus, OrderDetailsFragment } from "@saleor/graphql";
 import { Node } from "@saleor/types";
 
-import { LineItemOptions } from "./form";
+import {
+  FormsetQuantityData,
+  FormsetReplacementData,
+  LineItemOptions,
+} from "./form";
 
 const fulfiledStatuses = [
   FulfillmentStatus.FULFILLED,
@@ -133,3 +137,39 @@ export function getByType<TType, TObject extends { type: TType }>(
 ) {
   return (obj: TObject) => obj.type === typeToCompare;
 }
+
+export function getQuantityDataFromItems(
+  itemsQuantities: FormsetQuantityData,
+  id: string,
+) {
+  const quantityData = itemsQuantities.find(getById(id));
+
+  if (!quantityData) {
+    return {
+      isRefunded: false,
+      currentQuantity: 0,
+    };
+  }
+
+  return {
+    isRefunded: quantityData.data.isRefunded,
+    currentQuantity: quantityData.value,
+  };
+}
+
+export function getReplacementDataFromItems(
+  itemsSelections: FormsetReplacementData,
+  id: string,
+) {
+  const replacementData = itemsSelections.find(getById(id));
+
+  if (!replacementData) {
+    return {
+      isSelected: false,
+    };
+  }
+
+  return {
+    isSelected: replacementData.value,
+  };
+}