diff --git a/src/components/Season/SeasonCardDone.tsx b/src/components/Season/SeasonCardDone.tsx index b315e26521e601b8c720f94bd4d9500756753a76..746ccaae6dbc902aab7157d12fa22a8fd1b0b87f 100644 --- a/src/components/Season/SeasonCardDone.tsx +++ b/src/components/Season/SeasonCardDone.tsx @@ -1,10 +1,12 @@ -import React from 'react' +import React, { useCallback } from 'react' import './seasonCardDone.scss' import { UserSeason } from 'models' import iconSuccess from 'assets/png/seasons/beariconSuccess.png' import iconAlmost from 'assets/png/seasons/bearx.png' import { UserSeasonSuccess } from 'enum/userSeason.enum' import { DateTime } from 'luxon' +import { formatNumberValues } from 'utils/utils' +import { useI18n } from 'cozy-ui/transpiled/react/I18n' interface SeasonCardDoneProps { userSeason: UserSeason @@ -13,7 +15,8 @@ interface SeasonCardDoneProps { const SeasonCardDone: React.FC<SeasonCardDoneProps> = ({ userSeason, }: SeasonCardDoneProps) => { - const getNumberDayProgress = (localUserSeason: UserSeason) => { + const { t } = useI18n() + const getNumberDayProgress = useCallback((localUserSeason: UserSeason) => { if ( localUserSeason.startDate !== null && localUserSeason.endingDate !== null @@ -24,63 +27,73 @@ const SeasonCardDone: React.FC<SeasonCardDoneProps> = ({ const delta = endDate.diff(startDate, 'days').toObject() if (delta && delta.days !== undefined) { delta.days = Math.round(delta.days + 1) - const label = delta.days == 1 ? ' jour' : ' jours' + const label = + delta.days == 1 + ? t('season.card_done.day') + : t('season.card_done.days') return ' ' + delta.days + ' ' + label } } else return '' - } - const getUserSaving = (localUserSeason: UserSeason) => { + }, []) + const getUserSaving = useCallback((localUserSeason: UserSeason) => { let label if (localUserSeason.boss.threshold > localUserSeason.boss.userConsumption) - label = 'Economie de ' - else label = 'Dépense de ' + label = t('season.card_done.saving') + else label = t('season.card_done.depense') return ( label + - Math.round( - (Math.abs( + formatNumberValues( + Math.abs( localUserSeason.boss.threshold - localUserSeason.boss.userConsumption - ) * - 100) / - 100 + ) ) + '€' ) - } - const getResultLabel = (localUserSeason: UserSeason) => { - switch (localUserSeason.success) { - case UserSeasonSuccess.WIN: - return 'Gagné' - case UserSeasonSuccess.ALMOST_WIN: - return 'Presque gagné' - case UserSeasonSuccess.LOST: - return 'Perdu' - } - } - const getIcon = (localUserSeason: UserSeason) => { + }, []) + const getResultLabel = useCallback( + (localUserSeason: UserSeason, className = false) => { + switch (localUserSeason.success) { + case UserSeasonSuccess.WIN: + return className ? 'labelResult win' : t('season.card_done.win') + case UserSeasonSuccess.ALMOST_WIN: + return className + ? 'labelResult almostWin' + : t('season.card_done.almostWin') + case UserSeasonSuccess.LOST: + return className ? 'labelResult lost' : t('season.card_done.lost') + } + }, + [] + ) + const getIcon = useCallback((localUserSeason: UserSeason) => { let icon if (localUserSeason.success == UserSeasonSuccess.WIN) icon = iconSuccess else icon = iconAlmost return icon - } + }, []) return ( <div className="cardContent"> - <div className="headerCard">SAISON</div> + <div className="headerCard">{t('season.card.title')}</div> <div className="seasonName text-20-bold">{userSeason.boss.title}</div> <div className="iconResult"> <img src={getIcon(userSeason)} className="imgResult" /> </div> - <div className="labelResult">{getResultLabel(userSeason)}</div> + <div className={getResultLabel(userSeason, true)}> + {getResultLabel(userSeason)} + </div> <div className="statsResult"> - <span className="text-18-bold">{userSeason.progress} étoiles</span> + <span className="text-18-bold"> + {userSeason.progress} {t('season.card_done.stars')} + </span> <br /> - obtenues en + {t('season.card_done.get_in')} <span className="text-18-bold">{getNumberDayProgress(userSeason)}</span> <br /> <br /> <span className="text-18-bold">{getUserSaving(userSeason)}</span> <br /> - sur le défi final + {t('season.card_done.final_defi')} </div> </div> ) diff --git a/src/components/Season/seasonCardDone.scss b/src/components/Season/seasonCardDone.scss index e3d9c1603272ec1444c76c7a369cbb272730958d..aea866ebaf3dd341b47d3fb27677809ac8469279 100644 --- a/src/components/Season/seasonCardDone.scss +++ b/src/components/Season/seasonCardDone.scss @@ -1,21 +1,30 @@ @import '../../styles/base/typography'; +@import '../../styles/base/color'; .cardContent { - border: 1px solid #E0E0E0; + border: 1px solid $grey-bright; filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55)); border-radius: 4px; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-around; align-items: center; } .seasonName, .labelResult { - margin-bottom: 2rem; + margin-bottom: 1rem; } .labelResult { - color: #E3B82A; font-weight: bold; font-size: 24px; line-height: 120%; +} +.win { + color: $gold +} +.almostWin { + color: $blue-shadowed +} +.lost { + color: $red-primary } \ No newline at end of file diff --git a/src/locales/fr.json b/src/locales/fr.json index 3018a23d86fd9f9ec7b95fc1892cefc48938b6c9..26b34353e4f8533fe9fd446e48cb2c2952ecde54 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -342,6 +342,18 @@ "action": "Actions", "duel": "Duel Final" } + }, + "card_done": { + "day" : " jour", + "days" : " jours", + "saving" : "Economie de ", + "depense" : "Dépense de", + "win" : "Gagné", + "almostWin" : "Presque gagné", + "lost" : "Perdu", + "stars" : " étoiles", + "get_in" : "obtenues en ", + "final_defi" : "sur le défi final" } }, "duel": {