umwd-components 0.1.658 → 0.1.661

package/src/components/logistics/dispatcher/DispatcherProfileEditForm.tsx

@@ -4,10 +4,12 @@ import Divider from "@mui/material/Divider";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
+import Grid from "@mui/material/Grid";
 import Alert from "@mui/material/Alert";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import Checkbox from "@mui/material/Checkbox";
+import Button from "@mui/material/Button";
 
 import { AddressFields } from "../../common/Address";
 import { AddressProps } from "@/types/AddressProps";
@@ -15,9 +17,9 @@ import { BusinessCredentialsProps } from "@/types/e-commerce/BusinessCredentials
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
 import { updateDispatcherProfileAction } from "../../../data/actions/logistics/dispatcher/profile-actions"; //"@/data/actions/profile-actions";
-import { StrapiErrors } from "../../StrapiErrors"; //"@/components/StrapiErrors";
 import { BusinessCredentialsFields } from "../../e-commerce/customer/BusinessCredentials";
 import { useSession } from "../../../context/auth/SessionContext";
+import { useSnackbar } from "../../../context/common/SnackbarContext";
 import React, { useEffect, useState } from "react";
 import { DispatcherProfileProps } from "../../../types/logistics/dispatcher/types";
 import { SxProps } from "@mui/material";
@@ -27,89 +29,111 @@ const INITIAL_STATE = {
   strapiErrors: null,
   data: null,
   message: null,
+  severity: null,
 };
 
-/* interface DispatcherProfileProps {
-  id: string;
-  uuid: string;
-  dispatcher_number: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone: string;
-  company_address: AddressProps;
-  delivery_address: AddressProps;
-  billing_address: AddressProps;
-  business_credentials: BusinessCredentialsProps;
-} */
-
 export default function DispatcherProfileEditForm({
   data,
   sx,
+  revalidateCallback,
+  handleClose,
 }: {
   readonly data: DispatcherProfileProps;
   sx?: SxProps;
+  revalidateCallback?: () => void;
+  handleClose?: () => void;
 }) {
   const { id, uuid, dispatcher_number, address, business_credentials } = data;
+  const boundAction = updateDispatcherProfileAction.bind(null, parseInt(id));
+  const [formState, formAction] = useFormState(boundAction, INITIAL_STATE);
+  const { handleAddMessage } = useSnackbar();
+  const { refreshSession } = useSession();
 
-  const [formState, formAction] = useFormState(
-    updateDispatcherProfileAction,
-    INITIAL_STATE
-  );
+  useEffect(() => {
+    if (formState?.message) {
+      handleAddMessage({
+        message: formState.message,
+        severity: formState.severity || "error",
+      });
+
+      if (formState.severity === "success") {
+        refreshSession();
+        revalidateCallback && revalidateCallback();
+        handleClose && handleClose();
+      }
+    }
+  }, [formState?.message]);
 
-  // const { refreshSession } = useSession();
-  //
-  // useEffect(() => {
-  //   if (!formState.strapiErrors && formState.message) {
-  //     refreshSession();
-  //   }
-  // }, [formState]);
+  useEffect(() => {
+    if (formState?.strapiErrors) {
+      handleAddMessage({
+        message: formState.strapiErrors.message || "Error performing action",
+        severity: "error",
+      });
+    }
+  }, [formState?.strapiErrors]);
 
   return (
-    <Box
-      sx={[
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        { p: 2 },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      component={Paper}
-    >
+    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
       <form action={formAction}>
-        <Stack spacing={2}>
-          {/* maybe this could be a repeatble component */}
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Stack spacing={2}>
+              <Typography variant="h3" component="h1" gutterBottom>
+                Edit Profile
+              </Typography>
+            </Stack>
+          </Grid>
 
-          <input type="hidden" name="id" value={id} />
-          <Typography variant="h6">Business Credentials</Typography>
-          <Divider />
-          <BusinessCredentialsFields
-            componentName="business_credentials"
-            componentReference="business.credentials" // common.business-credentials ???
-            data={business_credentials}
-          />
-          <Typography variant="h6">Company Address</Typography>
-          <Divider />
-          <AddressFields
-            componentName="address"
-            componentReference="common.address"
-            data={address}
-          />
+          <Grid item xs={12}>
+            <Paper sx={{ p: 2 }}>
+              <Typography variant="h6" gutterBottom>
+                Business Credentials
+              </Typography>
+              <Divider sx={{ mb: 2 }} />
+              <BusinessCredentialsFields
+                componentName="business_credentials"
+                componentReference="business.credentials"
+                data={business_credentials}
+              />
+            </Paper>
+          </Grid>
 
-          <Stack
-            direction="row-reverse"
-            spacing={2}
-            alignItems={"center"}
-            sx={{
-              py: 1,
-            }}
-          >
-            <SubmitButton text="save changes" loadingText="loading" />
-            <StrapiErrors error={formState?.strapiErrors} />
+          <Grid item xs={12}>
+            <Paper sx={{ p: 2 }}>
+              <Typography variant="h6" gutterBottom>
+                Company Address
+              </Typography>
+              <Divider sx={{ mb: 2 }} />
+              <AddressFields
+                componentName="address"
+                componentReference="common.address"
+                data={address}
+              />
+            </Paper>
+          </Grid>
 
-            {formState?.message && (
-              <Alert severity="error">{formState?.message}</Alert>
-            )}
-          </Stack>
-        </Stack>
+          <Grid item xs={12}>
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              spacing={2}
+              alignItems="center"
+              sx={{ mt: 2 }}
+            >
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Cancel
+                </Button>
+              )}
+              <SubmitButton
+                text="Save Changes"
+                loadingText="Saving..."
+                variant="contained"
+              />
+            </Stack>
+          </Grid>
+        </Grid>
       </form>
     </Box>
   );

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

@@ -8,6 +8,7 @@ import Alert from "@mui/material/Alert";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
+import Button from "@mui/material/Button";
 
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
@@ -28,7 +29,7 @@ import { SxProps, Theme } from "@mui/material/styles";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-
+import { useSnackbar } from "../../../context/common/SnackbarContext";
 // TODO: order date should be set by the user
 
 const INITIAL_STATE = {
@@ -36,18 +37,47 @@ const INITIAL_STATE = {
   strapiErrors: null,
   data: null,
   message: null,
+  severity: null,
 };
 
 export function AddIPOForm({
   vendorNamesArr,
   sx,
+  revalidateCallback,
+  handleClose,
 }: {
   vendorNamesArr: VendorName[];
   sx?: SxProps<Theme>;
+  revalidateCallback?: () => void;
+  handleClose?: () => void;
 }) {
   const [formState, formAction] = useFormState(createIPOAction, INITIAL_STATE);
   const [productsArr, setProductsArr] = useState<VendorProductName[]>([]);
   const [vendorID, setVendorID] = useState<number | null>(null);
+  const { handleAddMessage } = useSnackbar();
+
+  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 performing action",
+        severity: "error",
+      });
+    }
+  }, [formState?.strapiErrors]);
 
   const handleVendorSelect = async (selectedVendorID: number | null) => {
     setVendorID(selectedVendorID);
@@ -71,7 +101,14 @@ export function AddIPOForm({
       <form action={formAction}>
         <Grid container spacing={2}>
           <Grid item xs={12}>
-            <Typography variant="h5">Add IPO</Typography>
+            <Stack spacing={2}>
+              <Typography variant="h3" component="h1">
+                Add IPO
+              </Typography>
+              <Typography variant="body1">
+                Create a new incoming purchase order
+              </Typography>
+            </Stack>
           </Grid>
 
           <Grid item xs={12} md={6} sx={{ mt: 1 }}>
@@ -118,25 +155,25 @@ export function AddIPOForm({
           <Grid item xs={12}>
             <IPOItemFields productsArr={productsArr} vendorID={vendorID} />
           </Grid>
-        </Grid>
-        <Grid item xs={12}>
-          <Stack
-            direction="row-reverse"
-            spacing={2}
-            alignItems={"center"}
-            sx={{
-              py: 1,
-            }}
-          >
-            <SubmitButton text="create new ipo" loadingText="loading" />
-            {formState?.strapiErrors && (
-              <StrapiErrors error={formState?.strapiErrors} />
-            )}
-
-            {formState?.message && (
-              <Alert severity="error">{formState?.message}</Alert>
-            )}
-          </Stack>
+          <Grid item xs={12}>
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ mt: 2 }}
+            >
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Cancel
+                </Button>
+              )}
+              <SubmitButton
+                text="Create IPO"
+                loadingText="Creating..."
+                variant="contained"
+              />
+            </Stack>
+          </Grid>
         </Grid>
       </form>
     </Box>