From 0752436f00dc6c16372e01b874ea124f4ef52d21 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 8 Jan 2025 15:01:47 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Split=20the=20advanced=20f?= =?UTF-8?q?orm=20into=202=20sub-components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/AdvancedOptionsForm.js | 199 +----------------- .../Components/ManualConnectionForm.js | 188 +++++++++++++++++ .../Components/SandboxConnectionForm.js | 9 +- 3 files changed, 197 insertions(+), 199 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js index 3ac56cc65..4d1891735 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js @@ -1,204 +1,13 @@ -import { __, sprintf } from '@wordpress/i18n'; -import { Button, TextControl } from '@wordpress/components'; -import { - useRef, - useState, - useEffect, - useMemo, - useCallback, -} from '@wordpress/element'; -import classNames from 'classnames'; - -import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock'; import Separator from '../../../ReusableComponents/Separator'; -import DataStoreControl from '../../../ReusableComponents/DataStoreControl'; -import { - useSandboxConnection, - useDirectAuthentication, -} from '../../../../hooks/useHandleConnections'; -import ConnectionButton from './ConnectionButton'; -import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; - -const FORM_ERRORS = { - noClientId: __( - 'Please enter your Client ID', - 'woocommerce-paypal-payments' - ), - noClientSecret: __( - 'Please enter your Secret Key', - 'woocommerce-paypal-payments' - ), - invalidClientId: __( - 'Please enter a valid Client ID', - 'woocommerce-paypal-payments' - ), -}; +import SandboxConnectionForm from './SandboxConnectionForm'; +import ManualConnectionForm from './ManualConnectionForm'; const AdvancedOptionsForm = () => { - const [ clientValid, setClientValid ] = useState( false ); - const [ secretValid, setSecretValid ] = useState( false ); - - const { isSandboxMode, setSandboxMode } = useSandboxConnection(); - const { - handleDirectAuthentication, - isManualConnectionMode, - setManualConnectionMode, - clientId, - setClientId, - clientSecret, - setClientSecret, - } = useDirectAuthentication(); - - const refClientId = useRef( null ); - const refClientSecret = useRef( null ); - - const validateManualConnectionForm = useCallback( () => { - const checks = [ - { - ref: refClientId, - valid: () => clientId, - errorMessage: FORM_ERRORS.noClientId, - }, - { - ref: refClientId, - valid: () => clientValid, - errorMessage: FORM_ERRORS.invalidClientId, - }, - { - ref: refClientSecret, - valid: () => clientSecret && secretValid, - errorMessage: FORM_ERRORS.noClientSecret, - }, - ]; - - for ( const { ref, valid, errorMessage } of checks ) { - if ( valid() ) { - continue; - } - - ref?.current?.focus(); - throw new Error( errorMessage ); - } - }, [ clientId, clientSecret, clientValid, secretValid ] ); - - const handleManualConnect = useCallback( - () => - handleDirectAuthentication( { - validation: validateManualConnectionForm, - } ), - [ handleDirectAuthentication, validateManualConnectionForm ] - ); - - useEffect( () => { - setClientValid( ! clientId || /^A[\w-]{79}$/.test( clientId ) ); - setSecretValid( clientSecret && clientSecret.length > 0 ); - }, [ clientId, clientSecret ] ); - - const clientIdLabel = useMemo( - () => - isSandboxMode - ? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' ) - : __( 'Live Client ID', 'woocommerce-paypal-payments' ), - [ isSandboxMode ] - ); - - const secretKeyLabel = useMemo( - () => - isSandboxMode - ? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' ) - : __( 'Live Secret Key', 'woocommerce-paypal-payments' ), - [ isSandboxMode ] - ); - - const advancedUsersDescription = sprintf( - // translators: %s: Link to PayPal REST application guide - __( - 'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.', - 'woocommerce-paypal-payments' - ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input' - ); - return ( <> - - - - - + - ( { - disabled: true, - label: props.label + ' ...', - } ) } - > - - - { clientValid || ( -

- { FORM_ERRORS.invalidClientId } -

- ) } - - - - + ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js index e69de29bb..ca0257159 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ManualConnectionForm.js @@ -0,0 +1,188 @@ +import { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from '@wordpress/element'; +import { Button, TextControl } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import classNames from 'classnames'; + +import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock'; +import DataStoreControl from '../../../ReusableComponents/DataStoreControl'; +import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; +import { + useDirectAuthentication, + useSandboxConnection, +} from '../../../../hooks/useHandleConnections'; +import { OnboardingHooks } from '../../../../data'; + +const FORM_ERRORS = { + noClientId: __( + 'Please enter your Client ID', + 'woocommerce-paypal-payments' + ), + noClientSecret: __( + 'Please enter your Secret Key', + 'woocommerce-paypal-payments' + ), + invalidClientId: __( + 'Please enter a valid Client ID', + 'woocommerce-paypal-payments' + ), +}; + +const ManualConnectionForm = () => { + const [ clientValid, setClientValid ] = useState( false ); + const [ secretValid, setSecretValid ] = useState( false ); + const { isSandboxMode } = useSandboxConnection(); + const { + manualClientId, + setManualClientId, + manualClientSecret, + setManualClientSecret, + } = OnboardingHooks.useManualConnectionForm(); + const { + handleDirectAuthentication, + isManualConnectionMode, + setManualConnectionMode, + } = useDirectAuthentication(); + const refClientId = useRef( null ); + const refClientSecret = useRef( null ); + + // Form data validation and sanitation. + const getManualConnectionDetails = useCallback( () => { + const checks = [ + { + ref: refClientId, + valid: () => manualClientId, + errorMessage: FORM_ERRORS.noClientId, + }, + { + ref: refClientId, + valid: () => clientValid, + errorMessage: FORM_ERRORS.invalidClientId, + }, + { + ref: refClientSecret, + valid: () => manualClientSecret && secretValid, + errorMessage: FORM_ERRORS.noClientSecret, + }, + ]; + + for ( const { ref, valid, errorMessage } of checks ) { + if ( valid() ) { + continue; + } + + ref?.current?.focus(); + throw new Error( errorMessage ); + } + + return { + clientId: manualClientId, + clientSecret: manualClientSecret, + isSandbox: isSandboxMode, + }; + }, [ + manualClientId, + manualClientSecret, + isSandboxMode, + clientValid, + secretValid, + ] ); + + // On-the-fly form validation. + useEffect( () => { + setClientValid( + ! manualClientId || /^A[\w-]{79}$/.test( manualClientId ) + ); + setSecretValid( manualClientSecret && manualClientSecret.length > 0 ); + }, [ manualClientId, manualClientSecret ] ); + + // Environment-specific field labels. + const clientIdLabel = useMemo( + () => + isSandboxMode + ? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' ) + : __( 'Live Client ID', 'woocommerce-paypal-payments' ), + [ isSandboxMode ] + ); + + const secretKeyLabel = useMemo( + () => + isSandboxMode + ? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' ) + : __( 'Live Secret Key', 'woocommerce-paypal-payments' ), + [ isSandboxMode ] + ); + + // Translations with placeholders. + const advancedUsersDescription = sprintf( + // translators: %s: Link to PayPal REST application guide + __( + 'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.', + 'woocommerce-paypal-payments' + ), + 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input' + ); + + // Button click handler. + const handleManualConnect = useCallback( + () => handleDirectAuthentication( getManualConnectionDetails ), + [ handleDirectAuthentication, getManualConnectionDetails ] + ); + + return ( + ( { + disabled: true, + label: props.label + ' ...', + } ) } + > + + + { clientValid || ( +

+ { FORM_ERRORS.invalidClientId } +

+ ) } + + + + + ); +}; + +export default ManualConnectionForm; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/SandboxConnectionForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/SandboxConnectionForm.js index 5323fb311..39b115b9d 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/SandboxConnectionForm.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/SandboxConnectionForm.js @@ -1,10 +1,11 @@ +import { __ } from '@wordpress/i18n'; + import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper'; import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock'; -import { __ } from '@wordpress/i18n'; -import ConnectionButton from './ConnectionButton'; import { useSandboxConnection } from '../../../../hooks/useHandleConnections'; +import ConnectionButton from './ConnectionButton'; -const SandboxLoginSection = () => { +const SandboxConnectionForm = () => { const { isSandboxMode, setSandboxMode } = useSandboxConnection(); return ( @@ -38,4 +39,4 @@ const SandboxLoginSection = () => { ); }; -export default SandboxLoginSection; +export default SandboxConnectionForm;