From 0589570828e6c0147f39ddb3ce73f037c9dceb66 Mon Sep 17 00:00:00 2001
From: emilyjablonski <emijablonski@gmail.com>
Date: Tue, 6 Feb 2024 11:42:03 -0700
Subject: [PATCH] fix: additional extra chars

---
 .../src/views/multiselectQuestions.tsx        | 17 ++++++++++----
 .../sections/FormMultiselectQuestions.tsx     | 12 ++++++++--
 .../components/shared/FormSummaryDetails.tsx  | 23 ++++++++++++++++++-
 sites/public/src/lib/helpers.tsx              |  6 +++--
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx
index 883637d589..23e1ee5531 100644
--- a/shared-helpers/src/views/multiselectQuestions.tsx
+++ b/shared-helpers/src/views/multiselectQuestions.tsx
@@ -37,8 +37,8 @@ export const fieldName = (
   applicationSection: ApplicationSection,
   optionName?: string
 ) => {
-  return `application.${applicationSection}.${questionName?.replace(/'/g, "")}${
-    optionName ? `.${optionName?.replace(/'/g, "")}` : ""
+  return `application.${applicationSection}.${questionName?.replace(/\.|,|'/g, "")}${
+    optionName ? `.${optionName?.replace(/\.|,|'/g, "")}` : ""
   }`
 }
 
@@ -343,7 +343,7 @@ export const mapCheckboxesToApi = (
   question: MultiselectQuestion,
   applicationSection: ApplicationSection
 ): ApplicationMultiselectQuestion => {
-  const data = formData["application"][applicationSection][question.text.replace(/'/g, "")]
+  const data = formData["application"][applicationSection][question.text.replace(/\.|,|'/g, "")]
   const claimed = !!Object.keys(data).filter((key) => data[key] === true).length
 
   const addressFields = Object.keys(data).filter((option) => Object.keys(data[option]))
@@ -378,8 +378,17 @@ export const mapCheckboxesToApi = (
         }
       }
 
+      const getFinalKey = () => {
+        const optionKey = question?.options?.find(
+          (elem) => elem.text.replace(/\.|,|'/g, "") === key
+        )?.text
+        const cleanOptOutKey = question?.optOutText?.replace(/\.|,|'/g, "")
+        if (cleanOptOutKey === key) return question?.optOutText || key
+        return optionKey || key
+      }
+
       return {
-        key,
+        key: getFinalKey(),
         mapPinPosition: data?.[`${key}-mapPinPosition`],
         checked: data[key] === true,
         extraData: extraData,
diff --git a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
index cac836d64c..fa78c3768e 100644
--- a/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
+++ b/sites/partners/src/components/applications/PaperApplicationForm/sections/FormMultiselectQuestions.tsx
@@ -41,7 +41,11 @@ const FormMultiselectQuestions = ({
     questions?.forEach((listingQuestion) =>
       listingQuestion?.multiselectQuestion.options.forEach((option) =>
         keys.push(
-          fieldName(listingQuestion?.multiselectQuestion.text, applicationSection, option.text)
+          fieldName(
+            listingQuestion?.multiselectQuestion.text,
+            applicationSection,
+            option.text.replace(/\.|,|'/g, "")
+          )
         )
       )
     )
@@ -68,7 +72,11 @@ const FormMultiselectQuestions = ({
   const watchQuestions = watch(allOptionFieldNames)
 
   const getCheckboxOption = (option: MultiselectOption, question: MultiselectQuestion) => {
-    const optionFieldName = fieldName(question.text, applicationSection, option.text)
+    const optionFieldName = fieldName(
+      question.text,
+      applicationSection,
+      option.text.replace(/\.|,|'/g, "")
+    )
     return (
       <React.Fragment key={option.text}>
         <Field
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index 3c98a206b5..e54981ed71 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -107,6 +107,27 @@ const FormSummaryDetails = ({
     return `${name ? `${name}\n` : ""}${relationship ? `${relationship}\n` : ""}${helperText}`
   }
 
+  const getOptionText = (
+    question: ApplicationMultiselectQuestion,
+    option: ApplicationMultiselectQuestionOption
+  ) => {
+    const initialMultiselectQuestion = listing.listingMultiselectQuestions.find(
+      (elem) =>
+        elem.multiselectQuestion.text.replace(/\.|,|'/g, "") === question.key.replace(/\.|,|'/g, "")
+    )
+
+    const initialOption = initialMultiselectQuestion?.multiselectQuestion.options.find(
+      (elem) => elem.text.replace(/\.|,|'/g, "") === option.key
+    )
+
+    const initialOptOut = initialMultiselectQuestion?.multiselectQuestion.optOutText
+
+    const optOutOption =
+      option.key === initialOptOut?.replace(/\.|,|'/g, "") ? initialOptOut : undefined
+
+    return initialOption?.text || optOutOption || option.key
+  }
+
   const multiselectQuestionSection = (
     applicationSection: ApplicationSection,
     appLink: string,
@@ -141,7 +162,7 @@ const FormSummaryDetails = ({
                         testId={"app-summary-preference"}
                         className={"pb-6 whitespace-pre-wrap"}
                       >
-                        {option.key}
+                        {getOptionText(question, option)}
                       </FieldValue>
                     ))
                 )}
diff --git a/sites/public/src/lib/helpers.tsx b/sites/public/src/lib/helpers.tsx
index 40fddc6a45..496446aa6e 100644
--- a/sites/public/src/lib/helpers.tsx
+++ b/sites/public/src/lib/helpers.tsx
@@ -195,11 +195,13 @@ export const untranslateMultiselectQuestion = (
       if (datum.options) {
         datum.options.forEach((option) => {
           const selectedOption = question.options.find((elem) => {
-            return elem.text.replace(/\.|,|'/g, "") === option.key
+            return elem.text.replace(/\.|,|'/g, "") === option.key.replace(/\.|,|'/g, "")
           })
           if (selectedOption) {
             option.key = selectedOption.untranslatedText ?? selectedOption.text
-          } else if (question?.optOutText?.replace(/\.|,|'/g, "") === option.key) {
+          } else if (
+            question?.optOutText?.replace(/\.|,|'/g, "") === option.key.replace(/\.|,|'/g, "")
+          ) {
             option.key = question.untranslatedOptOutText ?? question.optOutText
           }