umwd-components 0.1.631 → 0.1.633

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.633",
   "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>

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

@@ -29,7 +29,7 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import { confirmationService } from "../../../data/services/common/confirmation-service";
 import { PreReport } from "../../../types/logistics/Report";
-import { FormControlLabel, Checkbox } from "@mui/material";
+import { FormControlLabel, Checkbox, List, ListItem } from "@mui/material";
 
 const INITIAL_STATE = {
   zodErrors: null,
@@ -55,7 +55,7 @@ function ConfirmFormDialog({
   open: boolean;
   handleClose: () => void;
   orderID: number;
-  currentStatus: "requested" | "released_on_stock";
+  currentStatus: "requested" | "finalising_process";
   revalidateCallback?: () => void;
 }) {
   const [formState, formAction] = useFormState(
@@ -113,15 +113,27 @@ function ConfirmFormDialog({
   open: boolean;
   handleClose: () => void;
   orderID: number;
-  currentStatus: "requested" | "released_on_stock";
+  currentStatus: "requested" | "finalising_process";
   revalidateCallback?: () => void;
 }) {
   return (
     <Dialog open={open}>
-      <DialogTitle>Confirm Order</DialogTitle>
+      <DialogTitle>Confirm Return</DialogTitle>
       <DialogContent>
         <Stack spacing={2}>
-          <Typography>Are you sure you want to confirm this order?</Typography>
+          <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>
+          </List>
           <Typography>Current status: {currentStatus}</Typography>
         </Stack>
       </DialogContent>
@@ -238,6 +250,7 @@ export default function TextualManageIROForm({
   }, [formState]);
 
   useEffect(() => {
+    console.log(data);
     if (data.iro_items?.data) {
       setItems(data.iro_items.data ? data.iro_items.data : []);
     }
@@ -263,7 +276,7 @@ export default function TextualManageIROForm({
                   Management Inbound Return
                 </Typography>
                 <Typography variant="body1">
-                  Manage arrival, registration and release of return
+                  Manage arrival, registration and release of returns
                 </Typography>
               </Stack>
               <NoteTakingComponent
@@ -319,8 +332,8 @@ export default function TextualManageIROForm({
               </Typography>
             </Stack>
 
-            {/* {(data.status === "requested" ||
-              data.status === "released_on_stock") &&
+            {(data.status === "requested" ||
+              data.status === "finalising_process") &&
               role === "enduser" && (
                 <>
                   <Button
@@ -342,7 +355,7 @@ export default function TextualManageIROForm({
                     revalidateCallback={revalidateCallback}
                   />
                 </>
-              )} */}
+              )}
           </Stack>
         </Grid>
         <Grid item xs={12}>

package/src/data/loaders/e-commerce/iros/getSingleIro.ts

@@ -32,6 +32,7 @@ async function getSingleIro(id: number) {
         populate: ["business_credentials"],
       },
       notes: {
+        // should only be available to enduser and dispatcher
         populate: {
           author: {
             populate: true,

package/src/data/loaders/e-commerce-loaders.ts

@@ -128,6 +128,9 @@ async function getAllOrders(
         },
       },
       return: true,
+      iros: {
+        fields: ["id", "uuid", "status"],
+      },
     },
     pagination: {
       pageSize: rowsPerPage || 10,