Merge pull request #771 from wickathou/bugfix/registration-responsiveness

Bugfix - Fixed bottom bar registration responsiveness

Author: wickathou

frontend/src/components/navbars/GlobalNavBar/index.js

@@ -35,10 +35,12 @@ const useStyles = makeStyles(theme => ({
 export default () => {
     const classes = useStyles()
     return (
-        <div className='tw-w-full tw-py-2 tw-bg-wave-pattern ' >
+        <div
+            id="global-navbar"
+            className="tw-w-full tw-py-2 tw-bg-wave-pattern "
+        >
             <div className={classes.wrapper}>
                 <div className={classes.inner}>
-
                     <a href="/home">
                         <img
                             src={PlatformLogo}

frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js

@@ -47,7 +47,7 @@ const useStyles = makeStyles(theme => ({
     },
     sectionsNum: {
         color: 'white',
-        fontWeight: 'bold'
+        fontWeight: 'bold',
     },
     buttonIcon: {
         marginLeft: theme.spacing(1),

frontend/src/pages/_events/slug/register/RegistrationSectionCustom/index.js

@@ -47,7 +47,15 @@ const useStyles = makeStyles(theme => ({
     },
 }))
 
-export default ({ section, sectionsInfo, onNext, nextLabel, onPrev, prevLabel, data }) => {
+export default ({
+    section,
+    sectionsInfo,
+    onNext,
+    nextLabel,
+    onPrev,
+    prevLabel,
+    data,
+}) => {
     const classes = useStyles()
     const { registration } = useContext(EventDetailContext)
     console.log('section', section)
@@ -159,15 +167,6 @@ export default ({ section, sectionsInfo, onNext, nextLabel, onPrev, prevLabel, d
                                         key={question.name}
                                         className={classes.question}
                                     >
-                                        {/* <div className={classes.questionInner}>
-                                            <FastField
-                                                autoFocus={index === 0}
-                                                name={question.name}
-                                                component={RegistrationQuestion}
-                                                config={question}
-                                                isCustom={true}
-                                            />
-                                        </div> */}
                                         <div className={classes.questionInner}>
                                             <FastField name={question.name}>
                                                 {props => (

frontend/src/pages/_events/slug/register/index.js

@@ -146,11 +146,14 @@ export default RequiresPermission(() => {
         finishRegistration,
     } = useContext(EventDetailContext)
     const userProfile = useSelector(UserSelectors.userProfile)
-
     const [loading, setLoading] = useState(false)
     const [formData, setFormData] = useState({})
     const [activeStep, setActiveStep] = useState(0)
     const [eventNewsLetterHidden, setEventNewsLetterHidden] = useState(true)
+
+    const globalNavbarElement = document.getElementById('global-navbar')
+    globalNavbarElement.style.display = 'none'
+
     useEffect(() => {
         setTimeout(function () {
             window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
@@ -235,6 +238,13 @@ export default RequiresPermission(() => {
         return sorted.concat(event?.customQuestions ?? [])
     }, [event])
 
+    const sectionsInfo = (sections, index) => {
+        return {
+            sections: sections.length,
+            activeSection: index + 1,
+        }
+    }
+
     const setNextStep = useCallback(
         (nextStep, values, path) => {
             const newFormData = path
@@ -287,7 +297,9 @@ export default RequiresPermission(() => {
             }
             AnalyticsService.events.COMPLETE_REGISTRATION(slug)
             setActiveStep(sections.length + 1)
+            globalNavbarElement.style.display = 'block'
         } catch (e) {
+            globalNavbarElement.style.display = 'none'
             dispatch(
                 SnackbarActions.error(
                     'Oops, something went wrong... Please try again',
@@ -332,10 +344,7 @@ export default RequiresPermission(() => {
                                 isActive={activeStep === index}
                                 section={section}
                                 data={formData}
-                                sectionsInfo={{
-                                    sections: sections.length,
-                                    activeSection: index + 1,
-                                }}
+                                sectionsInfo={sectionsInfo(sections, index)}
                                 onPrev={setPrevStep}
                                 prevLabel={prevStep ? prevStep.label : null}
                                 onNext={(values, path) => {
@@ -347,10 +356,7 @@ export default RequiresPermission(() => {
                             <RegistrationSection
                                 isActive={activeStep === index}
                                 data={formData}
-                                sectionsInfo={{
-                                    sections: sections.length,
-                                    activeSection: index + 1,
-                                }}    
+                                sectionsInfo={sectionsInfo(sections, index)}
                                 label={section.label}
                                 fields={section.fields}
                                 onPrev={setPrevStep}