umwd-components 0.1.661 → 0.1.663

package/dist/types/components/logistics/ipo/AddIPOForm.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { VendorName } from "../../../types/logistics/Vendor";
 import { SxProps, Theme } from "@mui/material/styles";
-export declare function AddIPOForm({ vendorNamesArr, sx, revalidateCallback, handleClose, }: {
+interface AddIPOFormProps {
     vendorNamesArr: VendorName[];
     sx?: SxProps<Theme>;
     revalidateCallback?: () => void;
     handleClose?: () => void;
-}): React.JSX.Element;
+}
+export declare function AddIPOForm({ vendorNamesArr, sx, revalidateCallback, handleClose, }: AddIPOFormProps): React.JSX.Element;
+export {};

package/dist/types/components/logistics/vendor/AddVendorForm.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
 import { ProductName } from "../../../types/e-commerce/product/types";
-export declare function AddVendorForm({ productNamesArr, revalidateCallback, }: {
+import { SxProps } from "@mui/system";
+interface AddVendorFormProps {
     productNamesArr: ProductName[];
     revalidateCallback?: () => void;
-}): React.JSX.Element;
+    handleClose?: () => void;
+    sx?: SxProps;
+}
+export declare function AddVendorForm({ productNamesArr, revalidateCallback, handleClose, sx, }: AddVendorFormProps): React.JSX.Element;
+export {};

package/dist/types/components/logistics/vendor/EditVendorForm.d.ts

@@ -2,9 +2,12 @@ import React from "react";
 import { Vendor } from "../../../types/logistics/Vendor";
 import { ProductName } from "../../../types/e-commerce/product/types";
 import { SxProps } from "@mui/material/styles";
-export declare function EditVendorForm({ data, productNamesArr, revalidateCallback, sx, }: {
+interface EditVendorFormProps {
     data: Vendor;
     productNamesArr: ProductName[];
     revalidateCallback?: () => void;
+    handleClose?: () => void;
     sx?: SxProps;
-}): React.JSX.Element;
+}
+export declare function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose, sx, }: EditVendorFormProps): React.JSX.Element;
+export {};

package/dist/types/data/actions/logistics/vendor/updateVendorAction.d.ts

@@ -1 +1,9 @@
-export declare function updateVendorAction(prevState: any, formData: FormData): Promise<any>;
+interface UpdateVendorState {
+    data: any | null;
+    message: string | null;
+    severity: "success" | "error" | "info" | "warning" | null;
+    strapiErrors: any | null;
+    zodErrors: any | null;
+}
+export declare function updateVendorAction(prevState: any, formData: FormData): Promise<UpdateVendorState>;
+export {};

package/package.json

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

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

@@ -1,10 +1,9 @@
 "use client";
 
 import React, { useEffect, useState } 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 Paper from "@mui/material/Paper";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
@@ -12,7 +11,6 @@ import Button from "@mui/material/Button";
 
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
-import { StrapiErrors } from "../../StrapiErrors";
 import { createIPOAction } from "../../../data/actions/logistics/ipo/createIPOAction";
 import Grid from "@mui/material/Grid";
 
@@ -40,17 +38,19 @@ const INITIAL_STATE = {
   severity: null,
 };
 
+interface AddIPOFormProps {
+  vendorNamesArr: VendorName[];
+  sx?: SxProps<Theme>;
+  revalidateCallback?: () => void;
+  handleClose?: () => void;
+}
+
 export function AddIPOForm({
   vendorNamesArr,
   sx,
   revalidateCallback,
   handleClose,
-}: {
-  vendorNamesArr: VendorName[];
-  sx?: SxProps<Theme>;
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-}) {
+}: AddIPOFormProps) {
   const [formState, formAction] = useFormState(createIPOAction, INITIAL_STATE);
   const [productsArr, setProductsArr] = useState<VendorProductName[]>([]);
   const [vendorID, setVendorID] = useState<number | null>(null);
@@ -88,15 +88,12 @@ export function AddIPOForm({
     const vendor = await getSingleVendor(selectedVendorID);
     setProductsArr(vendor?.products?.data);
   };
-
   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}
     >
       <form action={formAction}>
         <Grid container spacing={2}>

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

@@ -682,11 +682,23 @@ export default function TextualManageIPOForm({
                     </Paper>
                   );
                 })}
-              <Paper sx={{ p: 2 }}>
-                <Stack direction="row" spacing={2} justifyContent={"end"}>
-                  <SubmitButton text="Update items" loadingText="Loading..." />
-                </Stack>
-              </Paper>
+
+              <Stack
+                direction="row"
+                spacing={2}
+                justifyContent={"space-between"}
+              >
+                {handleClose && (
+                  <Button onClick={handleClose} variant="outlined">
+                    Cancel
+                  </Button>
+                )}
+                <SubmitButton
+                  variant="contained"
+                  text="Update items"
+                  loadingText="Loading..."
+                />
+              </Stack>
               <input
                 type="hidden"
                 name="items"

package/src/components/logistics/vendor/AddVendorForm.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import React, { useState, useEffect, use } from "react";
-import Paper from "@mui/material/Paper";
+import React, { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
-import { StrapiErrors } from "../../StrapiErrors";
+import { useSnackbar } from "../../../context/common/SnackbarContext";
 import { createVendorAction } from "../../../data/actions/logistics/vendor/createVendorAction";
 import Grid from "@mui/material/Grid";
 import { BusinessCredentialsFields } from "../../../components/e-commerce/customer/BusinessCredentials";
@@ -17,8 +16,8 @@ import { AddressFields } from "../../../components/common/Address";
 import { ProductName } from "../../../types/e-commerce/product/types";
 import ProductSelector from "../../../components/e-commerce/products/ProductSelector";
 import { ContactsFields } from "../../../components/common/Contacts";
-import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
+import { SxProps } from "@mui/system";
 import {
   ContactsFieldsProps,
   ContactType,
@@ -30,48 +29,70 @@ const INITIAL_STATE = {
   strapiErrors: null,
   data: null,
   message: null,
+  severity: null,
 };
 
+interface AddVendorFormProps {
+  productNamesArr: ProductName[];
+  revalidateCallback?: () => void;
+  handleClose?: () => void;
+  sx?: SxProps;
+}
+
 export function AddVendorForm({
   productNamesArr,
   revalidateCallback,
-}: {
-  productNamesArr: ProductName[];
-  revalidateCallback?: () => void;
-}) {
+  handleClose,
+  sx,
+}: AddVendorFormProps) {
   const [formState, formAction] = useFormState(
     createVendorAction,
     INITIAL_STATE
   );
-
+  const { handleAddMessage } = useSnackbar();
   const [newContacts, setNewContacts] = useState<ContactsFieldsProps[]>([]);
 
   const handleDeleteContact = (index: number) => {
-    console.log("delete", index);
     const newContactsArr = newContacts.filter((_, i) => i !== index);
-
     setNewContacts(newContactsArr);
   };
 
   useEffect(() => {
-    if (formState?.data && revalidateCallback) {
-      revalidateCallback();
+    if (formState?.message) {
+      handleAddMessage({
+        message: formState.message,
+        severity: formState.severity || "error",
+      });
+
+      if (formState.severity === "success") {
+        revalidateCallback && revalidateCallback();
+        handleClose && handleClose();
+      }
     }
-  }, [formState.data]);
+  }, [formState?.message]);
+
+  useEffect(() => {
+    if (formState?.strapiErrors) {
+      handleAddMessage({
+        message: formState.strapiErrors.message || "Error creating vendor",
+        severity: "error",
+      });
+    }
+  }, [formState?.strapiErrors]);
 
   return (
-    <Box
-      /* sx={[
-            // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
-            ...(Array.isArray(sx) ? sx : [sx]),
-          ]} */
-      component={Paper}
-      sx={{ p: 2 }}
-    >
+    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
       <form action={formAction}>
         <Grid container spacing={2}>
           <Grid item xs={12}>
-            <Typography variant="h5">Add Vendor</Typography>
+            <Stack spacing={2}>
+              <Typography variant="h3" component="h1">
+                Add Vendor
+              </Typography>
+              <Typography variant="body1">
+                Create a new vendor for your business
+              </Typography>
+            </Stack>
           </Grid>
           <Grid item xs={12}>
             <ExplanatoryFoldOut
@@ -176,24 +197,24 @@ export function AddVendorForm({
                 </Button>
               </Grid>
             </Grid>
-          </Grid>
+          </Grid>{" "}
           <Grid item xs={12}>
             <Stack
-              direction="row-reverse"
+              direction="row"
               spacing={2}
-              alignItems={"center"}
-              sx={{
-                py: 1,
-              }}
+              justifyContent="flex-end"
+              sx={{ mt: 2 }}
             >
-              <SubmitButton text="create new vendor" loadingText="loading" />
-              {formState?.strapiErrors && (
-                <StrapiErrors error={formState?.strapiErrors} />
-              )}
-
-              {formState?.message && (
-                <Alert severity="error">{formState?.message}</Alert>
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Cancel
+                </Button>
               )}
+              <SubmitButton
+                text="Create Vendor"
+                loadingText="Creating..."
+                variant="contained"
+              />
             </Stack>
           </Grid>
         </Grid>

package/src/components/logistics/vendor/EditVendorForm.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import React, { useState } from "react";
+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 Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import { SubmitButton } from "../../SubmitButton";
 import { useFormState } from "react-dom";
-import { StrapiErrors } from "../../StrapiErrors";
+import { useSnackbar } from "../../../context/common/SnackbarContext";
 import { updateVendorAction } from "../../../data/actions/logistics/vendor/updateVendorAction";
 import Grid from "@mui/material/Grid";
 import { Vendor } from "../../../types/logistics/Vendor";
@@ -34,19 +34,24 @@ const INITIAL_STATE = {
   strapiErrors: null,
   data: null,
   message: null,
+  severity: null as "success" | "error" | "info" | "warning" | null,
 };
 
+interface EditVendorFormProps {
+  data: Vendor;
+  productNamesArr: ProductName[];
+  revalidateCallback?: () => void;
+  handleClose?: () => void;
+  sx?: SxProps;
+}
+
 export function EditVendorForm({
   data,
   productNamesArr,
   revalidateCallback,
+  handleClose,
   sx,
-}: {
-  data: Vendor;
-  productNamesArr: ProductName[];
-  revalidateCallback?: () => void;
-  sx?: SxProps;
-}) {
+}: EditVendorFormProps) {
   const {
     id,
     website_url,
@@ -64,6 +69,30 @@ export function EditVendorForm({
     updateVendorAction,
     INITIAL_STATE
   );
+  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 updating vendor",
+        severity: "error",
+      });
+    }
+  }, [formState?.strapiErrors]);
 
   const initialProducts = products?.data || [];
 
@@ -93,14 +122,7 @@ export function EditVendorForm({
   const [newContacts, setNewContacts] = useState<ContactsFieldsProps[]>([]);
 
   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}>
         {id && <input id="id" type="hidden" name="id" value={id} />}
         <Grid container spacing={2}>
@@ -172,11 +194,9 @@ export function EditVendorForm({
               currentValue={initialProducts.map((prod) => prod.id)}
             />
           </Grid>
-
           <Grid item xs={12} sx={{ mt: 1 }}>
             <Typography variant="h6">Contacts</Typography>
           </Grid>
-
           {oldContacts?.map((contact, index) => {
             if (contact.data?.id) {
               if (open.includes(contact.data?.id)) {
@@ -219,7 +239,6 @@ export function EditVendorForm({
             }
             return null;
           })}
-
           {newContacts.map((contact, index) => {
             return (
               <Grid item xs={12} md={6} lg={4} key={contact.data?.uuid}>
@@ -245,7 +264,6 @@ export function EditVendorForm({
               </Grid>
             );
           })}
-
           <Grid
             item
             xs={12}
@@ -285,25 +303,20 @@ export function EditVendorForm({
             ) : (
               <Typography>No notes to display</Typography>
             )}
-          </Grid>
-
+          </Grid>{" "}
           <Grid item xs={12}>
             <Stack
-              direction="row-reverse"
+              direction="row"
               spacing={2}
-              alignItems={"center"}
-              sx={{
-                py: 1,
-              }}
+              justifyContent="flex-end"
+              sx={{ mt: 2 }}
             >
-              <SubmitButton text="update vendor" loadingText="loading" />
-              {formState?.strapiErrors && (
-                <StrapiErrors error={formState?.strapiErrors} />
-              )}
-
-              {formState?.message && (
-                <Alert severity="error">{formState?.message}</Alert>
+              {handleClose && (
+                <Button onClick={handleClose} variant="outlined">
+                  Cancel
+                </Button>
               )}
+              <SubmitButton text="Update Vendor" loadingText="Updating..." />
             </Stack>
           </Grid>
         </Grid>

package/src/data/actions/logistics/vendor/createVendorAction.tsx

@@ -5,44 +5,60 @@ import { flattenAttributes } from "../../../../lib/utils";
 import { parseFormData } from "../../../../lib/parseFormData";
 
 export async function createVendorAction(prevState: any, formData: FormData) {
-  const rawFormData = Object.fromEntries(formData);
+  try {
+    const parsedFormData = parseFormData(formData);
 
-  const parsedFormData = parseFormData(formData);
+    if (parsedFormData.data.products) {
+      parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
+    }
 
-  if (parsedFormData.data.products) {
-    parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
-  }
+    const responseData = await mutateData(
+      "POST",
+      `/api/vendor-profiles`,
+      parsedFormData
+    );
+
+    if (!responseData) {
+      return {
+        ...prevState,
+        strapiErrors: null,
+        zodErrors: null,
+        message:
+          "Something went wrong while creating the vendor. Please try again.",
+        severity: "error" as const,
+      };
+    }
 
-  const responseData = await mutateData(
-    "POST",
-    `/api/vendor-profiles`,
-    parsedFormData
-  );
+    if (responseData.error) {
+      return {
+        ...prevState,
+        strapiErrors: responseData.error,
+        zodErrors: null,
+        message:
+          "Failed to create vendor. Please check the form and try again.",
+        severity: "error" as const,
+      };
+    }
 
-  console.dir(responseData, { depth: null });
+    const flattenedData = flattenAttributes(responseData);
 
-  if (!responseData) {
     return {
       ...prevState,
+      data: flattenedData,
       strapiErrors: null,
-      message: "Ops! Something went wrong. Please try again.",
+      zodErrors: null,
+      message: "Vendor created successfully!",
+      severity: "success" as const,
     };
-  }
-
-  if (responseData.error) {
+  } catch (error) {
+    console.error("Error creating vendor:", error);
     return {
       ...prevState,
-      strapiErrors: responseData.error,
-      message: "Failed to Create Vendor.",
+      data: null,
+      strapiErrors: null,
+      zodErrors: null,
+      message: "An unexpected error occurred. Please try again later.",
+      severity: "error" as const,
     };
   }
-
-  const flattenedData = flattenAttributes(responseData);
-
-  return {
-    ...prevState,
-    message: "New Vendor Created",
-    data: flattenedData,
-    strapiErrors: null,
-  };
 }

package/src/data/actions/logistics/vendor/updateVendorAction.tsx

@@ -4,43 +4,75 @@ import { mutateData } from "../../../services/mutate-data";
 import { flattenAttributes } from "../../../../lib/utils";
 import { parseFormData } from "../../../../lib/parseFormData";
 
-export async function updateVendorAction(prevState: any, formData: FormData) {
-  const rawFormData = Object.fromEntries(formData);
+interface UpdateVendorState {
+  data: any | null;
+  message: string | null;
+  severity: "success" | "error" | "info" | "warning" | null;
+  strapiErrors: any | null;
+  zodErrors: any | null;
+}
 
-  const parsedFormData = parseFormData(formData);
+export async function updateVendorAction(
+  prevState: any,
+  formData: FormData
+): Promise<UpdateVendorState> {
+  try {
+    const rawFormData = Object.fromEntries(formData);
+    const parsedFormData = parseFormData(formData);
 
-  if (parsedFormData.data.products) {
-    parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
-  }
+    if (parsedFormData.data.products) {
+      parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
+    }
+
+    const responseData = await mutateData(
+      "PUT",
+      `/api/vendor-profiles/${rawFormData.id}`,
+      parsedFormData
+    );
+
+    if (!responseData) {
+      return {
+        ...prevState,
+        data: null,
+        strapiErrors: null,
+        zodErrors: null,
+        message:
+          "Something went wrong while updating the vendor. Please try again.",
+        severity: "error" as const,
+      };
+    }
+
+    if (responseData.error) {
+      return {
+        ...prevState,
+        data: null,
+        strapiErrors: responseData.error,
+        zodErrors: null,
+        message:
+          "Failed to update vendor. Please check the form and try again.",
+        severity: "error" as const,
+      };
+    }
 
-  const responseData = await mutateData(
-    "PUT",
-    `/api/vendor-profiles/${rawFormData.id}`,
-    parsedFormData
-  );
+    const flattenedData = flattenAttributes(responseData);
 
-  if (!responseData) {
     return {
       ...prevState,
+      data: flattenedData,
       strapiErrors: null,
-      message: "Ops! Something went wrong. Please try again.",
+      zodErrors: null,
+      message: "Vendor updated successfully!",
+      severity: "success" as const,
     };
-  }
-
-  if (responseData.error) {
+  } catch (error) {
+    console.error("Error updating vendor:", error);
     return {
       ...prevState,
-      strapiErrors: responseData.error,
-      message: "Failed to Update Vendor.",
+      data: null,
+      strapiErrors: null,
+      zodErrors: null,
+      message: "An unexpected error occurred. Please try again later.",
+      severity: "error" as const,
     };
   }
-
-  const flattenedData = flattenAttributes(responseData);
-
-  return {
-    ...prevState,
-    message: "Vendor Updated",
-    data: flattenedData,
-    strapiErrors: null,
-  };
 }