umwd-components 0.1.631 → 0.1.632

package/dist/types/components/common/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+interface NumberInputProps extends React.ComponentProps<typeof TextField> {
+    label: string;
+    minNewValue?: number;
+    maxNewValue?: number;
+    error?: boolean;
+    setValueCallback?: (value: number) => void;
+}
+declare const NumberInput: (props: NumberInputProps) => React.JSX.Element;
+export default NumberInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.631",
+  "version": "0.1.632",
   "description": "UMWD Component library",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/components/common/NumberInput.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from "react";
+import TextField from "@mui/material/TextField";
+
+interface NumberInputProps extends React.ComponentProps<typeof TextField> {
+  label: string;
+  minNewValue?: number;
+  maxNewValue?: number;
+  error?: boolean;
+  setValueCallback?: (value: number) => void;
+}
+
+const NumberInput = (props: NumberInputProps) => {
+  const { label, minNewValue, maxNewValue } = props;
+
+  const [value, setValue] = React.useState(0);
+
+  useEffect(() => {
+    props.setValueCallback && props.setValueCallback(value);
+  }, [value]);
+
+  return (
+    <TextField
+      {...props}
+      type="number"
+      label={label}
+      size="small"
+      value={value}
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = Number(event.target.value);
+        if (minNewValue !== undefined && maxNewValue !== undefined) {
+          setValue(Math.max(minNewValue, Math.min(newValue, maxNewValue)));
+        } else if (minNewValue !== undefined) {
+          setValue(Math.max(newValue, minNewValue));
+        } else if (maxNewValue !== undefined) {
+          setValue(Math.min(newValue, maxNewValue));
+        } else {
+          setValue(newValue);
+        }
+      }}
+      inputProps={{
+        step: 1,
+        min: minNewValue ?? undefined,
+        max: maxNewValue ?? undefined,
+      }}
+      onWheel={(event: React.WheelEvent<HTMLInputElement>) => {
+        // `event.currentTarget` is a callable type but is targetting the MUI element
+        // whereas `event.target` targets the input element but does not have the callable type, so casting
+        (event.target as HTMLInputElement).blur();
+      }}
+      helperText={`min: ${minNewValue}, max: ${maxNewValue}`}
+      error={
+        (minNewValue !== undefined && value < minNewValue) ||
+        (maxNewValue !== undefined && value > maxNewValue) ||
+        props.error
+      }
+      sx={[
+        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
+        { width: "9rem" },
+        ...(Array.isArray(props?.sx) ? props.sx : [props.sx]),
+      ]}
+      /* sx={{
+        width: "9rem",
+        ...props.sx,
+      }} */
+      // sx={{ width: "9rem" }}
+    />
+  );
+};
+
+export default NumberInput;

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

@@ -29,6 +29,7 @@ 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,
@@ -46,7 +47,6 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   const [showCustomReason, setShowCustomReason] = useState(false);
-  const [unopenedConfirmation, setUnopenedConfirmation] = useState(false);
 
   const updateItemsToReturn = (
     index: number,
@@ -126,77 +126,112 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
         />
         <Stack spacing={1}>
           {items.map((item, index) => (
-            <Stack spacing={1}>
-              <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>
-              {/*  */}
-              <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"
-              />
-              <Typography variant="body1">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>
-              {showCustomReason && (
-                <TextField
-                  value={itemsToReturn[index].other_reason}
-                  label="Custom reason"
-                  variant="outlined"
-                  fullWidth
+            <>
+              <Stack spacing={1} direction={"row"} alignItems={"center"}>
+                <Checkbox
+                  checked={selectedItems.includes(index)}
                   onChange={(e) => {
-                    const customReason = e.target.value;
-                    updateItemsToReturn(index, "other_reason", customReason);
+                    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
+                        );
+                      }}
+                    />
+                  )}
+                </>
               )}
-              {/* TODO ??? <Checkbox
-                checked={selectedItems.includes(index)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedItems([...selectedItems, index]);
-                  } else {
-                    setSelectedItems(selectedItems.filter((i) => i !== index));
-                  }
-                }}
-              /> */}
+
               <Divider />
-            </Stack>
+            </>
           ))}
         </Stack>
       </Stack>