add card details validation

src/assets/locals/ar.json

@@ -493,6 +493,8 @@
     "edit": "تعديل",
     "yourInformation": "تفاصيلك",
     "minimumAmountShouldBe1OMR": "يجب أن يكون المبلغ الأدنى 1 OMR",
-    "add": "أضف"
+    "add": "أضف",
+    "senderNameRequired": "يجب أن يكون اسم المرسل مطلوب",
+    "receiverNameRequired": "يجب أن يكون اسم المستلم مطلوب"
   }
 }

src/assets/locals/en.json

@@ -505,6 +505,8 @@
     "edit": "Edit",
     "yourInformation": "Your Information",
     "minimumAmountShouldBe1OMR": "Minimum amount should be 1 OMR",
-    "add": "Add"
+    "add": "Add",
+    "senderNameRequired": "Sender name is required",
+    "receiverNameRequired": "Receiver name is required"
   }
 }

src/pages/CardDetails/CardDetails.tsx

@@ -27,6 +27,7 @@ export default function CardDetailsPage() {
     useState(false);
   const { subdomain } = useParams();
   const navigate = useNavigate();
+  const [form] = Form.useForm();
 
   // Find the initial index based on selected cardId from gift details
   useEffect(() => {
@@ -54,9 +55,14 @@ export default function CardDetailsPage() {
 
   const currentCard = cards && cards.length > 0 ? cards[currentIndex] : null;
 
-  const handleCheckout = useCallback(() => {
-    navigate(`/${subdomain}/checkout`);
-  }, [subdomain]);
+  const handleCheckout = useCallback(async () => {
+    try {
+      await form.validateFields();
+      navigate(`/${subdomain}/checkout`);
+    } catch (error) {
+      console.log(error);
+    }
+  }, [subdomain, form, navigate]);
 
   return (
     <>
@@ -136,6 +142,7 @@ export default function CardDetailsPage() {
             </div>
           )}
           <Form
+            form={form}
             layout="vertical"
             style={{ display: "flex", flexDirection: "column", gap: 16 }}
           >

src/pages/CardDetails/components/ReceivernformationCard/ReceivernformationCard.tsx

@@ -15,7 +15,7 @@ export default function ReceivernformationCard() {
   return (
     <ProInputCard title={t("cardDetails.receiverInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="receiverName">
+        <Form.Item name="receiverName" rules={[{ required: true, message: t("cardDetails.receiverNameRequired") }]}>
           <Input
             placeholder={t("cardDetails.receiverName")}
             size="large"

src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx

@@ -15,7 +15,12 @@ export default function SenderformationCard() {
   return (
     <ProInputCard title={t("cardDetails.yourInformation")}>
       <div className={styles.customerInformationCard}>
-        <Form.Item name="senderName">
+        <Form.Item
+          name="senderName"
+          rules={[
+            { required: true, message: t("cardDetails.senderNameRequired") },
+          ]}
+        >
           <Input
             placeholder={t("cardDetails.yourName")}
             size="large"