diff --git a/changelog/update-confirmation-modal-nox b/changelog/update-confirmation-modal-nox new file mode 100644 index 00000000000..0ffd1af6127 --- /dev/null +++ b/changelog/update-confirmation-modal-nox @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update confirmation modal after onbarding diff --git a/client/overview/modal/progressive-onboarding-eligibility/index.tsx b/client/overview/modal/progressive-onboarding-eligibility/index.tsx index d4b3f79021f..6f6be89a707 100644 --- a/client/overview/modal/progressive-onboarding-eligibility/index.tsx +++ b/client/overview/modal/progressive-onboarding-eligibility/index.tsx @@ -5,8 +5,9 @@ import React, { useEffect, useState } from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { addQueryArgs } from '@wordpress/url'; import { Button, Modal } from '@wordpress/components'; -import { Icon, store, widget, tool } from '@wordpress/icons'; +import { Icon, store, currencyDollar } from '@wordpress/icons'; import { useDispatch } from '@wordpress/data'; +import interpolateComponents from '@automattic/interpolate-components'; /** * Internal dependencies @@ -59,75 +60,74 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => { setModalVisible( false ); }; - // Workaround to remove Modal header from the modal until `hideHeader` prop can be used. - useEffect( () => { - document - .querySelector( - '.wcpay-progressive-onboarding-eligibility-modal .components-modal__header-heading-container' - ) - ?.remove(); - }, [] ); - if ( ! modalVisible || modalDismissed ) return null; return ( -

- { __( 'You’re ready to sell.', 'woocommerce-payments' ) } -

- { __( - 'Start selling now and fast track the setup process, or continue the process to set up payouts with WooPayments.', - 'woocommerce-payments' - ) } + { interpolateComponents( { + mixedString: sprintf( + __( + 'Great news — your %s account has been activated. You can now start accepting payments on your store, subject to {{restrictionsLink}}certain restrictions{{/restrictionsLink}}.', + 'woocommerce-payments' + ), + 'WooPayments' + ), + components: { + restrictionsLink: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + }, + } ) }

- -

+ +
+

+ { __( + 'Start selling instantly', + 'woocommerce-payments' + ) } +

{ __( - 'Start selling instantly', + 'You have 30 days from your first transaction or until you reach $5,000 in sales to verify your information and set up payouts.', 'woocommerce-payments' ) } -

- { sprintf( - /* translators: %s: WooPayments */ - __( - '%s enables you to start processing credit card payments right away.', - 'woocommerce-payments' - ), - 'WooPayments' - ) } -
-
- -

- { __( 'Quick and easy setup', 'woocommerce-payments' ) } -

- { __( - 'The setup process is super simple and ensures your store is ready to accept card payments.', - 'woocommerce-payments' - ) } +
- -

- { __( 'Flexible process', 'woocommerce-payments' ) } -

- { __( - 'You have a $5,000 balance limit or 30 days from your first transaction to verify and set up payouts in your account.', - 'woocommerce-payments' - ) } + +
+

+ { __( + 'Start receiving payouts', + 'woocommerce-payments' + ) } +

+ { __( + 'Provide some additional details about your business so you can continue accepting payments and begin receiving payouts without restrictions.', + 'woocommerce-payments' + ) } +