Add TestModeNotice and its handling

client/order/index.js

@@ -13,6 +13,7 @@ import { isAwaitingResponse, isUnderReview } from 'wcpay/disputes/utils';
 import RefundConfirmationModal from './refund-confirm-modal';
 import CancelConfirmationModal from './cancel-confirm-modal';
 import DisputedOrderNoticeHandler from 'wcpay/components/disputed-order-notice';
+import TestModeNotice from 'wcpay/order/test-mode-notice';
 
 function disableWooOrderRefundButton( disputeStatus ) {
 	const refundButton = document.querySelector( 'button.refund-items' );
@@ -58,8 +59,9 @@ jQuery( function ( $ ) {
 	const disableManualRefunds = getConfig( 'disableManualRefunds' ) ?? false;
 	const manualRefundsTip = getConfig( 'manualRefundsTip' ) ?? '';
 	const chargeId = getConfig( 'chargeId' );
+	const testMode = getConfig( 'testMode' );
 
-	maybeShowDisputeNotice();
+	maybeShowOrderNotices();
 
 	$( '#woocommerce-order-items' ).on(
 		'click',
@@ -153,21 +155,27 @@ jQuery( function ( $ ) {
 		ReactDOM.render( modalToRender, container );
 	}
 
-	function maybeShowDisputeNotice() {
+	function maybeShowOrderNotices() {
 		const container = document.querySelector(
 			'#wcpay-order-payment-details-container'
 		);
 
-		// If the container doesn't exist (WC < 7.9), or the charge ID isn't present, don't render the notice.
-		if ( ! container || ! chargeId ) {
+		// If the orderDetailContainer doesn't exist (WC < 7.9), or the charge ID isn't present, don't render the notice.
+		if ( ! container ) {
 			return;
 		}
 
 		ReactDOM.render(
-			<DisputedOrderNoticeHandler
-				chargeId={ chargeId }
-				onDisableOrderRefund={ disableWooOrderRefundButton }
-			/>,
+			<>
+				{ testMode && <TestModeNotice /> }
+
+				{ chargeId && (
+					<DisputedOrderNoticeHandler
+						chargeId={ chargeId }
+						onDisableOrderRefund={ disableWooOrderRefundButton }
+					/>
+				) }
+			</>,
 			container
 		);
 	}

client/order/test-mode-notice/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InlineNotice from 'wcpay/components/inline-notice';
+
+const TestModeNotice = () => {
+	return (
+		<InlineNotice icon={ true } status="warning" isDismissible={ false }>
+			{ __(
+				'WooPayments was in test mode when this order was placed.',
+				'woocommerce-payments'
+			) }
+			{ createInterpolateElement(
+				__(
+					' <a>Learn more about test mode</a>',
+					'woocommerce-payments'
+				),
+				{
+					a: (
+						// createInterpolateElement is incompatible with this eslint rule as the <a> is decoupled from content.
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
+						<a href="https://woo.com/document/woopayments/testing-and-troubleshooting/testing/" />
+					),
+				}
+			) }
+		</InlineNotice>
+	);
+};
+
+export default TestModeNotice;