Account Keys Connection Status (#2273)

* Code cleanup: Remove repetitive code

Before, each store-module was spread into actions, selectors, and
resolvers. This created some repetition and would continue to create
more repetition in the future, as more store-modules would be added.
Now, the store-modules can be added into an array, which auto-handles
the spreading into actions, selectors, and resolvers.

* Code Cleanup: Capitalize the POST rest call

* Add frontend functionality to test account keys connection status

This adds the frontend UI that tests whether the publishable key and the
secret key are valid. It does this by creating a token with the
publishable key, using Stripe's library. Then retrieving the token with
the secret key, using our REST API, which uses Stripe's client library.

* Update tests to include newly added account-keys properties

Account key's store-module's state has newly added properties: isTesting
and isValid. It also includes newly added selectors. This commit
accounts for these new properties.

* Add frontend test to test account-keys connection status functionality

* Add backend functionality to test account keys connection status

This adds the backend functionality to determine if the secret key is
valid. It does this by retrieving a token with a given secret key and
token ID.

* Update changelog: Add ability to test Stripe account keys' validity

* Wrap account-key connection text on mobile

Before, the connection text would be too wide and would make the modal
footer's elements look scattered. This commit forces the connection
text's width to shrink, on mobile.

* Replace expanded REST API URL with NAMESPACE constant

Before, the REST API URL contained the expanded version as opposed to
using the NAMESPACE constant. This made it so that if the URL were to
ever be updated, it would require multiple places to be updated, as well.

* Remove unused code: useGetAccountKeysValidity

* Reset account-key validity upon switching between live/test tabs

Before, when account-keys were tested while on a certain tab and then
the tab was switched, the account-keys' status would remain. This would
be a bit confusing since the form is reset, once the user switches tabs.

* Internationalize text for account-key connection status

* Add notification for when incorrect account keys are entered

Before, test account-keys could be entered in the "live" tab and vice-
versa. This created inconsistent behavior.

* Handle live account-keys status connection on insecure (HTTP) connection

Live account-keys must use HTTPS connection. This commit handles the
case where an insecure (HTTP) connection is used to test a live account-
key.

* Allow Stripe to handle secret-key validation when testing keys

Removing backend validation to remove repetitive code and to allow
Stripe to validate the secret-key, instead.

* Allow connection status test for secret-keys that begin with 'rk'

Before, restrictive secret keys were incorrectly considered invalid
secret keys because they did not begin with the 'sk' prefix. Now, the
'rk' prefix is considered to be valid.

Author: lovo-h

changelog.txt

@@ -3,6 +3,7 @@
 = 6.1.0 - 2022-xx-xx =
 * Tweak - Use the newly exposed LoadableMask component provided by WooCommerce Blocks to trigger the loading state for Payment Request Buttons.
 * Add - Add filter call when updating an existent intent (wc_stripe_update_existing_intent_request).
+* Add - Add ability to test Stripe account keys' validity.
 
 = 6.0.0 - 2022-01-05 =
 * Fix - Fixed capitalization for payment method names: iDEAL, giropay, and Sofort.

client/data/account-keys/__tests__/actions.test.js

@@ -41,7 +41,7 @@ describe( 'Account keys actions tests', () => {
 			const yielded = [ ...saveAccountKeys( accountKeysMock ) ];
 
 			expect( apiFetch ).toHaveBeenCalledWith( {
-				method: 'post',
+				method: 'POST',
 				path: '/wc/v3/wc_stripe/account_keys',
 				data: accountKeysMock,
 			} );

client/data/account-keys/__tests__/hooks.test.js

@@ -32,6 +32,8 @@ describe( 'Account keys hooks tests', () => {
 
 			selectors = {
 				getAccountKeys: jest.fn( () => ( { foo: 'bar' } ) ),
+				getIsTestingAccountKeys: jest.fn(),
+				getIsValidAccountKeys: jest.fn(),
 				hasFinishedResolution: jest.fn(),
 				isResolving: jest.fn(),
 				isSavingAccountKeys: jest.fn(),

client/data/account-keys/__tests__/reducer.test.js

@@ -7,6 +7,8 @@ describe( 'Account keys reducer tests', () => {
 
 		expect( defaultState ).toEqual( {
 			isSaving: false,
+			isTesting: false,
+			isValid: null,
 			data: {},
 			savingError: null,
 		} );

client/data/account-keys/action-types.js

@@ -2,4 +2,6 @@ export default {
 	SET_ACCOUNT_KEYS: 'SET_ACCOUNT_KEYS',
 	SET_ACCOUNT_KEYS_VALUES: 'SET_ACCOUNT_KEYS_VALUES',
 	SET_IS_SAVING_ACCOUNT_KEYS: 'SET_IS_SAVING_ACCOUNT_KEYS',
+	SET_IS_TESTING_ACCOUNT_KEYS: 'SET_IS_TESTING_ACCOUNT_KEYS',
+	SET_IS_VALID_KEYS: 'SET_IS_VALID_KEYS',
 };

client/data/account-keys/actions.js

@@ -27,6 +27,20 @@ export function updateIsSavingAccountKeys( isSaving, error ) {
 	};
 }
 
+export function updateIsTestingAccountKeys( isTesting ) {
+	return {
+		type: ACTION_TYPES.SET_IS_TESTING_ACCOUNT_KEYS,
+		isTesting,
+	};
+}
+
+export function updateIsValidAccountKeys( isValid ) {
+	return {
+		type: ACTION_TYPES.SET_IS_VALID_KEYS,
+		isValid,
+	};
+}
+
 export function* saveAccountKeys( accountKeys ) {
 	const isDisconnecting =
 		! accountKeys.publishable_key && ! accountKeys.test_publishable_key;
@@ -37,7 +51,7 @@ export function* saveAccountKeys( accountKeys ) {
 
 		const accountData = yield apiFetch( {
 			path: `${ NAMESPACE }/account_keys`,
-			method: 'post',
+			method: 'POST',
 			data: accountKeys,
 		} );
 

client/data/account-keys/hooks.js

@@ -3,14 +3,31 @@ import { useCallback } from 'react';
 import { STORE_NAME } from '../constants';
 
 export const useAccountKeys = () => {
-	const { saveAccountKeys, updateAccountKeys } = useDispatch( STORE_NAME );
+	const {
+		saveAccountKeys,
+		updateAccountKeys,
+		updateIsTestingAccountKeys,
+		updateIsValidAccountKeys,
+	} = useDispatch( STORE_NAME );
 
 	const accountKeys = useSelect( ( select ) => {
 		const { getAccountKeys } = select( STORE_NAME );
 
 		return getAccountKeys();
 	}, [] );
 
+	const isTesting = useSelect( ( select ) => {
+		const { getIsTestingAccountKeys } = select( STORE_NAME );
+
+		return getIsTestingAccountKeys();
+	}, [] );
+
+	const isValid = useSelect( ( select ) => {
+		const { getIsValidAccountKeys } = select( STORE_NAME );
+
+		return getIsValidAccountKeys();
+	}, [] );
+
 	const isLoading = useSelect( ( select ) => {
 		const { hasFinishedResolution, isResolving } = select( STORE_NAME );
 
@@ -30,7 +47,11 @@ export const useAccountKeys = () => {
 		accountKeys,
 		isLoading,
 		isSaving,
+		isTesting,
+		isValid,
 		updateAccountKeys,
+		updateIsTestingAccountKeys,
+		updateIsValidAccountKeys,
 		saveAccountKeys,
 	};
 };

client/data/account-keys/reducer.js

@@ -1,6 +1,8 @@
 import ACTION_TYPES from './action-types';
 
 const defaultState = {
+	isTesting: false,
+	isValid: null,
 	isSaving: false,
 	savingError: null,
 	data: {},
@@ -33,6 +35,18 @@ export const accountKeysReducer = (
 				isSaving: action.isSaving,
 				savingError: action.error,
 			};
+
+		case ACTION_TYPES.SET_IS_TESTING_ACCOUNT_KEYS:
+			return {
+				...state,
+				isTesting: action.isTesting,
+			};
+
+		case ACTION_TYPES.SET_IS_VALID_KEYS:
+			return {
+				...state,
+				isValid: action.isValid,
+			};
 	}
 
 	return state;

client/data/account-keys/selectors.js

@@ -19,3 +19,11 @@ export const isSavingAccountKeys = ( state ) => {
 export const getAccountKeysSavingError = ( state ) => {
 	return getAccountKeysState( state ).savingError;
 };
+
+export const getIsTestingAccountKeys = ( state ) => {
+	return getAccountKeysState( state ).isTesting || false;
+};
+
+export const getIsValidAccountKeys = ( state ) => {
+	return getAccountKeysState( state ).isValid;
+};

client/data/account/__tests__/actions.test.js

@@ -38,7 +38,7 @@ describe( 'Account actions tests', () => {
 
 			expect( apiFetch ).toHaveBeenCalledWith( {
 				path: '/wc/v3/wc_stripe/account/refresh',
-				method: 'post',
+				method: 'POST',
 			} );
 			expect( yielded ).toContainEqual(
 				expect.objectContaining( {