Reduce overview sandbox mode notice footprint

changelog/update-8449-change-overview-sandbox-mode-notice

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Reduce the visual footprint of the sandbox mode notice.

client/components/account-status/account-tools/index.tsx

@@ -50,7 +50,7 @@ export const AccountTools: React.FC< Props > = ( props: Props ) => {
 						</Button>
 					) }
 					<Button
-						variant={ 'tertiary' }
+						variant={ detailsSubmitted ? 'secondary' : 'tertiary' }
 						onClick={ () => setModalVisible( true ) }
 					>
 						{ strings.reset }

client/components/test-mode-notice/index.tsx

@@ -11,6 +11,7 @@ import { getPaymentSettingsUrl, isInTestMode } from 'utils';
 import BannerNotice from '../banner-notice';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
+import { recordEvent } from 'wcpay/tracks';
 
 type CurrentPage =
 	| 'overview'
@@ -91,6 +92,12 @@ const getNoticeContent = (
 									}
 									target="_blank"
 									rel="noreferrer"
+									type="external"
+									onClick={ () =>
+										recordEvent(
+											'wcpay_overview_test_mode_learn_more_clicked'
+										)
+									}
 								/>
 							),
 						},

client/components/test-mode-notice/test/__snapshots__/index.tsx.snap

@@ -107,7 +107,7 @@ exports[`Test mode notification Returns valid component for overview page 1`] =
       </strong>
        All transactions will be simulated. 
       <a
-        data-link-type="wc-admin"
+        data-link-type="external"
         href="https://woocommerce.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/"
         rel="noreferrer"
         target="_blank"

client/overview/index.js

@@ -4,9 +4,9 @@
  * External dependencies
  */
 import React, { useState } from 'react';
-import { Card, Notice } from '@wordpress/components';
+import { Button, Card, Notice } from '@wordpress/components';
 import { getQuery } from '@woocommerce/navigation';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -26,11 +26,16 @@ import { TestModeNotice } from 'components/test-mode-notice';
 import InboxNotifications from './inbox-notifications';
 import ProgressiveOnboardingEligibilityModal from './modal/progressive-onboarding-eligibility';
 import SetupLivePaymentsModal from './modal/setup-live-payments';
-import strings from './strings';
 import TaskList from './task-list';
 import { getTasks, taskSort } from './task-list/tasks';
 import { useDisputes, useGetSettings, useSettings } from 'data';
 import './style.scss';
+import BannerNotice from 'wcpay/components/banner-notice';
+import interpolateComponents from '@automattic/interpolate-components';
+import { Link } from '@woocommerce/components';
+import { recordEvent } from 'wcpay/tracks';
+import { ClickTooltip } from 'wcpay/components/tooltip';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
 
 const OverviewPageError = () => {
 	const queryParams = getQuery();
@@ -53,6 +58,75 @@ const OverviewPageError = () => {
 	);
 };
 
+const OverviewSandboxModeNotice = ( { ctaAction = () => {} } ) => {
+	return (
+		<BannerNotice status="warning" isDismissible={ false }>
+			{ interpolateComponents( {
+				mixedString: sprintf(
+					/* translators: %1$s: WooPayments */
+					__(
+						// eslint-disable-next-line max-len
+						'{{strong}}%1$s is in sandbox mode.{{/strong}} To accept real transactions, {{switchToLiveLink}}set up a live %1$s account{{/switchToLiveLink}}.{{learnMoreIcon/}}',
+						'woocommerce-payments'
+					),
+					'WooPayments'
+				),
+				components: {
+					strong: <strong />,
+					learnMoreIcon: (
+						<ClickTooltip
+							buttonIcon={ <HelpOutlineIcon /> }
+							buttonLabel={ __(
+								'Learn more about sandbox mode',
+								'woocommerce-payments'
+							) }
+							maxWidth={ '315px' }
+							content={
+								<>
+									{ interpolateComponents( {
+										mixedString: sprintf(
+											/* translators: %1$s: WooPayments */
+											__(
+												// eslint-disable-next-line max-len
+												'In sandbox mode, personal/business verifications and checkout payments are simulated. Find out what works best for you by {{strong}}testing all the %1$s options and flows.{{/strong}} {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+												'woocommerce-payments'
+											),
+											'WooPayments'
+										),
+										components: {
+											strong: <strong />,
+											learnMoreLink: (
+												// eslint-disable-next-line jsx-a11y/anchor-has-content
+												<Link
+													href={
+														// eslint-disable-next-line max-len
+														'https://woocommerce.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/'
+													}
+													target="_blank"
+													rel="noreferrer"
+													type="external"
+													onClick={ () =>
+														recordEvent(
+															'wcpay_overview_sandbox_mode_learn_more_clicked'
+														)
+													}
+												/>
+											),
+										},
+									} ) }
+								</>
+							}
+						/>
+					),
+					switchToLiveLink: (
+						<Button variant="link" onClick={ ctaAction } />
+					),
+				},
+			} ) }
+		</BannerNotice>
+	);
+};
+
 const OverviewPage = () => {
 	const {
 		accountStatus,
@@ -144,27 +218,17 @@ const OverviewPage = () => {
 					) }
 				</Notice>
 			) }
-			<TestModeNotice
-				currentPage="overview"
-				isDevMode={ isDevMode }
-				actions={
-					isDevMode
-						? [
-								{
-									label: strings.notice.actions.setUpPayments,
-									onClick: () =>
-										setLivePaymentsModalVisible( true ),
-								},
-								{
-									label: strings.notice.actions.learnMore,
-									url:
-										'https://woocommerce.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/',
-									urlTarget: '_blank',
-								},
-						  ]
-						: []
-				}
-			/>
+			{ isDevMode ? (
+				<OverviewSandboxModeNotice
+					ctaAction={ () => setLivePaymentsModalVisible( true ) }
+				/>
+			) : (
+				<TestModeNotice
+					currentPage="overview"
+					isDevMode={ isDevMode }
+					actions={ [] }
+				/>
+			) }
 			<ErrorBoundary>
 				<FRTDiscoverabilityBanner />
 			</ErrorBoundary>

client/overview/modal/reset-account/index.tsx

@@ -46,7 +46,7 @@ const ResetAccountModal: React.FC< Props > = ( props: Props ) => {
 				<p>{ strings.confirmation }</p>
 			</div>
 			<div className="wcpay-reset-account-modal__footer">
-				<Button variant={ 'secondary' } onClick={ onDismiss }>
+				<Button variant={ 'tertiary' } onClick={ onDismiss }>
 					{ strings.cancel }
 				</Button>
 				<Button