347 lines
10 KiB
JavaScript
347 lines
10 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import axios from "axios";
|
|
import { Box, Typography, Grid, Paper } from "@mui/material";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import { isAutheticated } from "../../auth";
|
|
import Button from "@material-ui/core/Button";
|
|
import swal from "sweetalert";
|
|
import PDmodal from "./ModalPD.js";
|
|
import SCmodal from "./ModalSC.js";
|
|
import TMmodal from "./ModalTM.js";
|
|
|
|
const MapRD = () => {
|
|
const { id } = useParams();
|
|
const token = isAutheticated();
|
|
const navigate = useNavigate();
|
|
const [success, setSuccess] = useState(true);
|
|
const [data, setData] = useState(null);
|
|
const [openPDModal, setOpenPDModal] = useState(false);
|
|
const [openSCModal, setOpenSCModal] = useState(false);
|
|
const [openTMModal, setOpenTMModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await axios.get(`/api/getRD/${id}`, {
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
});
|
|
setData(response?.data);
|
|
} catch (error) {
|
|
console.error("Error fetching data: ", error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [id, token, success]);
|
|
|
|
const handleDelete = (designation) => {
|
|
swal({
|
|
title: "Are you sure?",
|
|
icon: "warning",
|
|
buttons: {
|
|
Yes: { text: "Yes", value: true },
|
|
Cancel: { text: "Cancel", value: "cancel" },
|
|
},
|
|
}).then((value) => {
|
|
if (value === true) {
|
|
let data = {};
|
|
if (designation === "TM") {
|
|
data.mappedTM = true;
|
|
} else if (designation === "SC") {
|
|
data.mappedSC = true;
|
|
} else {
|
|
data.principal_distributor = true;
|
|
}
|
|
|
|
axios
|
|
.patch(`/api/unmap/${id}`, data, {
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
swal({
|
|
title: "Deleted",
|
|
text: "Retail Distributor Unmapped successfully!",
|
|
icon: "success",
|
|
button: "Ok",
|
|
});
|
|
setSuccess((prev) => !prev);
|
|
})
|
|
.catch((err) => {
|
|
let msg = err?.response?.data?.message || "Something went wrong!";
|
|
swal({
|
|
title: "Warning",
|
|
text: msg,
|
|
icon: "error",
|
|
button: "Retry",
|
|
dangerMode: true,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleOpenPDModal = () => setOpenPDModal(true);
|
|
const handleClosePDModal = () => setOpenPDModal(false);
|
|
|
|
const handleOpenSCModal = () => setOpenSCModal(true);
|
|
const handleCloseSCModal = () => setOpenSCModal(false);
|
|
|
|
const handleOpenTMModal = () => setOpenTMModal(true);
|
|
const handleCloseTMModal = () => setOpenTMModal(false);
|
|
|
|
const refreshData = () => {
|
|
setSuccess((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ p: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
mb: 3,
|
|
}}
|
|
>
|
|
<Typography variant="h4">Retailer Details</Typography>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
style={{
|
|
fontWeight: "bold",
|
|
marginBottom: "1rem",
|
|
textTransform: "capitalize",
|
|
}}
|
|
onClick={() => {
|
|
navigate("/retail-distributor", { replace: true });
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</Box>
|
|
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Typography variant="h5" gutterBottom>
|
|
Retailer Details
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Trade Name:</strong> {data?.kyc.trade_name}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Name:</strong> {data?.name}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Address:</strong> {data?.kyc.address}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Town/City:</strong> {data?.kyc.city}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>District:</strong> {data?.kyc.district}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>State:</strong> {data?.kyc.state}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Pincode:</strong> {data?.kyc.pincode}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mobile Number:</strong> {data?.mobile_number}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Mapped Territory Manager:</strong>{" "}
|
|
{data?.mappedTM?.name || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mapped Principal Distributor:</strong>{" "}
|
|
{data?.principal_distributer?.name || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mapped Sales Coordinator:</strong>{" "}
|
|
{data?.mappedSC?.name || "Not Mapped"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
{/* Territory Managers */}
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h6" gutterBottom>
|
|
Territory Manager Details
|
|
</Typography>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="small" // Set button size to small
|
|
style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
|
|
onClick={handleOpenTMModal}
|
|
>
|
|
Map TM
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
size="small" // Set button size to small
|
|
style={{ backgroundColor: "red" }}
|
|
onClick={() => handleDelete("TM")}
|
|
>
|
|
Unmap TM
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Name:</strong> {data?.mappedTM?.name || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mobile Number:</strong>{" "}
|
|
{data?.mappedTM?.mobileNumber || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Email:</strong> {data?.mappedTM?.email || "Not Mapped"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
{/* Sales Coordinators */}
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h6" gutterBottom>
|
|
Sales Coordinator Details
|
|
</Typography>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="small" // Set button size to small
|
|
style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
|
|
onClick={handleOpenSCModal}
|
|
>
|
|
Map SC
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
size="small" // Set button size to small
|
|
style={{ backgroundColor: "red" }}
|
|
onClick={() => handleDelete("SC")}
|
|
>
|
|
Unmap SC
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Name:</strong> {data?.mappedSC?.name || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mobile Number:</strong>{" "}
|
|
{data?.mappedSC?.mobileNumber || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Email:</strong> {data?.mappedSC?.email || "Not Mapped"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
{/* Principal Distributor */}
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h6" gutterBottom>
|
|
Principal Distributor Details
|
|
</Typography>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="small"
|
|
style={{ backgroundColor: "blue", marginRight: "8px" }}
|
|
onClick={handleOpenPDModal}
|
|
>
|
|
Map PD
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
size="small"
|
|
style={{ backgroundColor: "red" }}
|
|
onClick={() => handleDelete("PD")}
|
|
>
|
|
Unmap PD
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Name:</strong>{" "}
|
|
{data?.principal_distributer?.name || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mobile Number:</strong>{" "}
|
|
{data?.principal_distributer?.phone || "Not Mapped"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Email:</strong>{" "}
|
|
{data?.principal_distributer?.email || "Not Mapped"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
|
|
<PDmodal
|
|
rdid={id}
|
|
openPDModal={openPDModal}
|
|
handleClosePDModal={handleClosePDModal}
|
|
refreshData={refreshData}
|
|
/>
|
|
<SCmodal
|
|
rdid={id}
|
|
openSCModal={openSCModal}
|
|
handleCloseSCModal={handleCloseSCModal}
|
|
refreshData={refreshData}
|
|
/>
|
|
<TMmodal
|
|
rdid={id}
|
|
openTMModal={openTMModal}
|
|
handleCloseTMModal={handleCloseTMModal}
|
|
refreshData={refreshData}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MapRD;
|