Merge pull request #1114 from DTS-STN/stepper-qa-4

Revert the back button behaviour and fixed a couple bugs
DTS-STN · Nov 18, 2024 · 9962022 · 9962022
2 parents 474744b + 251a7a1
commit 9962022
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 56 deletions.
diff --git a/components/Forms/CurrencyField.tsx b/components/Forms/CurrencyField.tsx
@@ -1,13 +1,11 @@
-import { Error } from './Error'
 import { useRouter } from 'next/router'
-import { useState, InputHTMLAttributes, useEffect } from 'react'
+import { InputHTMLAttributes, useEffect, useState } from 'react'
 import NumberFormat from 'react-number-format'
+import { TooltipTranslation } from '../../i18n/tooltips'
 import { Language } from '../../utils/api/definitions/enums'
+import { Error } from './Error'
 import { QuestionLabel } from './QuestionLabel'
-import { Tooltip } from '../Tooltip/tooltip'
 import { sanitizeCurrency } from './validation/utils'
-import { set } from 'lodash'
-import { TooltipTranslation } from '../../i18n/tooltips'
 
 export interface CurrencyFieldProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -119,6 +117,12 @@ export const CurrencyField: React.VFC<CurrencyFieldProps> = ({
           aria-describedby={
             locale === Language.EN ? `${name}-currency-symbol` : undefined
           }
+          isAllowed={(values) => {
+            const { formattedValue } = values
+            return !(
+              formattedValue.startsWith('.') || formattedValue.startsWith(',')
+            )
+          }}
         />
         {locale !== Language.EN && (
           <span id={`${name}-currency-symbol`} className="text-content">

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -129,6 +129,13 @@ export const Layout: React.VFC<{
       <Head title={title} />
       {/* <TestBanner /> */}
       <main className="mainContent">
+        <div
+          id="topOfPageFocus"
+          tabIndex={-1}
+          style={{ position: 'absolute', top: 0, left: 0, opacity: 0 }}
+        >
+          {/* Hidden focusable element */}
+        </div>
         <div className="xs:container s:container md:container lg:container mx-0 flex flex-col mb-16 mt-8">
           <Header
             id="header"

diff --git a/components/ResultsPage/YourAnswers.tsx b/components/ResultsPage/YourAnswers.tsx
@@ -10,6 +10,8 @@ import { MonthsYears } from '../../utils/api/definitions/types'
 import { Accordion } from '../Forms/Accordion'
 import { fieldDefinitions } from '../../utils/api/definitions/fields'
 import { FieldCategory } from '../../utils/api/definitions/enums'
+import { useSessionStorage } from 'react-use'
+import { keyToStepMap } from '../StepperPage/utils'
 import { useRouter } from 'next/router'
 
 type CategorizedInputs = {
@@ -35,6 +37,7 @@ export const YourAnswers: React.VFC<{
     })
     return initialState
   })
+  const [_activeStep, setActiveStep] = useSessionStorage('step')
 
   const toggleAccordion = (category) => {
     setAccordionStates((prevStates) => ({
@@ -58,8 +61,8 @@ export const YourAnswers: React.VFC<{
 
   const handlePageChange = (key: string) => (e) => {
     e.preventDefault()
-    const category = fieldDefinitions[key]?.category?.key
-    router.push(`/questions?step=${category}#${key}`)
+    setActiveStep(keyToStepMap[key] || 0)
+    router.push(`/questions#${key}`)
   }
 
   /**

diff --git a/components/StepperPage/index.tsx b/components/StepperPage/index.tsx
@@ -34,29 +34,13 @@ interface StepperPageProps {
   setPageTitle: (title: string) => void
 }
 
-const defaultStep = 'marital'
-const formSteps = ['marital', 'age', 'income', 'residence']
-
 const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   const router = useRouter()
   const langx = useRouter().locale as Language
   const language =
     langx === Language.EN || langx === Language.FR ? langx : Language.EN
   const tsln = useTranslation<WebTranslations>()
 
-  const { step } = router.query
-
-  useEffect(() => {
-    // Redirect to the default step if no step is specified or the step is invalid
-    if (
-      !step ||
-      typeof step !== 'string' ||
-      !Object.values(formSteps).includes(step)
-    ) {
-      router.replace(`/questions?step=${defaultStep}`)
-    }
-  }, [])
-
   const allFieldConfigs: FieldConfig[] = FieldsHandler.getAllFieldData(language)
   const [inputs, setInputs]: [
     FieldInputsObject,
@@ -127,9 +111,7 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
 
   const [steps, setSteps] = useState(getSteps(tsln))
   const totalSteps = Object.keys(steps).length
-  const [activeStep, setActiveStep] = useState(
-    formSteps.indexOf(step as string) + 1
-  )
+  const [activeStep, setActiveStep] = useSessionStorage('step', 1)
   const [isLastStep, setIsLastStep] = useState(false)
 
   const [stepTitle, setStepTitle] = useState('')
@@ -173,13 +155,9 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   }, [ageDate])
 
   useEffect(() => {
-    setActiveStep(formSteps.indexOf(step as string) + 1)
-  }, [step])
-
-  useEffect(() => {
-    const focusedElement = document.activeElement
-    if (focusedElement instanceof HTMLButtonElement) {
-      focusedElement.blur()
+    const topElement = document.getElementById('topOfPageFocus')
+    if (topElement) {
+      topElement.focus()
     }
 
     if (activeStep === totalSteps) {
@@ -425,8 +403,6 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
       if (isLastStep) {
         submitForm()
       } else {
-        const nextStep = formSteps[activeStep]
-        router.push(`/questions?step=${nextStep}`)
         setActiveStep(activeStep + 1)
       }
     } else {
@@ -454,10 +430,7 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
           id: 'previous',
           text: tsln.stepper.previousStep,
           onClick: () => {
-            if (activeStep > 1) {
-              router.push(`/questions?step=${formSteps[activeStep - 2]}`)
-              setActiveStep(Math.max(activeStep - 1, 1))
-            }
+            setActiveStep(Math.max(activeStep - 1, 1))
           },
         }}
         nextProps={{

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -103,6 +103,7 @@ const Home: NextPage<{ adobeAnalyticsUrl: string }> = ({
               text={tsln.startBenefitsEstimator}
               style="primary"
               onClick={(e) => {
+                sessionStorage.setItem('step', '1')
                 router.push('/questions')
               }}
               custom="w-auto justify-center mb-4"

diff --git a/pages/questions/index.tsx b/pages/questions/index.tsx
@@ -8,14 +8,12 @@ import { useRouter } from 'next/router'
 import StepperPage from '../../components/StepperPage'
 import React from 'react'
 
-const defaultStep = 'marital' // Define the first step here
-const steps = ['marital', 'age', 'income', 'residence']
-
 const Stepper: NextPage<{ adobeAnalyticsUrl: string }> = ({
   adobeAnalyticsUrl,
 }) => {
   const router = useRouter()
   const tsln = useTranslation<WebTranslations>()
+  const language = router.locale
   const [pageTitle, setPageTitle] = useState(tsln.questionPageTitle)
 
   useEffect(() => {
@@ -25,20 +23,6 @@ const Stepper: NextPage<{ adobeAnalyticsUrl: string }> = ({
     }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const { step } = router.query
-
-  useEffect(() => {
-    // Redirect to the default step if no step is specified or the step is invalid
-    if (!step || typeof step !== 'string' || !steps.includes(step)) {
-      router.replace(`/questions?step=${defaultStep}`)
-    }
-  }, [step, router])
-
-  // Prevent rendering during redirect. Do not try to render when no step in URL.
-  if (!step || typeof step !== 'string' || !steps.includes(step)) {
-    return null
-  }
-
   return (
     <>
       <Head>