From a3bd1e5109d7fc95a57883ce3334c7eb7bbb0ad2 Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Thu, 31 Mar 2022 13:57:38 +0800
Subject: [PATCH] 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 (
 		<Card>
@@ -30,6 +31,11 @@ export const List = ( {
 					/>
 				);
 			} ) }
+			{ footerLink ? (
+				<CardFooter isBorderless>{ footerLink }</CardFooter>
+			) : (
+				''
+			) }
 		</Card>
 	);
 };
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={
+						<Button
+							href={ SEE_MORE_LINK }
+							target="_blank"
+							isTertiary
+						>
+							{ __( 'See more', 'woocommerce-admin' ) }
+							<ExternalIcon size={ 18 } />
+						</Button>
+					}
+				></List>
 			) }
 
 			{ !! 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;