diff --git a/components/advancedSettings/JetpackBoost/InstallActivatePluginButton.js b/components/advancedSettings/JetpackBoost/InstallActivatePluginButton.js new file mode 100644 index 0000000..3a0b0fe --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default InstallActivatePluginButton; diff --git a/components/advancedSettings/JetpackBoost/SingleOption.js b/components/advancedSettings/JetpackBoost/SingleOption.js new file mode 100644 index 0000000..70c96e8 --- /dev/null +++ b/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 && ( + + + handleChangeOption( + value, + option.id + ) + } + /> + { option.externalText ? ( +

+ { parse( option.externalText ) } +

+ ) : null } +
+ ) } + { ( ! option.premiumUrl || + NewfoldRuntime.sdk.performance + .jetpack_boost_premium_is_active ) && ( + <> + + handleChangeOption( value, option.id ) + } + /> + { option.externalText ? ( +

+ { parse( option.externalText ) } +

+ ) : null } + + ) } + + ); + + case 'textarea': + return ( + <> +

{ option.label }

+