Skip to content
Snippets Groups Projects
Commit 10cf37c8 authored by Yoan VALLET's avatar Yoan VALLET
Browse files

feat: update Profile buttons

parent 765d1f36
No related branches found
No related tags found
1 merge request!319accessibility buttons
...@@ -3,7 +3,7 @@ import * as reactRedux from 'react-redux' ...@@ -3,7 +3,7 @@ import * as reactRedux from 'react-redux'
import { shallow } from 'enzyme' import { shallow } from 'enzyme'
import FeedbackModal from 'components/Feedback/FeedbackModal' import FeedbackModal from 'components/Feedback/FeedbackModal'
import MuiButton from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock' import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
const mockSendMail = jest.fn() const mockSendMail = jest.fn()
...@@ -93,7 +93,7 @@ describe('FeedbackModal functionnalities', () => { ...@@ -93,7 +93,7 @@ describe('FeedbackModal functionnalities', () => {
wrapper wrapper
.find('#idFeedbackDescription') .find('#idFeedbackDescription')
.simulate('change', { target: { value: 'La description' } }) .simulate('change', { target: { value: 'La description' } })
wrapper.find(MuiButton).simulate('click') wrapper.find(Button).simulate('click')
expect(mockSendMail).toHaveBeenCalledWith( expect(mockSendMail).toHaveBeenCalledWith(
expect.anything(), expect.anything(),
......
...@@ -2,7 +2,7 @@ import React, { useState, useCallback, useRef } from 'react' ...@@ -2,7 +2,7 @@ import React, { useState, useCallback, useRef } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { AppStore } from 'store' import { AppStore } from 'store'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import MuiButton from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import './profileTypeOptions.scss' import './profileTypeOptions.scss'
import { import {
IndividualOrCollective, IndividualOrCollective,
...@@ -233,15 +233,18 @@ const ProfileTypeOptions: React.FC = () => { ...@@ -233,15 +233,18 @@ const ProfileTypeOptions: React.FC = () => {
</div> </div>
</div> </div>
<div className="inline-buttons"> <div className="inline-buttons">
<MuiButton <Button
aria-label={t(
'profile_type.accessibility.button_update_profile'
)}
onClick={goToForm} onClick={goToForm}
classes={{ classes={{
root: 'btn-secondary-negative', root: 'btn-secondary-negative',
label: 'text-16-normal', label: 'text-16-normal',
}} }}
> >
{t('profile_type.update_profile')} {t('profile_type.button_update_profile')}
</MuiButton> </Button>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux' ...@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom' import { useHistory } from 'react-router-dom'
import { updateProfile } from 'store/profile/profile.actions' import { updateProfile } from 'store/profile/profile.actions'
import { ProfileType } from 'models/profileType.model' import { ProfileType } from 'models/profileType.model'
import MuiButton from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import finishIcon from 'assets/icons/visu/profileType/finish.svg' import finishIcon from 'assets/icons/visu/profileType/finish.svg'
import ProfileTypeService from 'services/profileType.service' import ProfileTypeService from 'services/profileType.service'
...@@ -68,7 +68,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({ ...@@ -68,7 +68,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
<div>{t('profile_type.finished.label1')}</div> <div>{t('profile_type.finished.label1')}</div>
<div>{t('profile_type.finished.label2')}</div> <div>{t('profile_type.finished.label2')}</div>
</div> </div>
<MuiButton <Button
aria-label={t('profile_type.accessibility.button_validate')}
onClick={handleClick} onClick={handleClick}
className={'profile-type-finished-button'} className={'profile-type-finished-button'}
classes={{ classes={{
...@@ -76,8 +77,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({ ...@@ -76,8 +77,8 @@ const ProfileTypeFinished: React.FC<ProfileTypeFinishedProps> = ({
label: 'text-16-normal', label: 'text-16-normal',
}} }}
> >
{t('profile_type.finished.OK')} {t('profile_type.finished.button_validate')}
</MuiButton> </Button>
</div> </div>
) )
} }
......
import React from 'react' import React from 'react'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import { mount } from 'enzyme' import { mount } from 'enzyme'
import MuiButton from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import { import {
createMockStore, createMockStore,
mockInitialEcolyoState, mockInitialEcolyoState,
...@@ -40,15 +40,15 @@ describe('ProfileTypeNavigation component', () => { ...@@ -40,15 +40,15 @@ describe('ProfileTypeNavigation component', () => {
</Provider> </Provider>
) )
wrapper wrapper
.find(MuiButton) .find(Button)
.at(0) .at(0)
.simulate('click') .simulate('click')
wrapper wrapper
.find(MuiButton) .find(Button)
.at(1) .at(1)
.simulate('click') .simulate('click')
expect(wrapper.find('profile-navigation')).toBeTruthy() expect(wrapper.find('profile-navigation')).toBeTruthy()
expect(wrapper.find(MuiButton)).toBeTruthy() expect(wrapper.find(Button)).toBeTruthy()
expect(mockhandlePrevious.mock.calls.length).toEqual(1) expect(mockhandlePrevious.mock.calls.length).toEqual(1)
expect(mockhandleNext.mock.calls.length).toEqual(1) expect(mockhandleNext.mock.calls.length).toEqual(1)
}) })
......
import React from 'react' import React from 'react'
import 'components/ProfileType/profileTypeNavigation.scss' import 'components/ProfileType/profileTypeNavigation.scss'
import classNames from 'classnames' import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import MuiButton from '@material-ui/core/Button' import Button from '@material-ui/core/Button'
import { ProfileTypeStepForm } from 'enum/profileType.enum' import { ProfileTypeStepForm } from 'enum/profileType.enum'
interface ProfileTypeNavigationProps { interface ProfileTypeNavigationProps {
step: ProfileTypeStepForm step: ProfileTypeStepForm
handlePrevious: Function handlePrevious: Function
handleNext: Function handleNext: Function
disableNextButton: boolean disableNextButton: boolean
} }
const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({ const ProfileTypeNavigation: React.FC<ProfileTypeNavigationProps> = ({
step, step,
handlePrevious, handlePrevious,
handleNext, handleNext,
disableNextButton, disableNextButton,
}: ProfileTypeNavigationProps) => { }: ProfileTypeNavigationProps) => {
const { t } = useI18n() const { t } = useI18n()
const handlePreviousClick = () => { const handlePreviousClick = () => {
handlePrevious() handlePrevious()
} }
const handleNextClick = () => { const handleNextClick = () => {
handleNext() handleNext()
} }
return ( return (
<div className="profile-navigation"> <div className="profile-navigation">
<MuiButton <Button
onClick={handlePreviousClick} aria-label={t('profile_type.accessibility.button_previous')}
className={'profile-navigation-button'} onClick={handlePreviousClick}
disabled={step === ProfileTypeStepForm.HOUSING_TYPE} className={'profile-navigation-button'}
classes={{ disabled={step === ProfileTypeStepForm.HOUSING_TYPE}
root: 'btn-profile-back', classes={{
label: 'text-16-normal', root: 'btn-profile-back',
}} label: 'text-16-normal',
> }}
{`< ${t('profile_type.form.previous')}`} >
</MuiButton> {`< ${t('profile_type.form.button_previous')}`}
<MuiButton </Button>
onClick={handleNextClick} <Button
className={classNames('profile-navigation-button', { aria-label={
['disabled']: disableNextButton, step === ProfileTypeStepForm.COOKING_FLUID
})} ? t('profile_type.accessibility.button_end')
disabled={disableNextButton} : t('profile_type.accessibility.button_next')
classes={{ }
root: 'btn-profile-next rounded', onClick={handleNextClick}
label: 'text-16-normal', className={classNames('profile-navigation-button', {
}} ['disabled']: disableNextButton,
> })}
{step === ProfileTypeStepForm.COOKING_FLUID disabled={disableNextButton}
? t('profile_type.form.end') classes={{
: `${t('profile_type.form.next')} >`} root: 'btn-profile-next rounded',
</MuiButton> label: 'text-16-normal',
</div> }}
) >
} {step === ProfileTypeStepForm.COOKING_FLUID
? t('profile_type.form.button_end')
export default ProfileTypeNavigation : `${t('profile_type.form.button_next')} >`}
</Button>
</div>
)
}
export default ProfileTypeNavigation
...@@ -477,7 +477,7 @@ ...@@ -477,7 +477,7 @@
"profile_type": { "profile_type": {
"title_profile": "Profil de consommation", "title_profile": "Profil de consommation",
"read_profile": "Ajuster mon profil", "read_profile": "Ajuster mon profil",
"update_profile": "J'ajuste mon profil", "button_update_profile": "J'ajuste mon profil",
"your_profile": "Votre profil", "your_profile": "Votre profil",
"multi_choices": "Plusieurs réponses possibles", "multi_choices": "Plusieurs réponses possibles",
"housing_type": { "housing_type": {
...@@ -624,15 +624,22 @@ ...@@ -624,15 +624,22 @@
"2": "Gaz" "2": "Gaz"
}, },
"form": { "form": {
"previous": "Précédent", "button_previous": "Précédent",
"next": "Suivant", "button_next": "Suivant",
"end": "Terminer" "button_end": "Terminer"
}, },
"finished": { "finished": {
"title": "Terminé !", "title": "Terminé !",
"label1": "Grâce à ces informations, vous pourrez comparer votre consommation avec un foyer vous ressemblant davantage.", "label1": "Grâce à ces informations, vous pourrez comparer votre consommation avec un foyer vous ressemblant davantage.",
"label2": "Nous pourrons aussi vous proposer des écogestes adaptés à votre profil.", "label2": "Nous pourrons aussi vous proposer des écogestes adaptés à votre profil.",
"OK": "OK" "button_validate": "OK"
},
"accessibility": {
"button_end": "Terminer la mise à jour du profil",
"button_next": "Aller à la section suivante",
"button_previous": "Retour à la section précédente",
"button_update_profile": "Ouvrir la page de mise à jour du profil",
"button_validate": "Valider"
} }
}, },
"quiz": { "quiz": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment