feat: add dev mode in settings screen (#1888)

Automattic · May 24, 2021 · cb8b97c · cb8b97c
1 parent cd7748b
commit cb8b97c
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 10 deletions.
diff --git a/client/data/settings/action-types.js b/client/data/settings/action-types.js
@@ -6,5 +6,6 @@ export default {
 	SET_ENABLED_PAYMENT_METHOD_IDS: 'SET_ENABLED_PAYMENT_METHOD_IDS',
 	SET_IS_SAVING_SETTINGS: 'SET_IS_SAVING_SETTINGS',
 	SET_IS_MANUAL_CAPTURE_ENABLED: 'SET_IS_MANUAL_CAPTURE_ENABLED',
+	SET_IS_TEST_MODE_ENABLED: 'SET_IS_TEST_MODE_ENABLED',
 	SET_ACCOUNT_STATEMENT_DESCRIPTOR: 'SET_ACCOUNT_STATEMENT_DESCRIPTOR',
 };
diff --git a/client/data/settings/actions.js b/client/data/settings/actions.js
@@ -48,6 +48,13 @@ export function updateIsManualCaptureEnabled( isEnabled ) {
 	};
 }
 
+export function updateIsTestModeEnabled( isEnabled ) {
+	return {
+		type: ACTION_TYPES.SET_IS_TEST_MODE_ENABLED,
+		isEnabled,
+	};
+}
+
 export function updateAccountStatementDescriptor( accountStatementDescriptor ) {
 	return {
 		type: ACTION_TYPES.SET_ACCOUNT_STATEMENT_DESCRIPTOR,

diff --git a/client/data/settings/hooks.js b/client/data/settings/hooks.js
@@ -26,6 +26,32 @@ export const useEnabledPaymentMethodIds = () => {
 	);
 };
 
+export const useTestMode = () => {
+	const { updateIsTestModeEnabled } = useDispatch( STORE_NAME );
+
+	return useSelect(
+		( select ) => {
+			const { getIsTestModeEnabled } = select( STORE_NAME );
+
+			return {
+				isEnabled: getIsTestModeEnabled(),
+				updateIsTestModeEnabled,
+			};
+		},
+		[ updateIsTestModeEnabled ]
+	);
+};
+
+export const useDevMode = () => {
+	return useSelect( ( select ) => {
+		const { getIsDevModeEnabled } = select( STORE_NAME );
+
+		return {
+			isEnabled: getIsDevModeEnabled(),
+		};
+	}, [] );
+};
+
 export const useGeneralSettings = () => {
 	const { updateAccountStatementDescriptor } = useDispatch( STORE_NAME );
 	const { updateIsManualCaptureEnabled } = useDispatch( STORE_NAME );

diff --git a/client/data/settings/reducer.js b/client/data/settings/reducer.js
@@ -46,6 +46,7 @@ export const receiveSettings = (
 					is_wcpay_enabled: action.isEnabled,
 				},
 			};
+
 		case ACTION_TYPES.SET_IS_MANUAL_CAPTURE_ENABLED:
 			return {
 				...state,
@@ -55,6 +56,17 @@ export const receiveSettings = (
 					is_manual_capture_enabled: action.isEnabled,
 				},
 			};
+
+		case ACTION_TYPES.SET_IS_TEST_MODE_ENABLED:
+			return {
+				...state,
+				data: {
+					...state.data,
+					// eslint-disable-next-line camelcase
+					is_test_mode_enabled: action.isEnabled,
+				},
+			};
+
 		case ACTION_TYPES.SET_ACCOUNT_STATEMENT_DESCRIPTOR:
 			return {
 				...state,

diff --git a/client/data/settings/selectors.js b/client/data/settings/selectors.js
@@ -38,3 +38,11 @@ export const getAccountStatementDescriptor = ( state ) => {
 export const getIsManualCaptureEnabled = ( state ) => {
 	return getSettings( state ).is_manual_capture_enabled || false;
 };
+
+export const getIsTestModeEnabled = ( state ) => {
+	return getSettings( state ).is_test_mode_enabled || false;
+};
+
+export const getIsDevModeEnabled = ( state ) => {
+	return getSettings( state ).is_dev_mode_enabled || false;
+};
diff --git a/client/settings/settings-manager/index.js b/client/settings/settings-manager/index.js
@@ -99,7 +99,9 @@ const SettingsManager = ( { accountStatus = {} } ) => {
 					</LoadableBlock>
 				</SettingsSection>
 				<SettingsSection>
-					<TestModeSettings />
+					<LoadableBlock isLoading={ isLoading } numLines={ 10 }>
+						<TestModeSettings />
+					</LoadableBlock>
 				</SettingsSection>
 				<SettingsSection className="settings-manager__buttons">
 					<Button

diff --git a/client/settings/test-mode-settings/index.js b/client/settings/test-mode-settings/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Card, CardBody, CheckboxControl } from '@wordpress/components';
 import interpolateComponents from 'interpolate-components';
@@ -10,21 +10,32 @@ import interpolateComponents from 'interpolate-components';
  * Internal dependencies
  */
 import './style.scss';
+import { useTestMode, useDevMode } from '../../data';
 
 const TestModeSettings = () => {
-	const [ isEnabled, setIsEnabled ] = useState( false );
+	const { isEnabled, updateIsTestModeEnabled } = useTestMode();
+	const { isEnabled: isDevModeEnabled } = useDevMode();
 
 	return (
 		<Card className="test-mode-settings">
 			<CardBody size="large">
 				<h4>{ __( 'Test mode', 'woocommerce-payments' ) }</h4>
 				<CheckboxControl
-					checked={ isEnabled }
-					onChange={ setIsEnabled }
-					label={ __(
-						'Enable test mode for payments on the store',
-						'woocommerce-payments'
-					) }
+					checked={ isDevModeEnabled || isEnabled }
+					disabled={ isDevModeEnabled }
+					onChange={ updateIsTestModeEnabled }
+					label={
+						isDevModeEnabled
+							? __(
+									'Dev mode is active so all transactions will be in test mode. ' +
+										'This setting is only available to live accounts.',
+									'woocommerce-payments'
+							  )
+							: __(
+									'Enable test mode for payments on the store',
+									'woocommerce-payments'
+							  )
+					}
 					help={ interpolateComponents( {
 						mixedString: __(
 							"When enabled, you'll be able to test how your customers pay for orders on your store. " +

diff --git a/includes/admin/class-wc-rest-payments-settings-controller.php b/includes/admin/class-wc-rest-payments-settings-controller.php
@@ -78,6 +78,11 @@ public function register_routes() {
 						'type'              => 'boolean',
 						'validate_callback' => 'rest_validate_request_arg',
 					],
+					'is_test_mode_enabled'         => [
+						'description'       => __( 'WooCommerce Payments test mode setting.', 'woocommerce-payments' ),
+						'type'              => 'boolean',
+						'validate_callback' => 'rest_validate_request_arg',
+					],
 					'account_statement_descriptor' => [
 						'description'       => __( 'WooCommerce Payments bank account descriptor to be displayed in customers\' bank accounts.', 'woocommerce-payments' ),
 						'type'              => 'string',
@@ -99,7 +104,9 @@ public function get_settings(): WP_REST_Response {
 				'enabled_payment_method_ids'   => $this->wcpay_gateway->get_upe_enabled_payment_method_ids(),
 				'available_payment_method_ids' => $this->wcpay_gateway->get_upe_available_payment_methods(),
 				'is_wcpay_enabled'             => $this->wcpay_gateway->is_enabled(),
-				'is_manual_capture_enabled'    => 'yes' === $this->wcpay_gateway->get_option( 'manual_capture' ) ? true : false,
+				'is_manual_capture_enabled'    => 'yes' === $this->wcpay_gateway->get_option( 'manual_capture' ),
+				'is_test_mode_enabled'         => 'yes' === $this->wcpay_gateway->is_in_test_mode(),
+				'is_dev_mode_enabled'          => $this->wcpay_gateway->is_in_dev_mode(),
 				'account_statement_descriptor' => $this->wcpay_gateway->get_option( 'account_statement_descriptor' ),
 			]
 		);
@@ -114,6 +121,7 @@ public function update_settings( WP_REST_Request $request ) {
 		$this->update_is_wcpay_enabled( $request );
 		$this->update_enabled_payment_methods( $request );
 		$this->update_is_manual_capture_enabled( $request );
+		$this->update_is_test_mode_enabled( $request );
 		$this->update_account_statement_descriptor( $request );
 
 		return new WP_REST_Response( [], 200 );
@@ -178,6 +186,26 @@ private function update_is_manual_capture_enabled( WP_REST_Request $request ) {
 		$this->wcpay_gateway->update_option( 'manual_capture', $is_manual_capture_enabled ? 'yes' : 'no' );
 	}
 
+	/**
+	 * Updates WooCommerce Payments test mode.
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 */
+	private function update_is_test_mode_enabled( WP_REST_Request $request ) {
+		// avoiding updating test mode when dev mode is enabled.
+		if ( $this->wcpay_gateway->is_in_dev_mode() ) {
+			return;
+		}
+
+		if ( ! $request->has_param( 'is_test_mode_enabled' ) ) {
+			return;
+		}
+
+		$is_test_mode_enabled = $request->get_param( 'is_test_mode_enabled' );
+
+		$this->wcpay_gateway->update_option( 'test_mode', $is_test_mode_enabled ? 'yes' : 'no' );
+	}
+
 	/**
 	 * Updates WooCommerce Payments account statement descriptor.
 	 *

diff --git a/tests/unit/admin/test-class-wc-rest-payments-settings-controller.php b/tests/unit/admin/test-class-wc-rest-payments-settings-controller.php
@@ -239,6 +239,36 @@ public function test_update_settings_returns_error_on_non_bool_is_manual_capture
 		$this->assertEquals( 400, $response->get_status() );
 	}
 
+	public function test_update_settings_saves_test_mode() {
+		$this->assertEquals( 'no', $this->gateway->get_option( 'test_mode' ) );
+
+		$request = new WP_REST_Request();
+		$request->set_param( 'is_test_mode_enabled', true );
+
+		$this->controller->update_settings( $request );
+
+		$this->assertEquals( 'yes', $this->gateway->get_option( 'test_mode' ) );
+	}
+
+	public function test_update_settings_does_not_save_test_mode_when_dev_mode_enabled() {
+		add_filter(
+			'wcpay_dev_mode',
+			function () {
+				return true;
+			}
+		);
+		$this->assertEquals( 'no', $this->gateway->get_option( 'test_mode' ) );
+		$this->assertEquals( true, $this->gateway->is_in_test_mode() );
+
+		$request = new WP_REST_Request();
+		$request->set_param( 'is_test_mode_enabled', true );
+
+		$this->controller->update_settings( $request );
+
+		$this->assertEquals( 'no', $this->gateway->get_option( 'test_mode' ) );
+		$this->assertEquals( true, $this->gateway->is_in_test_mode() );
+	}
+
 	public function test_update_settings_saves_account_statement_descriptor() {
 		$new_account_descriptor = 'new account descriptor';