woocommerce/plugins/woocommerce-admin/client/task-list/tasks/payments/mollie.js

74 lines
1.6 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { ADMIN_URL as adminUrl } from '@woocommerce/wc-admin-settings';
import { Stepper, Link } from '@woocommerce/components';
import { Button } from '@wordpress/components';
import interpolateComponents from 'interpolate-components';
export const Mollie = ( { installStep, markConfigured } ) => {
return (
<Stepper
isVertical
isPending={ ! installStep.isComplete }
currentStep={ installStep.isComplete ? 'connect' : 'install' }
steps={ [
installStep,
{
key: 'connect',
label: __(
'Connect your Mollie account',
'woocommerce-admin'
),
content: (
<MollieConnectStep
onFinish={ () => {
markConfigured( 'mollie' );
} }
/>
),
},
] }
/>
);
};
const MollieConnectStep = ( { onFinish } ) => {
const settingsLink = (
<Link
href={ `${ adminUrl }admin.php?page=wc-settings&tab=mollie_settings#mollie-payments-for-woocommerce` }
target="_blank"
type="external"
/>
);
const accountLink = (
<Link
href={ 'https://www.mollie.com/dashboard/signup' }
target="_blank"
type="external"
/>
);
const configureText = interpolateComponents( {
mixedString: __(
'Create a {{accountLink}}Mollie account{{/accountLink}} and finish the configuration in the {{settingsLink}}Mollie settings.{{/settingsLink}}',
'woocommerce-admin'
),
components: {
accountLink,
settingsLink,
},
} );
return (
<>
<p>{ configureText }</p>
<Button isPrimary onClick={ onFinish }>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>
</>
);
};