fix: replace accompanying toggle with multi-select volunteer type accordion

src/components/Dashboard/Volunteers/Filters/FiltersContent.tsx

@@ -1,8 +1,6 @@
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { CardsFilter } from "./types";
-import { Heading4, Paragraph } from "@/components/styled/text";
-import { SwitchButton } from "@/components/core/button";
 import { createFilterItems } from "./helpers";
 import AccordionFilter from "../../common/CardsFilter/AccordionFilter";
 import { SetFilter } from "../../common/CardsFilter/types";
@@ -15,34 +13,14 @@ interface Props {
 export default function FiltersContent({ setFilter, filter }: Props) {
   const { t } = useTranslation();
 
-  const { availabilityFilters, districtFilters, engagementFilters, languageFilters, accompanyingFilter, typeFilters } =
-    createFilterItems(filter, setFilter, t);
+  const { availabilityFilters, districtFilters, engagementFilters, languageFilters, typeFilters } = createFilterItems(
+    filter,
+    setFilter,
+    t,
+  );
 
   return (
     <FiltersContentContainer>
-      <AccompanyingFilterContainer>
-        <Heading4 margin={0} color="var(--color-blue-700)">
-          {t("dashboard.volunteers.filters.accompanying")}
-        </Heading4>
-
-        <AccompanyingFilterHeaderContainer>
-          <SwitchButton
-            isChecked={accompanyingFilter.checked as boolean}
-            onToggle={() => accompanyingFilter.onChange(!accompanyingFilter.checked)}
-          />
-
-          <Paragraph
-            fontWeight="var(--filters-description-font-weight)"
-            fontSize="var(--filters-description-font-size)"
-            color="var(--color-blue-700)"
-            lineheight="var(--filters-description-line-height)"
-            letterSpacing="var(--filters-description-letter-spacing)"
-          >
-            {t("dashboard.volunteers.filters.accompanyingDesc")}
-          </Paragraph>
-        </AccompanyingFilterHeaderContainer>
-      </AccompanyingFilterContainer>
-
       <AccordionFilter header={t("dashboard.volunteers.filters.volunteerType_title")} items={typeFilters} />
       <AccordionFilter header={t("dashboard.volunteers.filters.engagement.header")} items={engagementFilters} />
       <AccordionFilter header={t("dashboard.volunteers.filters.district")} items={districtFilters} />
@@ -66,16 +44,3 @@ const FiltersContentContainer = styled.div`
   gap: var(--opportunities-filters-content-container-gap);
   padding: var(--opportunities-filters-content-container-padding);
 `;
-
-const AccompanyingFilterContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--opportunities-filters-content-filter-container-gap);
-`;
-
-const AccompanyingFilterHeaderContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: var(--dashboard-volunteers-filters-accompanying-header-container-gap);
-  align-items: center;
-`;

src/components/Dashboard/Volunteers/Filters/constants.tsx

@@ -10,7 +10,6 @@ import { CardsFilter } from "./types";
 
 export const defaultVolunteerCardsFilter: CardsFilter = {
   [QueryParamsKeys.SEARCH]: "",
-  [QueryParamsKeys.ACCOMPANYING]: false,
   type: {
     [VolunteerStateTypeType.ACCOMPANYING]: false,
     [VolunteerStateTypeType.REGULAR]: false,

src/components/Dashboard/Volunteers/Filters/helpers.ts

@@ -1,17 +1,13 @@
 import { TFunction } from "i18next";
 import { Availability, CardsFilter } from "./types";
-import { generateFilterControlItem, generateNestedFilterControlItems } from "../../common/CardsFilter/helpers";
+import { generateNestedFilterControlItems } from "../../common/CardsFilter/helpers";
 import { SelectionMap, SetFilter } from "../../common/CardsFilter/types";
 import { QueryParamsKeys } from "need4deed-sdk";
 
 /**
  * Creates filter items for districts, languages, engagement, and availability.
  */
 export const createFilterItems = (filter: CardsFilter, setFilter: SetFilter<CardsFilter>, t: TFunction) => {
-  const accompanyingFilter = generateFilterControlItem(filter, setFilter, QueryParamsKeys.ACCOMPANYING, (key) =>
-    t(`dashboard.volunteers.filters.${key}`),
-  );
-
   const typeFilters = generateNestedFilterControlItems(filter.type, setFilter, "type", (key) =>
     t(`dashboard.volunteers.filters.volunteerType_options.${key}`),
   );
@@ -39,7 +35,7 @@ export const createFilterItems = (filter: CardsFilter, setFilter: SetFilter<Card
 
   const availabilityFilters = createAvailabilityFilterItems(filter[QueryParamsKeys.AVAILABILITY], setFilter, t);
 
-  return { districtFilters, languageFilters, engagementFilters, availabilityFilters, accompanyingFilter, typeFilters };
+  return { districtFilters, languageFilters, engagementFilters, availabilityFilters, typeFilters };
 };
 
 /**
@@ -81,12 +77,10 @@ export const createSelectedFilterItemsAsFlatArray = (
 ) => {
   const filterItems = createFilterItems(filter, setFilter, t);
 
-  const { districtFilters, engagementFilters, languageFilters, availabilityFilters, accompanyingFilter, typeFilters } =
-    filterItems;
+  const { districtFilters, engagementFilters, languageFilters, availabilityFilters, typeFilters } = filterItems;
   const flatAvFilters = availabilityFilters.map((avFilter) => avFilter.items).flat();
 
   return [
-    accompanyingFilter,
     ...typeFilters,
     ...districtFilters,
     ...engagementFilters,

src/components/Dashboard/Volunteers/Filters/types.ts

@@ -5,7 +5,6 @@ export type Availability = ScheduleFilter;
 
 export interface CardsFilter {
   [QueryParamsKeys.SEARCH]: string;
-  [QueryParamsKeys.ACCOMPANYING]: boolean;
   [QueryParamsKeys.ENGAGEMENT]: SelectionMap;
   [QueryParamsKeys.AVAILABILITY]: Availability;
   [QueryParamsKeys.DISTRICT]: SelectionMap;

src/components/Dashboard/Volunteers/helpers.ts

@@ -74,9 +74,6 @@ export function serializeFilters(
   if (filter.search) params.set(QueryParamsKeys.SEARCH, filter.search);
   else params.delete(QueryParamsKeys.SEARCH);
 
-  if (filter.accompanying) params.set(QueryParamsKeys.ACCOMPANYING, "true");
-  else params.delete(QueryParamsKeys.ACCOMPANYING);
-
   params.delete("type");
   Object.entries(filter.type).forEach(([key, value]) => {
     if (value === true) params.append("type", key);
@@ -144,11 +141,6 @@ export function deserializeVolunteerFilters(filter: CardsFilter, searchParams: R
     newFilter.search = search;
   }
 
-  const queryAccompanying = searchParams.get(QueryParamsKeys.ACCOMPANYING);
-  if (queryAccompanying === "true") {
-    newFilter.accompanying = true;
-  }
-
   const queryTypes = searchParams.getAll("type");
   queryTypes.forEach((t) => {
     if (newFilter.type[t] !== undefined) {