first

wp-content/plugins/wp-smushit/_src/react/bulk/ajax-media-library-scanner-modal.js

@@ -0,0 +1,91 @@
+import React, {useEffect, useRef, useState} from "react";
+import {post} from "../utils/request";
+import MediaLibraryScannerModal from "./media-library-scanner-modal";
+
+export default function AjaxMediaLibraryScannerModal(
+	{
+		nonce = '',
+		onScanCompleted = () => false,
+		onClose = () => false,
+		focusAfterClose = ''
+	}
+) {
+	const [inProgress, setInProgress] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [cancelled, setCancelled] = useState(false);
+	const cancelledRef = useRef();
+
+	useEffect(() => {
+		cancelledRef.current = cancelled;
+	}, [cancelled]);
+
+	function start() {
+		setInProgress(true);
+
+		post('wp_smush_before_scan_library', nonce).then((response) => {
+			const sliceCount = response?.slice_count;
+			const slicesList = range(sliceCount, 1);
+			const parallelRequests = response?.parallel_requests;
+
+			handleBatch(slicesList, sliceCount, parallelRequests)
+				.then(() => {
+					setTimeout(() => {
+						onScanCompleted();
+					}, 1000);
+				});
+		});
+	}
+
+	function handleBatch(remainingSlicesList, sliceCount, parallelRequests) {
+		const batchPromises = [];
+		const completedSliceCount = Math.max(sliceCount - remainingSlicesList.length, 0);
+		const batch = remainingSlicesList.splice(0, parallelRequests);
+
+		updateProgress(completedSliceCount, sliceCount);
+
+		batch.forEach((sliceNumber) => {
+			batchPromises.push(
+				post('wp_smush_scan_library_slice', nonce, {slice: sliceNumber})
+			);
+		});
+
+		return new Promise((resolve) => {
+			Promise.all(batchPromises)
+				.then(() => {
+					if (!cancelledRef.current) {
+						if (remainingSlicesList.length) {
+							handleBatch(remainingSlicesList, sliceCount, parallelRequests)
+								.then(resolve);
+						} else {
+							updateProgress(sliceCount, sliceCount);
+							resolve();
+						}
+					}
+				});
+		});
+	}
+
+	function range(size, startAt = 0) {
+		return [...Array(size).keys()].map(i => i + startAt);
+	}
+
+	function cancelScan() {
+		setCancelled(true);
+		setInProgress(false);
+		setProgress(0);
+	}
+
+	function updateProgress(completedSlices, totalSlices) {
+		const progress = (completedSlices / totalSlices) * 100;
+		setProgress(progress);
+	}
+
+	return <MediaLibraryScannerModal
+		inProgress={inProgress}
+		progress={progress}
+		onCancel={cancelScan}
+		focusAfterClose={focusAfterClose}
+		onClose={onClose}
+		onStart={start}
+	/>;
+};

wp-content/plugins/wp-smushit/_src/react/bulk/background-media-library-scanner-modal.js

@@ -0,0 +1,76 @@
+import React, {useRef, useState} from "react";
+import {post} from "../utils/request";
+import MediaLibraryScannerModal from "./media-library-scanner-modal";
+
+export default function BackgroundMediaLibraryScannerModal(
+	{
+		nonce = '',
+		onScanCompleted = () => false,
+		onClose = () => false,
+		focusAfterClose = ''
+	}
+) {
+	const [inProgress, setInProgress] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [cancelled, setCancelled] = useState(false);
+	const progressTimeoutId = useRef(0);
+
+	function start() {
+		post('wp_smush_start_background_scan', nonce).then(() => {
+			setInProgress(true);
+			progressTimeoutId.current = setTimeout(updateProgress, 2000);
+		});
+	}
+
+	function clearProgressTimeout() {
+		if (progressTimeoutId.current) {
+			clearTimeout(progressTimeoutId.current);
+		}
+	}
+
+	function updateProgress() {
+		post('wp_smush_get_background_scan_status', nonce).then(response => {
+			const isCompleted = response?.is_completed;
+			if (isCompleted) {
+				clearProgressTimeout();
+				onScanCompleted();
+				return;
+			}
+
+			const isCancelled = response?.is_cancelled;
+			if (isCancelled) {
+				clearProgressTimeout();
+				changeStateToCancelled();
+				return;
+			}
+
+			const totalItems = response?.total_items;
+			const processedItems = response?.processed_items;
+			const progress = (processedItems / totalItems) * 100;
+			setProgress(progress);
+
+			progressTimeoutId.current = setTimeout(updateProgress, 1000);
+		});
+	}
+
+	function cancelScan() {
+		clearProgressTimeout();
+		post('wp_smush_cancel_background_scan', nonce)
+			.then(changeStateToCancelled);
+	}
+
+	function changeStateToCancelled() {
+		setCancelled(true);
+		setProgress(0);
+		setInProgress(false);
+	}
+
+	return <MediaLibraryScannerModal
+		inProgress={inProgress}
+		progress={progress}
+		onCancel={cancelScan}
+		focusAfterClose={focusAfterClose}
+		onClose={onClose}
+		onStart={start}
+	/>;
+};

wp-content/plugins/wp-smushit/_src/react/bulk/media-library-scanner-modal.js

@@ -0,0 +1,49 @@
+import React, {useEffect, useRef, useState} from "react";
+import Modal from "../common/modal";
+import {post} from "../utils/request";
+import Button from "../common/button";
+import ProgressBar from "../common/progress-bar";
+
+const {__} = wp.i18n;
+
+export default function MediaLibraryScannerModal(
+	{
+		inProgress = false,
+		progress = 0,
+		onClose = () => false,
+		onStart = () => false,
+		onCancel = () => false,
+		focusAfterClose = ''
+	}
+) {
+	function content() {
+		if (inProgress) {
+			return <>
+				<ProgressBar progress={progress}/>
+				<Button id="wp-smush-cancel-media-library-scan"
+						icon="sui-icon-close"
+						text={__('Cancel', 'wp-smushit')}
+						ghost={true}
+						onClick={onCancel}
+				/>
+			</>;
+		} else {
+			return <>
+				<Button id="wp-smush-start-media-library-scan"
+						icon="sui-icon-play"
+						text={__('Start', 'wp-smushit')}
+						onClick={onStart}
+				/>
+			</>;
+		}
+	}
+
+	return <Modal id="wp-smush-media-library-scanner-modal"
+				  title={__('Scan Media Library', 'wp-smushit')}
+				  description={__('Scans the media library to detect items to Smush.', 'wp-smushit')}
+				  onClose={onClose}
+				  focusAfterClose={focusAfterClose}
+				  disableCloseButton={inProgress}>
+		{content()}
+	</Modal>;
+};

wp-content/plugins/wp-smushit/_src/react/bulk/media-library-scanner.js

@@ -0,0 +1,52 @@
+import React, {useState} from "react";
+import domReady from '@wordpress/dom-ready';
+import ReactDOM from "react-dom";
+import Button from "../common/button";
+import FloatingNoticePlaceholder from "../common/floating-notice-placeholder";
+import {showSuccessNotice} from "../utils/notices";
+import AjaxMediaLibraryScannerModal from "./ajax-media-library-scanner-modal";
+import BackgroundMediaLibraryScannerModal from "./background-media-library-scanner-modal";
+
+const {__} = wp.i18n;
+
+function MediaLibraryScanner({}) {
+	const [modalOpen, setModalOpen] = useState(false);
+
+	return <>
+		<FloatingNoticePlaceholder id="wp-smush-media-library-scanner-notice"/>
+
+		{modalOpen &&
+			<BackgroundMediaLibraryScannerModal
+				focusAfterClose="wp-smush-open-media-library-scanner"
+				nonce={mediaLibraryScan.nonce}
+				onScanCompleted={() => {
+					showSuccessNotice(
+						'wp-smush-media-library-scanner-notice',
+						__('Scan completed successfully!', 'wp-smushit'),
+						true
+					);
+					setModalOpen(false);
+					window.location.reload();
+				}}
+				onClose={() => setModalOpen(false)}
+			/>
+		}
+
+		<Button id="wp-smush-open-media-library-scanner" text={__('Re-Check Images', 'wp-smushit')}
+				className="wp-smush-scan"
+				icon="sui-icon-update"
+				disabled={modalOpen}
+				onClick={() => setModalOpen(true)}
+		/>
+	</>;
+}
+
+domReady(function () {
+	const scannerContainer = document.getElementById('wp-smush-media-library-scanner');
+	if (scannerContainer) {
+		ReactDOM.render(
+			<MediaLibraryScanner/>,
+			scannerContainer
+		);
+	}
+});

wp-content/plugins/wp-smushit/_src/react/common/button.js

@@ -0,0 +1,70 @@
+import React from "react";
+import classnames from "classnames";
+
+export default function Button(
+	{
+		id = "",
+		text = "",
+		color = "",
+		dashed = false,
+		icon = '',
+		loading = false,
+		ghost = false,
+		disabled = false,
+		href = "",
+		target = "",
+		className = "",
+		onClick = () => false,
+	}
+) {
+	function handleClick(e) {
+		e.preventDefault();
+
+		onClick();
+	}
+
+	function textTag() {
+		const iconTag = icon ? <span className={icon} aria-hidden="true"/> : "";
+		return (
+			<span className={classnames({"sui-loading-text": loading})}>
+				{iconTag} {text}
+			</span>
+		);
+	}
+
+	function loadingIcon() {
+		return loading
+			? <span className="sui-icon-loader sui-loading" aria-hidden="true"/>
+			: "";
+	}
+
+	let HtmlTag, props;
+	if (href) {
+		HtmlTag = 'a';
+		props = {href: href, target: target};
+	} else {
+		HtmlTag = 'button';
+		props = {
+			disabled: disabled,
+			onClick: e => handleClick(e)
+		};
+	}
+	const hasText = text && text.trim();
+
+	return (
+		<HtmlTag
+			{...props}
+			className={classnames(className, "sui-button-" + color, {
+				"sui-button-onload": loading,
+				"sui-button-ghost": ghost,
+				"sui-button-icon": !hasText,
+				"sui-button-dashed": dashed,
+				"sui-button": hasText
+			})}
+			id={id}
+		>
+			{textTag()}
+			{loadingIcon()}
+		</HtmlTag>
+	);
+}

wp-content/plugins/wp-smushit/_src/react/common/floating-notice-placeholder.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function FloatingNoticePlaceholder({id = ''}) {
+	return <div className="sui-floating-notices">
+		<div role="alert"
+			 id={id}
+			 className="sui-notice"
+			 aria-live="assertive">
+		</div>
+	</div>;
+}

wp-content/plugins/wp-smushit/_src/react/common/modal.js

@@ -0,0 +1,133 @@
+import React, {useEffect} from 'react';
+import classnames from 'classnames';
+import SUI from 'SUI';
+import $ from 'jquery';
+
+const {__} = wp.i18n;
+
+export default function Modal(
+	{
+		id = '',
+		title = '',
+		description = '',
+		small = false,
+		headerActions = false,
+		focusAfterOpen = '',
+		focusAfterClose = 'container',
+		dialogClasses = [],
+		disableCloseButton = false,
+		enterDisabled = false,
+		beforeTitle = false,
+		onEnter = () => false,
+		onClose = () => false,
+		footer,
+		children
+	}
+) {
+	useEffect(() => {
+		SUI.openModal(
+			id,
+			focusAfterClose,
+			focusAfterOpen ? focusAfterOpen : getTitleId(),
+			false,
+			false
+		);
+
+		return () => SUI.closeModal();
+	}, []);
+
+	const handleKeyDown = (event) => {
+		const isTargetInput = $(event.target).is('.sui-modal.sui-active input');
+		if (isTargetInput && event.keyCode === 13) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (!enterDisabled && onEnter) {
+				onEnter(event);
+			}
+		}
+	}
+
+	function getTitleId() {
+		return id + '-modal-title';
+	}
+
+	function getHeaderActions() {
+		const closeButton = getCloseButton();
+		if (small) {
+			return closeButton;
+		} else if (headerActions) {
+			return headerActions;
+		} else {
+			return <div className="sui-actions-right">{closeButton}</div>
+		}
+	}
+
+	function getCloseButton() {
+		return <button id={id + '-close-button'}
+					   type="button"
+					   onClick={() => onClose()}
+					   disabled={disableCloseButton}
+					   className={classnames("sui-button-icon", {
+						   'sui-button-float--right': small
+					   })}>
+
+			<span className="sui-icon-close sui-md" aria-hidden="true"/>
+			<span className="sui-screen-reader-text">
+				{__('Close this dialog window', 'wds')}
+			</span>
+		</button>
+	}
+
+	function getDialogClasses() {
+		return Object.assign({}, {
+			'sui-modal-sm': small,
+			'sui-modal-lg': !small
+		}, dialogClasses);
+	}
+
+	return <div className={classnames('sui-modal', getDialogClasses())}
+				onKeyDown={e => handleKeyDown(e)}>
+		<div role="dialog"
+			 id={id}
+			 className={classnames('sui-modal-content', id + '-modal')}
+			 aria-modal="true"
+			 aria-labelledby={id + '-modal-title'}
+			 aria-describedby={id + '-modal-description'}>
+
+			<div className="sui-box" role="document">
+				<div className={classnames('sui-box-header', {
+					'sui-flatten sui-content-center sui-spacing-top--40': small
+				})}>
+					{beforeTitle}
+
+					<h3 id={getTitleId()}
+						className={classnames('sui-box-title', {
+							'sui-lg': small
+						})}>
+
+						{title}
+					</h3>
+
+					{getHeaderActions()}
+				</div>
+
+				<div className={classnames('sui-box-body', {
+					'sui-content-center': small
+				})}>
+					{description &&
+						<p className="sui-description"
+						   id={id + '-modal-description'}>
+							{description}
+						</p>}
+
+					{children}
+				</div>
+
+				{footer && <div className="sui-box-footer">
+					{footer}
+				</div>}
+			</div>
+		</div>
+	</div>;
+}

wp-content/plugins/wp-smushit/_src/react/common/progress-bar.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+export default function ProgressBar(
+	{
+		progress = 0,
+		stateMessage = ''
+	}
+) {
+	progress = Math.ceil(progress);
+	const progressPercentage = progress + "%";
+
+	return (
+		<React.Fragment>
+			<div className="sui-progress-block">
+				<div className="sui-progress">
+						<span className="sui-progress-icon" aria-hidden="true">
+							<span className="sui-icon-loader sui-loading"/>
+						</span>
+
+					<div className="sui-progress-text">{progressPercentage}</div>
+
+					<div className="sui-progress-bar">
+							<span
+								style={{
+									transition: progress === 0 ? false : "transform 0.4s linear 0s",
+									transformOrigin: "left center",
+									transform: `translateX(${progress - 100}%)`,
+								}}
+							/>
+					</div>
+				</div>
+			</div>
+			<div className="sui-progress-state">{stateMessage}</div>
+		</React.Fragment>
+	);
+}

wp-content/plugins/wp-smushit/_src/react/modules/configs.jsx

@@ -0,0 +1,176 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+const { __, sprintf } = wp.i18n;
+
+/**
+ * SUI dependencies
+ */
+import { Presets } from '@wpmudev/shared-presets';
+
+export const Configs = ({ isWidget }) => {
+	// TODO: Handle the html interpolation and translation better.
+	const proDescription = (
+		<>
+			{__(
+				'You can easily apply configs to multiple sites at once via ',
+				'wp-smushit'
+			)}
+			<a
+				href={window.smushReact.links.hubConfigs}
+				target="_blank"
+				rel="noreferrer"
+			>
+				{__('the Hub.')}
+			</a>
+		</>
+	);
+
+	const closeIcon = __('Close this dialog window', 'wp-smushit'),
+		cancelButton = __('Cancel', 'wp-smushit');
+
+	const lang = {
+		title: __('Preset Configs', 'wp-smushit'),
+		upload: __('Upload', 'wp-smushit'),
+		save: __('Save config', 'wp-smushit'),
+		loading: __('Updating the config list…', 'wp-smushit'),
+		emptyNotice: __(
+			'You don’t have any available config. Save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		baseDescription: __(
+			'Use configs to save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		proDescription,
+		syncWithHubText: __(
+			'Created or updated configs via the Hub?',
+			'wp-smushit'
+		),
+		syncWithHubButton: __('Check again', 'wp-smushit'),
+		apply: __('Apply', 'wp-smushit'),
+		download: __('Download', 'wp-smushit'),
+		edit: __('Name and Description', 'wp-smushit'),
+		delete: __('Delete', 'wp-smushit'),
+		notificationDismiss: __('Dismiss notice', 'wp-smushit'),
+		freeButtonLabel: __('Try The Hub', 'wp-smushit'),
+		defaultRequestError: sprintf(
+			/* translators: %s request status */
+			__(
+				'Request failed. Status: %s. Please reload the page and try again.',
+				'wp-smushit'
+			),
+			'{status}'
+		),
+		uploadActionSuccessMessage: sprintf(
+			/* translators: %s request status */
+			__(
+				'%s config has been uploaded successfully – you can now apply it to this site.',
+				'wp-smushit'
+			),
+			'{configName}'
+		),
+		uploadWrongPluginErrorMessage: sprintf(
+			/* translators: %s {pluginName} */
+			__(
+				'The uploaded file is not a %s Config. Please make sure the uploaded file is correct.',
+				'wp-smushit'
+			),
+			'{pluginName}'
+		),
+		applyAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Apply Config', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to apply the %s config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Apply', 'wp-smushit'),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config has been applied successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		deleteAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Delete Configuration File', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to delete %s? You will no longer be able to apply it to this or other connected sites.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Delete', 'wp-smushit'),
+		},
+		editAction: {
+			closeIcon,
+			cancelButton,
+			nameInput: __('Config name', 'wp-smushit'),
+			descriptionInput: __('Description', 'wp-smushit'),
+			emptyNameError: __('The config name is required', 'wp-smushit'),
+			actionButton: __('Save', 'wp-smushit'),
+			editTitle: __('Rename Config', 'wp-smushit'),
+			editDescription: __(
+				'Change your config name to something recognizable.',
+				'wp-smushit'
+			),
+			createTitle: __('Save Config', 'wp-smushit'),
+			createDescription: __(
+				'Save your current settings configuration. You’ll be able to then download and apply it to your other sites.',
+				'wp-smushit'
+			),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config created successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		settingsLabels: {
+			bulk_smush: __('Bulk Smush', 'wp-smushit'),
+			integrations: __('Integrations', 'wp-smushit'),
+			lazy_load: __('Lazy Load', 'wp-smushit'),
+			cdn: __('CDN', 'wp-smushit'),
+			webp_mod: __('Local WebP', 'wp-smushit'),
+			settings: __('Settings', 'wp-smushit'),
+			networkwide: __('Subsite Controls', 'wp-smushit'),
+		},
+	};
+
+	return (
+		<Presets
+			isWidget={isWidget}
+			isPro={window.smushReact.isPro}
+			isWhitelabel={window.smushReact.hideBranding}
+			sourceLang={lang}
+			sourceUrls={window.smushReact.links}
+			requestsData={window.smushReact.requestsData}
+		/>
+	);
+};
+
+domReady(function () {
+	const configsPageBox = document.getElementById('smush-box-configs');
+	if (configsPageBox) {
+		ReactDOM.render(<Configs isWidget={false} />, configsPageBox);
+	}
+	const configsWidgetBox = document.getElementById('smush-widget-configs');
+	if (configsWidgetBox) {
+		ReactDOM.render(<Configs isWidget={true} />, configsWidgetBox);
+	}
+});

wp-content/plugins/wp-smushit/_src/react/modules/webp.jsx

@@ -0,0 +1,110 @@
+/* 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 ? (
+		<StepContent
+			currentStep={currentStep}
+			serverType={serverType}
+			rulesMethod={rulesMethod}
+			setRulesMethod={setRulesMethod}
+			rulesError={rulesError}
+			setServerType={setServerType}
+			smushData={smushData}
+			makeRequest={makeRequest}
+		/>
+	) : (
+		<FreeContent smushData={smushData} />
+	);
+
+	return (
+		<React.Fragment>
+			<div className="sui-box-body sui-no-padding">
+				<div className="sui-row-with-sidenav">
+					<StepsBar smushData={smushData} currentStep={currentStep} />
+					{stepContent}
+				</div>
+			</div>
+			{smushData.isPro && (
+				<StepFooter
+					currentStep={currentStep}
+					setCurrentStep={setCurrentStep}
+					serverType={serverType}
+					rulesMethod={rulesMethod}
+					setRulesError={setRulesError}
+					makeRequest={makeRequest}
+				/>
+			)}
+		</React.Fragment>
+	);
+};
+
+domReady(function () {
+	const webpPageBox = document.getElementById('smush-box-webp-wizard');
+	if (webpPageBox) {
+		ReactDOM.render(
+			<WebpPage smushData={window.smushReact} />,
+			webpPageBox
+		);
+	}
+});

wp-content/plugins/wp-smushit/_src/react/utils/notices.js

@@ -0,0 +1,35 @@
+export function showSuccessNotice(id, message, dismissible = true) {
+	return showNotice(id, message, 'success', dismissible);
+}
+
+export function showErrorNotice(id, message, dismissible = true) {
+	return showNotice(id, message, 'error', dismissible);
+}
+
+export function showInfoNotice(id, message, dismissible = true) {
+	return showNotice(id, message, 'info', dismissible);
+}
+
+export function showWarningNotice(id, message, dismissible = true) {
+	return showNotice(id, message, 'warning', dismissible);
+}
+
+export function closeNotice(id) {
+	SUI.closeNotice(id);
+}
+
+export function showNotice(id, message, type = 'success', dismissible = true) {
+	const icons = {
+		error: 'warning-alert',
+		info: 'info',
+		warning: 'warning-alert',
+		success: 'check-tick'
+	};
+
+	SUI.closeNotice(id);
+	SUI.openNotice(id, '<p>' + message + '</p>', {
+		type: type,
+		icon: icons[type],
+		dismiss: {show: dismissible}
+	});
+}

wp-content/plugins/wp-smushit/_src/react/utils/request.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import ajaxUrl from 'ajaxUrl';
+
+export function post(action, nonce, data = {}) {
+	return new Promise(function (resolve, reject) {
+		const request = Object.assign({}, {
+			action: action,
+			_ajax_nonce: nonce
+		}, data);
+
+		$.post(ajaxUrl, request)
+			.done((response) => {
+				if (response.success) {
+					resolve(
+						response?.data
+					);
+				} else {
+					reject(response?.data?.message);
+				}
+			})
+			.fail(() => reject());
+	});
+}

wp-content/plugins/wp-smushit/_src/react/views/webp/free-content.jsx

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ smushData }) => {
+	return (
+		<div className="sui-box-body">
+			<div className="sui-message">
+				<img
+					className="sui-image"
+					src={smushData.urls.freeImg}
+					srcset={smushData.urls.freeImg2x + ' 2x'}
+					alt={__('Smush WebP', 'wp-smushit')}
+				/>
+
+				<div className="sui-message-content">
+					<p>
+						{__(
+							'Fix the "Serve images in next-gen format" Google PageSpeed recommendation by setting up this feature. Serve WebP versions of your images to supported browsers, and gracefully fall back on JPEGs and PNGs for browsers that don\'t support WebP.',
+							'wp-smushit'
+						)}
+					</p>
+
+					<ol className="sui-upsell-list">
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Add or automatically apply the rules to enable Local WebP feature.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for non supported browsers.',
+								'wp-smushit'
+							)}
+						</li>
+					</ol>
+
+					<p className="sui-margin-top">
+						<a
+							href={smushData.urls.upsell}
+							className="sui-button sui-button-purple"
+							style={{ marginRight: '30px' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('UNLOCK WEBP WITH PRO', 'wp-smushit')}
+						</a>
+						<a
+							href={smushData.urls.webpDoc}
+							style={{ color: '#8D00B1' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Learn more', 'wp-smushit')}
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};

wp-content/plugins/wp-smushit/_src/react/views/webp/step-content.jsx

@@ -0,0 +1,441 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __, sprintf } = wp.i18n;
+
+export default ({
+	currentStep,
+	serverType,
+	rulesMethod,
+	setRulesMethod,
+	setServerType,
+	rulesError,
+	smushData,
+	makeRequest,
+}) => {
+	const stepsHeading = {
+		1: {
+			title: __('Choose Server Type', 'wp-smushit'),
+			description: __(
+				'Choose your server type. If you don’t know this, please contact your hosting provider.',
+				'wp-smushit'
+			),
+		},
+		2: {
+			title: __('Add Rules', 'wp-smushit'),
+			description:
+				'apache' === serverType
+					? __(
+							'Smush can automatically apply WebP conversion rules for Apache servers by writing to your .htaccess file. Alternatively, switch to Manual to apply these rules yourself.',
+							'wp-smushit'
+					  )
+					: __(
+							'The following configurations are for NGINX servers. If you do not have access to your NGINX config files you will need to contact your hosting provider to make these changes.',
+							'wp-smushit'
+					  ),
+		},
+		3: {
+			title: __('Finish Setup', 'wp-smushit'),
+			description: __(
+				'The rules have been applied successfully.',
+				'wp-smushit'
+			),
+		},
+	};
+
+	const getTopNotice = () => {
+		if (1 === currentStep && smushData.isS3Enabled) {
+			return (
+				<div className="sui-notice sui-notice-warning">
+					<div className="sui-notice-content">
+						<div className="sui-notice-message">
+							<span
+								className="sui-notice-icon sui-icon-info sui-md"
+								aria-hidden="true"
+							></span>
+							<p>
+								{__(
+									'We noticed the Amazon S3 Integration is enabled. Offloaded images will not be served in WebP format, but Smush will create local WebP copies of all images. If this is undesirable, you can quit the setup.',
+									'wp-smushit'
+								)}
+							</p>
+						</div>
+					</div>
+				</div>
+			);
+		}
+
+		if (2 === currentStep) {
+			return (
+				<div
+					role="alert"
+					className="sui-notice sui-notice-warning"
+					aria-live="assertive"
+					style={rulesError ? { display: 'block' } : {}}
+				>
+					{rulesError && (
+						<div className="sui-notice-content">
+							<div className="sui-notice-message">
+								<span
+									className="sui-notice-icon sui-icon-info sui-md"
+									aria-hidden="true"
+								></span>
+								<p
+									dangerouslySetInnerHTML={{
+										__html: rulesError,
+									}}
+								/>
+							</div>
+						</div>
+					)}
+				</div>
+			);
+		}
+
+		if (smushData.isWpmudevHost) {
+			const message = !smushData.isWhitelabel
+				? __(
+						'Since your site is hosted with WPMU DEV, we already have done the configurations steps for you. The only step for you would be to create WebP images below.',
+						'wp-smushit'
+				  )
+				: __(
+						'WebP conversion is active and working well. Your hosting has automatically pre-configured the conversion for you. The only step for you would be to create WebP images below.',
+						'wp-smushit'
+				  );
+
+			return (
+				<div className="sui-notice sui-notice-info">
+					<div className="sui-notice-content">
+						<div className="sui-notice-message">
+							<span
+								className="sui-notice-icon sui-icon-info sui-md"
+								aria-hidden="true"
+							></span>
+							<p>{message}</p>
+						</div>
+					</div>
+				</div>
+			);
+		}
+	};
+
+	const getStepContent = () => {
+		if (1 === currentStep) {
+			return (
+				<React.Fragment>
+					<div className="sui-box-selectors">
+						<ul>
+							<li>
+								<label
+									htmlFor="smush-wizard-server-type-apache"
+									className="sui-box-selector"
+								>
+									<input
+										id="smush-wizard-server-type-apache"
+										type="radio"
+										value="apache"
+										checked={'apache' === serverType}
+										onChange={(e) =>
+											setServerType(e.currentTarget.value)
+										}
+									/>
+									<span>{__('Apache', 'wp-smushit')}</span>
+								</label>
+							</li>
+
+							<li>
+								<label
+									htmlFor="smush-wizard-server-type-nginx"
+									className="sui-box-selector"
+								>
+									<input
+										id="smush-wizard-server-type-nginx"
+										type="radio"
+										value="nginx"
+										checked={'nginx' === serverType}
+										onChange={(e) =>
+											setServerType(e.currentTarget.value)
+										}
+									/>
+									<span>{__('NGINX', 'wp-smushit')}</span>
+								</label>
+							</li>
+						</ul>
+					</div>
+
+					<div className="sui-notice" style={{ textAlign: 'left' }}>
+						<div className="sui-notice-content">
+							<div className="sui-notice-message">
+								<span
+									className="sui-notice-icon sui-icon-info sui-md"
+									aria-hidden="true"
+								></span>
+								<p>
+									{sprintf(
+										/* translators: server type */
+										__(
+											"We've automatically detected your server type is %s. If this is incorrect, manually select your server type to generate the relevant rules and instructions.",
+											'wp-smushit'
+										),
+										'nginx' === smushData.detectedServer
+											? 'NGINX'
+											: 'Apache / LiteSpeed'
+									)}
+								</p>
+							</div>
+						</div>
+					</div>
+				</React.Fragment>
+			);
+		}
+
+		if (2 === currentStep) {
+			if ('nginx' === serverType) {
+				return (
+					<div className="smush-wizard-rules-wrapper">
+						<ol className="sui-description">
+							<li>
+								{__(
+									'Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). “The server context” refers to the part of the configuration that starts with “server {” and ends with the matching “}”.',
+									'wp-smushit'
+								)}
+							</li>
+							<li>
+								{__(
+									'Copy the generated code found below and paste it inside your http or server blocks.',
+									'wp-smushit'
+								)}
+							</li>
+						</ol>
+
+						<pre
+							className="sui-code-snippet"
+							style={{ marginLeft: '12px' }}
+						>
+							{smushData.nginxRules}
+						</pre>
+						<ol className="sui-description" start="3">
+							<li>{__('Reload NGINX.', 'wp-smushit')}</li>
+						</ol>
+
+						<p className="sui-description">
+							{__('Still having trouble?', 'wp_smushit')}{' '}
+							<a
+								href={smushData.urls.support}
+								target="_blank"
+								rel="noreferrer"
+							>
+								{__('Get Support.', 'wp_smushit')}
+							</a>
+						</p>
+					</div>
+				);
+			}
+
+			// TODO: The non-selected button isn't focusable this way. Why arrows don't workkkkkkk?
+			return (
+				<div className="sui-side-tabs sui-tabs">
+					<div role="tablist" className="sui-tabs-menu">
+						<button
+							type="button"
+							role="tab"
+							id="smush-tab-automatic"
+							className={
+								'sui-tab-item' +
+								('automatic' === rulesMethod ? ' active' : '')
+							}
+							aria-controls="smush-tab-content-automatic"
+							aria-selected={'automatic' === rulesMethod}
+							onClick={() => setRulesMethod('automatic')}
+							tabIndex={'automatic' === rulesMethod ? '0' : '-1'}
+						>
+							{__('Automatic', 'wp-smushit')}
+						</button>
+
+						<button
+							type="button"
+							role="tab"
+							id="smush-tab-manual"
+							className={
+								'sui-tab-item' +
+								('manual' === rulesMethod ? ' active' : '')
+							}
+							aria-controls="smush-tab-content-manual"
+							aria-selected={'manual' === rulesMethod}
+							onClick={() => setRulesMethod('manual')}
+							tabIndex={'manual' === rulesMethod ? '0' : '-1'}
+						>
+							{__('Manual', 'wp-smushit')}
+						</button>
+					</div>
+
+					<div className="sui-tabs-content">
+						<div
+							role="tabpanel"
+							tabIndex="0"
+							id="smush-tab-content-automatic"
+							className={
+								'sui-tab-content' +
+								('automatic' === rulesMethod ? ' active' : '')
+							}
+							aria-labelledby="smush-tab-automatic"
+							hidden={'automatic' !== rulesMethod}
+						>
+							<p
+								className="sui-description"
+								style={{ marginTop: '30px' }}
+							>
+								{__(
+									'Please note: Some servers have both Apache and NGINX software which may not begin serving WebP images after applying the .htaccess rules. If errors occur after applying the rules, we recommend adding NGINX rules manually.',
+									'wp-smushit'
+								)}
+							</p>
+						</div>
+
+						<div
+							role="tabpanel"
+							tabIndex="0"
+							id="smush-tab-content-manual"
+							className={
+								'sui-tab-content' +
+								('manual' === rulesMethod ? ' active' : '')
+							}
+							aria-labelledby="smush-tab-manual"
+							hidden={'manual' !== rulesMethod}
+						>
+							<p className="sui-description">
+								{__(
+									'If you are unable to get the automated method working, follow these steps:',
+									'wp-smushit'
+								)}
+							</p>
+
+							<div className="smush-wizard-rules-wrapper">
+								<ol className="sui-description">
+									<li>
+										{__(
+											'Copy the generated code below and paste it at the top of your .htaccess file (before any existing code) in the root directory.',
+											'wp-smushit'
+										)}
+									</li>
+								</ol>
+
+								<pre
+									className="sui-code-snippet"
+									style={{ marginLeft: '12px' }}
+								>
+									{smushData.apacheRules}
+								</pre>
+								<ol className="sui-description" start="2">
+									<li>
+										{__(
+											"Next, click Check Status button below to see if it's working.",
+											'wp-smushit'
+										)}
+									</li>
+								</ol>
+
+								<h5
+									className="sui-settings-label"
+									style={{
+										marginTop: '30px',
+										fontSize: '13px',
+										color: '#333333',
+									}}
+								>
+									{__('Troubleshooting', 'wp-smushit')}
+								</h5>
+
+								<p className="sui-description">
+									{__(
+										'If .htaccess does not work, and you have access to vhosts.conf or httpd.conf, try this:',
+										'wp-smushit'
+									)}
+								</p>
+
+								<ol className="sui-description">
+									<li>
+										{__(
+											'Look for your site in the file and find the line that starts with <Directory> - add the code above that line and into that section and save the file.',
+											'wp-smushit'
+										)}
+									</li>
+									<li>
+										{__('Reload Apache.', 'wp-smushit')}
+									</li>
+									<li>
+										{__(
+											"If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.",
+											'wp-smushit'
+										)}
+									</li>
+								</ol>
+
+								<p className="sui-description">
+									{__('Still having trouble?', 'wp_smushit')}{' '}
+									<a
+										href={smushData.urls.support}
+										target="_blank"
+										rel="noreferrer"
+									>
+										{__('Get Support.', 'wp_smushit')}
+									</a>
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			);
+		}
+
+		const hideWizard = (e) => {
+			e.preventDefault();
+			makeRequest('smush_toggle_webp_wizard').then(() => {
+				location.href = smushData.urls.bulkPage;
+			});
+		};
+
+		return (
+			<React.Fragment>
+				<p style={{ marginBottom: 0 }}><b>{__('Convert Images to WebP', 'wp-smushit')}</b></p>
+				<p className="sui-description" dangerouslySetInnerHTML={ { __html: smushData.thirdStepMsg } } />
+				{!smushData.isMultisite && (
+					<p>
+						<a href={smushData.urls.bulkPage} onClick={hideWizard}>
+							{__('Convert now', 'wp-smushit')}
+						</a>
+					</p>
+				)}
+			</React.Fragment>
+		);
+	};
+
+	const stepIndicatorText = sprintf(
+		/* translators: currentStep/totalSteps indicator */
+		__('Step %s', 'wp-smushit'),
+		currentStep + '/3'
+	);
+
+	return (
+		<div
+			className={`smush-wizard-steps-content-wrapper smush-wizard-step-${currentStep}`}
+		>
+			{getTopNotice()}
+			<div className="smush-wizard-steps-content">
+				<span className="smush-step-indicator">
+					{stepIndicatorText}
+				</span>
+				<h2>{stepsHeading[currentStep].title}</h2>
+				<p className="sui-description">
+					{stepsHeading[currentStep].description}
+				</p>
+				{getStepContent()}
+			</div>
+		</div>
+	);
+};

wp-content/plugins/wp-smushit/_src/react/views/webp/step-footer.jsx

@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({
+	currentStep,
+	setCurrentStep,
+	serverType,
+	rulesMethod,
+	setRulesError,
+	makeRequest,
+}) => {
+	const genericRequestError = __(
+		'Something went wrong with the request.',
+		'wp-smushit'
+	);
+
+	const checkStatus = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_get_status')
+			.then((res) => {
+				if (res.success) {
+					setCurrentStep(currentStep + 1);
+				} else {
+					setRulesError(res.data);
+				}
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const applyRules = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_apply_htaccess_rules')
+			.then((res) => {
+				if (res.success) {
+					return checkStatus();
+				}
+
+				setRulesError(res.data);
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const hideWizard = (e) => {
+		e.currentTarget.classList.add(
+			'sui-button-onload',
+			'sui-button-onload-text'
+		);
+		makeRequest('smush_toggle_webp_wizard').then(() => location.reload());
+	};
+
+	// Markup stuff.
+	let buttonsLeft;
+
+	const quitButton = (
+		<button
+			type="button"
+			className="sui-button sui-button-ghost"
+			onClick={hideWizard}
+		>
+			<span className="sui-loading-text">
+				<span className="sui-icon-logout" aria-hidden="true"></span>
+				<span className="sui-hidden-xs">
+					{__('Quit setup', 'wp-smushit')}
+				</span>
+				<span className="sui-hidden-sm sui-hidden-md sui-hidden-lg">
+					{__('Quit', 'wp-smushit')}
+				</span>
+			</span>
+
+			<span
+				className="sui-icon-loader sui-loading"
+				aria-hidden="true"
+			></span>
+		</button>
+	);
+
+	if (1 !== currentStep) {
+		buttonsLeft = (
+			<button
+				type="button"
+				className="sui-button sui-button-compound sui-button-ghost"
+				onClick={() => setCurrentStep(currentStep - 1)}
+			>
+				<span className="sui-compound-desktop" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+					{__('Previous', 'wp-smushit')}
+				</span>
+
+				<span className="sui-compound-mobile" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+				</span>
+
+				<span className="sui-screen-reader-text">
+					{__('Previous', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	}
+
+	const getButtonsRight = () => {
+		if (1 === currentStep) {
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue sui-button-icon-right"
+					onClick={() => setCurrentStep(currentStep + 1)}
+				>
+					{__('Next', 'wp-smushit')}
+					<span
+						className="sui-icon-arrow-right"
+						aria-hidden="true"
+					></span>
+				</button>
+			);
+		}
+
+		if (2 === currentStep) {
+			if ('apache' === serverType && 'automatic' === rulesMethod) {
+				return (
+					<button
+						type="button"
+						className="sui-button sui-button-blue"
+						onClick={applyRules}
+					>
+						{__('Apply rules', 'wp-smushit')}
+					</button>
+				);
+			}
+
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue"
+					onClick={checkStatus}
+				>
+					{__('Check status', 'wp-smushit')}
+				</button>
+			);
+		}
+
+		return (
+			<button
+				type="button"
+				className="sui-button sui-button-blue"
+				onClick={hideWizard}
+			>
+				<span className="sui-button-text-default">
+					{__('Finish', 'wp-smushit')}
+				</span>
+
+				<span className="sui-button-text-onload">
+					<span
+						className="sui-icon-loader sui-loading"
+						aria-hidden="true"
+					></span>
+					{__('Finishing setup…', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	};
+
+	return (
+		<div className="sui-box-footer">
+			<div className="sui-actions-left">
+				{quitButton}
+				{buttonsLeft}
+			</div>
+			<div className="sui-actions-right">{getButtonsRight()}</div>
+		</div>
+	);
+};

wp-content/plugins/wp-smushit/_src/react/views/webp/steps-bar.jsx

@@ -0,0 +1,114 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ currentStep, smushData }) => {
+	const getStepClass = (step) => {
+		const stepClass = 'smush-wizard-bar-step';
+
+		if (!smushData.isPro) {
+			return stepClass + ' disabled';
+		}
+
+		if (step > currentStep) {
+			return stepClass;
+		}
+
+		return (
+			stepClass +
+			(step === currentStep ? ' current' : ' sui-tooltip done')
+		);
+	};
+
+	const getStepNumber = (step) => {
+		return currentStep > step ? (
+			<span className="sui-icon-check" aria-hidden="true"></span>
+		) : (
+			step
+		);
+	};
+
+	const steps = [
+		{ number: 1, title: __('Server Type', 'wp-smushit') },
+		{ number: 2, title: __('Add Rules', 'wp-smushit') },
+		{ number: 3, title: __('Finish Setup', 'wp-smushit') },
+	];
+
+	return (
+		<div className="sui-sidenav">
+			<span className="smush-wizard-bar-subtitle">
+				{__('Setup', 'wp-smushit')}
+			</span>
+			<div className="smush-sidenav-title">
+				<h4>{__('Local WebP', 'wp-smushit')}</h4>
+				{!smushData.isPro && (
+					<span className="sui-tag sui-tag-pro">
+						{__('Pro', 'wp-smushit')}
+					</span>
+				)}
+			</div>
+
+			<div className="smush-wizard-steps-container">
+				<svg
+					className="smush-svg-mobile"
+					focusable="false"
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						x2="50%"
+						stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+					<line
+						x1="50%"
+						x2="100%"
+						stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+				</svg>
+				<ul>
+					{steps.map((step) => (
+						<React.Fragment key={step.number}>
+							<li
+								className={getStepClass(step.number)}
+								data-tooltip={__(
+									'This stage is already completed.',
+									'wp-smushit'
+								)}
+							>
+								<div className="smush-wizard-bar-step-number">
+									{getStepNumber(step.number)}
+								</div>
+								{step.title}
+							</li>
+							{3 !== step.number && (
+								<svg
+									data={step.number}
+									data2={currentStep}
+									className="smush-svg-desktop"
+									focusable="false"
+									aria-hidden="true"
+								>
+									<line
+										y1="0"
+										y2="40px"
+										stroke={
+											step.number < currentStep
+												? '#1ABC9C'
+												: '#E6E6E6'
+										}
+									/>
+								</svg>
+							)}
+						</React.Fragment>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+};