396 lines
13 KiB
JavaScript
396 lines
13 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
TextField,
|
|
Button,
|
|
Card,
|
|
FormControl,
|
|
Grid,
|
|
FormHelperText,
|
|
OutlinedInput,
|
|
Box,
|
|
} from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import toast from "react-hot-toast";
|
|
import axios from "axios"; // Import axios for making HTTP requests
|
|
import { isAutheticated } from "src/auth";
|
|
const styles = {
|
|
formStyle: {
|
|
fontWeight: "700",
|
|
fontSize: "12px",
|
|
fontFamily: "inter",
|
|
marginBottom: "3px",
|
|
marginLeft: "0",
|
|
},
|
|
};
|
|
const AddCustomer = () => {
|
|
const navigate = useNavigate();
|
|
const [user, setUser] = useState({
|
|
name: "",
|
|
email: "",
|
|
password: "", // No need to initialize password here
|
|
});
|
|
const [id, setUserId] = useState("");
|
|
const token = isAutheticated();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState({
|
|
first_Name: "",
|
|
last_Name: "",
|
|
phone_Number: Number,
|
|
street: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "",
|
|
});
|
|
|
|
// console.log(data);
|
|
const handleChange = (e) => {
|
|
setData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
|
};
|
|
|
|
const handerInputChanges = (e) => {
|
|
setUser({ ...user, [e.target.name]: e.target.value });
|
|
};
|
|
function handleAddressSubmit(e) {
|
|
e.preventDefault();
|
|
if (
|
|
data.first_Name === "" ||
|
|
data.last_Name === "" ||
|
|
data.phone_Number === null ||
|
|
data.street === "" ||
|
|
data.city === "" ||
|
|
data.state === "" ||
|
|
data.postalCode === "" ||
|
|
data.country === ""
|
|
) {
|
|
swal({
|
|
title: "Warning",
|
|
text: "Please fill All mendetory fields ",
|
|
icon: "warning",
|
|
button: "ok",
|
|
dangerMode: true,
|
|
});
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
axios
|
|
.post(
|
|
`/api/shipping/address/admin/new/${id}`,
|
|
{
|
|
...data,
|
|
},
|
|
|
|
{
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
)
|
|
.then((res) => {
|
|
setLoading(false);
|
|
// setSuccess((prev) => !prev);
|
|
navigate("/customers-details");
|
|
toast.success(res.data.message ? res.data.message : "Address Added!");
|
|
})
|
|
.catch((error) => {
|
|
setLoading(false);
|
|
toast.error(
|
|
error.response.data.message
|
|
? error.response.data.message
|
|
: "Something went wrong!"
|
|
);
|
|
});
|
|
}
|
|
|
|
// Generate password function
|
|
const generatePassword = (name, email) => {
|
|
const combinedStr = (name + email).toLowerCase(); // Convert to lowercase for consistency
|
|
const specialChars = "@#*"; // Define the set of special characters
|
|
const alphaChars = combinedStr.match(/[a-zA-Z]/g); // Filter out alphabetic characters
|
|
const filteredChars = combinedStr.match(/[^\W_]/g); // Filter out non-alphanumeric characters
|
|
let passwordChars = alphaChars.concat(filteredChars); // Combine alphabetic and filtered characters
|
|
|
|
// Insert a random special character at a random position in the password characters array
|
|
const specialChar = specialChars.charAt(
|
|
Math.floor(Math.random() * specialChars.length)
|
|
); // Pick a random special character
|
|
const randomIndex = Math.floor(Math.random() * (passwordChars.length + 1)); // Pick a random position to insert the special character
|
|
passwordChars.splice(randomIndex, 0, specialChar); // Insert the special character at the random position
|
|
|
|
passwordChars = passwordChars.sort(() => Math.random() - 0.5); // Shuffle the characters
|
|
const password = passwordChars.join("").slice(0, 8); // Take the first 8 characters
|
|
return password;
|
|
};
|
|
const handleFormSubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
if (!user.name || !user.email) {
|
|
throw new Error("Fill all fields!");
|
|
}
|
|
|
|
// Generate password based on name and email
|
|
const generatedPassword = generatePassword(user.name, user.email);
|
|
console.log(generatedPassword); // Use generatedPassword instead of generatePassword
|
|
setUser({ ...user, password: generatedPassword }); // Set generated password to user state
|
|
|
|
const response = await axios.post("/api/v1/user/register", {
|
|
...user, // Send user details
|
|
password: generatedPassword, // Send generated password to the backend
|
|
});
|
|
if (response.status === 201) {
|
|
toast.success("User Added Successful");
|
|
setUserId(response.data.userId);
|
|
}
|
|
} catch (error) {
|
|
console.log(error.response.data.message);
|
|
toast.error(error.response.data.message);
|
|
}
|
|
};
|
|
|
|
console.log(user);
|
|
console.log("this is the id ", id);
|
|
|
|
return (
|
|
<div>
|
|
<Card sx={{ padding: "1rem", marginBottom: "1rem" }}>
|
|
<form style={{ marginBottom: "2rem" }} onSubmit={handleFormSubmit}>
|
|
<TextField
|
|
id="name"
|
|
required
|
|
type="text"
|
|
sx={{ marginBottom: "2rem", width: "50%" }}
|
|
name="name"
|
|
value={user.name}
|
|
label="Name"
|
|
variant="outlined"
|
|
onChange={handerInputChanges}
|
|
/>
|
|
<br />
|
|
<TextField
|
|
id="email"
|
|
type="email"
|
|
sx={{ mb: "2rem", width: "50%" }}
|
|
required
|
|
name="email"
|
|
value={user.email}
|
|
label="Email"
|
|
variant="outlined"
|
|
onChange={handerInputChanges}
|
|
/>
|
|
<br />
|
|
|
|
<Button variant="contained" disabled={id?.length > 0} type="submit">
|
|
Add user
|
|
</Button>
|
|
<br />
|
|
</form>
|
|
|
|
<form onSubmit={handleAddressSubmit}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
FIRST NAME*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="First name"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="first_Name"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
LAST NAME*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Last name"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="last_Name"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth variant="outlined">
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
PHONE NUMBER*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Phone name"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="phone_Number"
|
|
required
|
|
type="number"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
STREET ADDRESS*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Street Address"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="street"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
COUNTRY*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Country"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="country"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth variant="outlined">
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
TOWN CITY*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Town City"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="city"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
STATE*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="State"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="state"
|
|
required
|
|
type="text"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={6}>
|
|
<FormControl variant="outlined" fullWidth>
|
|
<FormHelperText
|
|
id="outlined-weight-helper-text"
|
|
sx={styles.formStyle}
|
|
>
|
|
ZIP CODE*
|
|
</FormHelperText>
|
|
<OutlinedInput
|
|
size="small"
|
|
id="outlined-adornment-weight"
|
|
placeholder="Zip Code"
|
|
aria-describedby="outlined-weight-helper-text"
|
|
name="postalCode"
|
|
required
|
|
type="number"
|
|
onChange={(e) => handleChange(e)}
|
|
// value={accountDetails.firstname}
|
|
// onChange={handerInputChanges}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button
|
|
variant="contained"
|
|
disabled={id?.length == 0}
|
|
type="submit"
|
|
onClick={handleAddressSubmit}
|
|
>
|
|
Add address
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddCustomer;
|