Connect Refresh: Updated Woo DNA JP flow to unified Login

client/assets/stylesheets/_wp-base-styles-overrides.scss

@@ -45,7 +45,7 @@
 	}
 
 	/* Jetpack login */
-	.layout.is-jetpack-login:not(.is-woocommerce-core-profiler-flow) &:not(.is-error, .is-valid) {
+	.layout.is-jetpack-login:not(.is-woocommerce-core-profiler-flow)  &:not(.is-error, .is-valid) {
 		--wp-admin-theme-color: var(--studio-jetpack-green-50);
 	}
 

client/assets/stylesheets/_wp-components-overrides.scss

@@ -115,7 +115,7 @@
 
 /* Woo */
 .woo.is-woo-passwordless {
-	.components-button:not(.is-destructive) {
+	.components-button:not(.is-link):not(.is-destructive) {
 		--wp-components-color-accent: var(--woo-purple-40);
 		--wp-components-color-accent-darker-10: var(--woo-purple-60);
 		--wp-components-color-accent-darker-20: var(--woo-purple-60);

client/blocks/login/login-form.jsx

@@ -4,7 +4,7 @@ import { Card, FormInputValidation, FormLabel, Gridicon } from '@automattic/comp
 import { alert } from '@automattic/components/src/icons';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { suggestEmailCorrection } from '@automattic/onboarding';
-import { Button, TextControl } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import cookie from 'cookie';
@@ -22,7 +22,6 @@ import FormPasswordInput from 'calypso/components/forms/form-password-input';
 import FormTextInput from 'calypso/components/forms/form-text-input';
 import Notice from 'calypso/components/notice';
 import { LastUsedSocialButton } from 'calypso/components/social-buttons';
-import wooDnaConfig from 'calypso/jetpack-connect/woo-dna-config';
 import {
 	getSignupUrl,
 	pathWithLeadingSlash,
@@ -391,131 +390,6 @@ export class LoginForm extends Component {
 		return false;
 	};
 
-	renderWooCommerce( { showSocialLogin = true, socialToS } = {} ) {
-		const isFormDisabled = this.state.isFormDisabledWhileLoading || this.props.isFormDisabled;
-		const { requestError, socialAccountIsLinking: linkingSocialUser } = this.props;
-
-		return (
-			<form method="post">
-				<Card className="login__form">
-					<div className="login__form-userdata">
-						{ linkingSocialUser && (
-							<p>
-								{ this.props.translate(
-									'We found a WordPress.com account with the email address "%(email)s". ' +
-										'Log in to this account to connect it to your %(service)s profile, ' +
-										'or choose a different %(service)s profile.',
-									{
-										args: {
-											email: this.props.socialAccountLinkEmail,
-											service: capitalize( this.props.socialAccountLinkService ),
-										},
-									}
-								) }
-							</p>
-						) }
-
-						<FormLabel htmlFor="usernameOrEmail">
-							{ this.isPasswordView() ? (
-								<Button
-									variant="link"
-									className="login__form-change-username"
-									onClick={ this.resetView }
-									size="small"
-								>
-									<Gridicon icon="arrow-left" size={ 18 } />
-
-									{ includes( this.state.usernameOrEmail, '@' )
-										? this.props.translate( 'Change Email Address' )
-										: this.props.translate( 'Change Username' ) }
-								</Button>
-							) : null }
-						</FormLabel>
-
-						<TextControl
-							autoCapitalize="off"
-							autoCorrect="off"
-							spellCheck="false"
-							label={ this.props.translate( 'Email address or username' ) }
-							disabled={ isFormDisabled || this.isPasswordView() }
-							id="usernameOrEmail"
-							name="usernameOrEmail"
-							value={ this.state.usernameOrEmail }
-							onChange={ ( value ) => {
-								this.props.formUpdate();
-								this.setState( {
-									usernameOrEmail: value,
-								} );
-							} }
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
-						/>
-
-						{ requestError && requestError.field === 'usernameOrEmail' && (
-							<FormInputValidation isError text={ requestError.message } />
-						) }
-
-						<div
-							className={ clsx( 'login__form-password', {
-								'is-hidden': this.isUsernameOrEmailView(),
-							} ) }
-						>
-							<TextControl
-								label={ this.props.translate( 'Password' ) }
-								disabled={ isFormDisabled }
-								id="password"
-								name="password"
-								type="password"
-								value={ this.state.password }
-								onChange={ ( value ) => {
-									this.props.formUpdate();
-									this.setState( {
-										password: value,
-									} );
-								} }
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
-							/>
-
-							{ requestError && requestError.field === 'password' && (
-								<FormInputValidation isError text={ requestError.message } />
-							) }
-						</div>
-					</div>
-
-					<div className="login__form-footer">
-						<p className="login__social-tos">{ socialToS }</p>
-						<div className="login__form-action">
-							<Button
-								variant="primary"
-								disabled={ isFormDisabled }
-								onClick={ this.handleWooCommerceSubmit }
-								type="submit"
-								__next40pxDefaultSize
-							>
-								{ this.getLoginButtonText() }
-							</Button>
-						</div>
-
-						{ config.isEnabled( 'signup/social' ) && showSocialLogin && (
-							<div className="login__form-social">
-								<div className="login__form-social-divider">
-									<span>{ this.props.translate( 'or' ) }</span>
-								</div>
-								<SocialLoginForm
-									handleLogin={ this.handleSocialLogin }
-									trackLoginAndRememberRedirect={ this.trackLoginAndRememberRedirect }
-									socialServiceResponse={ this.props.socialServiceResponse }
-									isJetpack={ this.props.isJetpack }
-								/>
-							</div>
-						) }
-					</div>
-				</Card>
-			</form>
-		);
-	}
-
 	renderChangeUsername() {
 		return (
 			<Button
@@ -1057,41 +931,8 @@ export class LoginForm extends Component {
 	}
 
 	render() {
-		const {
-			accountType,
-			isJetpackWooDnaFlow,
-			currentQuery,
-			showSocialLoginFormOnly,
-			isWoo,
-			isBlazePro,
-			isSocialFirst,
-			isJetpack,
-		} = this.props;
-
-		const socialToS = this.props.translate(
-			// To make any changes to this copy please speak to the legal team
-			'By continuing with any of the options below, ' +
-				'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' +
-				' have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
-			{
-				components: {
-					tosLink: (
-						<a
-							href={ localizeUrl( 'https://wordpress.com/tos/' ) }
-							target="_blank"
-							rel="noopener noreferrer"
-						/>
-					),
-					privacyLink: (
-						<a
-							href={ localizeUrl( 'https://automattic.com/privacy/' ) }
-							target="_blank"
-							rel="noopener noreferrer"
-						/>
-					),
-				},
-			}
-		);
+		const { currentQuery, showSocialLoginFormOnly, isWoo, isBlazePro, isSocialFirst, isJetpack } =
+			this.props;
 
 		if ( showSocialLoginFormOnly ) {
 			return config.isEnabled( 'signup/social' ) ? (
@@ -1108,13 +949,6 @@ export class LoginForm extends Component {
 			) : null;
 		}
 
-		if ( isJetpackWooDnaFlow ) {
-			return this.renderWooCommerce( {
-				showSocialLogin: !! accountType, // Only show the social buttons after the user entered an email.
-				socialToS,
-			} );
-		}
-
 		return (
 			<form
 				className={ clsx( {
@@ -1151,7 +985,6 @@ export default connect(
 			oauth2Client: getCurrentOAuth2Client( state ),
 			isFromAutomatticForAgenciesPlugin:
 				'automattic-for-agencies-client' === get( getCurrentQueryArguments( state ), 'from' ),
-			isJetpackWooDnaFlow: wooDnaConfig( getCurrentQueryArguments( state ) ).isWooDnaFlow(),
 			isWooJPC: isWooJPCFlow( state ),
 			isWoo: getIsWoo( state ),
 			redirectTo: getRedirectToOriginal( state ),

client/blocks/login/style.scss

@@ -7,7 +7,7 @@
 
 $breakpoint-mobile: 782px; //Mobile size.
 
-.layout:not(.is-jetpack-woo-dna-flow):not(.is-wccom-oauth-flow):not(.is-woocommerce-core-profiler-flow) {
+.layout:not(.is-wccom-oauth-flow):not(.is-woocommerce-core-profiler-flow) {
 	.login.is-jetpack:not(.is-automattic-for-agencies-flow) {
 		.button.is-primary {
 			background-color: var(--studio-jetpack-green-50);
@@ -51,10 +51,7 @@ $breakpoint-mobile: 782px; //Mobile size.
 	.masterbar {
 		display: none;
 	}
-}
 
-.layout.is-jetpack-woo-dna-flow,
-.layout.is-wccom-oauth-flow {
 	.login__woocommerce-logo {
 		text-align: center;
 		border-bottom: 1px solid var(--color-neutral-5);

client/document/index.jsx

@@ -53,7 +53,6 @@ class Document extends Component {
 			inlineScriptNonce,
 			isSupportSession,
 			isSSP,
-			isWooDna,
 			lang,
 			languageRevisions,
 			manifests,
@@ -99,8 +98,6 @@ class Document extends Component {
 				? `var localeFromRoute = ${ jsonStringifyForHtml( params.lang ?? '' ) };\n`
 				: '' );
 
-		const isJetpackWooDnaFlow = 'jetpack-connect' === sectionName && isWooDna;
-
 		const theme = config( 'theme' );
 
 		const isRTL = isLocaleRtl( lang );
@@ -179,7 +176,6 @@ class Document extends Component {
 								className={ clsx( 'layout', {
 									[ 'is-group-' + sectionGroup ]: sectionGroup,
 									[ 'is-section-' + sectionName ]: sectionName,
-									'is-jetpack-woo-dna-flow': isJetpackWooDnaFlow,
 								} ) }
 							>
 								<div className="layout__content">

client/jetpack-connect/style.scss

@@ -9,11 +9,11 @@
 $colophon-height: 50px;
 
 .jetpack-connect__main:not(.is-woocommerce):not(.is-automattic-for-agencies-flow),
-.layout.is-section-jetpack-connect:not(.is-jetpack-mobile-flow):not(.is-jetpack-woo-dna-flow):not(.is-woocommerce-core-profiler-flow):not(.is-automattic-for-agencies-flow) {
+.layout.is-section-jetpack-connect:not(.is-jetpack-mobile-flow):not(.is-woocommerce-core-profiler-flow):not(.is-automattic-for-agencies-flow) {
 	@include jetpack-connect-colors();
 }
 
-.layout.is-jetpack-woo-dna-flow {
+.layout.is-woocommerce-core-profiler-flow {
 	@include woocommerce-colors();
 }
 
@@ -972,9 +972,12 @@ $colophon-height: 50px;
 	.site-topic__content .form-fieldset {
 		position: relative;
 	}
+}
 
+.layout.is-section-jetpack-connect,
+.layout.is-section-purchase-product {
 	/** WooCommerce Onboarding Styles **/
-	&.is-jetpack-woo-dna-flow {
+	&.is-woocommerce-core-profiler-flow {
 		background-color: var(--color-woocommerce-onboarding-background);
 
 		.jetpack-connect__main-logo {
@@ -1537,7 +1540,7 @@ $colophon-height: 50px;
 body.is-section-jetpack-connect {
 	background-color: var(--color-surface);
 
-	.layout.is-jetpack-woo-dna-flow {
+	.layout.is-woocommerce-core-profiler-flow {
 		.wpcom-site__logo {
 			display: none;
 		}

client/layout/logged-out.jsx

@@ -11,7 +11,6 @@ import ReaderJoinConversationDialog from 'calypso/blocks/reader-join-conversatio
 import AsyncLoad from 'calypso/components/async-load';
 import { withCurrentRoute } from 'calypso/components/route';
 import SympathyDevWarning from 'calypso/components/sympathy-dev-warning';
-import wooDnaConfig from 'calypso/jetpack-connect/woo-dna-config';
 import MasterbarLoggedOut from 'calypso/layout/masterbar/logged-out';
 import OauthClientMasterbar from 'calypso/layout/masterbar/oauth-client';
 import { isInStepContainerV2FlowContext } from 'calypso/layout/utils';
@@ -44,7 +43,6 @@ import {
 import { clearLastActionRequiresLogin } from 'calypso/state/reader-ui/actions';
 import { getLastActionRequiresLogin } from 'calypso/state/reader-ui/selectors';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
-import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
 import getIsBlazePro from 'calypso/state/selectors/get-is-blaze-pro';
 import getIsWoo from 'calypso/state/selectors/get-is-woo';
 import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
@@ -62,7 +60,6 @@ const LayoutLoggedOut = ( {
 	isJetpackLogin,
 	isWhiteLogin,
 	isPopup,
-	isJetpackWooDnaFlow,
 	isGravatar,
 	isWPJobManager,
 	isGravPoweredClient,
@@ -135,7 +132,6 @@ const LayoutLoggedOut = ( {
 		'is-jetpack-site': isJetpackCheckout,
 		'is-white-login': isWhiteLogin,
 		'is-popup': isPopup,
-		'is-jetpack-woo-dna-flow': isJetpackWooDnaFlow,
 		'is-gravatar': isGravatar,
 		'is-wp-job-manager': isWPJobManager,
 		'is-grav-powered-client': hasGravPoweredClientClass,
@@ -332,7 +328,6 @@ export default withCurrentRoute(
 				new URLSearchParams( getRedirectToOriginal( state )?.split( '?' )[ 1 ] ).get( 'back' )
 			);
 			const isInvitationURL = currentRoute.startsWith( '/accept-invite' );
-			const isJetpackWooDnaFlow = wooDnaConfig( getInitialQueryArguments( state ) ).isWooDnaFlow();
 			const oauth2Client = getCurrentOAuth2Client( state );
 			const isGravatar = isGravatarOAuth2Client( oauth2Client );
 			const isWPJobManager = isWPJobManagerOAuth2Client( oauth2Client );
@@ -362,8 +357,7 @@ export default withCurrentRoute(
 						isVIPClient ) ) ||
 				isPartnerPortal;
 
-			const noMasterbarForRoute =
-				( isWhiteLogin && ! isBlazePro ) || isJetpackWooDnaFlow || isInvitationURL;
+			const noMasterbarForRoute = ( isWhiteLogin && ! isBlazePro ) || isInvitationURL;
 			const isPopup = '1' === currentQuery?.is_popup;
 			const noMasterbarForSection =
 				! isWooOAuth2Client( oauth2Client ) &&
@@ -390,7 +384,6 @@ export default withCurrentRoute(
 				isJetpackLogin,
 				isWhiteLogin,
 				isPopup,
-				isJetpackWooDnaFlow,
 				isGravatar,
 				isWPJobManager,
 				isGravPoweredClient,

client/layout/masterbar/woo.scss

@@ -1862,7 +1862,7 @@ $breakpoint-mobile: 660px;
 }
 
 .woo,
-.layout.is-jetpack-woo-dna-flow {
+.layout.is-woocommerce-core-profiler-flow {
 	--woo-purple-0: #F2EDFF;
 	--woo-purple-40: #873EFF;
 	--woo-purple-50: #720EEC;