From c379166132651c608338474646fc074f473e23c2 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:01:39 +0530
Subject: [PATCH] fix: add validation for recipient name length in GiftForm

---
 public/locales/en/common.json     |  1 +
 src/Donations/Micros/GiftForm.tsx | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index bd7ccd20..47fe4dd8 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -7,6 +7,7 @@
   "tree_other": "trees",
   "recipientName": "Recipient Name",
   "recipientNameRequired": "Recipient Name is required",
+  "recipientNameTooLong": "Recipient Name must be 35 characters or less",
   "email": "Email",
   "recipientEmail": "Recipient Email",
   "emailRequired": "Email is required",
diff --git a/src/Donations/Micros/GiftForm.tsx b/src/Donations/Micros/GiftForm.tsx
index 79227df6..b1c31dc6 100644
--- a/src/Donations/Micros/GiftForm.tsx
+++ b/src/Donations/Micros/GiftForm.tsx
@@ -91,7 +91,16 @@ export default function GiftForm(): ReactElement {
               <Controller
                 name="recipientName"
                 control={control}
-                rules={{ required: true }}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("recipientNameRequired"),
+                  },
+                  maxLength: {
+                    value: 35,
+                    message: t("recipientNameTooLong"),
+                  },
+                }}
                 render={({ field: { onChange, value } }) => (
                   <MaterialTextField
                     onChange={onChange}
@@ -109,9 +118,9 @@ export default function GiftForm(): ReactElement {
                   />
                 )}
               />
-              {errors.recipientName && (
+              {errors.recipientName !== undefined && (
                 <div className={"form-errors"}>
-                  {t("recipientNameRequired")}
+                  {errors.recipientName.message}
                 </div>
               )}
             </div>