/* global ajaxurl */
/**
* External dependencies
*/
import React from 'react';
import ReactDOM from 'react-dom';
/**
* WordPress dependencies
*/
import domReady from '@wordpress/dom-ready';
/**
* Internal dependencies
*/
import StepsBar from '../views/webp/steps-bar';
import StepContent from '../views/webp/step-content';
import FreeContent from '../views/webp/free-content';
import StepFooter from '../views/webp/step-footer';
export const WebpPage = ({ smushData }) => {
const [currentStep, setCurrentStep] = React.useState(
parseInt(smushData.startStep)
);
React.useEffect(() => {
if (2 === currentStep) {
window.SUI.suiCodeSnippet();
}
}, [currentStep]);
const [serverType, setServerType] = React.useState(
smushData.detectedServer
);
const [rulesMethod, setRulesMethod] = React.useState('automatic');
const [rulesError, setRulesError] = React.useState(false);
const makeRequest = (action, verb = 'GET') => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(
verb,
`${ajaxurl}?action=${action}&_ajax_nonce=${smushData.nonce}`,
true
);
xhr.setRequestHeader(
'Content-type',
'application/x-www-form-urlencoded'
);
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response));
} else {
reject(xhr);
}
};
xhr.onerror = () => reject(xhr);
xhr.send();
});
};
const stepContent = smushData.isPro ? (
) : (
);
return (
{smushData.isPro && (
)}
);
};
domReady(function () {
const webpPageBox = document.getElementById('smush-box-webp-wizard');
if (webpPageBox) {
ReactDOM.render(
,
webpPageBox
);
}
});