diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 6103e5da1c7..54fa0ab5945 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/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. 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 cc9b3001ffa..0aaade79b8c 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/index.js +++ b/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 ( { showRecommendedRibbon && (
- - { __( - 'Recommended', - 'woocommerce-admin' - ) } - + { recommendedText }
) } { before } @@ -328,10 +333,7 @@ class Payments extends Component { { title } { showRecommendedPill && ( - { __( - 'Recommended', - 'woocommerce-admin' - ) } + { recommendedText } ) } @@ -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 ) => { diff --git a/plugins/woocommerce-admin/client/task-list/tasks/payments/mercadopago.js b/plugins/woocommerce-admin/client/task-list/tasks/payments/mercadopago.js new file mode 100644 index 00000000000..f190e16b96a --- /dev/null +++ b/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 ( + 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 = ( + + ); + + const accountLink = ( + + ); + + 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 ( + <> +

{ configureText }

+ + + ); +}; 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 406327cf136..d258ce2ba0f 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/payments/methods.js +++ b/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: ( + + ), + visible: [ 'AR', 'BR', 'CL', 'CO', 'MX', 'PE', 'UY' ].includes( + countryCode + ), + plugins: [ MERCADOPAGO_PLUGIN ], + container: , + isConfigured: activePlugins.includes( MERCADOPAGO_PLUGIN ), + isEnabled: enabledPaymentGateways.includes( 'mercadopago' ), + optionName: 'woocommerce_mercadopago_settings', + }, { key: 'paypal', title: __( 'PayPal Payments', 'woocommerce-admin' ), diff --git a/plugins/woocommerce-admin/client/task-list/test/payments.js b/plugins/woocommerce-admin/client/task-list/test/payments.js index ba15b9c0ffa..b086b955a96 100644 --- a/plugins/woocommerce-admin/client/task-list/test/payments.js +++ b/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', () => { diff --git a/plugins/woocommerce-admin/images/onboarding/mercadopago.png b/plugins/woocommerce-admin/images/onboarding/mercadopago.png new file mode 100644 index 00000000000..39a790e5bf4 Binary files /dev/null and b/plugins/woocommerce-admin/images/onboarding/mercadopago.png differ diff --git a/plugins/woocommerce-admin/packages/data/src/plugins/constants.js b/plugins/woocommerce-admin/packages/data/src/plugins/constants.js index 39bc4e2e8c8..92e2942f08c 100644 --- a/plugins/woocommerce-admin/packages/data/src/plugins/constants.js +++ b/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' ), diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 516bd340793..b6e23df6167 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/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 == diff --git a/plugins/woocommerce-admin/src/Features/Onboarding.php b/plugins/woocommerce-admin/src/Features/Onboarding.php index 9ce560954c6..5090e8b4011 100644 --- a/plugins/woocommerce-admin/src/Features/Onboarding.php +++ b/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 );