New branch Jetpack Boost

components/advancedSettings/JetpackBoost/InstallActivatePluginButton.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import { Spinner } from "@newfold/ui-component-library";
+
+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 = methods.NewfoldRuntime.ecommerce.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) {
+      console.log(error.message);
+      setMessage( constants.text.jetpackBoostActivationFailed );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="nfd-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,120 @@
+import React, { useState, useEffect, useRef } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import { ToggleField, Textarea, Notifications } from '@newfold/ui-component-library';
+
+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,
+    externalLink: params.externalLink,
+    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: value });
+
+    // Cancella il timeout precedente se l'utente digita di nuovo
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    // Imposta un nuovo timeout di 2 secondi
+    debounceTimeout.current = setTimeout(() => {
+      apiFetch({
+        path: 'newfold-performance/v1/jetpack/set_options',
+        method: 'POST',
+        data: {
+          field: {
+            id: id,
+            value: value
+          },
+        }
+      }).then((response) => {
+        methods.makeNotice(
+          "cache-level-change-notice",
+          constants.text.jetpackOptionSaved,
+          '',
+          "success",
+          5000
+        );
+      }).catch((error) => {
+
+      });
+    }, 1000);
+
+
+  }
+
+  const handleTextInputChange = ( value, id ) => {
+
+  };
+
+
+  const displayOption = ( params ) => {
+    switch( params.type ){
+      case 'toggle':
+        return (
+          <>
+            <ToggleField
+              id = { params.id }
+              label = { params.label }
+              description = { params.description }
+              checked={params.value ? true: false}
+              onChange={ ( value ) => { handleChangeOption( value, params.id ) } }
+            />
+            { params.externalLink ? <p style={{ textAlign: "right", marginBottom: "30px" }}>{ constants.text.jetpackBoostDicoverMore } <a href={`${window.location.origin}/wp-admin/admin.php?page=jetpack-boost`}> { __( 'here', 'newfold-module-performance' ) } </a></p> : '' }
+          </>
+        );
+
+      case 'textarea':
+        return (
+          <>
+            <p className="field-label">{params.label}</p>
+            <Textarea
+              id = { params.id }
+              description = { params.description }
+              value = { params.value ?? '' }
+              onChange={ ( value ) => { handleChangeOption( value, params.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;

components/advancedSettings/JetpackBoost/index.js

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+
+import { FeatureUpsell, ToggleField } from '@newfold/ui-component-library';
+
+import SingleOption from './SingleOption';
+
+import InstallActivatePluginButton from './InstallActivatePluginButton';
+
+const JetpackBoost = ({ methods, constants }) => {
+
+  const [fields, setFields] = useState([
+    {
+      id: 'critical-css',
+      label: constants.text.jetpackBoostCriticalCssTitle,
+      description: constants.text.jetpackBoostCriticalCssDescription,
+      value: true,
+      type: 'toggle',
+      externalLink: true,
+    },
+    {
+      id: 'render-blocking-js',
+      label: constants.text.jetpackBoostRenderBlockingTitle,
+      description: constants.text.jetpackBoostRenderBlockingDescription,
+      value: true,
+      type: 'toggle'
+    },
+    {
+      id: 'minify-js',
+      label: constants.text.jetpackBoostMinifyJsTitle,
+      description: constants.text.jetpackBoostMinifyJsDescription,
+      value: false,
+      type: 'toggle',
+      children: [
+        {
+          id: 'minify-js-excludes',
+          label: constants.text.jetpackBoostExcludeJsTitle,
+          description: '',
+          value: '',
+          type: 'textarea',
+        }
+      ]
+    },
+    {
+      id: 'minify-css',
+      label: constants.text.jetpackBoostMinifyCssTitle,
+      description: constants.text.jetpackBoostMinifyCssDescription,
+      value: false,
+      type: 'toggle',
+      children: [
+        {
+          id: 'minify-css-excludes',
+          label: constants.text.jetpackBoostExcludeCssTitle,
+          description: '',
+          value: '',
+          type: 'textarea',
+        }
+      ]
+    }
+  ]);
+
+  const style = {};
+
+  const [is_module_active, setModuleStatus] = useState(false);
+
+
+  const [loading, setLoading] = useState(true); // Nuovo stato per il caricamento
+
+  useEffect(() => {
+    setLoading(true) // Inizia il caricamento
+    apiFetch({
+      path: 'newfold-performance/v1/jetpack/get_options'
+    })
+      .then(async (response) => {
+
+        const newFields = []
+        fields.forEach((element) => {
+          const id = element.id
+          const value = response[id] // Assign the value from database to the const value
+          let newField = element // Assign the current field to a variable
+          newField.value = value // Assign the db value fo the variable just created
+
+
+          if (element.children) {
+            const newChildrenFields = []
+            element.children.forEach((childElement) => {
+              const id = childElement.id
+
+              const value = response[id] // Assign the value from database to the const value
+
+              let newChildField = childElement // Assign the current field to a variable
+              newChildField.value = value // Assign the db value fo the variable just created
+              newChildrenFields.push(newChildField) // Push the new field to the array that will be used to update the status
+            })
+            newField.children = newChildrenFields;
+          }
+
+          newFields.push(newField) // Push the new field to the array that will be used to update the status
+        })
+
+        setFields(newFields)
+        setModuleStatus(response.is_module_active)
+        setLoading(false)
+      })
+      .catch((error) => {
+
+        setLoading(false)
+      })
+  }, [is_module_active])
+
+  if (loading) {
+
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      {!is_module_active ? (
+        <div className="nfd-container-upsell" >
+          <InstallActivatePluginButton methods={methods} constants={constants} setModuleStatus={setModuleStatus} />
+          <FeatureUpsell
+            cardText={__('Enjoy with Jetpack Boost module', 'wp-module-performance')}
+            cardLink='https://wordpress.org/plugins/jetpack-boost/'
+          >
+            {fields.map((field) => {
+              return (
+                <SingleOption key={field.id} params={field} methods={methods} constants={constants} />
+              );
+            })}
+          </FeatureUpsell>
+        </div>
+      ) : (
+        <>
+          {fields.map((field) => (
+            <div className="nfd-container-single-option" style={{ marginBottom: "20px" }} key={field.id}>
+              <SingleOption params={field} methods={methods} constants={constants} />
+
+              {field.children && (
+                <>
+                  {field.children.map((subfield) => (
+                    <div key={subfield.id}>
+                      <SingleOption params={subfield} isChild={true} methods={methods} constants={constants} />
+                    </div>
+                  ))}
+                </>
+              )}
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+
+}
+
+export default JetpackBoost;

components/advancedSettings/index.js

@@ -0,0 +1,16 @@
+import {  Container } from '@newfold/ui-component-library'
+
+import JetpackBoost from './JetpackBoost/index';
+
+const AdvancedSettings = ( { methods, constants } ) => {
+  return (
+    <Container.SettingsField
+      title={constants.text.cacheAdvancedSettingsTitle}
+      description={constants.text.cacheAdvancedSettingsDescription}
+    >
+      <JetpackBoost methods={methods} constants={constants} />
+    </Container.SettingsField>
+  );
+}
+
+export default AdvancedSettings;

components/cacheSettings/index.js

@@ -1,4 +1,4 @@
-import { Container, RadioGroup } from "@newfold/ui-component-library";
+import { Container, RadioGroup, Alert } from "@newfold/ui-component-library";
 
 const CacheSettings = ({ methods, constants, Components }) => {
     const [ cacheLevel, setCacheLevel ] = methods.useState(constants.store.cacheLevel);
@@ -63,6 +63,7 @@ const CacheSettings = ({ methods, constants, Components }) => {
     }, [cacheLevel]);
 
     return (
+      <>
         <Container.SettingsField
             title={constants.text.cacheLevelTitle}
             description={constants.text.cacheLevelDescription}
@@ -92,6 +93,7 @@ const CacheSettings = ({ methods, constants, Components }) => {
             })}
         </RadioGroup>
         </Container.SettingsField>
+      </>
     );
 }