From bb6b184bd26c5821a248b052b79aff90401df161 Mon Sep 17 00:00:00 2001
From: Noel Feliciano <noel.feliciano@ca.ey.com>
Date: Thu, 30 Jan 2025 00:27:54 -0800
Subject: [PATCH] TC 903, TC 905

---
 .../recommitment/InitialRecommitmentDropdown.tsx   | 14 +++++++++++++-
 .../src/components/recommitment/UnableToJoin.tsx   |  6 ++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/recommitment/InitialRecommitmentDropdown.tsx b/frontend/src/components/recommitment/InitialRecommitmentDropdown.tsx
index f76938fd..6338d1d9 100644
--- a/frontend/src/components/recommitment/InitialRecommitmentDropdown.tsx
+++ b/frontend/src/components/recommitment/InitialRecommitmentDropdown.tsx
@@ -20,6 +20,18 @@ export const InitialRecommitmentDropdown = ({
     }
   };
 
+  const getWarningText = () => {
+    if (initialValue === 'no') {
+      if (program === Program.ALL) {
+        return 'You must provide a reason for declining recommitment to each program in the next step.';
+      } else {
+        return `You must provide a reason for declining recommitment to the ${program?.toUpperCase()} program in the next step.`;
+      }
+    } else {
+      return `You must provide a reason for declining recommitment to the ${initialValue === 'bcws-only' ? 'EMCR' : 'BCWS'} program in the next step.`;
+    }
+  }
+
   const EMCR_ONLY_OPTIONS = [
     { value: 'yes-emcr', label: 'Yes' },
     { value: 'no', label: `No, I am not returning this year` },
@@ -61,7 +73,7 @@ export const InitialRecommitmentDropdown = ({
         ))}
       </Select>
       {initialValue && !['yes-emcr', 'yes-bcws', 'yes-both'].includes(initialValue) && 
-        <p className="text-xs text-gray-600 pb-1 pt-4 pl-1">You must provide a reason for declining recommitment to each program in the next step.</p>
+        <p className="text-xs text-gray-600 pb-1 pt-4 pl-1">{getWarningText()}</p>
       }
     </div>
   );
diff --git a/frontend/src/components/recommitment/UnableToJoin.tsx b/frontend/src/components/recommitment/UnableToJoin.tsx
index e5405384..1991405a 100644
--- a/frontend/src/components/recommitment/UnableToJoin.tsx
+++ b/frontend/src/components/recommitment/UnableToJoin.tsx
@@ -117,8 +117,14 @@ export const UnableToJoin = ({ program, onUpdate }: UnableToJoinProps) => {
                       onChange={(e) => handleOtherReasonChange(program as Program, e.target.value)}
                       placeholder="Add a comment"
                       rows={3}
+                      maxLength={100}
                       className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
                     />
+                    {(reasons[program as Program]?.otherReason || '').length === 100 &&
+                      <p className="text-sm text-red-600">
+                        Maximum character limit of 100
+                      </p>
+                    }
                   </div>
                 )}
               </div>