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

Jump to bottom

Update woo passwordless screens #88374

Merged
merged 9 commits into from
Mar 14, 2024
Merged

Update woo passwordless screens #88374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1f5e9d5
Fix prop type error
chihsuan Mar 11, 2024
696ea16
Update social TOS
chihsuan Mar 11, 2024
80fb6ef
Update continue as user login form for Woo passwordless
chihsuan Mar 11, 2024
87f2adc
Use isWooPasswordless
chihsuan Mar 11, 2024
a212e71
Add is-woo-passwordless class at masterbar and update magic login sty…
chihsuan Mar 11, 2024
080705e
Fix tos
chihsuan Mar 11, 2024
57280e0
Update style
chihsuan Mar 12, 2024
477b18c
Update style
chihsuan Mar 12, 2024
adf3549
Update test snap
chihsuan Mar 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
31 changes: 26 additions & 5 deletions client/blocks/authentication/social/social-tos.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import config from '@automattic/calypso-config';
import { localizeUrl } from '@automattic/i18n-utils';
import { localize } from 'i18n-calypso';
import { connect } from 'react-redux';
import { getCurrentOAuth2Client } from 'calypso/state/oauth2-clients/ui/selectors';
import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';

const toSLinks = {
components: {
Expand All @@ -27,14 +29,33 @@ function getToSComponent( content ) {
}

function SocialAuthToS( props ) {
const content = props.translate(
'If you continue with Google, Apple or GitHub, you agree to our {{tosLink}}Terms of Service{{/tosLink}}, and have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
toSLinks
);
if ( props.isWooPasswordless ) {
return getToSComponent(
props.translate(
'By continuing with any of the options above, you agree to our {{tosLink}}Terms of Service{{/tosLink}} and {{privacyLink}}Privacy Policy{{/privacyLink}}.',
toSLinks
)
);
}

if ( config.isEnabled( 'login/github' ) ) {
return getToSComponent(
props.translate(
'If you continue with Google, Apple or GitHub, you agree to our {{tosLink}}Terms of Service{{/tosLink}}, and have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
toSLinks
)
);
}

return getToSComponent( content );
return getToSComponent(
props.translate(
'If you continue with Google and Apple, you agree to our {{tosLink}}Terms of Service{{/tosLink}}, and have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.',
toSLinks
)
);
}

export default connect( ( state ) => ( {
oauth2Client: getCurrentOAuth2Client( state ),
isWooPasswordless: !! getWooPasswordless( state ),
} ) )( localize( SocialAuthToS ) );
33 changes: 33 additions & 0 deletions client/blocks/login/continue-as-user.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Gravatar from 'calypso/components/gravatar';
import wpcom from 'calypso/lib/wp';
import { getCurrentUser } from 'calypso/state/current-user/selectors';
import { getCurrentQueryArguments } from 'calypso/state/selectors/get-current-query-arguments';
import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';

import './continue-as-user.scss';

Expand Down Expand Up @@ -42,6 +43,7 @@ function ContinueAsUser( {
redirectPath,
isSignUpFlow,
isWooOAuth2Client,
isWooPasswordless,
} ) {
const translate = useTranslate();
const { url: validatedRedirectUrlFromQuery, loading: validatingQueryURL } =
Expand Down Expand Up @@ -100,6 +102,36 @@ function ContinueAsUser( {
);

if ( isWooOAuth2Client ) {
if ( isWooPasswordless ) {
return (
<div className="continue-as-user">
<div className="continue-as-user__user-info">
{ gravatarLink }
<div className="continue-as-user__not-you">
<button
type="button"
id="loginAsAnotherUser"
className="continue-as-user__change-user-link"
onClick={ onChangeAccount }
>
{ translate( 'Sign in as a different user' ) }
</button>
</div>
</div>
<Button
primary
busy={ isLoading }
className="continue-as-user__continue-button"
href={ validatedRedirectUrlFromQuery || validatedRedirectPath || '/' }
>
{ `${ translate( 'Continue as', {
context: 'Continue as an existing WordPress.com user',
} ) } ${ userName }` }
</Button>
</div>
);
}

return (
<div className="continue-as-user">
<div className="continue-as-user__user-info">
Expand Down Expand Up @@ -148,4 +180,5 @@ function ContinueAsUser( {
export default connect( ( state ) => ( {
currentUser: getCurrentUser( state ),
redirectUrlFromQuery: get( getCurrentQueryArguments( state ), 'redirect_to', null ),
isWooPasswordless: !! getWooPasswordless( state ),
} ) )( ContinueAsUser );
13 changes: 11 additions & 2 deletions client/blocks/login/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import getCurrentRoute from 'calypso/state/selectors/get-current-route';
import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
import getPartnerSlugFromQuery from 'calypso/state/selectors/get-partner-slug-from-query';
import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
import getWooPasswordless from 'calypso/state/selectors/get-woo-passwordless';
import isFetchingMagicLoginEmail from 'calypso/state/selectors/is-fetching-magic-login-email';
import isMagicLoginEmailRequested from 'calypso/state/selectors/is-magic-login-email-requested';
import isWooCommerceCoreProfilerFlow from 'calypso/state/selectors/is-woocommerce-core-profiler-flow';
Expand Down Expand Up @@ -421,6 +422,13 @@ class Login extends Component {
) }
</p>
);
} else if ( this.showContinueAsUser() && this.props.isWooPasswordless ) {
headerText = <h3>{ translate( 'Get started in minutes' ) }</h3>;
postHeader = (
<p className="login__header-subtitle">
{ translate( 'First, select the account you’d like to use.' ) }
</p>
);
} else {
headerText = <h3>{ translate( "Let's get started" ) }</h3>;
const poweredByWpCom =
Expand Down Expand Up @@ -782,7 +790,7 @@ class Login extends Component {
if ( this.showContinueAsUser() ) {
if ( isWoo ) {
return (
<Fragment>
<div className="login__body login__body--continue-as-user">
<ContinueAsUser
onChangeAccount={ this.handleContinueAsAnotherUser }
isWooOAuth2Client={ isWoo }
Expand All @@ -802,7 +810,7 @@ class Login extends Component {
showSocialLoginFormOnly={ true }
sendMagicLoginLink={ this.sendMagicLoginLink }
/>
</Fragment>
</div>
);
}

Expand Down Expand Up @@ -885,6 +893,7 @@ export default connect(
'woocommerce-onboarding' === get( getCurrentQueryArguments( state ), 'from' ),
isWooCoreProfilerFlow: isWooCommerceCoreProfilerFlow( state ),
wccomFrom: getWccomFrom( state ),
isWooPasswordless: !! getWooPasswordless( state ),
isAnchorFmSignup: getIsAnchorFmSignup(
get( getCurrentQueryArguments( state ), 'redirect_to' )
),
Expand Down
8 changes: 6 additions & 2 deletions client/blocks/signup-form/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -859,6 +859,10 @@ class SignupForm extends Component {

termsOfServiceLink = () => {
if ( this.props.isWoo ) {
if ( this.props.isWooPasswordless ) {
return null;
}

return (
<p className="signup-form__terms-of-service-link">
{ this.props.translate(
Expand Down Expand Up @@ -1236,7 +1240,7 @@ class SignupForm extends Component {

if (
( this.props.isPasswordless &&
( 'wpcc' !== this.props.flowName || this.props.wooPasswordless ) ) ||
( 'wpcc' !== this.props.flowName || this.props.isWooPasswordless ) ) ||
isGravatar
) {
let formProps = {
Expand Down Expand Up @@ -1370,7 +1374,7 @@ export default connect(
isJetpackWooDnaFlow: wooDnaConfig( getCurrentQueryArguments( state ) ).isWooDnaFlow(),
from: get( getCurrentQueryArguments( state ), 'from' ),
wccomFrom: getWccomFrom( state ),
wooPasswordless: getWooPasswordless( state ),
isWooPasswordless: !! getWooPasswordless( state ),
isWoo: isWooOAuth2Client( oauth2Client ) || isWooCoreProfilerFlow,
isWooCoreProfilerFlow,
isP2Flow:
Expand Down
4 changes: 2 additions & 2 deletions client/blocks/signup-form/passwordless.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ class PasswordlessSignupForm extends Component {
static propTypes = {
locale: PropTypes.string,
inputPlaceholder: PropTypes.string,
submitButtonLabel: PropTypes.string,
submitButtonLoadingLabel: PropTypes.string,
submitButtonLabel: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder why this change is needed? I'm not seeing any consumers passing a node 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

Because we changed the submitButtonLoadingLabel, I think it would be a bit odd/confusing for these two to have different prop types. So, I changed this to ensure consistency. Does that sound good?

Copy link
Contributor

Choose a reason for hiding this comment

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

I see. That makes sense, LGTM!

submitButtonLoadingLabel: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
userEmail: PropTypes.string,
labelText: PropTypes.string,
isInviteLoggedOutForm: PropTypes.bool,
Expand Down
4 changes: 2 additions & 2 deletions client/jetpack-connect/test/__snapshots__/signup.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ exports[`JetpackSignup should render 1`] = `
<p
class="auth-form__social-buttons-tos"
>
If you continue with Google, Apple or GitHub, you agree to our
If you continue with Google and Apple, you agree to our
<a
href="https://wordpress.com/tos/"
rel="noopener noreferrer"
Expand Down Expand Up @@ -540,7 +540,7 @@ exports[`JetpackSignup should render with locale suggestions 1`] = `
<p
class="auth-form__social-buttons-tos"
>
If you continue with Google, Apple or GitHub, you agree to our
If you continue with Google and Apple, you agree to our
<a
href="https://wordpress.com/tos/"
rel="noopener noreferrer"
Expand Down
Loading
Loading