From 5912f450ced5e10f346a2acc13305e74691dd1a5 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 29 Feb 2024 13:52:35 +0100
Subject: [PATCH] feat: ask for feedback just before simulation explanation

we want to get more feedback from user,
so we ask for feedback just after the simulation bloc
---
 site/source/components/Feedback/Feedback.tsx | 35 ++++++++++----------
 site/source/components/Simulation/index.tsx  | 18 +++++++++-
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/site/source/components/Feedback/Feedback.tsx b/site/source/components/Feedback/Feedback.tsx
index 578dba6ad..7adb90cd9 100644
--- a/site/source/components/Feedback/Feedback.tsx
+++ b/site/source/components/Feedback/Feedback.tsx
@@ -9,13 +9,11 @@ import { Emoji } from '@/design-system/emoji'
 import { Spacing } from '@/design-system/layout'
 import { Strong } from '@/design-system/typography'
 import { H4 } from '@/design-system/typography/heading'
-import { StyledLink } from '@/design-system/typography/link'
-import { Body, SmallBody } from '@/design-system/typography/paragraphs'
+import { Body } from '@/design-system/typography/paragraphs'
 import { useSitePaths } from '@/sitePaths'
 
 import * as safeLocalStorage from '../../storage/safeLocalStorage'
 import { JeDonneMonAvis } from '../JeDonneMonAvis'
-import { INSCRIPTION_LINK } from '../layout/Footer/InscriptionBetaTesteur'
 import FeedbackForm from './FeedbackForm'
 import FeedbackRating, { FeedbackT } from './FeedbackRating'
 import { useFeedback } from './useFeedback'
@@ -29,7 +27,7 @@ const setFeedbackGivenForUrl = (url: string) => {
 }
 
 // Ask for feedback again after 4 months
-const getShouldAskFeedback = (url: string) => {
+export const getShouldAskFeedback = (url: string) => {
 	const previousFeedbackDate = safeLocalStorage.getItem(localStorageKey(url))
 	if (!previousFeedbackDate) {
 		return true
@@ -96,6 +94,7 @@ export function Feedback({
 							<Emoji emoji="🙌" />
 						</Strong>
 					</Body>
+					{/* TODO : reactivate when we need new beta-testeurs
 					<SmallBody>
 						<Trans i18nKey="feedback.beta-testeur">
 							Pour continuer à donner votre avis et accéder aux nouveautés en
@@ -107,7 +106,7 @@ export function Feedback({
 								inscrivez-vous sur la liste des beta-testeur
 							</StyledLink>
 						</Trans>
-					</SmallBody>
+					</SmallBody> */}
 				</>
 			) : (
 				<>
@@ -122,18 +121,20 @@ export function Feedback({
 			{isSimulateurSalaire ? (
 				<JeDonneMonAvis light />
 			) : (
-				<Button
-					color="tertiary"
-					size="XXS"
-					light
-					aria-haspopup="dialog"
-					onPress={() => {
-						setIsShowingSuggestionForm(true)
-						onFeedbackFormOpen?.()
-					}}
-				>
-					<Trans i18nKey="feedback.reportError">Faire une suggestion</Trans>
-				</Button>
+				<div style={{ textAlign: 'center' }}>
+					<Button
+						color="tertiary"
+						size="XXS"
+						light
+						aria-haspopup="dialog"
+						onPress={() => {
+							setIsShowingSuggestionForm(true)
+							onFeedbackFormOpen?.()
+						}}
+					>
+						<Trans i18nKey="feedback.reportError">Faire une suggestion</Trans>
+					</Button>
+				</div>
 			)}
 			{isShowingSuggestionForm && (
 				<Popover
diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx
index 9e0834931..205ab4b13 100644
--- a/site/source/components/Simulation/index.tsx
+++ b/site/source/components/Simulation/index.tsx
@@ -3,12 +3,13 @@ import Engine from 'publicodes'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import { useLocation } from 'react-router-dom'
 import { styled } from 'styled-components'
 
 import { ConversationProps } from '@/components/conversation/Conversation'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
 import { PopoverWithTrigger } from '@/design-system'
-import { Grid, Spacing } from '@/design-system/layout'
+import { Container, Grid, Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
 import {
 	companySituationSelector,
@@ -18,6 +19,7 @@ import {
 import { TrackPage } from '../ATInternetTracking'
 import Banner from '../Banner'
 import AnswerList from '../conversation/AnswerList'
+import { Feedback, getShouldAskFeedback } from '../Feedback/Feedback'
 import PrintExportRecover from '../simulationExplanation/PrintExportRecover'
 import PreviousSimulationBanner from './../PreviousSimulationBanner'
 import { FromTop } from './../ui/animate'
@@ -66,6 +68,7 @@ export default function Simulation({
 	const existingCompany = !!useSelector(companySituationSelector)[
 		'entreprise . SIREN'
 	]
+	const shouldShowFeedback = getShouldAskFeedback(useLocation().pathname)
 
 	const { t } = useTranslation()
 
@@ -125,6 +128,19 @@ export default function Simulation({
 					)}
 				</FromTop>
 			</SimulationContainer>
+			{firstStepCompleted && !hideDetails && shouldShowFeedback && (
+				<Container
+					backgroundColor={(theme) => theme.colors.bases.primary[700]}
+					forceTheme="dark"
+					style={{
+						textAlign: 'center',
+						padding: '1rem',
+						paddingBottom: '2rem',
+					}}
+				>
+					<Feedback />
+				</Container>
+			)}
 			{firstStepCompleted && !hideDetails && explanations}
 		</>
 	)