woocommerce/plugins/woocommerce-admin/client/two-column-tasks/headers/woocommerce-payments.js

100 lines
2.7 KiB
JavaScript

/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { WC_ADMIN_NAMESPACE } from '@woocommerce/data';
import { Link } from '@woocommerce/components';
import interpolateComponents from '@automattic/interpolate-components';
/**
* Internal dependencies
*/
import TimerImage from './timer.svg';
import { WC_ASSET_URL } from '../../utils/admin-settings';
const connect = ( createNotice, setIsBusy ) => {
const errorMessage = __(
'There was an error connecting to WooCommerce Payments. Please try again or connect later in store settings.',
'woocommerce'
);
setIsBusy( true );
apiFetch( {
path: WC_ADMIN_NAMESPACE + '/plugins/connect-wcpay',
method: 'POST',
} )
.then( ( response ) => {
window.location = response.connectUrl;
} )
.catch( () => {
createNotice( 'error', errorMessage );
setIsBusy( false );
} );
};
const WoocommercePaymentsHeader = ( { task, trackClick } ) => {
const { createNotice } = useDispatch( 'core/notices' );
const [ isBusy, setIsBusy ] = useState( false );
const onClick = () => {
trackClick();
connect( createNotice, setIsBusy );
};
return (
<div className="woocommerce-task-header__contents-container">
<img
alt={ __( 'Payment illustration', 'woocommerce' ) }
src={
WC_ASSET_URL + 'images/task_list/payment-illustration.png'
}
className="svg-background"
/>
<div className="woocommerce-task-header__contents">
<h1>{ __( "It's time to get paid", 'woocommerce' ) }</h1>
<p>
{ __(
"You're only one step away from getting paid. Verify your business details to start managing transactions with WooCommerce Payments.",
'woocommerce'
) }
</p>
<p>
{ interpolateComponents( {
mixedString: __(
'By clicking "Verify Details", you agree to the {{link}}Terms of Service{{/link}}',
'woocommerce'
),
components: {
link: (
<Link
href="https://wordpress.com/tos/"
target="_blank"
type="external"
rel="noreferrer"
/>
),
},
} ) }
</p>
<Button
isSecondary={ task.isComplete }
isPrimary={ ! task.isComplete }
isBusy={ isBusy }
disabled={ isBusy }
onClick={ onClick }
>
{ __( 'Verify details', 'woocommerce' ) }
</Button>
<p className="woocommerce-task-header__timer">
<img src={ TimerImage } alt="Timer" />{ ' ' }
<span>{ __( '2 minutes', 'woocommerce' ) }</span>
</p>
</div>
</div>
);
};
export default WoocommercePaymentsHeader;