umwd-components 0.1.716 → 0.1.717

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

@@ -1,459 +0,0 @@
-"use client";
-
-import React, { Dispatch, Suspense, useEffect, useState } from "react";
-import { useFormState } from "react-dom";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-import { SxProps } from "@mui/material/styles";
-
-import { requestRmaAction } from "../../../data/actions/e-commerce/iro/requestRmaAction";
-import { StrapiErrors } from "../../../components/StrapiErrors";
-import { SubmitButton } from "../../../components/SubmitButton";
-import {
-  ReturnReason,
-  RMAFormProps,
-} from "../../../types/e-commerce/iro/types";
-
-import Typography from "@mui/material/Typography";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import Checkbox from "@mui/material/Checkbox";
-import Button from "@mui/material/Button";
-import Alert from "@mui/material/Alert";
-import Stack from "@mui/material/Stack";
-import { Divider, List, ListItem } from "@mui/material";
-import TextualAmountUpdater from "../../../components/common/TextualAmountUpdater";
-import { OpoItem } from "../../../types/e-commerce/opo/types";
-import { ProductName } from "../../../types/e-commerce/product/types";
-import { IroItem, NewIroItem } from "../../../types/e-commerce/iro/types";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import NumberInput from "../../../components/common/NumberInput";
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-
-interface ItemLinesProps {
-  items: OpoItem[];
-  itemsToReturn: NewIroItem[];
-  setItemsToReturn: (newItems: NewIroItem[]) => void;
-  selectedItems: number[];
-  setSelectedItems: Dispatch<React.SetStateAction<number[]>>;
-}
-
-const ItemLines: React.FC<ItemLinesProps> = ({
-  items,
-  itemsToReturn,
-  setItemsToReturn,
-  selectedItems,
-  setSelectedItems,
-}) => {
-  // const [itemsToReturn, setItemsToReturn] = useState<NewIroItem[]>([]);
-  // const [selectedItems, setSelectedItems] = useState<number[]>([]);
-
-  // itemsToReturn, setItemsToReturn, selectedItems, setSelectedItems
-  const [showCustomReason, setShowCustomReason] = useState(false);
-
-  const updateItemsToReturn = (
-    index: number,
-    name: string,
-    newValue: number | string
-  ) => {
-    setItemsToReturn(
-      itemsToReturn.map((item, i) => {
-        if (i === index) {
-          return { ...item, [name]: newValue };
-        }
-        return item;
-      })
-    );
-  };
-
-  useEffect(() => {
-    if (items) {
-      setItemsToReturn(
-        items.map((item) => {
-          return {
-            line_item_number: item.line_item_number,
-            product: item.product,
-            ordered_quantity: item.ordered_quantity,
-            returned_quantity: 0,
-            reason: "damaged",
-            other_reason: "",
-          };
-        })
-      );
-    }
-  }, [items]);
-
-  const [parsedItems, setParsedItems] = useState<parsedIroItem[]>([]);
-
-  type parsedIroItem = {
-    line_item_number: string;
-    product: number;
-    returned_quantity: number;
-    reason: "damaged" | "not_as_described" | "wrong_item" | "other";
-    other_reason: string;
-  };
-
-  const parseItems = (items: NewIroItem[]): parsedIroItem[] => {
-    return itemsToReturn.map((item, index) => {
-      return {
-        line_item_number: `${index + 1}.0.0`,
-        product:
-          typeof item.product === "object" && "id" in item.product
-            ? item.product.id
-            : 0,
-        returned_quantity: item.returned_quantity,
-        reason: item.reason,
-        other_reason: item.other_reason || "",
-      };
-    });
-  };
-
-  useEffect(() => {
-    if (itemsToReturn) {
-      setParsedItems(parseItems(itemsToReturn));
-    }
-  }, [itemsToReturn]);
-
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Stack spacing={2}>
-        <Typography variant="h6">Items</Typography>
-        <Typography variant="body1">
-          from the items in the original order please select the items you'd
-          like to return
-        </Typography>
-        <input
-          type="hidden"
-          name="iro_items"
-          value={JSON.stringify(parsedItems)}
-        />
-        <Stack spacing={1}>
-          {items.map((item, index) => (
-            <>
-              <Stack spacing={1} direction={"row"} alignItems={"center"}>
-                <Checkbox
-                  checked={selectedItems.includes(index)}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setSelectedItems([...selectedItems, index]);
-                    } else {
-                      setSelectedItems(
-                        selectedItems.filter((i) => i !== index)
-                      );
-                    }
-                  }}
-                />
-                <Typography variant="body1">
-                  Line Item Number: {item.line_item_number}
-                </Typography>
-                <Typography variant="body1">
-                  Part Number: {item.product?.product_number}
-                </Typography>
-                <Typography variant="body1">
-                  Quantity Ordered: {item.ordered_quantity}
-                </Typography>
-              </Stack>
-
-              {selectedItems.includes(index) && (
-                <>
-                  <Stack direction={"row"} spacing={1} alignItems={"center"}>
-                    <NumberInput
-                      label="Quantity to return"
-                      minNewValue={0}
-                      maxNewValue={item.ordered_quantity}
-                      setValueCallback={(newValue) => {
-                        updateItemsToReturn(
-                          index,
-                          "returned_quantity",
-                          newValue
-                        );
-                      }}
-                      sx={{ width: "12rem" }}
-                    />
-                    {/* <TextualAmountUpdater
-                    label="Quantity to return"
-                    currentValue={item.ordered_quantity}
-                    totalValue={item.ordered_quantity}
-                    minNewValue={0}
-                    maxNewValue={item.ordered_quantity}
-                    handleChange={(newValue) => {
-                      // console.log(newValue);
-                      updateItemsToReturn(index, "returned_quantity", newValue);
-                    }}
-                    color="info"
-                  /> */}
-                    <Divider orientation="vertical" flexItem />
-                    <Typography variant="body1" sx={{ width: "12rem" }}>
-                      Reason for return:
-                    </Typography>
-                    <TextField
-                      value={itemsToReturn[index]?.reason}
-                      select
-                      SelectProps={{
-                        native: true,
-                      }}
-                      variant="outlined"
-                      fullWidth
-                      onChange={(e) => {
-                        const reason = e.target.value;
-                        if (reason === "other") {
-                          setShowCustomReason(true);
-                        } else {
-                          setShowCustomReason(false);
-                        }
-                        updateItemsToReturn(
-                          index,
-                          "reason",
-                          reason as ReturnReason
-                        );
-                      }}
-                    >
-                      <option value="damaged">Damaged on arrival</option>
-                      <option value="not_as_described">Not as described</option>
-                      <option value="wrong_item">Wrong item</option>
-                      <option value="other">Other</option>
-                    </TextField>
-                  </Stack>
-                  {showCustomReason && (
-                    <TextField
-                      value={itemsToReturn[index].other_reason}
-                      label="Custom reason"
-                      variant="outlined"
-                      fullWidth
-                      onChange={(e) => {
-                        const customReason = e.target.value;
-                        updateItemsToReturn(
-                          index,
-                          "other_reason",
-                          customReason
-                        );
-                      }}
-                    />
-                  )}
-                </>
-              )}
-
-              <Divider />
-            </>
-          ))}
-        </Stack>
-      </Stack>
-    </Suspense>
-  );
-};
-
-interface ConfirmRMADialogProps {
-  open: boolean;
-  onClose: () => void;
-  items: NewIroItem[];
-  formState: any;
-  submitCallback?: () => void;
-}
-
-const ConfirmRMADialog: React.FC<ConfirmRMADialogProps> = ({
-  open,
-  onClose,
-  items,
-  formState,
-  submitCallback,
-}) => {
-  const [missingConfirmations, setMissingConfirmations] = useState(true);
-
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Confirm RMA</DialogTitle>
-      <DialogContent>
-        <DialogContentText>Summary of items to be returned:</DialogContentText>
-        <List>
-          {items.map((item, index) => (
-            <ListItem key={index}>
-              {typeof item.product === "object"
-                ? `${item?.product?.product_number} ${item?.product?.title}`
-                : `Product with ID ${item.product}`}{" "}
-              - Quantity: {item.returned_quantity}
-            </ListItem>
-          ))}
-        </List>
-        <DialogContentText>
-          Are you sure you want to request a return merchandise authorization
-          for these items?
-        </DialogContentText>
-
-        <Checkbox
-          onChange={(e) => setMissingConfirmations(!e.target.checked)}
-        />
-        <Typography variant="body1">
-          {/* This is important and could be client specific, so this might be something for the cms or env */}
-          I confirm that the information I have provided is accurate and
-          truthful. I understand that providing false or misleading information
-          about the reason for returning goods may result in additional costs
-          being charged to me. By checking this box, I acknowledge my legal
-          responsibility for the accuracy of my declaration.
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        {submitCallback ? (
-          <SubmitButton
-            text="Yes"
-            loadingText="Loading..."
-            disabled={missingConfirmations}
-            onClick={submitCallback}
-          />
-        ) : (
-          <SubmitButton
-            text="Yes"
-            loadingText="Loading..."
-            disabled={missingConfirmations}
-          />
-        )}
-        <Button onClick={onClose}>No</Button>
-        {formState?.strapiErrors !== null && (
-          <StrapiErrors error={formState?.strapiErrors} />
-        )}
-        {formState?.message && (
-          <Alert severity="error">{formState?.message}</Alert>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-/* INFO Request RMA Return Merchandise Authorization for customers*/
-export default function RmaForm({
-  opo,
-  sx,
-  revalidateCallback,
-  handleClose,
-}: RMAFormProps & { sx?: SxProps }) {
-  const [formState, formAction] = useFormState(requestRmaAction, INITIAL_STATE);
-
-  /*   const handleDeleteItem = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index);
-    setItems(newItems);
-}; */
-
-  const { handleAddMessage } = useSnackbar();
-
-  const [open, setOpen] = useState(false);
-
-  const [itemsToReturn, setItemsToReturn] = useState<NewIroItem[]>([]);
-  const [selectedItems, setSelectedItems] = useState<number[]>([]);
-
-  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 requesting RMA",
-        severity: formState.severity || "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-
-  return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      <form action={formAction}>
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <Typography variant="h6">RMA Form</Typography>
-          </Grid>
-          <input type="hidden" name="opos" value={JSON.stringify([opo.id])} />
-          <Grid item xs={12}>
-            <Stack spacing={2}>
-              <Typography variant="body1">
-                Please fill out the form below to request a return merchandise
-                authorization. Due to the sensitive nature of the products, only
-                unopened packages can be returned.
-              </Typography>
-              <Alert severity="warning">
-                We urge you to carefully photograph the items you are returning.
-                These pictures can be requested at a later time by our team to
-                verify the condition of the items.
-              </Alert>
-            </Stack>
-          </Grid>
-          <Grid item xs={12}>
-            {opo.opo_items?.data ? (
-              <Stack spacing={1}>
-                {opo.opo_items?.data && (
-                  <ItemLines
-                    items={opo.opo_items?.data}
-                    itemsToReturn={itemsToReturn}
-                    setItemsToReturn={setItemsToReturn}
-                    selectedItems={selectedItems}
-                    setSelectedItems={setSelectedItems}
-                  />
-                )}
-              </Stack>
-            ) : (
-              <Typography variant="body1">No items</Typography>
-            )}
-          </Grid>
-          <ConfirmRMADialog
-            formState={formState}
-            open={open}
-            items={itemsToReturn.filter((item) => item.returned_quantity > 0)}
-            onClose={() => setOpen(!open)}
-            submitCallback={() => {
-              console.log("submit callback");
-              const formElement = document.querySelector("form");
-              if (formElement) {
-                formAction(new FormData(formElement));
-              } else {
-                formAction(new FormData());
-              }
-              setOpen(!open);
-            }}
-          />
-          <Grid item xs={12}>
-            <Button
-              onClick={() => {
-                console.log(formState);
-                setOpen(!open);
-              }}
-              disabled={
-                selectedItems.length === 0 ||
-                selectedItems.reduce(
-                  (acc, index) => acc + itemsToReturn[index].returned_quantity,
-                  0
-                ) === 0
-              }
-            >
-              Request RMA
-            </Button>
-            {/* <SubmitButton text="Request RMA" loadingText="Loading..." /> */}
-            {formState?.strapiErrors !== null && (
-              <StrapiErrors error={formState?.strapiErrors} />
-            )}
-            {formState?.message && (
-              <Alert severity="error">{formState?.message}</Alert>
-            )}
-          </Grid>
-        </Grid>
-      </form>
-    </Box>
-  );
-}

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

@@ -1,225 +0,0 @@
-import React, { useState, useMemo } from "react";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import Divider from "@mui/material/Divider";
-import Collapse from "@mui/material/Collapse";
-import TextualAmountUpdater from "../../../components/common/TextualAmountUpdater";
-import ArrowButtonDownIcon from "@mui/icons-material/ArrowDropDown";
-import { TextualIroItemUpdaterProps } from "../../../types/e-commerce/iro/types";
-import ImagePreviewTooltip from "../../../components/common/ImagePreviewTooltip";
-import { Report, PreReport } from "../../../types/logistics/Report";
-import ReportsDisplay from "../../logistics/report/ReportsDisplay";
-import PreReportsDisplay from "../../logistics/report/PreReportsDisplay";
-import SimpleReportFields from "../../logistics/report/SimpleReportFields";
-import Box from "@mui/material/Box";
-
-function TextualIROItemUpdater({
-  item,
-  index,
-  handleAddReport,
-  handleUpdateQuantity,
-  image,
-  handleRemoveReportAtIndex,
-  showing,
-}: TextualIroItemUpdaterProps) {
-  const {
-    line_item_number,
-    product,
-    returned_quantity,
-    received_quantity,
-    registered_quantity,
-    released_quantity,
-    reports,
-    reason,
-    other_reason,
-  } = item;
-
-  const [open, setOpen] = useState(false);
-
-  // these values where wrapped with useMemo before but that did not work well while updating values
-  const received_reports_quantity =
-    reports?.data !== undefined && reports.data.length > 0
-      ? reports.data
-          .filter((report: Report | PreReport) => report.type === "received")
-          .reduce((a, b) => a + b.quantity, 0)
-      : 0;
-
-  const registered_reports_quantity =
-    reports?.data !== undefined && reports.data.length > 0
-      ? reports.data
-          .filter((report: Report | PreReport) => report.type === "registered")
-          .reduce((a, b) => a + b.quantity, 0)
-      : 0;
-
-  const released_reports_quantity =
-    reports?.data !== undefined && reports.data.length > 0
-      ? reports.data
-          .filter((report: Report | PreReport) => report.type === "released")
-          .reduce((a, b) => a + b.quantity, 0)
-      : 0;
-
-  const dbReports =
-    item.reports?.data?.filter((report) => "id" in report) || ([] as Report[]);
-
-  const preReports =
-    item.reports?.data?.filter((report) => Boolean("id" in report) === false) ||
-    ([] as PreReport[]);
-
-  return (
-    <Stack spacing={1} key={index}>
-      {item && (
-        <>
-          <Stack
-            direction={"row"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            sx={{ mb: 1 }}
-          >
-            <Typography variant="body1">
-              Line Item Number: {line_item_number}
-            </Typography>
-            <Typography variant="body1">
-              Part Number: {product?.product_number}
-            </Typography>
-            {image && (
-              <>
-                <ImagePreviewTooltip
-                  image={image}
-                  label={item.product?.title}
-                />
-              </>
-            )}
-          </Stack>
-          <Typography variant="body1">
-            Reason: {reason}
-            {reason === "other" &&
-              other_reason !== undefined &&
-              `, ${other_reason}`}
-          </Typography>
-          <Divider sx={{ mb: 1 }} />
-          {showing && showing.includes("received") && (
-            <>
-              <Stack
-                direction={"row"}
-                justifyContent={"space-between"}
-                alignItems={"center"}
-                sx={{ mb: 1 }}
-              >
-                <Typography variant="body2">Received</Typography>
-                <TextualAmountUpdater
-                  label="Received"
-                  currentValue={received_quantity}
-                  totalValue={returned_quantity}
-                  minNewValue={0 + registered_quantity}
-                  maxNewValue={returned_quantity}
-                  color={"info"}
-                  handleChange={(newValue) => {
-                    handleUpdateQuantity(
-                      newValue,
-                      item.id,
-                      "received_quantity"
-                    );
-                  }}
-                />
-              </Stack>
-              <Divider sx={{ mb: 2 }} />
-            </>
-          )}
-          {showing && showing.includes("registered") && (
-            <>
-              <Stack
-                direction={"row"}
-                justifyContent={"space-between"}
-                alignItems={"center"}
-              >
-                <Typography variant="body2">Registered</Typography>
-                <TextualAmountUpdater
-                  label="Registered"
-                  currentValue={registered_quantity}
-                  totalValue={returned_quantity + registered_reports_quantity}
-                  minNewValue={0 + released_quantity}
-                  maxNewValue={received_quantity + registered_reports_quantity}
-                  color={"info"}
-                  handleChange={(newValue) => {
-                    handleUpdateQuantity(
-                      newValue,
-                      item.id,
-                      "registered_quantity"
-                    );
-                  }}
-                />
-              </Stack>
-              <Divider sx={{ mb: 2 }} />
-            </>
-          )}
-          {showing && showing.includes("reports") && (
-            <Box sx={{ mb: 2 }}>
-              <Divider sx={{ p: 0 }}>
-                <Stack direction={"row"} spacing={1} alignItems={"center"}>
-                  <Typography variant="body2">
-                    Irregularities / Corrections
-                  </Typography>
-                  <IconButton onClick={() => setOpen(!open)}>
-                    <ArrowButtonDownIcon />
-                  </IconButton>
-                </Stack>
-              </Divider>
-
-              <Collapse in={open}>
-                <Stack spacing={2}>
-                  <Typography variant="body2">
-                    Here you can report and correct for damages wrong items etc.
-                    Do not forget to click the button!
-                  </Typography>
-                  <ReportsDisplay reports={dbReports as Report[]} />
-                  <PreReportsDisplay
-                    itemID={item.id}
-                    reports={preReports}
-                    handleRemoveReportAtIndex={handleRemoveReportAtIndex}
-                  />
-                  <SimpleReportFields
-                    itemID={item.id}
-                    content=""
-                    type="registered"
-                    minValue={
-                      -(
-                        received_quantity -
-                        registered_quantity +
-                        registered_reports_quantity
-                      )
-                    }
-                    handleAddReport={handleAddReport}
-                  />
-                </Stack>
-              </Collapse>
-            </Box>
-          )}
-          {showing && showing.includes("released") && (
-            <Stack
-              direction={"row"}
-              justifyContent={"space-between"}
-              alignItems={"center"}
-              sx={{ mb: 1 }}
-            >
-              <Typography variant="body2">Released</Typography>
-              <TextualAmountUpdater
-                label="Released"
-                currentValue={released_quantity}
-                totalValue={returned_quantity + registered_reports_quantity}
-                minNewValue={0}
-                maxNewValue={registered_quantity}
-                color={"info"}
-                handleChange={(newValue) => {
-                  handleUpdateQuantity(newValue, item.id, "released_quantity");
-                }}
-              />
-            </Stack>
-          )}
-        </>
-      )}
-    </Stack>
-  );
-}
-
-export default TextualIROItemUpdater;