mirror of
https://ghproxy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-07-22 12:27:13 +08:00
107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
import Button from '@elementor/ui/Button';
|
|
import Dialog from '@elementor/ui/Dialog';
|
|
import DialogActions from '@elementor/ui/DialogActions';
|
|
import DialogContent from '@elementor/ui/DialogContent';
|
|
import DialogContentText from '@elementor/ui/DialogContentText';
|
|
import DialogHeader from '@elementor/ui/DialogHeader';
|
|
import DialogTitle from '@elementor/ui/DialogTitle';
|
|
import { useSettings, useStorage } from '@ea11y/hooks';
|
|
import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { usePluginSettingsContext } from '../../contexts/plugin-settings';
|
|
|
|
const GetStartedModal = () => {
|
|
const { save } = useStorage();
|
|
const { isGetStartedModalOpen, setIsGetStartedModalOpen } = useSettings();
|
|
const {
|
|
isConnected,
|
|
closePostConnectModal,
|
|
isUrlMismatch,
|
|
closeOnboardingModal,
|
|
closeGetStartedModal,
|
|
} = usePluginSettingsContext();
|
|
|
|
useEffect(() => {
|
|
if (
|
|
isConnected &&
|
|
closePostConnectModal &&
|
|
!isUrlMismatch &&
|
|
closeOnboardingModal &&
|
|
!closeGetStartedModal &&
|
|
!isGetStartedModalOpen
|
|
) {
|
|
setIsGetStartedModalOpen(true);
|
|
}
|
|
}, [
|
|
isConnected,
|
|
closePostConnectModal,
|
|
isUrlMismatch,
|
|
closeOnboardingModal,
|
|
closeGetStartedModal,
|
|
]);
|
|
|
|
const handleClose = () => {
|
|
setIsGetStartedModalOpen(false);
|
|
|
|
save({
|
|
ea11y_close_get_started_modal: true,
|
|
}).catch((error) => {
|
|
console.error('Failed to save get started modal state:', error);
|
|
});
|
|
|
|
mixpanelService
|
|
.sendEvent(mixpanelEvents.menuButtonClicked, {
|
|
buttonName: 'Get started with Web Accessibility - Modal Closed',
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to send mixpanel event:', error);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={isGetStartedModalOpen}
|
|
onClose={handleClose}
|
|
aria-labelledby="get-started-dialog-title"
|
|
aria-describedby="get-started-dialog-description"
|
|
>
|
|
<DialogHeader logo={false} onClose={handleClose}>
|
|
<DialogTitle>{__('Accessibility', 'pojo-accessibility')}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogContent dividers>
|
|
<iframe
|
|
width="550"
|
|
height="309"
|
|
src="https://www.youtube.com/embed/1D9UfHJD8cE?si=0txuUSHwaXlu22BZ&controls=0"
|
|
title="YouTube video player"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen
|
|
></iframe>
|
|
<DialogContentText
|
|
variant="h5"
|
|
color="text.primary"
|
|
marginBlockStart={2}
|
|
>
|
|
{__('Getting started with Web Accessibility', 'pojo-accessibility')}
|
|
</DialogContentText>
|
|
<DialogContentText variant="body1">
|
|
{__(
|
|
'Watch this quick video to see how Web Accessibility helps you find, understand, and fix accessibility issues across your site with ease.',
|
|
'pojo-accessibility',
|
|
)}
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button onClick={handleClose} color="primary" variant="contained">
|
|
{__('Got it', 'pojo-accessibility')}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default GetStartedModal;
|
