diff --git a/src/assets/icons/visu/duelResult/SEASON0001-0.svg b/src/assets/icons/visu/duelResult/SEASON0001-0.svg
new file mode 100644
index 0000000000000000000000000000000000000000..91dc634fbd6f3dbee875a5bc1ebc224018bb43dd
--- /dev/null
+++ b/src/assets/icons/visu/duelResult/SEASON0001-0.svg
@@ -0,0 +1,16 @@
+<svg width="208" height="208" viewBox="0 0 208 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.65" d="M30.3335 152.514C30.3335 148.962 58.2627 145.707 72.2273 144.524C94.3885 141.86 124.409 145.202 136.067 147.333C150.639 149.996 176.051 152.514 176.051 155.177C176.051 157.84 156.823 161.391 157.734 164.054C158.644 166.718 175.14 165.83 176.051 169.381C176.962 172.932 169.867 169.323 169.867 176.483C169.867 180.922 179.4 176.694 179.4 181.133C179.4 185.572 115.943 189.8 115.032 185.361C114.121 180.922 130.514 181.81 130.514 176.483C130.514 171.157 56.7448 174.708 56.7448 169.381C56.7448 164.054 87.7098 166.718 86.799 161.391C85.8883 156.065 30.3335 156.952 30.3335 152.514Z" fill="#61F0F2"/>
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="19" y="105" width="173" height="55">
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M134.333 142.132L156 118.732H143L134.333 142.132Z" fill="#89C8DC"/>
+<path d="M125.667 143.866C130 149.933 138.667 162.24 138.667 162.933H94.4668L110.067 143.866C113.533 145.6 120.64 149.24 121.333 149.933C122.027 150.626 124.511 146.177 125.667 143.866Z" fill="#88C8DC"/>
+<path d="M39.8669 154.266L28.6002 109.199L26.8669 105.732H19.0669L39.8669 154.266Z" fill="#88C8DC"/>
+<path d="M164.667 142.133V116.133L176.8 110.933L164.667 142.133Z" fill="#5DADC7"/>
+<path d="M92.7337 162.065L102.267 128.265L50.267 123.065L47.667 137.799L50.267 162.065H92.7337Z" fill="#88C8DC"/>
+<path d="M47.6671 157.732L36.4004 107.466L52.0004 111.799L52.8671 157.732H47.6671Z" fill="#5DADC7"/>
+</g>
+<path d="M47.6668 92.7327C38.1335 96.4882 18.7202 104.173 17.3335 104.866L31.2002 112.666H38.1335L52.8668 128.266L99.6668 130.866L175.934 115.266L192.4 104.866L181.134 92.7327L114.4 86.666L47.6668 92.7327Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/visu/duelResult/SEASON0001-1.svg b/src/assets/icons/visu/duelResult/SEASON0001-1.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3fa8c67def16e488ca8ac93582519f890fc2769c
--- /dev/null
+++ b/src/assets/icons/visu/duelResult/SEASON0001-1.svg
@@ -0,0 +1,32 @@
+<svg width="208" height="208" viewBox="0 0 208 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.65" d="M30.3335 152.514C30.3335 148.962 58.2627 145.707 72.2273 144.524C94.3885 141.86 124.409 145.202 136.067 147.333C150.639 149.996 176.051 152.514 176.051 155.177C176.051 157.84 156.823 161.391 157.734 164.054C158.644 166.718 175.14 165.83 176.051 169.381C176.962 172.932 169.867 169.323 169.867 176.483C169.867 180.922 179.4 176.694 179.4 181.133C179.4 185.572 115.943 189.8 115.032 185.361C114.121 180.922 130.514 181.81 130.514 176.483C130.514 171.157 56.7448 174.708 56.7448 169.381C56.7448 164.054 87.7098 166.718 86.799 161.391C85.8883 156.065 30.3335 156.952 30.3335 152.514Z" fill="#61F0F2"/>
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="19" y="105" width="173" height="55">
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M134.333 142.132L156 118.732H143L134.333 142.132Z" fill="#89C8DC"/>
+<path d="M125.667 143.866C130 149.933 138.667 162.24 138.667 162.933H94.4668L110.067 143.866C113.533 145.6 120.64 149.24 121.333 149.933C122.027 150.626 124.511 146.177 125.667 143.866Z" fill="#88C8DC"/>
+<path d="M39.8669 154.266L28.6002 109.199L26.8669 105.732H19.0669L39.8669 154.266Z" fill="#88C8DC"/>
+<path d="M164.667 142.133V116.133L176.8 110.933L164.667 142.133Z" fill="#5DADC7"/>
+<path d="M92.7337 162.065L102.267 128.265L50.267 123.065L47.667 137.799L50.267 162.065H92.7337Z" fill="#88C8DC"/>
+<path d="M47.6671 157.732L36.4004 107.466L52.0004 111.799L52.8671 157.732H47.6671Z" fill="#5DADC7"/>
+</g>
+<path d="M47.6668 92.7327C38.1335 96.4882 18.7202 104.173 17.3335 104.866L31.2002 112.666H38.1335L52.8668 128.266L99.6668 130.866L175.934 115.266L192.4 104.866L181.134 92.7327L114.4 86.666L47.6668 92.7327Z" fill="white"/>
+<path d="M139.533 87.5329V86.6663L134.333 83.1996V109.2H156.867C165.534 109.2 164.667 105.733 164.667 103.133V87.5329C164.667 80.5996 161.2 80.5996 156.867 80.5996C152.534 80.5996 151.667 84.9329 151.667 87.5329C151.667 91.8663 151.667 92.7329 147.334 92.7329C143 92.7329 139.533 92.7329 139.533 87.5329Z" fill="#A6BEC1"/>
+<path d="M71.091 87.5329V86.6663L76.291 83.1996V109.2H53.7577C45.091 109.2 45.9577 105.733 45.9577 103.133V87.5329C45.9577 80.5996 49.4244 80.5996 53.7577 80.5996C58.091 80.5996 58.9577 84.9329 58.9577 87.5329C58.9577 91.8663 58.9577 92.7329 63.291 92.7329C67.6244 92.7329 71.091 92.7329 71.091 87.5329Z" fill="#A6BEC1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.867 59.9805C86.6586 59.9805 71.7171 70.8173 70.2002 85.4388V109.2H139.534V85.4388C138.017 70.8173 123.075 59.9805 104.867 59.9805Z" fill="#A6BEC1"/>
+<path d="M136.067 62.3994C134.333 52.8661 75.4001 51.1328 73.6667 62.3994C71.9334 73.6661 77.1334 112.666 77.1334 112.666C77.1334 116.495 80.2376 119.599 84.0667 119.599H91.7488C94.1265 119.599 95.9793 117.538 95.7261 115.174L92.7334 87.2268C92.7334 89.789 98.1657 91.866 104.867 91.866C111.568 91.866 117 89.789 117 87.2268L114.007 115.174C113.754 117.538 115.607 119.599 117.985 119.599H125.667C129.496 119.599 132.6 116.495 132.6 112.666C132.6 112.666 137.8 71.9328 136.067 62.3994Z" fill="#C8D6D8"/>
+<path d="M136.067 63.4943H73.667C75.0322 52.177 88.4795 43.7891 104.867 43.7891C121.254 43.7891 134.702 52.177 136.067 63.4943Z" fill="#C8D6D8"/>
+<path d="M125.862 37.2208C125.862 41.3854 127.38 46.7139 124.113 50.3577C120.266 54.6489 111.138 56.9261 104.867 56.9261C98.5961 56.9261 89.4681 53.8154 85.621 49.5242C82.3542 45.8804 83.8713 41.3854 83.8713 37.2208C83.8713 28.1517 93.2714 24.084 104.867 24.084C116.462 24.084 125.862 28.1517 125.862 37.2208Z" fill="#DDE4E4"/>
+<ellipse cx="86.8038" cy="27.3682" rx="6.56842" ry="6.56842" fill="#DDE4E4"/>
+<path d="M90.088 27.3682C90.088 25.5544 88.6176 24.084 86.8037 24.084C84.9899 24.084 83.5195 25.5544 83.5195 27.3682C83.5195 29.182 84.9899 30.6524 86.8037 30.6524C86.8037 28.8386 88.2741 27.3682 90.088 27.3682Z" fill="#FFA9E2"/>
+<ellipse cx="122.93" cy="27.3682" rx="6.56842" ry="6.56842" fill="#DDE4E4"/>
+<path d="M93.3726 50.3575C93.3726 44.9161 98.5189 40.5049 104.867 40.5049C111.216 40.5049 116.362 44.9161 116.362 50.3575C116.362 60.2101 111.216 60.2101 104.867 60.2101C98.5189 60.2101 93.3726 60.2101 93.3726 50.3575Z" fill="white"/>
+<path d="M122.93 30.6524C124.744 30.6524 126.214 29.182 126.214 27.3682C126.214 25.5544 124.744 24.084 122.93 24.084C121.116 24.084 119.646 25.5544 119.646 27.3682C121.46 27.3682 122.93 28.8386 122.93 30.6524Z" fill="#FFA9E2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.867 47.8945C105.32 47.8945 105.688 48.2621 105.688 48.7156C105.688 52.3468 103.265 55.5919 99.9407 55.5919C99.4872 55.5919 99.1196 55.2243 99.1196 54.7708C99.1196 54.3174 99.4872 53.9498 99.9407 53.9498C102.058 53.9498 104.046 51.7728 104.046 48.7156C104.046 48.2621 104.414 47.8945 104.867 47.8945Z" fill="#3C6775"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.867 47.8945C104.414 47.8945 104.046 48.2621 104.046 48.7156C104.046 52.3468 106.469 55.5919 109.794 55.5919C110.247 55.5919 110.615 55.2243 110.615 54.7708C110.615 54.3174 110.247 53.9498 109.794 53.9498C107.677 53.9498 105.688 51.7728 105.688 48.7156C105.688 48.2621 105.321 47.8945 104.867 47.8945Z" fill="#3C6775"/>
+<path d="M100.72 45.8933C100.248 47.0222 102.788 49.4854 104.867 49.4854C106.946 49.4854 109.588 46.9709 109.014 45.8933C108.44 44.8157 107.433 44.0459 104.867 44.0459C102.301 44.0459 101.191 44.7644 100.72 45.8933Z" fill="#040404"/>
+<circle cx="96.2001" cy="36.3993" r="1.73333" fill="#121212"/>
+<circle cx="113.534" cy="36.3993" r="1.73333" fill="#121212"/>
+</svg>
diff --git a/src/assets/icons/visu/duelResult/default.svg b/src/assets/icons/visu/duelResult/default.svg
new file mode 100644
index 0000000000000000000000000000000000000000..91dc634fbd6f3dbee875a5bc1ebc224018bb43dd
--- /dev/null
+++ b/src/assets/icons/visu/duelResult/default.svg
@@ -0,0 +1,16 @@
+<svg width="208" height="208" viewBox="0 0 208 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.65" d="M30.3335 152.514C30.3335 148.962 58.2627 145.707 72.2273 144.524C94.3885 141.86 124.409 145.202 136.067 147.333C150.639 149.996 176.051 152.514 176.051 155.177C176.051 157.84 156.823 161.391 157.734 164.054C158.644 166.718 175.14 165.83 176.051 169.381C176.962 172.932 169.867 169.323 169.867 176.483C169.867 180.922 179.4 176.694 179.4 181.133C179.4 185.572 115.943 189.8 115.032 185.361C114.121 180.922 130.514 181.81 130.514 176.483C130.514 171.157 56.7448 174.708 56.7448 169.381C56.7448 164.054 87.7098 166.718 86.799 161.391C85.8883 156.065 30.3335 156.952 30.3335 152.514Z" fill="#61F0F2"/>
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="19" y="105" width="173" height="55">
+<path d="M38.1336 147.332L19.0669 105.732H191.534L169.867 150.799C163.511 154.266 142.134 160.852 107.467 159.466C72.8002 158.079 46.8002 150.799 38.1336 147.332Z" fill="#ABDDED"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M134.333 142.132L156 118.732H143L134.333 142.132Z" fill="#89C8DC"/>
+<path d="M125.667 143.866C130 149.933 138.667 162.24 138.667 162.933H94.4668L110.067 143.866C113.533 145.6 120.64 149.24 121.333 149.933C122.027 150.626 124.511 146.177 125.667 143.866Z" fill="#88C8DC"/>
+<path d="M39.8669 154.266L28.6002 109.199L26.8669 105.732H19.0669L39.8669 154.266Z" fill="#88C8DC"/>
+<path d="M164.667 142.133V116.133L176.8 110.933L164.667 142.133Z" fill="#5DADC7"/>
+<path d="M92.7337 162.065L102.267 128.265L50.267 123.065L47.667 137.799L50.267 162.065H92.7337Z" fill="#88C8DC"/>
+<path d="M47.6671 157.732L36.4004 107.466L52.0004 111.799L52.8671 157.732H47.6671Z" fill="#5DADC7"/>
+</g>
+<path d="M47.6668 92.7327C38.1335 96.4882 18.7202 104.173 17.3335 104.866L31.2002 112.666H38.1335L52.8668 128.266L99.6668 130.866L175.934 115.266L192.4 104.866L181.134 92.7327L114.4 86.666L47.6668 92.7327Z" fill="white"/>
+</svg>
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index d84485a1a105b22d4a7ff9dedc5aed34f1e97305..5e076f8c887524452d0188395637e4b5b97c4a6c 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -1,11 +1,13 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import './duelOngoing.scss'
import { Client, useClient } from 'cozy-client'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { EcolyoState } from 'store'
import {
unlockNextUserSeason,
updateUserSeasonList,
} from 'store/season/season.actions'
+import { toogleSeasonNotification } from 'store/global/global.actions'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserBoss, UserSeason } from 'models'
import { formatNumberValues } from 'utils/utils'
@@ -14,12 +16,11 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import CaptionAverageIcon from 'assets/icons/visu/duel/captionAverage.svg'
import CaptionConsumptionIcon from 'assets/icons/visu/duel/captionConsumption.svg'
import CaptionIncomingIcon from 'assets/icons/visu/duel/captionIncoming.svg'
-import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import SeasonService from 'services/season.service'
import { UpdateUserSeason } from 'enum/updateUserSeason.enum'
import { useHistory } from 'react-router-dom'
import ChartDuel from './ChartDuel'
-import { DateTime } from 'luxon'
+import DuelResultModal from './DuelResultModal'
interface DuelOngoingProps {
userSeason: UserSeason
@@ -30,8 +31,11 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
}: DuelOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
+ const { currentDataload } = useSelector((state: EcolyoState) => state.season)
const dispatch = useDispatch()
const history = useHistory()
+ const [resultModal, setResultModal] = useState<boolean>(false)
+ const [winSeason, setWinSeason] = useState<boolean>(false)
const boss: UserBoss = userSeason.boss
const title: string = boss.title
@@ -42,78 +46,89 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
userSeason.boss.threshold
).toString()
- const winSeason = useCallback(async () => {
+ const setResult = useCallback(async () => {
const seasonService = new SeasonService(client)
const updatedSeason = await seasonService.updateUserSeason(
userSeason,
- UpdateUserSeason.BOSS_WIN
+ winSeason ? UpdateUserSeason.BOSS_WIN : UpdateUserSeason.BOSS_LOSS
)
dispatch(updateUserSeasonList(updatedSeason))
dispatch(unlockNextUserSeason(updatedSeason))
+ dispatch(toogleSeasonNotification(false))
history.push('/challenges')
- }, [client, dispatch, userSeason, history])
+ }, [client, dispatch, userSeason, history, winSeason])
- const lossSeason = useCallback(async () => {
+ useEffect(() => {
const seasonService = new SeasonService(client)
- const updatedSeason = await seasonService.updateUserSeason(
- userSeason,
- UpdateUserSeason.BOSS_LOSS
- )
- dispatch(updateUserSeasonList(updatedSeason))
- dispatch(unlockNextUserSeason(updatedSeason))
- history.push('/challenges')
- }, [client, dispatch, userSeason, history])
+ let subscribed = true
+ async function setSeasonResult() {
+ const { isDone, isWin } = await seasonService.isSeasonDone(
+ userSeason,
+ currentDataload
+ )
+ if (subscribed) {
+ setResultModal(isDone)
+ setWinSeason(isWin)
+ }
+ }
+ setSeasonResult()
+ return () => {
+ subscribed = false
+ }
+ }, [client, currentDataload, userSeason])
return (
- <div className="duel-ongoing-container">
- <div className="boss-title text-16-normal">{boss.title}</div>
- <div className="boss-goal text-18-normal">
- {t('duel.goal', {
- title,
- // eslint-disable-next-line @typescript-eslint/camelcase
- smart_count: title,
- })}
- </div>
- <div className="boss-consumption text-28-normal">
- <span className="consumption">{userConsumption}</span>
- {` / ${average} €`}
- </div>
- <div className="boss-chart">
- <ChartDuel userSeason={userSeason} />
- <StyledStopButton color="secondary" onClick={winSeason}>
- Réussir
- </StyledStopButton>
- <StyledStopButton color="secondary" onClick={lossSeason}>
- Echouer
- </StyledStopButton>
- </div>
- <div className="boss-chart-caption text-15-normal">
- <div className="boss-caption">
- <StyledIcon
- className="caption-icon"
- icon={CaptionAverageIcon}
- size={25}
- />
- <div className="caption-label">{t('duel.caption_average')}</div>
+ <>
+ <div className="duel-ongoing-container">
+ <div className="boss-title text-16-normal">{boss.title}</div>
+ <div className="boss-goal text-18-normal">
+ {t('duel.goal', {
+ title,
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ smart_count: title,
+ })}
+ </div>
+ <div className="boss-consumption text-28-normal">
+ <span className="consumption">{userConsumption}</span>
+ {` / ${average} €`}
</div>
- <div className="boss-caption">
- <StyledIcon
- className="caption-icon"
- icon={CaptionConsumptionIcon}
- size={25}
- />
- <div className="caption-label">{t('duel.caption_consumption')}</div>
+ <div className="boss-chart">
+ <ChartDuel userSeason={userSeason} />
</div>
- <div className="boss-caption">
- <StyledIcon
- className="caption-icon"
- icon={CaptionIncomingIcon}
- size={25}
- />
- <div className="caption-label">{t('duel.caption_incoming')}</div>
+ <div className="boss-chart-caption text-15-normal">
+ <div className="boss-caption">
+ <StyledIcon
+ className="caption-icon"
+ icon={CaptionAverageIcon}
+ size={25}
+ />
+ <div className="caption-label">{t('duel.caption_average')}</div>
+ </div>
+ <div className="boss-caption">
+ <StyledIcon
+ className="caption-icon"
+ icon={CaptionConsumptionIcon}
+ size={25}
+ />
+ <div className="caption-label">{t('duel.caption_consumption')}</div>
+ </div>
+ <div className="boss-caption">
+ <StyledIcon
+ className="caption-icon"
+ icon={CaptionIncomingIcon}
+ size={25}
+ />
+ <div className="caption-label">{t('duel.caption_incoming')}</div>
+ </div>
</div>
</div>
- </div>
+ <DuelResultModal
+ open={resultModal}
+ userSeason={userSeason}
+ win={winSeason}
+ handleCloseClick={setResult}
+ />
+ </>
)
}
diff --git a/src/components/Duel/DuelResultModal.tsx b/src/components/Duel/DuelResultModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f276f1ccd74d74cc21ff092f876b362544f5e5fa
--- /dev/null
+++ b/src/components/Duel/DuelResultModal.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import './duelResultModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { formatNumberValues, importIconbyId } from 'utils/utils'
+
+import { UserSeason } from 'models/season.model'
+import Modal from 'components/CommonKit/Modal/Modal'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
+import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
+
+interface DuelResultModalProps {
+ open: boolean
+ userSeason: UserSeason
+ win: boolean
+ handleCloseClick: () => void
+}
+
+const DuelResultModal: React.FC<DuelResultModalProps> = ({
+ open,
+ userSeason,
+ win,
+ handleCloseClick,
+}: DuelResultModalProps) => {
+ const { t } = useI18n()
+ const [winIcon, setWinIcon] = useState<string>(defaultIcon)
+ const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+ const result: string | number = formatNumberValues(
+ Math.abs(userSeason.boss.threshold - userSeason.boss.userConsumption)
+ )
+
+ useEffect(() => {
+ importIconbyId(userSeason.id + '-1', 'duelResult').then(icon => {
+ icon ? setWinIcon(icon) : setWinIcon(defaultIcon)
+ })
+ importIconbyId(userSeason.id + '-0', 'duelResult').then(icon => {
+ icon ? setLossIcon(icon) : setLossIcon(defaultIcon)
+ })
+ }, [userSeason])
+
+ return (
+ <>
+ <Modal open={open} border={true} handleCloseClick={handleCloseClick}>
+ <div className="em-root modal-congrats">
+ <div className="em-content">
+ <StyledIcon
+ className="imgResult"
+ icon={win ? winIcon : lossIcon}
+ size={208}
+ />
+ <div className="text-28-normal-uppercase title">
+ {win ? t('duel.sucess.title') : t('duel.lost.title')}
+ </div>
+ <div className="text-18-normal">
+ {win
+ ? t('duel.sucess.message1') + result + ' €'
+ : t('duel.lost.message1') + result + ' €'}
+ </div>
+ <div className="text-18-normal">
+ {win ? t('duel.sucess.message2') : t('duel.lost.message2')}
+ </div>
+ <StyledStopButton
+ color="secondary"
+ className="button"
+ onClick={handleCloseClick}
+ >
+ {win ? t('duel.sucess.button') : t('duel.lost.button')}
+ </StyledStopButton>
+ </div>
+ </div>
+ </Modal>
+ </>
+ )
+}
+
+export default DuelResultModal
diff --git a/src/components/Duel/duelResultModal.scss b/src/components/Duel/duelResultModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..373516a71adeabbba255d50cb5058e912ed43314
--- /dev/null
+++ b/src/components/Duel/duelResultModal.scss
@@ -0,0 +1,13 @@
+.modal-congrats{
+ text-align: center;
+ overflow-x: hidden;
+ .em-content{
+ padding: 1.5rem 2.5rem;
+ }
+ .title{
+ margin: 2rem 0 1rem;
+ }
+ button{
+ margin: 2rem 0.25rem 0.5rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx
index 79ca3b3694717a5f1ef8fb2556328163f195d4e3..f91d17879201639663f8d3ac0fbada7065bb9b4a 100644
--- a/src/components/Season/SeasonCardOnGoing.tsx
+++ b/src/components/Season/SeasonCardOnGoing.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState } from 'react'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useDispatch } from 'react-redux'
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 700f73a1e17c8e299e2d759ca86ec13bc6ccb37b..5e2bc6085269c7c50e0342e7759a08cf8365ee7e 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -377,6 +377,18 @@
"goal": "Faites moins que votre moyenne hebdomadaire pour batte %{smart_count} !",
"caption_average": "Votre moyenne à titre indicatif",
"caption_consumption": "Votre consommation",
- "caption_incoming": "Données à venir"
+ "caption_incoming": "Données à venir",
+ "sucess": {
+ "title": "Félicitations !",
+ "message1": "Vous avez économisé ",
+ "message2": "et gagné un ours polaire",
+ "button": "Youpi"
+ },
+ "lost": {
+ "title": "Presque !",
+ "message1": "Vous avez dépassé de ",
+ "message2": "et presque gagné un ours polaire...",
+ "button": "Dommage..."
+ }
}
}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index f5a272308a44f85a187c57f1061612195d98c80f..3fc5e477bb359cd03c14b472a8b421c2205e8c8b 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -182,6 +182,14 @@ p {
font-size: 1.75rem;
line-height: 120%;
}
+.text-28-normal-uppercase {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: uppercase;
+ font-size: 1.75rem;
+ line-height: 120%;
+}
/* Button */
.button-primary-text {