import axios from "axios";
import React, { useState } from "react";
import baseUrl from "../../../../array/base/config";
import { toast } from "react-toastify";
import Calendar from "@sbmdkl/nepali-datepicker-reactjs";
import "@sbmdkl/nepali-datepicker-reactjs/dist/index.css";
const relationshipOptions = ["Spouse", "Daughter", "Son", "Brother", "Sister"];
/**
* A React component for adding a nominee.
* @param {Object} props - The component's props.
* @param {function} props.apicall - A function to make an API call.
* @param {function} props.setShowCurrent - A function to set the current view.
* @returns {JSX.Element} The rendered component.
*/
const AddNomineeForm = ({apicall, setShowCurrent }) => {
const [relationship, setRelationship] = useState();
const [firstName, setFirstName] = useState();
const [middleName, setMiddleName] = useState();
const [lastName, setLastName] = useState();
const [phone, setPhone] = useState();
const [birthdate, setBirthdate] = useState();
const [document_file, setDocument_file] = useState(null);
const [document_issue_date, setDocumentIssueDate] = useState("");
const [document_type, setDocumentType] = useState("");
const [document_number, setDocumentNumber] = useState("");
const [document_issue_date_bs, setDocument_issue_date_bs] = useState("");
const [document_expiry_date, setDocument_expiry_date] = useState("");
const [document_expiry_date_bs, setDocument_expiry_date_bs] = useState("");
const [document_issue_place, setDocument_issue_place] = useState("");
const handleRelationship = (e) => {
setRelationship(e.target.value);
};
const handleFirstNameChange = (e) => {
setFirstName(e.target.value);
};
const handleMiddleNameChange = (e) => {
setMiddleName(e.target.value);
};
const handleLastNameChange = (e) => {
setLastName(e.target.value);
};
const handlePhoneNumberChange = (e) => {
setPhone(e.target.value);
};
const handleBirthdateChange = (e) => {
setBirthdate(e.target.value);
};
const handleFileChange = (e) => {
const document = e.target.files[0];
setDocument_file(document);
};
const handleDocumentTypeChange = (e) => {
const type = e.target.value;
setDocumentType(type);
};
const handleDocumentNumberChange = (e) => {
const number = e.target.value;
setDocumentNumber(number);
};
const handleIssueDateChangeBS = ({ bsDate }) => {
//this receives a date obj with bsDate and adDate by default
//direct access by {bsDate}
setDocument_issue_date_bs(bsDate);
};
const handleIssueDateChange = (e) => {
const date = e.target.value;
setDocumentIssueDate(date);
};
const handleDocumentExpiryChange = ({ bsDate, adDate }) => {
setDocument_expiry_date_bs(bsDate);
setDocument_expiry_date(adDate);
};
const handleIssuePlaceChange = (e) => {
const place = e.target.value;
setDocument_issue_place(place);
};
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData();
relationship && formData.append("relationship", relationship);
firstName && formData.append("first_name", firstName);
middleName && formData.append("middle_name", middleName);
lastName && formData.append("last_name", lastName);
phone && formData.append("phone_number", phone);
birthdate && formData.append("birth_date", birthdate);
document_file && formData.append("document_file", document_file);
document_type && formData.append("document_type", document_type);
document_number && formData.append("document_number", document_number);
document_file && formData.append("document_file", document_file);
document_issue_date &&
formData.append("document_issue_date", document_issue_date);
document_issue_date_bs &&
formData.append("document_issue_date_bs", document_issue_date_bs);
document_expiry_date &&
formData.append("document_expiry_date", document_expiry_date);
document_expiry_date_bs &&
formData.append("document_expiry_date_bs", document_expiry_date_bs);
document_issue_place &&
formData.append("document_issue_place", document_issue_place);
const detail = localStorage.getItem("token");
axios
.post(`${baseUrl}/api/shareholdernominee/`, formData, {
headers: {
Authorization: `Token ${detail}`,
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
toast.success("Nominee added successfully!", {
position: "top-right",
autoClose: 5001,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
apicall();
setShowCurrent('ListView');
})
.catch((error) => {
console.error("Edit form error", error);
toast.error("Nominee could not be added. Please try again.", {
position: "top-right",
autoClose: 5001,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
// handle error
});
};
return (
<div className="sharetransfer_card">
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="relationship">Relationship:</label>
<select
id="relationship"
// defaultValue={user?.salutation}
onChange={handleRelationship}
required
>
<option value="">Select relationship</option>
{relationshipOptions.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="firstName">First Name:</label>
<input
type="text"
id="firstName"
onChange={handleFirstNameChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="middleName">Middle Name:</label>
<input
type="text"
id="middleName"
onChange={handleMiddleNameChange}
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="lastName">Last Name:</label>
<input
type="text"
id="lastName"
onChange={handleLastNameChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="issuePlace">Issue Place:</label>
<input
type="text"
id="issuePlace"
value={document_issue_place}
onChange={handleIssuePlaceChange}
/>
</div>
</div>
{document_type == "PASSPORT" || document_type == "DRIVING_LICENSE" ? (
<>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label>
Document Issue Date:
<input
type="date"
name="document_issue_date"
value={document_issue_date}
onChange={handleIssueDateChange}
required
/>
</label>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label>
Document Expiry Date:
<input
type="date"
name="document_issue_date"
value={document_issue_date}
onChange={handleIssueDateChange}
required
/>
</label>
</div>
</div>
</>
) : (
<>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="issueDate">Issue Date (BS):</label>
<Calendar
id="issueDateBS"
value={document_issue_date_bs}
onChange={handleIssueDateChangeBS}
dateFormat="YYYY-MM-DD"
language="en"
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="expiryDate">
Document Expiry Date(B.S.):
</label>
<Calendar
id="expiryDateBS"
value={document_expiry_date}
onChange={handleDocumentExpiryChange}
dateFormat="YYYY-MM-DD"
language="en"
/>
</div>
</div>
</>
)}
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="">Phone number: </label>
<input
type="number"
placeholder=""
onChange={handlePhoneNumberChange}
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label htmlFor="birthdate">Birth date:</label>
<input
type="date"
id="birthdate"
name="birthdate"
onChange={handleBirthdateChange}
required
/>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label>
Document Type:
<select
name="document_type"
value={document_type}
onChange={handleDocumentTypeChange}
>
<option value="CITIZENSHIP_CERTIFICATE">
Citizenship Certificate
</option>
<option value="PASSPORT">Passport</option>
<option value="DRIVING_LICENSE">Driving License</option>
<option value="VOTER_ID">Voter ID</option>
<option value="NATIONAL_ID">National ID</option>
<option value="OTHER">Other</option>
</select>
</label>
</div>
</div>
<div className="col-lg-4">
<div className="sharetransfer_form_group">
<label>
Document Number:
<input
type="text"
name="document_number"
value={document_number}
onChange={handleDocumentNumberChange}
required
maxLength={50}
/>
</label>
</div>
</div>
<div className="col-lg-4">
<label style={{ marginRight: "10px" }} htmlFor="file">
Document File:
</label>
{document_file && (
<input type="file" id="file" onChange={handleFileChange} />
)}
<div className="sharetransfer_form_group_img">
{document_file ? (
document_file?.name?.split(".").pop() === "pdf" ? (
<img src="/pdf_logo.jpg" alt="PDF icon" />
) : (
<img
src={URL.createObjectURL(document_file)}
alt="Selected file"
/>
)
) : (
<input type="file" id="file" onChange={handleFileChange} />
)}
</div>
</div>
</div>
<div className="row">
<div className="form-footer d-md-flex justify-end align-items-center">
<button
onClick={() => {
setShowAddNominee((prev) => !prev);
}}
className="cancel-btn me-3"
>
Cancel
</button>
<button type="submit" className="sharetransfer_button">Add Nominee</button>
</div>
</div>
</form>
</div>
);
};
export default AddNomineeForm;
Source