From 29149565efd6617a0267c7ea79fb15eda115a56f Mon Sep 17 00:00:00 2001
From: HAUTBOIS Aurelie <aurelie.hautbois@ext.soprasteria.com>
Date: Wed, 13 Jan 2021 17:25:14 +0100
Subject: [PATCH] feat: create exploration finished view
---
.../Exploration/ExplorationFinished.tsx | 44 ++++++++++++++++++
.../Exploration/ExplorationView.tsx | 3 +-
.../Exploration/explorationFinished.scss | 46 +++++++++++++++++++
src/db/explorationEntity.json | 21 ++++++---
src/locales/fr.json | 5 ++
src/models/exploration.model.ts | 1 +
6 files changed, 112 insertions(+), 8 deletions(-)
create mode 100644 src/components/Exploration/ExplorationFinished.tsx
create mode 100644 src/components/Exploration/explorationFinished.scss
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
new file mode 100644
index 000000000..c7cd08b98
--- /dev/null
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import './explorationFinished.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import starResult from 'assets/icons/visu/quiz/starResult.svg'
+import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { UserChallenge } from 'models'
+import { useHistory } from 'react-router-dom'
+
+interface ExplorationFinishedProps {
+ userChallenge: UserChallenge
+}
+
+const ExplorationFinished: React.FC<ExplorationFinishedProps> = ({
+ userChallenge,
+}: ExplorationFinishedProps) => {
+ const { t } = useI18n()
+ const history = useHistory()
+ const goBack = () => {
+ history.push('/challenges')
+ }
+ return (
+ <div className="exploration-card">
+ <div className="exploration-finish">
+ <div className="congratulation">{t('exploration.congratulation')}</div>
+ <div>{userChallenge.exploration.message_success}</div>
+ <div className="exploration-earn">{t('exploration.earn')}</div>
+ <div className="score-stars">
+ 5
+ <StyledIcon
+ className="exploration-icon"
+ icon={starResult}
+ size={30}
+ />
+ </div>
+ <StyledStopButton color="secondary" onClick={goBack}>
+ {t('exploration.confirm')}
+ </StyledStopButton>
+ </div>
+ </div>
+ )
+}
+
+export default ExplorationFinished
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index 9613ad4da..5795a34b9 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -6,6 +6,7 @@ import Content from 'components/Content/Content'
import Header from 'components/Header/Header'
import { UserExplorationState } from 'enum/userExploration.enum'
import { UserChallenge } from 'models'
+import ExplorationFinished from './ExplorationFinished'
const ExplorationView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -22,7 +23,7 @@ const ExplorationView: React.FC = () => {
case UserExplorationState.ONGOING:
return 'ExplorationOngoing'
case UserExplorationState.DONE:
- return 'ExplorationFinished'
+ return <ExplorationFinished userChallenge={challenge} />
default:
return 'ExplorationOnGoing'
}
diff --git a/src/components/Exploration/explorationFinished.scss b/src/components/Exploration/explorationFinished.scss
new file mode 100644
index 000000000..20d97b737
--- /dev/null
+++ b/src/components/Exploration/explorationFinished.scss
@@ -0,0 +1,46 @@
+@import '../../styles/base/color';
+@import '../../styles/base/breakpoint';
+
+.exploration-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 4rem auto 0;
+ 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%);
+ width: 80%;
+ text-align: center;
+ padding: 0.5rem 1rem 1rem;
+ font-size: 1.1rem;
+ font-weight: 700;
+ @media (min-width: $width-tablet) {
+ width: 50%;
+ }
+ @media (min-width: $width-large-desktop) {
+ width: 40%;
+ }
+ .exploration-finish {
+ width: 75%;
+ @media (min-width: $width-large-phone) {
+ width: auto;
+ }
+ }
+ button {
+ border-color: $grey-bright;
+ margin-top: 1rem;
+ }
+ .exploration-icon {
+ margin-left: 0.5rem;
+ }
+ .congratulation {
+ font-size: 2.3rem;
+ margin: 2rem 0 1rem;
+ }
+ .exploration-earn {
+ margin: 2rem 0 1rem;
+ }
+}
diff --git a/src/db/explorationEntity.json b/src/db/explorationEntity.json
index f1c5c039e..2a6b8b850 100644
--- a/src/db/explorationEntity.json
+++ b/src/db/explorationEntity.json
@@ -8,7 +8,8 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "Vous vous êtes connecté 3 fois à Ecolyo"
},
{
"_id": "EXPLORATION002",
@@ -19,7 +20,8 @@
"date": null,
"ecogesture_id": "0032",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "vous avez consulté l'écogeste"
},
{
"_id": "EXPLORATION003",
@@ -30,7 +32,8 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "Vous avez répandu la bonne nouvelle"
},
{
"_id": "EXPLORATION004",
@@ -41,7 +44,8 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "Vous avez vu vous consommation"
},
{
"_id": "EXPLORATION005",
@@ -52,7 +56,8 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "Vous avez envoyé un feedback"
},
{
"_id": "EXPLORATION006",
@@ -63,7 +68,8 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [0],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "Vous avez dévérrouillez les données électricité à la demi-heure"
},
{
"_id": "EXPLORATION007",
@@ -74,6 +80,7 @@
"date": null,
"ecogesture_id": "",
"fluid_condition": [],
- "priority_by_condition": 1
+ "priority_by_condition": 1,
+ "message_success": "vous avez placé l'appli Ecolyo en favoris"
}
]
diff --git a/src/locales/fr.json b/src/locales/fr.json
index a65282872..1ae942262 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -381,5 +381,10 @@
"confirm": "Valider",
"next": "Suivant",
"consumption_question": "Question sur votre consommation"
+ },
+ "exploration": {
+ "congratulation": "Bravo !",
+ "earn": "Vous remportez",
+ "confirm": "Ok"
}
}
diff --git a/src/models/exploration.model.ts b/src/models/exploration.model.ts
index fb8aa992a..d681c9970 100644
--- a/src/models/exploration.model.ts
+++ b/src/models/exploration.model.ts
@@ -15,6 +15,7 @@ export interface ExplorationEntity {
ecogesture_id: string
fluid_condition: FluidType[]
priority_by_condition: number
+ message_success: string
}
export interface UserExploration extends Omit<ExplorationEntity, 'date'> {
--
GitLab