Newer
Older
import { Button } from '@material-ui/core'
import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType, UserChallengeUpdateFlag } from 'enums'
import { UserChallenge } from 'models'
import { useNavigate } from 'react-router-dom'
import ChallengeService from 'services/challenge.service'
import UsageEventService from 'services/usageEvent.service'
import { updateUserChallengeList } from 'store/challenge/challenge.slice'
import { toggleChallengeActionNotification } from 'store/global/global.slice'
import { useAppDispatch } from 'store/hooks'
import './actionDone.scss'
}: {
currentChallenge: UserChallenge
}) => {
const navigate = useNavigate()
const handleEndAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
const updatedChallenge: UserChallenge =
await challengeService.updateUserChallenge(
currentChallenge,
UserChallengeUpdateFlag.ACTION_DONE
)
await UsageEventService.addEvent(client, {
type: UsageEventType.ACTION_END_EVENT,
target: currentChallenge.action.ecogesture
? currentChallenge.action.ecogesture.id
: '',
context: currentChallenge.id,
dispatch(updateUserChallengeList(updatedChallenge))
navigate(-1)
}, [currentChallenge, dispatch, client, navigate])
<div className="action-done-container">
<div className="action-done">
<div className="result-title"> {t('action.finished')}</div>
<div className="result-text text-16-normal">
{t('action.resultText1')}
</div>
<div className="result-text text-16-normal">
{t('action.resultText2')}
</div>
<div className="result-text text-16-normal">
{t('action.resultText3')}
</div>
<div className="result-text text-16-normal">
{t('action.resultText4')}
</div>
<div className="stars">
<span>5</span>
<StyledIcon icon={starFilled} size={33} />
</div>
<Button
classes={{
root: 'btn-secondary-negative btn-detail',
label: 'text-16-normal',
}}
onClick={handleEndAction}
>
{t('action.ok')}
</Button>
</div>
</div>
)
}
export default ActionDone