Merge pull request Suneet25#42 from Suneet25/fp04_084_day-5

Fp04 084 day 5

src/App.css

@@ -13,3 +13,19 @@
  rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
  rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
 }
+
+
+.creditButton{
+ padding:10px 40px;
+ margin-top: 1rem;
+ font-size: 20px;
+ font-weight: bold;
+ background-color: #d3d3d3;
+ border-radius: 10px;
+}
+
+.creditButton:hover{
+ transition: 0.3s;
+ background-color: #10A310;
+ color: white;
+}

src/App.jsx

@@ -1,5 +1,5 @@
 import "./App.css";
-// import AllRoutes from "./Components/AllRoutes";
+import AllRoutes from "./Components/AllRoutes";
 
 // import Payment from "./Pages/Payment/Payment";
 // import Active from "./Pages/Payment/Active";
@@ -16,7 +16,8 @@ import "./App.css";
 function App() {
  return (
  <div className="App">
- {/* <AllRoutes/> */}
+ <AllRoutes/>
+
  </div>
  );
 }

src/Components/AllRoutes.jsx

@@ -7,6 +7,7 @@ import Payment from "../Pages/Payment/Payment";
 import Loginpage from "./Loginpage";
 import SignupCard from "./Signuppage";
 import Hosts from "../Pages/HostPage/HostPage";
+import Success from "../Pages/Payment/Success";
 const AllRoutes = () => {
  return (
  <Routes>
@@ -17,6 +18,9 @@ const AllRoutes = () => {
  <Route path="/login" element={<Loginpage />} />
  <Route path="/signup" element={<SignupCard />} />
  <Route path="/host" element={<Hosts />} />
+ <Route path="/success" element={<Success />} />
+
+
  </Routes>
  );
 };

src/Pages/Payment/Active.module.css

@@ -21,7 +21,7 @@
 }
 
 .activeDiv > div:nth-child(2) > div:nth-child(2) {
- border: 1px solid yellow;
+ /* border: 1px solid yellow; */
 }
 
 .h1tag {

src/Pages/Payment/Credit.jsx

@@ -1,35 +1,76 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 
-const mainDiv={display:"flex",justifyContent:"space-between",marginTop:"20px"}
+
+const mainDiv = { display: "flex", justifyContent: "space-between", marginTop: "20px" }
 
 
 const Credit = () => {
+ const [card, setcard] = useState("")
+ const [cvv, setcvv] = useState("")
+ const [month, setmonth] = useState("")
+ const nav=useNavigate()
+
+ console.log("card value", card)
+ console.log("cvv value", cvv)
+ console.log("month value", month)
+
+
+
+
+ const handleSubmit = () => {
+ if (card.length < 16 || card.length > 16) {
+ alert("Card should have 16 digit, check once again")
+ }
+ if (month.length === 0) {
+ alert("Month can't be empty")
+ }
+ if (cvv.length !== 3) {
+ alert("CVV should contain 3 digits")
+ }
+ if(month.length!==0 && cvv.length===3 && card.length===16) {
+ nav("/success")
+ }
+
+ }
+
+
+
+
+
+
  return (
  <>
-  <div style={{backgroundColor:"white",color:"black", width:"500px",margin:"auto",padding:"5px",marginTop:"5px"}} >
- <div style={mainDiv} >
- <div>
- <h1 style={{fontWeight:"bold",fontSize:"25px"}}>Enter Card Details</h1>
- <p> Amount: ₹5000.0</p>
- </div>
+ <div style={{ backgroundColor: "white", color: "black", width: "500px", margin: "auto", padding: "5px", marginTop: "5px" }} >
+  <div style={mainDiv}>
+  <div>
+  <h1 style={{ fontWeight: "bold", fontSize: "25px" }}>Enter Card Details</h1>
+  <p> Amount: ₹5000.0</p>
+  </div>
 
- <div>
+  <div>
  <img src="https://www.zoomcar.com/build/760ee3019ff287f2caed7e40c92b1ca5.png" alt="lock" width="50px" height={"50px"} />
+ </div>
+
  </div>
 
+ {/* input boxes */}
+ <input value={card} onChange={(e) => setcard(e.target.value)} type="number" placeholder=' Card Number' style={{ border: "1px solid grey", height: "50px", width: "450px", padding: "10px" }} />
+
+ <div style={{ display: "flex", justifyContent: "space-between", height: "50px", width: "450px", marginTop: "50px" }}>
+ <input onChange={(e) => setmonth(e.target.value)} type=" month" placeholder=' Expiry (MM/YY) ' style={{ border: "1px solid grey", height: "50px", width: "220px", padding: "10px" }} />
+ <input onChange={(e) => setcvv(e.target.value)} type="number" placeholder=' CVV' style={{ border: "1px solid grey", height: "50px", width: "220px", padding: "10px" }} />
  </div>
 
- {/* input box */}
- <input type="number" placeholder=' Card Number' style={{border:"1px solid grey",height:"50px",width:"450px"}} />
- <div style={{display:"flex" ,justifyContent:"space-between" ,height:"50px",width:"450px",marginTop:"50px"}}>
-  <input type="calender" placeholder=' Expiry (MM/YY) ' style={{border:"1px solid grey",height:"50px",width:"220px"}}/>
-  <input type="number" placeholder=' CVV' style={{border:"1px solid grey",height:"50px",width:"220px"}}/>
+ <br />
+ <input type="checkbox" name="" id="" /><span style={{ color: "grey" }}> Securely save card details</span>
+
+ <div>
+ <button className="creditButton" onClick={handleSubmit} >Submit</button>
  </div>
- <br/> 
- <input type="checkbox" name="" id="" /><span style={{color:"grey"}}> Securely save card details</span>
-
- </div>
+
+ </div>
  </>
  )
 }

src/Pages/Payment/Payment.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 
+
 import PAYMENT from "../Payment/Payment.module.css";
 import {
  Avatar,
@@ -16,7 +17,12 @@ import Banking from "./Banking";
 import Credit from "./Credit";
 
 
+
+
 let DataObj = JSON.parse(localStorage.getItem("userdata"));
+console.log(DataObj)
+
+
 
 const Payment = (data) => {
  const [pageTrue, setpageTrue] = useState("upi");
@@ -143,13 +149,13 @@ const Payment = (data) => {
 
  {/* second div starts here */}
 
- {pageTrue == "upi" ? (
+ {pageTrue === "upi" ? (
  <Active />
- ) : pageTrue == "card" ? (
+ ) : pageTrue === "card" ? (
  <Credit />
- ) : pageTrue == "netbank" ? (
+ ) : pageTrue === "netbank" ? (
  <Banking />
- ) : pageTrue == "wallet" ? (
+ ) : pageTrue === "wallet" ? (
  <Wallet />
  ) : null}
 

src/Pages/Payment/Success.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+import SUCCESS from "./Success.module.css"
+
+
+
+
+
+const Success = () => {
+ const [heading, setHeading] = useState("please wait, transection is processing...")
+ const [Image, setImage] = useState('https://i.gifer.com/BvMu.gif')
+
+
+
+ const handleSuccess =()=>{
+ setHeading("Payment Successful")
+ setImage("https://c.tenor.com/xVfFIHxAzW4AAAAC/success.gif")
+
+ }
+
+ useEffect(()=>{
+ setTimeout(()=>{
+ handleSuccess()
+
+
+ },3000)
+
+ },[])
+ return (
+ <div className={SUCCESS.sucDiv}>
+
+ <div>
+ <img src="data:image/png;base64,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" alt="" />
+ </div>
+
+ <h1>{heading}</h1>
+ <div>
+ <img src={Image} alt="success" />
+ </div>
+
+
+ </div>
+ )
+}
+
+export default Success
+

src/Pages/Payment/Success.module.css

@@ -0,0 +1,36 @@
+.sucDiv>div:first-child{
+ margin: auto;
+ /* border: 1px solid black; */
+ width: 300px;
+ height: 130px;
+ margin-top: 1rem;
+ margin-bottom: 10px;
+}
+
+.sucDiv>div:first-child>img{
+ width: 100%;
+ height: 100%;
+}
+
+.sucDiv>div:first-child+h1{
+ margin: auto;
+ text-align: center;
+ font-size: 40px;
+ font-weight: bold;
+ color: green;
+ padding: 5px;
+
+}
+
+
+
+.sucDiv>div:first-child+h1+div{
+ margin: auto;
+ /* border: 1px solid red; */
+ width: 500px;
+
+
+
+
+}
+

src/Pages/Payment/Wallet.jsx

@@ -26,6 +26,7 @@ const Wallet = () => {
  Mobile Wallet
  </h1>
  <p> Amount: ₹5000.0</p>
+ {/* checking */}
  </div>
 
  <div>