[364f27d] | 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; |
---|