Add returned products to refund page

src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx

@@ -17,6 +17,7 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { FormsetChange } from "@saleor/hooks/useFormset";
 import { renderCollection } from "@saleor/misc";
 import { OrderRefundData_order_fulfillments } from "@saleor/orders/types/OrderRefundData";
+import { FulfillmentStatus } from "@saleor/types/globalTypes";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -91,10 +92,15 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
       <CardTitle
         title={
           <>
-            {intl.formatMessage({
-              defaultMessage: "Fulfillment",
-              description: "section header"
-            })}
+            {fulfillment.status === FulfillmentStatus.RETURNED
+              ? intl.formatMessage({
+                  defaultMessage: "Fulfillment returned",
+                  description: "section header returned"
+                })
+              : intl.formatMessage({
+                  defaultMessage: "Fulfillment",
+                  description: "section header"
+                })}
             {fulfillment && (
               <Typography className={classes.orderNumber} variant="body1">
                 {`#${orderNumber}-${fulfillment?.fulfillmentOrder}`}

src/orders/components/OrderRefundPage/OrderRefundPage.tsx

@@ -24,6 +24,11 @@ import OrderRefundForm, {
   OrderRefundType
 } from "./form";
 
+export const refundFulfilledStatuses = [
+  FulfillmentStatus.FULFILLED,
+  FulfillmentStatus.RETURNED
+];
+
 export interface OrderRefundPageProps {
   order: OrderRefundData_order;
   defaultType?: OrderRefundType;
@@ -48,9 +53,10 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
   const unfulfilledLines = order?.lines.filter(
     line => line.quantity !== line.quantityFulfilled
   );
+
   const fulfilledFulfillemnts =
-    order?.fulfillments.filter(
-      fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED
+    order?.fulfillments.filter(({ status }) =>
+      refundFulfilledStatuses.includes(status)
     ) || [];
 
   return (

src/orders/components/OrderRefundPage/form.tsx

@@ -8,6 +8,8 @@ import { FulfillmentStatus } from "@saleor/types/globalTypes";
 import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
 import React from "react";
 
+import { refundFulfilledStatuses } from "./OrderRefundPage";
+
 export enum OrderRefundType {
   MISCELLANEOUS = "miscellaneous",
   PRODUCTS = "products"
@@ -87,7 +89,7 @@ function useOrderRefundForm(
   );
   const refundedFulfilledProductQuantities = useFormset<null, string>(
     order?.fulfillments
-      .filter(fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED)
+      .filter(({ status }) => refundFulfilledStatuses.includes(status))
       .reduce(
         (linesQty, fulfillemnt) =>
           linesQty.concat(