diff --git a/apps/portal/src/components/pages/SignupPage.js b/apps/portal/src/components/pages/SignupPage.js index 41c8fa4fd0..e04f0df749 100644 --- a/apps/portal/src/components/pages/SignupPage.js +++ b/apps/portal/src/components/pages/SignupPage.js @@ -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 ( -