mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-24 06:58:40 +08:00
3b1e2380ca
* fix: switch was not working properly in some cases * update: revert wp-scripts version to 28.0.0 to add support for older WordPress versions * update: revert wp-scripts to 27.9.0 * add: support for react-jsx-runtime in older versions of WordPress * update: version to the latest wp-scripts 30.3.0 * update: add lib/ to gitignore * update: plugin name
89 lines
2 KiB
JavaScript
89 lines
2 KiB
JavaScript
import Button from '@elementor/ui/Button';
|
|
import Grid from '@elementor/ui/Grid';
|
|
import Modal from '@elementor/ui/Modal';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { styled } from '@elementor/ui/styles';
|
|
import { useModal, useStorage } from '@ea11y/hooks';
|
|
import { PostConnectModalIcon } from '@ea11y/icons';
|
|
import { mixpanelService } from '@ea11y/services';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
const StyledGrid = styled(Grid)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 600px;
|
|
max-width: 100%;
|
|
height: 530px;
|
|
background-color: ${({ theme }) => theme.palette.background.paper};
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
`;
|
|
|
|
const PostConnectModal = () => {
|
|
const { isOpen, close } = useModal();
|
|
const { save } = useStorage();
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
mixpanelService.sendEvent('connect_success');
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const onClose = async () => {
|
|
await save({
|
|
ea11y_close_post_connect_modal: true,
|
|
});
|
|
|
|
close();
|
|
};
|
|
|
|
return (
|
|
<Modal open={isOpen}>
|
|
<StyledGrid container sx={{ boxShadow: 24 }}>
|
|
<PostConnectModalIcon />
|
|
|
|
<Typography
|
|
variant="h5"
|
|
color="text.primary"
|
|
marginTop={5}
|
|
marginBottom={1}
|
|
>
|
|
{__("You're all set", 'pojo-accessibility')}
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ width: '500px', maxWidth: '100%' }}
|
|
color="text.primary"
|
|
marginBottom={5}
|
|
>
|
|
{__(
|
|
'Ally - Web Accessibility is now connected and ready to use on your site.',
|
|
'pojo-accessibility',
|
|
)}
|
|
</Typography>
|
|
|
|
<Button
|
|
variant="contained"
|
|
sx={{ padding: '8px 22px', width: '300px' }}
|
|
onClick={onClose}
|
|
color="info"
|
|
>
|
|
{__('Done', 'pojo-accessibility')}
|
|
</Button>
|
|
</StyledGrid>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default PostConnectModal;
|
