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;