umwd-components 0.1.639 → 0.1.640

package/src/components/e-commerce/opo/TextualManageOpoForm.tsx

@@ -28,8 +28,23 @@ 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 ??
 import { PreReport } from "../../../types/logistics/Report";
-import { FormControlLabel, Checkbox } from "@mui/material";
+import {
+  FormControlLabel,
+  Checkbox,
+  List,
+  ListItem,
+  TextField,
+} 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 { OpoStatusIndicator } from "./OpoStatusIndicator";
 
 const INITIAL_STATE = {
   zodErrors: null,
@@ -38,76 +53,6 @@ const INITIAL_STATE = {
   message: null,
 };
 
-/* 
-I took away the updateOpoAction and am using the service for confirming directly
-There must be a solid explanation for this, but I don't have it right now
-something with the confirm-route and the update-route not being the same
-
-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" | "external_shipping_process";
-  revalidateCallback?: () => void;
-}) {
-  const [formState, formAction] = useFormState(
-    updateOpoAction,
-    CONFIRMATION_STATE
-  );
-
-  useEffect(() => {
-    if (formState?.message === "Opo 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,
@@ -136,18 +81,90 @@ function ConfirmFormDialog({
           onClick={(e) => {
             confirmationService("opos", [orderID]);
             revalidateCallback && revalidateCallback();
+            handleClose();
           }}
         >
-          Confirm
+          Yes
         </Button>
         <Button variant="contained" onClick={handleClose}>
-          Cancel
+          No
         </Button>
       </DialogActions>
     </Dialog>
   );
 }
 
+// TODO
+function CancelOpoDialog({
+  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 order?</Typography>
+            <List>
+              <ListItem>
+                By cancelling this order you will update it's status from
+                ordered 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("opos", orderID, reason);
+              revalidateCallback && revalidateCallback();
+              handleClose();
+            }}
+          >
+            Yes
+          </Button>
+          <Button variant="contained" onClick={handleClose}>
+            No
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </form>
+  );
+}
+
 export default function TextualManageOPOForm({
   opo,
   sx,
@@ -164,6 +181,7 @@ export default function TextualManageOPOForm({
   );
 
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
 
   const [showing, setShowing] = useState<
     ("picked" | "packed" | "shipped" | "reports")[]
@@ -282,54 +300,91 @@ export default function TextualManageOPOForm({
             <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">{opo.opo_number}</Typography>
-            </Stack>
-
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Custom reference
-              </Typography>
-              <Typography variant="body2">{opo.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">
+                  {opo.opo_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">
+                  {opo.customer_reference}
+                </Typography>
+              </Stack>
 
-              <Typography variant="body2">{opo.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">
+                  {opo.order_date}
+                </Typography>
+              </Stack>
 
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Customer
-              </Typography>
-              <Typography variant="body2">
-                {opo.customer?.business_credentials?.company_name}
-              </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">
+                  {opo.customer?.business_credentials?.company_name}
+                </Typography>
+              </Stack>
 
-            <Stack direction="row" spacing={2}>
-              <Typography variant="body1" width={"250px"}>
-                Order Status
-              </Typography>
-              <Typography variant="body2" width={"250px"}>
-                {opo.status}
-              </Typography>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <UpdateIcon color="primary" />
+                <Typography
+                  variant="subtitle1"
+                  color="text.secondary"
+                  width="200px"
+                >
+                  Order Status
+                </Typography>
+                <OpoStatusIndicator status={opo.status} />
+              </Stack>
             </Stack>
+          </Paper>
+        </Grid>
 
-            {(opo.status === "placed" ||
-              opo.status === "external_shipping_process") &&
-              role === "enduser" && (
-                <>
+        {(opo.status === "placed" ||
+          opo.status === "external_shipping_process") &&
+          role === "enduser" && (
+            <Grid item xs={6}>
+              <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
+                <Stack spacing={2}>
                   <Button
                     variant="contained"
                     color="primary"
@@ -341,6 +396,13 @@ export default function TextualManageOPOForm({
                     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)}
@@ -348,10 +410,16 @@ export default function TextualManageOPOForm({
                     currentStatus={opo.status}
                     revalidateCallback={revalidateCallback}
                   />
-                </>
-              )}
-          </Stack>
-        </Grid>
+                  <CancelOpoDialog
+                    open={cancelDialogOpen}
+                    handleClose={() => setCancelDialogOpen(false)}
+                    orderID={opo.id}
+                    revalidateCallback={revalidateCallback}
+                  />
+                </Stack>
+              </Paper>
+            </Grid>
+          )}
 
         <Grid item xs={12}>
           <Stack spacing={2}>
@@ -468,7 +536,10 @@ export default function TextualManageOPOForm({
                 items.map((item: OpoItem, index: number) => {
                   return (
                     <Paper sx={{ p: 2, mb: 2 }} key={index}>
-                      {opo.status === "placed" ? (
+                      {opo.status === "placed" ||
+                      opo.status === "external_shipping_process" ||
+                      opo.status === "done" ||
+                      opo.status === "cancelled" ? (
                         <OpoItemDisplay
                           item={item}
                           index={index}