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.
This commit is contained in:
Sam Seay
GitHub
parent
1fc78d93c9
commit
4649817d9e
|
|
@ -0,0 +1,77 @@
|
|||
export const PayUIndiaLogo = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 385.61334 192.41333"
|
||||
width="100"
|
||||
>
|
||||
<g transform="matrix(1.3333333,0,0,-1.3333333,0,192.41333)">
|
||||
<g transform="scale(0.1)" id="g12">
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 2507.22,898.414 c -18.79,0 -34.01,15.234 -34,34.024 l 0.05,150.352 h -12.54 c -77.78,0 -106.71,-12.83 -106.71,-83.685 V 833.316 c -0.01,-0.351 -0.05,-0.703 -0.05,-1.054 v -36.34 c -0.02,-1.258 -0.1,-2.43 -0.1,-3.731 V 560.543 c 0,-28.293 -5.45,-50.82 -16.7,-68.32 -21.21,-32.676 -63.2,-47.532 -130.38,-47.618 -67.15,0.086 -109.13,14.93 -130.34,47.579 -11.28,17.507 -16.74,40.046 -16.74,68.359 v 231.648 c 0,1.301 -0.07,2.473 -0.09,3.731 v 36.34 c 0,0.351 -0.04,0.703 -0.05,1.054 v 165.789 c 0,70.855 -28.93,83.685 -106.71,83.685 h -24.49 c -77.79,0 -106.71,-12.83 -106.71,-83.685 V 832.262 656.723 560.543 c 0,-70.547 15.91,-130.281 46.65,-178.434 59.37,-93.3 174.38,-142.988 337.88,-142.988 0.2,0 0.4,0.008 0.6,0.008 0.21,0 0.4,-0.008 0.61,-0.008 163.5,0 278.51,49.688 337.88,142.988 30.74,48.153 46.65,107.887 46.65,178.434 v 96.18 175.539 66.121 l -84.71,0.031"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 2866.82,1140.67 -127.94,0.05 c -13.95,0 -25.26,11.32 -25.25,25.27 l 0.04,129.52 c 0.01,13.96 11.33,25.27 25.28,25.27 l 127.93,-0.05 c 13.96,0 25.27,-11.32 25.27,-25.28 l -0.05,-129.52 c 0,-13.95 -11.32,-25.26 -25.28,-25.26"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 2696.34,1320.76 -86.89,0.03 c -9.48,0.01 -17.16,7.69 -17.16,17.16 l 0.03,87.97 c 0.01,9.49 7.7,17.16 17.17,17.16 l 86.89,-0.03 c 9.48,0 17.16,-7.69 17.16,-17.17 l -0.03,-87.97 c -0.01,-9.48 -7.69,-17.15 -17.17,-17.15"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 496.59,815.961 c 0,-104.07 -26.574,-160.469 -166.75,-160.469 H 114.059 v 268.586 c 0,37.246 13.847,51.094 51.089,51.094 H 329.84 c 105.605,0 166.75,-26.055 166.75,-159.211 z M 329.84,1082.95 H 143.77 C 44.3438,1082.95 0.00390625,1038.6 0.00390625,939.164 V 300.512 C 0.00390625,262.102 12.332,249.77 50.7422,249.77 h 12.5742 c 38.4136,0 50.7426,12.332 50.7426,50.742 V 548.98 H 329.84 c 191.582,0 280.812,84.844 280.812,266.981 0,182.148 -89.23,266.989 -280.812,266.989"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 1012.01,536.82 v -87.547 c 0,-71.375 -26.455,-112.695 -161.721,-112.695 -89.359,0 -132.801,32.344 -132.801,98.863 0,72.954 43.578,101.379 155.434,101.379 z M 850.289,899.801 c -73.738,0 -119.949,-9.25 -137.476,-12.754 -31.036,-6.75 -44.012,-15.266 -44.012,-50.559 V 826.43 c 0,-13.828 2.047,-23.407 6.441,-30.145 5.113,-7.851 13.348,-11.836 24.488,-11.836 5.434,0 11.727,0.918 19.243,2.793 17.722,4.434 74.379,13.594 136.347,13.594 111.297,0 156.69,-30.832 156.69,-106.406 V 626.988 H 871.66 c -180.422,0 -264.461,-60.859 -264.461,-191.547 0,-126.761 86.778,-196.57 244.352,-196.57 187.249,0 270.749,63.719 270.749,206.633 V 694.43 c 0,138.191 -88.97,205.371 -272.011,205.371"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 1739.43,870.035 c -7.95,9.981 -22.98,11.356 -38.05,11.356 h -11.3 c -37.55,0 -52.28,-11.582 -60.59,-47.606 L 1525.15,400.078 c -13.02,-53.297 -31.32,-63.039 -62.63,-63.039 -38.34,0 -53.69,9.152 -68.97,63.25 l -118.18,433.699 c -9.78,36.328 -24.21,47.403 -61.77,47.403 h -10.06 c -15.16,0 -30.26,-1.395 -38.01,-11.504 -7.76,-10.125 -5.14,-25.235 -1.14,-40.086 L 1283.82,392.34 c 22.4,-83.719 49.03,-153.02 148.53,-153.02 18.57,0 35.75,2.578 50.04,7.399 -30.18,-94.91 -60.88,-136.77 -151.41,-146.071 -18.37,-1.5269 -30.31,-4.1597 -36.96,-13.0777 -6.91,-9.25 -5.34,-22.5 -2.87,-34.332 l 2.49,-11.2188 C 1299.04,16.0781 1308.25,0 1337.37,0 c 3.06,0 6.35,0.160156 9.88,0.460938 C 1482.43,9.30859 1554.86,82.0898 1597.24,251.66 l 144.62,578.453 c 3.43,14.844 5.5,29.95 -2.43,39.922"
|
||||
/>
|
||||
<path
|
||||
style={ {
|
||||
fill: '#90cc23',
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
} }
|
||||
d="m 2679.57,1140.78 -172.26,0.06 c -18.79,0 -34.02,-15.23 -34.03,-34.02 l -0.01,-24.03 h 11.95 c 77.78,0 106.71,-12.83 106.71,-83.685 V 898.383 l 87.55,-0.028 c 18.79,-0.011 34.02,15.215 34.03,34.004 l 0.06,174.381 c 0,18.79 -15.22,34.03 -34,34.04"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 ) => {
|
||||
|
|
|
|||
|
|
@ -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: <PayUIndiaLogo />,
|
||||
visible: countryCode === 'IN' && ! hasCbdIndustry,
|
||||
plugins: [ 'payu-india' ],
|
||||
container: <PayUIndia />,
|
||||
isConfigured: activePlugins.includes( 'payu-india' ),
|
||||
isEnabled: enabledPaymentGateways.includes( 'payubiz' ),
|
||||
optionName: 'woocommerce_payubiz_settings',
|
||||
},
|
||||
{
|
||||
key: 'cod',
|
||||
title: __( 'Cash on delivery', 'woocommerce-admin' ),
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Stepper
|
||||
isVertical
|
||||
isPending={ ! installStep.isComplete }
|
||||
currentStep={ installStep.isComplete ? 'connect' : 'install' }
|
||||
steps={ [
|
||||
installStep,
|
||||
{
|
||||
key: 'connect',
|
||||
label: __(
|
||||
'Connect to your PayU account',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
content: (
|
||||
<PayUCredentialsStep
|
||||
onFinish={ () => {
|
||||
markConfigured( 'payubiz' );
|
||||
} }
|
||||
/>
|
||||
),
|
||||
},
|
||||
] }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const PayUCredentialsStep = ( { onFinish } ) => {
|
||||
const settingsLink = (
|
||||
<Link
|
||||
href={ `${ adminUrl }admin.php?page=wc-settings&tab=checkout§ion=payubiz` }
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
);
|
||||
|
||||
const accountLink = (
|
||||
<Link
|
||||
href={ 'https://onboarding.payu.in/app/account' }
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
);
|
||||
|
||||
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 (
|
||||
<>
|
||||
<p>{ configureText }</p>
|
||||
<Button isPrimary onClick={ onFinish }>
|
||||
{ __( 'Continue', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -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: [],
|
||||
|
|
|
|||
|
|
@ -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 ==
|
||||
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
|
|
|||
Loading…
Reference in New Issue