From de9b456dde1ffb4d74c0da412fdd3bfadf45df0b Mon Sep 17 00:00:00 2001
From: rpapin <rpapin@grandlyon.com>
Date: Thu, 14 Jan 2021 10:09:30 +0100
Subject: [PATCH] Finish explorationOnGoing
---
.../icons/visu/exploration/validMark.svg | 38 +++++++
.../Challenge/ChallengeCardOnGoing.tsx | 7 +-
.../Exploration/ExplorationOngoing.tsx | 105 ++++++++++++++++--
.../Exploration/ExplorationView.tsx | 1 +
.../Exploration/explorationOngoing.scss | 74 ++++++------
src/db/explorationEntity.json | 20 ++--
src/locales/fr.json | 7 +-
src/services/exploration.service.ts | 2 +-
8 files changed, 193 insertions(+), 61 deletions(-)
create mode 100644 src/assets/icons/visu/exploration/validMark.svg
diff --git a/src/assets/icons/visu/exploration/validMark.svg b/src/assets/icons/visu/exploration/validMark.svg
new file mode 100644
index 000000000..5b382fc22
--- /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 5fb8dc1a6..d62ed3baa 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 57e3270ab..5cb51789e 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 855950da0..d34242004 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 0f414f8cf..1f5e4fbe9 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 f1c5c039e..4818da004 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 b5b716311..0817dfa80 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 f54dabb5d..75a235595 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
}
--
GitLab