RejectModal.js
6.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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;