From 04db0a9ba9e48bf359d3d4f7256a57549fd5ac6b Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Wed, 22 Jan 2025 12:37:10 +0200 Subject: [PATCH 1/9] Add changelog --- changelog/update-9811-design-improvements-overview-page | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/update-9811-design-improvements-overview-page diff --git a/changelog/update-9811-design-improvements-overview-page b/changelog/update-9811-design-improvements-overview-page new file mode 100644 index 00000000000..f6b2948f405 --- /dev/null +++ b/changelog/update-9811-design-improvements-overview-page @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Design improvements related to the overview page From 3472a432c01c431f16ad91987bc6c289d5f6a8b1 Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Thu, 23 Jan 2025 11:49:35 +0200 Subject: [PATCH 2/9] Check payments and deposits enabled when showing success modal --- client/overview/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/overview/index.js b/client/overview/index.js index 659b820cc1a..301d39772c0 100644 --- a/client/overview/index.js +++ b/client/overview/index.js @@ -93,6 +93,8 @@ const OverviewPage = () => { const accountRejected = accountStatus.status && accountStatus.status.startsWith( 'rejected' ); const accountUnderReview = accountStatus.status === 'under_review'; + const paymentsEnabled = accountStatus.paymentsEnabled; + const depositsEnabled = accountStatus.deposits?.status === 'enabled'; const showConnectionSuccess = queryParams[ 'wcpay-connection-success' ] === '1'; @@ -119,6 +121,8 @@ const OverviewPage = () => { const showConnectionSuccessModal = showConnectionSuccess && ! isTestModeOnboarding && + paymentsEnabled && + depositsEnabled && isPoDisabledOrCompleted; const activeAccountFees = Object.entries( wcpaySettings.accountFees ) From 09e2e5e9974b1b6000a585c32d65d20bb9ebf19f Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Thu, 23 Jan 2025 12:46:50 +0200 Subject: [PATCH 3/9] Add HoverTooltip to the deposits suspended notice --- client/components/deposits-status/index.tsx | 64 ++++++++++++++------- 1 file changed, 43 insertions(+), 21 deletions(-) diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index 6e562296322..0090160591e 100644 --- a/client/components/deposits-status/index.tsx +++ b/client/components/deposits-status/index.tsx @@ -4,15 +4,17 @@ * External dependencies */ import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle'; +import HelpOutlineIcon from 'gridicons/dist/help-outline'; import GridiconNotice from 'gridicons/dist/notice'; -import { __ } from '@wordpress/i18n'; -import { createInterpolateElement } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; +import interpolateComponents from '@automattic/interpolate-components'; import React from 'react'; /** * Internal dependencies */ import 'components/account-status/shared.scss'; +import { HoverTooltip } from 'wcpay/components/tooltip'; import type { AccountStatus } from 'wcpay/types/account/account-status'; type DepositsStatus = 'enabled' | 'disabled' | 'blocked'; @@ -62,31 +64,51 @@ const DepositsStatusDisabled: React.FC< DepositsStatusProps > = ( props ) => { const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { const { iconSize } = props; - const learnMoreHref = - 'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'; - - const description = createInterpolateElement( + const description = /* translators: - suspended accounts FAQ URL */ - __( - 'Temporarily suspended (learn more)', - 'woocommerce-payments' - ), - { - a: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - ), - } - ); + __( 'Temporarily suspended', 'woocommerce-payments' ); return ( { description } + + ), + }, + } ) } + > +
+ +
+ ); }; From a9aded59f0ad038a33c95fa5d6a0462f919b7e8d Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Thu, 23 Jan 2025 17:07:21 +0200 Subject: [PATCH 4/9] Fix snapshot tests --- .../test/__snapshots__/index.js.snap | 108 ++++++++++++++---- 1 file changed, 84 insertions(+), 24 deletions(-) diff --git a/client/components/deposits-status/test/__snapshots__/index.js.snap b/client/components/deposits-status/test/__snapshots__/index.js.snap index b0813fd50e2..4d314b69e92 100644 --- a/client/components/deposits-status/test/__snapshots__/index.js.snap +++ b/client/components/deposits-status/test/__snapshots__/index.js.snap @@ -18,15 +18,35 @@ exports[`DepositsStatus renders blocked status 1`] = ` /> - Temporarily suspended ( - - learn more - - ) +
+
+ + + + + +
+
+ `; @@ -49,15 +69,35 @@ exports[`DepositsStatus renders blocked status 2`] = ` /> - Temporarily suspended ( - - learn more - - ) +
+
+ + + + + +
+
+ `; @@ -172,15 +212,35 @@ exports[`DepositsStatus renders pending verification status 1`] = ` /> - Temporarily suspended ( - - learn more - - ) +
+
+ + + + + +
+
+ `; From 5dacdad220c5255687c662c420a3de961a10faf0 Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Fri, 24 Jan 2025 15:27:39 +0200 Subject: [PATCH 5/9] Address PR feedback --- client/components/deposits-status/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index 0090160591e..90a4a873c1c 100644 --- a/client/components/deposits-status/index.tsx +++ b/client/components/deposits-status/index.tsx @@ -80,7 +80,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { /* translators: 1: WooPayments */ __( // eslint-disable-next-line max-len - 'After the information review your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'After the information review, your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}', 'woocommerce-payments' ), 'WooPayments' From 31b3a5f40a34bf8ac435a71e1e7571daa23b555f Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Fri, 24 Jan 2025 15:32:26 +0200 Subject: [PATCH 6/9] Change size of the icon --- client/components/deposits-status/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index 90a4a873c1c..13d44fee097 100644 --- a/client/components/deposits-status/index.tsx +++ b/client/components/deposits-status/index.tsx @@ -106,7 +106,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { role="button" aria-label="Learn more about deposits suspended" > - + From 4cd7969c2bf4e7c5c15346a3107cb856cda07d11 Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Fri, 24 Jan 2025 15:41:46 +0200 Subject: [PATCH 7/9] update snapshot --- .../deposits-status/test/__snapshots__/index.js.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/components/deposits-status/test/__snapshots__/index.js.snap b/client/components/deposits-status/test/__snapshots__/index.js.snap index 4d314b69e92..846d8fe8d1a 100644 --- a/client/components/deposits-status/test/__snapshots__/index.js.snap +++ b/client/components/deposits-status/test/__snapshots__/index.js.snap @@ -33,9 +33,9 @@ exports[`DepositsStatus renders blocked status 1`] = ` > @@ -84,9 +84,9 @@ exports[`DepositsStatus renders blocked status 2`] = ` > @@ -227,9 +227,9 @@ exports[`DepositsStatus renders pending verification status 1`] = ` > From 451eadab8301a910128d119df34d5bfb998846ab Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Fri, 24 Jan 2025 19:36:27 +0200 Subject: [PATCH 8/9] Change HoverTooltip to ClickTooltip --- client/components/deposits-status/index.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index 13d44fee097..a16a0a502cb 100644 --- a/client/components/deposits-status/index.tsx +++ b/client/components/deposits-status/index.tsx @@ -14,7 +14,7 @@ import React from 'react'; * Internal dependencies */ import 'components/account-status/shared.scss'; -import { HoverTooltip } from 'wcpay/components/tooltip'; +import { ClickTooltip } from 'wcpay/components/tooltip'; import type { AccountStatus } from 'wcpay/types/account/account-status'; type DepositsStatus = 'enabled' | 'disabled' | 'blocked'; @@ -72,9 +72,13 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { { description } - } + buttonLabel={ __( + 'Learn more about payouts suspended', + 'woocommerce-payments' + ) } content={ interpolateComponents( { mixedString: sprintf( /* translators: 1: WooPayments */ @@ -100,15 +104,7 @@ const DepositsStatusSuspended: React.FC< DepositsStatusProps > = ( props ) => { ), }, } ) } - > -
- -
- + /> ); }; From 76e09d4556d39328fc11cbdde2cdf0e7bc31a6a4 Mon Sep 17 00:00:00 2001 From: oaratovskyi Date: Fri, 24 Jan 2025 19:38:12 +0200 Subject: [PATCH 9/9] update snapshot --- .../deposits-status/test/__snapshots__/index.js.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/components/deposits-status/test/__snapshots__/index.js.snap b/client/components/deposits-status/test/__snapshots__/index.js.snap index 846d8fe8d1a..4dd54771a08 100644 --- a/client/components/deposits-status/test/__snapshots__/index.js.snap +++ b/client/components/deposits-status/test/__snapshots__/index.js.snap @@ -20,14 +20,14 @@ exports[`DepositsStatus renders blocked status 1`] = ` Temporarily suspended