diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentConnect.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentConnect.js index 2b9c7bc71e8..1b09893c77f 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentConnect.js +++ b/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: ( - - { sprintf( __( '%(title)s account', 'woocommerce-admin' ), { - title, - } ) } - - ), - }, - } ); - const DefaultForm = ( props ) => ( ); - if ( state === 'error' ) { + if ( hasFills ) { return ( - - { - ( __( 'There was an error loading the payment fields' ), - 'woocommerce-admin' ) - } - + markConfigured( key ), + } } + id={ key } + /> ); } - if ( state === 'loading' ) { - return ; + if ( oAuthConnectionUrl ) { + return ( + <> + + { helpText && ( +

+ ) } + + ); + } + + if ( fields.length ) { + return ( + <> + + { helpText && ( +

+ ) } + + ); } return ( - <> - { hasFills ? ( - markConfigured( key ), - } } - id={ key } - /> - ) : ( - <> - -

{ helpText }

- - ) } - + ); }; diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js index 874af3f7869..9521f0d0a10 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js +++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethod.js @@ -133,8 +133,8 @@ export const PaymentMethod = ( { ), content: paymentGateway ? ( ) : null, diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethodList/PaymentMethodList.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethodList/PaymentMethodList.js index aa7095f45b5..f75f950d8e8 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/RemotePayments/components/PaymentMethodList/PaymentMethodList.js +++ b/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 = ( { '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', + ), + ), + ), + ); + } + +} diff --git a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/EvaluateMethod.php b/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/EvaluateMethod.php index 21caba52f9e..95b381522cd 100644 --- a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/EvaluateMethod.php +++ b/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; diff --git a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/Init.php b/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/Init.php index a1ed0b78a8b..0291d34aaf2 100644 --- a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/Init.php +++ b/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. * diff --git a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/PaymentGatewaysController.php b/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/PaymentGatewaysController.php index 0dd950a9ac5..bce1474fa86 100644 --- a/plugins/woocommerce-admin/src/Features/RemotePaymentMethods/PaymentGatewaysController.php +++ b/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(); }