MiscBackendLogsEnable.js

import React, {useContext} from 'react';
import {DataRootContext} from '../../../App';
const {__, sprintf} = wp.i18n;
const {createInterpolateElement} = wp.element;

export default function MiscBackendLogsEnable(props) {
    const {id, name, value, onSettingChange, wlCompanyName} = props;
    const {myBillingLink, backendLogsEnabled, backendLogsLink, wlModeEnabled} = useContext(DataRootContext) || {};

    if (!backendLogsEnabled) {
        return null;
    }

    return (
        <>
            <input
                type="checkbox"
                id={'spbc_setting_' + id}
                name={name}
                value={value}
                checked={value === 1 || value === '1' || value === true}
                onChange={(e) => {
                    const next = e.target.checked ? 1 : 0;
                    onSettingChange?.(id, next);
                }}
            />
            <label
                htmlFor={'spbc_setting_' + id}
                className="spbc_setting-field_title--field"
            >
                {__('Collect and send PHP logs', 'security-malware-firewall')}
            </label>
            <i data-setting={id} className="spbc_long_description__show spbc-icon-help-circled"></i>

            {(backendLogsEnabled || wlModeEnabled) ? (
                <div className="spbc_settings_description">{
                    sprintf(
                        __('Collect and send PHP error logs to your %s Dashboard where you can list them.', 'security-malware-firewall'),
                        wlModeEnabled && wlCompanyName ? wlCompanyName : __('CleanTalk', 'security-malware-firewall'),
                    )
                }</div>
            ) : (
                <div className="spbc_settings_description">
                    {createInterpolateElement(
                        __(
                            'To see the collected logs please use the <a1>Backend PHP log</a1>. The <a2>extra package</a2> is required to start the collection, please click "Synchronize with the Cloud" in the plugin settings after purchasing the Extra package.',
                            'security-malware-firewall',
                        ),
                        {
                            a1: <a
                                href={backendLogsLink}
                                target="_blank"
                                rel="noopener noreferrer"
                            />,
                            a2: <a
                                href={myBillingLink}
                                target="_blank"
                                rel="noopener noreferrer"
                            />,
                        },
                    )}
                </div>
            )}
        </>
    );
}