diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c7cd08b98fbcc7795afd02e3b1c21819195b0576 --- /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 9613ad4dab58376d234a82d0ba952c63a2f41b92..5795a34b93149619025ef87edd7462ce52ab983d 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 0000000000000000000000000000000000000000..20d97b737b376612f74cb5dc787b34a432a03f21 --- /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 f1c5c039e88511cd66cb87085f6b4420c4694bf2..2a6b8b850f5b779a60dde342f7271993a41c07f8 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 a6528287200923b4aa642ef78d194c7da0630ece..1ae942262b469dabb3f656a20c1aa0aac78dc95f 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 fb8aa992acb67c18a87e44f8d9ecaf89e080ab6e..d681c99701542413d4157ce8c9f5b55c1f160ab0 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'> {