Update Citizen Filter With Other Categories

src/Assets/citizenshipFilterFormControlLabels.tsx

@@ -1,4 +1,5 @@
 import { FormattedMessage } from 'react-intl';
+import { FormattedMessageType } from '../Types/Questions';
 
 export type CitizenLabels =
   | 'non_citizen'
@@ -7,9 +8,19 @@ export type CitizenLabels =
   | 'gc_5plus'
   | 'gc_18plus_no5'
   | 'gc_under18_no5'
-  | 'gc_under19_pregnant_no5';
+  | 'other'
+  | 'otherWithWorkPermission'
+  | 'otherHealthCareUnder19'
+  | 'otherHealthCarePregnant';
 
-const citizenshipFilterFormControlLabels = {
+export const filterNestedMap = new Map<CitizenLabels, CitizenLabels[]>([
+  ['non_citizen', []],
+  ['green_card', ['gc_5plus', 'gc_18plus_no5', 'gc_under18_no5']],
+  ['refugee', []],
+  ['other', ['otherWithWorkPermission', 'otherHealthCareUnder19', 'otherHealthCarePregnant']],
+]);
+
+const citizenshipFilterFormControlLabels: Record<CitizenLabels, FormattedMessageType> = {
   non_citizen: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-non_citizen"
@@ -30,18 +41,31 @@ const citizenshipFilterFormControlLabels = {
       defaultMessage="younger than 18 without a 5-year waiting period"
     />
   ),
-  gc_under19_pregnant_no5: (
-    <FormattedMessage
-      id="citizenshipFCtrlLabel-gc_under19_pregnant_no5"
-      defaultMessage="for health care benefits - younger than 19 or pregnant without a 5-year waiting period"
-    />
-  ),
   refugee: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-refugee"
       defaultMessage="Refugees or asylees (special rules or waiting periods may apply)"
     />
   ),
+  other: <FormattedMessage id="citizenshipFCtrlLabel-other" defaultMessage="Other lawfully present noncitizens" />,
+  otherWithWorkPermission: (
+    <FormattedMessage
+      id="citizenshipFCtrlLabel-other_work_permission"
+      defaultMessage="with permission to live or work in the U.S. (other rules may apply)"
+    />
+  ),
+  otherHealthCareUnder19: (
+    <FormattedMessage
+      id="citizenshipFCtrlLabel-other_health_care_under19"
+      defaultMessage="for health care benefits - younger than 19"
+    />
+  ),
+  otherHealthCarePregnant: (
+    <FormattedMessage
+      id="citizenshipFCtrlLabel-other_health_care_pregnant"
+      defaultMessage="for health care benefits - pregnant"
+    />
+  ),
 };
 
 export default citizenshipFilterFormControlLabels;

src/Components/FilterSection/CitizenshipPopover.css

@@ -1,3 +1,7 @@
 .MuiFormControlLabel-root.gc-subcitizen-indentation {
   margin-left: 1.25rem;
 }
+
+.MuiFormControlLabel-label {
+  padding: 0.5rem 0;
+}

src/Components/FilterSection/CitizenshipPopover.tsx

@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import { Checkbox, Stack } from '@mui/material';
 import { GridFilterItem, GridFilterOperator } from '@mui/x-data-grid';
 import { UpdateFilterArg } from '../Results/Results';
-import citizenshipFilterFormControlLabels from '../../Assets/citizenshipFilterFormControlLabels';
+import citizenshipFilterFormControlLabels, { filterNestedMap } from '../../Assets/citizenshipFilterFormControlLabels';
 import type { CitizenLabels } from '../../Assets/citizenshipFilterFormControlLabels';
 import './CitizenshipPopover.css';
 
@@ -56,22 +56,16 @@ const CitizenshipPopover = ({
   const handleFilterSelect = (citizenshipType: CitizenLabels) => {
     const isChecked = citizenshipFilterIsChecked[citizenshipType];
 
-    let updatedCitizenshipFilterIsChecked: Record<CitizenLabels, boolean> = {
+    const updatedCitizenshipFilterIsChecked: Record<CitizenLabels, boolean> = {
       ...citizenshipFilterIsChecked,
       [citizenshipType]: !isChecked,
     };
 
-    if (citizenshipType === 'green_card') {
-      // if the citizenshipType is `green_card`, then set green_card and all the gc_options to true or false
-      // i.e. green_card and all the gc_options should be the same when citizenshipType is `green_card`
-      updatedCitizenshipFilterIsChecked = {
-        ...updatedCitizenshipFilterIsChecked,
-        gc_5plus: !isChecked,
-        gc_18plus_no5: !isChecked,
-        gc_under18_no5: !isChecked,
-        gc_under19_pregnant_no5: !isChecked,
-      };
+    for (const nestedFilter of filterNestedMap.get(citizenshipType) ?? []) {
+      // if a parent is not checked, then set its children to false, and if a parent becomes checked, then set its children to true
+      updatedCitizenshipFilterIsChecked[nestedFilter] = !isChecked;
     }
+
     const typedUpdatedCitizenshipFilterIsChecked = Object.keys(updatedCitizenshipFilterIsChecked) as CitizenLabels[];
     const selectedCitizenshipFilters = typedUpdatedCitizenshipFilterIsChecked.filter((citizenshipType) => {
       return updatedCitizenshipFilterIsChecked[citizenshipType];
@@ -105,56 +99,34 @@ const CitizenshipPopover = ({
     setCitizenshipFilterIsChecked(updatedCitizenshipFilterIsChecked);
   };
 
-  const typedCitizenshipFilterIsChecked = Object.keys(citizenshipFilterIsChecked) as CitizenLabels[];
-
-  const renderMainAndSubFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
-    return typedCitizenshipFilterIsChecked.map((citizenshipType) => {
-      //here we need to add an sx prop to indent them if they're the gc_filters
-      const isGreenCardSubCitizenshipType = [
-        'gc_5plus',
-        'gc_18plus_no5',
-        'gc_under18_no5',
-        'gc_under19_pregnant_no5',
-      ].includes(citizenshipType);
-
-      return (
+  const renderCitizenshipFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
+    const filters: JSX.Element[] = [];
+    filterNestedMap.forEach((children, parentLabel) => {
+      filters.push(
         <FormControlLabel
-          key={citizenshipType}
-          className={isGreenCardSubCitizenshipType ? 'gc-subcitizen-indentation' : ''}
-          label={citizenshipFilterFormControlLabels[citizenshipType]}
+          key={parentLabel}
+          label={citizenshipFilterFormControlLabels[parentLabel]}
           control={
-            <Checkbox
-              checked={citizenshipFilters[citizenshipType]}
-              onChange={() => handleFilterSelect(citizenshipType)}
-            />
+            <Checkbox checked={citizenshipFilters[parentLabel]} onChange={() => handleFilterSelect(parentLabel)} />
           }
-        />
+        />,
       );
-    });
-  };
 
-  const renderMainFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
-    //green_card is false
-    const initialThreeFilters: CitizenLabels[] = ['non_citizen', 'green_card', 'refugee'];
-    return initialThreeFilters.map((initialFilter) => {
-      return (
-        <FormControlLabel
-          key={initialFilter}
-          label={citizenshipFilterFormControlLabels[initialFilter]}
-          control={
-            <Checkbox checked={citizenshipFilters[initialFilter]} onChange={() => handleFilterSelect(initialFilter)} />
-          }
-        />
-      );
+      if (citizenshipFilters[parentLabel]) {
+        children.forEach((label) => {
+          filters.push(
+            <FormControlLabel
+              key={label}
+              className="gc-subcitizen-indentation"
+              label={citizenshipFilterFormControlLabels[label]}
+              control={<Checkbox checked={citizenshipFilters[label]} onChange={() => handleFilterSelect(label)} />}
+            />,
+          );
+        });
+      }
     });
-  };
 
-  const renderCitizenshipFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
-    if (citizenshipFilters.green_card) {
-      return renderMainAndSubFilters(citizenshipFilters);
-    } else {
-      return renderMainFilters(citizenshipFilters);
-    }
+    return filters;
   };
 
   return (

src/Components/Results/Results.tsx

@@ -81,8 +81,11 @@ const Results = ({ handleTextFieldChange }: ResultsProps) => {
     gc_5plus: false,
     gc_18plus_no5: false,
     gc_under18_no5: false,
-    gc_under19_pregnant_no5: false,
     refugee: false,
+    other: false,
+    otherWithWorkPermission: false,
+    otherHealthCareUnder19: false,
+    otherHealthCarePregnant: false,
   });
   const categoryState = useState('All Categories');
   const eligibilityState = useState('eligibleBenefits');