Current path: home/webdevt/www/wdp/wp-content/plugins/complianz-gdpr/settings/src/Settings/DataBreachReports/
?? Go up: /home/webdevt/www/wdp/wp-content/plugins/complianz-gdpr/settings/src/Settings
import useDataBreachReportsData from "./DataBreachReportsData";
import {useState, useEffect} from "@wordpress/element";
import { __ } from '@wordpress/i18n';
import Field from "../Fields/Field";
import useFields from "../Fields/FieldsData";
import Icon from "../../utils/Icon";
import DataBreachConclusion from "./DataBreachConclusion";
import {memo} from "@wordpress/element";
import LabelWrapper from "../Fields/LabelWrapper";
import SelectInput from "../Inputs/SelectInput";
const CreateDataBreachReport = ({label, field}) => {
const { fields, fileName, fetching, loadingFields, updating, regions, documentsLoaded, resetEditDocumentId, savedDocument, fetchData, fetchFields, updateField, save, editDocumentId, region, setRegion} = useDataBreachReportsData();
const [ createBtnDisabled, setCreateBtnDisabled ] = useState( true );
const [ downloadBtnDisabled, setDownloadBtnDisabled ] = useState( false );
const [step, setStep] = useState(0);
const {allRequiredFieldsCompleted,fetchAllFieldsCompleted, fieldsLoaded, showSavedSettingsNotice} = useFields();
let scrollAnchor = React.createRef();
useEffect( () => {
if (editDocumentId) {
setStep(0);
}
if ( editDocumentId && scrollAnchor.current ) {
scrollAnchor.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
},[editDocumentId]);
const fieldsPerStep = 5;
useEffect(() => {
if (!documentsLoaded && cmplz_settings.is_premium) fetchData();
}, [documentsLoaded])
useEffect (() => {
fetchAllFieldsCompleted();
}, [fieldsLoaded])
useEffect(() => {
if (region!=='' ) {
setCreateBtnDisabled(false);
} else {
setCreateBtnDisabled(true);
}
}, [region, fetching, editDocumentId])
const onChangeHandler = (fieldId, value) => {
updateField(fieldId, value);
}
const download = async () => {
if (savedDocument.downloadUrl !== '') {
setDownloadBtnDisabled(true);
const url = savedDocument.download_url;
try {
let request = new XMLHttpRequest();
request.responseType = 'blob';
request.open('get', url, true);
request.send();
request.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
let obj = window.URL.createObjectURL(this.response);
let element = window.document.createElement('a');
element.setAttribute('href',obj);
element.setAttribute('download', savedDocument.title);
window.document.body.appendChild(element);
//onClick property
element.click();
setDownloadBtnDisabled(false);
setTimeout(function() {
window.URL.revokeObjectURL(obj);
}, 60 * 1000);
}
};
} catch (error) {
console.error(error);
setDownloadBtnDisabled(false);
}
}
};
const saveFields = async () => {
await save(region);
showSavedSettingsNotice();
}
const saveAndExit = async () => {
await save(region);
showSavedSettingsNotice();
setStep(step+1);
}
useEffect(() => {
if (region!=='' && !fetching) {
setCreateBtnDisabled(false);
}
}, [region, fetching])
const onCreateHandler = async () => {
await fetchFields(region);
setStep(1);
}
//select the next 5 fields from fields
const getStepFields = (activeFields) => {
const start = (step-1)*fieldsPerStep;
const end = start+fieldsPerStep;
return activeFields.slice(start, end);
}
let visibleFields = fields.filter(field => typeof field.conditionallyDisabled==='undefined' || field.conditionallyDisabled ===false);
let lastStep = Math.ceil(visibleFields.length/fieldsPerStep);
let selectedFields = getStepFields(fields);
return (
<>
{!allRequiredFieldsCompleted && <div className="cmplz-locked">
<div className="cmplz-locked-overlay">
<span className="cmplz-task-status cmplz-warning">{__("Incomplete","complianz-gdpr")}</span>
<span>
{__("The wizard has not been completed yet, but this field requires information from the wizard. Please complete the wizard first.","complianz-gdpr")}
</span>
</div>
</div>}
{step===0 &&
<>
{ editDocumentId &&
<div className="cmplz-selected-document">
{fileName}
</div>
}
<LabelWrapper id={'region_for_databreaches'}
label={ __("Region","complianz-gdpr") }
required={true} type={'select'}/>
<SelectInput innerRef={scrollAnchor}
disabled={updating}
onChange={ ( fieldValue ) => setRegion(fieldValue) }
options={ regions }
value= { region }
required={true}
/>
<div className="cmplz-table-header">
<LabelWrapper id={'region_for_databreaches'}
label={__("Create Data Breach report",'complianz-gdpr') }
type={'button'}/>
<div className='cmplz-table-header-controls'>
{editDocumentId && <>
<button disabled={updating} className="button button-default" onClick={()=>{resetEditDocumentId();setStep(0)}}>{__("Cancel",'complianz-gdpr')}</button>
<button disabled={updating} className="button button-primary" onClick={()=>setStep(step+1)}>{__("Next",'complianz-gdpr')}</button>
<button disabled={updating} className="button button-primary" onClick={()=>saveFields()}>{__("Save",'complianz-gdpr')}</button>
</>}
{!editDocumentId && <>
<button disabled={createBtnDisabled || loadingFields} className="button button-primary" onClick={()=>onCreateHandler() }>
{__("Create",'complianz-gdpr')}
{loadingFields && <Icon name = "loading" color = 'grey' />}
</button>
</>}
</div>
</div>
</>
}
{
step>0 && <>
{ step <= lastStep && selectedFields.map((field, i) =>
<Field key={i} index={i} field={field} isCustomField={true} customChangeHandler={(field, value)=>onChangeHandler(field, value)}/>)
}
{ step > lastStep &&
<>
<DataBreachConclusion />
</>
}
<div className="cmplz-table-header">
<div className='cmplz-table-header-controls'>
<button disabled={updating} className="button button-default" onClick={()=>{resetEditDocumentId();setStep(0)}}>
{ step <= lastStep && __("Cancel",'complianz-gdpr')}
{ step > lastStep && __("Exit",'complianz-gdpr')}
</button>
{ step <= lastStep && <button className="button button-default" onClick={()=>setStep(step-1)}>{__("Previous","complianz-gdpr")}</button>}
{ step < lastStep &&
<>
<button className="button button-primary" onClick={()=>setStep(step+1)}>{__("Next","complianz-gdpr")}</button>
</>
}
{ step === lastStep &&
<>
<button className="button button-primary" onClick={()=>saveAndExit()}>
{__("Finish","complianz-gdpr")}
{updating && <Icon name = "loading" color = 'grey' />}
</button>
</>
}
{ step > lastStep && savedDocument && savedDocument.has_to_be_reported && <>
<button disabled={downloadBtnDisabled} className="button button-primary" onClick={()=>download()}>
{__("Download","complianz-gdpr")}
</button>
</>}
{editDocumentId && step < lastStep && <>
<button disabled={updating} className="button button-primary" onClick={()=>saveFields()}>{__("Save",'complianz-gdpr')}</button>
</>}
</div></div>
</>
}
</>
)
}
export default memo(CreateDataBreachReport);