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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 3x 3x 3x 3x 3x 1x 1x 3x 3x 3x 3x 9x | import React, { useState } from "react";
import { CaretUpIcon, CaretDownIcon } from "@phosphor-icons/react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import GiveButton from "@shared/Button/GiveButton";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { useGiveNotificationContext } from "../provider/GiveNotificationProvider";
import { Box } from "@mui/material";
import { ACCOUNT_OPTIONS } from "../utils/accountUtils";
import { useAppTheme } from "@theme/v2/Provider";
function AccountTypeSelector() {
const { teamAccountType, setTeamAccountType } = useGiveNotificationContext();
const { isMobileView } = useCustomThemeV2();
const { palette } = useAppTheme();
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
const onOpenMenu = (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
setAnchorEl(event.currentTarget);
};
const onCloseMenu = () => {
setAnchorEl(null);
};
const handleSelect = (
event: React.MouseEvent,
option: {
label: string;
value: string;
type: "all" | "merchant" | "provider";
},
) => {
event.stopPropagation();
setTeamAccountType(option);
setAnchorEl(null);
};
const CaretIcon = anchorEl ? CaretUpIcon : CaretDownIcon;
return (
<>
<Box
alignItems="center"
justifyContent="center"
py={2}
pl={2}
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
sx={{
borderBottom: `1px solid ${palette.border?.primary}`,
}}
>
<GiveButton
data-testid="give-notification-account-selector"
label={teamAccountType.label}
endIcon={<CaretIcon size={16} />}
variant="ghost"
size="large"
color="light"
onClick={onOpenMenu}
sx={{
padding: "6px 8px",
}}
/>
</Box>
<ContextualMenu
color={isMobileView ? "primary" : "tertiary"}
texture={isMobileView ? "solid" : "blurred"}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
handleClose={onCloseMenu}
onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
anchorEl={anchorEl}
Header={null}
options={ACCOUNT_OPTIONS.map((option) => ({
text: option.label,
onClick: (e: React.MouseEvent) => handleSelect(e, option),
"data-testid": `account-option-${option.value}`,
}))}
/>
</>
);
}
export default AccountTypeSelector;
|