From 2e9910b3e4a52782ef5d732d0dbcdcb6c9be30c1 Mon Sep 17 00:00:00 2001 From: Blue Date: Fri, 5 Jul 2024 16:39:35 +0500 Subject: [PATCH] fix: fix onboarding component issues (#108) Description: Fix onboarding component issues VAN-1996 Co-authored-by: Ahtesham Quraish --- src/authn-component/index.jsx | 13 +++++++++- src/forms/fields/index.scss | 1 + .../marketing-email-opt-out-field/index.jsx | 14 ++++++++-- .../marketing-email-opt-out-field/index.scss | 3 +++ src/forms/registration-popup/index.jsx | 26 ++++++++++++++++--- .../reset-password/index.jsx | 2 +- 6 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 src/forms/fields/marketing-email-opt-out-field/index.scss diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx index 00211b9b..cbe6b56a 100644 --- a/src/authn-component/index.jsx +++ b/src/authn-component/index.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { Spinner } from '@openedx/paragon'; +import { breakpoints, Spinner, useMediaQuery } from '@openedx/paragon'; import PropTypes from 'prop-types'; import { getThirdPartyAuthContext, setCurrentOpenedForm, setOnboardingComponentContext } from './data/reducers'; @@ -46,6 +46,8 @@ export const AuthnComponent = ({ const dispatch = useDispatch(); const queryParams = useMemo(() => getAllPossibleQueryParams(), []); + const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 }); + const [screenSize, setScreenSize] = useState('lg'); const [hasCloseButton, setHasCloseButton] = useState(true); @@ -60,6 +62,15 @@ export const AuthnComponent = ({ const { provider: tpaProvider } = getTpaProvider(tpaHint, providers, secondaryProviders); const pendingState = queryParams?.tpa_hint && thirdPartyAuthApiStatus === PENDING_STATE; + useEffect(() => { + if (isExtraSmall) { + setScreenSize('fullscreen'); + } + if (!isExtraSmall && currentForm !== PROGRESSIVE_PROFILING_FORM) { + setScreenSize('lg'); + } + }, [isExtraSmall, currentForm]); + useEffect(() => { if (currentForm === PROGRESSIVE_PROFILING_FORM) { setHasCloseButton(false); diff --git a/src/forms/fields/index.scss b/src/forms/fields/index.scss index 9d9f6dd2..80287715 100644 --- a/src/forms/fields/index.scss +++ b/src/forms/fields/index.scss @@ -2,3 +2,4 @@ @import "password-field"; @import "text-field"; @import "auto-suggested-field"; +@import "marketing-email-opt-out-field"; diff --git a/src/forms/fields/marketing-email-opt-out-field/index.jsx b/src/forms/fields/marketing-email-opt-out-field/index.jsx index 46046daf..31c62f3c 100644 --- a/src/forms/fields/marketing-email-opt-out-field/index.jsx +++ b/src/forms/fields/marketing-email-opt-out-field/index.jsx @@ -2,9 +2,11 @@ import React from 'react'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Form } from '@openedx/paragon'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import messages from './messages'; +import './index.scss'; /** * Marketing email opt in field component. It accepts following handler(s) @@ -15,13 +17,20 @@ import messages from './messages'; */ const MarketingEmailOptInCheckbox = (props) => { const { formatMessage } = useIntl(); - const { name, value, handleChange } = props; + const { + name, value, handleChange, isExtraSmall, + } = props; return ( @@ -35,6 +44,7 @@ MarketingEmailOptInCheckbox.propTypes = { name: PropTypes.string.isRequired, value: PropTypes.bool.isRequired, handleChange: PropTypes.func.isRequired, + isExtraSmall: PropTypes.bool.isRequired, }; export default MarketingEmailOptInCheckbox; diff --git a/src/forms/fields/marketing-email-opt-out-field/index.scss b/src/forms/fields/marketing-email-opt-out-field/index.scss new file mode 100644 index 00000000..c2a84f35 --- /dev/null +++ b/src/forms/fields/marketing-email-opt-out-field/index.scss @@ -0,0 +1,3 @@ +.marketing_email_opt > div > label { + line-height: 1.75rem !important; +} \ No newline at end of file diff --git a/src/forms/registration-popup/index.jsx b/src/forms/registration-popup/index.jsx index 755afc2e..38962484 100644 --- a/src/forms/registration-popup/index.jsx +++ b/src/forms/registration-popup/index.jsx @@ -5,8 +5,9 @@ import React, { import { getConfig, snakeCaseObject } from '@edx/frontend-platform'; import { useIntl } from '@edx/frontend-platform/i18n'; import { - Container, Form, Spinner, StatefulButton, + breakpoints, Container, Form, Spinner, StatefulButton, useMediaQuery, } from '@openedx/paragon'; +import classNames from 'classnames'; import HonorCodeAndPrivacyPolicyMessage from './components/honorCodeAndTOS'; import RegistrationFailureAlert from './components/RegistrationFailureAlert'; @@ -60,6 +61,8 @@ const RegistrationForm = () => { const dispatch = useDispatch(); const [formStartTime, setFormStartTime] = useState(null); + const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 }); + const [formFields, setFormFields] = useState({ name: '', email: '', password: '', marketingEmailsOptIn: true, }); @@ -305,7 +308,15 @@ const RegistrationForm = () => { {(!autoSubmitRegForm || errorCode.type) && (!currentProvider) && ( <> -
+
{formatMessage(messages.registrationFormHeading2)}
@@ -356,8 +367,17 @@ const RegistrationForm = () => { name="marketingEmailsOptIn" value={formFields.marketingEmailsOptIn} handleChange={handleOnChange} + isExtraSmall={isExtraSmall} /> -
+
{ className="loader-container d-flex flex-column justify-content-center align-items-center my-6 w-100 h-100 text-center" >

{formatMessage(messages.resetPasswordTokenValidatingHeadingText)}

- ; + ); } if (status === PASSWORD_RESET_ERROR || status === PASSWORD_RESET.INVALID_TOKEN) {