From fd4a4a5604de63d835fb2bd71cc2cdf388042ab8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 31 Mar 2022 12:23:26 +0800 Subject: [PATCH 01/25] Add is_offline flag and split payment sections --- packages/js/data/src/plugins/types.ts | 1 + .../fills/PaymentGatewaySuggestions/index.js | 24 +++++++++++++++---- .../PaymentGatewaySuggestions/test/index.js | 2 ++ .../DefaultPaymentGateways.php | 2 ++ 4 files changed, 24 insertions(+), 5 deletions(-) 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/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index a908df8304f..a74092fb4a5 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -179,7 +179,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return gateway; }, [ isResolving, query, paymentGateways ] ); - const [ wcPayGateway, enabledGateways, additionalGateways ] = useMemo( + const [ wcPayGateway, enabledGateways, offlineGateways, additionalGateways ] = useMemo( () => Array.from( paymentGateways.values() ) .sort( ( a, b ) => { @@ -196,7 +196,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { } ) .reduce( ( all, gateway ) => { - const [ wcPay, enabled, additional ] = all; + const [ wcPay, enabled, offline, additional ] = all; // WCPay is handled separately when not installed and configured if ( @@ -207,13 +207,15 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { wcPay.push( gateway ); } else if ( gateway.enabled ) { enabled.push( gateway ); + } else if ( gateway.is_offline ) { + offline.push( gateway ); } else { additional.push( gateway ); } return all; }, - [ [], [], [] ] + [ [], [], [], [] ] ), [ paymentGateways ] ); @@ -250,14 +252,26 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { { !! additionalGateways.length && ( ) } + + { !! offlineGateways.length && ( + + ) } ); }; 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..386dd514510 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', diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index 1b1a76e74e2..64ef1e33512 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -198,6 +198,7 @@ class DefaultPaymentGateways { 'is_visible' => array( self::get_rules_for_cbd( false ), ), + 'is_offline' => true, ), array( 'id' => 'bacs', @@ -207,6 +208,7 @@ class DefaultPaymentGateways { 'is_visible' => array( self::get_rules_for_cbd( false ), ), + 'is_offline' => true, ), array( 'id' => 'woocommerce_payments', From fb89df5f2c1594f2810986a9587da308e334a354 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 31 Mar 2022 12:26:22 +0800 Subject: [PATCH 02/25] Rename set up button to get started --- .../fills/PaymentGatewaySuggestions/components/Action.js | 2 +- .../PaymentGatewaySuggestions/components/List/test/list.js | 4 ++-- .../PaymentGatewaySuggestions/components/Setup/Configure.js | 2 +- .../components/Setup/test/configure.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) 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..90c0486ecbc 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-admin' ), } ) => { const [ isBusy, setIsBusy ] = useState( false ); 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..5b5e45b5f92 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 ); } ); } ); From a3bd1e5109d7fc95a57883ce3334c7eb7bbb0ad2 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 31 Mar 2022 13:57:38 +0800 Subject: [PATCH 03/25] Add see more button --- .../components/List/List.js | 8 ++++++- .../fills/PaymentGatewaySuggestions/index.js | 24 +++++++++++++++++-- .../payment-gateway-suggestions.scss | 9 +++++++ 3 files changed, 38 insertions(+), 3 deletions(-) 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..924ae456415 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,6 +15,7 @@ export const List = ( { markConfigured, recommendation, paymentGateways, + footerLink, } ) => { return ( @@ -30,6 +31,11 @@ export const List = ( { /> ); } ) } + { footerLink ? ( + { footerLink } + ) : ( + '' + ) } ); }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index a74092fb4a5..1d2f5160e71 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -13,6 +13,8 @@ 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 @@ -24,6 +26,9 @@ 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 +184,12 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return gateway; }, [ isResolving, query, paymentGateways ] ); - const [ wcPayGateway, enabledGateways, offlineGateways, additionalGateways ] = useMemo( + const [ + wcPayGateway, + enabledGateways, + offlineGateways, + additionalGateways, + ] = useMemo( () => Array.from( paymentGateways.values() ) .sort( ( a, b ) => { @@ -258,7 +268,17 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { recommendation={ recommendation } paymentGateways={ additionalGateways } markConfigured={ markConfigured } - /> + footerLink={ + + } + > ) } { !! offlineGateways.length && ( 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..8e408b15e20 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,15 @@ 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; From 0f554436da200fce975928e2ebfed714ddb80d1b Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 4 Apr 2022 18:12:20 +0800 Subject: [PATCH 04/25] Broke wcpay task to different sections, added toggle component, added other payment methods toggle --- .../components/List/List.js | 2 +- .../components/Toggle/Toggle.js | 41 +++++++ .../components/Toggle/Toggle.scss | 9 ++ .../components/Toggle/index.js | 1 + .../fills/PaymentGatewaySuggestions/index.js | 100 ++++++++++-------- 5 files changed, 108 insertions(+), 45 deletions(-) create mode 100644 plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js create mode 100644 plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.scss create mode 100644 plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/index.js 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 924ae456415..d9442b284f7 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 @@ -19,7 +19,7 @@ export const List = ( { } ) => { return ( - { heading } + { heading ? { heading } : null } { paymentGateways.map( ( paymentGateway ) => { const { id } = paymentGateway; return ( 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..d87e6fa6ff9 --- /dev/null +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js @@ -0,0 +1,41 @@ +/** + * 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 } ) => { + const [ isOpen, setIsOpen ] = useState( false ); + const onToggle = () => { + setIsOpen( ! isOpen ); + }; + + return ( +
+ + { isOpen ? children : null } +
+ ); +}; + +// export default Toggle; 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 1d2f5160e71..99d9f2effea 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -21,6 +21,7 @@ import ExternalIcon from 'gridicons/dist/external'; */ 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'; @@ -230,6 +231,8 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { [ paymentGateways ] ); + const isEligibleWCPay = !! wcPayGateway.length; + if ( query.id && ! currentGateway ) { return ; } @@ -243,54 +246,63 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { ); } + const enabledSection = !! enabledGateways.length && ( + + ); + + const additionalSection = !! additionalGateways.length && ( + + { __( 'See more', 'woocommerce' ) } + + + } + > + ); + + const offlineSection = !! offlineGateways.length && ( + + ); + return (
{ ! paymentGateways.size && } - { !! wcPayGateway.length && ( - - ) } - - { !! enabledGateways.length && ( - - ) } - - { !! additionalGateways.length && ( - - { __( 'See more', 'woocommerce-admin' ) } - - - } - > - ) } - - { !! offlineGateways.length && ( - + { isEligibleWCPay ? ( + <> + + + { enabledSection } + { additionalSection } + { offlineSection } + + + ) : ( + <> + { enabledSection } + { additionalSection } + { offlineSection } + ) }
); From 5ff23bf10331accfefb98a9910eb065ec3c8ab65 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 4 Apr 2022 18:38:07 +0800 Subject: [PATCH 05/25] Add tracks and small refactor to toggle --- .../components/Toggle/Toggle.js | 17 +++++++++-------- .../fills/PaymentGatewaySuggestions/index.js | 18 +++++++++++++++++- 2 files changed, 26 insertions(+), 9 deletions(-) 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 index d87e6fa6ff9..d096360b166 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js @@ -11,29 +11,30 @@ import { useState } from '@wordpress/element'; */ import './Toggle.scss'; -export const Toggle = ( { children, heading } ) => { - const [ isOpen, setIsOpen ] = useState( false ); - const onToggle = () => { - setIsOpen( ! isOpen ); +export const Toggle = ( { children, heading, onToggle } ) => { + const [ isShow, setIsShow ] = useState( false ); + const onClick = () => { + onToggle( isShow ); + setIsShow( ! isShow ); }; return (
- { isOpen ? children : null } + { isShow ? children : null }
); }; diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 99d9f2effea..99d4df681a6 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -161,6 +161,16 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { [ paymentGateways ] ); + const trackSeeMore = () => { + recordEvent( 'tasklist_payment_see_more', {} ); + }; + + const trackToggle = ( isShow ) => { + recordEvent( 'tasklist_payment_show_toggle', { + toggle: isShow ? 'hide' : 'show', + } ); + }; + const recommendation = useMemo( () => Array.from( paymentGateways.values() ) @@ -265,7 +275,12 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { paymentGateways={ additionalGateways } markConfigured={ markConfigured } footerLink={ - @@ -291,6 +306,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { { enabledSection } { additionalSection } From c596222069b4fa9e23da15aa4d516ba968d2777a Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 5 Apr 2022 11:01:03 +0800 Subject: [PATCH 06/25] Refactor tests --- .../PaymentGatewaySuggestions/test/index.js | 102 ++++++++++++++++-- 1 file changed, 94 insertions(+), 8 deletions(-) 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 386dd514510..7df91e7a82a 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -85,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( () => ( { @@ -111,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', @@ -118,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', () => { @@ -130,7 +162,7 @@ describe( 'PaymentGatewaySuggestions', () => { useSelect.mockImplementation( () => ( { isResolving: false, getPaymentGateway: jest.fn(), - paymentGatewaySuggestions, + paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay, installedPaymentGateways: [], } ) ); @@ -156,7 +188,7 @@ describe( 'PaymentGatewaySuggestions', () => { useSelect.mockImplementation( () => ( { isResolving: false, getPaymentGateway: jest.fn(), - paymentGatewaySuggestions, + paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay, installedPaymentGateways: [ { id: 'ppcp-gateway', @@ -186,7 +218,7 @@ describe( 'PaymentGatewaySuggestions', () => { useSelect.mockImplementation( () => ( { isResolving: false, getPaymentGateway: jest.fn(), - paymentGatewaySuggestions, + paymentGatewaySuggestions: paymentGatewaySuggestionsWithoutWCPay, installedPaymentGateways: [ { id: 'ppcp-gateway', @@ -213,4 +245,58 @@ 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', + } + ); + } ); + + 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', + {} + ); + } ); } ); From 1980fac6fd06f03a3074a3306fabe90014b1ef10 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 12:25:18 +0800 Subject: [PATCH 07/25] Revamp WCPay suggestion in payments task --- .../src/components/WCPayCard/WCPayCard.js | 139 +++++++++---- .../src/components/WCPayCard/WCPayCard.scss | 51 ++++- .../onboarding/src/images/wcpay-benefit-1.js | 134 +++++++++++++ .../onboarding/src/images/wcpay-benefit-2.js | 102 ++++++++++ .../onboarding/src/images/wcpay-benefit-3.js | 188 ++++++++++++++++++ .../onboarding/src/images/wcpay-hero-image.js | 140 +++++++++++++ .../components/WCPay/Suggestion.js | 50 ++--- .../payment-gateway-suggestions.scss | 1 - 8 files changed, 735 insertions(+), 70 deletions(-) create mode 100644 packages/js/onboarding/src/images/wcpay-benefit-1.js create mode 100644 packages/js/onboarding/src/images/wcpay-benefit-2.js create mode 100644 packages/js/onboarding/src/images/wcpay-benefit-3.js create mode 100644 packages/js/onboarding/src/images/wcpay-hero-image.js diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index 88a79a7ad1c..6f4fde45af7 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -1,63 +1,126 @@ /** * External dependencies */ -import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components'; +import { Card, CardBody, CardFooter } from '@wordpress/components'; import { Text } from '@woocommerce/experimental'; import { createElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; +import interpolateComponents from '@automattic/interpolate-components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods'; -import WCPayLogo from '../../images/wcpay-logo'; - -export const WCPayCardHeader = ( { - logoWidth = 196, - logoHeight = 41, - children, -} ) => ( - - - { children } - -); +import WCPayHeroImage from '../../images/wcpay-hero-image'; +import WCPayBenefit1 from '../../images/wcpay-benefit-1'; +import WCPayBenefit2 from '../../images/wcpay-benefit-2'; +import WCPayBenefit3 from '../../images/wcpay-benefit-3'; export const WCPayCardBody = ( { - description, heading, + children, onLinkClick = () => {}, } ) => ( - { heading && { heading } } - - - { description } -
- - { __( 'Learn more', 'woocommerce' ) } - - - - +
+
+ { heading && ( + + { heading } + + ) } + + { interpolateComponents( { + mixedString: __( + 'By using WooCommerce Payments you agree to be bound by our {{tosLink /}} and acknowledge that you have read our {{privacyLink /}}', + 'woocommerce' + ), + components: { + tosLink: ( + + { __( 'Terms of Service', 'woocommerce' ) } + + ), + privacyLink: ( + + { __( 'Privacy Policy', 'woocommerce' ) } + + ), + }, + } ) } +
+ +
{ children }
+
+
+ +
+
); -export const WCPayCardFooter = ( { children } ) => ( - { children } +export const WCPayCardFooter = () => ( + + + ); export const WCPayCard = ( { children } ) => { - return { children }; + return ( + + { children } + + ); +}; + +export const WCPayBenefitCard = () => { + return ( + + +
+
+ + { __( + 'Offer your customers their preferred way to pay including debit and credit card payments, Apple Pay, Sofort, SEPA, iDeal and many more.', + 'woocommerce' + ) } +
+
+ + { __( + 'Sell to international markets and accept more than 135 currencies with local payment methods.', + 'woocommerce' + ) } +
+
+ + { __( + 'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.', + 'woocommerce' + ) } +
+
+ + + ); }; diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index c21e835ff68..21b1407c54c 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -1,6 +1,44 @@ .woocommerce-task-payments .woocommerce-task-payment-wcpay { + + .vstack, .hstack { + display: flex; + &.content-center { + justify-content: center; + } + + &.content-around { + justify-content: space-around; + } + + &.flex-1 { + flex: 1; + } + } + + .vstack { + flex-direction: column; + } + + .hstack { + flex-direction: row; + } + + .wcpay-hero-image { + margin-right: -32px; + margin-bottom: -28px; + } + + .woocommerce-task-payment-wcpay__heading { + letter-spacing: 0.6px; + max-width: 250px; + margin-right: $gap-small; + margin-bottom: $gap; + } + .woocommerce-task-payment-wcpay__description { - font-size: 16px; + font-size: 13px; + max-width: 325px; + margin-right: $gap-small; margin-bottom: $gap-large; } @@ -40,4 +78,15 @@ color: #40464d; } } + + .woocommerce-task-payment-wcpay__benefit { + svg { + margin: 0 auto; + } + max-width: 170px; + text-align: center; + font-size: 15px; + line-height: 24px; + letter-spacing: normal; + } } diff --git a/packages/js/onboarding/src/images/wcpay-benefit-1.js b/packages/js/onboarding/src/images/wcpay-benefit-1.js new file mode 100644 index 00000000000..f2e7ee9497b --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-1.js @@ -0,0 +1,134 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 141, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-2.js b/packages/js/onboarding/src/images/wcpay-benefit-2.js new file mode 100644 index 00000000000..3bcd83d6d99 --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-2.js @@ -0,0 +1,102 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 140, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-3.js b/packages/js/onboarding/src/images/wcpay-benefit-3.js new file mode 100644 index 00000000000..9d29102f3e8 --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-benefit-3.js @@ -0,0 +1,188 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 157, height = 148, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/wcpay-hero-image.js b/packages/js/onboarding/src/images/wcpay-hero-image.js new file mode 100644 index 00000000000..2d70f3d126d --- /dev/null +++ b/packages/js/onboarding/src/images/wcpay-hero-image.js @@ -0,0 +1,140 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default ( { width = 293, height = 275, ...props } ) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js index ee4ad87a861..786ee03c58b 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js @@ -3,15 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import interpolateComponents from '@automattic/interpolate-components'; -import { Link, Pill } from '@woocommerce/components'; +import { Link } from '@woocommerce/components'; import { recordEvent } from '@woocommerce/tracks'; -import { Text } from '@woocommerce/experimental'; import { WCPayCard, - WCPayCardHeader, WCPayCardFooter, WCPayCardBody, - SetupRequired, + WCPayBenefitCard, } from '@woocommerce/onboarding'; import { useDispatch } from '@wordpress/data'; @@ -41,7 +39,6 @@ const TosPrompt = () => export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { const { - description, id, needsSetup, installed, @@ -62,27 +59,14 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { } return ( - - - { installed && needsSetup ? ( - - ) : ( - { __( 'Recommended', 'woocommerce' ) } - ) } - - - { - recordEvent( 'tasklist_payment_learn_more' ); - } } - /> - - - <> - - - + <> + + { + recordEvent( 'tasklist_payment_learn_more' ); + } } + > { isRecommended={ true } isInstalled={ isInstalled } hasPlugins={ true } - setupButtonText={ __( 'Get started', 'woocommerce' ) } + setupButtonText={ + installed && needsSetup + ? __( 'Finish setup', 'woocommerce' ) + : __( 'Install', 'woocommerce' ) + } onSetupCallback={ onSetupCallback } /> - - - + + + + + ); }; 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 8e408b15e20..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,7 +22,6 @@ margin: 0; } - .components-card__footer { a.components-button { .gridicon { From 1f8988675fc48fc3d5f9076996efd57d2b36657d Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 13:43:08 +0800 Subject: [PATCH 08/25] Some adjustment to card footer --- .../js/onboarding/src/components/WCPayAcceptedMethods.js | 4 ++-- .../js/onboarding/src/components/WCPayCard/WCPayCard.scss | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js index f104c24e4e9..7fc42131c2d 100644 --- a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js +++ b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js @@ -21,8 +21,8 @@ import UnionPay from '../images/cards/unionpay.js'; export const WCPayAcceptedMethods = () => ( <> - - { __( 'Accepted payment methods', 'woocommerce' ) } + + { __( 'Accepted payment methods include:', 'woocommerce' ) }
diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index 21b1407c54c..fd950b5b4f7 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -60,6 +60,14 @@ margin-top: $gap; margin-left: 0; } + + &, h3 { + color: #757575; + } + + svg { + height: 24px; + } } .components-card__body { From 3050cacc39d941544055350a0a50b58b7be99586 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 13:51:26 +0800 Subject: [PATCH 09/25] Minor adjustments --- packages/js/onboarding/src/images/wcpay-benefit-3.js | 2 +- .../client/tasks/fills/PaymentGatewaySuggestions/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/js/onboarding/src/images/wcpay-benefit-3.js b/packages/js/onboarding/src/images/wcpay-benefit-3.js index 9d29102f3e8..80e16205927 100644 --- a/packages/js/onboarding/src/images/wcpay-benefit-3.js +++ b/packages/js/onboarding/src/images/wcpay-benefit-3.js @@ -7,7 +7,7 @@ export default ( { width = 157, height = 148, ...props } ) => ( { heading={ __( 'Other payment methods', 'woocommerce' ) } onToggle={ trackToggle } > - { enabledSection } { additionalSection } + { enabledSection } { offlineSection } ) : ( <> - { enabledSection } { additionalSection } + { enabledSection } { offlineSection } ) } From ffdf1e6c02381c0446a5878a720da88d0723f07e Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 16:25:08 +0800 Subject: [PATCH 10/25] More adjustments --- .../src/components/WCPayCard/WCPayCard.js | 4 ++-- .../onboarding/src/images/wcpay-benefit-1.js | 2 +- .../onboarding/src/images/wcpay-benefit-2.js | 2 +- .../onboarding/src/images/wcpay-benefit-3.js | 2 +- .../components/WCPay/Suggestion.js | 19 ------------------- 5 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index 6f4fde45af7..458fd0669c9 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -49,7 +49,7 @@ export const WCPayCardBody = ( { target="_blank" type="external" rel="noreferrer" - href="https://woocommerce.com/payments/?utm_medium=product" + href="https://wordpress.com/tos/" onClick={ onLinkClick } > { __( 'Terms of Service', 'woocommerce' ) } @@ -60,7 +60,7 @@ export const WCPayCardBody = ( { target="_blank" type="external" rel="noreferrer" - href="https://woocommerce.com/payments/?utm_medium=product" + href="https://automattic.com/privacy/" onClick={ onLinkClick } > { __( 'Privacy Policy', 'woocommerce' ) } diff --git a/packages/js/onboarding/src/images/wcpay-benefit-1.js b/packages/js/onboarding/src/images/wcpay-benefit-1.js index f2e7ee9497b..e0dc078c0f7 100644 --- a/packages/js/onboarding/src/images/wcpay-benefit-1.js +++ b/packages/js/onboarding/src/images/wcpay-benefit-1.js @@ -7,7 +7,7 @@ export default ( { width = 141, height = 148, ...props } ) => ( ( ( - interpolateComponents( { - mixedString: __( - 'Upon clicking "Get started", you agree to the {{link}}Terms of service{{/link}}. Next we’ll ask you to share a few details about your business to create your account.', - 'woocommerce' - ), - components: { - link: ( - - ), - }, - } ); - export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { const { id, From 16c28e3599b24068dae85868ae465af14ce750be Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 16:41:27 +0800 Subject: [PATCH 11/25] Fix css --- .../src/components/WCPayCard/WCPayCard.js | 5 +- .../src/components/WCPayCard/WCPayCard.scss | 187 +++++++++--------- 2 files changed, 101 insertions(+), 91 deletions(-) diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index 458fd0669c9..a865588b22f 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -95,7 +95,10 @@ export const WCPayCard = ( { children } ) => { export const WCPayBenefitCard = () => { return ( - +
diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index fd950b5b4f7..9d375486176 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -1,100 +1,107 @@ -.woocommerce-task-payments .woocommerce-task-payment-wcpay { +.woocommerce-task-payments { + .woocommerce-task-payment-wcpay { + .vstack, + .hstack { + display: flex; + &.content-center { + justify-content: center; + } - .vstack, .hstack { - display: flex; - &.content-center { - justify-content: center; + &.content-around { + justify-content: space-around; + } + + &.flex-1 { + flex: 1; + } } - &.content-around { - justify-content: space-around; + .vstack { + flex-direction: column; } - &.flex-1 { - flex: 1; + .hstack { + flex-direction: row; + } + + .wcpay-hero-image { + margin-right: -32px; + margin-bottom: -28px; + } + + .woocommerce-task-payment-wcpay__heading { + letter-spacing: 0.6px; + max-width: 250px; + margin-right: $gap-small; + margin-bottom: $gap; + } + + .woocommerce-task-payment-wcpay__description { + font-size: 13px; + max-width: 325px; + margin-right: $gap-small; + margin-bottom: $gap-large; + } + + .components-card__header { + margin-bottom: $gap-small; + justify-content: flex-start; + padding: 25px; + + .woocommerce-pill { + margin-left: $gap-small; + } + } + + .components-card__footer { + flex-direction: column; + align-items: flex-start; + + .components-button { + margin-top: $gap; + margin-left: 0; + } + + &, + h3 { + color: #757575; + } + + svg { + height: 24px; + } + } + + .components-card__body { + h2 { + margin: 0 0 20px 0; + } + } + + .woocommerce-task-payment-wcpay__accepted { + display: flex; + margin-top: $gap-small; + flex-wrap: wrap; + gap: $gap-small; + + h3 { + color: #40464d; + } + } + + .woocommerce-task-payment-wcpay__benefit { + svg { + margin: 0 auto; + } + max-width: 170px; + text-align: center; + font-size: 15px; + line-height: 24px; + letter-spacing: normal; } } - .vstack { - flex-direction: column; - } - - .hstack { - flex-direction: row; - } - - .wcpay-hero-image { - margin-right: -32px; - margin-bottom: -28px; - } - - .woocommerce-task-payment-wcpay__heading { - letter-spacing: 0.6px; - max-width: 250px; - margin-right: $gap-small; - margin-bottom: $gap; - } - - .woocommerce-task-payment-wcpay__description { - font-size: 13px; - max-width: 325px; - margin-right: $gap-small; - margin-bottom: $gap-large; - } - - .components-card__header { - margin-bottom: $gap-small; - justify-content: flex-start; - padding: 25px; - - .woocommerce-pill { - margin-left: $gap-small; - } - } - - .components-card__footer { - flex-direction: column; - align-items: flex-start; - - .components-button { - margin-top: $gap; - margin-left: 0; - } - - &, h3 { - color: #757575; - } - - svg { - height: 24px; - } - } - - .components-card__body { - h2 { - margin: 0 0 20px 0; - } - } - - .woocommerce-task-payment-wcpay__accepted { - display: flex; - margin-top: $gap-small; - flex-wrap: wrap; - gap: $gap-small; - - h3 { - color: #40464d; - } - } - - .woocommerce-task-payment-wcpay__benefit { - svg { - margin: 0 auto; - } - max-width: 170px; - text-align: center; - font-size: 15px; - line-height: 24px; - letter-spacing: normal; + .woocommerce-task-payment-wcpay__benefits-card { + margin-bottom: 0; } } From f50379d8a2c5a493c6b3df1d5e09de6a8aa269d3 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 19:15:08 +0800 Subject: [PATCH 12/25] Update all onboarding card images --- .../src/components/WCPayAcceptedMethods.js | 15 +- .../src/components/WCPayCard/WCPayCard.scss | 17 +- .../js/onboarding/src/images/cards/amex.js | 23 +- .../onboarding/src/images/cards/applepay.js | 21 +- packages/js/onboarding/src/images/cards/cb.js | 33 ++- .../js/onboarding/src/images/cards/diners.js | 251 ++---------------- .../onboarding/src/images/cards/discover.js | 148 ++++++++--- .../js/onboarding/src/images/cards/giropay.js | 49 ++++ .../onboarding/src/images/cards/googlepay.js | 47 ++-- .../js/onboarding/src/images/cards/jcb.js | 72 +++-- .../onboarding/src/images/cards/mastercard.js | 35 ++- .../js/onboarding/src/images/cards/sofort.js | 35 +++ .../onboarding/src/images/cards/unionpay.js | 103 +------ .../js/onboarding/src/images/cards/visa.js | 35 ++- 14 files changed, 413 insertions(+), 471 deletions(-) create mode 100644 packages/js/onboarding/src/images/cards/giropay.js create mode 100644 packages/js/onboarding/src/images/cards/sofort.js diff --git a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js index 7fc42131c2d..a79a1031c23 100644 --- a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js +++ b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js @@ -10,14 +10,16 @@ import { __ } from '@wordpress/i18n'; */ import Visa from '../images/cards/visa.js'; import MasterCard from '../images/cards/mastercard.js'; -import Maestro from '../images/cards/maestro.js'; import Amex from '../images/cards/amex.js'; import ApplePay from '../images/cards/applepay.js'; +import GooglePay from '../images/cards/googlepay.js'; import CB from '../images/cards/cb.js'; import DinersClub from '../images/cards/diners.js'; import Discover from '../images/cards/discover.js'; import JCB from '../images/cards/jcb.js'; import UnionPay from '../images/cards/unionpay.js'; +import GiroPay from '../images/cards/giropay.js'; +import Sofort from '../images/cards/sofort.js'; export const WCPayAcceptedMethods = () => ( <> @@ -28,14 +30,19 @@ export const WCPayAcceptedMethods = () => (
- - + + + + - + +
+ & more. +
); diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index 9d375486176..57a2ee5305a 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -79,14 +79,17 @@ } .woocommerce-task-payment-wcpay__accepted { - display: flex; - margin-top: $gap-small; - flex-wrap: wrap; - gap: $gap-small; - h3 { color: #40464d; } + + display: flex; + flex-wrap: wrap; + margin-top: $gap-small; + margin-left: 0; + gap: 8px; + justify-content: flex-start; + align-items: flex-end; } .woocommerce-task-payment-wcpay__benefit { @@ -99,6 +102,10 @@ line-height: 24px; letter-spacing: normal; } + + .woocommerce-task-payment-wcpay__accepted__and-more { + white-space: nowrap; + } } .woocommerce-task-payment-wcpay__benefits-card { diff --git a/packages/js/onboarding/src/images/cards/amex.js b/packages/js/onboarding/src/images/cards/amex.js index daa085352db..49facfe9d6e 100644 --- a/packages/js/onboarding/src/images/cards/amex.js +++ b/packages/js/onboarding/src/images/cards/amex.js @@ -5,26 +5,25 @@ import { createElement } from '@wordpress/element'; export default () => ( - + ); diff --git a/packages/js/onboarding/src/images/cards/applepay.js b/packages/js/onboarding/src/images/cards/applepay.js index 74febe62299..edb77a8a8e8 100644 --- a/packages/js/onboarding/src/images/cards/applepay.js +++ b/packages/js/onboarding/src/images/cards/applepay.js @@ -5,26 +5,25 @@ import { createElement } from '@wordpress/element'; export default () => ( - + ); diff --git a/packages/js/onboarding/src/images/cards/cb.js b/packages/js/onboarding/src/images/cards/cb.js index da48c9a5b13..b3dcb6cadcd 100644 --- a/packages/js/onboarding/src/images/cards/cb.js +++ b/packages/js/onboarding/src/images/cards/cb.js @@ -5,34 +5,33 @@ import { createElement } from '@wordpress/element'; export default () => ( - + diff --git a/packages/js/onboarding/src/images/cards/diners.js b/packages/js/onboarding/src/images/cards/diners.js index 039bad8b238..5630431f0eb 100644 --- a/packages/js/onboarding/src/images/cards/diners.js +++ b/packages/js/onboarding/src/images/cards/diners.js @@ -5,254 +5,37 @@ import { createElement } from '@wordpress/element'; export default () => ( - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); diff --git a/packages/js/onboarding/src/images/cards/discover.js b/packages/js/onboarding/src/images/cards/discover.js index 51479f917aa..a9e764ba46c 100644 --- a/packages/js/onboarding/src/images/cards/discover.js +++ b/packages/js/onboarding/src/images/cards/discover.js @@ -5,46 +5,134 @@ import { createElement } from '@wordpress/element'; export default () => ( - + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + ); diff --git a/packages/js/onboarding/src/images/cards/giropay.js b/packages/js/onboarding/src/images/cards/giropay.js new file mode 100644 index 00000000000..6979d1911c5 --- /dev/null +++ b/packages/js/onboarding/src/images/cards/giropay.js @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default () => ( + + + + + + + + + +); diff --git a/packages/js/onboarding/src/images/cards/googlepay.js b/packages/js/onboarding/src/images/cards/googlepay.js index 329ec0e3641..d7e00b3b269 100644 --- a/packages/js/onboarding/src/images/cards/googlepay.js +++ b/packages/js/onboarding/src/images/cards/googlepay.js @@ -5,48 +5,61 @@ import { createElement } from '@wordpress/element'; export default () => ( - + ); diff --git a/packages/js/onboarding/src/images/cards/jcb.js b/packages/js/onboarding/src/images/cards/jcb.js index ee332408bba..36c6569289e 100644 --- a/packages/js/onboarding/src/images/cards/jcb.js +++ b/packages/js/onboarding/src/images/cards/jcb.js @@ -5,38 +5,78 @@ import { createElement } from '@wordpress/element'; export default () => ( - + + + + + + + + + + + + + + + + ); diff --git a/packages/js/onboarding/src/images/cards/mastercard.js b/packages/js/onboarding/src/images/cards/mastercard.js index 8fbde439e41..d6755de398d 100644 --- a/packages/js/onboarding/src/images/cards/mastercard.js +++ b/packages/js/onboarding/src/images/cards/mastercard.js @@ -5,38 +5,37 @@ import { createElement } from '@wordpress/element'; export default () => ( - ); diff --git a/packages/js/onboarding/src/images/cards/sofort.js b/packages/js/onboarding/src/images/cards/sofort.js new file mode 100644 index 00000000000..9d651368c38 --- /dev/null +++ b/packages/js/onboarding/src/images/cards/sofort.js @@ -0,0 +1,35 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +export default () => ( + + + + + + + +); diff --git a/packages/js/onboarding/src/images/cards/unionpay.js b/packages/js/onboarding/src/images/cards/unionpay.js index 0be12014c7b..457b182fbbb 100644 --- a/packages/js/onboarding/src/images/cards/unionpay.js +++ b/packages/js/onboarding/src/images/cards/unionpay.js @@ -5,110 +5,35 @@ import { createElement } from '@wordpress/element'; export default () => ( - - - - - - - - - - ); diff --git a/packages/js/onboarding/src/images/cards/visa.js b/packages/js/onboarding/src/images/cards/visa.js index cd81d8a8fa3..dbae529ccd4 100644 --- a/packages/js/onboarding/src/images/cards/visa.js +++ b/packages/js/onboarding/src/images/cards/visa.js @@ -5,40 +5,39 @@ import { createElement } from '@wordpress/element'; export default () => ( - + ); From f82b5d78f1669e2ec50f0567c67bbdc7a88db55c Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 6 Apr 2022 21:31:50 +0800 Subject: [PATCH 13/25] Fix css and test --- .../src/components/WCPayCard/WCPayCard.js | 27 +++++++++---------- .../src/components/WCPayCard/WCPayCard.scss | 18 ++++++++++--- .../PaymentGatewaySuggestions/test/index.js | 6 +++-- 3 files changed, 31 insertions(+), 20 deletions(-) diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index a865588b22f..ca4f5cf634b 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -17,22 +17,19 @@ import WCPayBenefit1 from '../../images/wcpay-benefit-1'; import WCPayBenefit2 from '../../images/wcpay-benefit-2'; import WCPayBenefit3 from '../../images/wcpay-benefit-3'; -export const WCPayCardBody = ( { - heading, - children, - onLinkClick = () => {}, -} ) => ( +export const WCPayCardBody = ( { children, onLinkClick = () => {} } ) => (
- { heading && ( - - { heading } - - ) } + + { __( + 'Accept payments and manage your business.', + 'woocommerce' + ) } +
{ children }
-
- +
+
diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index 57a2ee5305a..65d81ee1a88 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -3,6 +3,7 @@ .vstack, .hstack { display: flex; + &.content-center { justify-content: center; } @@ -24,9 +25,19 @@ flex-direction: row; } - .wcpay-hero-image { - margin-right: -32px; - margin-bottom: -28px; + .woocommerce-task-payment-wcpay__hero-image-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + + svg { + margin-right: -32px; + margin-bottom: -24px; + } + + @media screen and (max-width: 600px) { + max-width: 200px; + } } .woocommerce-task-payment-wcpay__heading { @@ -96,6 +107,7 @@ svg { margin: 0 auto; } + max-width: 170px; text-align: center; font-size: 15px; 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 7df91e7a82a..3fdf6c29efd 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -118,8 +118,10 @@ describe( 'PaymentGatewaySuggestions', () => { expect( paymentTitles ).toEqual( [] ); expect( - container.getElementsByTagName( 'title' )[ 0 ].textContent - ).toBe( 'WooCommerce Payments' ); + container.getElementsByClassName( + 'woocommerce-task-payment-wcpay' + )[ 0 ].textContent + ).toContain( 'By using WooCommerce Payments' ); } ); test( 'should render all payment gateways if no WCPay', () => { From 4c4edc1c03ae1f8e7dc3d59945c00821ca2adfd8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Thu, 7 Apr 2022 11:23:04 +0800 Subject: [PATCH 14/25] Fix css --- .../js/onboarding/src/components/WCPayAcceptedMethods.js | 8 ++++---- .../js/onboarding/src/components/WCPayCard/WCPayCard.scss | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js index a79a1031c23..cea52fdb3d9 100644 --- a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js +++ b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js @@ -22,12 +22,12 @@ import GiroPay from '../images/cards/giropay.js'; import Sofort from '../images/cards/sofort.js'; export const WCPayAcceptedMethods = () => ( - <> +
{ __( 'Accepted payment methods include:', 'woocommerce' ) } -
+
@@ -40,9 +40,9 @@ export const WCPayAcceptedMethods = () => ( -
+
& more.
- +
); diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index 65d81ee1a88..6e50f1f3edd 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -89,7 +89,7 @@ } } - .woocommerce-task-payment-wcpay__accepted { + .woocommerce-task-payment-wcpay__accepted-icons { h3 { color: #40464d; } @@ -115,7 +115,7 @@ letter-spacing: normal; } - .woocommerce-task-payment-wcpay__accepted__and-more { + .woocommerce-task-payment-wcpay__accepted-and-more { white-space: nowrap; } } From 90c61e4bada3bb7d2e3306630619afe8e8368fbe Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 11 Apr 2022 11:51:55 +0800 Subject: [PATCH 15/25] Revert WCPay suggestion UI changes --- .../src/components/WCPayAcceptedMethods.js | 25 +- .../src/components/WCPayCard/WCPayCard.js | 147 +++------- .../src/components/WCPayCard/WCPayCard.scss | 155 +++-------- .../js/onboarding/src/images/cards/amex.js | 23 +- .../onboarding/src/images/cards/applepay.js | 21 +- packages/js/onboarding/src/images/cards/cb.js | 33 +-- .../js/onboarding/src/images/cards/diners.js | 251 ++++++++++++++++-- .../onboarding/src/images/cards/discover.js | 148 +++-------- .../js/onboarding/src/images/cards/giropay.js | 49 ---- .../onboarding/src/images/cards/googlepay.js | 47 ++-- .../js/onboarding/src/images/cards/jcb.js | 72 ++--- .../onboarding/src/images/cards/mastercard.js | 35 +-- .../js/onboarding/src/images/cards/sofort.js | 35 --- .../onboarding/src/images/cards/unionpay.js | 103 ++++++- .../js/onboarding/src/images/cards/visa.js | 35 +-- .../onboarding/src/images/wcpay-benefit-1.js | 134 ---------- .../onboarding/src/images/wcpay-benefit-2.js | 102 ------- .../onboarding/src/images/wcpay-benefit-3.js | 188 ------------- .../onboarding/src/images/wcpay-hero-image.js | 140 ---------- .../components/WCPay/Suggestion.js | 67 +++-- .../PaymentGatewaySuggestions/test/index.js | 6 +- 21 files changed, 599 insertions(+), 1217 deletions(-) delete mode 100644 packages/js/onboarding/src/images/cards/giropay.js delete mode 100644 packages/js/onboarding/src/images/cards/sofort.js delete mode 100644 packages/js/onboarding/src/images/wcpay-benefit-1.js delete mode 100644 packages/js/onboarding/src/images/wcpay-benefit-2.js delete mode 100644 packages/js/onboarding/src/images/wcpay-benefit-3.js delete mode 100644 packages/js/onboarding/src/images/wcpay-hero-image.js diff --git a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js index cea52fdb3d9..f104c24e4e9 100644 --- a/packages/js/onboarding/src/components/WCPayAcceptedMethods.js +++ b/packages/js/onboarding/src/components/WCPayAcceptedMethods.js @@ -10,39 +10,32 @@ import { __ } from '@wordpress/i18n'; */ import Visa from '../images/cards/visa.js'; import MasterCard from '../images/cards/mastercard.js'; +import Maestro from '../images/cards/maestro.js'; import Amex from '../images/cards/amex.js'; import ApplePay from '../images/cards/applepay.js'; -import GooglePay from '../images/cards/googlepay.js'; import CB from '../images/cards/cb.js'; import DinersClub from '../images/cards/diners.js'; import Discover from '../images/cards/discover.js'; import JCB from '../images/cards/jcb.js'; import UnionPay from '../images/cards/unionpay.js'; -import GiroPay from '../images/cards/giropay.js'; -import Sofort from '../images/cards/sofort.js'; export const WCPayAcceptedMethods = () => ( -
- - { __( 'Accepted payment methods include:', 'woocommerce' ) } + <> + + { __( 'Accepted payment methods', 'woocommerce' ) } -
+
+ - - - - + - -
- & more. -
+
-
+ ); diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js index ca4f5cf634b..88a79a7ad1c 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.js @@ -1,126 +1,63 @@ /** * External dependencies */ -import { Card, CardBody, CardFooter } from '@wordpress/components'; +import { Card, CardBody, CardHeader, CardFooter } from '@wordpress/components'; import { Text } from '@woocommerce/experimental'; import { createElement } from '@wordpress/element'; import { Link } from '@woocommerce/components'; -import interpolateComponents from '@automattic/interpolate-components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { WCPayAcceptedMethods } from '../WCPayAcceptedMethods'; -import WCPayHeroImage from '../../images/wcpay-hero-image'; -import WCPayBenefit1 from '../../images/wcpay-benefit-1'; -import WCPayBenefit2 from '../../images/wcpay-benefit-2'; -import WCPayBenefit3 from '../../images/wcpay-benefit-3'; +import WCPayLogo from '../../images/wcpay-logo'; -export const WCPayCardBody = ( { children, onLinkClick = () => {} } ) => ( +export const WCPayCardHeader = ( { + logoWidth = 196, + logoHeight = 41, + children, +} ) => ( + + + { children } + +); + +export const WCPayCardBody = ( { + description, + heading, + onLinkClick = () => {}, +} ) => ( -
-
- - { __( - 'Accept payments and manage your business.', - 'woocommerce' - ) } - - - { interpolateComponents( { - mixedString: __( - 'By using WooCommerce Payments you agree to be bound by our {{tosLink /}} and acknowledge that you have read our {{privacyLink /}}', - 'woocommerce' - ), - components: { - tosLink: ( - - { __( 'Terms of Service', 'woocommerce' ) } - - ), - privacyLink: ( - - { __( 'Privacy Policy', 'woocommerce' ) } - - ), - }, - } ) } -
- -
{ children }
-
-
- -
-
+ { heading && { heading } } + + + { description } +
+ + { __( 'Learn more', 'woocommerce' ) } + + + + ); -export const WCPayCardFooter = () => ( - - - +export const WCPayCardFooter = ( { children } ) => ( + { children } ); export const WCPayCard = ( { children } ) => { - return ( - - { children } - - ); -}; - -export const WCPayBenefitCard = () => { - return ( - - -
-
- - { __( - 'Offer your customers their preferred way to pay including debit and credit card payments, Apple Pay, Sofort, SEPA, iDeal and many more.', - 'woocommerce' - ) } -
-
- - { __( - 'Sell to international markets and accept more than 135 currencies with local payment methods.', - 'woocommerce' - ) } -
-
- - { __( - 'Earn and manage recurring revenue and get automatic deposits into your nominated bank account.', - 'woocommerce' - ) } -
-
- - - ); + return { children }; }; diff --git a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss index 6e50f1f3edd..c21e835ff68 100644 --- a/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss +++ b/packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss @@ -1,126 +1,43 @@ -.woocommerce-task-payments { - .woocommerce-task-payment-wcpay { - .vstack, - .hstack { - display: flex; +.woocommerce-task-payments .woocommerce-task-payment-wcpay { + .woocommerce-task-payment-wcpay__description { + font-size: 16px; + margin-bottom: $gap-large; + } - &.content-center { - justify-content: center; - } + .components-card__header { + margin-bottom: $gap-small; + justify-content: flex-start; + padding: 25px; - &.content-around { - justify-content: space-around; - } - - &.flex-1 { - flex: 1; - } - } - - .vstack { - flex-direction: column; - } - - .hstack { - flex-direction: row; - } - - .woocommerce-task-payment-wcpay__hero-image-container { - display: flex; - flex-direction: column; - justify-content: flex-end; - - svg { - margin-right: -32px; - margin-bottom: -24px; - } - - @media screen and (max-width: 600px) { - max-width: 200px; - } - } - - .woocommerce-task-payment-wcpay__heading { - letter-spacing: 0.6px; - max-width: 250px; - margin-right: $gap-small; - margin-bottom: $gap; - } - - .woocommerce-task-payment-wcpay__description { - font-size: 13px; - max-width: 325px; - margin-right: $gap-small; - margin-bottom: $gap-large; - } - - .components-card__header { - margin-bottom: $gap-small; - justify-content: flex-start; - padding: 25px; - - .woocommerce-pill { - margin-left: $gap-small; - } - } - - .components-card__footer { - flex-direction: column; - align-items: flex-start; - - .components-button { - margin-top: $gap; - margin-left: 0; - } - - &, - h3 { - color: #757575; - } - - svg { - height: 24px; - } - } - - .components-card__body { - h2 { - margin: 0 0 20px 0; - } - } - - .woocommerce-task-payment-wcpay__accepted-icons { - h3 { - color: #40464d; - } - - display: flex; - flex-wrap: wrap; - margin-top: $gap-small; - margin-left: 0; - gap: 8px; - justify-content: flex-start; - align-items: flex-end; - } - - .woocommerce-task-payment-wcpay__benefit { - svg { - margin: 0 auto; - } - - max-width: 170px; - text-align: center; - font-size: 15px; - line-height: 24px; - letter-spacing: normal; - } - - .woocommerce-task-payment-wcpay__accepted-and-more { - white-space: nowrap; + .woocommerce-pill { + margin-left: $gap-small; } } - .woocommerce-task-payment-wcpay__benefits-card { - margin-bottom: 0; + .components-card__footer { + flex-direction: column; + align-items: flex-start; + + .components-button { + margin-top: $gap; + margin-left: 0; + } + } + + .components-card__body { + h2 { + margin: 0 0 20px 0; + } + } + + .woocommerce-task-payment-wcpay__accepted { + display: flex; + margin-top: $gap-small; + flex-wrap: wrap; + gap: $gap-small; + + h3 { + color: #40464d; + } } } diff --git a/packages/js/onboarding/src/images/cards/amex.js b/packages/js/onboarding/src/images/cards/amex.js index 49facfe9d6e..daa085352db 100644 --- a/packages/js/onboarding/src/images/cards/amex.js +++ b/packages/js/onboarding/src/images/cards/amex.js @@ -5,25 +5,26 @@ import { createElement } from '@wordpress/element'; export default () => ( - - ); diff --git a/packages/js/onboarding/src/images/cards/applepay.js b/packages/js/onboarding/src/images/cards/applepay.js index edb77a8a8e8..74febe62299 100644 --- a/packages/js/onboarding/src/images/cards/applepay.js +++ b/packages/js/onboarding/src/images/cards/applepay.js @@ -5,25 +5,26 @@ import { createElement } from '@wordpress/element'; export default () => ( - - ); diff --git a/packages/js/onboarding/src/images/cards/cb.js b/packages/js/onboarding/src/images/cards/cb.js index b3dcb6cadcd..da48c9a5b13 100644 --- a/packages/js/onboarding/src/images/cards/cb.js +++ b/packages/js/onboarding/src/images/cards/cb.js @@ -5,33 +5,34 @@ import { createElement } from '@wordpress/element'; export default () => ( - - diff --git a/packages/js/onboarding/src/images/cards/diners.js b/packages/js/onboarding/src/images/cards/diners.js index 5630431f0eb..039bad8b238 100644 --- a/packages/js/onboarding/src/images/cards/diners.js +++ b/packages/js/onboarding/src/images/cards/diners.js @@ -5,37 +5,254 @@ import { createElement } from '@wordpress/element'; export default () => ( - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/packages/js/onboarding/src/images/cards/discover.js b/packages/js/onboarding/src/images/cards/discover.js index a9e764ba46c..51479f917aa 100644 --- a/packages/js/onboarding/src/images/cards/discover.js +++ b/packages/js/onboarding/src/images/cards/discover.js @@ -5,134 +5,46 @@ import { createElement } from '@wordpress/element'; export default () => ( - - - - - - - - - - - - - - - - - - - - - + + - - - - - - + + + - - - - - - - - - ); diff --git a/packages/js/onboarding/src/images/cards/giropay.js b/packages/js/onboarding/src/images/cards/giropay.js deleted file mode 100644 index 6979d1911c5..00000000000 --- a/packages/js/onboarding/src/images/cards/giropay.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default () => ( - - - - - - - - - -); diff --git a/packages/js/onboarding/src/images/cards/googlepay.js b/packages/js/onboarding/src/images/cards/googlepay.js index d7e00b3b269..329ec0e3641 100644 --- a/packages/js/onboarding/src/images/cards/googlepay.js +++ b/packages/js/onboarding/src/images/cards/googlepay.js @@ -5,61 +5,48 @@ import { createElement } from '@wordpress/element'; export default () => ( - - ); diff --git a/packages/js/onboarding/src/images/cards/jcb.js b/packages/js/onboarding/src/images/cards/jcb.js index 36c6569289e..ee332408bba 100644 --- a/packages/js/onboarding/src/images/cards/jcb.js +++ b/packages/js/onboarding/src/images/cards/jcb.js @@ -5,78 +5,38 @@ import { createElement } from '@wordpress/element'; export default () => ( - - - - - - - - - - - - - - - - - ); diff --git a/packages/js/onboarding/src/images/cards/mastercard.js b/packages/js/onboarding/src/images/cards/mastercard.js index d6755de398d..8fbde439e41 100644 --- a/packages/js/onboarding/src/images/cards/mastercard.js +++ b/packages/js/onboarding/src/images/cards/mastercard.js @@ -5,37 +5,38 @@ import { createElement } from '@wordpress/element'; export default () => ( - ); diff --git a/packages/js/onboarding/src/images/cards/sofort.js b/packages/js/onboarding/src/images/cards/sofort.js deleted file mode 100644 index 9d651368c38..00000000000 --- a/packages/js/onboarding/src/images/cards/sofort.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default () => ( - - - - - - - -); diff --git a/packages/js/onboarding/src/images/cards/unionpay.js b/packages/js/onboarding/src/images/cards/unionpay.js index 457b182fbbb..0be12014c7b 100644 --- a/packages/js/onboarding/src/images/cards/unionpay.js +++ b/packages/js/onboarding/src/images/cards/unionpay.js @@ -5,35 +5,110 @@ import { createElement } from '@wordpress/element'; export default () => ( + + + + + + + + + + ); diff --git a/packages/js/onboarding/src/images/cards/visa.js b/packages/js/onboarding/src/images/cards/visa.js index dbae529ccd4..cd81d8a8fa3 100644 --- a/packages/js/onboarding/src/images/cards/visa.js +++ b/packages/js/onboarding/src/images/cards/visa.js @@ -5,39 +5,40 @@ import { createElement } from '@wordpress/element'; export default () => ( - - ); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-1.js b/packages/js/onboarding/src/images/wcpay-benefit-1.js deleted file mode 100644 index e0dc078c0f7..00000000000 --- a/packages/js/onboarding/src/images/wcpay-benefit-1.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default ( { width = 141, height = 148, ...props } ) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-2.js b/packages/js/onboarding/src/images/wcpay-benefit-2.js deleted file mode 100644 index d9ffafc23cd..00000000000 --- a/packages/js/onboarding/src/images/wcpay-benefit-2.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default ( { width = 140, height = 148, ...props } ) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/js/onboarding/src/images/wcpay-benefit-3.js b/packages/js/onboarding/src/images/wcpay-benefit-3.js deleted file mode 100644 index 9d29102f3e8..00000000000 --- a/packages/js/onboarding/src/images/wcpay-benefit-3.js +++ /dev/null @@ -1,188 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default ( { width = 157, height = 148, ...props } ) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/packages/js/onboarding/src/images/wcpay-hero-image.js b/packages/js/onboarding/src/images/wcpay-hero-image.js deleted file mode 100644 index 2d70f3d126d..00000000000 --- a/packages/js/onboarding/src/images/wcpay-hero-image.js +++ /dev/null @@ -1,140 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -export default ( { width = 293, height = 275, ...props } ) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js index 40da21f5430..ee4ad87a861 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/Suggestion.js @@ -2,12 +2,16 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; +import interpolateComponents from '@automattic/interpolate-components'; +import { Link, Pill } from '@woocommerce/components'; import { recordEvent } from '@woocommerce/tracks'; +import { Text } from '@woocommerce/experimental'; import { WCPayCard, + WCPayCardHeader, WCPayCardFooter, WCPayCardBody, - WCPayBenefitCard, + SetupRequired, } from '@woocommerce/onboarding'; import { useDispatch } from '@wordpress/data'; @@ -18,8 +22,26 @@ import { useDispatch } from '@wordpress/data'; import { Action } from '../Action'; import { connectWcpay } from './utils'; +const TosPrompt = () => + interpolateComponents( { + mixedString: __( + 'Upon clicking "Get started", you agree to the {{link}}Terms of service{{/link}}. Next we’ll ask you to share a few details about your business to create your account.', + 'woocommerce' + ), + components: { + link: ( + + ), + }, + } ); + export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { const { + description, id, needsSetup, installed, @@ -40,14 +62,27 @@ export const Suggestion = ( { paymentGateway, onSetupCallback = null } ) => { } return ( - <> - - { - recordEvent( 'tasklist_payment_learn_more' ); - } } - > + + + { installed && needsSetup ? ( + + ) : ( + { __( 'Recommended', 'woocommerce' ) } + ) } + + + { + recordEvent( 'tasklist_payment_learn_more' ); + } } + /> + + + <> + + + { isRecommended={ true } isInstalled={ isInstalled } hasPlugins={ true } - setupButtonText={ - installed && needsSetup - ? __( 'Finish setup', 'woocommerce' ) - : __( 'Install', 'woocommerce' ) - } + setupButtonText={ __( 'Get started', 'woocommerce' ) } onSetupCallback={ onSetupCallback } /> - - - - - + + + ); }; 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 3fdf6c29efd..7df91e7a82a 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -118,10 +118,8 @@ describe( 'PaymentGatewaySuggestions', () => { expect( paymentTitles ).toEqual( [] ); expect( - container.getElementsByClassName( - 'woocommerce-task-payment-wcpay' - )[ 0 ].textContent - ).toContain( 'By using WooCommerce Payments' ); + container.getElementsByTagName( 'title' )[ 0 ].textContent + ).toBe( 'WooCommerce Payments' ); } ); test( 'should render all payment gateways if no WCPay', () => { From c8b6bd91e037f33a0ee81054f3d4b06af0975400 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 11 Apr 2022 14:24:08 +0800 Subject: [PATCH 16/25] Update payment gateway logos --- .../components/List/List.scss | 5 ++-- .../fills/PaymentGatewaySuggestions/index.js | 4 +-- .../images/payment_methods/72x72/affirm.png | Bin 0 -> 972 bytes .../images/payment_methods/72x72/afterpay.png | Bin 0 -> 674 bytes .../payment_methods/72x72/amazonpay.png | Bin 0 -> 1100 bytes .../images/payment_methods/72x72/bacs.png | Bin 0 -> 485 bytes .../images/payment_methods/72x72/cod.png | Bin 0 -> 537 bytes .../images/payment_methods/72x72/klarna.png | Bin 0 -> 710 bytes .../payment_methods/72x72/mercadopago.png | Bin 0 -> 1435 bytes .../images/payment_methods/72x72/mollie.png | Bin 0 -> 637 bytes .../images/payment_methods/72x72/payfast.png | Bin 0 -> 766 bytes .../images/payment_methods/72x72/paypal.png | Bin 0 -> 1229 bytes .../images/payment_methods/72x72/paystack.png | Bin 0 -> 736 bytes .../images/payment_methods/72x72/payu.png | Bin 0 -> 673 bytes .../images/payment_methods/72x72/razorpay.png | Bin 0 -> 706 bytes .../images/payment_methods/72x72/square.png | Bin 0 -> 609 bytes .../images/payment_methods/72x72/stripe.png | Bin 0 -> 2783 bytes .../DefaultPaymentGateways.php | 26 +++++++++--------- 18 files changed, 18 insertions(+), 17 deletions(-) create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/affirm.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/afterpay.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/amazonpay.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/bacs.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/cod.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/klarna.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/mercadopago.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/mollie.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/payfast.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/paypal.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/paystack.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/payu.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/razorpay.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/square.png create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/stripe.png 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/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index b79adf43dac..9c552cd887d 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -309,15 +309,15 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { onToggle={ trackToggle } > { additionalSection } - { enabledSection } { offlineSection } + { enabledSection } ) : ( <> { additionalSection } - { enabledSection } { offlineSection } + { enabledSection } ) }
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 0000000000000000000000000000000000000000..9401ad1b670d7b66138fb5e29451005fcb38e57a GIT binary patch literal 972 zcmV;-12g=IP)+I}OQ2kF${qgenZEXHwVEyRn_=Sc2fr0(*@9*Q}?V5-rxA~^74RzfjBxkD=jVx3=ME^{$ykRe0}|T zdHr>D{b^|ZSy=t7t^BI0{G6Qpkdgemy!)uA`=zG)<>vX^-TBhe`RnZX;Nke+;NZ>9 z&bPU_ii?bSdV4T3Gaerx5E2p&5D|=w{Bv^rpP>89&HBm8`q|p~*Vy^!>FM0v-P+sR zy}rJ*wYH+8qnezYZ*XyIZEb37ZCzhqQdCt^Q&dDnMnOYEFEKKWh}~5H000hjQchC< zAQ0c5kMGZ5-tRD9FzgqmbWV-s+|u}$4TXsMfC zHob1|y}kc4tj0L3!`?8qZj!@)BXN%BAd}Jk4@if!^S1f@LWyNDd z7?$86mAGqXf``^bz|<6SB9It&(6Da$tF>3%A>()Xx0_b3W1qL!2?XaMi1s}1I@5fd) z6lhx>U)g@6bFP<5&jGc16ausZ0EMQ>ed&j*0I+N-gEj%+@tso4EwngyqzF31Lpyv( zy9U4uHITU;@MAl+pX~u`JXHd<0OpHcYbtI{h^58uiN~MA;*>zk03{he{1U!;Z#k+B zkk2ZBj`Lu6*Ix)}=dzCBE0S~*?R!bWUS!%?>2W92R+(VyZvS8 zKakE10;;_mQM(1L0hAO#vPmr&yTa3tFFxpX4svA`P}8y+x=cRzu0^$LS6tV%@n^}h z_8-W1Z44TNMiSWwK{nKojagKK-?YYPn#6EgC#j5VT&G$f5Un&ajAqG_iP5ZmGE*dr uDD*?L8e_xDx-jobG9m2@i%myaAN~cQaw?c0000YF+QFd9T%`g6mbU-eBw(xKWSib{^nnJ)D^OE}T0^-xU0ud9uQ}lQgZ~Nu2MB z_zDy>POjDfZ6rdVp~{*qsAwxQQ&DZ!I-s?wbU>8>B`u%@w15`S#|4$2z6lrn84%-t zLDU707l2ys1vLk1dZeCSn2}wA7BPi_uawbammv_+ke;!D*fo=N2+7e5C}E6@d!#sU zj?NdP;(B=+^1#i2(K|Y@2TbFrp0c#BZU*F9fF6MocxgGM&J`CRO5cNP$FBo{=NA_Q z!`$K6<{1zt0Qw6`#}J~QKmmfw`~v_94&$@~vTs_)($2-`*-^*8L9Ofed`#{S2#LGt zD~V?pE3&y^c8IylkjQRET3 z)PGl`R&=Vx4oC1rj3@K zH$+n@I7cToMgN}w^YrxU?CsUp+Q!SyU~6_fN>?pBOaH6@|Ca#&mH_VW@8##{-{Rx> z@ZtOE(Zk2f{ouHUj+c6bjsMV!|Idm4%z*#IYEfKi|G{AK^78ie@%QxY*4o_A)YrPc z!?wG@{ob_y+NhM9qmh`P|Im(XcY$bfeOO~~MN(h?x<>!AF#o3j|C<2#@#f9Z)XUG( zzQV@+;k&Q3yQQqMousRalAC^rk#>NJZg_+L%6VjNdH=|CLr+})xIh1~B>%4(`svjA z=F0o!$Nc2PtFX6|nxg;Lq5spDb$^LMPF(-JRR66ATWIST0000IbW%=J03Z0*y&TK~z}7?U+|{+CUVAg-mlCJIT?;Mk3VEdodVnntKTy z+~VHT>;Iq0iid>2IHQGq%J4nu>6?4bYNXjK{6RG9jRt7OVARiw!Z13M0qp2?0~+xu zMr7viai%abQ+-3dpq?>I&o#`$G?Pd@W17UCsITX-8rOjXYB)VOV4@9y2Tw%73@(`Y zBm?w<5nM0|2Jk6K04FA*iD)7kK@{3V=+u3*3cz}Jvgh6kA{cf+#SvcBE_x~7Uc?Ad zE(1W_N9a={;82>N*l&Gl2GKl;Y&(`@at63vAxBsyTZoV)0NdmeETV-)0Aa5ug&uFo z8@R{?fNxaCBzmRRGp}r@Y0@bdc@4YAV~0H|2iQeukOLgZG4FzhijXIt=xBQwK_rvV zqBnLLJ~~%L4&@p(nwedcUhvx8v>iZ=21I-to*LLhzLQl1&dD;|BoCzWRHW+4$~L2j z_@d>gLUV*-N~9j`b%fw|BB#I@?Qpr-Tn++QDo4xibZrZiGc_lBN5j;;8(c)2-fM6W zl(|pRBe(Z`P-$hxol?N zVzFeLA9jnaPFG5_cVMxtXg{?~H7@l?c5M`YQc_8@b^z?&udy8e+HuJ*^^<%kWP8my zGtBQ%cDMMW{Sg0o-zpVy>;K1}b|UJB+ZBS_rH0=%%M32e3L>A9L_sidNyhQI&SfMM zrRU^Q1t)Z{~vF^ z|9to3$D8j!1Qh@A_S^gS?|;4j3E^r=*-vbqW2WwP|MJ62$F5#FdL=8mGS)BGOx=6l zgcbJ;!B+B@1o;IsD7?QvUm)T9g#LR50{!QXwtFcvFff{Xx;TbJ9KL(wU|zFg4@}+N}?c_y(Nl=(yZaHBmDoW$zZprD1dUo-DcC zXtmL5!qf# zPiKR|MgbMErXx-hA~=E+MasQ(SYGA?EaLyY{KtlVS-z&jjs+GReC!7oF1)|HxXu0T z|Mvek21*Bva^?V|M0bHf8ts- zwSHMe>~i-*r_!<_(mz;vPdoTxO>Nu6SeHaOldo5wze$~4DB86*Va~6w53i@y{$PK6 WLRB?bfTtQ5UkskEelF{r5}E)SrR~H3 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f2ba5f688886bb7dc1a34959e4257aecd7899fe0 GIT binary patch literal 537 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKY=BRQE0F&A{>RU^AoTy;{~vF^ z1JU=l-+&}gcl-7D5FH_k6F)<4(TBuw%8zZ#$gLM1_d!3+xb`vn%fPdIAux`S- zBZ)bRhkKZg&FvG-U1k-P9@3+y?R7kB>#-?QJa_6XUy#Ga>(A}qx3c$D;o{v9fv`)vGn*n8ekI}~hxp5bKag5yeiwB@F2+*CO9^M9@NUgtSWI(}uwb;e&a zJm%Te!8XS(aFcIK?5vq>7M}l7`VY3-`NjQFPZD1%kga%RmefwO(-S%5S53aD(wsN9 zRW$p$Dm%w2?GDf6ls28-X_CK9bjt-=s~o1=OBrYNZkuv0y0fUEaN9Z|mG{f|Uz$jqwboFyt=akR{04y>B6951J literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a97abed5981cb73b7da2e6b80d1794e0f47d6273 GIT binary patch literal 710 zcmV;%0y+JOP)YT5!d4_>jV1QL%dsAF= zOIBz{O=Lq$V?s(^Jw-$DT>(0#A~=iAqTdz0 z+!pk!%_B@AGtrHbQeIb^!y-|cp-7^rN**!UGKeB9FQSWr9FvePnqoozkSucNMX0tw z7HuRFl10M-hF(Gyr5;9V21L=)Qy9%-n#c|F(vzn^6Kz!K8BBmE+8wlf1F8rnKCb?X zEP{7jl^2jjK_-zXrix(Ymo-hQhZo=)ieR?;a7&EGU&my^hd;WMz z{`#NxEcy>3^A^I@S_rnLhON!wYy6xBaA0G%&Va?%u5%6$gu^h>;2pBi$3EPHD8w-z sjoCt{W^z}0?R`1M$M(w-s=v z&(honpV#T~^*X2APF8_6J#X9W^M;G5n9u3L#nY~`#)5~Y$;{ccxyqcNxU<^reZ=Mr zkjH3mlLe>W^78e~=JBP}>urM#S=w~ET>RkPp|c&-;{o*P}0B|LF8K5yLK zC4pImH|L12#`QHDWMfwJ1|gOjm; zkF7&~sU>x&S#_LVWQB+XbxF~WH8ee%Vm>RaFY+kN7IQxFxcYkKL=f?&TBQ@=HNB*ww|PkLV?Z0ezFjZ{25US(T}|nWr02$bVdfr zWaSjwC)y-Ffn-r3$hF1wy-4~{XwhyPYjvRnDG6isZmM&D1%5_Wbfl))}ysQ9W#4jaYNzBfvM;(@QHdM}zWO8qsYFc@u} z*Q6X=FfXq3UUV$9=GD=#pbeu!$EkS)AMTP9ZxYjgSLUeIMj1jwjAFdImCblsP9#{p;;K02t5FQ$+j8sG@5BIeL29sYq+v2vn{A4R)jjhCWH zgD;d|S&@|i`?NHD1V-ST6)Y>d0qqt0=6B~C-W0*IqW=_(t$-0^tZ1brtfpmb1#}gV zXJrf&Bh?@TN6kZB(H|I2cma+sgn|w-&p1HbLkGV(+*Iq-P_3Iqy^bFfGgS-%cGx+n z<1+>ZR%#f;%D_MsCvi}BNP~fu(m@th1}NaCY}kh%WCq+#l)DEKP8?*1Gx~rXD>-?E pnFsD1l;J~mPEv*s1-Ouh4*`z1w%YBMLP`Jt002ovPDHLkV1j(M#^(S4 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3ec678962371b897a673caf825735de3b41c3e2d GIT binary patch literal 637 zcmV-@0)qXCP)fUY;1dce0zI) z$jQlEU0r;9f`R}501$LiPE!EipAe7l&tM=R5buyMFfaj$Q6T^T0jfzvK~z}7?U>ze z+b|4;8Ou(bblrF?(UE`BIBEC(uQ=IjF$-M^C*s90_`47!UVJzrU;`BW!R)ea!HX%j z+0M{s_IbhglkF+SeB%en<2W0Bn9VHIkKjo#eUI~`XEMQ)Xfl&1>T^QJ_pHEpxr|vQ zl3@*=4DDEj9c8RSMq5^4O9iX&M6ARrT1BhqpAuc#E8DhZY5OKgbVSV+z!s=gM6UBH ziI(@sof{d~v%H_1vyDU|ZY0iU7;(fM(iP6;9KAaf(D1XzRLe zar#O$TdP-e9I$|kMIS5`g+%Tzi3E7D);88I6*-UI%GINeMB&g0yRL7RinzkWAhGDp z13lnnv51=i@U`Pu#Bv01l)F9=C+Xo=)P@?hF-vdoGdfK&M7hq* zh)PzVBvOf#YdvWkXrkOCdP;idd6VRMra*e8kY|R;AMW#kV#U<1|L_zr^7t zI`!%5^V{9&Yk2LWtK>ma^V{C+m7nT)h2>CR=1*VmvAFAplJ29c=Ur^_&C%sgU-8Y+ zsJG_K0000EbW%=J0N)VrkIx_=pkSXckY5qyV)y_60y9ZOK~z}7)tK3Gqc9LfWq~m` zGunkf?3w@n$7v`+jDac%^pM;)Q|8p|))iXNw{Z5nN5omtJJdl8U+Lowga43| zir02-Cv14&+L!zhSVeaX*)cqQmcLh}=#j=`IC*(eD=)X>;^a@Ki*WJPJ+ z$knqVAFI^T2UIZ1_R7cwm{J}fbM*HDNR>ONqckV`YM{E#8PrqS9DoV{Rn8y-Jv{)G zV+@=@6xh-Cul32rGD3k&+Ns`e< zN+G+b;z49K7#c)8l zJkp^upj9Gb$s~xzp=c6pv%yJ(bWn+5t;;i@Lt*n7Fg*)-uK~w_-RWQ!4W^M0Bmrh6 zn4gF2A;|6r{wqj%4hfIp%FALzG{zQCY*Js@ zjoE-ARgg~Ljn*j2a*w=^3G+Ka`|#rN#SBi0)52dt@M~8WBGsIx0Nak4Y5SwMB)x5qs+b^#N9Xq>@Rl?j5fO2iVfR`e|}2Jf69;s!-UPX$D5|N%~i#d z9Q@Ve&zlpqgW82TVd_S_FG82vC5{dOp5` z^Uuv|5sA?aU|wDpIWH^iZAs!awfEsrCa1D>jElrtWf9!I7QyX^9I1%A2IGQ?>oXKP zp`}+SGhX7)jCb8l`N34rloUUx;A4w?x;g-vQqH$v~CkX3ETc_!NnER5xw%q4C66mIdjM$N^KR#R&6OWHQctv z_+)2N4@WE@xdo%=>+%DP7G-?r*@W!s%fnCWqt>%5cnPMSbiw;9?88sG`C|gYJl%J8 zJ3BY)X|?is!O{+8R|7RhU;I(2pf(+JjVkom_5^i5>&twPXJ+NXkY3xZesqk~o4a<# zaDW?_;`z4mLtVb3y}!l3u^Ez(TnPp9h$W$o9B8E3KNu#9@e@qZJe!L9dZu6|<8)d8 z#v>pt6HRsv>nwPs*GAVTzc?g4Tj&vt?dPMEIH&RS9S<6{+w``cl2&cmPK`Vk9;Z7* z_$eu_i`{iD^N8A{QT_gs5PF3cIj>Ta&{M)2_PfU;uZa zj2z6nLcF8CiT%s%oKa(za(2b5n#Dt#BYZh!ZrdHc4?5aQn~<>;N>pp7d3=+r@?LGN zfrX(}a>i%6{Br8;)b*)P?BDAZ_u*2-UL}m1AvFtDEKP;wm`}7dL%w#}VPlcPLDpjw Qf_zF;M;iJ1KA+_O03WO-S^xk5 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..362446dfb00748432b989e3910bc042b69767a98 GIT binary patch literal 736 zcmV<60w4W}P))?KTy1=dm!Zhc(tC-OU2S|G%J+PUl@TaFsLx000kkQchC< z-yjf=?$4iKpfK;CUtl7?sw)5h0qsddK~z}7?U>zi+At7C9Sj)Kr29okviuWc7ds|N zllJ|et}EP3P~B!4*o$Pwhd~CJIoe&}3vKjDyh@e}`fnD?^>rMLnavmUe%7-nB%afW z%)@Xl=wvRAg1ThS8Kz5tc!HQ>_MB-Nb}y*&85N(A06w`jkw{1}N$@3(RwTlTGZP_+ zmL$S5T98bUA`)T}O`=IOi9V$$|49Kg?4P2$n}Iue3k3?WW6|xgD7!CIxhK=A%vpC& zRJpWOU2Zk_o9)WNQOZ9tEHW+&MBg{Rc{nVLEfi@U;S`KPQ^IN80$Nqr@-%7iD}zfm=B#WF>T zB~I&1B6eJtY9NTUG^Cm=Qf(ipMwC!%ERI5Er#vf*`79a}f4zEN`!HD@Me_?^m@cv+ Szn=F100007Qqc9LfLBtq4$@GnZaO8nvU1?B;Qv zXfsbYp^ohNf$1oaXO>B^=ZB`Wy?M{u8_!9AFkDF_5=oH+g~}=tq2kFzD6>6@u+It- zp~y&xhv*^tzarqbiHIDWj0k{?$lOchHRI_Uw7xvlxZly_5HJIMMFSX5Ob62UMGm92 zwgyi01tEq`L;Y)OFcj$F;*{TudTqJ|BF?TyFx?y3I#o7yx1x||iKvFQcA6~EHh7Qq zqTV7hpvW7V7R~u-ok%mBqNYd->zzp(YgdU9>?42T{f)3;%-EV=C32Q&22bw}rmH&^ zop2)Zobf7hOFN1Q+B90MnJb!zMj#f}18_@4#?V^ZH` z8(eUDsi=2=i>-4kxU@z+B4K*EFB%5ApeL?<@bOpMVLJQ6E}NFN{%6;iN7yLR;RO{C zHK8gAQ6FB=kNm<9b2Y#DL$%!7$GQ6sDfwI00000NkvXX Hu0mjf9|}_& literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..01dedd7bfa6d6a2e77d02a56d9430cbf0ac8d5d6 GIT binary patch literal 706 zcmV;z0zLhSP)>xyy2H+Xj;3IAk>~2|Z-JX(bdkEk&NG$& z*xll*wZvDa{zsqwmB#yIt^Kpr`rhmK(dGDilCh4Qu#KFse7gLh%=&q=@otyKjhnD? zh^BCXoDOni<^TWy5_D2dQve|E-=7f9kYL_05D<@F&ySC^5JYSM00Fv5L_t(o!|j;I zZlq8UMISVDc6;Vly+BT#oG1VPrwvFW4K4S=hT2%>NN)#6w+h~(O8qBX2Dd)mjDH*K zLiHMN;p6=Tp1LIbf`Qyz#+hL-vtFom>ltBMOXTTi3R}-eQ>Z$6eIC_u4+3<>1rT7N z)D{x>p;|(Or3xTIpym)^u6&5#D+n=(Ceb9CME`jBE+aah?j=Nz$EJBqnK}M7PIPy^ zJK@EpY0Tq9PrsXQ&>BUY?=@9iSIle^O>7ZI&bEgvo*ij@V1p{VE^6QX+1!I#wBg9) zRG5@?!kLMql*-gnmbl1LnoyollCilesvXgf<{_mzC3~O*Rg68Cumr?;=76$2To3G47l7e$XOlGR3L$+Gff);_DX%p$7I(__0B+~V!Z literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3ffe48772223206ab451e309721f00d94b8c0bf0 GIT binary patch literal 609 zcmV-n0-pVeP)`O@9!5E7at!Vz`?<$r>ByVlJWBL+S}Xn^z_Zn&aber zZf%X~U1_3? z0000IbW%=J03Z} z>Mp0ClgR)PoH})v|Nq|>n=E7Cnzoz|y7_)JdD2D*?IGV$FBo&sj*nfBl5P&;V4mx= z7|Osh_H#J{ux`*;)JQtk(tT?^z1Kvg(@UZfV$eG#HwFkDH|GMNEQta}LrOeA$s;Zf z6c8T=@(IU*h6IrMcTl$8PEWO~%EAPCo{C?4$@QVE7K-9R8%l+;R2!P8p`|vo7qUar z>L6rWZRkN9+pMBi`BMHcF@ur_I<0J=N9Y#)DX2_kZ@r-Av$^OAJ$*s*D|9)~JJ#P1 zuXEYrd|r_=f|3k61LP)Xjt@Tp0GwtflIq);00000NkvXXu0mjfmTV}= literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0175f2947d6d670265d5c6f0780450607e91346c GIT binary patch literal 2783 zcmV<53Ly1~P)XIJX+^(fc<*Iw z>1ag3VSMssY3OE2#sJg*V|MLiZ|h)r@o7Z9Wozdv!~Zy{`e$Y3WKPTg&i^CE|2M1q z6UqN3w*6yt?qzN20LuRW-2VX5|6+CWV{q(iL&5+5|7LFMWpeFhaO`Gm>SS~7V1V;q zg7ju*=4nR3XKLwYY3E^n@@8V+StGsryHu`)Eta0M`FtqW?^v z{7{tlQI7PXrt^Dv=F;5#*WCQx-}}tc`^Culnx^%&we**q@ppjkWlhWZ`Tz3r{pacZ z;O70n(EQZb`@PBgJ*E1$!ug-L`PkU_!^HPxkoU^U_Nub>RF3wLp!H#X^NW}Ad5Q9g zi|%oI?T(4)8NUBRt^ZV||6QB^Or-uTwEa|_{iVG6vc36oj`V1F@NjnOYiQ(hZQ=mO z|JC6BTb2ASultj*`az-ke4qGxp7?~A^QIHSE<;EtsN8T8a{mZgbCwe%}k!Td-v+q zt5>WD3kyr?nG_P@Ubk|YS_O#hDq60hzrTMc0VxL=aFTZ;15i>@Qi!{I-;NzScInc& zOhGHAcsWp%GkOOy=rAZbIT_<%9+#wGbox>UR#Rh~LYz^Ma%RGUJU%M|fN^mN36^;} z4{Y1EZAmRuYikD}@ovGvG?Ck8ordLim@RvgqLcRR_ z`t%7x2J&EC(B@#-X5DGirU@;~UxR3W_Kykm8srB~P|%FtJ^&33qj|7B%Argmb=tKn z4^V08fU^JOkkC*sFRwv^Fb?LSal)7*+avlz8GyQ1gAUO^IPsHXhV<_rDjYxV$UGt7 zi1u*DiN$Hxy?coQq$Vh%_X9En7;wDM!S+B|P#5H34)mw5Rb4C&I29izy#9?h#bwQhzgLQ2;nLIta5vx3+&pvGK@BZYR zNIex3lahAgYQ{aa4aL|YPc$;!x)Q5A$jCeouEaR%E9QLeU(La~q9G4DU5RkKq$B$L z?uw)BTIR&+5_wF}A8-&-4j(%*P}hS!j&>k5_GpZQPW$!@GHf4~=Yguq2qh}VRXPA6 zqt!KoZ^NUf9rK5rjgBWU=yV{4ak1M6uAi{$j&>kEb~!H0!yt9Mf>?j>SR8e<3-NKW z{)jvsIuJu1c`S15LSh@5urB3z5OplXErz$DKKaz^SFdKC*ux=S7ck73MxEszMBP5< z@Js%!*6JKM6}X-Aa?i&A1PrT7wg=*Pcnl!=Htd0Y#@kS9Q4Dq1Hhi6ZW|=r$-Bew` z4Dcpw8|uf@#R$ET4z}l~I$l^7I?K`VCXfdlzJ0`PcvRbs$KRlnXgKY>J)j6Dl8Eh$ zapdj%HdSkOT1Fl{UGf(Dg>htmm}4e#JEJ2mRd?flOv%i>kB%A_I;yTnw}f$oe*|$} z+D9kXdjIUny2BiR4D*UiNH{WX!Pv2+kA6Et9(JpCIcvKY&t$u9$L*|*D-sY`3l@xx zAYvPeJi+Wzy?4sdcAdCu@-$(b+iVvm967?6u@Mmj9o}Z_v%KZ+<#&z5+@g7=(Rq0Q z1kAW`-~hz8q3y>#FHHez-O{#?M*=zvs56q#Tb?@j)?jrZ1iLUJ#TMH0ir0n5B0b!$QVD$chdCQsN)Te`6fEZAjD1= z?K5w)`k2a(`)^IkMY?WS_(6L3@<`Bu%zXakPAW;eIN5!<$LC!BD{ z-T0=Q6b+I5&Bu=Tmee6Q# zEK#&BbOPh3gUqmD1naVK>_TU+nSo)>l)zZ&03_vd#`TW|V=&6ubCj_}R6iA!e=FaT9B+&=u6 z%145@4K0?aC^Ilyr4tty8=KA?3{;0y7LNM3>u*DGi$Pty(Y!wZ#ivu};=FnL_BAAB z&`C@LMt86-RH%cDnKQzHJn`}A()rYw)Y9uxZy!|`-ag)#$J#k`C>@=B&mO*?wX!)W zPyrbA6Jl+?y`Xj7Xt>1b3kW1-#)j& z5pPV3nK`~6pFG(+ckY}y`9g(@5WZSEbl0|_bg(~WZ1d8kOO_n83l(lb '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,7 +194,7 @@ 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 ), ), @@ -204,7 +204,7 @@ class DefaultPaymentGateways { '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 ), ), @@ -324,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( @@ -339,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( @@ -365,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( From 1f77200e7050880f54a33c9270929c7ed9686de0 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 11 Apr 2022 15:57:26 +0800 Subject: [PATCH 17/25] Add missing track prop --- .../fills/PaymentGatewaySuggestions/index.js | 22 ++++++++++--------- .../PaymentGatewaySuggestions/test/index.js | 1 + 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 9c552cd887d..084a4711efa 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -161,16 +161,6 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { [ paymentGateways ] ); - const trackSeeMore = () => { - recordEvent( 'tasklist_payment_see_more', {} ); - }; - - const trackToggle = ( isShow ) => { - recordEvent( 'tasklist_payment_show_toggle', { - toggle: isShow ? 'hide' : 'show', - } ); - }; - const recommendation = useMemo( () => Array.from( paymentGateways.values() ) @@ -243,6 +233,18 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { 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 ; } 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 7df91e7a82a..c2ca2617ff0 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js @@ -270,6 +270,7 @@ describe( 'PaymentGatewaySuggestions', () => { '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". } ); } ); From 812a11e31b7ea0b6437180255002de662caa4de0 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Mon, 11 Apr 2022 16:21:48 +0800 Subject: [PATCH 18/25] Add changelog --- .../changelog/dev-32131-ui-changes-additional-payment-section | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/dev-32131-ui-changes-additional-payment-section 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 From e2da686c31eb3609c862515c596a9d10e4f42cd8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 09:49:23 +0800 Subject: [PATCH 19/25] Add eway --- .../assets/images/payment_methods/72x72/eway.png | Bin 0 -> 790 bytes .../DefaultPaymentGateways.php | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 plugins/woocommerce/assets/images/payment_methods/72x72/eway.png 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 0000000000000000000000000000000000000000..74884fa1b03f35a5e95b9869e28477812d2975f3 GIT binary patch literal 790 zcmV+x1L^#UP)tcqc9MLX&{8Q zyE8r?Y9J(e|94z_Kx#^mScq>b<-f6JVm{A5f>?I(t+F{CEBJ3!$J3v(c+{b;V7pF- z8K(Szo%;A$&KvC3+g(wg#Mw>yoYnJmO(k)jB9#Q1^?7&450F90+o zS=5lT3_2CZJfLGyTI`b}HF{KvI@sDa&XTJj*@59nJ(@V*B}e4(9AjV_qjXwj z4TK#89CeNl`{al`_Q+D_I_?Kgi51XS0LMlF+@vN)H`EL}029F^j_n#q#3|pp;DClY z=hG;tffNHs4J5S;vN-+jIYo$U92IfxG)W{FEopEW1RRwGXEpZY(j8?b8DXeQ3yez{ z>DL&5^KuzPB+|uEU1+AHrR5bSscQ<(6sSdOB*umCZVIkHM`i{wSeOEzCWesd>&JdO zNb$#NB_DGF*>(^|Gf&Zrx*2qnlFi*B+W~?z1~)Ut_x)#c40jbcfdck`h@?21 zFh&t)ABbLVJ$S=~MCqT}j!Z8xspIbHeT`Xrb-!P&}$^-Zx$!Hh0zh1Iox5 Uq9MrH&;S4c07*qoM6N<$f@U{VqW}N^ literal 0 HcmV?d00001 diff --git a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php index e648fa9722f..4b64d63b5ac 100644 --- a/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php +++ b/plugins/woocommerce/src/Admin/Features/PaymentGatewaySuggestions/DefaultPaymentGateways.php @@ -354,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' ) ), From 7cca9642f45d4453b46d1d541d78d7afddbe0fac Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 10:09:07 +0800 Subject: [PATCH 20/25] Remove enabled section --- .../fills/PaymentGatewaySuggestions/index.js | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js index 084a4711efa..032b85c327a 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js @@ -185,12 +185,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return gateway; }, [ isResolving, query, paymentGateways ] ); - const [ - wcPayGateway, - enabledGateways, - offlineGateways, - additionalGateways, - ] = useMemo( + const [ wcPayGateway, offlineGateways, additionalGateways ] = useMemo( () => Array.from( paymentGateways.values() ) .sort( ( a, b ) => { @@ -207,7 +202,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { } ) .reduce( ( all, gateway ) => { - const [ wcPay, enabled, offline, additional ] = all; + const [ wcPay, offline, additional ] = all; // WCPay is handled separately when not installed and configured if ( @@ -216,8 +211,6 @@ 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 { @@ -226,7 +219,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { return all; }, - [ [], [], [], [] ] + [ [], [], [] ] ), [ paymentGateways ] ); @@ -258,14 +251,6 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => { ); } - const enabledSection = !! enabledGateways.length && ( - - ); - const additionalSection = !! additionalGateways.length && ( { > { additionalSection } { offlineSection } - { enabledSection } ) : ( <> { additionalSection } { offlineSection } - { enabledSection } ) }
From 0b2df9a95657456c2e03dece9e91cb2bc3d7c390 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 10:52:11 +0800 Subject: [PATCH 21/25] Fix text domain, standardize component conditional, remove unnecessary comment --- .../fills/PaymentGatewaySuggestions/components/Action.js | 2 +- .../fills/PaymentGatewaySuggestions/components/List/List.js | 6 ++---- .../PaymentGatewaySuggestions/components/Setup/Configure.js | 2 +- .../PaymentGatewaySuggestions/components/Toggle/Toggle.js | 2 -- 4 files changed, 4 insertions(+), 8 deletions(-) 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 90c0486ecbc..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 = __( 'Get started', 'woocommerce-admin' ), + 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 d9442b284f7..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 @@ -19,7 +19,7 @@ export const List = ( { } ) => { return ( - { heading ? { heading } : null } + { heading && { heading } } { paymentGateways.map( ( paymentGateway ) => { const { id } = paymentGateway; return ( @@ -31,10 +31,8 @@ export const List = ( { /> ); } ) } - { footerLink ? ( + { footerLink && ( { footerLink } - ) : ( - '' ) } ); 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 5b5e45b5f92..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/Toggle/Toggle.js b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js index d096360b166..95ad0f2b078 100644 --- a/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js +++ b/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js @@ -38,5 +38,3 @@ export const Toggle = ( { children, heading, onToggle } ) => {
); }; - -// export default Toggle; From b7e156cdfa1801a6416889d1877629251b589786 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 11:19:09 +0800 Subject: [PATCH 22/25] Add changelog for data package --- packages/js/data/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/js/data/CHANGELOG.md b/packages/js/data/CHANGELOG.md index cb955c6b7e2..f33e3ab6327 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 # 3.1.0 From 1fb2418e57d553a3f607b904e9ddf35da1c8d85e Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 11:40:02 +0800 Subject: [PATCH 23/25] Add changelog for data package --- packages/js/data/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/js/data/CHANGELOG.md b/packages/js/data/CHANGELOG.md index f33e3ab6327..a69294d2ca7 100644 --- a/packages/js/data/CHANGELOG.md +++ b/packages/js/data/CHANGELOG.md @@ -1,7 +1,7 @@ # Unreleased - Update dependency `@wordpress/hooks` to ^3.5.0 -- Add `is_offline` attribute for `Plugin` type +- Add `is_offline` attribute for `Plugin` type. #32467 # 3.1.0 From 29e27fff35c967b5fa683625c8cc66024d71dee8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 11:47:22 +0800 Subject: [PATCH 24/25] Update e2e --- packages/js/admin-e2e-tests/CHANGELOG.md | 2 ++ packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts | 4 ++++ packages/js/admin-e2e-tests/src/specs/tasks/payment.ts | 3 +++ 3 files changed, 9 insertions(+) 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..4b0720454ca 100644 --- a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts +++ b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts @@ -25,6 +25,10 @@ export class PaymentsSetup extends BasePage { await this.clickButtonWithText( 'Got it' ); } + async toggleOtherPaymentMethods(): Promise< void > { + await this.clickButtonWithText( 'Other payment methods' ); + } + async goToPaymentMethodSetup( method: PaymentMethodWithSetupButton ): Promise< void > { 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..b017e0ac837 100644 --- a/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts +++ b/packages/js/admin-e2e-tests/src/specs/tasks/payment.ts @@ -67,6 +67,7 @@ const testAdminPaymentSetupTask = () => { await waitForTimeout( 1000 ); await homeScreen.clickOnTaskList( 'Set up payments' ); await paymentsSetup.isDisplayed(); + await paymentsSetup.toggleOtherPaymentMethods(); await paymentsSetup.methodHasBeenSetup( 'bacs' ); } ); @@ -76,6 +77,8 @@ const testAdminPaymentSetupTask = () => { await homeScreen.isDisplayed(); await waitForTimeout( 1000 ); await homeScreen.clickOnTaskList( 'Set up payments' ); + await paymentsSetup.isDisplayed(); + await paymentsSetup.toggleOtherPaymentMethods(); await paymentsSetup.enableCashOnDelivery(); await homeScreen.navigate(); await homeScreen.isDisplayed(); From 859ab8884b4b69d98e1a06927e4c88b313b14fb7 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Tue, 12 Apr 2022 18:06:09 +0800 Subject: [PATCH 25/25] Fix e2e tests --- .../src/pages/PaymentsSetup.ts | 17 +++++++-------- .../admin-e2e-tests/src/pages/WcSettings.ts | 16 +++++++++++++- .../src/specs/tasks/payment.ts | 21 ++++++++----------- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts index 4b0720454ca..1dae7adc683 100644 --- a/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts +++ b/packages/js/admin-e2e-tests/src/pages/PaymentsSetup.ts @@ -25,8 +25,13 @@ export class PaymentsSetup extends BasePage { await this.clickButtonWithText( 'Got it' ); } - async toggleOtherPaymentMethods(): Promise< void > { - await this.clickButtonWithText( 'Other payment methods' ); + 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( @@ -45,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 b017e0ac837..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,13 +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.toggleOtherPaymentMethods(); - await paymentsSetup.methodHasBeenSetup( 'bacs' ); + expect( await settings.paymentMethodIsEnabled( 'bacs' ) ).toBe( + true + ); + await homeScreen.navigate(); } ); it( 'Enabling cash on delivery enables the payment method', async () => { @@ -78,14 +77,12 @@ const testAdminPaymentSetupTask = () => { await waitForTimeout( 1000 ); await homeScreen.clickOnTaskList( 'Set up payments' ); await paymentsSetup.isDisplayed(); - await paymentsSetup.toggleOtherPaymentMethods(); + await paymentsSetup.showOtherPaymentMethods(); 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' ); + expect( await settings.paymentMethodIsEnabled( 'cod' ) ).toBe( + true + ); } ); } ); };