Skip to content
import Box from '@elementor/ui/Box';
import Dialog from '@elementor/ui/Dialog';
import DialogActions from '@elementor/ui/DialogActions';
import DialogContent from '@elementor/ui/DialogContent';
import DialogHeader from '@elementor/ui/DialogHeader';
import DialogTitle from '@elementor/ui/DialogTitle';
import ErrorBoundary from '@elementor/ui/ErrorBoundary';
import FormControl from '@elementor/ui/FormControl';
import FormHelperText from '@elementor/ui/FormHelperText';
import FormLabel from '@elementor/ui/FormLabel';
import TextField from '@elementor/ui/TextField';
import Typography from '@elementor/ui/Typography';
import { styled } from '@elementor/ui/styles';
import { AlertError, HtmlToTypography } from '@ea11y/components';
import Button from '@ea11y/components/button';
import { useSettings, useStorage } from '@ea11y/hooks';
import { useToastNotification } from '@ea11y-apps/global/hooks';
import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import APISettings from '../../api';
import { Statement } from '../../helpers/accessibility-statement';
import {
checkCompanyName,
checkDomain,
checkEmail,
parseContent,
} from '../../helpers/statement-generator';
// Customization for the WP admin global CSS.
const StyledTextField = styled(TextField)`
width: 100%;
.wp-admin & .MuiInputBase-input,
& .MuiInputBase-input:focus {
background-color: initial;
box-shadow: none;
border: 0;
color: inherit;
outline: 0;
padding: 16.5px 14px 16.5px 14px;
&.MuiInputBase-inputSizeSmall {
padding: 8.5px 14px 8.5px 14px;
}
height: 40px;
}
`;
const StatementGenerator = ({ open, close }) => {
const [isValidName, setValidName] = useState(true);
const [isValidEmail, setValidEmail] = useState(true);
const [isValidDomain, setValidDomain] = useState(true);
const { success, error } = useToastNotification();
const {
companyData,
setCompanyData,
setAccessibilityStatementData,
setShowAccessibilityGeneratedInfotip,
} = useSettings();
const { save } = useStorage();
const isSubmitEnabled =
companyData.company_name &&
companyData.company_website &&
companyData.company_email &&
isValidEmail &&
isValidName &&
isValidDomain;
const handleClose = () => {
close();
};
const validateForm = (key, value) => {
switch (key) {
case 'company_website':
setValidDomain(checkDomain(value));
break;
case 'company_name':
setValidName(checkCompanyName(value));
break;
case 'company_email':
setValidEmail(checkEmail(value));
break;
default:
break;
}
};
const updateCompanyData = (key, value) => {
const data = {
...companyData,
[key]: value,
};
setCompanyData(data);
validateForm(key, value);
};
const createPage = async () => {
const parsedContent = parseContent(Statement, companyData);
try {
const response = await APISettings.addPage({
title: 'Accessibility statement',
content: parsedContent,
status: 'publish',
});
await setAccessibilityStatementData({
statement: parsedContent,
pageId: response.id,
id: response.id,
label: 'Accessibility statement',
createdOn: response.date,
link: response.link,
});
await setShowAccessibilityGeneratedInfotip(true);
await save({
ea11y_accessibility_statement_data: {
statement: parsedContent,
pageId: response.id,
id: response.id,
createdOn: response.date,
link: response.link,
label: 'Accessibility statement',
},
ea11y_show_accessibility_generated_page_infotip: true,
});
// Update accessibility statement URL in the global object.
if (window?.ea11yWidget) {
window.ea11yWidget.accessibilityStatementURL = response.link;
}
await close();
await success('Page created', 'pojo-accessibility');
mixpanelService.sendEvent(mixpanelEvents.statementPageCreated);
} catch (e) {
error('Error while creating page', 'pojo-accessibility');
console.error(e);
}
};
return (
}>
);
};
export default StatementGenerator;