1import { useState, useContext } from "react";
2
3import PageTitle from "@/components/page-title";
4import { AppContext } from "@/ContextProvider";
5
6const UpiDetails = () => {
7 const { state, dispatch } = useContext(AppContext);
8 const [upiSettings, setUpiSettings] = useState({
9 id: state.upiSettings.id || "",
10 name: state.upiSettings.name || "",
11 });
12
13 function handleSubmit(e) {
14 e.preventDefault();
15 dispatch({ type: "setUpiSettings", payload: upiSettings });
16 }
17
18 return (
19 <>
20 <PageTitle title="my upi details" />
21
22 <h1>my upi details</h1>
23
24 <form onSubmit={handleSubmit}>
25 <label htmlFor="upi-id">upi id / vpa*</label>
26 <input
27 type="email"
28 id="upi-id"
29 placeholder="sethur@oksbi"
30 required
31 value={upiSettings.id}
32 onChange={(e) =>
33 setUpiSettings((prev) => ({ ...prev, id: e.target.value }))
34 }
35 />
36
37 <label htmlFor="upi-name">upi name</label>
38 <input
39 type="text"
40 id="upi-name"
41 placeholder="Sethurama Iyer"
42 value={upiSettings.name}
43 onChange={(e) =>
44 setUpiSettings((prev) => ({ ...prev, name: e.target.value }))
45 }
46 />
47
48 <p></p>
49 <div className="text-center">
50 <button className="btn" type="submit">
51 update details
52 </button>
53 </div>
54 </form>
55 </>
56 );
57};
58
59export default UpiDetails;