diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.spec.tsx
index c28c8322612668f9fbbf3e0637f934beb1fa87ff..b9be78286030fbeb9deedf9ac78ed3b28526f7e6 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 be6e49794736fb118e6d1215b314976f231b4c62..cd13d77ef248aa7df3649c9b6f22ab9497fcb9ef 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 0000000000000000000000000000000000000000..988676204d9026082667229b6852b27b65eef867
--- /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 103e6305a72b80eee37158e5db0414c0c2d2ac49..d5c35a49f6b1bc29ccc4cff00337660d0cdbb52d 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 dd1f500a85c283e899f54be9a04d1b5963755057..7a70e0fde58da161995fe400ac9971fcf800fb03 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 02d958a4e4a22cd6962b356a853e5ca3f4988234..d7c9af6ba030bc7974378d9cdb429050d76f1e0f 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 d09bc8f7292733bea6dc556aee98b317007192a5..5a5df27cc2eb7d666ebcdfe02487f0d85a392311 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 cf6cc543090625581ccf1fe9e0e076b3689bdf2b..036c91711c4583892436719e7182be2c67610df0 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 ca613d4b9f108a515628586dba9488af2d2dc903..59dfa2b6d36071b61298edabf1f48741dec0b365 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 eca4b0a774d14d728af91863186e0ee07704edab..4852439abc3a8be68c3a3f3a5ac3afb51c3a4008 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 ed0bc90c23394c74c1afea2438180aa81028d0e0..61893059fa3c958e17c6ae4e4dc4d66c90fd1952 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 57f1f6692161543435b8f01a802a5782a56e6b60..b7e89d07dbfa9cbc95c18262d2831f73c54d511e 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 e7efcf827da8c60189afcc7377ab04eccc9af595..21401195fa52659828157655c6669b9c9e41c349 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 a654c4bfe1631bcb422e5ca18244d7468cb89603..501a60176665575e4f897dc6c382aaefa39b5f99 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 b7aabd755eb5aba0310c41969783c5bc97b6f730..dc4e57379310b77bddf7fa3b1bf3f3f6011e298a 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 cad6e9cd5bf3bbbc8667035c66386b49a4ecf5b4..42f247a432bcf8c1d8795cb3002b158919b76817 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 6a58102c477facedfdd91c2b89d8c7469af56e59..2a3c9cfac0a6275e6c409c307dad16ed9ec734ad 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 918be75c334d086c3efd1485cd588e02c399133d..e4d1bf390873b9d92424d7b165886f722980295e 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 10c5ca18bc0dcebac352cca988340ea10846c788..be39d086fade19dd51fb266d8d5f3d33838ead41 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 52f88be87c5fa774acbf08f7e881bc76a9b88ec6..2fc81aa25bc284c25999e7b688f108426f99bf75 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 c9bc054f90caf1450ffe2f3b6d9bdea50cd6be8a..77e2baebe8ea29e3184babe0745fed2a83d520ec 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 6f619beb1e9c8c1372a0ad4602cb87174dffce58..2436c5bd0203f363949993fd39c456cb4f2e632a 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 49f36d4ec7d6cc9e8897c9ee2f3e759f7470045d..9ebe653558a6026ed81aa611f69570526f0457c6 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 0a07966b1977394dd46fd3530552a55babc9d6bf..e8cd7e8470d27434c43af811ba609018503fa51a 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 e23010af8bab6529a2e279be850241191d9559f1..e1b9d32f0f4fe8779ed4cb7dde38eb4b572efb35 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',
+ },
+ },
},
})