All files / src/features/Events/EventDetail/tickets EventTicketsFilter.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8x
 
 
 
 
 
13x
 
 
 
 
13x
 
 
 
 
 
 
 
 
 
 
 
 
import { FilterPagesEnum } from "@shared/GiveFilter/constants";
import { useFilterButton } from "@shared/GiveFilter/hooks/useFilterButton";
import EventListFilterButton from "../EventListFilterButton";
 
type Props = {
  eventId?: string;
};
 
/**
 * The Filter control on the Tickets tab (frames 7397-90412 / 7397-90421, panel
 * 7397-90376).
 *
 * Desktop only — on mobile the toolbar fits one icon, so Filter moves into the
 * overflow sheet (`EventTicketsMobileActions`, frame 7397-90578).
 *
 * The panel itself is the shared `GiveFilterModal` — the Figma node is literally
 * named "Filter Side Panels - Manage Money", and the shared side panel already
 * matches it (500px, "Filters" header, Apply / Clear All Filters footer). All
 * this component contributes is the `EVENT_TICKETS` page id; the button (with
 * its ✕ clear chip, frame 8238-63616) is shared with the Transactions tab and
 * sections live in `useGetFilterSectionPerPage`.
 *
 * `productId` has to be handed over here rather than read inside the panel: the
 * modal is mounted at the app root, outside the route that knows the event.
 */
const EventTicketsFilter = ({ eventId }: Props) => {
  const {
    handleOpenFilterModal,
    handleResetFilters,
    filtersAmount,
    filterLabel,
  } = useFilterButton({
    filterPage: FilterPagesEnum.EVENT_TICKETS,
    productId: eventId,
  });
 
  return (
    <EventListFilterButton
      label={filterLabel}
      filtersAmount={filtersAmount}
      onOpen={handleOpenFilterModal}
      onClear={handleResetFilters}
      testId="event-tickets-filter-button"
    />
  );
};
 
export default EventTicketsFilter;