Fix successful gateway configuration message (https://github.com/woocommerce/woocommerce-admin/pull/7251)
* Fix successful gateway configuration message * Update language from connect to configure * Fix connect component tests
This commit is contained in:
Joshua T Flowers
GitHub
parent
6213611463
commit
7e20ebf866
|
|
@ -35,7 +35,7 @@ export const Item = ( {
|
|||
} = paymentGateway;
|
||||
|
||||
const connectSlot = useSlot(
|
||||
`woocommerce_payment_gateway_connect_${ id }`
|
||||
`woocommerce_payment_gateway_configure_${ id }`
|
||||
);
|
||||
const setupSlot = useSlot( `woocommerce_payment_gateway_setup_${ id }` );
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { PAYMENT_GATEWAYS_STORE_NAME } from '@woocommerce/data';
|
||||
import { DynamicForm } from '@woocommerce/components';
|
||||
import { WooPaymentGatewayConnect } from '@woocommerce/onboarding';
|
||||
import { WooPaymentGatewayConfigure } from '@woocommerce/onboarding';
|
||||
import { useSlot } from '@woocommerce/experimental';
|
||||
|
||||
/**
|
||||
|
|
@ -34,7 +34,7 @@ export const validateFields = ( values, fields ) => {
|
|||
return errors;
|
||||
};
|
||||
|
||||
export const Connect = ( {
|
||||
export const Configure = ( {
|
||||
markConfigured,
|
||||
paymentGateway,
|
||||
recordConnectStartEvent,
|
||||
|
|
@ -50,7 +50,7 @@ export const Connect = ( {
|
|||
|
||||
const { createNotice } = useDispatch( 'core/notices' );
|
||||
const { updatePaymentGateway } = useDispatch( PAYMENT_GATEWAYS_STORE_NAME );
|
||||
const slot = useSlot( `woocommerce_payment_gateway_connect_${ id }` );
|
||||
const slot = useSlot( `woocommerce_payment_gateway_configure_${ id }` );
|
||||
const hasFills = Boolean( slot?.fills?.length );
|
||||
|
||||
const { isUpdating } = useSelect( ( select ) => {
|
||||
|
|
@ -75,8 +75,14 @@ export const Connect = ( {
|
|||
markConfigured( id );
|
||||
createNotice(
|
||||
'success',
|
||||
title +
|
||||
__( ' connected successfully', 'woocommerce-admin' )
|
||||
sprintf(
|
||||
/* translators: %s = title of the payment gateway */
|
||||
__(
|
||||
'%s configured successfully',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
title
|
||||
)
|
||||
);
|
||||
}
|
||||
} )
|
||||
|
|
@ -107,7 +113,7 @@ export const Connect = ( {
|
|||
|
||||
if ( hasFills ) {
|
||||
return (
|
||||
<WooPaymentGatewayConnect.Slot
|
||||
<WooPaymentGatewayConfigure.Slot
|
||||
fillProps={ {
|
||||
defaultForm: DefaultForm,
|
||||
defaultSubmit: handleSubmit,
|
||||
|
|
@ -21,7 +21,7 @@ import { useSlot } from '@woocommerce/experimental';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { createNoticesFromResponse } from '~/lib/notices';
|
||||
import { Connect } from './Connect';
|
||||
import { Configure } from './Configure';
|
||||
import './Setup.scss';
|
||||
|
||||
export const Setup = ( {
|
||||
|
|
@ -125,17 +125,17 @@ export const Setup = ( {
|
|||
: null;
|
||||
}, [] );
|
||||
|
||||
const connectStep = useMemo(
|
||||
const configureStep = useMemo(
|
||||
() => ( {
|
||||
key: 'connect',
|
||||
key: 'configure',
|
||||
label: sprintf(
|
||||
__( 'Connect your %(title)s account', 'woocommerce-admin' ),
|
||||
__( 'Configure your %(title)s account', 'woocommerce-admin' ),
|
||||
{
|
||||
title,
|
||||
}
|
||||
),
|
||||
content: gatewayInstalled ? (
|
||||
<Connect
|
||||
<Configure
|
||||
markConfigured={ markConfigured }
|
||||
paymentGateway={ paymentGateway }
|
||||
recordConnectStartEvent={ recordConnectStartEvent }
|
||||
|
|
@ -156,12 +156,12 @@ export const Setup = ( {
|
|||
<Stepper
|
||||
isVertical
|
||||
isPending={ stepperPending }
|
||||
currentStep={ needsPluginInstall ? 'install' : 'connect' }
|
||||
steps={ [ installStep, connectStep ].filter( Boolean ) }
|
||||
currentStep={ needsPluginInstall ? 'install' : 'configure' }
|
||||
steps={ [ installStep, configureStep ].filter( Boolean ) }
|
||||
{ ...props }
|
||||
/>
|
||||
),
|
||||
[ stepperPending, installStep, connectStep ]
|
||||
[ stepperPending, installStep, configureStep ]
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -172,7 +172,7 @@ export const Setup = ( {
|
|||
fillProps={ {
|
||||
defaultStepper: DefaultStepper,
|
||||
defaultInstallStep: installStep,
|
||||
defaultConnectStep: connectStep,
|
||||
defaultConfigureStep: configureStep,
|
||||
markConfigured: () => markConfigured( id ),
|
||||
paymentGateway,
|
||||
} }
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Connect, validateFields } from '../Connect';
|
||||
import { Configure, validateFields } from '../Configure';
|
||||
|
||||
const mockGateway = {
|
||||
id: 'mock-gateway',
|
||||
|
|
@ -37,15 +37,15 @@ const defaultProps = {
|
|||
paymentGateway: mockGateway,
|
||||
};
|
||||
|
||||
describe( 'Connect', () => {
|
||||
describe( 'Configure', () => {
|
||||
it( 'should show help text', () => {
|
||||
const { queryByText } = render( <Connect { ...defaultProps } /> );
|
||||
const { queryByText } = render( <Configure { ...defaultProps } /> );
|
||||
|
||||
expect( queryByText( 'Help text' ) ).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'should render a button with the connection URL', () => {
|
||||
const { container } = render( <Connect { ...defaultProps } /> );
|
||||
const { container } = render( <Configure { ...defaultProps } /> );
|
||||
|
||||
const button = container.querySelector( 'a' );
|
||||
expect( button.textContent ).toBe( 'Connect' );
|
||||
|
|
@ -60,7 +60,7 @@ describe( 'Connect', () => {
|
|||
connectionUrl: null,
|
||||
},
|
||||
};
|
||||
const { container } = render( <Connect { ...props } /> );
|
||||
const { container } = render( <Configure { ...props } /> );
|
||||
|
||||
const inputs = container.querySelectorAll( 'input' );
|
||||
expect( inputs.length ).toBe( 2 );
|
||||
|
|
@ -77,7 +77,7 @@ describe( 'Connect', () => {
|
|||
requiredSettings: [],
|
||||
},
|
||||
};
|
||||
const { container } = render( <Connect { ...props } /> );
|
||||
const { container } = render( <Configure { ...props } /> );
|
||||
|
||||
const button = container.querySelector( 'a' );
|
||||
expect( button.textContent ).toBe( 'Set up' );
|
||||
|
|
@ -36,11 +36,11 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
describe( 'Setup', () => {
|
||||
it( 'should show a connect step', () => {
|
||||
it( 'should show a configure step', () => {
|
||||
const { queryByText } = render( <Setup { ...defaultProps } /> );
|
||||
|
||||
expect(
|
||||
queryByText( 'Connect your Mock Gateway account' )
|
||||
queryByText( 'Configure your Mock Gateway account' )
|
||||
).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,6 @@ Name | Return | Default | Description
|
|||
|
||||
Payment gateway tasks can be SlotFilled to provide custom experiences. This is useful if a gateway cannot follow the generic payment steps to be fully set up.
|
||||
|
||||
The entire payment gateway card can be SlotFilled using [WooPaymentGatewaySetup](https://github.com/woocommerce/woocommerce-admin/tree/main/packages/tasks/src/WooPaymentGatewaySetup) or simply SlotFill [WooPaymentGatewayConnect](https://github.com/woocommerce/woocommerce-admin/tree/main/packages/tasks/src/WooPaymentGatewayConnect) to leave the default installation and stepper in place.
|
||||
The entire payment gateway card can be SlotFilled using [WooPaymentGatewaySetup](https://github.com/woocommerce/woocommerce-admin/tree/main/packages/tasks/src/WooPaymentGatewaySetup) or simply SlotFill [WooPaymentGatewayConfigure](https://github.com/woocommerce/woocommerce-admin/tree/main/packages/tasks/src/WooPaymentGatewayConfigure) to leave the default installation and stepper in place.
|
||||
|
||||
Note that since plugin installation happens asynchronously, a full page reload will not occur between gateway installation and configuration. This renders functions like `wp_enqueue_script` ineffective. To solve this issue and allow `SlotFill` to work on a newly installed plugin, the gateway can provide a URL to be loaded immediately after installation using `get_post_install_script_handles()`.
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
# WooPaymentGatewayConnect Slot & Fill
|
||||
# WooPaymentGatewayConfigure Slot & Fill
|
||||
|
||||
A Slotfill component that will replace the <DynamicForm /> component involved in displaying the form while adding a gateway via the payment task.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
<WooPaymentGatewayConnect id={ key }>
|
||||
<WooPaymentGatewayConfigure id={ key }>
|
||||
{({defaultForm: DefaultForm}) => <p>Fill Content</p>}
|
||||
</WooPaymentGatewayConnect>
|
||||
</WooPaymentGatewayConfigure>
|
||||
|
||||
<WooPaymentGatewayConnect.Slot id={ key } />
|
||||
<WooPaymentGatewayConfigure.Slot id={ key } />
|
||||
```
|
||||
|
||||
### WooPaymentGatewayConnect (fill)
|
||||
### WooPaymentGatewayConfigure (fill)
|
||||
|
||||
This is the fill component. You must provide the `id` prop to identify the slot that this will occupy. If you provide a function as the child of your fill (as shown above), you will receive some helper props to assist in creating your fill:
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ This is the fill component. You must provide the `id` prop to identify the slot
|
|||
| `markConfigured` | Function | A helper function that will mark your gateway as configured |
|
||||
| `paymentGateway` | Object | An object describing all of the relevant data pertaining to this payment gateway |
|
||||
|
||||
### WooPaymentGatewayConnect.Slot (slot)
|
||||
### WooPaymentGatewayConfigure.Slot (slot)
|
||||
|
||||
This is the slot component, and will not be used as frequently. It must also receive the required `id` prop that will be identical to the fill `id`.
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Slot, Fill } from '@wordpress/components';
|
||||
|
||||
export const WooPaymentGatewayConfigure = ( { id, ...props } ) => (
|
||||
<Fill name={ 'woocommerce_payment_gateway_configure_' + id } { ...props } />
|
||||
);
|
||||
|
||||
WooPaymentGatewayConfigure.Slot = ( { id, fillProps } ) => (
|
||||
<Slot
|
||||
name={ 'woocommerce_payment_gateway_configure_' + id }
|
||||
fillProps={ fillProps }
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './WooPaymentGatewayConfigure';
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Slot, Fill } from '@wordpress/components';
|
||||
|
||||
export const WooPaymentGatewayConnect = ( { id, ...props } ) => (
|
||||
<Fill name={ 'woocommerce_payment_gateway_connect_' + id } { ...props } />
|
||||
);
|
||||
|
||||
WooPaymentGatewayConnect.Slot = ( { id, fillProps } ) => (
|
||||
<Slot
|
||||
name={ 'woocommerce_payment_gateway_connect_' + id }
|
||||
fillProps={ fillProps }
|
||||
/>
|
||||
);
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './WooPaymentGatewayConnect';
|
||||
|
|
@ -4,4 +4,4 @@ export * from './components/SetupRequired';
|
|||
export * from './components/WCPayAcceptedMethods';
|
||||
export { default as WCPayLogo } from './images/wcpay-logo';
|
||||
export { WooPaymentGatewaySetup } from './components/WooPaymentGatewaySetup';
|
||||
export { WooPaymentGatewayConnect } from './components/WooPaymentGatewayConnect';
|
||||
export { WooPaymentGatewayConfigure } from './components/WooPaymentGatewayConfigure';
|
||||
|
|
|
|||
Loading…
Reference in New Issue