From 8387bba672689a9a8bac719abe67a4a9cccc57b5 Mon Sep 17 00:00:00 2001
From: nasaownsky <someuser.ivn@gmail.com>
Date: Thu, 17 Oct 2024 13:19:47 +0400
Subject: [PATCH] Add Other textbox to race breakdown

---
 .../MetricsConfiguration/ModalForm.styled.tsx |  8 +++++++
 .../RaceEthnicitiesModalForm.tsx              | 23 ++++++++++++++++++-
 .../components/MetricsConfiguration/types.ts  |  2 ++
 publisher/src/stores/MetricConfigStore.tsx    | 12 +++++++++-
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
index 68581ddab..b51a11461 100644
--- a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
+++ b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
@@ -170,3 +170,11 @@ 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 6b6c4eb9a..357513fb0 100644
--- a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
+++ b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
@@ -21,6 +21,7 @@ import {
   CheckboxOption,
   CheckboxOptions,
 } from "@justice-counts/common/components/CheckboxOptions";
+import { NewInput } from "@justice-counts/common/components/Input";
 import {
   RadioButton,
   RadioButtonsWrapper,
@@ -144,6 +145,9 @@ 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();
@@ -160,7 +164,8 @@ function RaceEthnicitiesModalForm({
       currentState,
       raceEthnicityGridStates,
       systemSearchParam,
-      metricSearchParam
+      metricSearchParam,
+      otherDescription
     );
     saveMetricSettings(updatedDimensions, agencyId);
   };
@@ -207,9 +212,25 @@ 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/components/MetricsConfiguration/types.ts b/publisher/src/components/MetricsConfiguration/types.ts
index 7d53f2664..3df6df562 100644
--- a/publisher/src/components/MetricsConfiguration/types.ts
+++ b/publisher/src/components/MetricsConfiguration/types.ts
@@ -80,6 +80,7 @@ export type Dimensions = {
     enabled?: boolean | null;
     label?: string;
     description?: string;
+    other_description?: string;
     key?: string;
     race?: Races;
     ethnicity?: Ethnicities;
@@ -101,6 +102,7 @@ export type UpdatedDimension = {
   enabled: boolean;
   race: Races;
   ethnicity: Ethnicities;
+  other_description?: string;
 };
 
 export type UpdatedDisaggregation = {
diff --git a/publisher/src/stores/MetricConfigStore.tsx b/publisher/src/stores/MetricConfigStore.tsx
index 0d6c89320..960c479c3 100644
--- a/publisher/src/stores/MetricConfigStore.tsx
+++ b/publisher/src/stores/MetricConfigStore.tsx
@@ -1149,7 +1149,8 @@ class MetricConfigStore {
     state: StateKeys,
     gridStates: RaceEthnicitiesGridStates,
     system: AgencySystem,
-    metricKey: string
+    metricKey: string,
+    otherDescription?: string
   ): UpdatedDisaggregation => {
     const ethnicitiesByRace = this.getEthnicitiesByRace(system, metricKey);
 
@@ -1192,6 +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;
+      }
+    }
+
     /** Return an object w/ all dimensions in the desired backend data structure for saving purposes */
     return {
       key: metricKey,