Add is_offline flag and split payment sections

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';

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 && (
 				<List
 					heading={ __(
-						'Additional payment gateways',
-						'woocommerce'
+						'Choose a payment provider',
+						'woocommerce-admin'
 					) }
 					recommendation={ recommendation }
 					paymentGateways={ additionalGateways }
 					markConfigured={ markConfigured }
 				/>
 			) }
+
+			{ !! offlineGateways.length && (
+				<List
+					heading={ __(
+						'Offline payment methods',
+						'woocommerce-admin'
+					) }
+					recommendation={ recommendation }
+					paymentGateways={ offlineGateways }
+					markConfigured={ markConfigured }
+				/>
+			) }
 		</div>
 	);
 };

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',

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',