diff --git a/src/assets/icons/visu/exploration/validMark.svg b/src/assets/icons/visu/exploration/validMark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5b382fc22abc25c3b2fab259d0d6b6246a8c916a
--- /dev/null
+++ b/src/assets/icons/visu/exploration/validMark.svg
@@ -0,0 +1,38 @@
+<svg width="132" height="146" viewBox="0 0 132 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.2415 5.34541L66 3L69.7585 5.34541C83.5031 13.9223 98.1401 18.9726 114.605 19.697L120.989 19.9779L121.388 26.3678C121.507 28.2645 121.63 30.1515 121.752 32.0276L121.752 32.0302C123.071 52.2276 124.308 71.1711 118.759 87.4954C112.361 106.316 97.5201 120.674 68.5848 131.989L66 133L63.4152 131.989C34.4799 120.674 19.6388 106.316 13.2413 87.4954C7.69228 71.1711 8.92899 52.2276 10.2476 32.0302C10.3701 30.1532 10.4933 28.2653 10.6119 26.3678L11.0112 19.9779L17.3953 19.697C33.8599 18.9726 48.4969 13.9223 62.2415 5.34541ZM66 125.354C119.304 104.51 117.414 75.2206 114.634 32.1543C114.52 30.3968 114.405 28.6165 114.293 26.8128C96.4704 26.0287 80.6603 20.5397 66 11.3913C51.3397 20.5397 35.5296 26.0287 17.7072 26.8128C17.5945 28.6165 17.4796 30.3968 17.3662 32.1543C14.5865 75.2206 12.696 104.51 66 125.354Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_d)">
+<path d="M64.5171 124.767C65.4503 125.142 66.5494 125.142 67.4826 124.767C119.972 103.678 117.326 74.024 114.521 30.4074C114.39 28.3669 112.742 26.7542 110.703 26.5898C95.1844 25.3381 81.1925 20.4644 68.1317 12.6911C66.8191 11.9099 65.1807 11.9099 63.868 12.6911C50.8073 20.4644 36.8153 25.3381 21.2962 26.5898C19.2581 26.7542 17.6099 28.3669 17.4787 30.4074C14.6734 74.024 12.0274 103.678 64.5171 124.767Z" fill="url(#paint1_linear)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.4229 47.3553C99.4358 49.2457 99.5351 52.41 97.6447 54.4229L66.6532 87.4229C64.8503 89.3427 61.8672 89.5348 59.8329 87.8621L41.8244 73.0544C39.6914 71.3005 39.3841 68.1497 41.1379 66.0167C42.8918 63.8838 46.0426 63.5764 48.1756 65.3303L62.5684 77.1649L90.3553 47.5771C92.2457 45.5642 95.41 45.4649 97.4229 47.3553Z" fill="url(#paint2_linear)"/>
+<defs>
+<filter id="filter0_d" x="0.235382" y="0.10498" width="131.529" height="144.943" 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="8"/>
+<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="-30.002" y1="28.2193" x2="176.244" y2="87.03" gradientUnits="userSpaceOnUse">
+<stop offset="0.0896365" stop-color="#3E9596"/>
+<stop offset="0.283947" stop-color="#16A1A3"/>
+<stop offset="0.449352" stop-color="#35DFDF"/>
+<stop offset="0.579588" stop-color="#5EFFFF"/>
+<stop offset="0.657802" stop-color="#28C7D1"/>
+<stop offset="0.828125" stop-color="#016E71"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="64.2892" y1="11.3916" x2="64.2892" y2="125.354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#323339"/>
+<stop offset="1" stop-color="#25262B"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="0.999993" y1="35.5" x2="131.46" y2="115.314" gradientUnits="userSpaceOnUse">
+<stop offset="0.0896365" stop-color="#3E9596"/>
+<stop offset="0.283947" stop-color="#16A1A3"/>
+<stop offset="0.449352" stop-color="#35DFDF"/>
+<stop offset="0.579588" stop-color="#5EFFFF"/>
+<stop offset="0.657802" stop-color="#28C7D1"/>
+<stop offset="0.828125" stop-color="#016E71"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 5fb8dc1a6ff700432762ad5471f66162b82a1bdb..d62ed3baa815a236eea99ba75c0cf2b1b35b1f54 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -24,6 +24,7 @@ import classNames from 'classnames'
import { AppStore } from 'store'
import { UserQuizState } from 'enum/userQuiz.enum'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
+import { UserExplorationState } from 'enum/userExploration.enum'
interface ChallengeCardOnGoingProps {
userChallenge: UserChallenge
@@ -90,6 +91,10 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
if (userChallenge.progress.quizProgress !== 5)
history.push('/challenges/quiz')
}
+ const goExploration = async () => {
+ if (userChallenge.progress.explorationProgress !== 5)
+ history.push('/challenges/exploration')
+ }
useEffect(() => {
let subscribed = true
@@ -154,7 +159,7 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
className={classNames('smallCard', {
['finished']: userChallenge.progress.explorationProgress === 5,
})}
- onClick={winStars}
+ onClick={goExploration}
>
<StyledIcon
className="cardIcon"
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 57e3270abe633c76fbc8fc0f8241fcecd4509b0d..5cb51789e1303f95cb331981f37a28f5a2c6603f 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -1,13 +1,23 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import './explorationOngoing.scss'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppStore } from 'store'
+import { useDispatch } from 'react-redux'
-import { UserExploration, UserChallenge } from 'models'
+import { UserChallenge } from 'models'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import StarsContainer from 'components/Challenge/StarsContainer'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import {
+ UserExplorationState,
+ UserExplorationType,
+} from 'enum/userExploration.enum'
+import ChallengeService from 'services/challenge.service'
+import { updateUserChallengeList } from 'store/challenge/challenge.actions'
+import explorationIcon from 'assets/icons/visu/exploration/validMark.svg'
+import ExplorationService from 'services/exploration.service'
interface ExplorationOngoingProps {
userChallenge: UserChallenge
@@ -18,19 +28,92 @@ const ExplorationOngoing: React.FC<ExplorationOngoingProps> = ({
}: ExplorationOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
- const { currentDataload } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
const dispatch = useDispatch()
const history = useHistory()
+ const goBack = useCallback(() => {
+ history.goBack()
+ }, [history])
+ const startExploration = async () => {
+ if (userChallenge.exploration.state !== UserExplorationState.ONGOING) {
+ const challengeService = new ChallengeService(client)
+ const updatedChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.EXPLORATION_START
+ )
+ dispatch(updateUserChallengeList(updatedChallenge))
+ }
+ history.push('/challenges')
+ }
- // useEffect(() => {
-
- // }, [])
+ const validExploration = async () => {
+ const challengeService = new ChallengeService(client)
+ const updatedChallenge = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.EXPLORATION_DONE
+ )
+ dispatch(updateUserChallengeList(updatedChallenge))
+ history.push('/challenges')
+ }
+ const renderButton = () => {
+ switch (userChallenge.exploration.type) {
+ case UserExplorationType.DECLARATIVE:
+ return (
+ <div className="button-start">
+ <StyledStopButton color="secondary" onClick={validExploration}>
+ {t('exploration.already_done')}
+ </StyledStopButton>
+ <StyledStopButton color="secondary" onClick={goBack}>
+ {t('exploration.come_back')}
+ </StyledStopButton>
+ </div>
+ )
+ case UserExplorationType.ECOGESTURE:
+ return (
+ <div className="button-start">
+ <StyledStopButton color="secondary" onClick={startExploration}>
+ {t('exploration.watch_ecogesture')}
+ </StyledStopButton>
+ </div>
+ )
+ case UserExplorationType.ACTION:
+ return (
+ <div className="button-start">
+ <StyledStopButton color="secondary" onClick={startExploration}>
+ {t('exploration.start')}
+ </StyledStopButton>
+ </div>
+ )
+ case UserExplorationType.CONSUMPTION:
+ return (
+ <div className="button-start">
+ <StyledStopButton color="secondary" onClick={startExploration}>
+ {t('exploration.watch_consumption')}
+ </StyledStopButton>
+ </div>
+ )
+ }
+ }
return (
<>
- <div className="exploration-ongoing-container"></div>
+ <div className="exploration-container">
+ <div className="exploration-begin-container">
+ <StyledIcon
+ className="exploration-icon"
+ icon={explorationIcon}
+ size={180}
+ />
+ <StarsContainer
+ result={userChallenge.progress.explorationProgress}
+ isQuizBegin={true}
+ />
+
+ <div className="exploration-explanation text-18-bold">
+ {userChallenge.exploration.description}
+ </div>
+ {renderButton()}
+ </div>
+ </div>
</>
)
}
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 855950da01c28bb702994958f6e571e45298802e..d34242004cb597403a4e4828488862595ea12968 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -21,6 +21,7 @@ const ExplorationView: React.FC = () => {
const renderExploration = (challenge: UserChallenge) => {
switch (challenge.exploration.state) {
+ case UserExplorationState.UNLOCKED:
case UserExplorationState.ONGOING:
return <ExplorationOngoing userChallenge={challenge} />
case UserExplorationState.DONE:
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 0f414f8cfce76feae0e01664eed3432e93667e10..1f5e4fbe9d4116963939b5322dc341f065b7a854 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -1,47 +1,47 @@
-@import '../../styles/base/typography';
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
-.duel-ongoing-container{
+.exploration-container {
display: flex;
flex-direction: column;
- align-items: center;
justify-content: center;
-}
-.duel-title{
- color: $soft-grey;
- margin-top: 1rem;
-}
-.duel-goal{
- color: $grey-bright;
- margin: 1rem 3rem;
- text-align: center;
-}
-.duel-consumption{
- color: $grey-bright;
- margin: 1rem auto;
- .consumption{
- color: $gold-light;
-
- }
-}
-.duel-chart{
- height: 15.625rem;
- display: flex;
align-items: center;
- justify-content: center;
- width: 80%;
}
-.duel-chart-caption{
+.exploration-begin-container {
display: flex;
flex-direction: column;
- align-self: flex-start;
- .duel-caption{
- display: flex;
- margin-top: 0.75rem;
- .caption-icon{
- margin: auto 1.5rem;
- }
- .caption-label{
- color: $grey-bright;
+ align-items: center;
+ justify-content: space-around;
+ margin: 2rem 1rem;
+ padding: 1rem;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ transition: all 300ms ease;
+ color: $white;
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ height: 70vh;
+ text-align: center;
+ @media (min-width: $width-large-phone) {
+ max-width: 60%;
+ height: 100%;
+ }
+ @media (min-width: $width-large-desktop) {
+ max-width: 40%;
+ padding: 0.5rem 1rem 2rem;
+ }
+ .btn-start {
+ margin-top: auto;
+ border-color: $grey-bright;
+ }
+ .exploration-icon-stars {
+ margin-top: -4rem;
+ }
+ .exploration-explanation {
+ margin-bottom: 2rem;
+ line-height: 24px;
+ padding: 1rem;
+ @media (min-width: $width-large-desktop) {
+ padding: 0rem 2rem;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/db/explorationEntity.json b/src/db/explorationEntity.json
index f1c5c039e88511cd66cb87085f6b4420c4694bf2..4818da004f922c2cdf82a9a105f84dee237894d7 100644
--- a/src/db/explorationEntity.json
+++ b/src/db/explorationEntity.json
@@ -2,22 +2,22 @@
{
"_id": "EXPLORATION001",
"state": 0,
- "description": "Consultez 3 fois Ecolyo",
- "target": 3,
- "type": 0,
+ "description": "Consultez l'écogeste \"Chat échaudé\"",
+ "target": 1,
+ "type": 3,
"date": null,
- "ecogesture_id": "",
+ "ecogesture_id": "0032",
"fluid_condition": [],
"priority_by_condition": 1
},
{
"_id": "EXPLORATION002",
"state": 0,
- "description": "Consultez l'écogeste \"Chat échaudé\"",
+ "description": "Allez voir vos consommations par an",
"target": 1,
- "type": 3,
+ "type": 2,
"date": null,
- "ecogesture_id": "0032",
+ "ecogesture_id": "",
"fluid_condition": [],
"priority_by_condition": 1
},
@@ -35,8 +35,8 @@
{
"_id": "EXPLORATION004",
"state": 0,
- "description": "Allez voir vos consommations par an",
- "target": 1,
+ "description": "Consultez 3 fois Ecolyo",
+ "target": 3,
"type": 1,
"date": null,
"ecogesture_id": "",
@@ -59,7 +59,7 @@
"state": 0,
"description": "Dévérrouillez les données électricité à la demi-heure",
"target": 1,
- "type": 1,
+ "type": 0,
"date": null,
"ecogesture_id": "",
"fluid_condition": [0],
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b5b7163111293335f233b8dead825a6b249f0cf5..0817dfa80a7590a19031dfd72551e2733b29e18b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -384,6 +384,11 @@
},
"exploration": {
"global_error": "Oups.. Une erreur est parvenue. Veuillez retourner à l'écran des défis",
- "go_back": "Retour"
+ "go_back": "Retour",
+ "already_done": "C’est déjà fait !",
+ "come_back": "Je reviens quand ce sera fait",
+ "watch_ecogesture": "Je vais voir cet écogeste",
+ "start": "C'est parti !",
+ "watch_consumption": "Je fonce"
}
}
diff --git a/src/services/exploration.service.ts b/src/services/exploration.service.ts
index f54dabb5d01aabef9eb3c7d56d2735e4b2895d31..75a235595cb3d30697bbb9fa050be432f382d3bb 100644
--- a/src/services/exploration.service.ts
+++ b/src/services/exploration.service.ts
@@ -144,7 +144,7 @@ export default class ExplorationService {
const updatedUserExploration: UserExploration = {
...userExploration,
state: UserExplorationState.DONE,
- progress: userExploration.type === UserExplorationType.ACTION ? 3 : 1,
+ progress: 5, //userExploration.type === UserExplorationType.ACTION ? 3 : 1,
}
return updatedUserExploration
}