From 4649817d9e44fc24f7ef7b4231cfa7362ab0ae59 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Wed, 17 Feb 2021 10:08:35 +1300 Subject: [PATCH] Implement the PayU payment task and fix a bug (https://github.com/woocommerce/woocommerce-admin/pull/6332) Fixes woocommerce/woocommerce-admin#6172 This adds the PayU plugin as a payment task option. Based on the requirements, we've opted for this just to be a simple task that installs the plugin and lets the user configure the plugin later via it's settings screen. --- .../tasks/payments/images/payu-india.js | 77 +++++++++++++++++++ .../client/task-list/tasks/payments/index.js | 53 ++++++++----- .../task-list/tasks/payments/methods.js | 21 +++++ .../task-list/tasks/payments/payu-india.js | 73 ++++++++++++++++++ .../client/task-list/test/payments.js | 36 +++++++++ plugins/woocommerce-admin/readme.txt | 5 ++ .../src/Features/Onboarding.php | 2 + 7 files changed, 248 insertions(+), 19 deletions(-) create mode 100644 plugins/woocommerce-admin/client/task-list/tasks/payments/images/payu-india.js create mode 100644 plugins/woocommerce-admin/client/task-list/tasks/payments/payu-india.js diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/images/payu-india.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/images/payu-india.js new file mode 100644 index 00000000000..d575c7f0e58 --- /dev/null +++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/images/payu-india.js @@ -0,0 +1,77 @@ +export const PayUIndiaLogo = () => { + return ( + + + + + + + + + + + + + + ); +}; diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js index 6f23f4a3af3..09586734c15 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js +++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js @@ -37,6 +37,26 @@ import { createNoticesFromResponse } from '../../../lib/notices'; import { getCountryCode } from '../../../dashboard/utils'; import { getPaymentMethods } from './methods'; +export const setMethodEnabledOption = async ( + optionName, + value, + { clearTaskStatusCache, updateOptions, options } +) => { + const methodOptions = options[ optionName ]; + + // Don't update the option if it already has the same value. + if ( methodOptions.enabled !== value ) { + await updateOptions( { + [ optionName ]: { + ...methodOptions, + enabled: value, + }, + } ); + + clearTaskStatusCache(); + } +}; + class Payments extends Component { constructor( props ) { super( ...arguments ); @@ -73,21 +93,23 @@ class Payments extends Component { : 'stripe'; } - markConfigured( method, queryParams = {} ) { - const { clearTaskStatusCache } = this.props; + async markConfigured( methodName, queryParams = {} ) { const { enabledMethods } = this.state; + const { methods } = this.props; + + const method = methods.find( ( option ) => option.key === methodName ); this.setState( { enabledMethods: { ...enabledMethods, - [ method ]: true, + [ methodName ]: true, }, } ); - clearTaskStatusCache(); + await setMethodEnabledOption( method.optionName, 'yes', this.props ); recordEvent( 'tasklist_payment_connect_method', { - payment_method: method, + payment_method: methodName, } ); getHistory().push( @@ -146,12 +168,7 @@ class Payments extends Component { } async toggleMethod( key ) { - const { - clearTaskStatusCache, - methods, - options, - updateOptions, - } = this.props; + const { methods } = this.props; const { enabledMethods } = this.state; const method = methods.find( ( option ) => option.key === key ); @@ -163,14 +180,11 @@ class Payments extends Component { payment_method: key, } ); - await updateOptions( { - [ method.optionName ]: { - ...options[ method.optionName ], - enabled: method.isEnabled ? 'no' : 'yes', - }, - } ); - - clearTaskStatusCache(); + await setMethodEnabledOption( + method.optionName, + method.isEnabled ? 'no' : 'yes', + this.props + ); } async handleClick( method ) { @@ -383,6 +397,7 @@ export default compose( 'woocommerce_eway_settings', 'woocommerce_razorpay_settings', 'woocommerce_mollie_payments_settings', + 'woocommerce_payubiz_settings', ]; const options = optionNames.reduce( ( result, name ) => { diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js index d4455a07707..c8c2295121c 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js +++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js @@ -20,6 +20,7 @@ import CodLogo from './images/cod'; import WCPayLogo from './images/wcpay'; import RazorpayLogo from './images/razorpay'; import { MollieLogo } from './images/mollie'; +import { PayUIndiaLogo } from './images/payu-india'; import Stripe from './stripe'; import Square from './square'; import WCPay from './wcpay'; @@ -29,6 +30,7 @@ import PayFast from './payfast'; import EWay from './eway'; import Razorpay from './razorpay'; import { Mollie } from './mollie'; +import { PayUIndia } from './payu-india'; import WCPayUsageModal from './wcpay-usage-modal'; import { createNoticesFromResponse } from '../../../lib/notices'; @@ -374,6 +376,25 @@ export function getPaymentMethods( { options.woocommerce_razorpay_settings.enabled === 'yes', optionName: 'woocommerce_razorpay_settings', }, + { + key: 'payubiz', + title: __( 'PayU for WooCommerce', 'woocommerce-admin' ), + content: ( + <> + { __( + 'Enable PayU’s exclusive plugin for WooCommerce to start accepting payments in 100+ payment methods available in India including credit cards, debit cards, UPI, & more!', + 'woocommerce-admin' + ) } + + ), + before: , + visible: countryCode === 'IN' && ! hasCbdIndustry, + plugins: [ 'payu-india' ], + container: , + isConfigured: activePlugins.includes( 'payu-india' ), + isEnabled: enabledPaymentGateways.includes( 'payubiz' ), + optionName: 'woocommerce_payubiz_settings', + }, { key: 'cod', title: __( 'Cash on delivery', 'woocommerce-admin' ), diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/payu-india.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/payu-india.js new file mode 100644 index 00000000000..7891f17510a --- /dev/null +++ b/plugins/woocommerce-admin/client/task-list/tasks/payments/payu-india.js @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { ADMIN_URL as adminUrl } from '@woocommerce/wc-admin-settings'; +import { Stepper, Link } from '@woocommerce/components'; +import { Button } from '@wordpress/components'; +import interpolateComponents from 'interpolate-components'; + +export const PayUIndia = ( { installStep, markConfigured } ) => { + return ( + { + markConfigured( 'payubiz' ); + } } + /> + ), + }, + ] } + /> + ); +}; + +const PayUCredentialsStep = ( { onFinish } ) => { + const settingsLink = ( + + ); + + const accountLink = ( + + ); + + const configureText = interpolateComponents( { + mixedString: __( + 'PayU can be configured under your {{settingsLink}}store settings.{{/settingsLink}} Create your PayU account {{accountLink}}here.{{/accountLink}}', + 'woocommerce-admin' + ), + components: { + accountLink, + settingsLink, + }, + } ); + + return ( + <> +

{ configureText }

+ + + ); +}; diff --git a/plugins/woocommerce-admin/client/task-list/test/payments.js b/plugins/woocommerce-admin/client/task-list/test/payments.js index 4978d2d0e7e..a62636a6151 100644 --- a/plugins/woocommerce-admin/client/task-list/test/payments.js +++ b/plugins/woocommerce-admin/client/task-list/test/payments.js @@ -10,10 +10,46 @@ import apiFetch from '@wordpress/api-fetch'; */ import { PayPal, PAYPAL_PLUGIN } from '../tasks/payments/paypal'; import { getPaymentMethods } from '../tasks/payments/methods'; +import { setMethodEnabledOption } from '../../task-list/tasks/payments'; jest.mock( '@wordpress/api-fetch' ); describe( 'TaskList > Payments', () => { + describe( 'Payments', () => { + const optionName = 'woocommerce_mollie_payments_settings'; + + it( 'does not update an option if the value is the same as the current one', async () => { + const mockProps = { + clearTaskStatusCache: jest.fn(), + updateOptions: jest.fn(), + options: { + woocommerce_klarna_payments_settings: false, + woocommerce_mollie_payments_settings: { enabled: 'yes' }, + }, + }; + + await setMethodEnabledOption( optionName, 'yes', mockProps ); + expect( mockProps.updateOptions ).not.toHaveBeenCalled(); + } ); + + it( 'does update an option if the value is different to the current one', async () => { + const mockProps = { + clearTaskStatusCache: jest.fn(), + updateOptions: jest.fn(), + options: { + woocommerce_klarna_payments_settings: false, + woocommerce_mollie_payments_settings: { enabled: 'no' }, + }, + }; + + await setMethodEnabledOption( optionName, 'yes', mockProps ); + + expect( mockProps.updateOptions ).toHaveBeenCalledWith( { + woocommerce_mollie_payments_settings: { enabled: 'yes' }, + } ); + } ); + } ); + describe( 'Methods', () => { const params = { activePlugins: [], diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 6f6cb6ff1f7..02c85fcfd63 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -97,6 +97,11 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt - Fix: Onboarding - Fixed "Business Details" error. #6271 - Enhancement: Use the new Paypal payments plugin for onboarding. #6261 - Fix: Show management links when only main task list is hidden. #6291 +- Dev: Allow highlight tooltip to use body tag as parent. #6309 +- Add: Allow users to install the PayU plugin in the payments setup task. #6332 +- Fix: Persist the enabling of plugins in the payments setup task. #6332 + +== Changelog == == 1.9.0 1/15/2021 == diff --git a/plugins/woocommerce-admin/src/Features/Onboarding.php b/plugins/woocommerce-admin/src/Features/Onboarding.php index 3470627dcc1..8f4335c8b80 100644 --- a/plugins/woocommerce-admin/src/Features/Onboarding.php +++ b/plugins/woocommerce-admin/src/Features/Onboarding.php @@ -737,6 +737,7 @@ class Onboarding { $options[] = 'woocommerce_woocommerce_payments_settings'; $options[] = 'woocommerce_eway_settings'; $options[] = 'woocommerce_razorpay_settings'; + $options[] = 'woocommerce_payubiz_settings'; $options[] = 'woocommerce_mollie_payments_settings'; return $options; @@ -783,6 +784,7 @@ class Onboarding { 'woocommerce-gateway-eway' => 'woocommerce-gateway-eway/woocommerce-gateway-eway.php', 'woo-razorpay' => 'woo-razorpay/woo-razorpay.php', 'mollie-payments-for-woocommerce' => 'mollie-payments-for-woocommerce/mollie-payments-for-woocommerce.php', + 'payu-india' => 'payu-india/index.php', ) ); return array_merge( $plugins, $onboarding_plugins );