Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Updated Signup Page (#21434)

Browse source 
fixes
https://linear.app/ghost/issue/DES-881/sign-up-flow-on-mobile-with-checkbox-on-requires-ux-improvement

On mobile, the Sign Up button is no longer sticky. This ensures
customers scroll down and see the checkbox before they hit the button.

If they do still miss the checkbox, we now have a check in place that
— if the checkbox is the last missing thing — scrolls the checkbox into
view upon submission.

https://github.com/user-attachments/assets/5d7867b6-d60c-4844-9482-af04a0eb1eaf
This commit is contained in:
Daniël van der Winden 2024-11-05 10:51:14 +01:00 • committed by GitHub
parent 18adf4b000
commit 9d0e4e7d45
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/portal/src/components/pages/SignupPage.js
View file

@ -7,7 +7,7 @@ import NewsletterSelectionPage from './NewsletterSelectionPage';
import ProductsSection from '../common/ProductsSection';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasMultipleNewsletters, hasFreeTrialTier, isSignupAllowed} from '../../utils/helpers';
import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, hasMultipleNewsletters, hasFreeTrialTier, isSignupAllowed} from '../../utils/helpers';
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
import {interceptAnchorClicks} from '../../utils/links';
@ -354,6 +354,8 @@ class SignupPage extends React.Component {
showNewsletterSelection: false,
termsCheckboxChecked: false
};
this.termsRef = React.createRef();
}
componentDidMount() {
@ -407,6 +409,16 @@ class SignupPage extends React.Component {
const {site, onAction} = this.context;
const {name, email, plan, phonenumber, errors} = this.state;
const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
// Only scroll checkbox into view if it's the only error
const otherErrors = {...errors};
delete otherErrors.checkbox;
const hasOnlyCheckboxError = errors?.checkbox && Object.values(otherErrors).every(error => !error);
if (hasOnlyCheckboxError && this.termsRef.current) {
this.termsRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
}
if (!hasFormErrors) {
if (hasMultipleNewsletters({site})) {
this.setState({
@ -566,7 +578,7 @@ class SignupPage extends React.Component {
const className = `gh-portal-signup-terms ${errorClassName}`;
return (
<div className={className} onClick={interceptAnchorClicks}>
<div className={className} onClick={interceptAnchorClicks} ref={this.termsRef}>
{signupTerms}
</div>
);
@ -717,11 +729,8 @@ class SignupPage extends React.Component {
);
}
const freeBenefits = getFreeProductBenefits({site});
const freeDescription = getFreeTierDescription({site});
const showOnlyFree = pageQuery === 'free';
const hasOnlyFree = hasOnlyFreeProduct({site}) || showOnlyFree;
const sticky = !showOnlyFree && (freeBenefits.length || freeDescription);
const signupTerms = this.renderSignupTerms();
@ -755,7 +764,7 @@ class SignupPage extends React.Component {
</>)}
{(hasOnlyFree ?
<div className={'gh-portal-btn-container' + (sticky ? ' sticky m24' : '')}>
<div className='gh-portal-btn-container'>
<div className='gh-portal-logged-out-form-container'>
{this.renderSubmitButton()}
{this.renderLoginMessage()}