2019-10-03 16:03:29 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import { Component, Fragment } from '@wordpress/element';
|
|
|
|
import apiFetch from '@wordpress/api-fetch';
|
2019-12-02 17:39:22 +00:00
|
|
|
import { Button } from '@wordpress/components';
|
2020-06-10 23:49:27 +00:00
|
|
|
import { withDispatch, withSelect } from '@wordpress/data';
|
2020-03-15 21:45:19 +00:00
|
|
|
import { getQuery } from '@woocommerce/navigation';
|
2020-08-13 02:05:22 +00:00
|
|
|
import { compose } from '@wordpress/compose';
|
2020-03-15 21:45:19 +00:00
|
|
|
import { Stepper } from '@woocommerce/components';
|
2020-04-08 23:17:32 +00:00
|
|
|
import { getAdminLink } from '@woocommerce/wc-admin-settings';
|
2020-06-10 23:49:27 +00:00
|
|
|
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
2019-10-03 16:03:29 +00:00
|
|
|
|
2020-08-13 02:05:22 +00:00
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import { WC_ADMIN_NAMESPACE } from '../../../wc-api/constants';
|
|
|
|
|
2019-10-03 16:03:29 +00:00
|
|
|
class Square extends Component {
|
|
|
|
constructor( props ) {
|
|
|
|
super( props );
|
|
|
|
|
|
|
|
this.state = {
|
2020-03-15 21:45:19 +00:00
|
|
|
isPending: false,
|
2019-10-03 16:03:29 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.connect = this.connect.bind( this );
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2020-03-15 21:45:19 +00:00
|
|
|
const { createNotice, markConfigured } = this.props;
|
2019-10-03 16:03:29 +00:00
|
|
|
const query = getQuery();
|
|
|
|
// Handle redirect back from Square
|
|
|
|
if ( query[ 'square-connect' ] ) {
|
2020-02-14 02:23:21 +00:00
|
|
|
if ( query[ 'square-connect' ] === '1' ) {
|
2020-03-15 21:45:19 +00:00
|
|
|
createNotice(
|
2019-10-03 16:03:29 +00:00
|
|
|
'success',
|
|
|
|
__( 'Square connected successfully.', 'woocommerce-admin' )
|
|
|
|
);
|
2020-03-15 21:45:19 +00:00
|
|
|
markConfigured( 'square' );
|
2019-10-03 16:03:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async connect() {
|
2020-04-08 23:17:32 +00:00
|
|
|
const {
|
|
|
|
createNotice,
|
|
|
|
hasCbdIndustry,
|
|
|
|
options,
|
|
|
|
updateOptions,
|
|
|
|
} = this.props;
|
2020-03-15 21:45:19 +00:00
|
|
|
this.setState( { isPending: true } );
|
2019-10-03 16:03:29 +00:00
|
|
|
|
|
|
|
updateOptions( {
|
2020-04-08 23:17:32 +00:00
|
|
|
woocommerce_square_credit_card_settings: {
|
|
|
|
...options.woocommerce_square_credit_card_settings,
|
2019-10-03 16:03:29 +00:00
|
|
|
enabled: 'yes',
|
|
|
|
},
|
|
|
|
} );
|
|
|
|
|
|
|
|
const errorMessage = __(
|
|
|
|
'There was an error connecting to Square. Please try again or skip to connect later in store settings.',
|
|
|
|
'woocommerce-admin'
|
|
|
|
);
|
|
|
|
|
|
|
|
try {
|
2020-04-08 23:17:32 +00:00
|
|
|
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' );
|
|
|
|
}
|
|
|
|
|
2019-10-03 16:03:29 +00:00
|
|
|
const result = await apiFetch( {
|
2020-04-20 02:04:13 +00:00
|
|
|
path: WC_ADMIN_NAMESPACE + '/plugins/connect-square',
|
2019-10-03 16:03:29 +00:00
|
|
|
method: 'POST',
|
|
|
|
} );
|
|
|
|
|
|
|
|
if ( ! result || ! result.connectUrl ) {
|
2020-03-15 21:45:19 +00:00
|
|
|
this.setState( { isPending: false } );
|
|
|
|
createNotice( 'error', errorMessage );
|
2020-04-08 23:17:32 +00:00
|
|
|
if ( hasCbdIndustry ) {
|
|
|
|
newWindow.close();
|
|
|
|
}
|
2019-10-03 16:03:29 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-03-15 21:45:19 +00:00
|
|
|
this.setState( { isPending: true } );
|
2020-04-08 23:17:32 +00:00
|
|
|
this.redirect( result.connectUrl, newWindow );
|
2019-10-03 16:03:29 +00:00
|
|
|
} catch ( error ) {
|
2020-03-15 21:45:19 +00:00
|
|
|
this.setState( { isPending: false } );
|
|
|
|
createNotice( 'error', errorMessage );
|
2019-10-03 16:03:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-08 23:17:32 +00:00
|
|
|
redirect( connectUrl, newWindow ) {
|
|
|
|
if ( newWindow ) {
|
|
|
|
newWindow.location.href = connectUrl;
|
|
|
|
window.location = getAdminLink( 'admin.php?page=wc-admin' );
|
|
|
|
} else {
|
|
|
|
window.location = connectUrl;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-03 16:03:29 +00:00
|
|
|
render() {
|
2020-03-15 21:45:19 +00:00
|
|
|
const { installStep } = this.props;
|
|
|
|
const { isPending } = this.state;
|
2019-10-03 16:03:29 +00:00
|
|
|
|
|
|
|
return (
|
2020-03-15 21:45:19 +00:00
|
|
|
<Stepper
|
|
|
|
isVertical
|
|
|
|
isPending={ ! installStep.isComplete || isPending }
|
|
|
|
currentStep={ installStep.isComplete ? 'connect' : 'install' }
|
|
|
|
steps={ [
|
|
|
|
installStep,
|
|
|
|
{
|
|
|
|
key: 'connect',
|
|
|
|
label: __(
|
|
|
|
'Connect your Square account',
|
|
|
|
'woocommerce-admin'
|
|
|
|
),
|
|
|
|
description: __(
|
|
|
|
'A Square account is required to process payments. You will be redirected to the Square website to create the connection.',
|
|
|
|
'woocommerce-admin'
|
|
|
|
),
|
|
|
|
content: (
|
|
|
|
<Fragment>
|
|
|
|
<Button
|
|
|
|
isPrimary
|
|
|
|
isBusy={ isPending }
|
|
|
|
onClick={ this.connect }
|
|
|
|
>
|
|
|
|
{ __( 'Connect', 'woocommerce-admin' ) }
|
|
|
|
</Button>
|
|
|
|
</Fragment>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
] }
|
|
|
|
/>
|
2019-10-03 16:03:29 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default compose(
|
2020-02-14 02:23:21 +00:00
|
|
|
withSelect( ( select ) => {
|
2020-06-10 23:49:27 +00:00
|
|
|
const { getOption, isResolving } = select( OPTIONS_STORE_NAME );
|
|
|
|
const options = getOption( 'woocommerce_square_credit_card_settings' );
|
|
|
|
const optionsIsRequesting = isResolving( 'getOption', [
|
2020-04-08 23:17:32 +00:00
|
|
|
'woocommerce_square_credit_card_settings',
|
|
|
|
] );
|
2019-10-03 16:03:29 +00:00
|
|
|
|
|
|
|
return {
|
|
|
|
options,
|
|
|
|
optionsIsRequesting,
|
|
|
|
};
|
|
|
|
} ),
|
2020-02-14 02:23:21 +00:00
|
|
|
withDispatch( ( dispatch ) => {
|
2019-10-03 16:03:29 +00:00
|
|
|
const { createNotice } = dispatch( 'core/notices' );
|
2020-06-10 23:49:27 +00:00
|
|
|
const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
|
2019-10-03 16:03:29 +00:00
|
|
|
return {
|
|
|
|
createNotice,
|
|
|
|
updateOptions,
|
|
|
|
};
|
|
|
|
} )
|
|
|
|
)( Square );
|