woocommerce/plugins/woocommerce-admin/client/task-list/tasks/payments/generic-payment-step.js

/**
 * External dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import interpolateComponents from 'interpolate-components';
import { useDispatch, useSelect } from '@wordpress/data';
import { Form, Link, Stepper, TextControl } from '@woocommerce/components';
import { OPTIONS_STORE_NAME } from '@woocommerce/data';

export function GenericPaymentStep( {
	installStep,
	markConfigured,
	methodConfig,
	recordConnectStartEvent,
} ) {
	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
	const { createNotice } = useDispatch( 'core/notices' );

	const isOptionsRequesting = useSelect( ( select ) => {
		const { isOptionsUpdating } = select( OPTIONS_STORE_NAME );

		return isOptionsUpdating();
	} );

	const getInitialConfigValues = () => {
		if ( methodConfig && methodConfig.fields ) {
			return methodConfig.fields.reduce( ( data, field ) => {
				return {
					...data,
					[ field.name ]: '',
				};
			}, {} );
		}
	};

	const validate = ( values ) => {
		if ( methodConfig && methodConfig.fields ) {
			return methodConfig.fields.reduce( ( errors, field ) => {
				if ( ! values[ field.name ] ) {
					// Matches any word that is capitalized aside from abrevitions like ID.
					const title = field.title.replace(
						/([A-Z][a-z]+)/,
						( val ) => val.toLowerCase()
					);
					return {
						...errors,
						[ field.name ]: __( 'Please enter your ' ) + title,
					};
				}
				return errors;
			}, {} );
		}
		return {};
	};

	const updateSettings = async ( values ) => {
		// Because the GenericPaymentStep extension only works with the South African Rand
		// currency, force the store to use it while setting the GenericPaymentStep settings
		const options = methodConfig.getOptions
			? methodConfig.getOptions( values )
			: null;
		if ( ! options ) {
			return;
		}
		const update = await updateOptions( {
			...options,
		} );

		if ( update.success ) {
			markConfigured( methodConfig.key );
			createNotice(
				'success',
				methodConfig.title +
					__( ' connected successfully', 'woocommerce-admin' )
			);
		} else {
			createNotice(
				'error',
				__(
					'There was a problem saving your payment settings',
					'woocommerce-admin'
				)
			);
		}
	};

	const renderConnectStep = () => {
		const helpText = interpolateComponents( {
			mixedString: __(
				'Your API details can be obtained from your {{link/}}',
				'woocommerce-admin'
			),
			components: {
				link: (
					<Link
						href={ methodConfig.apiDetailsLink }
						target="_blank"
						type="external"
					>
						{ sprintf(
							__( '%(title)s account', 'woocommerce-admin' ),
							{
								title: methodConfig.title,
							}
						) }
					</Link>
				),
			},
		} );

		return (
			<Form
				initialValues={ getInitialConfigValues() }
				onSubmit={ updateSettings }
				validate={ validate }
			>
				{ ( { getInputProps, handleSubmit } ) => {
					return (
						<>
							{ ( methodConfig.fields || [] ).map( ( field ) => (
								<TextControl
									key={ field.name }
									label={ field.title }
									required
									{ ...getInputProps( field.name ) }
								/>
							) ) }

							<Button
								isPrimary
								isBusy={ isOptionsRequesting }
								onClick={ ( event ) => {
									recordConnectStartEvent( methodConfig.key );
									handleSubmit( event );
								} }
							>
								{ __( 'Proceed', 'woocommerce-admin' ) }
							</Button>

							<p>{ helpText }</p>
						</>
					);
				} }
			</Form>
		);
	};

	return (
		<Stepper
			isVertical
			isPending={ ! installStep.isComplete || isOptionsRequesting }
			currentStep={ installStep.isComplete ? 'connect' : 'install' }
			steps={ [
				installStep,
				{
					key: 'connect',
					label: sprintf(
						__(
							'Connect your %(title)s account',
							'woocommerce-admin'
						),
						{
							title: methodConfig.title,
						}
					),
					content: renderConnectStep(),
				},
			] }
		/>
	);
}