From 8700a27e3e458a7e7885dc44e91ebf296c1d2ade Mon Sep 17 00:00:00 2001
From: Sarah Mundy <109107992+sarahfirstvoices@users.noreply.github.com>
Date: Thu, 26 Oct 2023 13:57:10 -0700
Subject: [PATCH] fw-5107, fix error messages for text array field (#179)

Co-authored-by: Guy McAuliffe <38873380+gmcauliffe@users.noreply.github.com>
---
 src/common/utils/stringHelpers.js     | 8 ++++++--
 src/common/utils/validationHelpers.js | 2 +-
 src/components/Form/TextArrayField.js | 4 +++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/common/utils/stringHelpers.js b/src/common/utils/stringHelpers.js
index a76b885e..c441697d 100644
--- a/src/common/utils/stringHelpers.js
+++ b/src/common/utils/stringHelpers.js
@@ -353,8 +353,12 @@ export const safeJsonParse = (str) => {
 
 // Converts JSON to a string and removes curly brackets, square brackets, and double quotes
 export const convertJsonToReadableString = (json) => {
-  const message = JSON.stringify(json)
-  return message?.replace(/[{}[\]"]+/g, ' ') || ''
+  try {
+    const message = JSON.stringify(json)
+    return message?.replace(/[{}[\]"]+/g, ' ') || ''
+  } catch (e) {
+    return 'Error'
+  }
 }
 
 export const makeTypeSingular = (plural) => {
diff --git a/src/common/utils/validationHelpers.js b/src/common/utils/validationHelpers.js
index 3c6b1b7c..8c56db2c 100644
--- a/src/common/utils/validationHelpers.js
+++ b/src/common/utils/validationHelpers.js
@@ -40,7 +40,7 @@ export const definitions = {
       yup.object({
         text: stringWithMax(charCount).min(
           1,
-          'This field cannot be empty. Remove it if you do not want to inlcude it.',
+          'This field cannot be empty. Remove it if you do not want to include it.',
         ),
       }),
     ),
diff --git a/src/components/Form/TextArrayField.js b/src/components/Form/TextArrayField.js
index 03cb7008..a95cc515 100644
--- a/src/components/Form/TextArrayField.js
+++ b/src/components/Form/TextArrayField.js
@@ -58,7 +58,9 @@ function TextArrayField({
               </div>
               {errors?.[nameId]?.[index] && (
                 <div className="text-red-500">
-                  {convertJsonToReadableString(errors?.[nameId]?.[index])}
+                  {convertJsonToReadableString(
+                    errors?.[nameId]?.[index]?.text?.message,
+                  )}
                 </div>
               )}
             </li>