Add WooCommerce onboarding connection track events

client/blocks/login/login-form.jsx

@@ -189,10 +189,16 @@ export class LoginForm extends Component {
 
 	loginUser() {
 		const { password, usernameOrEmail } = this.state;
-		const { onSuccess, redirectTo, domain } = this.props;
+		const { onSuccess, redirectTo, domain, isJetpackWooCommerceFlow } = this.props;
 
 		this.props.recordTracksEvent( 'calypso_login_block_login_form_submit' );
 
+		if ( config.isEnabled( 'jetpack/connect/woocommerce' ) && isJetpackWooCommerceFlow ) {
+			this.props.recordTracksEvent( 'wcadmin_storeprofiler_login_jetpack_account', {
+				login_method: 'email',
+			} );
+		}
+
 		this.props
 			.loginUser( usernameOrEmail, password, redirectTo, domain )
 			.then( () => {
@@ -260,6 +266,13 @@ export class LoginForm extends Component {
 		}
 	}
 
+	onWooCommerceSocialSuccess = ( ...args ) => {
+		this.props.recordTracksEvent( 'wcadmin_storeprofiler_login_jetpack_account', {
+			login_method: 'google',
+		} );
+		this.props.onSuccess( args );
+	};
+
 	handleWooCommerceSubmit = event => {
 		event.preventDefault();
 		document.activeElement.blur();
@@ -401,7 +414,7 @@ export class LoginForm extends Component {
 									<span>{ this.props.translate( 'or' ) }</span>
 								</div>
 								<SocialLoginForm
-									onSuccess={ this.props.onSuccess }
+									onSuccess={ this.onWooCommerceSocialSuccess }
 									socialService={ this.props.socialService }
 									socialServiceResponse={ this.props.socialServiceResponse }
 									linkingSocialService={

client/blocks/signup-form/index.jsx

@@ -598,9 +598,25 @@ class SignupForm extends Component {
 		);
 	}
 
+	handleWooCommerceSocialConnect = ( ...args ) => {
+		analytics.tracks.recordEvent( 'wcadmin_storeprofiler_create_jetpack_account', {
+			signup_method: 'google',
+		} );
+		this.props.handleSocialResponse( args );
+	};
+
 	handleWooCommerceSubmit = event => {
 		event.preventDefault();
 		document.activeElement.blur();
+		this.formStateController.handleSubmit( hasErrors => {
+			if ( hasErrors ) {
+				this.setState( { submitting: false } );
+				return;
+			}
+			analytics.tracks.recordEvent( 'wcadmin_storeprofiler_create_jetpack_account', {
+				signup_method: 'email',
+			} );
+		} );
 		this.handleSubmit( event );
 	};
 

client/jetpack-connect/authorize.js

@@ -256,11 +256,10 @@ export class JetpackAuthorize extends Component {
 	}
 
 	shouldAutoAuthorize() {
-		const { alreadyAuthorized, authApproved } = this.props.authQuery;
-
+		const { alreadyAuthorized, authApproved, from } = this.props.authQuery;
 		return (
 			this.isSso() ||
-			this.isWoo() ||
+			'woocommerce-services-auto-authorize' === from ||
 			( ! this.props.isAlreadyOnSitesList &&
 				! alreadyAuthorized &&
 				( this.props.calypsoStartedConnection || authApproved ) )
@@ -302,9 +301,29 @@ export class JetpackAuthorize extends Component {
 		return partnerRedirectFlag ? partnerSlug && 'pressable' !== partnerSlug : partnerSlug;
 	}
 
+	handleSignIn = () => {
+		const { recordTracksEvent } = this.props;
+		const { from } = this.props.authQuery;
+		if (
+			config.isEnabled( 'jetpack/connect/woocommerce' ) &&
+			'woocommerce-setup-wizard' === from
+		) {
+			recordTracksEvent( 'wcadmin_storeprofiler_connect_store', { different_account: true } );
+		}
+	};
+
 	handleSignOut = () => {
 		const { recordTracksEvent } = this.props;
+		const { from } = this.props.authQuery;
 		recordTracksEvent( 'calypso_jpc_signout_click' );
+
+		if (
+			config.isEnabled( 'jetpack/connect/woocommerce' ) &&
+			'woocommerce-setup-wizard' === from
+		) {
+			recordTracksEvent( 'wcadmin_storeprofiler_connect_store', { create_jetpack: true } );
+		}
+
 		userUtilities.logout( window.location.href );
 	};
 
@@ -328,7 +347,7 @@ export class JetpackAuthorize extends Component {
 	handleSubmit = () => {
 		const { recordTracksEvent } = this.props;
 		const { authorizeError, authorizeSuccess } = this.props.authorizationData;
-		const { alreadyAuthorized, redirectAfterAuth } = this.props.authQuery;
+		const { alreadyAuthorized, redirectAfterAuth, from } = this.props.authQuery;
 
 		if ( ! this.props.isAlreadyOnSitesList && ! this.props.isFetchingSites && alreadyAuthorized ) {
 			recordTracksEvent( 'calypso_jpc_back_wpadmin_click' );
@@ -354,6 +373,14 @@ export class JetpackAuthorize extends Component {
 		}
 
 		recordTracksEvent( 'calypso_jpc_approve_click' );
+
+		if (
+			config.isEnabled( 'jetpack/connect/woocommerce' ) &&
+			'woocommerce-setup-wizard' === from
+		) {
+			recordTracksEvent( 'wcadmin_storeprofiler_connect_store', { use_account: true } );
+		}
+
 		return this.authorize();
 	};
 
@@ -624,7 +651,9 @@ export class JetpackAuthorize extends Component {
 						isJetpack: true,
 						isNative: config.isEnabled( 'login/native-login-links' ),
 						redirectTo: window.location.href,
+						isWoo: this.isWoo(),
 					} ) }
+					onClick={ this.handleSignIn }
 				>
 					{ translate( 'Sign in as a different user' ) }
 				</LoggedOutFormLinkItem>

client/jetpack-connect/style.scss

@@ -967,7 +967,8 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 
 		.jetpack-connect__main,
 		.jetpack-connect__site.card,
-		.logged-out-form {
+		.logged-out-form,
+		.jetpack-connect__logged-in-card.card {
 			max-width: 476px;
 		}
 
@@ -1019,6 +1020,26 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 			}
 		}
 
+		.jetpack-connect__logged-in-card button {
+			border: 0;
+			box-shadow: none;
+		}
+
+		.jetpack-connect__notices-container {
+			margin-top: 20px;
+		}
+
+		.jetpack-connect__action-disclaimer {
+			padding-top: 0;
+
+			.jetpack-connect__tos-link,
+			.jetpack-connect__tos-link a {
+				text-align: left;
+				color: var( --color-gray-600 );
+				font-size: 12px;
+			}
+		}
+
 		.signup-form__woocommerce .card {
 			padding-bottom: 0;
 		}

client/layout/index.jsx

@@ -197,7 +197,7 @@ export default connect( state => {
 	const noMasterbarForSection = 'signup' === sectionName || 'jetpack-connect' === sectionName;
 	const isJetpackMobileFlow = 'jetpack-connect' === sectionName && !! retrieveMobileRedirect();
 	const isJetpackWooCommerceFlow =
-		'jetpack-connect' === sectionName &&
+		( 'jetpack-connect' === sectionName || 'login' === sectionName ) &&
 		'woocommerce-setup-wizard' === get( getCurrentQueryArguments( state ), 'from' );
 	return {
 		masterbarIsHidden:

client/lib/analytics/index.js

@@ -67,7 +67,13 @@ let _superProps, _user, _selectedSite, _siteCount, _dispatch, _loadTracksError;
  * See internal Nosara repo?
  */
 const TRACKS_SPECIAL_PROPS_NAMES = [ 'geo', 'message', 'request', 'geocity', 'ip' ];
-const EVENT_NAME_EXCEPTIONS = [ 'a8c_cookie_banner_ok' ];
+const EVENT_NAME_EXCEPTIONS = [
+	'a8c_cookie_banner_ok',
+	// WooCommerce Onboarding / Connection Flow.
+	'wcadmin_storeprofiler_create_jetpack_account',
+	'wcadmin_storeprofiler_connect_store',
+	'wcadmin_storeprofiler_login_jetpack_account',
+];
 
 // Load tracking scripts
 if ( typeof window !== 'undefined' ) {