diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2598ea0..c99ca9f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "socket.io-client": "^4.8.0", "station-saarthi": "file:", "styled-components": "^6.1.13", + "sweetalert2": "^11.14.5", "yup": "^1.4.0" }, "devDependencies": { @@ -7843,6 +7844,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sweetalert2": { + "version": "11.14.5", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.14.5.tgz", + "integrity": "sha512-8MWk5uc/r6bWhiJWkUXyEuApfXAhSCZT8FFX7pZXL7YwaPxq+9Ynhi2dUzWkOFn9jvLjKj22CXuccZ+IHcnjvQ==", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/limonte" + } + }, "node_modules/tabbable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index e61c06d..5fc5b6d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,6 +34,7 @@ "socket.io-client": "^4.8.0", "station-saarthi": "file:", "styled-components": "^6.1.13", + "sweetalert2": "^11.14.5", "yup": "^1.4.0" }, "devDependencies": { diff --git a/frontend/src/Pages/Payment.jsx b/frontend/src/Pages/Payment.jsx index 709ce12..851ddee 100644 --- a/frontend/src/Pages/Payment.jsx +++ b/frontend/src/Pages/Payment.jsx @@ -1,34 +1,188 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import Swal from 'sweetalert2'; import backicon from '../assets/svg/backicon.svg'; - - const Payment = () => { + const [name, setName] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + const [nationality, setNationality] = useState('91'); + const [email, setEmail] = useState(''); + const [address, setAddress] = useState(''); const [paymentMethod, setPaymentMethod] = useState(''); const [cardNumber, setCardNumber] = useState(''); const [expiryDate, setExpiryDate] = useState(''); const [cvv, setCvv] = useState(''); + const [upiId, setUpiId] = useState(''); + const [errors, setErrors] = useState({}); + + const navigate = useNavigate(); + + const validateForm = () => { + let formErrors = {}; + if (!name.trim()) formErrors.name = 'Name is required'; + if (!/^[A-Za-z\s]+$/.test(name)) formErrors.name = 'Name must contain only letters and spaces'; + + if (!phoneNumber.trim()) formErrors.phoneNumber = 'Phone number is required'; + if (!/^\d{10}$/.test(phoneNumber)) formErrors.phoneNumber = 'Phone number must be 10 digits'; + + if (!email.trim()) formErrors.email = 'Email is required'; + if (!/^[\w.%+-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/.test(email)) formErrors.email = 'Invalid email format'; + + if (!address.trim()) formErrors.address = 'Address is required'; + + if ((paymentMethod === 'credit_card' || paymentMethod === 'debit_card') && !/^\d{4}-\d{4}-\d{4}-\d{4}$/.test(cardNumber)) { + formErrors.cardNumber = 'Card number must be in the format 1234-5678-9012-3456'; + } + + if ((paymentMethod === 'credit_card' || paymentMethod === 'debit_card') && !/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiryDate)) { + formErrors.expiryDate = 'Expiry date must be in MM/YY format'; + } + + if ((paymentMethod === 'credit_card' || paymentMethod === 'debit_card') && !/^\d{3,4}$/.test(cvv)) { + formErrors.cvv = 'CVV must be 4 digits'; + } + + if (paymentMethod === 'upi' && !/^[\w.-]+@[a-zA-Z]{3,}$/.test(upiId)) { + formErrors.upiId = 'Invalid UPI ID format'; + } + + setErrors(formErrors); + return Object.keys(formErrors).length === 0; + }; + + const formatCardNumber = (value) => { + return value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1-').slice(0, 19); + }; + + const formatExpiryDate = (value) => { + return value.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2').slice(0, 5); + }; const handleSubmit = (e) => { e.preventDefault(); - console.log('Payment submitted:', { paymentMethod, cardNumber, expiryDate, cvv }); + if (validateForm()) { + Swal.fire({ + title: 'Success!', + text: 'Payment submitted successfully!', + icon: 'success', + confirmButtonText: 'OK' + }).then(() => { + navigate('/'); + }); + } }; - const navigate = useNavigate(); + const HomeClick = () => { + navigate('/'); // Navigates to the home page + }; - const HomeClick = () => { - navigate('/'); // Navigates to the home page - }; return ( -
- +

Payment Page

+
+ + setName(e.target.value)} + placeholder="Enter your full name" + required + /> + {errors.name &&

{errors.name}

} +
+ + {/* Nationality and Phone Number Row */} +
+
+ + +
+ +
+ + setPhoneNumber(e.target.value)} + placeholder="Enter your 10-digit phone number" + required + /> + {errors.phoneNumber &&

{errors.phoneNumber}

} +
+
+ +
+ + setEmail(e.target.value)} + placeholder="Enter your email address" + required + /> + {errors.email &&

{errors.email}

} +
+ +
+ + + {errors.address &&

{errors.address}

} +
+
- - {paymentMethod === 'credit_card' || paymentMethod === 'debit_card' ? ( - <> -
- - setCardNumber(e.target.value)} - required - /> -
- -
-
- - setExpiryDate(e.target.value)} - required - /> -
- -
- - setCvv(e.target.value)} - required - /> -
-
- - ) : null} - - {paymentMethod === 'apple_pay' || paymentMethod === 'google_pay' ? ( -
- - + + {paymentMethod && ( +
+ {paymentMethod === 'credit_card' || paymentMethod === 'debit_card' ? ( + <> +
+ + setCardNumber(formatCardNumber(e.target.value))} + placeholder="1234-5678-9012-3456" + required + /> + {errors.cardNumber &&

{errors.cardNumber}

} +
+ +
+
+ + setExpiryDate(formatExpiryDate(e.target.value))} + placeholder="MM/YY" + required + /> + {errors.expiryDate &&

{errors.expiryDate}

} +
+
+ + setCvv(e.target.value)} + placeholder="1234" + required + /> + {errors.cvv &&

{errors.cvv}

} +
+
+ + ) : paymentMethod === 'upi' || paymentMethod === 'google_pay' ? ( + <> +
+ + setUpiId(e.target.value)} + placeholder="example@upi" + required + /> + {errors.upiId &&

{errors.upiId}

} +
+ + ) : null}
- ) : null} - + )} +
@@ -118,4 +284,4 @@ const Payment = () => { ); }; -export default Payment; \ No newline at end of file +export default Payment;