diff --git a/client/settings/connect-stripe-account/__tests__/connect-stripe-account.test.js b/client/settings/connect-stripe-account/__tests__/connect-stripe-account.test.js index ab4d5ce48..38d1f406e 100644 --- a/client/settings/connect-stripe-account/__tests__/connect-stripe-account.test.js +++ b/client/settings/connect-stripe-account/__tests__/connect-stripe-account.test.js @@ -26,7 +26,26 @@ describe( 'ConnectStripeAccount', () => { ).toBeInTheDocument(); } ); - it( 'should render both the Connect Account and Enter keys buttons when the Stripe OAuth link is provided', () => { + it( 'should render both the "Create or connect an account" and "Create or connect a test account" buttons when both Stripe OAuth links are provided', () => { + render( + + ); + + expect( screen.queryByText( 'Terms of service.' ) ).toBeInTheDocument(); + + expect( + screen.getByText( 'Create or connect an account' ) + ).toBeInTheDocument(); + + expect( + screen.getByText( 'Create or connect a test account instead' ) + ).toBeInTheDocument(); + } ); + + it( 'should render only the "Create or connect an account" button when only the Stripe OAuth link is provided', () => { render( ); @@ -38,7 +57,32 @@ describe( 'ConnectStripeAccount', () => { ).toBeInTheDocument(); expect( - screen.queryByText( 'Enter account keys (advanced)' ) + screen.queryByText( 'Create or connect a test account' ) + ).not.toBeInTheDocument(); + + expect( + screen.queryByText( 'Create or connect a test account instead' ) + ).not.toBeInTheDocument(); + } ); + + it( 'should render only the "Create or connect a test account" button when only the Stripe Test OAuth link is provided', () => { + render( + + ); + + expect( screen.queryByText( 'Terms of service.' ) ).toBeInTheDocument(); + + expect( + screen.getByText( 'Create or connect a test account' ) + ).toBeInTheDocument(); + + // It should not have the "instead" word at the end + expect( + screen.queryByText( 'Create or connect a test account instead' ) + ).not.toBeInTheDocument(); + + expect( + screen.queryByText( 'Create or connect an account' ) ).not.toBeInTheDocument(); } ); @@ -60,6 +104,11 @@ describe( 'ConnectStripeAccount', () => { ); userEvent.click( connectAccountButton ); + expect( recordEvent ).toHaveBeenCalledWith( + 'wcstripe_create_or_connect_account_click', + {} + ); + expect( window.location.assign ).toHaveBeenCalledWith( oauthUrl ); // Set the original function back to keep further tests working as expected. @@ -68,19 +117,42 @@ describe( 'ConnectStripeAccount', () => { } ); } ); - it( 'should record a "wcstripe_create_or_connect_account_click" Track event when clicking on the Connect account button', () => { + it( 'should redirect to the Stripe Test OAuth link when clicking on the "Create or connect a test account" button', () => { + // Keep the original function at hand. + const assign = window.location.assign; + + Object.defineProperty( window, 'location', { + value: { assign: jest.fn() }, + } ); + + const oauthUrl = + 'https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_1234&scope=read_write&state=1234'; + + const testOauthUrl = + 'https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_5678&scope=read_write&state=5678'; + render( - + ); - const connectAccountButton = screen.getByText( - 'Create or connect an account' + const connectTestAccountButton = screen.getByText( + 'Create or connect a test account instead' ); - userEvent.click( connectAccountButton ); + userEvent.click( connectTestAccountButton ); expect( recordEvent ).toHaveBeenCalledWith( - 'wcstripe_create_or_connect_account_click', + 'wcstripe_create_or_connect_test_account_click', {} ); + + expect( window.location.assign ).toHaveBeenCalledWith( testOauthUrl ); + + // Set the original function back to keep further tests working as expected. + Object.defineProperty( window, 'location', { + value: { assign }, + } ); } ); } ); diff --git a/client/settings/connect-stripe-account/index.js b/client/settings/connect-stripe-account/index.js index 97b10cf6f..c2f21bbb5 100644 --- a/client/settings/connect-stripe-account/index.js +++ b/client/settings/connect-stripe-account/index.js @@ -47,12 +47,17 @@ const ButtonWrapper = styled.div` } `; -const ConnectStripeAccount = ( { oauthUrl } ) => { +const ConnectStripeAccount = ( { oauthUrl, testOauthUrl } ) => { const handleCreateOrConnectAccount = () => { recordEvent( 'wcstripe_create_or_connect_account_click', {} ); window.location.assign( oauthUrl ); }; + const handleCreateOrConnectTestAccount = () => { + recordEvent( 'wcstripe_create_or_connect_test_account_click', {} ); + window.location.assign( testOauthUrl ); + }; + return ( @@ -70,38 +75,58 @@ const ConnectStripeAccount = ( { oauthUrl } ) => { ) } - { oauthUrl && ( - - { interpolateComponents( { - mixedString: __( - 'By clicking "Create or connect an account", you agree to the {{tosLink}}Terms of service.{{/tosLink}}', - 'woocommerce-gateway-stripe' - ), - components: { - tosLink: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - + { oauthUrl || testOauthUrl ? ( + <> + + { interpolateComponents( { + mixedString: __( + 'By clicking "Create or connect an account", you agree to the {{tosLink}}Terms of service.{{/tosLink}}', + 'woocommerce-gateway-stripe' ), - }, - } ) } - - ) } - { oauthUrl ? ( - - + ) } + { testOauthUrl && ( + ) } - - + + ) : ( { interpolateComponents( { diff --git a/client/settings/index.js b/client/settings/index.js index ca60a5dec..ae7b15f56 100644 --- a/client/settings/index.js +++ b/client/settings/index.js @@ -49,6 +49,7 @@ if ( newAccountContainer ) { ReactDOM.render( , newAccountContainer ); diff --git a/client/settings/stripe-auth-account/stripe-auth-actions.js b/client/settings/stripe-auth-account/stripe-auth-actions.js index ccce29a67..86859315e 100644 --- a/client/settings/stripe-auth-account/stripe-auth-actions.js +++ b/client/settings/stripe-auth-account/stripe-auth-actions.js @@ -1,4 +1,5 @@ /* global wc_stripe_settings_params */ +import { __ } from '@wordpress/i18n'; import { React } from 'react'; import { Button } from '@wordpress/components'; import ConfigureWebhookButton from './configure-webhook-button'; @@ -17,9 +18,21 @@ const StripeAuthActions = ( { testMode, displayWebhookConfigure } ) => {