From e47b5de72a2f4d0af42c8bcf40c6d227f5cc330d Mon Sep 17 00:00:00 2001
From: Dmitrii Nikiforov <dmitr.nikiforov@gmail.com>
Date: Fri, 23 Feb 2024 23:12:25 +0200
Subject: [PATCH 1/2] Added info about registration pages numeration

---
 .../slug/register/RegistrationBottomBar/index.js       | 10 +++++++++-
 .../_events/slug/register/RegistrationSection/index.js |  3 ++-
 .../slug/register/RegistrationSectionCustom/index.js   |  3 ++-
 frontend/src/pages/_events/slug/register/index.js      |  8 ++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js b/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js
index 01cf1a69e..100375058 100644
--- a/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js
+++ b/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}
diff --git a/frontend/src/pages/_events/slug/register/RegistrationSection/index.js b/frontend/src/pages/_events/slug/register/RegistrationSection/index.js
index 90785f101..3e0fce984 100644
--- a/frontend/src/pages/_events/slug/register/RegistrationSection/index.js
+++ b/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,
                     )}
diff --git a/frontend/src/pages/_events/slug/register/RegistrationSectionCustom/index.js b/frontend/src/pages/_events/slug/register/RegistrationSectionCustom/index.js
index 2cf98bb5f..e5341cfdc 100644
--- a/frontend/src/pages/_events/slug/register/RegistrationSectionCustom/index.js
+++ b/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,
                     )}
diff --git a/frontend/src/pages/_events/slug/register/index.js b/frontend/src/pages/_events/slug/register/index.js
index d1ea8ca73..a201a455f 100644
--- a/frontend/src/pages/_events/slug/register/index.js
+++ b/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}

From 8694d6e950503821559f36d40103988ec7d85476 Mon Sep 17 00:00:00 2001
From: Dmitrii Nikiforov <dmitr.nikiforov@gmail.com>
Date: Sat, 24 Feb 2024 12:44:09 +0200
Subject: [PATCH 2/2] Added info about registration pages numeration

---
 .../_events/slug/register/RegistrationBottomBar/index.js  | 8 +++++---
 frontend/src/pages/_events/slug/register/index.js         | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js b/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js
index 100375058..70e507a1a 100644
--- a/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js
+++ b/frontend/src/pages/_events/slug/register/RegistrationBottomBar/index.js
@@ -82,9 +82,11 @@ const RegistrationBottomBar = ({
                 </Button>
             )}
             <Box className={classes.right}>
-                <Typography className={classes.sectionsNum}>
-                    {`${sectionsInfo.index}/${sectionsInfo.sections}`}
-                </Typography>
+                {sectionsInfo && (
+                    <Typography className={classes.sectionsNum}>
+                        {`${sectionsInfo.activeSection}/${sectionsInfo.sections}`}
+                    </Typography>
+                )}
                 <ErrorDisplay errors={errors} />
                 <Button
                     className={classes.nextButton}
diff --git a/frontend/src/pages/_events/slug/register/index.js b/frontend/src/pages/_events/slug/register/index.js
index a201a455f..8a0095e67 100644
--- a/frontend/src/pages/_events/slug/register/index.js
+++ b/frontend/src/pages/_events/slug/register/index.js
@@ -334,7 +334,7 @@ export default RequiresPermission(() => {
                                 data={formData}
                                 sectionsInfo={{
                                     sections: sections.length,
-                                    index: index + 1,
+                                    activeSection: index + 1,
                                 }}
                                 onPrev={setPrevStep}
                                 prevLabel={prevStep ? prevStep.label : null}
@@ -349,7 +349,7 @@ export default RequiresPermission(() => {
                                 data={formData}
                                 sectionsInfo={{
                                     sections: sections.length,
-                                    index: index + 1,
+                                    activeSection: index + 1,
                                 }}    
                                 label={section.label}
                                 fields={section.fields}