diff --git a/packages/js/admin-e2e-tests/CHANGELOG.md b/packages/js/admin-e2e-tests/CHANGELOG.md
index d764841fc75..db24c246ffd 100644
--- a/packages/js/admin-e2e-tests/CHANGELOG.md
+++ b/packages/js/admin-e2e-tests/CHANGELOG.md
@@ -1,5 +1,7 @@
# Unreleased
+- Update test for payment task. #32467
+
# 1.0.0
- Add returned type annotations and remove unused vars. #8020
diff --git a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts
index 5224a8825a6..1dae7adc683 100644
--- a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts
+++ b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts
@@ -25,6 +25,15 @@ export class PaymentsSetup extends BasePage {
await this.clickButtonWithText( 'Got it' );
}
+ async showOtherPaymentMethods(): Promise< void > {
+ const selector = '.woocommerce-task-payments button.toggle-button';
+ await this.page.waitForSelector( selector );
+ const toggleButton = await this.page.$(
+ `${ selector }[aria-expanded=false]`
+ );
+ await toggleButton?.click();
+ }
+
async goToPaymentMethodSetup(
method: PaymentMethodWithSetupButton
): Promise< void > {
@@ -41,14 +50,6 @@ export class PaymentsSetup extends BasePage {
}
}
- async methodHasBeenSetup( method: PaymentMethod ): Promise< void > {
- const selector = `.woocommerce-task-payment-${ method }`;
- await this.page.waitForSelector( selector );
- expect(
- await getElementByText( '*', 'Manage', selector )
- ).toBeDefined();
- }
-
async enableCashOnDelivery(): Promise< void > {
await this.page.waitForSelector( '.woocommerce-task-payment-cod' );
await this.clickButtonWithText( 'Enable' );
diff --git a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts
index ebf95a46033..0b5f78cf0a7 100644
--- a/packages/js/admin-e2e-tests/src/pages/WcSettings.ts
+++ b/packages/js/admin-e2e-tests/src/pages/WcSettings.ts
@@ -42,8 +42,22 @@ export class WcSettings extends BasePage {
);
}
+ async paymentMethodIsEnabled( method = '' ): Promise< boolean > {
+ await this.navigate( 'checkout' );
+ await waitForElementByText( 'h2', 'Payment methods' );
+ const className = await getAttribute(
+ `tr[data-gateway_id=${ method }] .woocommerce-input-toggle`,
+ 'className'
+ );
+ return (
+ ( className as string ).indexOf(
+ 'woocommerce-input-toggle--disabled'
+ ) === -1
+ );
+ }
+
async cleanPaymentMethods(): Promise< void > {
- this.navigate( 'checkout' );
+ await this.navigate( 'checkout' );
await waitForElementByText( 'h2', 'Payment methods' );
const paymentMethods = await page.$$( 'span.woocommerce-input-toggle' );
for ( const method of paymentMethods ) {
diff --git a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts
index 0515dce47f3..27052d002fc 100644
--- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts
+++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts
@@ -53,6 +53,7 @@ const testAdminPaymentSetupTask = () => {
} );
it( 'Saving valid bank account transfer details enables the payment method', async () => {
+ await paymentsSetup.showOtherPaymentMethods();
await paymentsSetup.goToPaymentMethodSetup( 'bacs' );
await bankTransferSetup.saveAccountDetails( {
accountNumber: '1234',
@@ -62,12 +63,11 @@ const testAdminPaymentSetupTask = () => {
iban: '12 3456 7890',
swiftCode: 'ABBA',
} );
-
- await homeScreen.isDisplayed();
await waitForTimeout( 1000 );
- await homeScreen.clickOnTaskList( 'Set up payments' );
- await paymentsSetup.isDisplayed();
- await paymentsSetup.methodHasBeenSetup( 'bacs' );
+ expect( await settings.paymentMethodIsEnabled( 'bacs' ) ).toBe(
+ true
+ );
+ await homeScreen.navigate();
} );
it( 'Enabling cash on delivery enables the payment method', async () => {
@@ -76,13 +76,13 @@ const testAdminPaymentSetupTask = () => {
await homeScreen.isDisplayed();
await waitForTimeout( 1000 );
await homeScreen.clickOnTaskList( 'Set up payments' );
- await paymentsSetup.enableCashOnDelivery();
- await homeScreen.navigate();
- await homeScreen.isDisplayed();
- await waitForTimeout( 1000 );
- await homeScreen.clickOnTaskList( 'Set up payments' );
await paymentsSetup.isDisplayed();
- await paymentsSetup.methodHasBeenSetup( 'cod' );
+ await paymentsSetup.showOtherPaymentMethods();
+ await paymentsSetup.enableCashOnDelivery();
+ await waitForTimeout( 1000 );
+ expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe(
+ true
+ );
} );
} );
};
diff --git a/packages/js/data/CHANGELOG.md b/packages/js/data/CHANGELOG.md
index cb955c6b7e2..a69294d2ca7 100644
--- a/packages/js/data/CHANGELOG.md
+++ b/packages/js/data/CHANGELOG.md
@@ -1,6 +1,7 @@
# Unreleased
- Update dependency `@wordpress/hooks` to ^3.5.0
+- Add `is_offline` attribute for `Plugin` type. #32467
# 3.1.0
diff --git a/packages/js/data/src/plugins/types.ts b/packages/js/data/src/plugins/types.ts
index 0988f81972a..54a0299ba39 100644
--- a/packages/js/data/src/plugins/types.ts
+++ b/packages/js/data/src/plugins/types.ts
@@ -39,6 +39,7 @@ export type Plugin = {
recommendation_priority?: number;
is_visible?: boolean;
is_local_partner?: boolean;
+ is_offline?: boolean;
};
type PaypalOnboardingState = 'unknown' | 'start' | 'progressive' | 'onboarded';
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js
index e16ff3644b1..ae4c9ad1f2a 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Action.js
@@ -24,7 +24,7 @@ export const Action = ( {
markConfigured,
onSetUp = () => {},
onSetupCallback,
- setupButtonText = __( 'Set up', 'woocommerce' ),
+ setupButtonText = __( 'Get started', 'woocommerce' ),
} ) => {
const [ isBusy, setIsBusy ] = useState( false );
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js
index 9375f94938a..289243ed3c9 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { Card, CardHeader } from '@wordpress/components';
+import { Card, CardHeader, CardFooter } from '@wordpress/components';
/**
* Internal dependencies
@@ -15,10 +15,11 @@ export const List = ( {
markConfigured,
recommendation,
paymentGateways,
+ footerLink,
} ) => {
return (
- { heading }
+ { heading && { heading } }
{ paymentGateways.map( ( paymentGateway ) => {
const { id } = paymentGateway;
return (
@@ -30,6 +31,9 @@ export const List = ( {
/>
);
} ) }
+ { footerLink && (
+ { footerLink }
+ ) }
);
};
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
index dd2b03ecafe..cb524da6945 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/List.scss
@@ -6,14 +6,15 @@
overflow: hidden;
.components-card__media {
- width: 170px;
+ width: 85px;
flex-shrink: 0;
+ align-self: flex-start;
img,
svg,
.is-placeholder {
margin: auto;
- max-width: 100px;
+ max-width: 36px;
display: block;
}
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js
index 8e7d4caca25..6bd6e4e07e0 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/List/test/list.js
@@ -49,7 +49,7 @@ describe( 'PaymentGatewaySuggestions > List', () => {
expect( queryByRole( 'button' ) ).toHaveTextContent( 'Enable' );
} );
- it( 'should display the "Set up" button when setup is required', () => {
+ it( 'should display the "Get started" button when setup is required', () => {
const props = {
...defaultProps,
paymentGateways: [
@@ -63,7 +63,7 @@ describe( 'PaymentGatewaySuggestions > List', () => {
const { queryByRole } = render(
);
- expect( queryByRole( 'button' ) ).toHaveTextContent( 'Set up' );
+ expect( queryByRole( 'button' ) ).toHaveTextContent( 'Get started' );
} );
it( 'should display the SetupRequired component when appropriate', () => {
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/Configure.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/Configure.js
index 528d62f63a3..b80430d58e9 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/Configure.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/Configure.js
@@ -156,7 +156,7 @@ export const Configure = ( { markConfigured, paymentGateway } ) => {
) }
);
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/configure.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/configure.js
index daacf3cc803..81d63b0930e 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/configure.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Setup/test/configure.js
@@ -81,7 +81,7 @@ describe( 'Configure', () => {
const { container } = render( );
const button = container.querySelector( 'a' );
- expect( button.textContent ).toBe( 'Set up' );
+ expect( button.textContent ).toBe( 'Get started' );
expect( button.href ).toBe( mockGateway.settingsUrl );
} );
} );
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js
new file mode 100644
index 00000000000..95ad0f2b078
--- /dev/null
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import ChevronUpIcon from 'gridicons/dist/chevron-up';
+import ChevronDownIcon from 'gridicons/dist/chevron-down';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './Toggle.scss';
+
+export const Toggle = ( { children, heading, onToggle } ) => {
+ const [ isShow, setIsShow ] = useState( false );
+ const onClick = () => {
+ onToggle( isShow );
+ setIsShow( ! isShow );
+ };
+
+ return (
+
+
+ { isShow ? children : null }
+
+ );
+};
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.scss
new file mode 100644
index 00000000000..b1605309872
--- /dev/null
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.scss
@@ -0,0 +1,9 @@
+.woocommerce-task-payments {
+ .toggle-button {
+ margin: $gap-small 0;
+
+ .gridicon {
+ margin-left: 4px;
+ }
+ }
+}
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/index.js
new file mode 100644
index 00000000000..87fdc434811
--- /dev/null
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/index.js
@@ -0,0 +1 @@
+export { Toggle } from './Toggle';
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
index a908df8304f..032b85c327a 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js
@@ -13,17 +13,23 @@ import { useMemo, useCallback, useEffect } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';
import { WooOnboardingTask } from '@woocommerce/onboarding';
import { getNewPath } from '@woocommerce/navigation';
+import { Button } from '@wordpress/components';
+import ExternalIcon from 'gridicons/dist/external';
/**
* Internal dependencies
*/
import { List, Placeholder as ListPlaceholder } from './components/List';
import { Setup, Placeholder as SetupPlaceholder } from './components/Setup';
+import { Toggle } from './components/Toggle/Toggle';
import { WCPaySuggestion } from './components/WCPay';
import { getPluginSlug } from '~/utils';
import './plugins/Bacs';
import './payment-gateway-suggestions.scss';
+const SEE_MORE_LINK =
+ 'https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?utm_source=payments_recommendations';
+
const comparePaymentGatewaysByPriority = ( a, b ) =>
a.recommendation_priority - b.recommendation_priority;
@@ -179,7 +185,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
return gateway;
}, [ isResolving, query, paymentGateways ] );
- const [ wcPayGateway, enabledGateways, additionalGateways ] = useMemo(
+ const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo(
() =>
Array.from( paymentGateways.values() )
.sort( ( a, b ) => {
@@ -196,7 +202,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
} )
.reduce(
( all, gateway ) => {
- const [ wcPay, enabled, additional ] = all;
+ const [ wcPay, offline, additional ] = all;
// WCPay is handled separately when not installed and configured
if (
@@ -205,8 +211,8 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
! ( gateway.installed && ! gateway.needsSetup )
) {
wcPay.push( gateway );
- } else if ( gateway.enabled ) {
- enabled.push( gateway );
+ } else if ( gateway.is_offline ) {
+ offline.push( gateway );
} else {
additional.push( gateway );
}
@@ -218,6 +224,20 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
[ paymentGateways ]
);
+ const isEligibleWCPay = !! wcPayGateway.length;
+
+ const trackSeeMore = () => {
+ recordEvent( 'tasklist_payment_see_more', {} );
+ };
+
+ const trackToggle = ( isShow ) => {
+ recordEvent( 'tasklist_payment_show_toggle', {
+ toggle: isShow ? 'hide' : 'show',
+ payment_method_count:
+ offlineGateways.length + additionalGateways.length,
+ } );
+ };
+
if ( query.id && ! currentGateway ) {
return ;
}
@@ -231,32 +251,59 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
);
}
+ const additionalSection = !! additionalGateways.length && (
+
+ { __( 'See more', 'woocommerce' ) }
+
+
+ }
+ >
+ );
+
+ const offlineSection = !! offlineGateways.length && (
+
+ );
+
return (
{ ! paymentGateways.size && }
- { !! wcPayGateway.length && (
-
- ) }
-
- { !! enabledGateways.length && (
-
- ) }
-
- { !! additionalGateways.length && (
-
+ { isEligibleWCPay ? (
+ <>
+
+
+ { additionalSection }
+ { offlineSection }
+
+
+ ) : (
+ <>
+ { additionalSection }
+ { offlineSection }
+
) }
);
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
index 0716dc3d3fa..8298e321dbe 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/payment-gateway-suggestions.scss
@@ -22,6 +22,14 @@
margin: 0;
}
+ .components-card__footer {
+ a.components-button {
+ .gridicon {
+ margin-left: 4px;
+ }
+ }
+ }
+
.woocommerce-task-payment__recommended-pill {
border: 1px solid $studio-gray-5;
border-radius: 28px;
diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
index eae438fe47b..c2ca2617ff0 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
+++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js
@@ -49,6 +49,7 @@ const paymentGatewaySuggestions = [
image:
'http://localhost:8888/wp-content/plugins/woocommerce-admin/images/onboarding/cod.svg',
is_visible: true,
+ is_offline: true,
},
{
id: 'bacs',
@@ -57,6 +58,7 @@ const paymentGatewaySuggestions = [
image:
'http://localhost:8888/wp-content/plugins/woocommerce-admin/images/onboarding/bacs.svg',
is_visible: true,
+ is_offline: true,
},
{
id: 'woocommerce_payments:non-us',
@@ -83,8 +85,12 @@ const paymentGatewaySuggestions = [
},
];
+const paymentGatewaySuggestionsWithoutWCPay = paymentGatewaySuggestions.filter(
+ ( p ) => p.title !== 'WooCommerce Payments'
+);
+
describe( 'PaymentGatewaySuggestions', () => {
- test( 'should render payment gateway lists', () => {
+ test( 'should render only WCPay if its suggested', () => {
const onComplete = jest.fn();
const query = {};
useSelect.mockImplementation( () => ( {
@@ -109,6 +115,38 @@ describe( 'PaymentGatewaySuggestions', () => {
( e ) => e.textContent
);
+ expect( paymentTitles ).toEqual( [] );
+
+ expect(
+ container.getElementsByTagName( 'title' )[ 0 ].textContent
+ ).toBe( 'WooCommerce Payments' );
+ } );
+
+ test( 'should render all payment gateways if no WCPay', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
+ installedPaymentGateways: [],
+ } ) );
+
+ const { container } = render(
+
+ );
+
+ const paymentTitleElements = container.querySelectorAll(
+ '.woocommerce-task-payment__title'
+ );
+
+ const paymentTitles = Array.from( paymentTitleElements ).map(
+ ( e ) => e.textContent
+ );
+
expect( paymentTitles ).toEqual( [
'Stripe',
'PayPal Payments',
@@ -116,10 +154,6 @@ describe( 'PaymentGatewaySuggestions', () => {
'Cash on delivery',
'Direct bank transfer',
] );
-
- expect(
- container.getElementsByTagName( 'title' )[ 0 ].textContent
- ).toBe( 'WooCommerce Payments' );
} );
test( 'should the payment gateway offline options at the bottom', () => {
@@ -128,7 +162,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [],
} ) );
@@ -154,7 +188,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [
{
id: 'ppcp-gateway',
@@ -184,7 +218,7 @@ describe( 'PaymentGatewaySuggestions', () => {
useSelect.mockImplementation( () => ( {
isResolving: false,
getPaymentGateway: jest.fn(),
- paymentGatewaySuggestions,
+ paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay,
installedPaymentGateways: [
{
id: 'ppcp-gateway',
@@ -211,4 +245,59 @@ describe( 'PaymentGatewaySuggestions', () => {
selected: 'ppcp_gateway',
} );
} );
+
+ test( 'should record event correctly when other payment methods is clicked', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions,
+ installedPaymentGateways: [],
+ } ) );
+
+ render(
+
+ );
+
+ fireEvent.click( screen.getByText( 'Other payment methods' ) );
+
+ // By default it's hidden, so when toggle it shows.
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'tasklist_payment_show_toggle',
+ {
+ toggle: 'show',
+ payment_method_count: paymentGatewaySuggestions.length - 1, // Minus one for WCPay since it's not counted in "other payment methods".
+ }
+ );
+ } );
+
+ test( 'should record event correctly when see more is clicked', () => {
+ const onComplete = jest.fn();
+ const query = {};
+ useSelect.mockImplementation( () => ( {
+ isResolving: false,
+ getPaymentGateway: jest.fn(),
+ paymentGatewaySuggestions,
+ installedPaymentGateways: [],
+ } ) );
+
+ render(
+
+ );
+
+ fireEvent.click( screen.getByText( 'Other payment methods' ) );
+ fireEvent.click( screen.getByText( 'See more' ) );
+
+ expect( recordEvent ).toHaveBeenCalledWith(
+ 'tasklist_payment_see_more',
+ {}
+ );
+ } );
} );
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/affirm.png b/plugins/woocommerce/assets/images/payment_methods/72x72/affirm.png
new file mode 100644
index 00000000000..9401ad1b670
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/affirm.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/afterpay.png b/plugins/woocommerce/assets/images/payment_methods/72x72/afterpay.png
new file mode 100644
index 00000000000..28b89a010d1
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/afterpay.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/amazonpay.png b/plugins/woocommerce/assets/images/payment_methods/72x72/amazonpay.png
new file mode 100644
index 00000000000..1116fe95b2f
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/amazonpay.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/bacs.png b/plugins/woocommerce/assets/images/payment_methods/72x72/bacs.png
new file mode 100644
index 00000000000..e9b706beb8a
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/bacs.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/cod.png b/plugins/woocommerce/assets/images/payment_methods/72x72/cod.png
new file mode 100644
index 00000000000..f2ba5f68888
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/cod.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/eway.png b/plugins/woocommerce/assets/images/payment_methods/72x72/eway.png
new file mode 100644
index 00000000000..74884fa1b03
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/eway.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/klarna.png b/plugins/woocommerce/assets/images/payment_methods/72x72/klarna.png
new file mode 100644
index 00000000000..a97abed5981
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/klarna.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/mercadopago.png b/plugins/woocommerce/assets/images/payment_methods/72x72/mercadopago.png
new file mode 100644
index 00000000000..5f61e693d6e
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/mercadopago.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/mollie.png b/plugins/woocommerce/assets/images/payment_methods/72x72/mollie.png
new file mode 100644
index 00000000000..3ec67896237
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/mollie.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/payfast.png b/plugins/woocommerce/assets/images/payment_methods/72x72/payfast.png
new file mode 100644
index 00000000000..96440121c30
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/payfast.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/paypal.png b/plugins/woocommerce/assets/images/payment_methods/72x72/paypal.png
new file mode 100644
index 00000000000..07768e74fd4
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/paypal.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/paystack.png b/plugins/woocommerce/assets/images/payment_methods/72x72/paystack.png
new file mode 100644
index 00000000000..362446dfb00
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/paystack.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/payu.png b/plugins/woocommerce/assets/images/payment_methods/72x72/payu.png
new file mode 100644
index 00000000000..50eaa0f8250
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/payu.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/razorpay.png b/plugins/woocommerce/assets/images/payment_methods/72x72/razorpay.png
new file mode 100644
index 00000000000..01dedd7bfa6
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/razorpay.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/square.png b/plugins/woocommerce/assets/images/payment_methods/72x72/square.png
new file mode 100644
index 00000000000..3ffe4877222
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/square.png differ
diff --git a/plugins/woocommerce/assets/images/payment_methods/72x72/stripe.png b/plugins/woocommerce/assets/images/payment_methods/72x72/stripe.png
new file mode 100644
index 00000000000..0175f2947d6
Binary files /dev/null and b/plugins/woocommerce/assets/images/payment_methods/72x72/stripe.png differ
diff --git a/plugins/woocommerce/changelog/dev-32131-ui-changes-additional-payment-section b/plugins/woocommerce/changelog/dev-32131-ui-changes-additional-payment-section
new file mode 100644
index 00000000000..f914a935799
--- /dev/null
+++ b/plugins/woocommerce/changelog/dev-32131-ui-changes-additional-payment-section
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+UI changes for set up payments task
diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php
index 1b1a76e74e2..4b64d63b5ac 100644
--- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php
+++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php
@@ -25,7 +25,7 @@ class DefaultPaymentGateways {
'id' => 'payfast',
'title' => __( 'PayFast', 'woocommerce' ),
'content' => __( 'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs. Selecting this extension will configure your store to use South African rands as the selected currency.', 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/payfast.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payfast.png',
'plugins' => array( 'woocommerce-payfast-gateway' ),
'is_visible' => array(
(object) array(
@@ -40,7 +40,7 @@ class DefaultPaymentGateways {
'id' => 'stripe',
'title' => __( ' Stripe', 'woocommerce' ),
'content' => __( 'Accept debit and credit cards in 135+ currencies, methods such as Alipay, and one-touch checkout with Apple Pay.', 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/stripe.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/stripe.png',
'plugins' => array( 'woocommerce-gateway-stripe' ),
'is_visible' => array(
// https://stripe.com/global.
@@ -96,7 +96,7 @@ class DefaultPaymentGateways {
'id' => 'paystack',
'title' => __( 'Paystack', 'woocommerce' ),
'content' => __( 'Paystack helps African merchants accept one-time and recurring payments online with a modern, safe, and secure payment gateway.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/paystack.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paystack.png',
'plugins' => array( 'woo-paystack' ),
'is_visible' => array(
self::get_rules_for_countries( array( 'ZA', 'GH', 'NG' ) ),
@@ -107,7 +107,7 @@ class DefaultPaymentGateways {
'id' => 'kco',
'title' => __( 'Klarna Checkout', 'woocommerce' ),
'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png',
'plugins' => array( 'klarna-checkout-for-woocommerce' ),
'is_visible' => array(
self::get_rules_for_countries( array( 'SE', 'FI', 'NO' ) ),
@@ -118,7 +118,7 @@ class DefaultPaymentGateways {
'id' => 'klarna_payments',
'title' => __( 'Klarna Payments', 'woocommerce' ),
'content' => __( 'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.', 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/klarna-black.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/klarna.png',
'plugins' => array( 'klarna-payments-for-woocommerce' ),
'is_visible' => array(
self::get_rules_for_countries(
@@ -143,7 +143,7 @@ class DefaultPaymentGateways {
'id' => 'mollie_wc_gateway_banktransfer',
'title' => __( 'Mollie', 'woocommerce' ),
'content' => __( 'Effortless payments by Mollie: Offer global and local payment methods, get onboarded in minutes, and supported in your language.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mollie.svg',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mollie.png',
'plugins' => array( 'mollie-payments-for-woocommerce' ),
'is_visible' => array(
self::get_rules_for_countries(
@@ -167,7 +167,7 @@ class DefaultPaymentGateways {
'id' => 'woo-mercado-pago-custom',
'title' => __( 'Mercado Pago Checkout Pro & Custom', 'woocommerce' ),
'content' => __( 'Accept credit and debit cards, offline (cash or bank transfer) and logged-in payments with money in Mercado Pago. Safe and secure payments with the leading payment processor in LATAM.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/mercadopago.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/mercadopago.png',
'plugins' => array( 'woocommerce-mercadopago' ),
'is_visible' => array(
self::get_rules_for_countries( array( 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ) ),
@@ -179,7 +179,7 @@ class DefaultPaymentGateways {
'id' => 'ppcp-gateway',
'title' => __( 'PayPal Payments', 'woocommerce' ),
'content' => __( "Safe and secure payments using credit cards or your customer's PayPal account.", 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/paypal.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/paypal.png',
'plugins' => array( 'woocommerce-paypal-payments' ),
'is_visible' => array(
(object) array(
@@ -194,19 +194,21 @@ class DefaultPaymentGateways {
'id' => 'cod',
'title' => __( 'Cash on delivery', 'woocommerce' ),
'content' => __( 'Take payments in cash upon delivery.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/cod.svg',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/cod.png',
'is_visible' => array(
self::get_rules_for_cbd( false ),
),
+ 'is_offline' => true,
),
array(
'id' => 'bacs',
'title' => __( 'Direct bank transfer', 'woocommerce' ),
'content' => __( 'Take payments via bank transfer.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/bacs.svg',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/bacs.png',
'is_visible' => array(
self::get_rules_for_cbd( false ),
),
+ 'is_offline' => true,
),
array(
'id' => 'woocommerce_payments',
@@ -322,7 +324,7 @@ class DefaultPaymentGateways {
'id' => 'razorpay',
'title' => __( 'Razorpay', 'woocommerce' ),
'content' => __( 'The official Razorpay extension for WooCommerce allows you to accept credit cards, debit cards, netbanking, wallet, and UPI payments.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/razorpay.svg',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/razorpay.png',
'plugins' => array( 'woo-razorpay' ),
'is_visible' => array(
(object) array(
@@ -337,7 +339,7 @@ class DefaultPaymentGateways {
'id' => 'payubiz',
'title' => __( 'PayU for WooCommerce', 'woocommerce' ),
'content' => __( 'Enable PayU’s exclusive plugin for WooCommerce to start accepting payments in 100+ payment methods available in India including credit cards, debit cards, UPI, & more!', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/payu.svg',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/payu.png',
'plugins' => array( 'payu-india' ),
'is_visible' => array(
(object) array(
@@ -352,7 +354,7 @@ class DefaultPaymentGateways {
'id' => 'eway',
'title' => __( 'Eway', 'woocommerce' ),
'content' => __( 'The Eway extension for WooCommerce allows you to take credit card payments directly on your store without redirecting your customers to a third party site to make payment.', 'woocommerce' ),
- 'image' => WC_ADMIN_IMAGES_FOLDER_URL . '/onboarding/eway.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/eway.png',
'plugins' => array( 'woocommerce-gateway-eway' ),
'is_visible' => array(
self::get_rules_for_countries( array( 'AU', 'NZ' ) ),
@@ -363,7 +365,7 @@ class DefaultPaymentGateways {
'id' => 'square_credit_card',
'title' => __( 'Square', 'woocommerce' ),
'content' => __( 'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). Sell online and in store and track sales and inventory in one place.', 'woocommerce' ),
- 'image' => WC()->plugin_url() . '/assets/images/square-black.png',
+ 'image' => WC()->plugin_url() . '/assets/images/payment_methods/72x72/square.png',
'plugins' => array( 'woocommerce-square' ),
'is_visible' => array(
(object) array(