diff --git a/sites/public/__tests__/components/browse/FilterDrawer.test.tsx b/sites/public/__tests__/components/browse/FilterDrawer.test.tsx index eff90ff446..7d1c7e8aa9 100644 --- a/sites/public/__tests__/components/browse/FilterDrawer.test.tsx +++ b/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( + {}} + 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() + }) }) diff --git a/sites/public/src/components/browse/FilterDrawer.tsx b/sites/public/src/components/browse/FilterDrawer.tsx index 0897795794..a1dc8a3a56 100644 --- a/sites/public/src/components/browse/FilterDrawer.tsx +++ b/sites/public/src/components/browse/FilterDrawer.tsx @@ -16,6 +16,7 @@ import { FilterData, getAvailabilityValues, RentSection, + ReservedCommunityTypes, SearchSection, unitTypeMapping, unitTypesSorted, @@ -23,6 +24,7 @@ import { unitTypeUnitGroupsMapping, } from "./FilterDrawerHelpers" import { isTrue } from "../../lib/helpers" +import { useMemo } from "react" export interface FilterDrawerProps { filterState: FilterData @@ -51,10 +53,52 @@ 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}`) ) + const communityFilters = useMemo(() => { + if (swapCommunityTypeWithPrograms) { + return ( + props.multiselectData.length > 0 && ( + + multi.untranslatedText + ? t(`listingFilters.program.${multi.untranslatedText}`) + : t(`listingFilters.program.${multi.text}`) + ), + props.multiselectData?.map((multi) => multi.id), + props.filterState + )} + register={register} + /> + ) + ) + } else { + return ( + Object.values(ReservedCommunityTypes).length > 0 && ( + t(`finder.building.${type}`)), + Object.values(ReservedCommunityTypes).map((type) => type), + props.filterState + )} + register={register} + /> + ) + ) + } + }, [props.filterState, props.multiselectData, register, swapCommunityTypeWithPrograms]) + return ( { register={register} /> - {props.multiselectData?.length > 0 && ( - - multi.untranslatedText - ? t(`listingFilters.program.${multi.untranslatedText}`) - : t(`listingFilters.program.${multi.text}`) - ), - props.multiselectData?.map((multi) => multi.id), - props.filterState - )} - register={register} - /> - )} + {communityFilters}