Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 50 51 52 53 54 55 56 57 58 59 | 9x 48x 48x 48x 3x 45x | import { FunnelSimpleIcon } from "@phosphor-icons/react";
import { FilterPagesEnum } from "@shared/GiveFilter/constants";
import { useFilterButton } from "@shared/GiveFilter/hooks/useFilterButton";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import EventListFilterButton from "./EventListFilterButton";
type Props = {
eventId?: string;
};
/**
* The Filter control on the Event Detail Transactions tab (panel: frame
* 7397-80180).
*
* Was a date-only popover while this page had no `FilterPagesEnum` entry; it now
* opens the same shared side panel as the Tickets tab, with Transaction Date /
* Transaction Status / Ticket Name. `productId` is handed over here because the
* panel renders at the app root, outside the route that knows the event, and its
* Ticket Name chips are that event's tiers.
*/
const EventTransactionsFilter = ({ eventId }: Props) => {
const { isMobileView } = useCustomThemeV2();
const {
handleOpenFilterModal,
handleResetFilters,
filtersAmount,
filterLabel,
} = useFilterButton({
filterPage: FilterPagesEnum.EVENT_TRANSACTIONS,
productId: eventId,
});
if (isMobileView) {
return (
<GiveIconButton
Icon={FunnelSimpleIcon}
variant={filtersAmount > 0 ? "filled" : "ghost"}
size="large"
aria-label="Filter transactions"
data-testid="event-transactions-filter-button"
onClick={handleOpenFilterModal}
/>
);
}
return (
<EventListFilterButton
label={filterLabel}
filtersAmount={filtersAmount}
onOpen={handleOpenFilterModal}
onClear={handleResetFilters}
testId="event-transactions-filter-button"
/>
);
};
export default EventTransactionsFilter;
|