mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-24 15:40:55 +08:00
c084b68b5b
* add: missing mixpanel events * update: use variable for hardcoded names * update: use variable for hardcoded names
109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import {
|
|
CalendarDollarIcon,
|
|
ExternalLinkIcon,
|
|
UserIcon,
|
|
} from '@elementor/icons';
|
|
import Avatar from '@elementor/ui/Avatar';
|
|
import Box from '@elementor/ui/Box';
|
|
import Chip from '@elementor/ui/Chip';
|
|
import Menu from '@elementor/ui/Menu';
|
|
import MenuItem from '@elementor/ui/MenuItem';
|
|
import Tooltip from '@elementor/ui/Tooltip';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { useSettings, useStorage, useToastNotification } from '@ea11y/hooks';
|
|
import { UserArrowIcon } from '@ea11y/icons';
|
|
import { eventNames, mixpanelService } from '@ea11y/services';
|
|
import { __ } from '@wordpress/i18n';
|
|
import API from '../../api/index';
|
|
import { SUBSCRIPTION_LINK } from '../../constants/index';
|
|
import { truncateEmail } from '../../helpers/popup-menu';
|
|
|
|
export const PopupMenu = (menuProps, { closeAction }) => {
|
|
const { save } = useStorage();
|
|
const { error } = useToastNotification();
|
|
const { planData } = useSettings();
|
|
|
|
const onDeactivateAndDisconnect = async () => {
|
|
try {
|
|
await API.deactivate();
|
|
await API.redirectToConnect();
|
|
|
|
await save({
|
|
ea11y_close_post_connect_modal: false,
|
|
});
|
|
|
|
mixpanelService.sendEvent(eventNames.menuButtonClicked, {
|
|
buttonName: 'Switch account',
|
|
});
|
|
} catch (e) {
|
|
error(
|
|
__('Failed to switch account. Please try again.', 'pojo-accessibility'),
|
|
);
|
|
|
|
console.error(e);
|
|
}
|
|
};
|
|
return (
|
|
<Menu
|
|
{...menuProps}
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'center',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'center',
|
|
}}
|
|
PaperProps={{
|
|
sx: {
|
|
backgroundColor: 'text.primary',
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem onClick={closeAction} sx={{ gap: 1, width: '240px' }}>
|
|
<Avatar>
|
|
<UserIcon sx={{ color: 'common.white' }} />
|
|
</Avatar>
|
|
|
|
<Box display="flex" flexDirection="column" gap={0}>
|
|
<Tooltip title={planData?.user?.email}>
|
|
<Typography variant="caption" color="common.white">
|
|
{truncateEmail(planData?.user?.email)}
|
|
</Typography>
|
|
</Tooltip>
|
|
{planData?.plan?.name && (
|
|
<Chip
|
|
color="info"
|
|
variant="standard"
|
|
label={planData?.plan?.name}
|
|
size="small"
|
|
sx={{ width: 'fit-content', marginTop: 0.5 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={onDeactivateAndDisconnect}>
|
|
<UserArrowIcon sx={{ color: 'common.white' }} />
|
|
|
|
<Typography color="common.white" marginLeft={1}>
|
|
{__('Switch account', 'pojo-accessibility')}
|
|
</Typography>
|
|
</MenuItem>
|
|
<MenuItem
|
|
sx={{ width: '100%', justifyContent: 'space-between' }}
|
|
onClick={() => window.open(SUBSCRIPTION_LINK)}
|
|
>
|
|
<Box display="flex" flexDirection="row">
|
|
<CalendarDollarIcon sx={{ color: 'common.white' }} />
|
|
<Typography color="common.white" marginLeft={1}>
|
|
{__('Subscription', 'pojo-accessibility')}
|
|
</Typography>
|
|
</Box>
|
|
<ExternalLinkIcon sx={{ color: 'common.white' }} />
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default PopupMenu;
|
