Feat/updated citizen filters

src/Assets/citizenshipFilterFormControlLabels.tsx

@@ -1,7 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
 export type CitizenLabels =
-  | 'citizen'
   | 'non_citizen'
   | 'green_card'
   | 'refugee'
@@ -11,52 +10,36 @@ export type CitizenLabels =
   | 'gc_under19_pregnant_no5';
 
 const citizenshipFilterFormControlLabels = {
-  citizen: (
-    <FormattedMessage
-      id="citizenshipFCtrlLabel-citizen"
-      defaultMessage="Show benefits that require citizenship or lawful U.S. presence"
-    />
-  ),
   non_citizen: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-non_citizen"
-      defaultMessage="Show benefits that do not require citizenship or lawful U.S. presence"
-    />
-  ),
-  green_card: (
-    <FormattedMessage
-      id="citizenshipFCtrlLabel-green_card"
-      defaultMessage="Show benefits available to green card holders"
-    />
-  ),
-  refugee: (
-    <FormattedMessage
-      id="citizenshipFCtrlLabel-refugee"
-      defaultMessage="Show benefits available to refugees or asylees (special rules or waiting periods may apply)"
-    />
-  ),
-  gc_5plus: (
-    <FormattedMessage
-      id="citizenshipFCtrlLabel-gc_5plus"
-      defaultMessage="Show benefits available to green card holders ONLY after 5+ years in the U.S."
+      defaultMessage="Individuals without citizenship or lawful U.S. presence"
     />
   ),
+  green_card: <FormattedMessage id="citizenshipFCtrlLabel-green_card" defaultMessage="Green card holders" />,
+  gc_5plus: <FormattedMessage id="citizenshipFCtrlLabel-gc_5plus" defaultMessage="ONLY after 5+ years in the U.S." />,
   gc_18plus_no5: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-gc_18plus_no5"
-      defaultMessage="Show benefits available to green card holders 18 or older without a 5-year waiting period"
+      defaultMessage="18 or older without a 5-year waiting period"
     />
   ),
   gc_under18_no5: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-gc_under18_no5"
-      defaultMessage="Show benefits available to green card holders younger than 18 without a 5-year waiting period"
+      defaultMessage="younger than 18 without a 5-year waiting period"
     />
   ),
   gc_under19_pregnant_no5: (
     <FormattedMessage
       id="citizenshipFCtrlLabel-gc_under19_pregnant_no5"
-      defaultMessage="Show health care benefits available to green card holders younger than 19 or pregnant without a 5-year waiting period"
+      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)"
     />
   ),
 };

src/Components/FilterSection/CitizenshipPopover.css

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

src/Components/FilterSection/CitizenshipPopover.tsx

@@ -1,9 +1,11 @@
+import { FormattedMessage } from 'react-intl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 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 type { CitizenLabels } from '../../Assets/citizenshipFilterFormControlLabels';
+import './CitizenshipPopover.css';
 
 export const citizenshipFilterOperators: GridFilterOperator[] = [
   {
@@ -39,49 +41,126 @@ const CitizenshipPopover = ({
   citizenshipFilterIsChecked,
   setCitizenshipFilterIsChecked,
 }: CitizenshipPopoverProps) => {
+  const hasAtLeastOneCitizenshipFilter = (currentCitizenshipFilters: Record<CitizenLabels, boolean>) => {
+    const citizenshipFilterValues = Object.values(currentCitizenshipFilters);
+
+    return citizenshipFilterValues.some((citizenshipFilterValue) => {
+      return citizenshipFilterValue === true;
+    });
+  };
+
   const handleFilterSelect = (citizenshipType: CitizenLabels) => {
     const isChecked = citizenshipFilterIsChecked[citizenshipType];
 
-    const updatedCitizenshipFilterIsChecked: Record<CitizenLabels, boolean> = {
+    let 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,
+      };
+    }
     const typedUpdatedCitizenshipFilterIsChecked = Object.keys(updatedCitizenshipFilterIsChecked) as CitizenLabels[];
     const selectedCitizenshipFilters = typedUpdatedCitizenshipFilterIsChecked.filter((citizenshipType) => {
       return updatedCitizenshipFilterIsChecked[citizenshipType];
     });
 
-    updateFilter({
-      name: 'citizen',
-      filter: {
-        id: 1,
-        columnField: 'citizenship',
-        operatorValue: 'customCitizenshipOperator',
-        value: selectedCitizenshipFilters,
-      },
-    });
+    //update the MUI filter that is being passed to the citizenship column
+    if (hasAtLeastOneCitizenshipFilter(updatedCitizenshipFilterIsChecked)) {
+      updateFilter({
+        name: 'citizen',
+        filter: {
+          id: 1,
+          columnField: 'citizenship',
+          operatorValue: 'customCitizenshipOperator',
+          value: selectedCitizenshipFilters,
+        },
+      });
+    } else {
+      // set the citizenship filter back to the default
+      updateFilter({
+        name: 'citizen',
+        filter: {
+          id: 1,
+          columnField: 'citizenship',
+          operatorValue: 'customCitizenshipOperator',
+          value: ['citizen'],
+        },
+      });
+    }
 
+    //update citizenshipFilterIsChecked state
     setCitizenshipFilterIsChecked(updatedCitizenshipFilterIsChecked);
   };
 
   const typedCitizenshipFilterIsChecked = Object.keys(citizenshipFilterIsChecked) as CitizenLabels[];
-  const citizenshipCheckboxFilters = typedCitizenshipFilterIsChecked.map((citizenshipType) => {
-    return (
-      <FormControlLabel
-        key={citizenshipType}
-        className="popover"
-        label={citizenshipFilterFormControlLabels[citizenshipType]}
-        control={
-          <Checkbox
-            checked={citizenshipFilterIsChecked[citizenshipType]}
-            onChange={() => handleFilterSelect(citizenshipType)}
-          />
-        }
-      />
-    );
-  });
-
-  return <Stack>{citizenshipCheckboxFilters}</Stack>;
+
+  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 (
+        <FormControlLabel
+          key={citizenshipType}
+          className={isGreenCardSubCitizenshipType ? 'gc-subcitizen-indentation' : ''}
+          label={citizenshipFilterFormControlLabels[citizenshipType]}
+          control={
+            <Checkbox
+              checked={citizenshipFilters[citizenshipType]}
+              onChange={() => handleFilterSelect(citizenshipType)}
+            />
+          }
+        />
+      );
+    });
+  };
+
+  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)} />
+          }
+        />
+      );
+    });
+  };
+
+  const renderCitizenshipFilters = (citizenshipFilters: Record<CitizenLabels, boolean>) => {
+    if (citizenshipFilters.green_card) {
+      return renderMainAndSubFilters(citizenshipFilters);
+    } else {
+      return renderMainFilters(citizenshipFilters);
+    }
+  };
+
+  return (
+    <Stack sx={{ padding: '0.5rem', gap: '0.25rem', ml: '0.5rem' }}>
+      <Stack sx={{ color: '#000000', fontWeight: 500, mt: '.5rem' }}>
+        <FormattedMessage id="citizenshipPopover.showBenefits" defaultMessage="Show benefits available to:" />
+      </Stack>
+      <Stack>{renderCitizenshipFilters(citizenshipFilterIsChecked)}</Stack>
+    </Stack>
+  );
 };
 
 export default CitizenshipPopover;

src/Components/FilterSection/FilterSection.tsx

@@ -78,13 +78,12 @@ const FilterSection = ({
     //this resets the radio buttons
     setCitizenshipFilterIsChecked({
       non_citizen: false,
-      citizen: true,
       green_card: false,
-      refugee: false,
       gc_5plus: false,
       gc_18plus_no5: false,
       gc_under18_no5: false,
       gc_under19_pregnant_no5: false,
+      refugee: false,
     });
     categoryState[1]('All Categories');
     eligibilityState[1]('eligibleBenefits');