Merge pull request #677 from datagir/bug-navigation-catégories

bug navigation catégories
incubateur-ademe · Oct 4, 2022 · 941385e · 941385e
2 parents 324b8de + 0a308dd
commit 941385e
Show file tree

Hide file tree

Showing 12 changed files with 310 additions and 95 deletions.
diff --git a/source/actions/actions.ts b/source/actions/actions.ts
@@ -58,9 +58,13 @@ export const resetActionChoices = () =>
 	({
 		type: 'RESET_ACTION_CHOICES',
 	} as const)
-export const resetTutorials = () =>
+export const resetIntroTutorial = () =>
 	({
-		type: 'RESET_TUTORIALS',
+		type: 'RESET_INTRO_TUTORIAL',
+	} as const)
+export const resetCategoryTutorials = () =>
+	({
+		type: 'RESET_CATEGORY_TUTORIALS',
 	} as const)
 export const resetStoredTrajets = () =>
 	({

diff --git a/source/components/conversation/Conversation.tsx b/source/components/conversation/Conversation.tsx
@@ -11,9 +11,11 @@ import Notifications, { getCurrentNotification } from 'Components/Notifications'
 import { EngineContext } from 'Components/utils/EngineContext'
 import { useNextQuestions } from 'Components/utils/useNextQuestion'
 import { TrackerContext } from 'Components/utils/withTracker'
+import { motion } from 'framer-motion'
 import React, { Suspense, useContext, useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
 import {
 	answeredQuestionsSelector,
 	situationSelector,
@@ -27,6 +29,7 @@ import Meta from '../../components/utils/Meta'
 import { objectifsSelector } from '../../selectors/simulationSelectors'
 import { sortBy, useQuery } from '../../utils'
 import { questionCategoryName, splitName, title } from '../publicodesUtils'
+import SafeCategoryImage from '../SafeCategoryImage'
 import useKeypress from '../utils/useKeyPress'
 import { useSimulationProgress } from '../utils/useNextQuestion'
 import Aide from './Aide'
@@ -86,6 +89,7 @@ export default function Conversation({
 	}
 
 	const sortedQuestions = focusByCategory(questionsSortedByCategory)
+	console.log('FOCUS', focusedCategory, sortedQuestions)
 
 	const unfoldedStep = useSelector((state) => state.simulation.unfoldedStep)
 	const isMainSimulation = objectifs.length === 1 && objectifs[0] === 'bilan',
@@ -318,12 +322,46 @@ export default function Conversation({
 				rules[mosaicQuestion.dottedName].rawNode.description)) ||
 			rules[currentQuestion]?.rawNode.description) != null
 
-	return orderByCategories &&
+	const displayRespiration =
+		orderByCategories &&
 		isCategoryFirstQuestion &&
-		!tutorials[questionCategory.dottedName] ? (
+		!tutorials['testCategory-' + questionCategory.dottedName]
+
+	const displayCompletedCategory =
+		focusedCategory && !nextQuestions.find((q) => q.includes(focusedCategory))
+
+	return displayCompletedCategory ? (
+		<div css="text-align: center; padding: 1rem">
+			<motion.div
+				initial={{ opacity: 0.1, borderWidth: '0' }}
+				animate={{ opacity: 1, scale: 1, borderWidth: '.8rem' }}
+				transition={{ duration: 0.6 }}
+				css={`
+					border: 0.8rem solid #159f85;
+					img {
+						width: 6rem;
+						animate: 1s linear;
+					}
+					margin: 0 auto 1rem;
+					width: 6rem;
+					border-radius: 6rem;
+					padding: 0.6rem;
+				`}
+			>
+				<SafeCategoryImage
+					element={{ dottedName: focusedCategory }}
+					whiteBackground="false"
+				/>
+			</motion.div>
+			<p>Vous avez complété la catégorie {focusedCategory}</p>
+			<Link to="/profil"> Modifier mes réponses</Link>
+		</div>
+	) : displayRespiration ? (
 		<CategoryRespiration
 			questionCategory={questionCategory}
-			dismiss={() => dispatch(skipTutorial(questionCategory.dottedName))}
+			dismiss={() =>
+				dispatch(skipTutorial('testCategory-' + questionCategory.dottedName))
+			}
 		/>
 	) : (
 		<section

diff --git a/source/images/glowing-ngc-star.svg b/source/images/glowing-ngc-star.svg
diff --git a/source/reducers/rootReducer.ts b/source/reducers/rootReducer.ts
@@ -199,11 +199,23 @@ function conference(state = null, { type, room, ydoc, provider }) {
 		}
 	} else return state
 }
+//Tutorials are the main tutorial for the /simulateur/bilan simulation,
+//but also the small category pages displayed before starting the category, as a pause for the user
 function tutorials(state = {}, { type, id, unskip }) {
 	if (type === 'SKIP_TUTORIAL') {
 		return { ...state, [id]: unskip ? undefined : 'skip' }
-	} else if (type === 'RESET_TUTORIALS') {
-		return {}
+	} else if (type === 'RESET_INTRO_TUTORIAL') {
+		return Object.fromEntries(
+			Object.entries(state)
+				.map(([k, v]) => (k.includes('testIntro') ? null : [k, v]))
+				.filter(Boolean)
+		)
+	} else if (type === 'RESET_CATEGORY_TUTORIALS') {
+		return Object.fromEntries(
+			Object.entries(state)
+				.map(([k, v]) => (k.includes('testCategory') ? null : [k, v]))
+				.filter(Boolean)
+		)
 	} else return state
 }
 function tracking(

diff --git a/source/sites/publicodes/Profil.tsx b/source/sites/publicodes/Profil.tsx
@@ -1,22 +1,21 @@
-import { Link } from 'react-router-dom'
 import {
 	deletePreviousSimulation,
 	resetActionChoices,
+	resetIntroTutorial,
 	resetSimulation,
-	resetTutorials,
 	resetStoredTrajets,
 } from 'Actions/actions'
+import Localisation from 'Components/localisation/Localisation'
 import emoji from 'react-easy-emoji'
 import { useDispatch, useSelector } from 'react-redux'
+import { Link, useNavigate } from 'react-router-dom'
+import { resetCategoryTutorials } from '../../actions/actions'
 import AnswerList from '../../components/conversation/AnswerList'
 import Title from '../../components/Title'
 import IllustratedMessage from '../../components/ui/IllustratedMessage'
 import Meta from '../../components/utils/Meta'
 import { ScrollToTop } from '../../components/utils/Scroll'
 import { answeredQuestionsSelector } from '../../selectors/simulationSelectors'
-import { skipTutorial } from '../../actions/actions'
-import { useNavigate } from 'react-router-dom'
-import Localisation from 'Components/localisation/Localisation'
 
 export const useProfileData = () => {
 	const answeredQuestionsLength = useSelector(answeredQuestionsSelector).length
@@ -85,47 +84,18 @@ export default ({}) => {
 									dispatch(resetActionChoices())
 									dispatch(deletePreviousSimulation())
 									dispatch(resetStoredTrajets())
+									dispatch(resetCategoryTutorials())
 									navigate('/simulateur/bilan')
 								}}
 							>
 								{emoji('♻️ ')} Recommencer
 							</button>
-							{tutorials.testIntro && (
-								<div>
-									<button
-										className="ui__ dashed-button"
-										onClick={() => {
-											dispatch(skipTutorial('testIntro', true))
-											dispatch(resetTutorials())
-											navigate('/tutoriel')
-										}}
-									>
-										{emoji('🧑‍🏫')} Revoir le tutoriel
-									</button>
-								</div>
-							)}
+							<TutorialLink {...{ dispatch, tutorials }} />
 						</div>
 					</div>
 				) : (
 					<div>
-						{tutorials.testIntro && (
-							<div
-								css={`
-									margin-bottom: 2rem;
-								`}
-							>
-								<button
-									className="ui__ dashed-button"
-									onClick={() => {
-										dispatch(skipTutorial('testIntro', true))
-										dispatch(resetTutorials())
-										navigate('/tutoriel')
-									}}
-								>
-									{emoji('🧑‍🏫')} Revoir le tutoriel
-								</button>
-							</div>
-						)}
+						<TutorialLink {...{ dispatch, tutorials }} />
 						<IllustratedMessage
 							emoji="🕳️"
 							message={<p>Vous n'avez pas encore fait le test.</p>}
@@ -138,3 +108,19 @@ export default ({}) => {
 		</div>
 	)
 }
+
+const TutorialLink = ({ tutorials, dispatch }) =>
+	tutorials.testIntro && (
+		<div>
+			<Link
+				css="text-decoration: none"
+				to="/tutoriel"
+				className="ui__ dashed-button"
+				onClick={() => {
+					dispatch(resetIntroTutorial())
+				}}
+			>
+				{emoji('🧑‍🏫')} Revoir le tutoriel
+			</Link>
+		</div>
+	)