From 8834c88421f93de7caf436331a1c312c687d5c66 Mon Sep 17 00:00:00 2001
From: Tariq Jamal A <tariqjamal4267324@gmail.com>
Date: Thu, 15 May 2025 18:38:44 +0530
Subject: [PATCH] refactor: add phone field in payment form

---
 components/payment/paymentComponent.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/payment/paymentComponent.jsx b/components/payment/paymentComponent.jsx
index 1fff627..77cc228 100644
--- a/components/payment/paymentComponent.jsx
+++ b/components/payment/paymentComponent.jsx
@@ -19,6 +19,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     city: "",
     country_code: "",
     postal_code: "",
+    phone_number: "", 
   });
   const [shippingInfoCollected, setShippingInfoCollected] = useState(false);
 
@@ -98,7 +99,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
         prefill: {
           name: shippingData.address_line_1,
           email: shippingData.address_line_2,
-          contact: shippingData.city,
+          contact: shippingData.phone_number || shippingData.city,
         },
         handler: (response) => {
           response.address = shippingData;
@@ -115,11 +116,18 @@ const PaymentComponent = ({ amount, onSuccess }) => {
   };
 
   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.");
       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);
     setShippingInfoCollected(true);
     setError(null);
@@ -272,6 +280,13 @@ const PaymentComponent = ({ amount, onSuccess }) => {
               onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })}
               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">
               <button
                 onClick={() => setShowPopup(false)}