Add PayPal to fallback payment gateways (https://github.com/woocommerce/woocommerce-admin/pull/7001)

* Remove unused spec properties

* Move default payment gateways to separate file

* Add Stripe to default gateways

* Fix payfast image and visibility conditions

* Fix setup button action when no fields are present

* Fix localized string and help text

* Fix settings transform and add help text

* Show connection button if oauth connection URL exists

* Add fallback when no fields exist

* Remove ToS text in favor of help text

* Update payment action boolean check

* Add changelog entry

plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentConnect.js

@@ -1,67 +1,40 @@
 /**
  * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import interpolateComponents from 'interpolate-components';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	Link,
-	DynamicForm,
-	WooRemotePaymentForm,
-	Spinner,
-} from '@woocommerce/components';
-import apiFetch from '@wordpress/api-fetch';
-import { useEffect, useState } from '@wordpress/element';
+import { DynamicForm, WooRemotePaymentForm } from '@woocommerce/components';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
-import { useSlot, Text } from '@woocommerce/experimental';
+import { useSlot } from '@woocommerce/experimental';
+
+/**
+ * Internal dependencies
+ */
+import sanitizeHTML from '~/lib/sanitize-html';
 
 export const PaymentConnect = ( {
 	markConfigured,
-	method,
+	paymentGateway,
 	recordConnectStartEvent,
 } ) => {
 	const {
-		api_details_url: apiDetailsUrl,
-		fields: fieldsConfig,
 		key,
+		oauth_connection_url: oAuthConnectionUrl,
+		setup_help_text: helpText,
+		required_settings_keys: settingKeys,
+		settings,
+		settings_url: settingsUrl,
 		title,
-	} = method;
+	} = paymentGateway;
 
 	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
 	const { createNotice } = useDispatch( 'core/notices' );
 	const slot = useSlot( `woocommerce_remote_payment_form_${ key }` );
 	const hasFills = Boolean( slot?.fills?.length );
-	const [ state, setState ] = useState( 'loading' );
-	const [ fields, setFields ] = useState( null );
-
-	// This transform will be obsolete when we can derive essential fields from the API
-	const settingsTransform = ( settings ) => {
-		const essentialFields = fieldsConfig.map( ( field ) => field.name );
-
-		return Object.values( settings ).filter( ( setting ) =>
-			essentialFields.includes( setting.id )
-		);
-	};
-
-	// TODO: Will soon be replaced with the payments data store implemented in #6918
-	useEffect( () => {
-		apiFetch( {
-			path: `/wc/v3/payment_gateways/${ key }/`,
-		} )
-			.then( ( results ) => {
-				setFields( settingsTransform( results.settings ) );
-				setState( 'loaded' );
-			} )
-			.catch( ( e ) => {
-				setState( 'error' );
-				/* eslint-disable no-console */
-				console.error(
-					`Error fetching information for payment gateway ${ key }`,
-					e.message
-				);
-				/* eslint-enable no-console */
-			} );
-	}, [] );
+	const fields = settingKeys
+		? settingKeys.map( ( settingKey ) => settings[ settingKey ] )
+		: [];
 
 	const isOptionsRequesting = useSelect( ( select ) => {
 		const { isOptionsUpdating } = select( OPTIONS_STORE_NAME );
@@ -124,22 +97,6 @@ export const PaymentConnect = ( {
 		return errors;
 	};
 
-	const helpText = interpolateComponents( {
-		mixedString: __(
-			'Your API details can be obtained from your {{link/}}',
-			'woocommerce-admin'
-		),
-		components: {
-			link: (
-				<Link href={ apiDetailsUrl } target="_blank" type="external">
-					{ sprintf( __( '%(title)s account', 'woocommerce-admin' ), {
-						title,
-					} ) }
-				</Link>
-			),
-		},
-	} );
-
 	const DefaultForm = ( props ) => (
 		<DynamicForm
 			fields={ fields }
@@ -151,39 +108,47 @@ export const PaymentConnect = ( {
 		/>
 	);
 
-	if ( state === 'error' ) {
+	if ( hasFills ) {
 		return (
-			<Text>
-				{
-					( __( 'There was an error loading the payment fields' ),
-					'woocommerce-admin' )
-				}
-			</Text>
+			<WooRemotePaymentForm.Slot
+				fillProps={ {
+					defaultForm: DefaultForm,
+					defaultSubmit: updateSettings,
+					defaultFields: fields,
+					markConfigured: () => markConfigured( key ),
+				} }
+				id={ key }
+			/>
 		);
 	}
 
-	if ( state === 'loading' ) {
-		return <Spinner />;
+	if ( oAuthConnectionUrl ) {
+		return (
+			<>
+				<Button isPrimary href={ oAuthConnectionUrl }>
+					{ __( 'Connect', 'woocommerce-admin' ) }
+				</Button>
+				{ helpText && (
+					<p dangerouslySetInnerHTML={ sanitizeHTML( helpText ) } />
+				) }
+			</>
+		);
+	}
+
+	if ( fields.length ) {
+		return (
+			<>
+				<DefaultForm />
+				{ helpText && (
+					<p dangerouslySetInnerHTML={ sanitizeHTML( helpText ) } />
+				) }
+			</>
+		);
 	}
 
 	return (
-		<>
-			{ hasFills ? (
-				<WooRemotePaymentForm.Slot
-					fillProps={ {
-						defaultForm: DefaultForm,
-						defaultSubmit: updateSettings,
-						defaultFields: fields,
-						markConfigured: () => markConfigured( key ),
-					} }
-					id={ key }
-				/>
-			) : (
-				<>
-					<DefaultForm />
-					<p>{ helpText }</p>
-				</>
-			) }
-		</>
+		<Button isPrimary href={ settingsUrl }>
+			{ __( 'Manage', 'woocommerce-admin' ) }
+		</Button>
 	);
 };

plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js

@@ -133,8 +133,8 @@ export const PaymentMethod = ( {
 		),
 		content: paymentGateway ? (
 			<PaymentConnect
-				method={ method }
 				markConfigured={ markConfigured }
+				paymentGateway={ paymentGateway }
 				recordConnectStartEvent={ recordConnectStartEvent }
 			/>
 		) : null,

plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethodList/PaymentMethodList.js

@@ -38,6 +38,7 @@ export const PaymentMethodList = ( {
 				is_enabled: isEnabled,
 				is_configured: isConfigured,
 				key,
+				plugins,
 				title,
 				is_visible: isVisible,
 				loading,
@@ -87,7 +88,9 @@ export const PaymentMethodList = ( {
 							<PaymentAction
 								manageUrl={ manageUrl }
 								methodKey={ key }
-								hasSetup={ !! fields.length }
+								hasSetup={ Boolean(
+									plugins.length || fields.length
+								) }
 								isConfigured={ isConfigured }
 								isEnabled={ method.isEnabled }
 								isRecommended={ isRecommended }

plugins/woocommerce-admin/readme.txt

@@ -87,6 +87,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Add: Add transformers in remote inbox notifications #6948
 - Add: Get post install scripts from gateway and enqueue in client #6967
 - Add: Free extension list powered by remote config #6952
+- Add: Add PayPal to fallback payment gateways #7001
 - Dev: Update package-lock to fix versioning of local packages. #6843
 - Dev: Use rule processing for remote payment methods #6830
 - Dev: Update E2E jest config, so it correctly creates screenshots on failure. #6858

plugins/woocommerce-admin/src/Features/OnboardingTasks.php

@@ -365,7 +365,7 @@ class OnboardingTasks {
 	 *
 	 * @return array
 	 */
-	private static function get_stripe_supported_countries() {
+	public static function get_stripe_supported_countries() {
 		// https://stripe.com/global.
 		return array(
 			'AU',

plugins/woocommerce-admin/src/Features/RemotePaymentMethods/DefaultPaymentGateways.php

@@ -0,0 +1,76 @@
+<?php
+/**
+ * Gets a list of fallback methods if remote fetching is disabled.
+ */
+
+namespace Automattic\WooCommerce\Admin\Features\RemotePaymentMethods;
+
+defined( 'ABSPATH' ) || exit;
+
+use Automattic\WooCommerce\Admin\Features\OnboardingTasks;
+
+/**
+ * Default Payment Gateways
+ */
+class DefaultPaymentGateways {
+
+	/**
+	 * Get default specs.
+	 *
+	 * @return array Default specs.
+	 */
+	public static function get_all() {
+		$stripe_countries       = OnboardingTasks::get_stripe_supported_countries();
+		$stripe_countries_rules = array();
+		foreach ( $stripe_countries as $country ) {
+			$stripe_countries_rules[] = (object) array(
+				'type'      => 'base_location_country',
+				'value'     => $country,
+				'operation' => '=',
+			);
+		}
+
+		return array(
+			array(
+				'key'        => 'payfast',
+				'title'      => __( 'PayFast', 'woocommerce-admin' ),
+				'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-admin' ),
+				'image'      => WC()->plugin_url() . '/assets/images/payfast.png',
+				'plugins'    => array( 'woocommerce-payfast-gateway' ),
+				'is_visible' => array(
+					(object) array(
+						'type'      => 'base_location_country',
+						'value'     => 'ZA',
+						'operation' => '=',
+					),
+					(object) array(
+						'type'        => 'option',
+						'option_name' => 'woocommerce_onboarding_profile',
+						'value'       => 'cbd-other-hemp-derived-products',
+						'operation'   => '!contains',
+					),
+				),
+			),
+			array(
+				'key'        => 'stripe',
+				'title'      => __( 'Credit cards - powered by Stripe', 'woocommerce-admin' ),
+				'content'    => __( 'Accept debit and credit cards in 135+ currencies, methods such as Alipay, and one-touch checkout with Apple Pay.', 'woocommerce-admin' ),
+				'image'      => WC()->plugin_url() . '/assets/images/stripe.png',
+				'plugins'    => array( 'woocommerce-gateway-stripe' ),
+				'is_visible' => array(
+					(object) array(
+						'type'     => 'or',
+						'operands' => $stripe_countries_rules,
+					),
+					(object) array(
+						'type'        => 'option',
+						'option_name' => 'woocommerce_onboarding_profile',
+						'value'       => 'cbd-other-hemp-derived-products',
+						'operation'   => '!contains',
+					),
+				),
+			),
+		);
+	}
+
+}

plugins/woocommerce-admin/src/Features/RemotePaymentMethods/EvaluateMethod.php

@@ -21,21 +21,11 @@ class EvaluateMethod {
 	 */
 	public static function evaluate( $spec ) {
 		$rule_evaluator = new RuleEvaluator();
-		$method         = $spec;
+		$method         = (object) $spec;
 
-		if ( isset( $spec->is_visible ) ) {
-			$is_visible         = $rule_evaluator->evaluate( $spec->is_visible );
+		if ( isset( $method->is_visible ) ) {
+			$is_visible         = $rule_evaluator->evaluate( $method->is_visible );
 			$method->is_visible = $is_visible;
-			// Return early if visibility does not pass.
-			if ( ! $is_visible ) {
-				$method->is_configured = false;
-				return $method;
-			}
-		}
-
-		if ( isset( $spec->is_configured ) ) {
-			$is_configured         = $rule_evaluator->evaluate( $method->is_configured );
-			$method->is_configured = $is_configured;
 		}
 
 		return $method;

plugins/woocommerce-admin/src/Features/RemotePaymentMethods/Init.php

@@ -8,6 +8,7 @@ namespace Automattic\WooCommerce\Admin\Features\RemotePaymentMethods;
 defined( 'ABSPATH' ) || exit;
 
 use Automattic\WooCommerce\Admin\RemoteInboxNotifications\SpecRunner;
+use Automattic\WooCommerce\Admin\Features\RemotePaymentMethods\DefaultPaymentGateways;
 use Automattic\WooCommerce\Admin\Features\RemotePaymentMethods\PaymentGatewaysController;
 
 /**
@@ -56,14 +57,14 @@ class Init {
 		// Fetch specs if they don't yet exist.
 		if ( false === $specs || ! is_array( $specs ) || 0 === count( $specs ) ) {
 			if ( 'no' === get_option( 'woocommerce_show_marketplace_suggestions', 'yes' ) ) {
-				return self::get_default_specs();
+				return DefaultPaymentGateways::get_all();
 			}
 
 			$specs = DataSourcePoller::read_specs_from_data_sources();
 
 			// Fall back to default specs if polling failed.
 			if ( ! $specs ) {
-				return self::get_default_specs();
+				return DefaultPaymentGateways::get_all();
 			}
 
 			$specs = self::localize( $specs );
@@ -73,28 +74,6 @@ class Init {
 		return $specs;
 	}
 
-	/**
-	 * Get default specs.
-	 *
-	 * @return array Default specs.
-	 */
-	public static function get_default_specs() {
-		return array(
-			(object) array(
-				'key'        => 'payfast',
-				'title'      => __( 'PayFast', 'woocommerce-admin' ),
-				'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-admin' ),
-				'image'      => __( 'https =>//www.payfast.co.za/assets/images/payfast_logo_colour.svg', 'woocommerce-admin' ),
-				'plugins'    => array( 'woocommerce-payfast-gateway' ),
-				'is_visible' => (object) array(
-					'type'      => 'base_location_country',
-					'value'     => 'ZA',
-					'operation' => '=',
-				),
-			),
-		);
-	}
-
 	/**
 	 * Localize the provided method.
 	 *

plugins/woocommerce-admin/src/Features/RemotePaymentMethods/PaymentGatewaysController.php

@@ -38,6 +38,10 @@ class PaymentGatewaysController {
 			$data['oauth_connection_url'] = $gateway->get_oauth_connection_url();
 		}
 
+		if ( method_exists( $gateway, 'get_setup_help_text' ) ) {
+			$data['setup_help_text'] = $gateway->get_setup_help_text();
+		}
+
 		if ( method_exists( $gateway, 'get_required_settings_keys' ) ) {
 			$data['required_settings_keys'] = $gateway->get_required_settings_keys();
 		}