Design improvements related to the overview page (#10214)

Co-authored-by: oaratovskyi <[email protected]>

changelog/update-9811-design-improvements-overview-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Design improvements related to the overview page

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: <a> - suspended accounts FAQ URL */
-		__(
-			'Temporarily suspended (<a>learn more</a>)',
-			'woocommerce-payments'
-		),
-		{
-			a: (
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				<a
-					href={ learnMoreHref }
-					target="_blank"
-					rel="noopener noreferrer"
-				/>
-			),
-		}
-	);
+		__( 'Temporarily suspended', 'woocommerce-payments' );
 
 	return (
 		<span className={ 'account-status__info__yellow' }>
 			<GridiconNotice size={ iconSize } />
 			{ description }
+			<ClickTooltip
+				maxWidth={ '300px' }
+				buttonIcon={ <HelpOutlineIcon /> }
+				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
+							<a
+								href={
+									// eslint-disable-next-line max-len
+									'https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/'
+								}
+								target="_blank"
+								rel="noreferrer"
+								type="external"
+							/>
+						),
+					},
+				} ) }
+			/>
 		</span>
 	);
 };

client/components/deposits-status/test/__snapshots__/index.js.snap

@@ -18,15 +18,35 @@ exports[`DepositsStatus renders blocked status 1`] = `
         />
       </g>
     </svg>
-    Temporarily suspended (
-    <a
-      href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
-      rel="noopener noreferrer"
-      target="_blank"
+    Temporarily suspended
+    <button
+      class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+      type="button"
     >
-      learn more
-    </a>
-    )
+      <div
+        class="wcpay-tooltip__content-wrapper"
+      >
+        <div
+          aria-label="Learn more about payouts suspended"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            class="gridicon gridicons-help-outline"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </button>
   </span>
 </div>
 `;
@@ -49,15 +69,35 @@ exports[`DepositsStatus renders blocked status 2`] = `
         />
       </g>
     </svg>
-    Temporarily suspended (
-    <a
-      href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
-      rel="noopener noreferrer"
-      target="_blank"
+    Temporarily suspended
+    <button
+      class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+      type="button"
     >
-      learn more
-    </a>
-    )
+      <div
+        class="wcpay-tooltip__content-wrapper"
+      >
+        <div
+          aria-label="Learn more about payouts suspended"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            class="gridicon gridicons-help-outline"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </button>
   </span>
 </div>
 `;
@@ -172,15 +212,35 @@ exports[`DepositsStatus renders pending verification status 1`] = `
         />
       </g>
     </svg>
-    Temporarily suspended (
-    <a
-      href="https://woocommerce.com/document/woopayments/payouts/why-payouts-suspended/"
-      rel="noopener noreferrer"
-      target="_blank"
+    Temporarily suspended
+    <button
+      class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+      type="button"
     >
-      learn more
-    </a>
-    )
+      <div
+        class="wcpay-tooltip__content-wrapper"
+      >
+        <div
+          aria-label="Learn more about payouts suspended"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            class="gridicon gridicons-help-outline"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
+    </button>
   </span>
 </div>
 `;

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 )