import { Formik } from "formik"; import { Fragment, useState } from "react"; import { Button, Form, Modal } from "react-bootstrap"; import { useDispatch } from "react-redux"; import ReactSelect from "react-select"; import * as Yup from "yup"; import { updateApprovalStatusAdmin } from "../../redux/actions/userActions"; import { getAllVendors } from "../../redux/actions/vendorActions"; const RejectModal = ({ show, handleClose, detail, setShowDetail }) => { const dispatch = useDispatch(); console.log("detail", detail[0].attributes.email); const formValidationSchema = Yup.object().shape({ email: Yup.string(), reason: Yup.string().required("Reason is Required"), comments: Yup.string() }); const reasonOptions = [{ value: "Not listed", label: "Not listed" }]; const [selectedOption, setSelectedOption] = useState(null); const [showComments, setshowComments] = useState(false); return ( <Fragment> <Modal show={show} onHide={handleClose} aria-labelledby="contained-modal-title-vcenter" centered> <Modal.Body> <div className="row"> <div className="col-12 col-lg-12"> <div className="px-3"> <p className="mphead">Reject reason</p> <div className="form-container"> <Formik initialValues={{ email: detail[0].attributes.email, reason: "", comments: "" }} validationSchema={formValidationSchema} onSubmit={async values => { console.log("values", values); let data; if (showComments) { data = { email: values.email, rejectionReason: values.comments }; } else { data = { email: values.email, rejectionReason: values.reason }; } console.log(data); let response = await updateApprovalStatusAdmin({ status: "rejected", userId: detail[0].attributes.user.data.id, rejectionReason: data.rejectionReason }); console.log(response.data); await dispatch(getAllVendors({})); handleClose() setShowDetail(false); }} > {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( <Form onSubmit={e => { e.preventDefault(); handleSubmit(); }} > {/* {console.log("formik.values",values)} */} <div className="input-group"> <label>Email Id</label> <input disabled={true} type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} placeholder="yourname@example.com" style={{ backgroundColor: "#EBEBEB", boxShadow: "1.63px 3.26px 4.07px 0px #FFFFFF40 inset", border: "none" }} /> {errors.email && touched.email && <span className="form-error">{errors.email}</span>} </div> <div className="input-group mb-1"> <label>Reason</label> <select name="reason" onChange={e => { console.log(e); handleChange(e); if (e.target.value == "notListed") { setshowComments(true); } else { setshowComments(false); } }} onBlur={handleBlur} value={values.reason} > <option value="">Select</option> <option value="Invalid address details">Invalid address details</option> <option value="Invalid business details">Invalid business details</option> <option value="Bogus PAN number">Bogus PAN number</option> <option value="notListed">Not listed</option> </select> {errors.reason && touched.reason && <span className="form-error">{errors.reason}</span>} </div> {showComments && ( <div className="input-group"> <textarea rows={4} placeholder="Leave your comments here..." name="comments" onChange={handleChange} onBlur={handleBlur} value={values.comments} /> {errors.comments && touched.comments && <span className="form-error">{errors.comments}</span>} </div> )} <div className="my-4"> <div className="d-flex justify-content-center"> <Button type="submit" variant="" className="btnAdd btnApprove m-0" disabled={values.comments == "" && showComments}> Submit </Button> <div className="px-1"></div> <Button type="button" variant="" className="btnAdd btnReject m-0" onClick={handleClose}> Cancel </Button> </div> </div> </Form> )} </Formik> </div> </div> </div> </div> </Modal.Body> </Modal> </Fragment> ); }; export default RejectModal;