Stepper QA #1

__tests__/pages/api/field-reqs.test.ts

@@ -41,7 +41,7 @@ describe('field requirement analysis', () => {
       FieldKey.MARITAL_STATUS,
       FieldKey.AGE,
       FieldKey.INCOME,
-      //FieldKey.INCOME_WORK,
+      FieldKey.INCOME_WORK,
       // FieldKey.LEGAL_STATUS,
       FieldKey.LIVING_COUNTRY,
       FieldKey.LIVED_ONLY_IN_CANADA,

components/StepperPage/index.tsx

@@ -78,7 +78,7 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   useEffect(() => {
     setSteps(getSteps(tsln))
     setStepComponents(getComponentForStep())
-  }, [tsln])
+  }, [tsln, language])
 
   const [visibleFields]: [
     VisibleFieldsObject,
@@ -115,6 +115,8 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   const [activeStep, setActiveStep] = useSessionStorage('step', 1)
   const [isLastStep, setIsLastStep] = useState(false)
 
+  const [stepTitle, setStepTitle] = useState('')
+
   const [errorsVisible, setErrorsVisible]: [
     ErrorsVisibleObject,
     (value: ErrorsVisibleObject) => void
@@ -252,10 +254,14 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
   ])
 
   useEffect(() => {
-    const title = getStepTitle(language, activeStep, totalSteps, steps)
-    setPageTitle(title)
+    const title = getStepTitle(tsln, language, activeStep, totalSteps, steps)
+    setStepTitle(title)
   }, [activeStep, totalSteps, language, setPageTitle])
 
+  useEffect(() => {
+    setPageTitle(stepTitle)
+  }, [stepTitle])
+
   const getComponentForStep = () => {
     const metaDataForFields = getFieldsMetaData(activeStep)
 
@@ -420,7 +426,7 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
         id="stepper123"
         name={tsln.introPageTitle}
         activeStep={activeStep}
-        title={getStepTitle(tsln._language, activeStep, totalSteps, steps)}
+        title={stepTitle}
         previousProps={{
           id: 'previous',
           text: tsln.stepper.previousStep,

components/StepperPage/utils.ts

@@ -126,23 +126,23 @@ export const getSteps = (tsln) => {
   const AA_FORM_SUBMIT_ACTION = 'submit'
   return {
     1: {
-      title: tsln.category.marital,
+      title: 'marital',
       keys: ['maritalStatus', 'invSeparated'],
       partnerKeys: [],
       buttonAttributes: {
         [AA_CUSTOMCLICK]: `${AA_BUTTON_CLICK_ATTRIBUTE}:${tsln.category.age}`,
       },
     },
     2: {
-      title: tsln.category.age,
+      title: 'age',
       keys: ['age', 'receiveOAS', 'oasDeferDuration', 'oasDefer', 'oasAge'],
       partnerKeys: ['partnerAge', 'partnerBenefitStatus'],
       buttonAttributes: {
         [AA_CUSTOMCLICK]: `${AA_BUTTON_CLICK_ATTRIBUTE}:${tsln.category.income}`,
       },
     },
     3: {
-      title: tsln.category.income,
+      title: 'income',
       keys: ['incomeAvailable', 'income', 'incomeWork'],
       partnerKeys: [
         'partnerIncomeAvailable',
@@ -154,7 +154,7 @@ export const getSteps = (tsln) => {
       },
     },
     4: {
-      title: tsln.category.residence,
+      title: 'residence',
       keys: [
         'livingCountry',
         'livedOnlyInCanada',
@@ -222,15 +222,20 @@ export const getIsStepValid = (
 }
 
 export const getStepTitle = (
+  tsln: WebTranslations,
   language: string,
   activeStep: number,
   totalSteps: number,
   steps: Object
 ) => {
   const title =
     language === 'en'
-      ? `Step ${activeStep} of ${totalSteps}: ${steps[activeStep].title}`
-      : `Étape ${activeStep} de ${totalSteps} : ${steps[activeStep].title}`
+      ? `Step ${activeStep} of ${totalSteps}: ${
+          tsln['category'][steps[activeStep].title]
+        }`
+      : `Étape ${activeStep} de ${totalSteps} : ${
+          tsln['category'][steps[activeStep].title]
+        }`
   return title
 }
 

pages/questions/index.tsx

@@ -4,15 +4,13 @@ import { useTranslation } from '../../components/Hooks'
 import { WebTranslations } from '../../i18n/web'
 import { useEffect, useState } from 'react'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import StepperPage from '../../components/StepperPage'
 import React from 'react'
 
 const Stepper: NextPage<{ adobeAnalyticsUrl: string }> = ({
   adobeAnalyticsUrl,
 }) => {
   const tsln = useTranslation<WebTranslations>()
-  const language = useRouter().locale
   const [pageTitle, setPageTitle] = useState(tsln.questionPageTitle)
 
   useEffect(() => {

utils/api/definitions/schemas.ts

@@ -65,15 +65,10 @@ export const RequestSchema = Joi.object({
   //   })
   // )
   // .message(ValidationErrors.incomeTooHigh),
-  incomeWork: Joi.number()
-    .default(0)
-    .required()
-    .messages({ 'any.required': ValidationErrors.incomeWorkEmpty })
-    .precision(2)
-    .min(0)
-    .message(ValidationErrors.incomeBelowZero),
-  //.max(Joi.ref('income'))
-  //.message(ValidationErrors.incomeWorkGreaterThanNetIncome),
+  incomeWork: Joi.alternatives().try(
+    Joi.number().precision(2).min(0).message(ValidationErrors.incomeBelowZero),
+    Joi.string().valid('.').strip()
+  ),
   age: Joi.number()
     .required()
     .messages({
@@ -270,15 +265,10 @@ export const RequestSchema = Joi.object({
   //   })
   // )
   // .message(ValidationErrors.partnerIncomeTooHigh),
-  partnerIncomeWork: Joi.number()
-    .default(0)
-    .required()
-    .messages({ 'any.required': ValidationErrors.partnerIncomeWorkEmpty })
-    .precision(2)
-    .min(0)
-    .message(ValidationErrors.incomeBelowZero),
-  //.max(Joi.ref('partnerIncome'))
-  //.message(ValidationErrors.partnerIncomeWorkGreaterThanNetIncome),
+  partnerIncomeWork: Joi.alternatives().try(
+    Joi.number().precision(2).min(0).message(ValidationErrors.incomeBelowZero),
+    Joi.string().valid('.').strip()
+  ),
   partnerAge: Joi.number()
     .required()
     .messages({