umwd-components 0.1.645 → 0.1.647

package/package.json

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

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

@@ -25,8 +25,6 @@ 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 Card from "@mui/material/Card";
-import CardContent from "@mui/material/CardContent";
 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 ??
@@ -411,7 +409,6 @@ function ConfirmFormDialog({
   );
 }
 
-// TODO
 function CancelIroDialog({
   open,
   handleClose,

package/src/components/logistics/ipo/TextualManageIPOForm.tsx

@@ -23,8 +23,30 @@ 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";
 import { PreReport } from "../../../types/logistics/Report";
-import { FormControlLabel, Checkbox } from "@mui/material";
+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 { IpoStatusIndicator } from "./IpoStatusIndicator";
+import { InvoiceOverwrites } from "../../../types/e-commerce/invoice/types";
+import { Ipo } from "../../../types/logistics/Ipo";
+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";
 
 const INITIAL_STATE = {
   zodErrors: null,
@@ -33,71 +55,6 @@ const INITIAL_STATE = {
   message: null,
 };
 
-/* const CONFIRMATION_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-};
-
-function ConfirmFormDialog({
-  open,
-  handleClose,
-  orderID,
-  currentStatus,
-  revalidateCallback,
-}: {
-  open: boolean;
-  handleClose: () => void;
-  orderID: number;
-  currentStatus: "placed" | "released_on_stock";
-  revalidateCallback?: () => void;
-}) {
-  const [formState, formAction] = useFormState(
-    updateIpoAction,
-    CONFIRMATION_STATE
-  );
-
-  useEffect(() => {
-    if (formState?.message === "Ipo Updated") {
-      revalidateCallback && revalidateCallback();
-      handleClose();
-    }
-  }, [formState?.message]);
-
-  return (
-    <Dialog open={open}>
-      <form action={formAction}>
-        <input name="id" type="hidden" value={orderID} />
-        <input
-          name="status"
-          type="hidden"
-          value={currentStatus === "placed" ? "ordered" : "done"}
-        />
-        <DialogTitle>Confirm Order</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2}>
-            <Typography>
-              Are you sure you want to confirm this order?
-            </Typography>
-            <Typography>Current status: {currentStatus}</Typography>
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <SubmitButton text="Confirm" loadingText="Loading..." />
-          <StrapiErrors error={formState?.strapiErrors} />
-          {formState?.message && (
-            <Alert severity="error">{formState?.message}</Alert>
-          )}
-          <Button variant="contained" color="secondary" onClick={handleClose}>
-            Cancel
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-} */
-
 function ConfirmFormDialog({
   open,
   handleClose,
@@ -126,6 +83,7 @@ function ConfirmFormDialog({
           onClick={(e) => {
             confirmationService("ipos", [orderID]);
             revalidateCallback && revalidateCallback();
+            handleClose();
           }}
         >
           Confirm
@@ -138,6 +96,78 @@ function ConfirmFormDialog({
   );
 }
 
+function CancelIpoDialog({
+  open,
+  handleClose,
+  orderID,
+  revalidateCallback,
+}: {
+  open: boolean;
+  handleClose: () => void;
+  orderID: number;
+  revalidateCallback?: () => void;
+}) {
+  const [reason, setRoason] = useState<string>("");
+  const [reasonError, setReasonError] = useState<string>("");
+  return (
+    <form>
+      <Dialog open={open}>
+        <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="contained"
+            onClick={(e) => {
+              if (reason.length < 5) {
+                setReasonError("Please provide a reason for the cancellation");
+                return;
+              }
+              cancellationService("ipos", orderID, reason);
+              revalidateCallback && revalidateCallback();
+              handleClose();
+            }}
+          >
+            Yes
+          </Button>
+          <Button variant="contained" onClick={handleClose}>
+            No
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </form>
+  );
+}
+
 export default function TextualManageIPOForm({
   data,
   sx,
@@ -154,6 +184,7 @@ export default function TextualManageIPOForm({
   );
 
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
 
   const [showing, setShowing] = useState<
     ("received" | "registered" | "released" | "reports")[]
@@ -229,13 +260,30 @@ export default function TextualManageIPOForm({
     setItems(newItems);
   };
 
+  const { handleAddMessage } = useSnackbar();
+
   useEffect(() => {
     if (formState?.message === "Ipo Updated") {
+      handleAddMessage({
+        message: "Ipo Updated",
+        severity: "success",
+      });
+      handleClose && handleClose();
       revalidateCallback && revalidateCallback();
     }
   }, [formState]);
 
   useEffect(() => {
+    if (formState?.strapiErrors) {
+      handleAddMessage({
+        message: formState.strapiErrors.message || "Error updating IPO",
+        severity: "error",
+      });
+    }
+  }, [formState?.strapiErrors]);
+
+  useEffect(() => {
+    console.log("data", data);
     if (data.items?.data) {
       setItems(data.items.data ? data.items.data : []);
     }
@@ -273,54 +321,90 @@ export default function TextualManageIPOForm({
             <Divider />
           </Stack>
         </Grid>
+        <Grid item xs={12}>
+          <Typography variant="h5" sx={{ py: 1 }}>
+            Details
+          </Typography>
+        </Grid>
         <Grid item xs={6}>
-          <Stack spacing={1}>
-            <Typography variant="h5">Details</Typography>
-
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Purchase Order Number
-              </Typography>
-              <Typography variant="body2">{data.ipo_number}</Typography>
-            </Stack>
-
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Custom reference
-              </Typography>
-              <Typography variant="body2">{data.customer_reference}</Typography>
-            </Stack>
+          <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"
+                >
+                  Purchase Order Number
+                </Typography>
+                <Typography variant="body1" fontWeight="medium">
+                  {data.ipo_number}
+                </Typography>
+              </Stack>
 
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Order Date
-              </Typography>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <DescriptionIcon color="primary" />
+                <Typography
+                  variant="subtitle1"
+                  color="text.secondary"
+                  width="200px"
+                >
+                  Custom Reference
+                </Typography>
+                <Typography variant="body1" fontWeight="medium">
+                  {data.customer_reference}
+                </Typography>
+              </Stack>
 
-              <Typography variant="body2">{data.order_date}</Typography>
-            </Stack>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <CalendarTodayIcon color="primary" />
+                <Typography
+                  variant="subtitle1"
+                  color="text.secondary"
+                  width="200px"
+                >
+                  Order Date
+                </Typography>
+                <Typography variant="body1" fontWeight="medium">
+                  {data.order_date}
+                </Typography>
+              </Stack>
 
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Supplier
-              </Typography>
-              <Typography variant="body2">
-                {data.vendor_profile?.business_credentials?.company_name}
-              </Typography>
-            </Stack>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <BusinessIcon color="primary" />
+                <Typography
+                  variant="subtitle1"
+                  color="text.secondary"
+                  width="200px"
+                >
+                  Supplier
+                </Typography>
+                <Typography variant="body1" fontWeight="medium">
+                  {data.vendor_profile?.business_credentials?.company_name}
+                </Typography>
+              </Stack>
 
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Order Status
-              </Typography>
-              <Typography variant="body2" width={"250px"}>
-                {data.status}
-              </Typography>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <UpdateIcon color="primary" />
+                <Typography
+                  variant="subtitle1"
+                  color="text.secondary"
+                  width="200px"
+                >
+                  Order Status
+                </Typography>
+                <IpoStatusIndicator status={data.status} />
+              </Stack>
             </Stack>
+          </Paper>
+        </Grid>
 
-            {(data.status === "placed" ||
-              data.status === "released_on_stock") &&
-              role === "enduser" && (
-                <>
+        {(data.status === "placed" || data.status === "released_on_stock") &&
+          role === "enduser" && (
+            <Grid item xs={6}>
+              <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
+                <Stack spacing={2}>
                   <Button
                     variant="contained"
                     color="primary"
@@ -332,6 +416,13 @@ export default function TextualManageIPOForm({
                     Please confirm the order as soon as possible, only upon
                     confirmation this order will be available to the dispatcher
                   </Alert>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    onClick={() => setCancelDialogOpen(true)}
+                  >
+                    Cancel order
+                  </Button>
                   <ConfirmFormDialog
                     open={confirmDialogOpen}
                     handleClose={() => setConfirmDialogOpen(false)}
@@ -339,10 +430,16 @@ export default function TextualManageIPOForm({
                     currentStatus={data.status}
                     revalidateCallback={revalidateCallback}
                   />
-                </>
-              )}
-          </Stack>
-        </Grid>
+                  <CancelIpoDialog
+                    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>
@@ -492,7 +589,9 @@ export default function TextualManageIPOForm({
                 items.map((item: IpoItem, index: number) => {
                   return (
                     <Paper sx={{ p: 2, mb: 2 }} key={index}>
-                      {data.status === "placed" ? (
+                      {data.status === "placed" ||
+                      data.status === "cancelled" ||
+                      data.status === "done" ? (
                         <ItemDisplay
                           item={item}
                           index={index}
@@ -516,10 +615,6 @@ export default function TextualManageIPOForm({
               <Paper sx={{ p: 2 }}>
                 <Stack direction="row" spacing={2} justifyContent={"end"}>
                   <SubmitButton text="Update items" loadingText="Loading..." />
-                  <StrapiErrors error={formState?.strapiErrors} />
-                  {formState?.message && (
-                    <Alert severity="error">{formState?.message}</Alert>
-                  )}
                 </Stack>
               </Paper>
               <input