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/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();
@@ -144,27 +149,83 @@ 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 ? (
+				<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={ () =>
+										setLivePaymentsModalVisible( true )
+									}
+								/>
+							),
+						},
+					} ) }
+				</BannerNotice>
+			) : (
+				<TestModeNotice
+					currentPage="overview"
+					isDevMode={ isDevMode }
+					actions={ [] }
+				/>
+			) }
 			<ErrorBoundary>
 				<FRTDiscoverabilityBanner />
 			</ErrorBoundary>