From ee6753e852f7d62f4d41dbda898990d21df5deda Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Mon, 27 Jan 2025 13:46:32 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20correction=20de=20la=20s=C3=A9lection=20?=
 =?UTF-8?q?d'ann=C3=A9e=20de=20simulation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectSimulationYear.tsx       | 37 +++++++++++--------
 site/source/components/utils/useDate.tsx      |  7 ++++
 site/source/components/utils/useYear.ts       |  8 ++--
 site/source/locales/ui-en.yaml                |  2 +-
 site/source/locales/ui-fr.yaml                |  2 +-
 site/source/utils/dates.ts                    | 13 +++++++
 6 files changed, 47 insertions(+), 22 deletions(-)
 create mode 100644 site/source/components/utils/useDate.tsx
 create mode 100644 site/source/utils/dates.ts

diff --git a/site/source/components/SelectSimulationYear.tsx b/site/source/components/SelectSimulationYear.tsx
index af0bab7a5a..ab79c67645 100644
--- a/site/source/components/SelectSimulationYear.tsx
+++ b/site/source/components/SelectSimulationYear.tsx
@@ -3,8 +3,9 @@ import { useDispatch } from 'react-redux'
 import { styled } from 'styled-components'
 
 import Banner from '@/components/Banner'
-import { Link as DesignSystemLink } from '@/design-system/typography/link'
+import { Link } from '@/design-system/typography/link'
 import { enregistreLaRéponse } from '@/store/actions/actions'
+import { getCurrentYear, getYearsBetween } from '@/utils/dates'
 
 import useYear from './utils/useYear'
 
@@ -14,41 +15,47 @@ const Bold = styled.span<{ $bold: boolean }>`
 
 export const SelectSimulationYear = () => {
 	const dispatch = useDispatch()
-	const choices = [2023, 2024]
-
-	const actualYear = useYear()
-
-	// return null // Waiting for next year.
+	const currentYear = getCurrentYear()
+	const choices = getYearsBetween(2023, currentYear)
+	const currentEngineYear = useYear()
 
 	return (
 		<Banner hideAfterFirstStep={false} icon={'📅'}>
 			<Trans i18nKey="pages.simulateurs.select-year.info">
 				Cette simulation concerne l'année{' '}
-				<Bold $bold={actualYear !== 2024}>{{ actualYear }}</Bold>.{' '}
+				<Bold $bold={currentEngineYear !== currentYear}>
+					{{ currentEngineYear }}
+				</Bold>
+				.{' '}
 			</Trans>
 			<>
 				{choices
-					.filter((year) => year !== actualYear)
+					.filter((year) => year !== currentEngineYear)
+					.reverse()
 					.map((year) => (
 						<span key={year}>
-							<DesignSystemLink
+							<StyledLink
 								onPress={() =>
 									dispatch(enregistreLaRéponse('date', `01/01/${year}`))
 								}
 							>
-								{actualYear === 2024 ? (
-									<Trans i18nKey="pages.simulateurs.select-year.access">
-										Accéder au simulateur {{ year }}
-									</Trans>
-								) : (
+								{year === currentYear ? (
 									<Trans i18nKey="pages.simulateurs.select-year.back">
 										Retourner au simulateur {{ year }}
 									</Trans>
+								) : (
+									<Trans i18nKey="pages.simulateurs.select-year.access">
+										Accéder au simulateur {{ year }}
+									</Trans>
 								)}
-							</DesignSystemLink>
+							</StyledLink>
 						</span>
 					))}
 			</>
 		</Banner>
 	)
 }
+
+const StyledLink = styled(Link)`
+	margin-right: ${({ theme }) => theme.spacings.xs};
+`
diff --git a/site/source/components/utils/useDate.tsx b/site/source/components/utils/useDate.tsx
new file mode 100644
index 0000000000..9c5a5785a9
--- /dev/null
+++ b/site/source/components/utils/useDate.tsx
@@ -0,0 +1,7 @@
+import { useEngine } from './EngineContext'
+
+export default function useDate() {
+	const date = useEngine().evaluate('date')
+
+	return date.nodeValue
+}
diff --git a/site/source/components/utils/useYear.ts b/site/source/components/utils/useYear.ts
index 2cf805c4b0..f97f6fd8b4 100644
--- a/site/source/components/utils/useYear.ts
+++ b/site/source/components/utils/useYear.ts
@@ -1,9 +1,7 @@
-import { useEngine } from './EngineContext'
+import useDate from './useDate'
 
 export default function useYear() {
-	const year = useEngine().evaluate('date')
+	const date = useDate()
 
-	return Number(
-		year.nodeValue?.toString().slice(-4) || new Date().getFullYear()
-	)
+	return Number(date?.toString().slice(-4) || new Date().getFullYear())
 }
diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml
index 2fc27f2e6a..e998e81649 100644
--- a/site/source/locales/ui-en.yaml
+++ b/site/source/locales/ui-en.yaml
@@ -1684,7 +1684,7 @@ pages:
     select-year:
       access: Access the simulator {{year}}
       back: Back to simulator {{year}}
-      info: "This simulation concerns the year <2>{{actualYear}}</2>. "
+      info: "This simulation concerns the year <2>{{currentEngineYear}}</2>. "
 payslip:
   disclaimer: "This payslip is the result of the simulation you made. It helps you
     to understand your pay slip: you can click on the links to understand how
diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml
index 54a5f4a807..dc2009666d 100644
--- a/site/source/locales/ui-fr.yaml
+++ b/site/source/locales/ui-fr.yaml
@@ -1792,7 +1792,7 @@ pages:
     select-year:
       access: Accéder au simulateur {{year}}
       back: Retourner au simulateur {{year}}
-      info: "Cette simulation concerne l'année <2>{{actualYear}}</2>. "
+      info: "Cette simulation concerne l'année <2>{{currentEngineYear}}</2>. "
 payslip:
   disclaimer: "Cette fiche de paie est issue de la simulation que vous avez faite.
     Elle vous aide à comprendre votre bulletin de paie : vous pouvez cliquer sur
diff --git a/site/source/utils/dates.ts b/site/source/utils/dates.ts
new file mode 100644
index 0000000000..581afd0eef
--- /dev/null
+++ b/site/source/utils/dates.ts
@@ -0,0 +1,13 @@
+export const getCurrentYear = () => {
+	return new Date().getFullYear()
+}
+
+export const getYearsBetween = (
+	startYear: number,
+	currentYear: number
+): number[] => {
+	return Array.from(
+		{ length: currentYear - startYear + 1 },
+		(_, i) => startYear + i
+	)
+}