umwd-components 0.1.716 → 0.1.717

package/src/components/e-commerce/iro/TextualManageIROForm.tsx

@@ -1,1000 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useFormState } from "react-dom";
-import { updateIroAction } from "../../../data/actions/e-commerce/iro/updateIroAction";
-import { UploadBase64MediaForm } from "../../../components/common/media/UploadBase64MediaForm";
-import downloadBase64File from "../../../data/loaders/common/media/downloadBase64File";
-import TextualIROItemUpdater from "./TextualIROItemUpdater";
-import IroItemDisplay from "./IroItemDisplay";
-import {
-  IroItem,
-  ManageIroFormProps,
-} from "../../../types/e-commerce/iro/types";
-import NotesDisplay from "../../logistics/note/NotesDisplay";
-import NoteTakingComponent from "../../logistics/note/NoteTakingComponent";
-import { StrapiErrors } from "../../../components/StrapiErrors";
-import { SubmitButton } from "../../../components/SubmitButton";
-import Alert from "@mui/material/Alert";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Paper from "@mui/material/Paper";
-import Stack from "@mui/material/Stack";
-import Divider from "@mui/material/Divider";
-import { confirmationService } from "../../../data/services/common/confirmation-service";
-import { cancellationService } from "../../../data/services/common/cancellation-service";
-// TODO this should be futher removed from client side code, reimplement via action ??
-import { PreReport } from "../../../types/logistics/Report";
-import {
-  FormControlLabel,
-  Checkbox,
-  List,
-  ListItem,
-  TextField,
-  DialogContentText,
-  CircularProgress,
-} from "@mui/material";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import AssignmentReturnIcon from "@mui/icons-material/AssignmentReturn";
-import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import BusinessIcon from "@mui/icons-material/Business";
-import DescriptionIcon from "@mui/icons-material/Description";
-import UpdateIcon from "@mui/icons-material/Update";
-import { IroStatusIndicator } from "./IroStatusIndicator";
-import { InvoiceOverwrites } from "../../../types/e-commerce/invoice/types";
-import { Iro } from "../../../types/e-commerce/iro/types";
-import { queryAllProducts } from "../../../data/loaders/e-commerce/queryAllProducts";
-import qs from "qs";
-import { Product } from "../../../types/e-commerce/product/types";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-import { SxProps } from "@mui/material/styles";
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-
-interface OverwritesDialogProps {
-  open: boolean;
-  handleClose: () => void;
-  overwrites: InvoiceOverwrites;
-  setOverwrites: (overwrites: InvoiceOverwrites) => void;
-  iro: Iro;
-}
-
-function OverwritesDialog({
-  open,
-  handleClose,
-  overwrites,
-  setOverwrites,
-  iro,
-}: OverwritesDialogProps): React.JSX.Element {
-  const [loading, setLoading] = useState(false);
-
-  // Initialize overwrites values when dialog opens
-  useEffect(() => {
-    const fetchProducts = async () => {
-      setLoading(true);
-      const query = qs.stringify(
-        {
-          filters: {
-            product_number: {
-              $in: iro.iro_items.data.map(
-                (item) => item.product?.product_number?.replace(/^r-/, "") || ""
-              ),
-            },
-          },
-          populate: {
-            price: true,
-          },
-        },
-        { encodeValuesOnly: true }
-      );
-      const correspondingProductsData = await queryAllProducts(query);
-      const correspondingProducts = correspondingProductsData.data.map(
-        (product: Product) => {
-          return {
-            id: product.id,
-            product_number: product.product_number,
-            price: product.price,
-          };
-        }
-      );
-
-      console.log("correspondingProducts", correspondingProducts);
-      setLoading(false);
-
-      // Calculate totals from the IRO items
-      let totalExclVat = 0;
-      let totalInclVat = 0;
-
-      // Create line overwrites for each item
-      const lineOverwrites = iro.iro_items.data.map((item, index) => {
-        const product = item.product;
-        const correspondingProduct = correspondingProducts.find(
-          (p: Product) =>
-            p.product_number === product?.product_number?.replace(/^r-/, "") ||
-            ""
-        );
-        // For return products, typically the product_number starts with r-
-        // The original product should have the same number without the r-
-        let price_excl_vat = 0;
-        let price_incl_vat = 0;
-        let vat_rate = 0;
-
-        if (correspondingProduct && correspondingProduct.price) {
-          price_excl_vat = correspondingProduct.price.price || 0;
-          price_incl_vat = correspondingProduct.price.price_incl_vat || 0;
-          vat_rate = correspondingProduct.price.vat_rate || 0;
-
-          // Add to totals
-          const itemTotalExclVat = price_excl_vat * item.returned_quantity;
-          const itemTotalInclVat = price_incl_vat * item.returned_quantity;
-
-          totalExclVat += itemTotalExclVat;
-          totalInclVat += itemTotalInclVat;
-        }
-
-        return {
-          vat_rate,
-          price_excl_vat,
-          price_incl_vat,
-          quantity: item.returned_quantity,
-        };
-      });
-
-      // Set the calculated values to the overwrites
-      setOverwrites({
-        customer_internal_reference: iro.customer_reference || "",
-        total_excl_vat: parseFloat(totalExclVat.toFixed(2)),
-        total_incl_vat: parseFloat(totalInclVat.toFixed(2)),
-        lines: lineOverwrites,
-      });
-    };
-
-    if (open && iro?.iro_items?.data?.length > 0) {
-      fetchProducts();
-    }
-  }, [open, iro]);
-
-  return (
-    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="lg">
-      <DialogTitle>Check or overwrite value for the return payment</DialogTitle>
-      <DialogContent>
-        <Stack spacing={2} alignItems="left" sx={{ px: 0 }}>
-          <DialogContentText>
-            This is very important because these values will be used for
-            automated invoice generation
-          </DialogContentText>
-          <DialogContentText variant="h5">Overwrites</DialogContentText>
-          {loading ? (
-            <CircularProgress />
-          ) : (
-            <Stack spacing={2}>
-              <TextField
-                label="Customer internal reference"
-                name="customer_internal_reference"
-                fullWidth
-                variant="outlined"
-                value={overwrites.customer_internal_reference}
-                onChange={(e) =>
-                  setOverwrites({
-                    ...overwrites,
-                    customer_internal_reference: e.target.value,
-                  })
-                }
-              />
-              <TextField
-                label="Total excl. VAT"
-                name="total_excl_vat"
-                type="number"
-                fullWidth
-                variant="outlined"
-                value={overwrites.total_excl_vat}
-                onChange={(e) =>
-                  setOverwrites({
-                    ...overwrites,
-                    total_excl_vat: parseFloat(e.target.value),
-                  })
-                }
-              />
-              <TextField
-                label="Total incl. VAT"
-                name="total_incl_vat"
-                type="number"
-                fullWidth
-                variant="outlined"
-                value={overwrites.total_incl_vat}
-                onChange={(e) =>
-                  setOverwrites({
-                    ...overwrites,
-                    total_incl_vat: parseFloat(e.target.value),
-                  })
-                }
-              />
-            </Stack>
-          )}
-          {iro?.iro_items?.data?.length > 0 && (
-            <>
-              <DialogContentText variant="h5">Items</DialogContentText>
-
-              {iro.iro_items.data.map((item, index) => {
-                return (
-                  <Stack
-                    spacing={2}
-                    direction="row"
-                    alignItems="center"
-                    sx={{ px: 2 }}
-                    key={item.id}
-                  >
-                    <Typography sx={{ minWidth: 100 }}>
-                      {item.line_item_number}
-                    </Typography>
-                    <Typography sx={{ minWidth: 150 }}>
-                      {item.product?.product_number}
-                    </Typography>
-                    <Typography sx={{ minWidth: 200 }}>
-                      {item.product?.title}
-                    </Typography>
-
-                    <TextField
-                      size="small"
-                      label="VAT %"
-                      name="vat_rate"
-                      type="number"
-                      sx={{ width: 100 }}
-                      value={overwrites?.lines?.[index]?.vat_rate ?? ""}
-                      onChange={(e) => {
-                        const newLines = [...(overwrites.lines || [])];
-                        newLines[index] = {
-                          ...newLines[index],
-                          vat_rate: parseFloat(e.target.value),
-                        };
-                        setOverwrites({
-                          ...overwrites,
-                          lines: newLines,
-                        });
-                      }}
-                    />
-
-                    <TextField
-                      size="small"
-                      label="Price excl."
-                      name="price_excl_vat"
-                      type="number"
-                      sx={{ width: 120 }}
-                      value={overwrites?.lines?.[index]?.price_excl_vat ?? ""}
-                      onChange={(e) => {
-                        const newLines = [...(overwrites.lines || [])];
-                        newLines[index] = {
-                          ...newLines[index],
-                          price_excl_vat: parseFloat(e.target.value),
-                        };
-                        setOverwrites({
-                          ...overwrites,
-                          lines: newLines,
-                        });
-                      }}
-                    />
-
-                    <TextField
-                      size="small"
-                      label="Price incl."
-                      name="price_incl_vat"
-                      type="number"
-                      sx={{ width: 120 }}
-                      value={overwrites?.lines?.[index]?.price_incl_vat ?? ""}
-                      onChange={(e) => {
-                        const newLines = [...(overwrites.lines || [])];
-                        newLines[index] = {
-                          ...newLines[index],
-                          price_incl_vat: parseFloat(e.target.value),
-                        };
-                        setOverwrites({
-                          ...overwrites,
-                          lines: newLines,
-                        });
-                      }}
-                    />
-
-                    <TextField
-                      size="small"
-                      label="Qty"
-                      name="quantity"
-                      type="number"
-                      sx={{ width: 80 }}
-                      value={overwrites?.lines?.[index]?.quantity ?? ""}
-                      onChange={(e) => {
-                        const newLines = [...(overwrites.lines || [])];
-                        newLines[index] = {
-                          ...newLines[index],
-                          quantity: parseFloat(e.target.value),
-                        };
-                        setOverwrites({
-                          ...overwrites,
-                          lines: newLines,
-                        });
-                      }}
-                    />
-                  </Stack>
-                );
-              })}
-            </>
-          )}
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          onClick={(e) => {
-            confirmationService("iros", [iro.id], overwrites);
-            handleClose();
-          }}
-        >
-          Confirm
-        </Button>
-        <Button variant="contained" onClick={handleClose}>
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-interface ConfirmFormDialogProps {
-  open: boolean;
-  handleClose: () => void;
-  orderID: number;
-  currentStatus: "requested" | "finalising_process";
-  revalidateCallback?: () => void;
-  openOverwritesDialog?: () => void;
-}
-
-function ConfirmFormDialog({
-  open,
-  handleClose,
-  orderID,
-  currentStatus,
-  revalidateCallback,
-  openOverwritesDialog,
-}: ConfirmFormDialogProps): React.JSX.Element {
-  const { handleAddMessage } = useSnackbar();
-
-  const handleConfirm = async () => {
-    if (
-      currentStatus !== "requested" &&
-      currentStatus !== "finalising_process"
-    ) {
-      handleAddMessage({
-        message: "Cannot confirm return order in current status",
-        severity: "error",
-      });
-      return;
-    }
-
-    if (currentStatus === "finalising_process") {
-      if (!openOverwritesDialog) {
-        handleAddMessage({
-          message: "Please provide overwrites for the invoice",
-          severity: "error",
-        });
-        return;
-      }
-      openOverwritesDialog();
-      handleClose();
-      return;
-    }
-
-    try {
-      await confirmationService("iros", [orderID]);
-      handleAddMessage({
-        message: "Return order confirmed successfully",
-        severity: "success",
-      });
-      revalidateCallback && revalidateCallback();
-      handleClose();
-    } catch (error) {
-      handleAddMessage({
-        message: "Failed to confirm return order",
-        severity: "error",
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogTitle>Confirm Return</DialogTitle>
-      <DialogContent>
-        <Stack spacing={2}>
-          <Typography>Are you sure you want to confirm this return?</Typography>
-          <List>
-            {currentStatus === "requested" && (
-              <ListItem>
-                When confirming this return order a rma number will be generated
-              </ListItem>
-            )}
-            <ListItem>
-              {currentStatus === "requested"
-                ? "By confirming the return you will update it's status from requested to returning"
-                : "By confirming the return you will update it's status from finalising_process to done"}
-            </ListItem>
-            {currentStatus === "finalising_process" && (
-              <ListItem>
-                Confirming this order will automatically create an invoice
-              </ListItem>
-            )}
-          </List>
-          <Typography>Current status: {currentStatus}</Typography>
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          variant="contained"
-          onClick={handleConfirm}
-          /* (e) => {
-            if (currentStatus === "finalising_process") {
-              openOverwritesDialog && openOverwritesDialog();
-              handleClose();
-            } else if (currentStatus === "requested") {
-              confirmationService("iros", [orderID]);
-              revalidateCallback && revalidateCallback();
-              handleClose();
-            }
-          } */
-        >
-          Yes
-        </Button>
-        <Button variant="contained" onClick={handleClose}>
-          No
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-function CancelIroDialog({
-  open,
-  handleClose,
-  orderID,
-  revalidateCallback,
-}: {
-  open: boolean;
-  handleClose: () => void;
-  orderID: number;
-  revalidateCallback?: () => void;
-}) {
-  const [reason, setRoason] = useState<string>("");
-  const [reasonError, setReasonError] = useState<string>("");
-
-  const { handleAddMessage } = useSnackbar();
-
-  const handleCancel = async () => {
-    if (reason.length < 5) {
-      setReasonError(
-        "Please provide a reason for the cancellation (min 5 characters)"
-      );
-      return;
-    }
-    setReasonError("");
-    try {
-      await cancellationService("iros", orderID, reason);
-      handleAddMessage({
-        message: "Return order cancelled successfully",
-        severity: "success",
-      });
-      revalidateCallback && revalidateCallback();
-      handleClose();
-    } catch (error) {
-      handleAddMessage({
-        message: "Failed to cancel return order",
-        severity: "error",
-      });
-    }
-  };
-
-  return (
-    <form>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle>Cancel Return</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2}>
-            <Typography>
-              Are you sure you want to cancel this return?
-            </Typography>
-            <List>
-              <ListItem>
-                By cancelling this return order you will update it's status from
-                requested to cancelled
-              </ListItem>
-              <ListItem>Please provide a reason for the cancellation</ListItem>
-              <ListItem>
-                The customer will be notified about the cancellation and of the
-                reason for the cancellation
-              </ListItem>
-            </List>
-            <TextField
-              label="Cancellation reason"
-              name="reason"
-              multiline
-              rows={4}
-              fullWidth
-              variant="outlined"
-              value={reason}
-              onChange={(e) => setRoason(e.target.value)}
-              placeholder="Please provide a reason for the cancellation"
-              error={!!reasonError}
-              helperText={reasonError}
-            />
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="outlined" onClick={handleClose}>
-            Close
-          </Button>
-          <Button variant="contained" color="error" onClick={handleCancel}>
-            Confirm Cancellation
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </form>
-  );
-}
-
-export default function TextualManageIROForm({
-  data,
-  sx,
-  // revalidates the selectedOpo from the database
-  revalidateCallback,
-  handleClose,
-  role,
-}: ManageIroFormProps & { sx?: SxProps }) {
-  // TODO bind to id of IRO
-  const [formState, formAction] = useFormState(updateIroAction, INITIAL_STATE);
-
-  const [items, setItems] = useState<IroItem[]>(
-    data.iro_items.data ? data.iro_items.data : []
-  );
-
-  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
-  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
-  const [overwritesDialogOpen, setOverwritesDialogOpen] = useState(false);
-
-  const [overwrites, setOverwrites] = useState<InvoiceOverwrites>({
-    customer_internal_reference: "",
-    total_excl_vat: 0,
-    total_incl_vat: 0,
-    lines: [],
-  });
-
-  const [showing, setShowing] = useState<
-    ("received" | "registered" | "released" | "reports")[]
-  >(["received", "registered", "released", "reports"]);
-
-  const options: ("received" | "registered" | "released" | "reports")[] = [
-    "received",
-    "registered",
-    "released",
-    "reports",
-  ];
-
-  const parseItems = (items: IroItem[]) => {
-    return items.map((item) => {
-      return {
-        id: item.id,
-        returned_quantity: item.returned_quantity,
-        received_quantity: item.received_quantity,
-        registered_quantity: item.registered_quantity,
-        released_quantity: item.released_quantity,
-        reports:
-          item.reports?.data?.map((report) => {
-            return {
-              id: "id" in report ? report.id : undefined,
-              quantity: report.quantity,
-              content: report.content,
-              type: report.type,
-            };
-          }) || [],
-      };
-    });
-  };
-
-  const handleUpdateQuantity = (
-    value: number,
-    itemID: number,
-    type:
-      | "returned_quantity"
-      | "received_quantity"
-      | "registered_quantity"
-      | "released_quantity"
-  ) => {
-    const newItems = [...items];
-    const index = newItems.findIndex((item) => item.id === itemID);
-    newItems[index][type] = value;
-    setItems(newItems);
-  };
-
-  /** INFO
-   * - merely presetting the report in the items values, this is not a db update
-   * - only used with Textual form */
-  const handleAddReport = (report: PreReport, itemID: number) => {
-    const newItems = [...items];
-    const index = newItems.findIndex((item) => item.id === itemID);
-    const reportsOnItem = newItems[index]?.reports?.data || [];
-    const newReports = [...reportsOnItem, report];
-    if (newItems[index]?.reports == undefined) {
-      newItems[index] = { ...newItems[index], reports: { data: [] } };
-    }
-    newItems[index].reports.data = newReports;
-    setItems(newItems);
-  };
-
-  const handleRemoveReportAtIndex = (itemID: number, index: number) => {
-    const newItems = [...items];
-    const itemIndex = newItems.findIndex((item) => item.id === itemID);
-    const reportsOnItem = newItems[itemIndex]?.reports?.data || [];
-    const dbReports = reportsOnItem.filter((report) => "id" in report);
-    const preReports = reportsOnItem.filter((report) => !("id" in report));
-    preReports.splice(index, 1);
-    const newReports = [...dbReports, ...preReports];
-    newItems[itemIndex].reports.data = newReports;
-    setItems(newItems);
-  };
-
-  const { handleAddMessage } = useSnackbar();
-
-  useEffect(() => {
-    if (formState?.message) {
-      handleAddMessage({
-        message: formState.message,
-        severity: formState.severity || "error",
-      });
-
-      if (formState.severity === "success") {
-        revalidateCallback && revalidateCallback();
-        handleClose && handleClose();
-      }
-    }
-  }, [formState?.message]);
-
-  useEffect(() => {
-    if (formState?.strapiErrors) {
-      handleAddMessage({
-        message: formState.strapiErrors.message || "Error updating IRO",
-        severity: formState.severity || "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-
-  useEffect(() => {
-    console.log("data", data);
-    if (data.iro_items?.data) {
-      setItems(data.iro_items.data ? data.iro_items.data : []);
-    }
-  }, [data]);
-
-  return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Stack spacing={2}>
-            <Stack
-              direction={"row"}
-              spacing={2}
-              justifyContent={"space-between"}
-            >
-              <Stack spacing={2}>
-                <Typography variant="h3" component={"h1"}>
-                  Management Inbound Return
-                </Typography>
-                <Typography variant="body1">
-                  Manage arrival, registration and release of returns
-                </Typography>
-              </Stack>
-              <NoteTakingComponent
-                content=""
-                related={[{ id: data.id, __type: "api::e-commerce.iro" }]}
-                revalidateCallback={revalidateCallback}
-              />
-            </Stack>
-            <Divider />
-          </Stack>
-        </Grid>
-        <Grid item xs={12}>
-          <Typography variant="h5" sx={{ py: 1 }}>
-            Details
-          </Typography>
-        </Grid>
-        <Grid item xs={6}>
-          <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
-            <Stack spacing={2}>
-              <Stack direction="row" spacing={2} alignItems="center">
-                <NumbersIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  Return Number
-                </Typography>
-                <Typography variant="body1" fontWeight="medium">
-                  {data.return_number}
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2} alignItems="center">
-                <AssignmentReturnIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  RMA Number
-                </Typography>
-                <Typography variant="body1" fontWeight="medium">
-                  {data.rma_number}
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2} alignItems="center">
-                <DescriptionIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  Customer Reference
-                </Typography>
-                <Typography variant="body1" fontWeight="medium">
-                  {data.customer_reference}
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2} alignItems="center">
-                <CalendarTodayIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  Return Date
-                </Typography>
-                <Typography variant="body1" fontWeight="medium">
-                  {data.return_date}
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2} alignItems="center">
-                <BusinessIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  Customer
-                </Typography>
-                <Typography variant="body1" fontWeight="medium">
-                  {data.customer?.business_credentials?.company_name}
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2} alignItems="center">
-                <UpdateIcon color="primary" />
-                <Typography
-                  variant="subtitle1"
-                  color="text.secondary"
-                  width="200px"
-                >
-                  Return Status
-                </Typography>
-                <IroStatusIndicator status={data.status} />
-              </Stack>
-            </Stack>
-          </Paper>
-        </Grid>
-
-        {(data.status === "requested" ||
-          data.status === "finalising_process") &&
-          role === "enduser" && (
-            <Grid item xs={6}>
-              <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
-                <Stack spacing={2}>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    onClick={() => setConfirmDialogOpen(true)}
-                  >
-                    Confirm order
-                  </Button>
-                  {data.status === "requested" && (
-                    <Alert severity="warning">
-                      Please confirm the order as soon as possible, only upon
-                      confirmation this order will be assigned an RMA number and
-                      will become available to the dispatcher. Status: requested
-                      - returning
-                    </Alert>
-                  )}
-                  {data.status === "finalising_process" && (
-                    <Alert severity="warning">
-                      Please finalise this return order. Make sure the customer
-                      receives a return payment if eligible and then confirm
-                      this step. Status: finalising_process - done
-                    </Alert>
-                  )}
-                  {data.status === "finalising_process" && (
-                    <Button variant="contained" sx={{ color: "yellow" }}>
-                      // TODO RE-PAYMENT PROCESS
-                    </Button>
-                  )}
-                  <Button
-                    variant="contained"
-                    color="error"
-                    onClick={() => setCancelDialogOpen(true)}
-                  >
-                    Cancel order
-                  </Button>
-                  <ConfirmFormDialog
-                    open={confirmDialogOpen}
-                    handleClose={() => setConfirmDialogOpen(false)}
-                    orderID={data.id}
-                    currentStatus={data.status}
-                    revalidateCallback={revalidateCallback}
-                    openOverwritesDialog={() => setOverwritesDialogOpen(true)}
-                  />
-                  <OverwritesDialog
-                    open={overwritesDialogOpen}
-                    handleClose={() => setOverwritesDialogOpen(false)}
-                    overwrites={overwrites}
-                    setOverwrites={setOverwrites}
-                    iro={data}
-                  />
-                  <CancelIroDialog
-                    open={cancelDialogOpen}
-                    handleClose={() => setCancelDialogOpen(false)}
-                    orderID={data.id}
-                    revalidateCallback={revalidateCallback}
-                  />
-                </Stack>
-              </Paper>
-            </Grid>
-          )}
-
-        <Grid item xs={12}>
-          <Stack spacing={2}>
-            <Typography variant="h5">Documents</Typography>
-            <Paper sx={{ p: 2 }}>
-              <Stack spacing={1}>{/* TODO documents!! */}</Stack>
-            </Paper>
-          </Stack>
-        </Grid>
-
-        {data?.notes?.data?.length > 0 && (
-          <Grid item xs={12}>
-            <Stack spacing={2}>
-              <Typography variant="h5">Notes</Typography>
-              <NotesDisplay notes={data.notes.data} />
-              <Divider />
-            </Stack>
-          </Grid>
-        )}
-
-        <Grid item xs={12}>
-          <Stack spacing={1}>
-            <Typography variant="h5">Items</Typography>
-
-            <Stack
-              direction="row"
-              alignItems={"center"}
-              justifyContent={"flex-end"}
-              spacing={2}
-              component={Paper}
-              p={1}
-              sx={{
-                bgcolor: "background.default",
-                border: "1px solid",
-                borderColor: "divider",
-                boxShadow: "none",
-              }}
-            >
-              <Typography variant="body2" color="text.secondary">
-                Show:
-              </Typography>
-              {options.map((option) => (
-                <FormControlLabel
-                  key={option}
-                  control={
-                    <Checkbox
-                      size="small"
-                      checked={showing.includes(option)}
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          setShowing([...showing, option]);
-                        } else {
-                          setShowing(showing.filter((item) => item !== option));
-                        }
-                      }}
-                    />
-                  }
-                  label={
-                    <Typography variant="body2" color="text.secondary">
-                      {option.charAt(0).toUpperCase() + option.slice(1)}
-                    </Typography>
-                  }
-                  sx={{ mr: 0 }}
-                />
-              ))}
-            </Stack>
-            {data.status === "requested" && (
-              <Alert severity="warning">
-                Before confirmation you cannot update the items
-              </Alert>
-            )}
-            <Divider />
-            <form action={formAction}>
-              {/** INFO - This form is for updating the items, it should be a separate form from the one that
-               * uploads the files since forms cannot be nested in HTML, however the SubmitButton component
-               * should be within the form, thats why the form spans two grid items
-               * */}
-              <input name="id" type="hidden" value={data.id} />
-              <input
-                type="hidden"
-                name="items"
-                value={JSON.stringify(parseItems(items))}
-              />
-              {items &&
-                items.map((item: IroItem, index: number) => {
-                  return (
-                    <Paper sx={{ p: 2, mb: 2 }} key={index}>
-                      {data.status === "requested" ||
-                      data.status === "cancelled" ||
-                      data.status === "done" ? (
-                        <IroItemDisplay
-                          item={item}
-                          index={index}
-                          image={item?.product?.image}
-                        />
-                      ) : (
-                        <TextualIROItemUpdater
-                          item={item}
-                          index={index}
-                          handleUpdateQuantity={handleUpdateQuantity}
-                          handleAddReport={handleAddReport}
-                          image={item?.product?.image}
-                          handleRemoveReportAtIndex={handleRemoveReportAtIndex}
-                          revalidateCallback={revalidateCallback}
-                          showing={showing}
-                        />
-                      )}
-                    </Paper>
-                  );
-                })}
-              <Stack
-                direction={"row"}
-                justifyContent={"space-between"}
-                alignItems={"center"}
-                sx={{ pt: 2 }}
-              >
-                {handleClose && (
-                  <Button onClick={handleClose} variant="outlined">
-                    Cancel
-                  </Button>
-                )}
-                <SubmitButton
-                  text="Save changes"
-                  loadingText="Saving..."
-                  variant="contained"
-                />
-              </Stack>
-            </form>
-          </Stack>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}