[WooCommerce NUX] Fix incorrect redirection for existing user (#87042)

* Add cancel-social-account-connect-linking action to reset login.isLinking state * Fix alert component name * Fix redirect login link in signup-form for woocommerce * Enable using custom icon * Add woo styled existing user error notice * Update style * Fix borken notices * Update client/blocks/signup-form/index.jsx Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> --------- Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
Automattic · Feb 5, 2024 · 99ed591 · 99ed591
1 parent c63307c
commit 99ed591
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 9 deletions.
diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx
@@ -1,7 +1,9 @@
 import config from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { Button, Card, FormInputValidation, FormLabel, Gridicon } from '@automattic/components';
+import { alert } from '@automattic/components/src/icons';
 import { localizeUrl } from '@automattic/i18n-utils';
+import { Icon } from '@wordpress/icons';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 import { capitalize, defer, includes, get } from 'lodash';
@@ -36,6 +38,7 @@ import {
 	loginUser,
 	resetAuthAccountType,
 } from 'calypso/state/login/actions';
+import { cancelSocialAccountConnectLinking } from 'calypso/state/login/actions/cancel-social-account-connect-linking';
 import { resetMagicLoginRequestForm } from 'calypso/state/login/magic-login/actions';
 import {
 	getAuthAccountType as getAuthAccountTypeSelector,
@@ -93,6 +96,7 @@ export class LoginForm extends Component {
 		isSignupExistingAccount: PropTypes.bool,
 		sendMagicLoginLink: PropTypes.func,
 		isSendingEmail: PropTypes.bool,
+		cancelSocialAccountConnectLinking: PropTypes.func,
 	};
 
 	state = {
@@ -741,7 +745,7 @@ export class LoginForm extends Component {
 
 				<Card className="login__form">
 					<div className="login__form-userdata">
-						{ linkingSocialUser && (
+						{ ! isWoo && linkingSocialUser && (
 							<p>
 								{ this.props.translate(
 									'We found a WordPress.com account with the email address "%(email)s". ' +
@@ -802,6 +806,24 @@ export class LoginForm extends Component {
 
 						{ isP2Login && this.isPasswordView() && this.renderChangeUsername() }
 
+						{ isWoo && linkingSocialUser && (
+							<Notice
+								className="login__form-user-exists-notice"
+								status="is-warning"
+								icon={ <Icon icon={ alert } size={ 20 } fill="#d67709" /> }
+								showDismiss
+								onDismissClick={ this.props.cancelSocialAccountConnectLinking }
+								text={ this.props.translate(
+									'You already have a WordPress.com account with this email address. Add your password to log in or {{signupLink}}create a new account{{/signupLink}}.',
+									{
+										components: {
+											signupLink: <a href={ signupUrl } />,
+										},
+									}
+								) }
+							/>
+						) }
+
 						<div
 							className={ classNames( 'login__form-password', {
 								'is-hidden': isPasswordHidden,
@@ -927,5 +949,6 @@ export default connect(
 		recordTracksEvent,
 		resetAuthAccountType,
 		resetMagicLoginRequestForm,
+		cancelSocialAccountConnectLinking,
 	}
 )( localize( LoginForm ) );
diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx
@@ -57,6 +57,7 @@ import { createSocialUserFailed } from 'calypso/state/login/actions';
 import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
 import getCurrentQueryArguments from 'calypso/state/selectors/get-current-query-arguments';
 import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
+import { resetSignup } from 'calypso/state/signup/actions';
 import { getSectionName } from 'calypso/state/ui/selectors';
 import CrowdsignalSignupForm from './crowdsignal';
 import P2SignupForm from './p2';
@@ -232,7 +233,20 @@ class SignupForm extends Component {
 
 			this.props.createSocialUserFailed( socialInfo, userExistsError, 'signup' );
 
-			page( login( { redirectTo: this.props.redirectToAfterLoginUrl } ) );
+			// Reset the signup step so that we don't re trigger this logic when the user goes back from login screen.
+			this.props.resetSignup();
+
+			const loginLink = this.getLoginLink( { emailAddress: userExistsError.email } );
+			page(
+				addQueryArgs(
+					{
+						service: this.props.step?.service,
+						access_token: this.props.step?.access_token,
+						id_token: this.props.step?.id_token,
+					},
+					loginLink
+				)
+			);
 		}
 	}
 
@@ -1327,5 +1341,6 @@ export default connect(
 		trackLoginMidFlow: () => recordTracksEventWithClientId( 'calypso_signup_login_midflow' ),
 		createSocialUserFailed,
 		redirectToLogout,
+		resetSignup,
 	}
 )( localize( SignupForm ) );
diff --git a/client/components/notice/index.jsx b/client/components/notice/index.jsx
@@ -2,7 +2,7 @@ import { Gridicon } from '@automattic/components';
 import classnames from 'classnames';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, isValidElement } from 'react';
 // @todo: Convert to import from `components/gridicon`
 // which makes Calypso mysteriously crash at the moment.
 //
@@ -42,7 +42,7 @@ export class Notice extends Component {
 	static propTypes = {
 		className: PropTypes.string,
 		duration: PropTypes.number,
-		icon: PropTypes.string,
+		icon: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 		isCompact: PropTypes.bool,
 		isLoading: PropTypes.bool,
 		onDismissClick: PropTypes.func,
@@ -128,14 +128,21 @@ export class Notice extends Component {
 			'is-reskinned': isReskinned,
 		} );
 
-		const iconName = icon || this.getIcon();
-		const iconNeedsDrop = GRIDICONS_WITH_DROP.includes( iconName );
+		let iconNeedsDrop = false;
+		let renderedIcon = null;
+		if ( icon && isValidElement( icon ) ) {
+			renderedIcon = icon;
+		} else {
+			const iconName = icon || this.getIcon();
+			renderedIcon = <Gridicon className="notice__icon" icon={ iconName } size={ 24 } />;
+			iconNeedsDrop = GRIDICONS_WITH_DROP.includes( iconName );
+		}
 
 		return (
 			<div className={ classes } role="status" aria-label={ translate( 'Notice' ) }>
 				<span className="notice__icon-wrapper">
 					{ iconNeedsDrop && <span className="notice__icon-wrapper-drop" /> }
-					<Gridicon className="notice__icon" icon={ iconName } size={ 24 } />
+					{ renderedIcon }
 				</span>
 				<span className="notice__content">
 					<span className="notice__text">{ text ? text : children }</span>

diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
@@ -103,6 +103,54 @@
 		background-color: initial;
 	}
 
+	.login__form-user-exists-notice.notice {
+		border-radius: 8px; // stylelint-disable-line scales/radii
+		overflow: auto;
+		padding: 16px 20px;
+		background-color: #f6f7f7;
+
+		.notice__icon-wrapper {
+			background-color: #f6f7f7;
+			color: #2c3338;
+			width: auto;
+			padding: 0;
+			align-items: flex-start;
+		}
+
+		.notice__dismiss {
+			padding: 0;
+			background-color: #f6f7f7;
+			color: #a7aaad;
+		}
+
+		.notice__content {
+			padding: 0 16px;
+			background-color: #f6f7f7;
+			color: #2c3338;
+		}
+
+		.notice__text {
+			color: #2c3338;
+			font-size: rem(14px);
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.24px;
+
+			a,
+			a:visited,
+			a:hover, {
+				color: $woo-purple-60;
+				font-size: rem(14px);
+				font-style: normal;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.24px;
+				text-decoration: none;
+			}
+		}
+	}
+
 	.masterbar__progress-bar {
 		background-color: transparent;
 		height: 8px;
@@ -818,6 +866,7 @@
 				}
 			}
 		}
+
 		.login__form-userdata label.form-label {
 			line-height: 16px;
 		}

diff --git a/client/state/action-types.ts b/client/state/action-types.ts
@@ -992,6 +992,7 @@ export const SITES_REQUEST_SUCCESS = 'SITES_REQUEST_SUCCESS';
 export const SOCIAL_CONNECT_ACCOUNT_REQUEST = 'SOCIAL_CONNECT_ACCOUNT_REQUEST';
 export const SOCIAL_CONNECT_ACCOUNT_REQUEST_FAILURE = 'SOCIAL_CONNECT_ACCOUNT_REQUEST_FAILURE';
 export const SOCIAL_CONNECT_ACCOUNT_REQUEST_SUCCESS = 'SOCIAL_CONNECT_ACCOUNT_REQUEST_SUCCESS';
+export const SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL = 'SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL';
 export const SOCIAL_CREATE_ACCOUNT_REQUEST_FAILURE = 'SOCIAL_CREATE_ACCOUNT_REQUEST_FAILURE';
 export const SOCIAL_HANDOFF_CONNECT_ACCOUNT = 'SOCIAL_HANDOFF_CONNECT_ACCOUNT';
 export const SOCIAL_DISCONNECT_ACCOUNT_REQUEST = 'SOCIAL_DISCONNECT_ACCOUNT_REQUEST';

diff --git a/client/state/login/actions/cancel-social-account-connect-linking.js b/client/state/login/actions/cancel-social-account-connect-linking.js
@@ -0,0 +1,9 @@
+import { SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL } from 'calypso/state/action-types';
+
+import 'calypso/state/login/init';
+
+export function cancelSocialAccountConnectLinking() {
+	return {
+		type: SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL,
+	};
+}
diff --git a/client/state/login/reducer.js b/client/state/login/reducer.js
@@ -19,6 +19,7 @@ import {
 	SOCIAL_CONNECT_ACCOUNT_REQUEST,
 	SOCIAL_CONNECT_ACCOUNT_REQUEST_SUCCESS,
 	SOCIAL_CONNECT_ACCOUNT_REQUEST_FAILURE,
+	SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL,
 	SOCIAL_DISCONNECT_ACCOUNT_REQUEST,
 	SOCIAL_DISCONNECT_ACCOUNT_REQUEST_FAILURE,
 	SOCIAL_DISCONNECT_ACCOUNT_REQUEST_SUCCESS,
@@ -399,6 +400,8 @@ export const socialAccountLink = ( state = { isLinking: false }, action ) => {
 			return { isLinking: false };
 		case CURRENT_USER_RECEIVE:
 			return { isLinking: false };
+		case SOCIAL_CONNECT_ACCOUNT_LINKING_CANCEL:
+			return { isLinking: false };
 	}
 
 	return state;

diff --git a/packages/components/src/icons/alert.tsx b/packages/components/src/icons/alert.tsx
@@ -1,7 +1,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 // TODO: replace with an icon when available.
-const danger = (
+const alert = (
 	<SVG width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<Path
 			fillRule="evenodd"
@@ -13,4 +13,4 @@ const danger = (
 	</SVG>
 );
 
-export default danger;
+export default alert;