Add test mode notice in page order detail. (#7898)

changelog/add-334-test-mode-notice-order-details

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add test mode notice in page order detail.

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 CancelAuthorizationConfirmationModal from './cancel-authorization-confirm-modal';
+import TestModeNotice from './test-mode-notice';
 import DisputedOrderNoticeHandler from 'wcpay/components/disputed-order-notice';
 
 function disableWooOrderRefundButton( disputeStatus ) {
@@ -59,8 +60,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',
@@ -168,21 +170,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 ( ! container ) {
 			return;
 		}
 
 		ReactDOM.render(
-			<DisputedOrderNoticeHandler
-				chargeId={ chargeId }
-				onDisableOrderRefund={ disableWooOrderRefundButton }
-			/>,
+			<>
+				{ testMode && <TestModeNotice /> }
+
+				{ chargeId && (
+					<DisputedOrderNoticeHandler
+						chargeId={ chargeId }
+						onDisableOrderRefund={ disableWooOrderRefundButton }
+					/>
+				) }
+			</>,
 			container
 		);
 	}

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

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
+
+/**
+ * Internal dependencies
+ */
+import InlineNotice from 'wcpay/components/inline-notice';
+
+const TestModeNotice = (): JSX.Element => {
+	return (
+		<InlineNotice icon={ true } status="warning" isDismissible={ false }>
+			{ interpolateComponents( {
+				mixedString: __(
+					'WooPayments was in test mode when this order was placed. {{learnMoreLink/}}',
+					'woocommerce-payments'
+				),
+				components: {
+					learnMoreLink: (
+						<a
+							target="_blank"
+							href="https://woo.com/document/woopayments/testing-and-troubleshooting/testing/"
+							rel="noopener noreferrer"
+						>
+							{ __(
+								'Learn more about test mode',
+								'woocommerce-payments'
+							) }
+						</a>
+					),
+				},
+			} ) }
+		</InlineNotice>
+	);
+};
+
+export default TestModeNotice;

includes/admin/class-wc-payments-admin.php

@@ -735,6 +735,7 @@ public function enqueue_payments_scripts() {
 						'canRefund'             => $this->wcpay_gateway->can_refund_order( $order ),
 						'chargeId'              => $this->order_service->get_charge_id_for_order( $order ),
 						'hasOpenAuthorization'  => $this->order_service->has_open_authorization( $order ),
+						'testMode'              => \WCPay\Constants\Order_Mode::TEST === $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY ),
 					]
 				);
 				wp_localize_script(

includes/class-wc-payment-gateway-wcpay.php

@@ -10,6 +10,7 @@
 }
 
 use WCPay\Constants\Fraud_Meta_Box_Type;
+use WCPay\Constants\Order_Mode;
 use WCPay\Constants\Order_Status;
 use WCPay\Constants\Payment_Capture_Type;
 use WCPay\Constants\Payment_Initiated_By;
@@ -1204,7 +1205,7 @@ public function process_payment_for_order( $cart, $payment_information, $schedul
 		$payment_method = $payment_information->get_payment_method();
 		$this->order_service->set_payment_method_id_for_order( $order, $payment_method );
 		$this->order_service->set_customer_id_for_order( $order, $customer_id );
-		$order->update_meta_data( '_wcpay_mode', WC_Payments::mode()->is_test() ? 'test' : 'prod' );
+		$order->update_meta_data( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, WC_Payments::mode()->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION );
 
 		// In case amount is 0 and we're not saving the payment method, we won't be using intents and can confirm the order payment.
 		if ( apply_filters( 'wcpay_confirm_without_payment_intent', ! $payment_needed && ! $save_payment_method_to_store ) ) {

includes/class-wc-payments-action-scheduler-service.php

@@ -5,6 +5,8 @@
  * @package WooCommerce\Payments
  */
 
+use WCPay\Constants\Order_Mode;
+
 defined( 'ABSPATH' ) || exit;
 
 /**
@@ -99,10 +101,10 @@ private function track_order( $order_id, $is_update = false ) {
 		if ( empty( $payment_method ) ) {
 			return false;
 		}
-		$order_mode = $order->get_meta( '_wcpay_mode' );
+		$order_mode = $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY );
 
 		if ( $order_mode ) {
-			$current_mode = WC_Payments::mode()->is_test() ? 'test' : 'prod';
+			$current_mode = WC_Payments::mode()->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION;
 			if ( $current_mode !== $order_mode ) {
 				// If mode doesn't match make sure to stop order tracking to prevent order tracking issues.
 				// False will be returned so maybe future crons will have correct mode.

includes/class-wc-payments-order-service.php

@@ -97,6 +97,15 @@ class WC_Payments_Order_Service {
 	 */
 	const WCPAY_TRANSACTION_FEE_META_KEY = '_wcpay_transaction_fee';
 
+	/**
+	 * Meta key used to store the mode, either 'test', or 'prod' of order.
+	 *
+	 * @see Order_Mode
+	 *
+	 * @const string
+	 */
+	const WCPAY_MODE_META_KEY = '_wcpay_mode';
+
 	/**
 	 * Client for making requests to the WooCommerce Payments API
 	 *

includes/class-wc-payments.php

@@ -436,6 +436,7 @@ public static function init() {
 		include_once __DIR__ . '/exceptions/class-order-not-found-exception.php';
 		include_once __DIR__ . '/constants/class-base-constant.php';
 		include_once __DIR__ . '/constants/class-fraud-meta-box-type.php';
+		include_once __DIR__ . '/constants/class-order-mode.php';
 		include_once __DIR__ . '/constants/class-order-status.php';
 		include_once __DIR__ . '/constants/class-payment-type.php';
 		include_once __DIR__ . '/constants/class-payment-initiated-by.php';

includes/constants/class-order-mode.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Class Order_Mode
+ *
+ * @package WooCommerce\Payments
+ */
+
+namespace WCPay\Constants;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Enum saved in the order meta for the mode that the payment was processed in.
+ *
+ * @psalm-immutable
+ */
+class Order_Mode extends Base_Constant {
+	const TEST       = 'test';
+	const PRODUCTION = 'prod';
+}

src/Internal/Service/OrderService.php

@@ -221,7 +221,7 @@ public function update_order_from_successful_intent(
 	 */
 	public function set_mode( string $order_id, string $mode ) : void {
 		$order = $this->get_order( $order_id );
-		$order->update_meta_data( '_wcpay_mode', $mode );
+		$order->update_meta_data( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, $mode );
 		$order->save_meta_data();
 	}
 
@@ -235,7 +235,7 @@ public function set_mode( string $order_id, string $mode ) : void {
 	 */
 	public function get_mode( string $order_id ) : string {
 		$order = $this->get_order( $order_id );
-		return $order->get_meta( '_wcpay_mode', true );
+		return $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, true );
 	}
 
 	/**

src/Internal/Service/PaymentProcessingService.php

@@ -10,6 +10,7 @@
 use Exception;
 use WC_Payments_API_Abstract_Intention;
 use WC_Payments_API_Setup_Intention;
+use WCPay\Constants\Order_Mode;
 use WCPay\Exceptions\API_Exception;
 use WCPay\Exceptions\Order_Not_Found_Exception;
 use WCPay\Vendor\League\Container\Exception\ContainerException;
@@ -147,7 +148,7 @@ public function get_authentication_redirect_url( $intent, int $order_id ) {
 	protected function create_payment_context( int $order_id, bool $automatic_capture = false ): PaymentContext {
 		$context = new PaymentContext( $order_id );
 		try {
-			$context->set_mode( $this->mode->is_test() ? 'test' : 'prod' );
+			$context->set_mode( $this->mode->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION );
 		} catch ( Exception $e ) {
 			$context->set_mode( 'unknown' );
 		}