From 15664f4a5694735b42fa852b1d63c10fca0738fb Mon Sep 17 00:00:00 2001
From: nasaownsky <someuser.ivn@gmail.com>
Date: Tue, 10 Dec 2024 18:20:04 +0400
Subject: [PATCH] Update other textbox logic

---
 .../MetricsConfiguration/ModalForm.styled.tsx |  8 ----
 .../RaceEthnicitiesModalForm.tsx              | 48 +++++++++++--------
 publisher/src/stores/MetricConfigStore.tsx    | 16 ++++---
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
index b51a11461..68581ddab 100644
--- a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
+++ b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
@@ -170,11 +170,3 @@ export const ContextLabel = styled.div`
   color: ${palette.highlight.grey8};
   margin-bottom: 16px;
 `;
-
-export const InputWrapper = styled.div`
-  margin-bottom: 16px;
-
-  textarea {
-    height: 100px;
-  }
-`;
diff --git a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
index 357513fb0..143952101 100644
--- a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
+++ b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
@@ -21,7 +21,6 @@ import {
   CheckboxOption,
   CheckboxOptions,
 } from "@justice-counts/common/components/CheckboxOptions";
-import { NewInput } from "@justice-counts/common/components/Input";
 import {
   RadioButton,
   RadioButtonsWrapper,
@@ -119,18 +118,46 @@ function RaceEthnicitiesModalForm({
         }
       : undefined;
 
+  const currentOtherDescription =
+    Object.values(
+      Object.entries(ethnicitiesByRace).find(
+        ([race]) => race === "Other"
+      )?.[1] || {}
+    ).find((ethnicity) => {
+      if (!canSpecifyEthnicity && !specifiesHispanicAsRace)
+        return ethnicity.key === "Other / Unknown Ethnicity";
+
+      if (!canSpecifyEthnicity && specifiesHispanicAsRace)
+        return ethnicity.key === "Other / Not Hispanic or Latino";
+
+      return ethnicity.key === "Other / Hispanic or Latino";
+    })?.other_description || "";
+
+  const [otherDescription, setOtherDescription] = useState(
+    currentOtherDescription
+  );
+
   const raceEthnicityOptions: CheckboxOption[] = [
     ...(hispanicOrLatinoOption ? [hispanicOrLatinoOption] : []),
     ...Object.entries(racesStatusObject).map(([race, enabled]) => {
       const disabledUnknownRace =
         race === "Unknown" && specifiesHispanicAsRace && !canSpecifyEthnicity;
 
+      const otherDescriptionParams = {
+        isEnabled: race === "Other" && Boolean(enabled),
+        placeholder:
+          "Please describe additional definition/clarification of the 'Other' selection.",
+        value: currentOtherDescription,
+        onChange: (value: string) => setOtherDescription(value),
+      };
+
       return {
         key: race,
         label: race,
         checked: Boolean(enabled),
         disabled: disabledUnknownRace,
         icon: disabledUnknownRace ? <InfoIcon id="unknown-race" /> : undefined,
+        otherDescription: otherDescriptionParams,
       };
     }),
   ];
@@ -145,9 +172,6 @@ function RaceEthnicitiesModalForm({
     return "NO_ETHNICITY_HISPANIC_NOT_SPECIFIED";
   };
 
-  const [isOtherChecked, setOtherChecked] = useState(false);
-  const [otherDescription, setOtherDescription] = useState("");
-
   const handleUpdateRacesDimensions = () => {
     if (!systemSearchParam || !metricSearchParam) return;
     const currentState = determineCurrentState();
@@ -212,25 +236,9 @@ function RaceEthnicitiesModalForm({
             capture for race?
           </Styled.ToggleSwitchesListHeader>
           <Styled.CheckboxWrapper>
-            {isOtherChecked && (
-              <Styled.InputWrapper>
-                <NewInput
-                  type="text"
-                  label=""
-                  placeholder={`If the listed categories do not adequately describe this breakdown, please describe additional definition/clarification of the "Other" selection.`}
-                  value={otherDescription}
-                  multiline
-                  onChange={(e) => setOtherDescription(e.target.value)}
-                  fullWidth
-                />
-              </Styled.InputWrapper>
-            )}
             <CheckboxOptions
               options={raceEthnicityOptions}
               onChange={({ key, checked }) => {
-                if (key === "Other") {
-                  setOtherChecked(!checked);
-                }
                 setRacesStatusObject({
                   ...racesStatusObject,
                   [key]: !checked,
diff --git a/publisher/src/stores/MetricConfigStore.tsx b/publisher/src/stores/MetricConfigStore.tsx
index 960c479c3..de5f93569 100644
--- a/publisher/src/stores/MetricConfigStore.tsx
+++ b/publisher/src/stores/MetricConfigStore.tsx
@@ -1193,13 +1193,15 @@ class MetricConfigStore {
       raceEthnicitiesDimensions &&
       (Object.values(raceEthnicitiesDimensions) as UpdatedDimension[]);
 
-    if (otherDescription) {
-      const otherDimension = dimensions.find(
-        (dimension) => dimension.race === "Other" && dimension.enabled
-      );
-      if (otherDimension) {
-        otherDimension.other_description = otherDescription;
-      }
+    if (otherDescription !== undefined) {
+      dimensions
+        .filter((dimension) => dimension.race === "Other")
+        .forEach((otherDimension) => {
+          const updatedDimension = otherDimension;
+          updatedDimension.other_description = otherDimension.enabled
+            ? otherDescription
+            : "";
+        });
     }
 
     /** Return an object w/ all dimensions in the desired backend data structure for saving purposes */