Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix WCCOM account creation flow UI #97311

Merged
merged 5 commits into from
Dec 12, 2024
Merged

Fix WCCOM account creation flow UI #97311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7110e40
Fix flash placeholder in lost password screen
chihsuan Dec 11, 2024
7f6a81d
Fix flash blue background
chihsuan Dec 11, 2024
dd93a9f
Refactor UserStep component to use isWoo prop for WooCommerce-specifi…
chihsuan Dec 11, 2024
c2f0a56
Add comment
chihsuan Dec 11, 2024
ca50f1a
Update client/layout/masterbar/woo.scss
chihsuan Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions client/blocks/login/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,14 +884,16 @@ class Login extends Component {
if ( action === 'lostpassword' && isReactLostPasswordScreenEnabled() ) {
return (
<Fragment>
<AsyncLoad
require="calypso/blocks/login/lost-password-form"
redirectToAfterLoginUrl={ this.props.redirectTo }
oauth2ClientId={ this.props.oauth2Client && this.props.oauth2Client.id }
locale={ locale }
isWooPasswordlessJPC={ isWooPasswordlessJPC }
from={ get( currentQuery, 'from' ) }
/>
<div className="login__lost-password-form-wrapper">
<AsyncLoad
require="calypso/blocks/login/lost-password-form"
redirectToAfterLoginUrl={ this.props.redirectTo }
oauth2ClientId={ this.props.oauth2Client && this.props.oauth2Client.id }
locale={ locale }
isWooPasswordlessJPC={ isWooPasswordlessJPC }
from={ get( currentQuery, 'from' ) }
/>
</div>
{ ! isWooPasswordlessJPC && ! isBlazePro && (
<div className="login__lost-password-footer">
<p className="login__lost-password-no-account">
Expand Down
9 changes: 9 additions & 0 deletions client/layout/masterbar/woo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -796,6 +796,15 @@ $breakpoint-mobile: 660px;
}
}

.login__lost-password-form-wrapper {
// Loading lost password form module is very fast, so we don't need to show a visual placeholder, just need to have the space reserved. Otherwise we will see a flash of content.
.async-load__placeholder {
visibility: hidden;
height: 185px;
margin: 48px auto 0;
}
}

.login .login__form-forgot-password {
text-align: start;
color: $gray-50;
Expand Down
7 changes: 7 additions & 0 deletions client/signup/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import store from 'store';
import { notFound } from 'calypso/controller';
import { recordPageView } from 'calypso/lib/analytics/page-view';
import { loadExperimentAssignment } from 'calypso/lib/explat';
import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
import { login } from 'calypso/lib/paths';
import { sectionify } from 'calypso/lib/route';
import flows from 'calypso/signup/config/flows';
import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
import { updateDependencies } from 'calypso/state/signup/actions';
import { getSignupDependencyStore } from 'calypso/state/signup/dependency-store/selectors';
import { setCurrentFlowName, setPreviousFlowName } from 'calypso/state/signup/flow/actions';
Expand Down Expand Up @@ -87,8 +89,13 @@ export default {
redirectTests( context, next ) {
const isLoggedIn = isUserLoggedIn( context.store.getState() );
const currentFlowName = getFlowName( context.params, isLoggedIn );
const isWoo = isWooOAuth2Client( getCurrentOAuth2Client( context.store.getState() ) );

if ( isReskinnedFlow( currentFlowName ) ) {
next();
} else if ( isWoo ) {
// Do nothing, Woo flow background should keep white.
next();
} else if (
context.pathname.indexOf( 'domain' ) >= 0 ||
context.pathname.indexOf( 'plan' ) >= 0 ||
Expand Down
30 changes: 16 additions & 14 deletions client/signup/steps/user/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,14 @@ export class UserStep extends Component {
wccomFrom,
isReskinned,
isOnboardingAffiliateFlow,
isWoo,
} = this.props;

let subHeaderText = this.props.subHeaderText;
const loginUrl = this.getLoginUrl();

if ( [ 'wpcc', 'crowdsignal' ].includes( flowName ) && oauth2Client ) {
if ( isWooOAuth2Client( oauth2Client ) && wccomFrom ) {
if ( isWoo && wccomFrom ) {
switch ( wccomFrom ) {
case 'cart':
subHeaderText = translate(
Expand Down Expand Up @@ -241,7 +242,7 @@ export class UserStep extends Component {
}
);
}
} else if ( isWooOAuth2Client( oauth2Client ) && ! wccomFrom ) {
} else if ( isWoo && ! wccomFrom ) {
subHeaderText = translate(
'Please create an account to continue. Already registered? {{a}}Log in{{/a}}',
{
Expand Down Expand Up @@ -491,6 +492,7 @@ export class UserStep extends Component {
isSocialFirst,
userLoggedIn,
isBlazePro,
isWoo,
} = this.props;

if ( userLoggedIn ) {
Expand All @@ -504,7 +506,7 @@ export class UserStep extends Component {
return translate( 'Sign up for Crowdsignal' );
}

if ( isWooOAuth2Client( oauth2Client ) ) {
if ( isWoo ) {
if ( 'cart' === wccomFrom ) {
return <WooCommerceConnectCartHeader />;
}
Expand Down Expand Up @@ -565,7 +567,7 @@ export class UserStep extends Component {
}

submitButtonText() {
const { translate, flowName } = this.props;
const { translate, flowName, isWoo } = this.props;

if ( isP2Flow( flowName ) ) {
return translate( 'Continue' );
Expand All @@ -575,7 +577,7 @@ export class UserStep extends Component {
return translate( 'Continue' );
}

if ( isWooOAuth2Client( this.props.oauth2Client ) ) {
if ( isWoo ) {
return translate( 'Get started' );
}

Expand All @@ -587,7 +589,7 @@ export class UserStep extends Component {
}

renderSignupForm() {
const { oauth2Client, isReskinned } = this.props;
const { oauth2Client, isReskinned, isWoo } = this.props;
const isPasswordless =
isMobile() ||
this.props.isPasswordless ||
Expand All @@ -597,7 +599,7 @@ export class UserStep extends Component {
let socialServiceResponse;
let isSocialSignupEnabled = this.props.isSocialSignupEnabled;

if ( isWooOAuth2Client( oauth2Client ) ) {
if ( isWoo ) {
isSocialSignupEnabled = true;
}

Expand Down Expand Up @@ -635,9 +637,7 @@ export class UserStep extends Component {
recaptchaClientId={ this.state.recaptchaClientId }
horizontal={ isReskinned }
isReskinned={ isReskinned }
shouldDisplayUserExistsError={
! isWooOAuth2Client( oauth2Client ) && ! isBlazeProOAuth2Client( oauth2Client )
}
shouldDisplayUserExistsError={ ! isWoo && ! isBlazeProOAuth2Client( oauth2Client ) }
isSocialFirst={ this.props.isSocialFirst }
labelText={ this.props.isWooPasswordless ? this.props.translate( 'Your email' ) : null }
/>
Expand Down Expand Up @@ -732,8 +732,8 @@ export class UserStep extends Component {
}

render() {
if ( this.userCreationComplete() ) {
return null; // return nothing so that we don't see the completed signup form flash.
if ( this.userCreationComplete() && ! this.props.isWoo ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The userCreationComplete() check was added in #91956. It causes the button to be re-enabled after the user logs in because when the signup flow is complete, there is also a logic that reset the signup controller in the parent controller and trigger a re-render. WPCOM flow need this because they have next steps but we don't. So we need to skip this.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other changes in this file is just refactor to replace isWooOAuth2Client( this.props.oauth2Client ) with this.props.isWoo.

return null; // return nothing so that we don't see the completed signup form flash but skip for Woo because it need to keep the form until the user is redirected back to original page (e.g. WooCommerce.com).
}

if ( isP2Flow( this.props.flowName ) ) {
Expand All @@ -748,7 +748,7 @@ export class UserStep extends Component {
return this.renderGravatarSignupStep();
}

if ( isWooOAuth2Client( this.props.oauth2Client ) && this.props.userLoggedIn ) {
if ( this.props.isWoo && this.props.userLoggedIn ) {
page( this.getLoginUrl() );
return null;
}
Expand All @@ -772,10 +772,12 @@ export class UserStep extends Component {

const ConnectedUser = connect(
( state ) => {
const oauth2Client = getCurrentOAuth2Client( state );
return {
oauth2Client: getCurrentOAuth2Client( state ),
oauth2Client: oauth2Client,
suggestedUsername: getSuggestedUsername( state ),
wccomFrom: getWccomFrom( state ),
isWoo: isWooOAuth2Client( oauth2Client ),
isWooPasswordless: getIsWooPasswordless( state ),
isBlazePro: getIsBlazePro( state ),
from: get( getCurrentQueryArguments( state ), 'from' ),
Expand Down
Loading