Add wordpress/data hooks to the general-settings component (#1824)

Co-authored-by: Fernando Espinosa <Ferdev@users.noreply.github.com> Co-authored-by: Francesco <frosso@users.noreply.github.com> Co-authored-by: David Stone <david@nnucomputerwhiz.com> Co-authored-by: Waclaw Jacek <waclaw.jacek@automattic.com>
Automattic · May 24, 2021 · cd7748b · cd7748b
1 parent f1c3d51
commit cd7748b
Show file tree

Hide file tree

Showing 13 changed files with 396 additions and 25 deletions.
diff --git a/client/data/settings/action-types.js b/client/data/settings/action-types.js
@@ -5,4 +5,6 @@ export default {
 	SET_IS_WCPAY_ENABLED: 'SET_IS_WCPAY_ENABLED',
 	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_ACCOUNT_STATEMENT_DESCRIPTOR: 'SET_ACCOUNT_STATEMENT_DESCRIPTOR',
 };
diff --git a/client/data/settings/actions.js b/client/data/settings/actions.js
@@ -41,6 +41,20 @@ export function updateIsSavingSettings( isSaving ) {
 	};
 }
 
+export function updateIsManualCaptureEnabled( isEnabled ) {
+	return {
+		type: ACTION_TYPES.SET_IS_MANUAL_CAPTURE_ENABLED,
+		isEnabled,
+	};
+}
+
+export function updateAccountStatementDescriptor( accountStatementDescriptor ) {
+	return {
+		type: ACTION_TYPES.SET_ACCOUNT_STATEMENT_DESCRIPTOR,
+		accountStatementDescriptor,
+	};
+}
+
 export function* saveSettings() {
 	try {
 		const settings = select( STORE_NAME ).getSettings();

diff --git a/client/data/settings/hooks.js b/client/data/settings/hooks.js
@@ -27,18 +27,30 @@ export const useEnabledPaymentMethodIds = () => {
 };
 
 export const useGeneralSettings = () => {
+	const { updateAccountStatementDescriptor } = useDispatch( STORE_NAME );
+	const { updateIsManualCaptureEnabled } = useDispatch( STORE_NAME );
 	const { updateIsWCPayEnabled } = useDispatch( STORE_NAME );
 
 	return useSelect(
 		( select ) => {
+			const { getAccountStatementDescriptor } = select( STORE_NAME );
 			const { getIsWCPayEnabled } = select( STORE_NAME );
+			const { getIsManualCaptureEnabled } = select( STORE_NAME );
 
 			return {
+				accountStatementDescriptor: getAccountStatementDescriptor(),
+				isManualCaptureEnabled: getIsManualCaptureEnabled(),
 				isWCPayEnabled: getIsWCPayEnabled(),
+				updateAccountStatementDescriptor,
+				updateIsManualCaptureEnabled,
 				updateIsWCPayEnabled,
 			};
 		},
-		[ updateIsWCPayEnabled ]
+		[
+			updateAccountStatementDescriptor,
+			updateIsManualCaptureEnabled,
+			updateIsWCPayEnabled,
+		]
 	);
 };
 

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

diff --git a/client/data/settings/selectors.js b/client/data/settings/selectors.js
@@ -30,3 +30,11 @@ export const getAvailablePaymentMethodIds = ( state ) => {
 export const isSavingSettings = ( state ) => {
 	return getSettingsState( state ).isSaving || false;
 };
+
+export const getAccountStatementDescriptor = ( state ) => {
+	return getSettings( state ).account_statement_descriptor || '';
+};
+
+export const getIsManualCaptureEnabled = ( state ) => {
+	return getSettings( state ).is_manual_capture_enabled || false;
+};
diff --git a/client/data/settings/test/hooks.js b/client/data/settings/test/hooks.js
@@ -61,14 +61,22 @@ describe( 'Settings hooks tests', () => {
 		test( 'returns general settings from selector', () => {
 			actions = {
 				updateIsWCPayEnabled: jest.fn(),
+				updateAccountStatementDescriptor: jest.fn(),
+				updateIsManualCaptureEnabled: jest.fn(),
 			};
 
 			selectors = {
 				getIsWCPayEnabled: jest.fn( () => 'foo' ),
+				getIsManualCaptureEnabled: jest.fn( () => 'bar' ),
+				getAccountStatementDescriptor: jest.fn( () => 'zxy' ),
 			};
 
 			const {
+				accountStatementDescriptor,
+				isManualCaptureEnabled,
 				isWCPayEnabled,
+				updateAccountStatementDescriptor,
+				updateIsManualCaptureEnabled,
 				updateIsWCPayEnabled,
 			} = useGeneralSettings();
 			updateIsWCPayEnabled( 'bar' );
@@ -77,6 +85,20 @@ describe( 'Settings hooks tests', () => {
 			expect( actions.updateIsWCPayEnabled ).toHaveBeenCalledWith(
 				'bar'
 			);
+
+			updateAccountStatementDescriptor( 'foo' );
+
+			expect( accountStatementDescriptor ).toEqual( 'zxy' );
+			expect(
+				actions.updateAccountStatementDescriptor
+			).toHaveBeenCalledWith( 'foo' );
+
+			updateIsManualCaptureEnabled( 'zxy' );
+
+			expect( isManualCaptureEnabled ).toEqual( 'bar' );
+			expect( actions.updateIsManualCaptureEnabled ).toHaveBeenCalledWith(
+				'zxy'
+			);
 		} );
 	} );
 

diff --git a/client/data/settings/test/reducer.js b/client/data/settings/test/reducer.js
@@ -7,6 +7,8 @@ import {
 	updateIsWCPayEnabled,
 	updateEnabledPaymentMethodIds,
 	updateIsSavingSettings,
+	updateIsManualCaptureEnabled,
+	updateAccountStatementDescriptor,
 } from '../actions';
 
 describe( 'Settings reducer tests', () => {
@@ -174,4 +176,86 @@ describe( 'Settings reducer tests', () => {
 			} );
 		} );
 	} );
+
+	describe( 'SET_IS_MANUAL_CAPTURE_ENABLED', () => {
+		test( 'toggles `data.is_manual_capture_enabled`', () => {
+			const oldState = {
+				data: {
+					is_manual_capture_enabled: false, // eslint-disable-line
+				},
+			};
+
+			const state = reducer(
+				oldState,
+				updateIsManualCaptureEnabled( true )
+			);
+
+			expect( state.data.is_manual_capture_enabled ).toBeTruthy();
+		} );
+
+		test( 'leaves other fields unchanged', () => {
+			const oldState = {
+				foo: 'bar',
+				data: {
+					is_manual_capture_enabled: false, // eslint-disable-line
+					baz: 'quux',
+				},
+			};
+
+			const state = reducer(
+				oldState,
+				updateIsManualCaptureEnabled( true )
+			);
+
+			expect( state ).toEqual( {
+				foo: 'bar',
+				data: {
+					is_manual_capture_enabled: true, // eslint-disable-line
+					baz: 'quux',
+				},
+			} );
+		} );
+	} );
+
+	describe( 'SET_ACCOUNT_STATEMENT_DESCRIPTOR', () => {
+		test( 'toggles `data.account_statement_descriptor`', () => {
+			const oldState = {
+				data: {
+					account_statement_descriptor: 'Statement', // eslint-disable-line
+				},
+			};
+
+			const state = reducer(
+				oldState,
+				updateAccountStatementDescriptor( 'New Statement' )
+			);
+
+			expect( state.data.account_statement_descriptor ).toEqual(
+				'New Statement'
+			);
+		} );
+
+		test( 'leaves other fields unchanged', () => {
+			const oldState = {
+				foo: 'bar',
+				data: {
+					account_statement_descriptor: 'Statement', // eslint-disable-line
+					baz: 'quux',
+				},
+			};
+
+			const state = reducer(
+				oldState,
+				updateAccountStatementDescriptor( 'New Statement' )
+			);
+
+			expect( state ).toEqual( {
+				foo: 'bar',
+				data: {
+					account_statement_descriptor: 'New Statement', // eslint-disable-line
+					baz: 'quux',
+				},
+			} );
+		} );
+	} );
 } );
diff --git a/client/data/settings/test/selectors.js b/client/data/settings/test/selectors.js
@@ -5,6 +5,8 @@ import {
 	getSettings,
 	getIsWCPayEnabled,
 	getEnabledPaymentMethodIds,
+	getIsManualCaptureEnabled,
+	getAccountStatementDescriptor,
 	isSavingSettings,
 } from '../selectors';
 
@@ -99,4 +101,54 @@ describe( 'Settings selectors tests', () => {
 			}
 		);
 	} );
+
+	describe( 'getIsManualCaptureEnabled()', () => {
+		test( 'returns the value of state.settings.data.is_manual_capture_enabled', () => {
+			const state = {
+				settings: {
+					data: {
+						// eslint-disable-next-line camelcase
+						is_manual_capture_enabled: true,
+					},
+				},
+			};
+
+			expect( getIsManualCaptureEnabled( state ) ).toBeTruthy();
+		} );
+
+		test.each( [
+			[ undefined ],
+			[ {} ],
+			[ { settings: {} } ],
+			[ { settings: { data: {} } } ],
+		] )( 'returns false if missing (tested state: %j)', ( state ) => {
+			expect( getIsManualCaptureEnabled( state ) ).toBeFalsy();
+		} );
+	} );
+
+	describe( 'getAccountStatementDescriptor()', () => {
+		test( 'returns the value of state.settings.data.account_statement_descriptor', () => {
+			const state = {
+				settings: {
+					data: {
+						// eslint-disable-next-line camelcase
+						account_statement_descriptor: 'my account statement',
+					},
+				},
+			};
+
+			expect( getAccountStatementDescriptor( state ) ).toEqual(
+				'my account statement'
+			);
+		} );
+
+		test.each( [
+			[ undefined ],
+			[ {} ],
+			[ { settings: {} } ],
+			[ { settings: { data: {} } } ],
+		] )( 'returns false if missing (tested state: %j)', ( state ) => {
+			expect( getAccountStatementDescriptor( state ) ).toEqual( '' );
+		} );
+	} );
 } );
diff --git a/client/settings/general-settings/index.js b/client/settings/general-settings/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React, { useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import {
 	Card,
@@ -20,11 +19,14 @@ import { useGeneralSettings } from 'data';
 const ACCOUNT_STATEMENT_MAX_LENGTH = 22;
 
 const GeneralSettings = ( { accountLink } ) => {
-	const { isWCPayEnabled, updateIsWCPayEnabled } = useGeneralSettings();
-	const [ isManualCaptureEnabled, setIsManualCaptureEnabled ] = useState(
-		false
-	);
-	const [ accountStatement, setAccountStatement ] = useState( '' );
+	const {
+		accountStatementDescriptor,
+		isManualCaptureEnabled,
+		isWCPayEnabled,
+		updateAccountStatementDescriptor,
+		updateIsManualCaptureEnabled,
+		updateIsWCPayEnabled,
+	} = useGeneralSettings();
 
 	return (
 		<Card className="general-settings">
@@ -42,7 +44,7 @@ const GeneralSettings = ( { accountLink } ) => {
 				</h4>
 				<CheckboxControl
 					checked={ isManualCaptureEnabled }
-					onChange={ setIsManualCaptureEnabled }
+					onChange={ updateIsManualCaptureEnabled }
 					label={ __(
 						'Issue an authorization on checkout, and capture later',
 						'woocommerce-payments'
@@ -66,13 +68,13 @@ const GeneralSettings = ( { accountLink } ) => {
 							'Customer bank statement',
 							'woocommerce-payments'
 						) }
-						value={ accountStatement }
-						onChange={ setAccountStatement }
+						value={ accountStatementDescriptor }
+						onChange={ updateAccountStatementDescriptor }
 						maxLength={ ACCOUNT_STATEMENT_MAX_LENGTH }
 						hideLabelFromVision
 					/>
 					<span className="input-help-text" aria-hidden="true">
-						{ `${ accountStatement.length } / ${ ACCOUNT_STATEMENT_MAX_LENGTH }` }
+						{ `${ accountStatementDescriptor.length } / ${ ACCOUNT_STATEMENT_MAX_LENGTH }` }
 					</span>
 				</div>
 				<div className="general-settings__bank-information">