From 0ea8272f82e760b0648c072d0307b1bc76582f90 Mon Sep 17 00:00:00 2001 From: Francesco Date: Tue, 10 Dec 2024 14:54:01 +0100 Subject: [PATCH 1/4] fix: console warning for useEffect on plugins page (#9913) --- changelog/fix-use-effect-console-warning | 5 +++++ client/plugins-page/index.js | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 changelog/fix-use-effect-console-warning diff --git a/changelog/fix-use-effect-console-warning b/changelog/fix-use-effect-console-warning new file mode 100644 index 00000000000..45219e7b39a --- /dev/null +++ b/changelog/fix-use-effect-console-warning @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: fix: console warning on plugins page + + diff --git a/client/plugins-page/index.js b/client/plugins-page/index.js index 24d59e65fa5..b960794f65d 100644 --- a/client/plugins-page/index.js +++ b/client/plugins-page/index.js @@ -77,12 +77,12 @@ const PluginsPage = () => { useEffect( () => { // If the survey is dismissed skip event listeners. if ( isModalDismissed() ) { - return null; + return; } // Abort if the deactivation link is not present. if ( deactivationLink === null ) { - return null; + return; } // Handle click event. From adbac29236168227b9e191a6c7ac4a15a2018d32 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Tue, 10 Dec 2024 18:41:04 +0100 Subject: [PATCH 2/4] Update confirmation modal after progressive onboarding (#9915) --- changelog/update-confirmation-modal-nox | 4 + .../index.tsx | 98 +++++++++---------- .../style.scss | 85 +++++++++++----- .../test/index.test.tsx | 4 +- client/overview/task-list/strings.tsx | 5 +- client/overview/test/index.js | 2 +- 6 files changed, 116 insertions(+), 82 deletions(-) create mode 100644 changelog/update-confirmation-modal-nox 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' + ) } +