feat: add filtering by core community type definitions

sites/public/__tests__/components/browse/FilterDrawer.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React from "react"
-import { screen } from "@testing-library/dom"
+import { screen, within } from "@testing-library/dom"
 import {
   FeatureFlagEnum,
   HomeTypeEnum,
@@ -57,8 +57,10 @@ describe("FilterDrawer", () => {
         isOpen={true}
         onClose={() => {}}
         onSubmit={() => {}}
+        onClear={() => {}}
         filterState={{}}
         multiselectData={mockMultiselect}
+        activeFeatureFlags={[FeatureFlagEnum.swapCommunityTypeWithPrograms]}
       />
     )
     expect(screen.getByLabelText("Close")).toBeInTheDocument()
@@ -216,8 +218,10 @@ describe("FilterDrawer", () => {
         isOpen={true}
         onClose={() => {}}
         onSubmit={() => {}}
+        onClear={() => {}}
         filterState={filterState}
         multiselectData={mockMultiselect}
+        activeFeatureFlags={[FeatureFlagEnum.swapCommunityTypeWithPrograms]}
       />
     )
     expect(screen.getByLabelText("Close")).toBeInTheDocument()
@@ -364,9 +368,13 @@ describe("FilterDrawer", () => {
         isOpen={true}
         onClose={() => {}}
         onSubmit={() => {}}
+        onClear={() => {}}
         filterState={{}}
         multiselectData={mockMultiselect}
-        activeFeatureFlags={[FeatureFlagEnum.enableUnitGroups]}
+        activeFeatureFlags={[
+          FeatureFlagEnum.enableUnitGroups,
+          FeatureFlagEnum.swapCommunityTypeWithPrograms,
+        ]}
       />
     )
 
@@ -384,4 +392,41 @@ describe("FilterDrawer", () => {
     expect(screen.queryByLabelText("SRO")).not.toBeInTheDocument()
     expect(screen.queryByLabelText("5 bedroom")).not.toBeInTheDocument()
   })
+
+  it("should swap to reserved community type", () => {
+    render(
+      <FilterDrawer
+        isOpen={true}
+        onClose={() => {}}
+        onSubmit={() => {}}
+        onClear={() => {}}
+        filterState={{}}
+        multiselectData={[]}
+        activeFeatureFlags={[]}
+      />
+    )
+
+    const communityTitle = screen.getByText(/community/i)
+    expect(communityTitle).toBeInTheDocument()
+
+    const communityFilterSection = communityTitle.parentElement
+
+    expect(
+      within(communityFilterSection).getByText(/rentals for residents with disabilities/i)
+    ).toBeInTheDocument()
+    expect(
+      within(communityFilterSection).getByText(/rentals for seniors 55\+/i)
+    ).toBeInTheDocument()
+    expect(
+      within(communityFilterSection).getByRole("checkbox", { name: /rentals for seniors 62\+/i })
+    ).toBeInTheDocument()
+    expect(
+      within(communityFilterSection).getByRole("checkbox", {
+        name: /supportive housing for the homeless/i,
+      })
+    ).toBeInTheDocument()
+    expect(
+      within(communityFilterSection).getByRole("checkbox", { name: /rentals for veterans/i })
+    ).toBeInTheDocument()
+  })
 })

sites/public/src/components/browse/FilterDrawer.tsx

@@ -16,6 +16,7 @@ import {
   FilterData,
   getAvailabilityValues,
   RentSection,
+  ReservedCommunityTypes,
   SearchSection,
   unitTypeMapping,
   unitTypesSorted,
@@ -51,6 +52,10 @@ const FilterDrawer = (props: FilterDrawerProps) => {
     (entry) => entry === FeatureFlagEnum.enableUnitGroups
   )
 
+  const swapCommunityTypeWithPrograms = props.activeFeatureFlags?.some(
+    (entry) => entry === FeatureFlagEnum.swapCommunityTypeWithPrograms
+  )
+
   const availabilityLabels = getAvailabilityValues(enableUnitGroups).map((key) =>
     t(`listings.availability.${key}`)
   )
@@ -143,22 +148,31 @@ const FilterDrawer = (props: FilterDrawerProps) => {
             register={register}
           />
           <SearchSection register={register} nameState={props.filterState?.name} />
-          {props.multiselectData?.length > 0 && (
-            <CheckboxGroup
-              groupLabel={t("t.community")}
-              fields={buildDefaultFilterFields(
-                ListingFilterKeys.multiselectQuestions,
-                props.multiselectData?.map((multi) =>
-                  multi.untranslatedText
-                    ? t(`listingFilters.program.${multi.untranslatedText}`)
-                    : t(`listingFilters.program.${multi.text}`)
-                ),
-                props.multiselectData?.map((multi) => multi.id),
-                props.filterState
-              )}
-              register={register}
-            />
-          )}
+          <CheckboxGroup
+            groupLabel={t("t.community")}
+            fields={
+              swapCommunityTypeWithPrograms
+                ? buildDefaultFilterFields(
+                    ListingFilterKeys.multiselectQuestions,
+                    props.multiselectData?.map((multi) =>
+                      multi.untranslatedText
+                        ? t(`listingFilters.program.${multi.untranslatedText}`)
+                        : t(`listingFilters.program.${multi.text}`)
+                    ),
+                    props.multiselectData?.map((multi) => multi.id),
+                    props.filterState
+                  )
+                : buildDefaultFilterFields(
+                    ListingFilterKeys.reservedCommunityTypes,
+                    Object.values(ReservedCommunityTypes).map((type) =>
+                      t(`finder.building.${type}`)
+                    ),
+                    Object.values(ReservedCommunityTypes).map((type) => type),
+                    props.filterState
+                  )
+            }
+            register={register}
+          />
         </Form>
       </Drawer.Content>
       <Drawer.Footer>