From 866487ee2773f0fe6e503b6c8a9c89901639bed0 Mon Sep 17 00:00:00 2001 From: Fernando Date: Wed, 8 Apr 2020 20:17:32 -0300 Subject: [PATCH] Bugfix on payments step in CBD flow (https://github.com/woocommerce/woocommerce-admin/pull/4061) * Bugfix on payments step in CBD flow The `array_search` method was changed to `in_array` * After pressing Connect a new tab opens with the Square webpage * Updated behavior for non CBD Square payment connection * Square option's name updated * Replaced

tag with a

tag Since there was a `validateDOMNesting` warning because we weren't adding only text inside a

tag, the `p` tag was changed to a `div`. Co-authored-by: Fernando Marichal --- .../task-list/tasks/payments/index.js | 5 ++- .../task-list/tasks/payments/methods.js | 5 ++- .../task-list/tasks/payments/square.js | 41 ++++++++++++++++--- .../src/API/OnboardingPlugins.php | 2 +- 4 files changed, 43 insertions(+), 10 deletions(-) diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js index b85976fa4d9..e5e328c79a8 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js @@ -218,6 +218,7 @@ class Payments extends Component { query, installStep: this.getInstallStep(), markConfigured: this.markConfigured, + hasCbdIndustry: currentMethod.hasCbdIndustry, } ) } ); @@ -282,9 +283,9 @@ class Payments extends Component { ) } -

+

{ content } -

+
{ container && ! isConfigured ? ( diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js index b6f536aff62..76a2acdf584 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js @@ -68,7 +68,9 @@ export function getPaymentMethods( { const wcPayDocLink = ( @@ -269,6 +271,7 @@ export function getPaymentMethods( { options.woocommerce_square_credit_card_settings.enabled === 'yes', optionName: 'woocommerce_square_credit_card_settings', + hasCbdIndustry, }, { key: 'payfast', diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js index febcd35427e..26a3420916d 100644 --- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js +++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/square.js @@ -15,6 +15,7 @@ import { getQuery } from '@woocommerce/navigation'; import { WC_ADMIN_NAMESPACE } from 'wc-api/constants'; import withSelect from 'wc-api/with-select'; import { Stepper } from '@woocommerce/components'; +import { getAdminLink } from '@woocommerce/wc-admin-settings'; class Square extends Component { constructor( props ) { @@ -43,12 +44,17 @@ class Square extends Component { } async connect() { - const { createNotice, options, updateOptions } = this.props; + const { + createNotice, + hasCbdIndustry, + options, + updateOptions, + } = this.props; this.setState( { isPending: true } ); updateOptions( { - woocommerce_stripe_settings: { - ...options.woocommerce_stripe_settings, + woocommerce_square_credit_card_settings: { + ...options.woocommerce_square_credit_card_settings, enabled: 'yes', }, } ); @@ -59,6 +65,13 @@ class Square extends Component { ); try { + let newWindow = null; + if ( hasCbdIndustry ) { + // It's necessary to declare the new tab before the async call, + // otherwise, it won't be possible to open it. + newWindow = window.open( '/', '_blank' ); + } + const result = await apiFetch( { path: WC_ADMIN_NAMESPACE + '/onboarding/plugins/connect-square', method: 'POST', @@ -67,17 +80,29 @@ class Square extends Component { if ( ! result || ! result.connectUrl ) { this.setState( { isPending: false } ); createNotice( 'error', errorMessage ); + if ( hasCbdIndustry ) { + newWindow.close(); + } return; } this.setState( { isPending: true } ); - window.location = result.connectUrl; + this.redirect( result.connectUrl, newWindow ); } catch ( error ) { this.setState( { isPending: false } ); createNotice( 'error', errorMessage ); } } + redirect( connectUrl, newWindow ) { + if ( newWindow ) { + newWindow.location.href = connectUrl; + window.location = getAdminLink( 'admin.php?page=wc-admin' ); + } else { + window.location = connectUrl; + } + } + render() { const { installStep } = this.props; const { isPending } = this.state; @@ -121,9 +146,13 @@ class Square extends Component { export default compose( withSelect( ( select ) => { const { getOptions, isGetOptionsRequesting } = select( 'wc-api' ); - const options = getOptions( [ 'woocommerce_stripe_settings' ] ); + const options = getOptions( [ + 'woocommerce_square_credit_card_settings', + ] ); const optionsIsRequesting = Boolean( - isGetOptionsRequesting( [ 'woocommerce_stripe_settings' ] ) + isGetOptionsRequesting( [ + 'woocommerce_square_credit_card_settings', + ] ) ); return { diff --git a/plugins/woocommerce-admin/src/API/OnboardingPlugins.php b/plugins/woocommerce-admin/src/API/OnboardingPlugins.php index 192a6a0d96b..b4ccda95c2b 100644 --- a/plugins/woocommerce-admin/src/API/OnboardingPlugins.php +++ b/plugins/woocommerce-admin/src/API/OnboardingPlugins.php @@ -505,7 +505,7 @@ class OnboardingPlugins extends \WC_REST_Data_Controller { if ( 'US' === WC()->countries->get_base_country() ) { $profile = get_option( Onboarding::PROFILE_DATA_OPTION, array() ); if ( ! empty( $profile['industry'] ) ) { - $has_cbd_industry = array_search( 'cbd-other-hemp-derived-products', array_column( $profile['industry'], 'slug' ) ); + $has_cbd_industry = in_array( 'cbd-other-hemp-derived-products', array_column( $profile['industry'], 'slug' ), true ); } }