// @flow import * as MODALS from 'constants/modal_types'; import React from 'react'; import Button from 'component/button'; import SettingsRow from 'component/settingsRow'; import { withRouter } from 'react-router'; import { FormField } from 'component/common/form'; type Props = { setSyncEnabled: (boolean) => void, syncEnabled: boolean, verifiedEmail: ?string, history: { push: (string) => void }, location: UrlLocation, getSyncError: ?string, disabled: boolean, openModal: (string, any) => void, }; function SyncToggle(props: Props) { const { verifiedEmail, openModal, syncEnabled, disabled } = props; return ( <SettingsRow title={__('Sync')} subtitle={disabled || !verifiedEmail ? '' : __('Sync your balance and preferences across devices.')} > <FormField type="checkbox" name="sync_toggle" label={disabled || !verifiedEmail ? __('Sync your balance and preferences across devices.') : undefined} checked={syncEnabled && verifiedEmail} onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })} disabled={disabled || !verifiedEmail} helper={ disabled ? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.") : null } /> {!verifiedEmail && ( <div> <p className="help">{__('An email address is required to sync your account.')}</p> <Button button="primary" label={__('Add Email')} /> </div> )} </SettingsRow> ); } export default withRouter(SyncToggle);