add a navigation warning

DTS-STN · Nov 19, 2024 · ab0a676 · ab0a676
1 parent d69fa8d
commit ab0a676
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 0 deletions.
diff --git a/components/Stepper/index.tsx b/components/Stepper/index.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 // import PropTypes from "prop-types";
 import React from 'react'
+import { WebTranslations } from '../../i18n/web'
 import { Button } from '../Forms/Button'
+import { useTranslation } from '../Hooks'
 
 // Stepper props
 export interface StepperProps {
@@ -24,6 +26,7 @@ export interface StepperProps {
 }
 
 export function Stepper(props: StepperProps) {
+  const tsln = useTranslation<WebTranslations>()
   return (
     <div className="pt-3 pb-6 sm:pb-40">
       <div>
@@ -61,6 +64,9 @@ export function Stepper(props: StepperProps) {
             </div>
           )}
         </div>
+        {props.activeStep === 1 && (
+          <p className="mt-[24px]">{tsln.stepper.navWarning}</p>
+        )}
       </div>
     </div>
   )

diff --git a/i18n/web/en.ts b/i18n/web/en.ts
@@ -279,6 +279,7 @@ const en: WebTranslations = {
     previousStep: 'Previous',
     nextStep: 'Next',
     getEstimate: 'Estimate my benefits',
+    navWarning: `Note: Please navigate using the "Previous" and "Next" buttons. Using your browser's navigation buttons is not recommended.`,
   },
   datePicker: {
     month: 'Month',

diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
@@ -284,6 +284,7 @@ const fr: WebTranslations = {
     nextStep: 'Suivant',
     previousStep: 'Précédent',
     getEstimate: 'Estimer mes prestations',
+    navWarning: `Note: Veuillez naviguer en utilisant les boutons «Précédent» et «Suivant». Il n’est pas recommandé d’utiliser les boutons de votre navigateur.`,
   },
   datePicker: {
     month: 'Mois',

diff --git a/i18n/web/index.ts b/i18n/web/index.ts
@@ -188,6 +188,7 @@ export type WebTranslations = {
     nextStep: string
     previousStep: string
     getEstimate: string
+    navWarning: string
   }
   //Date Picker
   datePicker: {