1 | import React from "react";
|
---|
2 | import { useLocation, useNavigate } from 'react-router-dom'
|
---|
3 | import CenteredContainer from "../UtilComponents/CenteredContainer";
|
---|
4 | import '../UtilComponents/App.css'
|
---|
5 |
|
---|
6 | const TipDriver = (props) => {
|
---|
7 | const location = useLocation();
|
---|
8 | const navigate = useNavigate();
|
---|
9 |
|
---|
10 | const [formData, updateFormData] = React.useState({
|
---|
11 | driverTipSum : 0,
|
---|
12 | })
|
---|
13 |
|
---|
14 | const handleChange = (e) => {
|
---|
15 | updateFormData({
|
---|
16 | ...formData,
|
---|
17 | [e.target.name]: e.target.value.trim()
|
---|
18 | })
|
---|
19 | }
|
---|
20 |
|
---|
21 | const onFormSubmit = (e) => {
|
---|
22 | e.preventDefault()
|
---|
23 | const gradeNum = formData.driverTipSum;
|
---|
24 | const paymentId = location.state.paymentId;
|
---|
25 | props.onTipDriver(paymentId, gradeNum);
|
---|
26 | navigate("/home")
|
---|
27 | }
|
---|
28 |
|
---|
29 | return (
|
---|
30 | <CenteredContainer>
|
---|
31 | <div className="card text-center">
|
---|
32 | <form onSubmit={onFormSubmit}>
|
---|
33 | <div className="form-group" style={{textAlign: 'center'}}>
|
---|
34 | <br></br>
|
---|
35 | <h3>Tip Driver</h3>
|
---|
36 | <input type="float"
|
---|
37 | className="form-control"
|
---|
38 | id="driverTipSum"
|
---|
39 | name="driverTipSum"
|
---|
40 | required
|
---|
41 | placeholder="Enter tip amount"
|
---|
42 | style={{height: "100%", width: "90%", margin: 'auto'}}
|
---|
43 | onChange={handleChange}
|
---|
44 | />
|
---|
45 | </div>
|
---|
46 | <br></br>
|
---|
47 | <button id="submit" type="submit" className="myButton btn btn-primary" style={{backgroundColor: "darkcyan", borderColor: 'black', color: 'white', width: '60%'}}>Confirm</button>
|
---|
48 | <hr></hr>
|
---|
49 | <a href="/home" className="myButton btn btn-primary" style={{backgroundColor: "darkred", borderColor: 'black', color: 'white', width: '60%'}}>Skip</a>
|
---|
50 | <br></br>
|
---|
51 | <br></br>
|
---|
52 | </form>
|
---|
53 | </div>
|
---|
54 | </CenteredContainer>
|
---|
55 | )
|
---|
56 | }
|
---|
57 |
|
---|
58 | export default TipDriver; |
---|