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 diff --git a/client/components/deposits-status/index.tsx b/client/components/deposits-status/index.tsx index 6e562296322..a16a0a502cb 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 { ClickTooltip } from 'wcpay/components/tooltip'; import type { AccountStatus } from 'wcpay/types/account/account-status'; type DepositsStatus = 'enabled' | 'disabled' | 'blocked'; @@ -62,31 +64,47 @@ 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 } + } + buttonLabel={ __( + 'Learn more about payouts suspended', + 'woocommerce-payments' + ) } + content={ interpolateComponents( { + mixedString: sprintf( + /* translators: 1: WooPayments */ + __( + // eslint-disable-next-line max-len + 'After the information review, your account was temporarily suspended. {{learnMoreLink}}Learn more{{/learnMoreLink}}', + 'woocommerce-payments' + ), + 'WooPayments' + ), + components: { + learnMoreLink: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ), + }, + } ) } + /> ); }; diff --git a/client/components/deposits-status/test/__snapshots__/index.js.snap b/client/components/deposits-status/test/__snapshots__/index.js.snap index b0813fd50e2..4dd54771a08 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 - - ) +
+
+ + + + + +
+
+ `; 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 )