Added info about registration pages numeration

Author: nikkxll

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { Box } from '@material-ui/core'
+import { Box, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
 import ArrowBackIcon from '@material-ui/icons/ArrowBack'
@@ -45,6 +45,10 @@ const useStyles = makeStyles(theme => ({
             display: 'none',
         },
     },
+    sectionsNum: {
+        color: 'white',
+        fontWeight: 'bold'
+    },
     buttonIcon: {
         marginLeft: theme.spacing(1),
         marginRight: theme.spacing(1),
@@ -58,6 +62,7 @@ const RegistrationBottomBar = ({
     onNext,
     errors,
     dirty,
+    sectionsInfo,
 }) => {
     const classes = useStyles()
     const [enabled, setEnabled] = useState(false)
@@ -77,6 +82,9 @@ const RegistrationBottomBar = ({
                 </Button>
             )}
             <Box className={classes.right}>
+                <Typography className={classes.sectionsNum}>
+                    {`${sectionsInfo.index}/${sectionsInfo.sections}`}
+                </Typography>
                 <ErrorDisplay errors={errors} />
                 <Button
                     className={classes.nextButton}

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

@@ -38,7 +38,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export default props => {
-    const { fields, onNext, nextLabel, prevLabel, onPrev, data, isActive } =
+    const { sectionsInfo, fields, onNext, nextLabel, prevLabel, onPrev, data, isActive } =
         props
     const { event, registration } = useContext(EventDetailContext)
     const userProfile = useSelector(UserSelectors.userProfile)
@@ -131,6 +131,7 @@ export default props => {
                             onNext={handleSubmit}
                             errors={errors}
                             dirty={dirty}
+                            sectionsInfo={sectionsInfo}
                         />,
                         document.body,
                     )}

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

@@ -47,7 +47,7 @@ const useStyles = makeStyles(theme => ({
     },
 }))
 
-export default ({ section, 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)
@@ -194,6 +194,7 @@ export default ({ section, onNext, nextLabel, onPrev, prevLabel, data }) => {
                             onNext={handleSubmit}
                             errors={errors}
                             dirty={dirty}
+                            sectionsInfo={sectionsInfo}
                         />,
                         document.body,
                     )}

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

@@ -332,6 +332,10 @@ export default RequiresPermission(() => {
                                 isActive={activeStep === index}
                                 section={section}
                                 data={formData}
+                                sectionsInfo={{
+                                    sections: sections.length,
+                                    index: index + 1,
+                                }}
                                 onPrev={setPrevStep}
                                 prevLabel={prevStep ? prevStep.label : null}
                                 onNext={(values, path) => {
@@ -343,6 +347,10 @@ export default RequiresPermission(() => {
                             <RegistrationSection
                                 isActive={activeStep === index}
                                 data={formData}
+                                sectionsInfo={{
+                                    sections: sections.length,
+                                    index: index + 1,
+                                }}    
                                 label={section.label}
                                 fields={section.fields}
                                 onPrev={setPrevStep}