792 lines
25 KiB
JavaScript
792 lines
25 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from "react";
|
|
import axios from "axios";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Grid,
|
|
Paper,
|
|
Avatar,
|
|
IconButton,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
Autocomplete,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import { format } from "date-fns";
|
|
import { isAutheticated } from "../../auth";
|
|
import CancelIcon from "@mui/icons-material/Cancel"; // Add this import
|
|
import { City, State } from "country-state-city";
|
|
import { Modal, Button } from "react-bootstrap";
|
|
import swal from "sweetalert";
|
|
const SingleRetailDistributor = () => {
|
|
const { id } = useParams();
|
|
const [retailerDetails, setRetailerDetails] = useState(null);
|
|
const [openPopup, setOpenPopup] = useState(false);
|
|
const [selectedImage, setSelectedImage] = useState("");
|
|
const token = isAutheticated();
|
|
const navigate = useNavigate();
|
|
|
|
const [userAllAddress, setUserAllAddress] = useState([]);
|
|
const [tradeName, setTradeName] = useState(null);
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [stateOptions, setStateOptions] = useState([]);
|
|
const [cityOptions, setCityOptions] = useState([]);
|
|
const [selectedState, setSelectedState] = useState(null);
|
|
const [selectedCity, setSelectedCity] = useState(null);
|
|
const [currentAddress, setCurrentAddress] = useState({
|
|
Name: "",
|
|
tradeName: "",
|
|
phoneNumber: "",
|
|
street: "",
|
|
district: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "India",
|
|
isDefault: false,
|
|
});
|
|
|
|
// Fetch states when the component mounts
|
|
useEffect(() => {
|
|
const fetchStates = () => {
|
|
const states = State.getStatesOfCountry("IN").map((state) => ({
|
|
label: state.name,
|
|
value: state.isoCode,
|
|
}));
|
|
setStateOptions(states);
|
|
};
|
|
fetchStates();
|
|
}, []);
|
|
|
|
// Fetch cities when a state is selected
|
|
useEffect(() => {
|
|
const fetchCities = () => {
|
|
if (selectedState) {
|
|
const cities = City.getCitiesOfState("IN", selectedState.value).map(
|
|
(city) => ({
|
|
label: city.name,
|
|
value: city.name,
|
|
})
|
|
);
|
|
setCityOptions(cities);
|
|
} else {
|
|
setCityOptions([]); // Clear cities if no state is selected
|
|
}
|
|
};
|
|
fetchCities();
|
|
}, [selectedState]);
|
|
|
|
// Open modal for add or edit mode
|
|
const handleOpenModal = (address = null) => {
|
|
setIsEditMode(!!address); // Set edit mode if address is provided
|
|
const initialAddress = address || {
|
|
Name: "",
|
|
tradeName: tradeName,
|
|
phoneNumber: "",
|
|
street: "",
|
|
district: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "India",
|
|
isDefault: false,
|
|
};
|
|
setCurrentAddress(initialAddress);
|
|
|
|
// Fetch city options based on the state from the backend
|
|
if (address) {
|
|
const state =
|
|
stateOptions.find((option) => option.label === address.state) || null;
|
|
|
|
// Set selected state from backend address
|
|
setSelectedState(state);
|
|
|
|
// Fetch cities if state is found
|
|
if (state) {
|
|
const cities = City.getCitiesOfState("IN", state.value).map((city) => ({
|
|
label: city.name,
|
|
value: city.name,
|
|
}));
|
|
setCityOptions(cities);
|
|
|
|
// Set selected city if it exists in the fetched city options
|
|
const city =
|
|
cities.find((option) => option.label === address.city) || null;
|
|
setSelectedCity(city); // Set the selected city
|
|
}
|
|
} else {
|
|
setSelectedState(null);
|
|
setSelectedCity(null);
|
|
setCityOptions([]); // Clear city options if no address is provided
|
|
}
|
|
|
|
setShowModal(true);
|
|
};
|
|
|
|
// Close modal without saving changes
|
|
const handleCloseModal = () => {
|
|
setShowModal(false);
|
|
// Reset selections to previous state when modal is closed
|
|
setSelectedState(null); // Reset state selection
|
|
setSelectedCity(null); // Reset city selection
|
|
setCurrentAddress({
|
|
Name: "",
|
|
tradeName: "",
|
|
phoneNumber: "",
|
|
street: "",
|
|
district: "",
|
|
city: "",
|
|
state: "",
|
|
postalCode: "",
|
|
country: "India",
|
|
isDefault: false,
|
|
});
|
|
};
|
|
|
|
// Save address logic for adding or updating
|
|
const handleSaveAddress = async () => {
|
|
try {
|
|
const updatedAddress = {
|
|
...currentAddress,
|
|
tradeName: tradeName,
|
|
};
|
|
const apiUrl = isEditMode
|
|
? `/api/rd/shipping/address/update/${currentAddress._id}`
|
|
: `/api/rd/shipping/address/admin/new/${id}`;
|
|
|
|
// console.log(currentAddress);
|
|
const method = isEditMode ? "patch" : "post";
|
|
|
|
// Prepare the headers with the token
|
|
const headers = {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
};
|
|
|
|
// Make the API call with the headers
|
|
await axios[method](apiUrl, updatedAddress, { headers });
|
|
|
|
swal(
|
|
"Success!",
|
|
`Address ${isEditMode ? "updated" : "added"} successfully!`,
|
|
"success"
|
|
);
|
|
|
|
handleCloseModal();
|
|
getUserAddress();
|
|
} catch (error) {
|
|
console.error("Error saving address:", error);
|
|
swal("Error!", "There was an error saving the address.", "error");
|
|
}
|
|
};
|
|
|
|
const handleStateChange = (event, newValue) => {
|
|
setSelectedState(newValue);
|
|
setCurrentAddress((prev) => ({
|
|
...prev,
|
|
state: newValue ? newValue.label : "",
|
|
city: "", // Clear city when state changes
|
|
}));
|
|
setSelectedCity(null); // Reset city selection
|
|
setCityOptions([]); // Clear city options on state change
|
|
};
|
|
|
|
const handleCityChange = (event, newValue) => {
|
|
setSelectedCity(newValue);
|
|
setCurrentAddress((prev) => ({
|
|
...prev,
|
|
city: newValue ? newValue.label : "",
|
|
}));
|
|
};
|
|
// Fetch Shipping address of the individual user
|
|
const getUserAddress = useCallback(async () => {
|
|
try {
|
|
const response = await axios.get(
|
|
`/api/rd/shipping/address/user/address/${id}`,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
}
|
|
);
|
|
// console.log(response.data);
|
|
setUserAllAddress(response.data?.UserShippingAddress || []);
|
|
} catch (error) {
|
|
swal({
|
|
title: "Warning",
|
|
text: error.message,
|
|
icon: "error",
|
|
button: "Close",
|
|
dangerMode: true,
|
|
});
|
|
}
|
|
}, [id, token]);
|
|
const handledeleteAddress = async (address_id) => {
|
|
try {
|
|
const response = await axios.delete(
|
|
`/api/rd/shipping/address/delete/${address_id}`, // Address ID in the URL
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${token}`, // Authorization header
|
|
},
|
|
data: { userId: id }, // User ID in the request body
|
|
}
|
|
);
|
|
|
|
swal({
|
|
title: "Success",
|
|
text: response.data.message,
|
|
icon: "success",
|
|
button: "Close",
|
|
});
|
|
|
|
getUserAddress();
|
|
} catch (error) {
|
|
// Handle errors here, ensuring that you access the error message correctly
|
|
swal({
|
|
title: "Warning",
|
|
text: error.response?.data?.message || error.message, // Improved error handling
|
|
icon: "error",
|
|
button: "Close",
|
|
dangerMode: true,
|
|
});
|
|
}
|
|
};
|
|
const getUserDetails = useCallback(async () => {
|
|
try {
|
|
// Commented out the API call and using dummy data
|
|
const response = await axios.get(`/api/getRD/${id}`, {
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
});
|
|
setRetailerDetails(response.data);
|
|
// console.log('Retailer Details: ', response.data);
|
|
setTradeName(response.data?.kyc?.trade_name || "");
|
|
} catch (error) {
|
|
console.error("Error fetching data: ", error);
|
|
}
|
|
}, [id, token]);
|
|
|
|
// Fetch retailer details on mount
|
|
useEffect(() => {
|
|
getUserDetails();
|
|
getUserAddress();
|
|
}, [id, getUserDetails, getUserAddress]);
|
|
|
|
const handleOpenPopup = (imageUrl) => {
|
|
setSelectedImage(imageUrl);
|
|
setOpenPopup(true);
|
|
};
|
|
|
|
const handleClosePopup = () => {
|
|
setOpenPopup(false);
|
|
setSelectedImage("");
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
navigate("/retail-distributor");
|
|
};
|
|
|
|
if (!retailerDetails) {
|
|
return <Typography>Loading...</Typography>;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ p: 3 }}>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
mb: 3,
|
|
}}
|
|
>
|
|
<Typography variant="h4">Retailer Details</Typography>
|
|
<IconButton sx={{ color: "red" }} onClick={handleCancel}>
|
|
Cancel <CancelIcon />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Typography variant="h5" gutterBottom>
|
|
Retailer Details
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Unique Id:</strong> {retailerDetails.uniqueId}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Trade Name:</strong> {retailerDetails.kyc.trade_name}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Name:</strong> {retailerDetails.name}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mobile Number:</strong> {retailerDetails.mobile_number}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Email:</strong> {retailerDetails.email}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Address:</strong> {retailerDetails.kyc.address}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Town/City:</strong> {retailerDetails.kyc.city}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>District:</strong> {retailerDetails.kyc.district}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>State:</strong> {retailerDetails.kyc.state}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Pincode:</strong> {retailerDetails.kyc.pincode}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Mapped Principal Distributor:</strong>{" "}
|
|
{retailerDetails?.principal_distributer?.name || "Not Mapped"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Documents
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>PAN Number:</strong> {retailerDetails.kyc.pan_number}
|
|
</Typography>
|
|
{retailerDetails?.kyc?.pan_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.pan_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(retailerDetails?.kyc?.pan_img?.url)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
<Typography>
|
|
<strong>Aadhar Number:</strong>{" "}
|
|
{retailerDetails.kyc.aadhar_number}
|
|
</Typography>
|
|
{retailerDetails?.kyc?.aadhar_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.aadhar_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(retailerDetails?.kyc?.aadhar_img?.url)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
<Typography>
|
|
<strong>GST Number:</strong> {retailerDetails.kyc.gst_number}
|
|
</Typography>
|
|
{retailerDetails?.kyc?.gst_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.gst_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(retailerDetails?.kyc?.gst_img?.url)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Pesticide License:</strong>
|
|
</Typography>
|
|
{retailerDetails?.kyc?.pesticide_license_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.pesticide_license_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(
|
|
retailerDetails?.kyc?.pesticide_license_img?.url
|
|
)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
<Typography>
|
|
<strong>Fertilizer License (optional):</strong>
|
|
</Typography>
|
|
{retailerDetails?.kyc?.fertilizer_license_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.fertilizer_license_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(
|
|
retailerDetails?.kyc?.fertilizer_license_img?.url
|
|
)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
<Typography>
|
|
<strong>Selfie of Entrance Board:</strong>
|
|
</Typography>
|
|
{retailerDetails?.kyc?.selfie_entrance_img ? (
|
|
<Avatar
|
|
variant="square"
|
|
src={retailerDetails?.kyc?.selfie_entrance_img?.url}
|
|
sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
|
|
onClick={() =>
|
|
handleOpenPopup(
|
|
retailerDetails?.kyc?.selfie_entrance_img?.url
|
|
)
|
|
}
|
|
/>
|
|
) : (
|
|
<Typography>Img not available</Typography>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Sales Coordinators/Territory Manager Details
|
|
</Typography>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography>
|
|
<strong>Designation:</strong>{" "}
|
|
{retailerDetails?.userType || "Not Available"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>Name:</strong>{" "}
|
|
{retailerDetails?.addedBy?.name || "Not Available"}
|
|
</Typography>
|
|
<Typography>
|
|
<strong>ID:</strong>{" "}
|
|
{retailerDetails?.addedBy?.uniqueId || "Not Available"}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
{/* Address of retail distributor */}
|
|
<Paper sx={{ p: 2, mb: 3 }}>
|
|
<h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
|
|
• Addresses{" "}
|
|
</h5>
|
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 style={{ fontWeight: "bold" }}>
|
|
• Total Addresses: {userAllAddress?.length || 0}{" "}
|
|
</h5>
|
|
<Button
|
|
className="btn btn-primary"
|
|
onClick={() => handleOpenModal()} // Open modal for adding
|
|
>
|
|
Add Address
|
|
</Button>
|
|
</div>
|
|
{userAllAddress?.length > 0 && (
|
|
<div className="table-responsive table-shoot mt-3">
|
|
<table
|
|
className="table table-centered table-nowrap"
|
|
style={{ border: "1px solid" }}
|
|
>
|
|
<thead
|
|
className="thead-info"
|
|
style={{ background: "rgb(140, 213, 213)" }}
|
|
>
|
|
<tr>
|
|
<th style={{ width: "5%" }}>SL No.</th>
|
|
<th style={{ width: "20%" }}>Trade Name</th>
|
|
<th style={{ width: "15%" }}>RD Name</th>
|
|
<th style={{ width: "40%" }}>Address</th>
|
|
<th style={{ width: "7%" }}>Default</th>
|
|
<th style={{ width: "13%" }}>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{userAllAddress?.map((address, i) => (
|
|
<tr key={address._id || i}>
|
|
<td className="text-start">
|
|
<strong>{i + 1}</strong>
|
|
</td>
|
|
<td className="text-start">
|
|
<strong>
|
|
{address?.tradeName
|
|
? `${address.tradeName}`
|
|
: "No Trade Name"}
|
|
</strong>
|
|
</td>
|
|
<td className="text-start">
|
|
<strong>
|
|
{address?.Name ? `${address.Name}` : "No RD Name"}
|
|
</strong>
|
|
</td>
|
|
<td className="text-start">
|
|
<strong>
|
|
{address?.street}, {address?.city}, {address?.district}, {address?.state},{" "}
|
|
{address?.country}, {address?.postalCode}
|
|
</strong>
|
|
</td>
|
|
<td className="text-start">
|
|
<strong>{address.isDefault ? "Yes" : "No"}</strong>
|
|
</td>
|
|
<td className="text-start">
|
|
<Button
|
|
className="btn btn-warning btn-sm me-2"
|
|
onClick={() => handleOpenModal(address)} // Open modal for editing
|
|
>
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
className="btn btn-danger btn-sm"
|
|
onClick={() => handledeleteAddress(address._id)}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
{/* Modal for Adding/Editing Address */}
|
|
<Modal
|
|
show={showModal}
|
|
onHide={handleCloseModal}
|
|
dialogClassName="modal-lg"
|
|
>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>
|
|
{isEditMode ? "Edit Shipping Address" : "Add Shipping Address"}
|
|
</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<div className="container">
|
|
<div className="row">
|
|
{/* Name and Trade Name */}
|
|
<div className="col-md-6">
|
|
<label>Name</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.Name || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
Name: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter name"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label>Trade Name</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.tradeName || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
tradeName: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter trade name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
{/* Phone Number and Street */}
|
|
<div className="col-md-6">
|
|
<label>Phone Number</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.phoneNumber || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
phoneNumber: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter phone number"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label>Street</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.street || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
street: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter street"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
{/* State and City */}
|
|
<div className="col-md-6">
|
|
<Autocomplete
|
|
options={stateOptions}
|
|
value={selectedState}
|
|
onChange={handleStateChange}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Select State" />
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<Autocomplete
|
|
options={cityOptions}
|
|
value={selectedCity}
|
|
onChange={handleCityChange}
|
|
isOptionEqualToValue={(option, value) =>
|
|
option.value === value.value
|
|
}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Select City" />
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
{/* Postal Code and Country */}
|
|
<div className="col-md-6">
|
|
<label>Postal Code</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.postalCode || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
postalCode: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter postal code"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label>District</label>
|
|
<input
|
|
type="text"
|
|
value={currentAddress?.district || ""}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
district: e.target.value,
|
|
})
|
|
}
|
|
className="form-control mb-3"
|
|
placeholder="Enter District"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<label>Country</label>
|
|
<input
|
|
type="text"
|
|
disabled
|
|
value={currentAddress?.country || ""}
|
|
className="form-control mb-3"
|
|
/>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<label>Is Default Address</label>
|
|
<select
|
|
className="form-control mb-3"
|
|
value={currentAddress.isDefault ? "Yes" : "No"}
|
|
onChange={(e) =>
|
|
setCurrentAddress({
|
|
...currentAddress,
|
|
isDefault: e.target.value === "Yes", // Convert Yes/No to true/false
|
|
})
|
|
}
|
|
>
|
|
<option value="Yes">Yes</option>
|
|
<option value="No">No</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="primary" onClick={handleSaveAddress}>
|
|
Save
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
</Paper>
|
|
<Dialog
|
|
open={openPopup}
|
|
onClose={handleClosePopup}
|
|
maxWidth="md"
|
|
fullWidth
|
|
>
|
|
<DialogTitle>
|
|
<IconButton
|
|
sx={{ position: "absolute", right: 16, top: 16, color: "red" }}
|
|
onClick={handleClosePopup}
|
|
>
|
|
<CancelIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<DialogContent
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
p: 0,
|
|
overflow: "auto",
|
|
maxHeight: "80vh",
|
|
maxWidth: "80vw",
|
|
}}
|
|
>
|
|
<img
|
|
src={selectedImage}
|
|
alt="Large Preview"
|
|
style={{
|
|
maxWidth: "100%",
|
|
maxHeight: "100%",
|
|
objectFit: "contain",
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SingleRetailDistributor;
|