woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

⚡️ Minor performance tweaks

Browse source
This commit is contained in:
Philipp Stracker 2024-12-06 14:37:21 +01:00
parent 5b26d7c5ca
commit 3174bc158f
No known key found for this signature in database
1 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

36
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
View file

@ -1,6 +1,12 @@
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import { Button, TextControl } from '@wordpress/components'; import { Button, TextControl } from '@wordpress/components';
import { useRef, useState, useEffect } from '@wordpress/element'; import {
useRef,
useState,
useEffect,
useMemo,
useCallback,
} from '@wordpress/element';
import classNames from 'classnames'; import classNames from 'classnames';
@ -33,8 +39,6 @@ const FORM_ERRORS = {
const AdvancedOptionsForm = () => { const AdvancedOptionsForm = () => {
const [ clientValid, setClientValid ] = useState( false ); const [ clientValid, setClientValid ] = useState( false );
const [ secretValid, setSecretValid ] = useState( false ); const [ secretValid, setSecretValid ] = useState( false );
const [ clientIdLabel, setClientIdLabel ] = useState( '' );
const [ secretKeyLabel, setSecretKeyLabel ] = useState( '' );
const { isBusy } = CommonHooks.useBusyState(); const { isBusy } = CommonHooks.useBusyState();
const { isSandboxMode, setSandboxMode } = useSandboxConnection(); const { isSandboxMode, setSandboxMode } = useSandboxConnection();
@ -51,7 +55,7 @@ const AdvancedOptionsForm = () => {
const refClientId = useRef( null ); const refClientId = useRef( null );
const refClientSecret = useRef( null ); const refClientSecret = useRef( null );
const validateManualConnectionForm = () => { const validateManualConnectionForm = useCallback( () => {
const checks = [ const checks = [
{ {
ref: refClientId, ref: refClientId,
@ -78,30 +82,36 @@ const AdvancedOptionsForm = () => {
ref?.current?.focus(); ref?.current?.focus();
throw new Error( errorMessage ); throw new Error( errorMessage );
} }
}; }, [ clientId, clientSecret, clientValid, secretValid ] );
const handleManualConnect = () => const handleManualConnect = useCallback(
() =>
handleConnectViaIdAndSecret( { handleConnectViaIdAndSecret( {
validation: validateManualConnectionForm, validation: validateManualConnectionForm,
} ); } ),
[ validateManualConnectionForm ]
);
useEffect( () => { useEffect( () => {
setClientValid( ! clientId || /^A[\w-]{79}$/.test( clientId ) ); setClientValid( ! clientId || /^A[\w-]{79}$/.test( clientId ) );
setSecretValid( clientSecret && clientSecret.length > 0 ); setSecretValid( clientSecret && clientSecret.length > 0 );
}, [ clientId, clientSecret ] ); }, [ clientId, clientSecret ] );
useEffect( () => { const clientIdLabel = useMemo(
setClientIdLabel( () =>
isSandboxMode isSandboxMode
? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' ) ? __( 'Sandbox Client ID', 'woocommerce-paypal-payments' )
: __( 'Live Client ID', 'woocommerce-paypal-payments' ) : __( 'Live Client ID', 'woocommerce-paypal-payments' ),
[ isSandboxMode ]
); );
setSecretKeyLabel(
const secretKeyLabel = useMemo(
() =>
isSandboxMode isSandboxMode
? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' ) ? __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' )
: __( 'Live Secret Key', 'woocommerce-paypal-payments' ) : __( 'Live Secret Key', 'woocommerce-paypal-payments' ),
[ isSandboxMode ]
); );
}, [ isSandboxMode ] );
const advancedUsersDescription = sprintf( const advancedUsersDescription = sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide