umwd-components 0.1.652 → 0.1.654

package/src/components/e-commerce/products/EditProductForm.tsx

@@ -40,12 +40,14 @@ export function EditProductForm({
   vendorArr,
   categoriesArray,
   revalidateCallback,
+  handleClose,
   sx,
 }: {
   data: ExtendedProduct;
   vendorArr: VendorName[];
   categoriesArray: CategoryName[];
   revalidateCallback?: () => void;
+  handleClose?: () => void;
   sx?: SxProps;
 }) {
   const {
@@ -60,7 +62,6 @@ export function EditProductForm({
     categories,
     vendors,
   } = data;
-  console.log("data", data);
 
   const initialGallery = gallery?.data || [];
   const initialCategories = categories?.data || [];
@@ -80,6 +81,7 @@ export function EditProductForm({
 
       if (formState.severity === "success") {
         revalidateCallback && revalidateCallback();
+        handleClose && handleClose();
       }
     }
   }, [formState?.message]);
@@ -126,17 +128,15 @@ export function EditProductForm({
   }
 
   return (
-    <Box
-      sx={[
-        { p: 2 },
-        // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      component={Paper}
-    >
+    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
       <form action={formAction}>
         {id && <input id="id" type="hidden" name="id" value={id} />}
         <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Typography variant="h3" component="h1">
+              Edit Product
+            </Typography>
+          </Grid>
           <Grid item xs={12}>
             <Stack spacing={2}>
               <TextField
@@ -276,25 +276,21 @@ export function EditProductForm({
               currentValue={vendors.data?.[0]?.id}
             />
           </Grid>
-        </Grid>
-        <Grid item xs={12}>
-          <Stack
-            direction="row-reverse"
-            spacing={2}
-            alignItems={"center"}
-            sx={{
-              py: 1,
-            }}
-          >
-            <SubmitButton text="update product" 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={{ py: 1 }}
+            >
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Cancel
+                </Button>
+              )}
+              <SubmitButton text="update product" loadingText="loading" />
+            </Stack>
+          </Grid>
         </Grid>
       </form>
     </Box>

package/src/components/e-commerce/products/EditStockForm.tsx

@@ -4,56 +4,55 @@ import React, { useState, useEffect } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import Alert from "@mui/material/Alert";
 import Typography from "@mui/material/Typography";
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
-import { StrapiErrors } from "../../StrapiErrors";
 import { updateProductAction } from "../../../data/actions/e-commerce/product/updateProductAction";
 import Grid from "@mui/material/Grid";
 import { ProductStock } from "../../../types/e-commerce/product/types";
 import { SxProps } from "@mui/material/styles";
 import ReportsDisplay from "../../logistics/report/ReportsDisplay";
 import ReportMakingComponent from "../../logistics/report/ReportMakingComponent";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TableRow,
-  Tooltip,
-} from "@mui/material";
+import { useSnackbar } from "../../../context/common/SnackbarContext";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableFooter from "@mui/material/TableFooter";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Tooltip from "@mui/material/Tooltip";
+import Button from "@mui/material/Button";
 import AmountIndicator from "../../../components/common/AmountIndicator";
 import { IpoItem } from "../../../types/logistics/Ipo";
 import { OpoItem } from "../../../types/e-commerce/opo/types";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
 
 const INITIAL_STATE = {
   zodErrors: null,
   strapiErrors: null,
-  severity: null,
   data: null,
   message: null,
+  severity: null,
 };
 
 export function EditStockForm({
   data,
   revalidateCallback,
+  handleClose,
   sx,
 }: {
   data: ProductStock;
   revalidateCallback: () => void;
+  handleClose?: () => void;
   sx?: SxProps;
 }) {
   const { id, title, product_number, stock, ipos, opos, reports } = data;
+  const { handleAddMessage } = useSnackbar();
 
   const [formState, formAction] = useFormState(
     updateProductAction,
     INITIAL_STATE
   );
-  const { handleAddMessage } = useSnackbar();
 
   useEffect(() => {
     if (formState?.message) {
@@ -64,28 +63,22 @@ export function EditStockForm({
 
       if (formState.severity === "success") {
         revalidateCallback && revalidateCallback();
+        handleClose && handleClose();
       }
     }
-  }, [formState?.message]);
+  }, [formState?.message, handleAddMessage, revalidateCallback, handleClose]);
 
   useEffect(() => {
     if (formState?.strapiErrors) {
       handleAddMessage({
         message: formState.strapiErrors.message || "Error updating stock",
-        severity: formState.severity || "error",
+        severity: "error",
       });
     }
-  }, [formState?.strapiErrors]);
+  }, [formState?.strapiErrors, handleAddMessage]);
 
   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])]}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Typography variant="h6">{title}</Typography>
@@ -398,21 +391,21 @@ export function EditStockForm({
           </Grid>
           <Grid item xs={12}>
             <Stack
-              direction="row-reverse"
-              spacing={2}
-              alignItems={"center"}
-              sx={{
-                py: 1,
-              }}
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ py: 1 }}
             >
-              <SubmitButton text="update stock" loadingText="loading" />
-              {formState?.strapiErrors && (
-                <StrapiErrors error={formState?.strapiErrors} />
-              )}
-
-              {formState?.message && (
-                <Alert severity="error">{formState?.message}</Alert>
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Close
+                </Button>
               )}
+              <SubmitButton
+                text="Update Stock"
+                loadingText="Updating..."
+                variant="contained"
+              />
             </Stack>
           </Grid>
         </Grid>