diff --git a/src/assets/icons/visu/action/chrono-mini.svg b/src/assets/icons/visu/action/chrono-mini.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ee00c672d5806d948ec00e02979c09a82803e8cf
--- /dev/null
+++ b/src/assets/icons/visu/action/chrono-mini.svg
@@ -0,0 +1,22 @@
+<svg width="77" height="85" viewBox="0 0 77 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8738 2C32.5909 2 31.5509 3.03999 31.5509 4.32289C31.5509 5.60579 32.5909 6.64578 33.8738 6.64578C34.6068 6.64578 35.2011 7.24001 35.2011 7.97303V8.61444C35.2011 9.63533 34.4183 10.4803 33.4079 10.6262C17.9088 12.8632 6 26.2003 6 42.3188C6 60.0045 20.3371 74.3416 38.0227 74.3416C55.7084 74.3416 70.0455 60.0045 70.0455 42.3188C70.0455 34.1551 66.9905 26.7048 61.9615 21.0489C61.1189 20.1012 61.0229 18.6788 61.8138 17.6876C62.665 16.6208 62.4902 15.0659 61.4234 14.2147L60.8213 13.7343C59.7852 12.9077 58.2752 13.0774 57.4486 14.1134C56.6651 15.0955 55.2614 15.2981 54.1772 14.6635C50.6954 12.6252 46.7943 11.2257 42.6346 10.6257C41.6242 10.48 40.8424 9.63515 40.8424 8.61428V8.30512C40.8424 7.38869 41.5853 6.64578 42.5017 6.64578C43.7846 6.64578 44.8246 5.60579 44.8246 4.32289C44.8246 3.03999 43.7846 2 42.5017 2H33.8738Z" fill="#7B7B7B"/>
+</g>
+<circle cx="38" cy="42.0001" r="28" transform="rotate(-61.9545 38 42.0001)" fill="#121212"/>
+<path d="M50.3018 18.9079C46.715 16.9971 42.7324 15.9481 38.6696 15.8441L38 42L50.3018 18.9079Z" fill="url(#paint0_linear)"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="76.0455" height="84.3416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="14.4851" y1="30.492" x2="60.6692" y2="55.0956" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 439ab775c20b2fff4b54c13fc489031ec71f23a8..3cc90b5d884eb0fd455bc2d32165fc8cdaa71316 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -25,11 +25,11 @@ const ActionCard: React.FC<ActionCardProps> = ({
setOpenEcogestureModal(prev => !prev)
}, [])
- const closeModal = useCallback(() => {
+ const selectEcogesture = useCallback(() => {
setSelectedAction(action)
setShowList(false)
- setOpenEcogestureModal(false)
- }, [setSelectedAction, setShowList, action])
+ toggleModal()
+ }, [setSelectedAction, setShowList, action, toggleModal])
useEffect(() => {
importIconbyId(action.id, 'ecogesture').then(icon => {
@@ -49,7 +49,8 @@ const ActionCard: React.FC<ActionCardProps> = ({
<EcogestureModal
ecogesture={action}
isAction={true}
- handleCloseClick={closeModal}
+ handleCloseClick={toggleModal}
+ selectEcogesture={selectEcogesture}
/>
)}
</>
diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx
index e72aa8e04587c200e6b41f404e95bc56b404fcc2..675f5275d2130c4413111f5bcef8d84ef026cdb5 100644
--- a/src/components/Action/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose.tsx
@@ -1,12 +1,5 @@
import React, { useState } from 'react'
import { Ecogesture, UserChallenge } from 'models'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useEffect } from 'react'
-import { importIconbyId } from 'utils/utils'
-import './actionList.scss'
-import { Button } from '@material-ui/core'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import { useCallback } from 'react'
import ActionBegin from './ActionBegin'
import ActionList from './ActionList'
interface ActionChooseProps {
@@ -17,11 +10,8 @@ const ActionChoose: React.FC<ActionChooseProps> = ({
userChallenge,
}: ActionChooseProps) => {
const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
- const [showList, setShowList] = useState(false)
+ const [showList, setShowList] = useState<boolean>(false)
- useEffect(() => {
- console.log('selected', selectedAction)
- }, [selectedAction])
return (
<>
{!selectedAction && !showList ? (
diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx
index 4bebb28b3f4de7aba631ad80479a2dd9de51fe8e..79b5b62f2fc9c13c92fa7b9247f7f7365db1df27 100644
--- a/src/components/Action/ActionDone.tsx
+++ b/src/components/Action/ActionDone.tsx
@@ -25,7 +25,7 @@ const ActionDone: React.FC<ActionDoneProps> = ({
const handleEndAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge = await challengeService.updateUserChallenge(
+ const updatedChallenge: UserChallenge = await challengeService.updateUserChallenge(
currentChallenge,
UserChallengeUpdateFlag.ACTION_DONE
)
diff --git a/src/components/Action/ActionList.tsx b/src/components/Action/ActionList.tsx
index f84c3a6cee60b5b4a2086014f7a5c12920728a3a..9c3afb0d7dad85a93a11a572d65accf3e5ebe416 100644
--- a/src/components/Action/ActionList.tsx
+++ b/src/components/Action/ActionList.tsx
@@ -40,9 +40,7 @@ const ActionList: React.FC<ActionListProps> = ({
setActions(actions)
}
}
-
getActions()
-
return () => {
subscribed = false
}
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index b42112ab8c3eba0ce7ef0a0e486b30b6c67d01c9..f4dad1ff06057a09e07f7705f68a304dabf26067 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import { Ecogesture, UserChallenge } from 'models'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import './actionList.scss'
import Modal from 'components/CommonKit/Modal/Modal'
import { Button } from '@material-ui/core'
import { useCallback } from 'react'
@@ -10,6 +9,9 @@ import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
import { useClient } from 'cozy-client'
import { useDispatch } from 'react-redux'
+import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
+import './actionModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
interface ActionModalProps {
action: Ecogesture
handleCloseClick: () => void
@@ -23,10 +25,10 @@ const ActionModal: React.FC<ActionModalProps> = ({
}: ActionModalProps) => {
const dispatch = useDispatch()
const client = useClient()
-
+ const { t } = useI18n()
const launchAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge = await challengeService.updateUserChallenge(
+ const updatedChallenge: UserChallenge = await challengeService.updateUserChallenge(
userChallenge,
UserChallengeUpdateFlag.ACTION_START,
undefined,
@@ -38,18 +40,38 @@ const ActionModal: React.FC<ActionModalProps> = ({
}, [action, client, dispatch, userChallenge, handleCloseClick])
return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <>
- <StyledIcon icon={'lauchAction'} />
- <div className="action-title text-18-bold">{action.longName}</div>
+ <Modal border={false} handleCloseClick={handleCloseClick}>
+ <div className="action-modal">
+ <StyledIcon icon={chronoMini} size={75} />
- <Button className="action-card" onClick={launchAction}>
- Je relève le défi
- </Button>
- <Button className="action-card" onClick={handleCloseClick}>
- Je me défile
- </Button>
- </>
+ <div className="action-title text-16-normal">
+ {t('action.duration', {
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ smart_count: action.actionDuration,
+ })}
+ </div>
+ <div className="action-text text-16-normal">{action.longName}</div>
+ <div className="buttons">
+ <Button
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ onClick={launchAction}
+ >
+ {t('action.accept')}
+ </Button>
+ <Button
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ onClick={handleCloseClick}
+ >
+ {t('action.refuse')}
+ </Button>
+ </div>
+ </div>
</Modal>
)
}
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index ae9ee67b1dfda5bebd86586ddc6984ccac8c2349..4e7e2e9c3a5d1340381306f4c6425ab1d408d817 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -25,8 +25,8 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
const setGradient = useCallback(() => {
if (userAction.startDate && userAction.ecogesture) {
const circle = 360
- const durationInDays = userAction.ecogesture.actionDuration
- const ratio = circle / durationInDays
+ const durationInDays: number = userAction.ecogesture.actionDuration
+ const ratio: number = circle / durationInDays
let progressionInDays = -Math.round(
userAction.startDate.diffNow('days').days
)
@@ -49,7 +49,7 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
const getResultDate = useCallback(() => {
if (userAction.startDate && userAction.ecogesture) {
const startDate: DateTime = userAction.startDate
- const durationInHours = userAction.ecogesture.actionDuration * 24
+ const durationInHours: number = userAction.ecogesture.actionDuration * 24
const resultDate: string = startDate
.plus({ hours: durationInHours })
.setLocale('fr')
diff --git a/src/components/Action/actionModal.scss b/src/components/Action/actionModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..83712672112d74528079d025cd790fa90646496e
--- /dev/null
+++ b/src/components/Action/actionModal.scss
@@ -0,0 +1,21 @@
+@import '../../styles/base/color';
+
+.action-modal {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: $grey-bright;
+ padding: 1.5rem;
+ max-width: 400px;
+ .action-duration {
+ margin-top: 1rem;
+ }
+ .action-text {
+ margin: 1.6rem 0;
+ }
+ .buttons button {
+ margin-top: 0.5rem;
+ }
+}
diff --git a/src/components/Action/actionOnGoing.scss b/src/components/Action/actionOnGoing.scss
index 7d256e6ddf807d1da2b5e8758031c95c2ed8fd1d..bda18974b4f7ef6766877ff8fa06d039c7710f9f 100644
--- a/src/components/Action/actionOnGoing.scss
+++ b/src/components/Action/actionOnGoing.scss
@@ -1,5 +1,4 @@
@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
.action-ongoing {
box-sizing: border-box;
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 929f6fe80e21b65e890fe54e59b44df93eae06d1..09c5da14b4cf5c43f688332a40a35759092c4468 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -18,12 +18,14 @@ interface EcogestureModalProps {
ecogesture: Ecogesture
isAction: boolean
handleCloseClick: () => void
+ selectEcogesture?: () => void
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
ecogesture,
isAction,
handleCloseClick,
+ selectEcogesture,
}: EcogestureModalProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState('')
@@ -89,7 +91,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
root: 'btn-duel-active',
label: 'text-14-normal',
}}
- onClick={handleCloseClick}
+ onClick={selectEcogesture}
>
{t('action.select_action')}
</MuiButton>
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index b3d28807353251897440c8a0a392ca0c469b8fa9..ffeb76ca068b06e4f1e9f1706da3f9465e8215cc 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -28,12 +28,12 @@
background: $scrollbar-thumb;
}
.em-content {
- padding: 1.5rem 2.5rem 0;
+ padding: 1.5rem 2.5rem;
width: 100%;
@media #{$large-phone} {
width: 100%;
- padding: 1.5rem 1.5rem 0;
+ padding: 2rem;
}
.em-content-box-img {
display: flex;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 54d341af11af2bd41e2299c69db043fb2c748ff1..a0344cd54ced732450fb47c53cb889a3d12449c4 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -440,6 +440,8 @@
"apply": "J'applique cette action",
"other": "Je choisis une autre action",
"hint": "Je pourrais visualiser la différence à la fin du défi.",
+ "accept": "Je relève le défi",
+ "refuse": "Je me défile",
"resultText1": "Cela n'a pas été trop difficile ?",
"resultText2": "Jetez un coup d'oeil dans la page conso dans 1 à 3 jours, le temps que vos données arrivent, pour voir l'impact de votre écogeste.",
"resultText3": "Pas de baisse de significative ? Pas de panique, en maintenant cette pratique dans le temps, les économies d'énergies et d'eau seront davantage visibles.",