Merge pull request #25 from newfold-labs/enhance/PRESS7-60-jetpack-boost

Enhance/press7 60 jetpack boost

components/advancedSettings/JetpackBoost/InstallActivatePluginButton.js

@@ -0,0 +1,85 @@
+// WordPress
+import { useState } from '@wordpress/element';
+
+// Newfold
+import { Spinner } from '@newfold/ui-component-library';
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
+
+const InstallActivatePluginButton = ( {
+	methods,
+	constants,
+	setModuleStatus,
+} ) => {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const [ isActive, setIsActive ] = useState( false );
+	const [ message, setMessage ] = useState( null );
+
+	const handleInstallActivate = async () => {
+		setIsLoading( true );
+		setMessage( constants.text.jetpackBoostInstalling );
+
+		const apiUrl = methods.NewfoldRuntime.createApiUrl(
+			'/newfold-installer/v1/plugins/install'
+		);
+		const INSTALL_TOKEN = NewfoldRuntime.sdk.performance.install_token;
+		const plugin = 'jetpack-boost';
+
+		try {
+			await methods.apiFetch( {
+				url: apiUrl,
+				method: 'POST',
+				headers: { 'X-NFD-INSTALLER': INSTALL_TOKEN },
+				data: { plugin, activate: true, queue: false },
+			} );
+			setIsActive( true );
+			setModuleStatus( true );
+			setMessage( constants.text.jetpackBoostInstalling );
+		} catch ( error ) {
+			setMessage( constants.text.jetpackBoostActivationFailed );
+		} finally {
+			setIsLoading( false );
+		}
+	};
+
+	return (
+		<div className="nfd-performance-jetpack-boost-container-install-activate-button">
+			<button
+				className="nfd-button--upsell"
+				onClick={ handleInstallActivate }
+			>
+				{ isLoading ? (
+					<>
+						<Spinner />
+						<p>{ message }</p>
+					</>
+				) : (
+					! isActive && (
+						<>
+							<span>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									strokeWidth="2"
+									stroke="currentColor"
+									aria-hidden="true"
+									className="nfd-w-5 nfd-h-5 nfd--ml-1 nfd-shrink-0"
+									role="img"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"
+									></path>
+								</svg>
+							</span>
+							<span>{ constants.text.jetpackBoostCtaText }</span>
+						</>
+					)
+				) }
+			</button>
+		</div>
+	);
+};
+
+export default InstallActivatePluginButton;

components/advancedSettings/JetpackBoost/SingleOption.js

@@ -0,0 +1,184 @@
+// WordPress
+import apiFetch from '@wordpress/api-fetch';
+import { useRef, useState } from '@wordpress/element';
+
+// Newfold
+import {
+	ToggleField,
+	Textarea,
+	FeatureUpsell,
+} from '@newfold/ui-component-library';
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
+
+// Third-parts
+import parse from 'html-react-parser';
+
+const SingleOption = ( { params, isChild, methods, constants } ) => {
+	const [ optionDetails, setOptionDetails ] = useState( {
+		id: params.id,
+		label: params.label,
+		description: params.description,
+		value: params.value ? String( params.value ) : '',
+		type: params.type,
+		externalText: params.externalText,
+		premiumUrl: params.premiumUrl ?? '',
+		children: params.children,
+	} );
+
+	const [ isShown, setIsShown ] = useState( false );
+
+	const debounceTimeout = useRef( null ); // Mantiene il timeout tra i render
+
+	const handleChangeOption = ( value, id ) => {
+		if ( typeof value === 'object' ) {
+			value = value.target.value;
+		}
+
+		setOptionDetails( { ...optionDetails, value } );
+
+		// Clear the previous timeout if user types again.
+		if ( debounceTimeout.current ) {
+			clearTimeout( debounceTimeout.current );
+		}
+
+		// Set a new timeout of 2 seconds.
+		debounceTimeout.current = setTimeout( () => {
+			apiFetch( {
+				path: 'newfold-performance/v1/jetpack/settings',
+				method: 'POST',
+				data: {
+					field: {
+						id,
+						value,
+					},
+				},
+			} )
+				.then( () => {
+					methods.makeNotice(
+						'cache-level-change-notice',
+						constants.text.optionSet,
+						'',
+						'success',
+						5000
+					);
+				} )
+				.catch( () => {
+					methods.makeNotice(
+						'cache-level-change-notice',
+						constants.text.optionNotSet,
+						'',
+						'error',
+						5000
+					);
+				} );
+		}, 1000 );
+	};
+
+	const displayOption = ( option ) => {
+		switch ( option.type ) {
+			case 'toggle':
+				return (
+					<>
+						{ option.premiumUrl &&
+							! NewfoldRuntime.sdk.performance
+								.jetpack_boost_premium_is_active && (
+								<FeatureUpsell
+									cardText="Upgrade to Unlock"
+									cardLink={ option.premiumUrl }
+								>
+									<ToggleField
+										id={ option.id }
+										label={ option.label }
+										description={ parse(
+											option.description
+										) }
+										checked={ !! option.value }
+										onChange={ ( value ) =>
+											handleChangeOption(
+												value,
+												option.id
+											)
+										}
+									/>
+									{ option.externalText ? (
+										<p
+											style={ {
+												textDecoration: 'underline',
+												margin: '10px 0',
+											} }
+										>
+											{ parse( option.externalText ) }
+										</p>
+									) : null }
+								</FeatureUpsell>
+							) }
+						{ ( ! option.premiumUrl ||
+							NewfoldRuntime.sdk.performance
+								.jetpack_boost_premium_is_active ) && (
+							<>
+								<ToggleField
+									id={ option.id }
+									label={ option.label }
+									description={ option.description }
+									checked={ !! option.value }
+									onChange={ ( value ) =>
+										handleChangeOption( value, option.id )
+									}
+								/>
+								{ option.externalText ? (
+									<p
+										style={ {
+											textDecoration: 'underline',
+											margin: '10px 0',
+										} }
+									>
+										{ parse( option.externalText ) }
+									</p>
+								) : null }
+							</>
+						) }
+					</>
+				);
+
+			case 'textarea':
+				return (
+					<>
+						<p className="field-label">{ option.label }</p>
+						<Textarea
+							id={ option.id }
+							description={ option.description }
+							value={ option.value ?? '' }
+							onChange={ ( value ) => {
+								handleChangeOption( value, option.id );
+							} }
+						/>
+					</>
+				);
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<>
+			{ isChild && (
+				<div className="child-field">
+					<div
+						className="wrap-button"
+						style={ { textAlign: 'right' } }
+					>
+						<button onClick={ () => setIsShown( ! isShown ) }>
+							{ isShown
+								? constants.text.jetpackBoostShowLess
+								: constants.text.jetpackBoostShowMore }
+						</button>
+					</div>
+					{ isShown && displayOption( optionDetails ) }
+				</div>
+			) }
+			{ ! isChild && displayOption( optionDetails ) }
+		</>
+	);
+};
+
+export default SingleOption;