Tiny File Manager

Back Back Up Advanced Editor

import Cookie from './Cookie';
import Panel from "../Panel";
import UseSyncData from "./SyncData";
import { __ } from '@wordpress/i18n';
import Icon from "../../utils/Icon";
import useFields from "../../Settings/Fields/FieldsData";
import CheckboxGroup from "../Inputs/CheckboxGroup";
import SelectInput from "../Inputs/SelectInput";
import {memo, useEffect, useState} from "@wordpress/element";

const ServiceDetails = (service) => {
	const {getFieldValue, showSavedSettingsNotice} = useFields();
	const [serviceName, setServiceName] = useState('');
	const [privacyStatementUrl, setPrivacyStatementUrl] = useState('');
	const {language, saving, deleteService, serviceTypeOptions, updateService, saveService} = UseSyncData();
	let useCdbApi = getFieldValue('use_cdb_api')==='yes';
	const [serviceTypesByLanguage, setServiceTypesByLanguage] = useState([]);

useEffect (() => {
		let serviceTypesByLanguage = serviceTypeOptions && serviceTypeOptions.hasOwnProperty(language) ? serviceTypeOptions[language] : [];
		serviceTypesByLanguage = serviceTypesByLanguage.map(serviceType => {
			return {label:serviceType.label,value:serviceType.label};
		});
		setServiceTypesByLanguage(serviceTypesByLanguage);
	},[language, serviceTypeOptions]);

const onSaveHandler = async (id) => {
		await saveService(id);
		showSavedSettingsNotice(__("Saved service", "complianz-gdpr"));
	}

const onDeleteHandler = async (id) => {
		await deleteService(id);
	}

const onChangeHandler = (value, id, type) => {
		updateService(id, type, value);
	}
	const onCheckboxChangeHandler = (checked, id, type) => {
		updateService(id, type, checked);
	}

useEffect(() => {
		if ( service && service.name ) {
			setServiceName(service.name);
		}
	},[service]);

useEffect(() => {
		if (!service) {
			return;
		}

if ( service.name === serviceName ) {
			return;
		}
		if (serviceName.length<2) {
			return;
		}
		const typingTimerServiceName = setTimeout(() => {
			onChangeHandler(serviceName, service.ID, 'name')
		}, 500);

return () => {
			clearTimeout(typingTimerServiceName);
		};
	}, [serviceName]);

useEffect(() => {
		if ( service && service.privacyStatementURL ) {
			setPrivacyStatementUrl(service.privacyStatementURL);
		}
	},[service]);

useEffect(() => {
		if ( !service ) {
			return;
		}
		if ( service.privacyStatementURL === privacyStatementUrl ) {
			return;
		}
		if (privacyStatementUrl.length===0) {
			return;
		}
		const typingTimerPrivacyStatementUrl = setTimeout(() => {
			onChangeHandler(privacyStatementUrl, service.ID, 'privacyStatementURL')
		}, 400);

return () => {
			clearTimeout(typingTimerPrivacyStatementUrl);
		};
	}, [privacyStatementUrl]);

if (!service) {
		return null;
	}
	//allow for both '0'/'1' and false/true.
	let sync = useCdbApi ? service.sync==1 : false;
	let disabled = sync;
	if (saving) {
		disabled = true;
	}

let cdbLink = false;
	if ( service.slug.length>0 ) {
		cdbLink = 'https://cookiedatabase.org/service/' + service.slug;
	}
	return (
		<>
			<div className="cmplz-details-row cmplz-details-row__checkbox">
				<CheckboxGroup
					id={service.ID+'sharesData'}
					disabled={disabled}
					value={service.sharesData==1}
					onChange={(value) => onCheckboxChangeHandler(value, service.ID, 'sharesData')}
					options={{true: __('Data is shared with this service', 'complianz-gdpr')}}
				/>
			</div>
			<div className="cmplz-details-row cmplz-details-row__checkbox">
				<CheckboxGroup
					id={service.ID+'sync'}
					disabled={!useCdbApi}
					value={sync}
					onChange={(value) => onCheckboxChangeHandler(value, service.ID, 'sync')}
					options={{true: __('Sync service with cookiedatabase.org', 'complianz-gdpr')}}
				/>
			</div>
			<div className="cmplz-details-row">
				<label>{__("Name", "complianz-gdpr")}</label>
				<input disabled={disabled}
					   onChange={ ( e ) =>  setServiceName(e.target.value) }
					   type="text"
					   placeholder={__("Name", "complianz-gdpr")}
					   value={serviceName} />
			</div>

<div className="cmplz-details-row">
				<label>{__("Service Types", "complianz-gdpr")}</label>
				<SelectInput
					disabled={disabled}
					value={service.serviceType}
					options={serviceTypesByLanguage}
					onChange={(value) => onChangeHandler(value, service.ID, 'serviceType')}
				/>
			</div>
			<div className="cmplz-details-row">
				<label>{__("Privacy Statement URL", "complianz-gdpr")}</label>
				<input
					disabled={disabled}
					onChange={ ( e ) =>  setPrivacyStatementUrl(e.target.value) }
					type="text"
					value={privacyStatementUrl} />
			</div>
			{cdbLink &&
				<div className="cmplz-details-row">
					<a href={cdbLink} target="_blank" rel="noopener noreferrer">{__( "View service on cookiedatabase.org", "complianz-gdpr" )}</a>
				</div>
			}
			<div className="cmplz-details-row cmplz-details-row__buttons">
				<button disabled={saving} onClick={ ( e ) => onSaveHandler(service.ID) }  className="button button-default">{__("Save", "complianz-gdpr")}</button>
				<button className="button button-default cmplz-reset-button" onClick={ ( e ) => onDeleteHandler(service.ID) }>
					{__("Delete Service", "complianz-gdpr")}
				</button>
			</div>
		</>
	);
}

const Service = (props) => {
	const {adding} = UseSyncData();

const onAddCookieHandler = (serviceID, serviceName) => {
		props.addCookie(serviceID,serviceName);
	}
	const serviceIsSaved = props.service && props.service.ID>0 && props.service.hasOwnProperty('name');
	const isUnknownService = !props.service || props.service.ID<=0;
	const serviceName = props.service && props.service.name ? props.service.name : __("New Service", "complianz-gdpr");
	const Details = () =>{

return (
			<>
				<div>
					{ ServiceDetails(props.service)}
				</div>
				{props.cookies && props.cookies.length > 0 &&
					<div className="cmplz-panel__cookie_list">
						{props.cookies.map((cookie, i) => <Cookie key={i} cookie={cookie}/>)}
					</div>
				}
				{!isUnknownService &&
					<div>
						<button disabled={adding || !serviceIsSaved} onClick={ (e) => onAddCookieHandler(props.service.ID, serviceName) } className="button button-default">
							{__("Add cookie to %s", "complianz-gdpr").replace("%s", serviceName) }
							{adding && <Icon name = "loading" color = 'grey' />}
						</button>
						{!serviceIsSaved && <div className="cmplz-comment">{__("Save service to be able to add cookies", "complianz-gdpr")}</div>}
					</div>
				}
			</>
		);
	}

const Icons = () => {
		if ( !props.service ) {
			return (<></>)
		}

return (
			<>
				{props.service.complete && <Icon tooltip={__( "The data for this service is complete", "complianz-gdpr" )} name = 'success' color = 'green' />}
				{!props.service.complete && <Icon tooltip={__( "This service has missing fields", "complianz-gdpr" )} name = 'times' color = 'red' />}
				{props.service.synced && <Icon tooltip={__( "This service has been synchronized with cookiedatabase.org", "complianz-gdpr" )} name = 'rotate' color = 'green' />}
				{!props.service.synced && <Icon tooltip={__( "This service is not synchronized with cookiedatabase.org", "complianz-gdpr" )} name = 'rotate-error' color = 'red' />}
			</>
		)
	}

return (
		<>
			<Panel id={props.id} summary={props.name} icons={Icons()} details={Details()} />
		</>
	);

}

export default memo(Service);