feat: create exploration finished view

src/components/Exploration/ExplorationFinished.tsx

+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

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'
     }

src/components/Exploration/explorationFinished.scss

+@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;
+  }
+}

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"
   }
 ]

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"
   }
 }

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'> {