umwd-components 0.1.657 → 0.1.660

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,114 @@ 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 [formState, formAction] = useFormState(
     updateDispatcherProfileAction,
     INITIAL_STATE
   );
+  const { handleAddMessage } = useSnackbar();
+  const { refreshSession } = useSession();
+
+  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}>
+            <input type="hidden" name="id" value={id} />
+            <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/data/actions/e-commerce/opo/updateOpoAction.ts

@@ -4,7 +4,11 @@ import { mutateData } from "../../../services/mutate-data";
 import { flattenAttributes } from "../../../../lib/utils";
 import { parseFormData } from "../../../../lib/parseFormData";
 
-export async function updateOpoAction(prevState: any, formData: FormData) {
+export async function updateOpoAction(
+  id: number,
+  prevState: any,
+  formData: FormData
+) {
   const rawFormData = Object.fromEntries(formData);
 
   const parsedFormData = parseFormData(formData);
@@ -12,7 +16,7 @@ export async function updateOpoAction(prevState: any, formData: FormData) {
 
   const responseData = await mutateData(
     "PUT",
-    `/api/opos/${rawFormData.id}`,
+    `/api/opos/${id}`,
     parsedFormData
   );