diff --git a/site/source/components/Feedback/Feedback.tsx b/site/source/components/Feedback/Feedback.tsx
new file mode 100644
index 000000000..578dba6ad
--- /dev/null
+++ b/site/source/components/Feedback/Feedback.tsx
@@ -0,0 +1,168 @@
+import { useCallback, useContext, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
+
+import { TrackingContext } from '@/components/ATInternetTracking'
+import { Popover } from '@/design-system'
+import { Button } from '@/design-system/buttons'
+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 { 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'
+
+const localStorageKey = (url: string) => `app::feedback::v3::${url}`
+const setFeedbackGivenForUrl = (url: string) => {
+ safeLocalStorage.setItem(
+ localStorageKey(url),
+ JSON.stringify(new Date().toISOString())
+ )
+}
+
+// Ask for feedback again after 4 months
+const getShouldAskFeedback = (url: string) => {
+ const previousFeedbackDate = safeLocalStorage.getItem(localStorageKey(url))
+ if (!previousFeedbackDate) {
+ return true
+ }
+
+ return (
+ new Date(previousFeedbackDate) <
+ new Date(new Date().setMonth(new Date().getMonth() - 4))
+ )
+}
+
+const IFRAME_SIMULATEUR_EMBAUCHE_PATH = '/iframes/simulateur-embauche'
+
+export function Feedback({
+ onEnd,
+ onFeedbackFormOpen,
+}: {
+ onEnd?: () => void
+ onFeedbackFormOpen?: () => void
+}) {
+ const [isShowingThankMessage, setIsShowingThankMessage] = useState(false)
+ const [isShowingSuggestionForm, setIsShowingSuggestionForm] = useState(false)
+ const [isNotSatisfied, setIsNotSatisfied] = useState(false)
+ const { t } = useTranslation()
+ const url = useLocation().pathname
+ const tag = useContext(TrackingContext)
+
+ const { absoluteSitePaths } = useSitePaths()
+ const currentPath = useLocation().pathname
+ const isSimulateurSalaire =
+ currentPath.includes(absoluteSitePaths.simulateurs.salarié) ||
+ currentPath.includes(IFRAME_SIMULATEUR_EMBAUCHE_PATH)
+
+ const { shouldShowRater, customTitle } = useFeedback()
+
+ const submitFeedback = useCallback(
+ (rating: FeedbackT) => {
+ setFeedbackGivenForUrl(url)
+ tag.events.send('click.action', {
+ click_chapter1: 'satisfaction',
+ click: rating,
+ })
+ const isNotSatisfiedValue = ['mauvais', 'moyen'].includes(rating)
+ if (isNotSatisfiedValue) {
+ setIsNotSatisfied(true)
+ onFeedbackFormOpen?.()
+ }
+
+ setIsShowingThankMessage(!isNotSatisfiedValue)
+ setIsShowingSuggestionForm(isNotSatisfiedValue)
+ },
+ [tag, url]
+ )
+
+ const shouldAskFeedback = getShouldAskFeedback(url)
+
+ return (
+ <>
+ {isShowingThankMessage || !shouldAskFeedback ? (
+ <>
+
+
+ Merci de votre retour !{' '}
+
+
+
+
+
+ Pour continuer à donner votre avis et accéder aux nouveautés en
+ avant-première,{' '}
+
+ inscrivez-vous sur la liste des beta-testeur
+
+
+
+
+ ) : (
+ <>
+ {customTitle || Un avis sur cette page ?}
+
+ {shouldShowRater && (
+
+ )}
+
+ )}
+
+ {isSimulateurSalaire ? (
+
+ ) : (
+
+ )}
+ {isShowingSuggestionForm && (
+ {
+ setIsShowingSuggestionForm(false)
+ setTimeout(() => onEnd?.())
+ }}
+ title={
+ isNotSatisfied
+ ? t('Vos attentes ne sont pas remplies')
+ : t('Votre avis nous intéresse')
+ }
+ >
+
+
+ Vous n’avez pas été satisfait(e) de votre expérience, nous
+ en sommes désolé(e)s.
+
+
+ )
+ }
+ />
+
+ )}
+
+ )
+}
diff --git a/site/source/components/Feedback/FeedbackForm.tsx b/site/source/components/Feedback/FeedbackForm.tsx
index 3372e3d11..6d929c8b2 100644
--- a/site/source/components/Feedback/FeedbackForm.tsx
+++ b/site/source/components/Feedback/FeedbackForm.tsx
@@ -22,8 +22,6 @@ type SubmitError = {
const SHORT_MAX_LENGTH = 254
const FeedbackThankYouContent = () => {
- const { t } = useTranslation()
-
return (
<>