leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add phone field in payment form

Browse Source
This commit is contained in:
Tariq Jamal A
2025-05-15 18:38:44 +05:30
parent 3344ae0fea
commit 8834c88421
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/payment/paymentComponent.jsx
View File

@@ -19,6 +19,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
city: "", city: "",
country_code: "", country_code: "",
postal_code: "", postal_code: "",
phone_number: "",
}); });
const [shippingInfoCollected, setShippingInfoCollected] = useState(false); const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
@@ -98,7 +99,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
prefill: { prefill: {
name: shippingData.address_line_1, name: shippingData.address_line_1,
email: shippingData.address_line_2, email: shippingData.address_line_2,
contact: shippingData.city, contact: shippingData.phone_number || shippingData.city,
}, },
handler: (response) => { handler: (response) => {
response.address = shippingData; response.address = shippingData;
@@ -115,11 +116,18 @@ const PaymentComponent = ({ amount, onSuccess }) => {
}; };
const handlePopupSubmit = () => { const handlePopupSubmit = () => {
if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) { if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code || !shippingData.phone_number) {
setError("Please fill in all required fields."); setError("Please fill in all required fields.");
return; return;
} }
// Validate phone number
const phoneRegex = /^\+?[0-9]{10,15}$/;
if (!phoneRegex.test(shippingData.phone_number)) {
setError("Please enter a valid phone number (10-15 digits).");
return;
}
setShowPopup(false); setShowPopup(false);
setShippingInfoCollected(true); setShippingInfoCollected(true);
setError(null); setError(null);
@@ -272,6 +280,13 @@ const PaymentComponent = ({ amount, onSuccess }) => {
onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })} onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded" className="w-full p-2 mb-4 border border-gray-300 rounded"
/> />
<input
type="tel"
placeholder="Phone Number *"
value={shippingData.phone_number}
onChange={(e) => setShippingData({ ...shippingData, phone_number: e.target.value })}
className="w-full p-2 mb-4 border border-gray-300 rounded"
/>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={() => setShowPopup(false)} onClick={() => setShowPopup(false)}