From 7f4225b921336a72c1e4311791ac55868968d867 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 7 Feb 2024 13:21:00 +0000
Subject: [PATCH] feat(ui): add to transition progress bar
---
.../FormNavigation/FormNavigation.spec.tsx | 3 +-
.../FormNavigation/FormNavigation.tsx | 52 +++++--------------
.../FormProgress/FormProgress.spec.tsx | 19 +++++++
.../CommonKit/FormProgress/FormProgress.tsx | 37 ++++++-------
.../CommonKit/FormProgress/formProgress.scss | 16 ++----
.../SGEConnect/SgeConnectView.spec.tsx | 9 +++-
.../Connection/SGEConnect/SgeConnectView.tsx | 16 +++---
.../SgeConnectView.spec.tsx.snap | 24 +++++----
.../EcogestureFormEquipment.spec.tsx | 5 +-
.../EcogestureFormEquipment.tsx | 7 +--
.../EcogestureFormEquipment.spec.tsx.snap | 12 +++--
.../EcogestureFormSingleChoice.spec.tsx | 16 ------
.../EcogestureFormSingleChoice.tsx | 3 +-
.../EcogestureFormView.spec.tsx | 10 ++++
.../EcogestureForm/EcogestureFormView.tsx | 1 -
.../ProfileTypeFormDateSelection.tsx | 4 +-
.../ProfileTypeFormMultiChoice.tsx | 3 --
.../ProfileTypeFormNumber.tsx | 3 --
.../ProfileTypeFormNumberSelection.tsx | 3 --
.../ProfileTypeFormSingleChoice.tsx | 4 +-
.../ProfileType/ProfileTypeView.spec.tsx | 12 ++++-
.../ProfileType/ProfileTypeView.tsx | 34 ++++++++----
.../ProfileType/profileTypeForm.scss | 2 +-
.../ProfileType/profileTypeView.scss | 24 ++++++---
src/components/theme.ts | 10 ++++
25 files changed, 170 insertions(+), 159 deletions(-)
create mode 100644 src/components/CommonKit/FormProgress/FormProgress.spec.tsx
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
index c28c83226..b9be78286 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
@@ -1,6 +1,5 @@
import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
-import { ProfileTypeStepForm } from 'enums'
import React from 'react'
import FormNavigation from './FormNavigation'
@@ -10,10 +9,10 @@ describe('FormNavigation component', () => {
const mockHandleNext = jest.fn()
render(
<FormNavigation
- step={ProfileTypeStepForm.COOKING_FLUID}
handlePrevious={mockHandlePrevious}
handleNext={mockHandleNext}
disableNextButton={false}
+ disablePrevButton={false}
/>
)
const [prevButton, nextButton] = screen.getAllByRole('button')
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
index be6e49794..cd13d77ef 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
@@ -1,78 +1,50 @@
import Button from '@material-ui/core/Button'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureStepForm, ProfileTypeStepForm, SgeStep } from 'enums'
import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
import './formNavigation.scss'
interface FormNavigationProps {
- step: ProfileTypeStepForm | EcogestureStepForm | SgeStep
handlePrevious: () => void
handleNext: () => void
- disableNextButton: boolean
disablePrevButton?: boolean
- isEcogesture?: boolean
- isLastConnectStep?: boolean
+ disableNextButton: boolean
+ isLastStep?: boolean
isLoading?: boolean
}
const FormNavigation = ({
- step,
handlePrevious,
handleNext,
- disableNextButton,
disablePrevButton,
- isEcogesture,
- isLastConnectStep,
+ disableNextButton,
+ isLastStep,
isLoading,
}: FormNavigationProps) => {
const { t } = useI18n()
- const navigate = useNavigate()
- const handlePreviousClick = () => {
- handlePrevious()
- }
- const handleNextClick = () => {
- handleNext()
- // handle go back to connect for SGE
- if (isLastConnectStep) {
- navigate('/consumption/electricity')
- }
- }
const getSecondButtonLabel = useCallback(() => {
- if (isLoading) {
- return t('profile_type.form.button_loading')
- } else if (
- isLastConnectStep ||
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
- ) {
- return t('profile_type.form.button_end')
- } else {
- return t('profile_type.form.button_next')
- }
- }, [isEcogesture, isLastConnectStep, isLoading, step, t])
+ if (isLoading) return t('profile_type.form.button_loading')
+ if (isLastStep) return t('profile_type.form.button_end')
+ return t('profile_type.form.button_next')
+ }, [isLastStep, isLoading, t])
return (
<div className="profile-navigation">
<Button
aria-label={t('profile_type.accessibility.button_previous')}
- onClick={handlePreviousClick}
+ onClick={handlePrevious}
className="btnSecondary"
- disabled={
- disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
- }
+ disabled={disablePrevButton}
>
{t('profile_type.form.button_previous')}
</Button>
<Button
aria-label={
- step === ProfileTypeStepForm.UPDATE_DATE ||
- (step === EcogestureStepForm.EQUIPMENTS && isEcogesture)
+ isLastStep
? t('profile_type.accessibility.button_end')
: t('profile_type.accessibility.button_next')
}
- onClick={handleNextClick}
+ onClick={handleNext}
className="btnPrimary"
disabled={disableNextButton}
>
diff --git a/src/components/CommonKit/FormProgress/FormProgress.spec.tsx b/src/components/CommonKit/FormProgress/FormProgress.spec.tsx
new file mode 100644
index 000000000..988676204
--- /dev/null
+++ b/src/components/CommonKit/FormProgress/FormProgress.spec.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import FormProgress from './FormProgress'
+
+describe('FormProgress', () => {
+ it('should be rendered correctly with a progressbar', () => {
+ render(<FormProgress currentStep={5} totalSteps={10} />)
+ expect(screen.getByRole('progressbar')).toBeInTheDocument()
+ })
+
+ it('should min out to "1%"', () => {
+ render(<FormProgress currentStep={0} totalSteps={5} />)
+ expect(screen.getByText('1%')).toBeInTheDocument()
+ })
+ it('should max out to "100%"', () => {
+ render(<FormProgress currentStep={5} totalSteps={0} />)
+ expect(screen.getByText('100%')).toBeInTheDocument()
+ })
+})
diff --git a/src/components/CommonKit/FormProgress/FormProgress.tsx b/src/components/CommonKit/FormProgress/FormProgress.tsx
index 103e6305a..d5c35a49f 100644
--- a/src/components/CommonKit/FormProgress/FormProgress.tsx
+++ b/src/components/CommonKit/FormProgress/FormProgress.tsx
@@ -1,28 +1,25 @@
-import { ProfileTypeStepForm, SgeStep } from 'enums'
+import { LinearProgress } from '@material-ui/core'
import React from 'react'
import './formProgress.scss'
-interface FormProgressProps {
- step: ProfileTypeStepForm | SgeStep
- formType: 'sge' | 'profile'
-}
+const FormProgress = ({
+ currentStep,
+ totalSteps,
+}: {
+ currentStep: number
+ /** When working with numeric enums, divide the result by 2, because a reverse mapping is generated. */
+ totalSteps: number
+}) => {
+ const progress = Math.min(
+ Math.round((currentStep / totalSteps) * 100) || 1,
+ 100
+ )
-const FormProgress = ({ step, formType }: FormProgressProps) => {
- const getProgress = () => {
- const total: number =
- Object.values(formType === 'sge' ? SgeStep : ProfileTypeStepForm).length /
- 2
- const progress: number = Math.round((step / total) * 100) || 1
- return progress
- }
return (
- <div className="profile-type-progress">
- <div className="profile-type-progress-label">{getProgress()}%</div>
- <div className="profile-type-progress-bar-container">
- <div
- className="profile-type-progress-bar-content"
- style={{ width: `${getProgress()}%` }}
- />
+ <div className="formProgress">
+ <span>{progress}%</span>
+ <div className="container">
+ <LinearProgress variant="determinate" value={progress} />
</div>
</div>
)
diff --git a/src/components/CommonKit/FormProgress/formProgress.scss b/src/components/CommonKit/FormProgress/formProgress.scss
index dd1f500a8..7a70e0fde 100644
--- a/src/components/CommonKit/FormProgress/formProgress.scss
+++ b/src/components/CommonKit/FormProgress/formProgress.scss
@@ -1,26 +1,18 @@
@import 'src/styles/base/color';
-.profile-type-progress {
+.formProgress {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
- .profile-type-progress-label {
+ gap: 8px;
+ span {
font-size: 0.938rem;
font-weight: 700;
- width: 1.875rem;
color: $gold-shadow;
- text-align: right;
}
- .profile-type-progress-bar-container {
- margin-left: 0.5rem;
+ .container {
flex: 1;
height: 6px;
- background-color: $dark-light-2;
- .profile-type-progress-bar-content {
- height: 100%;
- background-color: $gold-shadow;
- border-radius: 12px;
- }
}
}
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
index 02d958a4e..d7c9af6ba 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
import * as storeHooks from 'store/hooks'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import SgeConnectView from './SgeConnectView'
@@ -19,7 +20,9 @@ describe('SgeConnectView component', () => {
it('should be rendered correctly', () => {
const { container } = render(
<Provider store={store}>
- <SgeConnectView />
+ <BrowserRouter>
+ <SgeConnectView />
+ </BrowserRouter>
</Provider>
)
expect(container).toMatchSnapshot()
@@ -29,7 +32,9 @@ describe('SgeConnectView component', () => {
it('should call nextStep method', async () => {
render(
<Provider store={store}>
- <SgeConnectView />
+ <BrowserRouter>
+ <SgeConnectView />
+ </BrowserRouter>
</Provider>
)
await userEvent.click(screen.getAllByRole('button')[1])
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index d09bc8f72..5a5df27cc 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -6,6 +6,7 @@ import Header from 'components/Header/Header'
import { SgeStep } from 'enums'
import { SgeStore } from 'models'
import React, { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router'
import { updateSgeStore } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './SgeConnect.scss'
@@ -24,6 +25,7 @@ export type SGEKeysForm =
| 'pdlConfirm'
const SgeConnectView = () => {
+ const navigate = useNavigate()
const dispatch = useAppDispatch()
const { sgeConnect } = useAppSelector(state => state.ecolyo.global)
const [isLoading, setIsLoading] = useState(false)
@@ -80,8 +82,9 @@ const SgeConnectView = () => {
}
setCurrentSgeState(updatedState)
dispatch(updateSgeStore(updatedState))
+ navigate('/consumption/electricity')
}
- }, [currentSgeState, currentStep, dispatch, isNextValid, isLoading])
+ }, [currentStep, isNextValid, isLoading, dispatch, currentSgeState, navigate])
const handlePrev = useCallback(() => {
if (currentStep !== SgeStep.IdentityAndPDL) {
@@ -137,18 +140,19 @@ const SgeConnectView = () => {
<Content heightOffset={headerHeight}>
<div className="sge-view">
<div className="sge-container">
- <FormProgress step={currentStep} formType="sge" />
+ <FormProgress
+ currentStep={currentStep}
+ totalSteps={Object.values(SgeStep).length / 2}
+ />
{renderStep(currentStep)}
</div>
<FormNavigation
- step={currentStep}
handlePrevious={handlePrev}
handleNext={handleNext}
isLoading={isLoading}
- disableNextButton={!isNextValid() || isLoading}
disablePrevButton={currentStep === SgeStep.IdentityAndPDL}
- isLastConnectStep={currentStep === SgeStep.Consent}
- isEcogesture={false}
+ disableNextButton={!isNextValid() || isLoading}
+ isLastStep={currentStep === SgeStep.Consent}
/>
</div>
</Content>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index cf6cc5430..036c91711 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -86,21 +86,27 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
class="sge-container"
>
<div
- class="profile-type-progress"
+ class="formProgress"
>
- <div
- class="profile-type-progress-label"
- >
+ <span>
1
%
- </div>
+ </span>
<div
- class="profile-type-progress-bar-container"
+ class="container"
>
<div
- class="profile-type-progress-bar-content"
- style="width: 1%;"
- />
+ aria-valuemax="100"
+ aria-valuemin="0"
+ aria-valuenow="1"
+ class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate"
+ role="progressbar"
+ >
+ <div
+ class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate"
+ style="transform: translateX(-99%);"
+ />
+ </div>
</div>
</div>
<div
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index ca613d4b9..59dfa2b6d 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -17,7 +17,6 @@ describe('EcogestureFormEquipment component', () => {
currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={jest.fn()}
setNextStepEcogestureForm={jest.fn()}
- step={0}
/>
</Provider>
)
@@ -31,7 +30,6 @@ describe('EcogestureFormEquipment component', () => {
currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={jest.fn()}
setNextStepEcogestureForm={jest.fn()}
- step={0}
/>
</Provider>
)
@@ -50,7 +48,6 @@ describe('EcogestureFormEquipment component', () => {
currentProfileEcogesture={mockProfileEcogesture}
setPreviousStep={jest.fn()}
setNextStepEcogestureForm={jest.fn()}
- step={0}
/>
</Provider>
)
@@ -60,7 +57,7 @@ describe('EcogestureFormEquipment component', () => {
).toBeTruthy()
expect(
screen.getByRole('button', {
- name: 'profile_type.accessibility.button_next',
+ name: 'profile_type.accessibility.button_end',
})
).toBeDisabled()
})
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index eca4b0a77..4852439ab 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -2,7 +2,7 @@ import { IconButton } from '@material-ui/core'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { EcogestureStepForm, EquipmentType, ProfileTypeStepForm } from 'enums'
+import { EcogestureStepForm, EquipmentType } from 'enums'
import { ProfileEcogesture, ProfileType } from 'models'
import React, { useCallback, useState } from 'react'
import { useAppSelector } from 'store/hooks'
@@ -15,7 +15,6 @@ interface EcogestureFormEquipmentProps {
setPreviousStep: () => void
setNextStepEcogestureForm?: (_profileEcogesture: ProfileEcogesture) => void
setNextStepProfileForm?: (_profileType: ProfileType) => void
- step: ProfileTypeStepForm | EcogestureStepForm
}
const EcogestureFormEquipment = ({
@@ -24,7 +23,6 @@ const EcogestureFormEquipment = ({
setPreviousStep,
setNextStepEcogestureForm,
setNextStepProfileForm,
- step,
}: EcogestureFormEquipmentProps) => {
const { t } = useI18n()
const { isProfileEcogestureCompleted } = useAppSelector(
@@ -111,11 +109,10 @@ const EcogestureFormEquipment = ({
</div>
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer.length == 0}
- isEcogesture={true}
+ isLastStep={true}
/>
</>
)
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index ed0bc90c2..61893059f 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -314,9 +314,8 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_previous"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
- disabled=""
- tabindex="-1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
type="button"
>
<span
@@ -324,9 +323,12 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
profile_type.form.button_previous
</span>
+ <span
+ class="MuiTouchRipple-root"
+ />
</button>
<button
- aria-label="profile_type.accessibility.button_next"
+ aria-label="profile_type.accessibility.button_end"
class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
disabled=""
tabindex="-1"
@@ -335,7 +337,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
<span
class="MuiButton-label"
>
- profile_type.form.button_next
+ profile_type.form.button_end
</span>
</button>
</div>
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
index 57f1f6692..b7e89d07d 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
@@ -34,22 +34,6 @@ describe('EcogestureFormSingleChoice component', () => {
)
expect(container).toMatchSnapshot()
})
- it('should render disabled prev button', async () => {
- render(
- <Provider store={store}>
- <EcogestureFormSingleChoice
- step={0}
- viewedStep={1}
- setNextStep={mockHandleNextStep}
- setPreviousStep={mockHandlePreviousStep}
- currentProfileEcogesture={mockProfileEcogesture}
- answerType={mockEcogestureAnswer}
- />
- </Provider>
- )
- const [prev] = screen.getAllByRole('button')
- expect(prev).toBeDisabled()
- })
it('should pick a choice and go next', async () => {
render(
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
index e7efcf827..21401195f 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
@@ -83,11 +83,10 @@ const EcogestureFormSingleChoice = ({
})}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
+ disablePrevButton={step === EcogestureStepForm.HEATING_TYPE}
disableNextButton={answer === null}
- isEcogesture={true}
/>
</div>
)
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index a654c4bfe..501a60176 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -105,4 +105,14 @@ describe('EcogestureFormView component', () => {
)
expect(mockAppDispatch).toHaveBeenCalledTimes(2)
})
+
+ it('should not be able to click previous on the first step', () => {
+ render(
+ <Provider store={store}>
+ <EcogestureFormView />
+ </Provider>
+ )
+ const [prev] = screen.getAllByRole('button')
+ expect(prev).toBeDisabled()
+ })
})
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index b7aabd755..dc4e57379 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -105,7 +105,6 @@ const EcogestureFormView = () => {
<>
{step === EcogestureStepForm.EQUIPMENTS && (
<EcogestureFormEquipment
- step={EcogestureStepForm.EQUIPMENTS}
currentProfileEcogesture={currentProfileEcogesture}
setNextStepEcogestureForm={setNextStep}
setPreviousStep={setPreviousStep}
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
index cad6e9cd5..42f247a43 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
@@ -1,6 +1,5 @@
import { MenuItem, Select } from '@material-ui/core'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
-import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
@@ -131,7 +130,6 @@ const ProfileTypeFormDateSelection = ({
return (
<>
<div className="profile-form-container">
- <FormProgress step={step} formType="profile" />
<div className="profile-question-label">
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
@@ -177,10 +175,10 @@ const ProfileTypeFormDateSelection = ({
)}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer === ''}
+ isLastStep={true}
/>
</>
)
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
index 6a58102c4..2a3c9cfac 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
@@ -1,6 +1,5 @@
import classNames from 'classnames'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
-import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
@@ -74,7 +73,6 @@ const ProfileTypeFormMultiChoice = ({
return (
<>
<div className="profile-form-container">
- <FormProgress step={step} formType="profile" />
<div className="profile-question-label">
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
@@ -110,7 +108,6 @@ const ProfileTypeFormMultiChoice = ({
})}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer.length < 1}
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 918be75c3..e4d1bf390 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -1,6 +1,5 @@
/* eslint-disable jsx-a11y/no-autofocus */
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
-import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
@@ -48,7 +47,6 @@ const ProfileTypeFormNumber = ({
return (
<>
<div className="profile-form-container">
- <FormProgress step={step} formType="profile" />
<div className="profile-question-label">
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
@@ -70,7 +68,6 @@ const ProfileTypeFormNumber = ({
)}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer === ''}
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 10c5ca18b..be39d086f 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -1,6 +1,5 @@
import { Button } from '@material-ui/core'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
-import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
@@ -66,7 +65,6 @@ const ProfileTypeFormNumberSelection = ({
return (
<>
<div className="profile-form-container">
- <FormProgress step={step} formType="profile" />
<div className="profile-question-label">
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
@@ -105,7 +103,6 @@ const ProfileTypeFormNumberSelection = ({
)}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
disableNextButton={answer === ''}
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
index 52f88be87..2fc81aa25 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
@@ -1,6 +1,5 @@
import classNames from 'classnames'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
-import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { ProfileTypeStepForm } from 'enums'
@@ -70,7 +69,6 @@ const ProfileTypeFormSingleChoice = ({
return (
<>
<div className="profile-form-container">
- <FormProgress step={step} formType="profile" />
<div className="profile-question-label">
{t(
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
@@ -105,9 +103,9 @@ const ProfileTypeFormSingleChoice = ({
})}
</div>
<FormNavigation
- step={step}
handlePrevious={handlePrevious}
handleNext={handleNext}
+ disablePrevButton={step === ProfileTypeStepForm.HOUSING_TYPE}
disableNextButton={answer === '' || answer === undefined}
/>
</>
diff --git a/src/components/ProfileType/ProfileTypeView.spec.tsx b/src/components/ProfileType/ProfileTypeView.spec.tsx
index c9bc054f9..77e2baebe 100644
--- a/src/components/ProfileType/ProfileTypeView.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeView.spec.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
import React from 'react'
import { Provider } from 'react-redux'
@@ -28,4 +28,14 @@ describe('ProfileTypeView component', () => {
container.getElementsByClassName('profile-type-container')[0]
).toBeInTheDocument()
})
+
+ it('should not be able to click previous on the first step', () => {
+ render(
+ <Provider store={store}>
+ <ProfileTypeView />
+ </Provider>
+ )
+ const [prev] = screen.getAllByRole('button')
+ expect(prev).toBeDisabled()
+ })
})
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 6f619beb1..2436c5bd0 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -1,3 +1,4 @@
+import FormProgress from 'components/CommonKit/FormProgress/FormProgress'
import Content from 'components/Content/Content'
import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment'
import CozyBar from 'components/Header/CozyBar'
@@ -212,7 +213,6 @@ const ProfileTypeView = () => {
} else if (answerType.type === ProfileTypeFormType.EQUIPMENT_SELECTION) {
return (
<EcogestureFormEquipment
- step={step}
currentProfileType={currentProfileType}
setNextStepProfileForm={setNextStep}
setPreviousStep={setPreviousStep}
@@ -230,16 +230,28 @@ const ProfileTypeView = () => {
displayBackArrow={true}
/>
<Content heightOffset={headerHeight}>
- <div className="profile-type-container">
- {isLoading && <Loader />}
- {!isLoading && (
- <>
- {step !== ProfileTypeStepForm.END && selectForm()}
- {step === ProfileTypeStepForm.END && (
- <ProfileTypeFinished profileType={currentProfileType} />
- )}
- </>
- )}
+ <div className="profileType-view">
+ <div className="progressContainer">
+ <FormProgress
+ currentStep={step}
+ totalSteps={Object.keys(ProfileTypeStepForm).length / 2}
+ />
+ </div>
+ <div className="profile-type-container">
+ {isLoading && (
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ )}
+ {!isLoading && (
+ <>
+ {step !== ProfileTypeStepForm.END && selectForm()}
+ {step === ProfileTypeStepForm.END && (
+ <ProfileTypeFinished profileType={currentProfileType} />
+ )}
+ </>
+ )}
+ </div>
</div>
</Content>
</>
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 49f36d4ec..9ebe65355 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -4,7 +4,7 @@
.profile-form-container {
color: $white;
- margin: 1rem 1rem 3.5rem;
+ margin: 0 1rem 1rem;
max-width: 53rem;
.text {
font-size: 1.25rem;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index 0a07966b1..e8cd7e847 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,11 +1,21 @@
-.profile-type-container {
- position: relative;
- min-height: inherit;
+.profileType-view {
display: flex;
- flex: 1;
flex-direction: column;
- justify-content: space-between;
- label {
- cursor: pointer;
+ flex: 1;
+ padding-top: 1rem;
+ .progressContainer {
+ margin-inline: 1rem;
+ }
+
+ .profile-type-container {
+ position: relative;
+ min-height: inherit;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: space-between;
+ label {
+ cursor: pointer;
+ }
}
}
diff --git a/src/components/theme.ts b/src/components/theme.ts
index e23010af8..e1b9d32f0 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -19,5 +19,15 @@ export const theme = createTheme({
height: 40,
},
},
+ MuiLinearProgress: {
+ determinate: {
+ height: 6,
+ borderRadius: 5,
+ backgroundColor: 'transparent',
+ },
+ barColorPrimary: {
+ backgroundColor: '#e3b82a',
+ },
+ },
},
})
--
GitLab