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 <p> tag with a <div> tag

Since there was a `validateDOMNesting` warning because we weren't adding only text inside a <p> tag, the `p` tag was changed to a `div`.

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

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,
 					} ) }
 				</Card>
 			);
@@ -282,9 +283,9 @@ class Payments extends Component {
 										</span>
 									) }
 								</H>
-								<p className="woocommerce-task-payment__content">
+								<div className="woocommerce-task-payment__content">
 									{ content }
-								</p>
+								</div>
 							</div>
 							<div className="woocommerce-task-payment__after">
 								{ container && ! isConfigured ? (

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

@@ -68,7 +68,9 @@ export function getPaymentMethods( {
 
 		const wcPayDocLink = (
 			<Link
-				href={ 'https://docs.woocommerce.com/document/payments/testing/dev-mode/' }
+				href={
+					'https://docs.woocommerce.com/document/payments/testing/dev-mode/'
+				}
 				target="_blank"
 				type="external"
 			/>
@@ -269,6 +271,7 @@ export function getPaymentMethods( {
 				options.woocommerce_square_credit_card_settings.enabled ===
 					'yes',
 			optionName: 'woocommerce_square_credit_card_settings',
+			hasCbdIndustry,
 		},
 		{
 			key: 'payfast',

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 {

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 );
 			}
 		}