Payments task: include Mercado Pago (https://github.com/woocommerce/woocommerce-admin/pull/6572)

* Added Mercado Pago payment gateway

# Conflicts:
#	client/task-list/tasks/payments/index.js
#	client/task-list/tasks/payments/methods.js

* Added tests

* Added plugin's name to constants

* Added default url

* Modified card copy

* Modified copy

* Added changelog

# Conflicts:
#	readme.txt

* Added testing instructions

# Conflicts:
#	TESTING-INSTRUCTIONS.md

* Added "Local Partner" ribbon

* Using local image

* Fixed typo

* Fixed line duplication

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+### Payments task: include Mercado Pago #6572
+
+- Create a brand new store.
+- Set one of the following countries in the first OBW step:
+```
+Mexico
+Brazil
+Argentina
+Chile
+Colombia
+Peru
+Uruguay
+```
+- Continue with the OBW and finish it up. 
+- Select `Choose payment methods` in the setup task list (`Get ready to start selling`).
+- Press the `Setup` button in the `Mercado Pago Payments` box.
+- Try the links presented after the plugin's installation and verify they are working.
+- Confirm that the `Mercado Pago payments for WooCommerce` plugin was installed.
+- Press `Continue`.
+- Now the `Mercado Pago Payments` option should appear as active.
+
 ### Update contrast and hover / active colors for analytics dropdown buttons #6504
 
 1. Go to analytics.

plugins/woocommerce-admin/client/task-list/tasks/payments/index.js

@@ -88,9 +88,15 @@ class Payments extends Component {
 
 	getRecommendedMethod() {
 		const { methods } = this.props;
-		return methods.find( ( m ) => m.key === 'wcpay' && m.visible )
-			? 'wcpay'
-			: 'stripe';
+		const recommendedMethod = methods.find(
+			( m ) =>
+				( m.key === 'wcpay' && m.visible ) ||
+				( m.key === 'mercadopago' && m.visible )
+		);
+		if ( ! recommendedMethod ) {
+			return 'stripe';
+		}
+		return recommendedMethod.key;
 	}
 
 	async markConfigured( methodName, queryParams = {} ) {
@@ -309,17 +315,16 @@ class Payments extends Component {
 						isRecommended && key !== 'wcpay';
 					const showRecommendedPill =
 						isRecommended && key === 'wcpay';
+					const recommendedText =
+						key === 'mercadopago'
+							? __( 'Local Partner', 'woocommerce-admin' )
+							: __( 'Recommended', 'woocommerce-admin' );
 
 					return (
 						<Card key={ key } className={ classes }>
 							{ showRecommendedRibbon && (
 								<div className="woocommerce-task-payment__recommended-ribbon">
-									<span>
-										{ __(
-											'Recommended',
-											'woocommerce-admin'
-										) }
-									</span>
+									<span>{ recommendedText }</span>
 								</div>
 							) }
 							<CardMedia isBorderless>{ before }</CardMedia>
@@ -328,10 +333,7 @@ class Payments extends Component {
 									{ title }
 									{ showRecommendedPill && (
 										<span className="woocommerce-task-payment__recommended-pill">
-											{ __(
-												'Recommended',
-												'woocommerce-admin'
-											) }
+											{ recommendedText }
 										</span>
 									) }
 								</H>
@@ -414,6 +416,7 @@ export default compose(
 			'woocommerce_mollie_payments_settings',
 			'woocommerce_payubiz_settings',
 			'woocommerce_paystack_settings',
+			'woocommerce_mercadopago_settings',
 		];
 
 		const options = optionNames.reduce( ( result, name ) => {

plugins/woocommerce-admin/client/task-list/tasks/payments/mercadopago.js

@@ -0,0 +1,100 @@
+/**
+ * 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';
+import { useSelect } from '@wordpress/data';
+import { SETTINGS_STORE_NAME } from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { getCountryCode } from '../../../dashboard/utils';
+
+export const MERCADOPAGO_PLUGIN = 'woocommerce-mercadopago';
+
+export const MercadoPago = ( { installStep, markConfigured } ) => {
+	const { countryCode } = useSelect( ( select ) => {
+		const { getSettings } = select( SETTINGS_STORE_NAME );
+		const { general: generalSettings = {} } = getSettings( 'general' );
+		return {
+			countryCode: getCountryCode(
+				generalSettings.woocommerce_default_country
+			),
+		};
+	} );
+	return (
+		<Stepper
+			isVertical
+			isPending={ ! installStep.isComplete }
+			currentStep={ installStep.isComplete ? 'connect' : 'install' }
+			steps={ [
+				installStep,
+				{
+					key: 'connect',
+					label: __(
+						'Connect to your Mercado Pago account',
+						'woocommerce-admin'
+					),
+					content: (
+						<MercadoPagoCredentialsStep
+							countryCode={ countryCode }
+							onFinish={ () => markConfigured( 'mercadopago' ) }
+						/>
+					),
+				},
+			] }
+		/>
+	);
+};
+
+const MercadoPagoCredentialsStep = ( { countryCode, onFinish } ) => {
+	const getRegistrationURL = () => {
+		const mercadoPagoURL = 'https://www.mercadopago.com';
+		if (
+			! [ 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ].includes(
+				countryCode
+			)
+		) {
+			return mercadoPagoURL;
+		}
+
+		// As each country has its own domain, we will return the correct one. Otherwise, for example, a Spanish speaker could be redirected to a Mercado Pago page in Portuguese, etc.
+		return `${ mercadoPagoURL }.${ countryCode.toLowerCase() }/registration-company?confirmation_url=${ mercadoPagoURL }.${ countryCode.toLowerCase() }%2Fcomo-cobrar`;
+	};
+
+	const settingsLink = (
+		<Link
+			href={ `${ adminUrl }admin.php?page=wc-settings&tab=checkout` }
+			target="_blank"
+			type="external"
+		/>
+	);
+
+	const accountLink = (
+		<Link href={ getRegistrationURL() } target="_blank" type="external" />
+	);
+
+	const configureText = interpolateComponents( {
+		mixedString: __(
+			'Mercado Pago can be configured under your {{settingsLink}}store settings.{{/settingsLink}} Create your Mercado Pago account {{accountLink}}here.{{/accountLink}}',
+			'woocommerce-admin'
+		),
+		components: {
+			accountLink,
+			settingsLink,
+		},
+	} );
+
+	return (
+		<>
+			<p>{ configureText }</p>
+			<Button isPrimary onClick={ onFinish }>
+				{ __( 'Continue', 'woocommerce-admin' ) }
+			</Button>
+		</>
+	);
+};

plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js

@@ -29,6 +29,7 @@ import {
 	isWCPaySupported,
 } from './wcpay';
 import PayPal, { PAYPAL_PLUGIN } from './paypal';
+import { MercadoPago, MERCADOPAGO_PLUGIN } from './mercadopago';
 import Klarna from './klarna';
 import EWay from './eway';
 import Razorpay from './razorpay';
@@ -209,6 +210,35 @@ export function getPaymentMethods( {
 				};
 			},
 		},
+		{
+			key: 'mercadopago',
+			title: __(
+				'Mercado Pago Checkout Pro & Custom',
+				'woocommerce-admin'
+			),
+			content: (
+				<>
+					{ __(
+						'Accept credit and debit cards, offline (cash or bank transfer) and logged-in payments with money in Mercado Pago. Safe and secure payments with the leading payment processor in LATAM.',
+						'woocommerce-admin'
+					) }
+				</>
+			),
+			before: (
+				<img
+					src={ wcAdminAssetUrl + 'onboarding/mercadopago.png' }
+					alt=""
+				/>
+			),
+			visible: [ 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ].includes(
+				countryCode
+			),
+			plugins: [ MERCADOPAGO_PLUGIN ],
+			container: <MercadoPago />,
+			isConfigured: activePlugins.includes( MERCADOPAGO_PLUGIN ),
+			isEnabled: enabledPaymentGateways.includes( 'mercadopago' ),
+			optionName: 'woocommerce_mercadopago_settings',
+		},
 		{
 			key: 'paypal',
 			title: __( 'PayPal Payments', 'woocommerce-admin' ),

plugins/woocommerce-admin/client/task-list/test/payments.js

@@ -148,6 +148,47 @@ describe( 'TaskList > Payments', () => {
 				} ).find( ( method ) => method.key === 'mollie' ).isConfigured
 			).toBe( true );
 		} );
+
+		describe( 'MercadoPago', () => {
+			it( 'Is enabled for supported countries', () => {
+				[ 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ].forEach(
+					( countryCode ) => {
+						params.countryCode = countryCode;
+						const methods = getPaymentMethods( params );
+						expect(
+							methods.some(
+								( method ) => method.key === 'mercadopago'
+							)
+						).toBe( true );
+					}
+				);
+			} );
+
+			it( 'Detects whether the plugin is enabled based on the received options', () => {
+				const mercadoPagoParams = {
+					...params,
+					onboardingStatus: {
+						enabledPaymentGateways: [ 'mercadopago' ],
+					},
+				};
+
+				const mercadoPagoMethod = getPaymentMethods(
+					mercadoPagoParams
+				).find( ( method ) => method.key === 'mercadopago' );
+
+				expect( mercadoPagoMethod.isEnabled ).toBe( true );
+			} );
+		} );
+
+		it( 'If the plugin is active `mercadopago` is marked as `isConfigured`', () => {
+			expect(
+				getPaymentMethods( {
+					...params,
+					activePlugins: [ 'woocommerce-mercadopago' ],
+				} ).find( ( method ) => method.key === 'mercadopago' )
+					.isConfigured
+			).toBe( true );
+		} );
 	} );
 
 	describe( 'PayPal', () => {

plugins/woocommerce-admin/packages/data/src/plugins/constants.js

@@ -60,6 +60,10 @@ export const pluginNames = {
 		'WooCommerce ShipStation Gateway',
 		'woocommerce-admin'
 	),
+	'woocommerce-mercadopago': __(
+		'Mercado Pago payments for WooCommerce',
+		'woocommerce-admin'
+	),
 	'kliken-marketing-for-google': __( 'Google Ads', 'woocommerce-admin' ),
 	'woo-razorpay': __( 'Razorpay', 'woocommerce-admin' ),
 	mailpoet: __( 'MailPoet', 'woocommerce-admin' ),

plugins/woocommerce-admin/readme.txt

@@ -135,6 +135,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Dev: Add TypeScript and page objects to the E2E test suite. #6582
 - Dev: Introduce Typescript to Navigation utils #6477
 - Add: Paystack payment provider to several african countries. #6579
+- Dev: Payments task: include Mercado Pago #6572
 
 == 2.1.3 3/14/2021  ==
 

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

@@ -703,6 +703,7 @@ class Onboarding {
 		$options[] = 'woocommerce_task_list_tracked_completed_tasks';
 		$options[] = 'woocommerce_task_list_dismissed_tasks';
 		$options[] = 'woocommerce_allow_tracking';
+		$options[] = 'woocommerce_mercadopago_settings';
 		$options[] = 'woocommerce_stripe_settings';
 		$options[] = 'woocommerce-ppcp-settings';
 		$options[] = 'woocommerce_ppcp-gateway_settings';
@@ -768,6 +769,7 @@ class Onboarding {
 				'mollie-payments-for-woocommerce'     => 'mollie-payments-for-woocommerce/mollie-payments-for-woocommerce.php',
 				'payu-india'                          => 'payu-india/index.php',
 				'mailpoet'                            => 'mailpoet/mailpoet.php',
+				'woocommerce-mercadopago'             => 'woocommerce-mercadopago/woocommerce-mercadopago.php',
 			)
 		);
 		return array_merge( $plugins, $onboarding_plugins );