Hook up onboarding step 1 actions (https://github.com/woocommerce/woocommerce-admin/pull/2334)

* Hook up onboarding step 1 actions

* Remove updateProfile method from profile wizard

* Fix profile completion updates on last step

plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import apiFetch from '@wordpress/api-fetch';
 import { Component, createElement, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { pick } from 'lodash';
@@ -17,13 +16,13 @@ import { updateQueryString } from '@woocommerce/navigation';
 /**
  * Internal depdencies
  */
-import { NAMESPACE } from 'wc-api/onboarding/constants';
 import ProfileWizardHeader from './header';
 import Plugins from './steps/plugins';
 import Start from './steps/start';
 import Industry from './steps/industry';
 import StoreDetails from './steps/store-details';
 import ProductTypes from './steps/product-types';
+import withSelect from 'wc-api/with-select';
 import './style.scss';
 
 const getSteps = () => {
@@ -68,7 +67,6 @@ class ProfileWizard extends Component {
 	constructor() {
 		super( ...arguments );
 		this.goToNextStep = this.goToNextStep.bind( this );
-		this.updateProfile = this.updateProfile.bind( this );
 	}
 
 	componentDidMount() {
@@ -92,32 +90,27 @@ class ProfileWizard extends Component {
 		return currentStep;
 	}
 
-	goToNextStep() {
+	async goToNextStep() {
+		const { addNotice, isError, updateProfileItems } = this.props;
 		const currentStep = this.getCurrentStep();
 		const currentStepIndex = getSteps().findIndex( s => s.key === currentStep.key );
 		const nextStep = getSteps()[ currentStepIndex + 1 ];
 
-		if ( 'undefined' === nextStep ) {
-			this.updateProfile( { complete: true } );
+		if ( 'undefined' === typeof nextStep ) {
+			await updateProfileItems( { completed: true } );
+
+			if ( isError ) {
+				addNotice( {
+					status: 'error',
+					message: __( 'There was a problem completing the profiler.', 'woocommerce-admin' ),
+				} );
+			}
+			return;
 		}
 
 		return updateQueryString( { step: nextStep.key } );
 	}
 
-	updateProfile( params ) {
-		const { addNotice } = this.props;
-
-		return apiFetch( {
-			path: `${ NAMESPACE }/onboarding/profile`,
-			method: 'POST',
-			data: params,
-		} ).catch( error => {
-			if ( error && error.message ) {
-				addNotice( { status: 'error', message: error.message } );
-			}
-		} );
-	}
-
 	render() {
 		const { query } = this.props;
 		const step = this.getCurrentStep();
@@ -126,7 +119,6 @@ class ProfileWizard extends Component {
 			query,
 			step,
 			goToNextStep: this.goToNextStep,
-			updateProfile: this.updateProfile,
 		} );
 		const steps = getSteps().map( _step => pick( _step, [ 'key', 'label' ] ) );
 
@@ -140,11 +132,19 @@ class ProfileWizard extends Component {
 }
 
 export default compose(
+	withSelect( select => {
+		const { getProfileItemsError } = select( 'wc-api' );
+
+		const isError = Boolean( getProfileItemsError() );
+
+		return { isError };
+	} ),
 	withDispatch( dispatch => {
-		const { addNotice } = dispatch( 'wc-admin' );
+		const { addNotice, updateProfileItems } = dispatch( 'wc-api' );
 
 		return {
 			addNotice,
+			updateProfileItems,
 		};
 	} )
 )( ProfileWizard );

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js

@@ -6,7 +6,9 @@ import { __ } from '@wordpress/i18n';
 import { FormToggle } from '@wordpress/components';
 import { Button, CheckboxControl } from 'newspack-components';
 import { Component, Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
 import interpolateComponents from 'interpolate-components';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal depdencies
@@ -17,6 +19,7 @@ import SalesTaxIcon from './images/local_atm';
 import SpeedIcon from './images/flash_on';
 import MobileAppIcon from './images/phone_android';
 import './style.scss';
+import withSelect from 'wc-api/with-select';
 
 const benefits = [
 	{
@@ -53,12 +56,12 @@ const benefits = [
 	},
 ];
 
-export default class Start extends Component {
+class Start extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.state = {
-			trackingChecked: true,
+			allowTracking: true,
 		};
 
 		this.onTrackingChange = this.onTrackingChange.bind( this );
@@ -66,18 +69,38 @@ export default class Start extends Component {
 		this.skipWizard = this.skipWizard.bind( this );
 	}
 
-	skipWizard() {
-		this.props.updateProfile( { skipped: true } );
+	async skipWizard() {
+		const { addNotice, isProfileItemsError, updateProfileItems } = this.props;
+
+		await updateProfileItems( { skipped: true } );
+
+		if ( isProfileItemsError ) {
+			addNotice( {
+				status: 'error',
+				message: __( 'There was a problem updating your preferences.', 'woocommerce-admin' ),
+			} );
+		}
 	}
 
-	startWizard() {
-		// @todo This should update the settings with the tracking selection. See #2281.
-		this.props.goToNextStep();
+	async startWizard() {
+		const { addNotice, isSettingsError, updateSettings } = this.props;
+
+		const allowTracking = this.state.allowTracking ? 'yes' : 'no';
+		await updateSettings( { advanced: { woocommerce_allow_tracking: allowTracking } } );
+
+		if ( ! isSettingsError ) {
+			this.props.goToNextStep();
+		} else {
+			addNotice( {
+				status: 'error',
+				message: __( 'There was a problem updating your preferences.', 'woocommerce-admin' ),
+			} );
+		}
 	}
 
 	onTrackingChange() {
 		this.setState( {
-			trackingChecked: ! this.state.trackingChecked,
+			allowTracking: ! this.state.allowTracking,
 		} );
 	}
 
@@ -96,7 +119,7 @@ export default class Start extends Component {
 	}
 
 	render() {
-		const { trackingChecked } = this.state;
+		const { allowTracking } = this.state;
 
 		const trackingLabel = interpolateComponents( {
 			mixedString: __(
@@ -137,14 +160,14 @@ export default class Start extends Component {
 					<div className="woocommerce-profile-wizard__tracking">
 						<CheckboxControl
 							className="woocommerce-profile-wizard__tracking-checkbox"
-							checked={ trackingChecked }
+							checked={ allowTracking }
 							label={ __( trackingLabel, 'woocommerce-admin' ) }
 							onChange={ this.onTrackingChange }
 						/>
 
 						<FormToggle
 							aria-hidden="true"
-							checked={ trackingChecked }
+							checked={ allowTracking }
 							onChange={ this.onTrackingChange }
 							onClick={ e => e.stopPropagation() }
 							tabIndex="-1"
@@ -169,3 +192,26 @@ export default class Start extends Component {
 		);
 	}
 }
+
+export default compose(
+	withSelect( select => {
+		const { getProfileItemsError, getSettings, getSettingsError, isGetSettingsRequesting } = select(
+			'wc-api'
+		);
+
+		const isSettingsError = Boolean( getSettingsError( 'advanced' ) );
+		const isSettingsRequesting = isGetSettingsRequesting( 'advanced' );
+		const isProfileItemsError = Boolean( getProfileItemsError() );
+
+		return { getSettings, isSettingsError, isProfileItemsError, isSettingsRequesting };
+	} ),
+	withDispatch( dispatch => {
+		const { addNotice, updateProfileItems, updateSettings } = dispatch( 'wc-api' );
+
+		return {
+			addNotice,
+			updateProfileItems,
+			updateSettings,
+		};
+	} )
+)( Start );