woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Refactor onboarding form component

Browse source
This commit is contained in:
Philipp Stracker 2024-11-05 18:32:33 +01:00
parent e8c9a53441
commit 8c92320969
No known key found for this signature in database
2 changed files with 124 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

124
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -1,12 +1,10 @@
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import { __, sprintf } from '@wordpress/i18n';
import { Button, TextControl } from '@wordpress/components';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
import Separator from '../../ReusableComponents/Separator';
import { useOnboardingStepWelcome, useManualConnect } from '../../../data';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import DataStoreControl from '../../ReusableComponents/DataStoreControl';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import Separator from '../../ReusableComponents/Separator';
import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
return (
@ -38,7 +36,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
className="ppcp-r-page-welcome-or-separator"
text={ __( 'or', 'woocommerce-paypal-payments' ) }
/>
<WelcomeForm setCompleted={ setCompleted } />
<AdvancedOptionsForm setCompleted={ setCompleted } />
</div>
</div>
);
@ -75,112 +73,4 @@ const WelcomeFeatures = () => {
);
};
const WelcomeForm = ( { setCompleted } ) => {
const {
isManualConnectionBusy,
isSandboxMode,
setSandboxMode,
isManualConnectionMode,
setManualConnectionMode,
clientId,
setClientId,
clientSecret,
setClientSecret,
} = useOnboardingStepWelcome();
const { connectManual } = useManualConnect();
const handleConnect = async () => {
try {
const res = await connectManual();
if ( ! res.success ) {
throw new Error( 'Request failed.' );
}
setCompleted( true );
} catch ( exc ) {
console.error( exc );
alert( 'Connection failed.' );
}
};
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, <a target="_blank" href="%s">click here</a>.',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
);
return (
<>
<SettingsToggleBlock
label={ __(
'Enable Sandbox Mode',
'woocommerce-paypal-payments'
) }
description={ __(
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
'woocommerce-paypal-payments'
) }
isToggled={ !! isSandboxMode }
setToggled={ setSandboxMode }
>
<Button variant="secondary">
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button>
</SettingsToggleBlock>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<SettingsToggleBlock
label={ __(
'Manually Connect',
'woocommerce-paypal-payments'
) }
description={ advancedUsersDescription }
isToggled={ !! isManualConnectionMode }
setToggled={ setManualConnectionMode }
isLoading={ isManualConnectionBusy }
>
<DataStoreControl
control={ TextControl }
label={
isSandboxMode
? __(
'Sandbox Client ID',
'woocommerce-paypal-payments'
)
: __(
'Live Client ID',
'woocommerce-paypal-payments'
)
}
value={ clientId }
onChange={ setClientId }
/>
<DataStoreControl
control={ TextControl }
label={
isSandboxMode
? __(
'Sandbox Secret Key',
'woocommerce-paypal-payments'
)
: __(
'Live Secret Key',
'woocommerce-paypal-payments'
)
}
value={ clientSecret }
onChange={ setClientSecret }
type="password"
/>
<Button variant="secondary" onClick={ handleConnect }>
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
</Button>
</SettingsToggleBlock>
</>
);
};
export default StepWelcome;