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
pull/2905/head
Johan Girod 2024-02-29 13:52:35 +01:00
parent 3aaa51ae07
commit 5912f450ce
2 changed files with 35 additions and 18 deletions

View File

@ -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

View File

@ -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}
</>
)