make all income fields required (#275)

Author: remy-mazerolle-esdc

frontend/app/.server/locales/estimator-en.json

@@ -5,14 +5,16 @@
     "fields": {
       "claimed-income": {
         "error": {
-          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid"
+          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid",
+          "required": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is required"
         },
         "info-label": "Information",
         "label": "Enter your Universal Child Care Benefit (<abbr>UCCB</abbr>) and Registered Disability Savings Plan (<abbr>RDSP</abbr>) income."
       },
       "claimed-repayment": {
         "error": {
-          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid"
+          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid",
+          "required": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is required"
         },
         "info-label": "Information",
         "label": "Enter your Universal Child Care Benefit (<abbr>UCCB</abbr>) and Registered Disability Savings Plan (<abbr>RDSP</abbr>) repayment."
@@ -28,14 +30,16 @@
       "partner": {
         "claimed-income": {
           "error": {
-            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid"
+            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid",
+            "required": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is required"
           },
           "info-label": "Information",
           "label": "Enter your partner's Universal Child Care Benefit (<abbr>UCCB</abbr>) and Registered Disability Savings Plan (<abbr>RDSP</abbr>) income."
         },
         "claimed-repayment": {
           "error": {
-            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid"
+            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid",
+            "required": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is required"
           },
           "info-label": "Information",
           "label": "Your partner's Universal Child Care Benefit (<abbr>UCCB</abbr>) and Registered Disability Savings Plan (<abbr>RDSP</abbr>) repayment"

frontend/app/.server/locales/estimator-fr.json

@@ -5,14 +5,16 @@
     "fields": {
       "claimed-income": {
         "error": {
-          "invalid": "Votre revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide"
+          "invalid": "Votre revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide",
+          "required": "Votre revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est requis"
         },
         "info-label": "Information",
         "label": "Entrez votre revenu de la Prestation universelle pour la garde d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré d'épargne-invalidité (<abbr>REEI</abbr>)."
       },
       "claimed-repayment": {
         "error": {
-          "invalid": "Votre remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide"
+          "invalid": "Votre remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide",
+          "required": "Votre remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est requis"
         },
         "info-label": "Information",
         "label": "Entrez votre remboursement de la Prestation universelle pour la garde d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré d'épargne-invalidité (<abbr>REEI</abbr>)."
@@ -28,14 +30,16 @@
       "partner": {
         "claimed-income": {
           "error": {
-            "invalid": "Le revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalide"
+            "invalid": "Le revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalide",
+            "required": "Le revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est requis"
           },
           "info-label": "Information",
           "label": "Entrez le revenu de votre partenaire provenant de la Prestation universelle pour la garde d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré d'épargne-invalidité (<abbr>REEI</abbr>)."
         },
         "claimed-repayment": {
           "error": {
-            "invalid": "Le remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalid"
+            "invalid": "Le remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalid",
+            "required": "Le remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est requis"
           },
           "info-label": "Information",
           "label": "Entrez le remboursement par votre partenaire de la Prestation universelle pour la garde d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré d'épargne-invalidité (<abbr>REEI</abbr>)."

frontend/app/routes/estimator/step-income.tsx

@@ -79,7 +79,7 @@ function processIncome(formData: FormData, isMarried: boolean) {
       netIncome: v.pipe(
         v.string('net-income.error.required'),
         v.nonEmpty('net-income.error.required'),
-        v.transform((input) => removeNumericFormatting(input)),
+        v.transform((input) => removeNumericFormatting(input) ?? ''),
         v.regex(positiveDecimal, 'net-income.error.invalid'),
         v.transform(Number),
         v.number('net-income.error.invalid'),
@@ -88,23 +88,25 @@ function processIncome(formData: FormData, isMarried: boolean) {
       workingIncome: v.pipe(
         v.string('working-income.error.required'),
         v.nonEmpty('working-income.error.required'),
-        v.transform((input) => removeNumericFormatting(input)),
+        v.transform((input) => removeNumericFormatting(input) ?? ''),
         v.regex(positiveDecimal, 'working-income.error.invalid'),
         v.transform(Number),
         v.number('working-income.error.invalid'),
         v.minValue(0, 'working-income.error.invalid'),
       ),
       claimedIncome: v.pipe(
-        v.optional(v.string(), '0'),
-        v.transform((input) => removeNumericFormatting(input)),
+        v.string('claimed-income.error.required'),
+        v.nonEmpty('claimed-income.error.required'),
+        v.transform((input) => removeNumericFormatting(input) ?? ''),
         v.regex(positiveDecimal, 'claimed-income.error.invalid'),
         v.transform(Number),
         v.number('claimed-income.error.invalid'),
         v.minValue(0, 'claimed-income.error.invalid'),
       ),
       claimedRepayment: v.pipe(
-        v.optional(v.string(), '0'),
-        v.transform((input) => removeNumericFormatting(input)),
+        v.string('claimed-repayment.error.required'),
+        v.nonEmpty('claimed-repayment.error.required'),
+        v.transform((input) => removeNumericFormatting(input) ?? ''),
         v.regex(positiveDecimal, 'claimed-repayment.error.invalid'),
         v.transform(Number),
         v.number('claimed-repayment.error.invalid'),
@@ -254,6 +256,7 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
             <CurrencyField
               name="individual-claimed-income"
               label={<Trans i18nKey={'estimator:income.fields.claimed-income.label'} />}
+              required
               helpMessagePrimaryClassName="-max-w-prose text-black"
               helpMessagePrimary={
                 <p>
@@ -262,7 +265,8 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
               }
               defaultValue={
                 loaderData.formValues?.individualIncome.claimedIncome ??
-                removeNumericFormatting(previousFormValues.get('income:individual-claimed-income'))
+                removeNumericFormatting(previousFormValues.get('income:individual-claimed-income')) ??
+                '0'
               }
               errorMessage={
                 errors?.nested?.['individualIncome.claimedIncome']?.at(0) ? (
@@ -274,6 +278,7 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
             <CurrencyField
               name="individual-claimed-repayment"
               label={<Trans i18nKey={'estimator:income.fields.claimed-repayment.label'} />}
+              required
               helpMessagePrimaryClassName="-max-w-prose text-black"
               helpMessagePrimary={
                 <p>
@@ -282,7 +287,8 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
               }
               defaultValue={
                 loaderData.formValues?.individualIncome.claimedRepayment ??
-                removeNumericFormatting(previousFormValues.get('income:individual-claimed-repayment'))
+                removeNumericFormatting(previousFormValues.get('income:individual-claimed-repayment')) ??
+                '0'
               }
               errorMessage={
                 errors?.nested?.['individualIncome.claimedRepayment']?.at(0) ? (
@@ -367,6 +373,7 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
                 <CurrencyField
                   name="partner-claimed-income"
                   label={<Trans i18nKey={'estimator:income.fields.partner.claimed-income.label'} />}
+                  required
                   helpMessagePrimaryClassName="-max-w-prose text-black"
                   helpMessagePrimary={
                     <p>
@@ -379,7 +386,9 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
                   defaultValue={
                     (loaderData.formValues?.kind === 'married'
                       ? loaderData.formValues.partnerIncome.claimedIncome
-                      : undefined) ?? removeNumericFormatting(previousFormValues.get('income:partner-claimed-income'))
+                      : undefined) ??
+                    removeNumericFormatting(previousFormValues.get('income:partner-claimed-income')) ??
+                    '0'
                   }
                   errorMessage={
                     errors?.nested?.['partnerIncome.claimedIncome']?.at(0) ? (
@@ -392,6 +401,7 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
                 <CurrencyField
                   name="partner-claimed-repayment"
                   label={<Trans i18nKey={'estimator:income.fields.partner.claimed-repayment.label'} />}
+                  required
                   helpMessagePrimaryClassName="-max-w-prose text-black"
                   helpMessagePrimary={
                     <p>
@@ -404,7 +414,9 @@ export default function StepIncome({ actionData, loaderData, matches, params }:
                   defaultValue={
                     (loaderData.formValues?.kind === 'married'
                       ? loaderData.formValues.partnerIncome.claimedRepayment
-                      : undefined) ?? removeNumericFormatting(previousFormValues.get('income:partner-claimed-repayment'))
+                      : undefined) ??
+                    removeNumericFormatting(previousFormValues.get('income:partner-claimed-repayment')) ??
+                    '0'
                   }
                   errorMessage={
                     errors?.nested?.['partnerIncome.claimedRepayment']?.at(0) ? (

frontend/app/utils/string-utils.ts

@@ -3,8 +3,8 @@
  * @param input string represenation of a formatted decimal (examples: en:"1,234.56", fr:"1 234,56")
  * @returns string representation of the decimal without formatting (examples: "1234.56")
  */
-export function removeNumericFormatting(input: string | undefined): string {
-  if (input === undefined) return '';
+export function removeNumericFormatting(input: string | undefined): string | undefined {
+  if (input === undefined) return undefined;
 
   const isFrench = input.includes(' ') || input.lastIndexOf(',') >= input.length - 3;
   const isEnglish = input.indexOf(',') < input.length - 2 || input.lastIndexOf('.') >= input.length - 3;

frontend/e2e/__snapshots__/estimator/step-income.spec.ts/Navigating-to-en-income-renders-the-english-income-page-1.txt

@@ -130,8 +130,7 @@
               >Enter your Universal Child Care Benefit (<abbr>UCCB</abbr>) and
               Registered Disability Savings Plan (<abbr>RDSP</abbr>)
               income.</span
-            >
-            <span aria-hidden="true">(<!-- -->optional<!-- -->)</span></label
+            ></label
           >
           <div
             class="-max-w-prose text-black"
@@ -147,14 +146,16 @@
           ><input
             aria-describedby="input-text-field-«Rpmlj5»-help-primary"
             aria-labelledby="input-text-field-«Rpmlj5»-label"
+            aria-required="true"
             class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-3 focus:ring-blue-500 focus:outline-hidden read-only:pointer-events-none read-only:bg-gray-100 read-only:opacity-70 disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-70 aria-invalid:border-red-500 aria-invalid:focus:border-red-500 aria-invalid:focus:ring-red-500 inline"
             id="input-text-field-«Rpmlj5»-input"
+            required=""
             type="text"
             inputmode="numeric"
             maxlength="15"
             autocomplete="off"
             name="individual-claimed-income"
-            value=""
+            value="0"
           />
         </div>
         <div id="input-text-field-«Rtmlj5»" class="space-y-2">
@@ -163,8 +164,7 @@
               >Enter your Universal Child Care Benefit (<abbr>UCCB</abbr>) and
               Registered Disability Savings Plan (<abbr>RDSP</abbr>)
               repayment.</span
-            >
-            <span aria-hidden="true">(<!-- -->optional<!-- -->)</span></label
+            ></label
           >
           <div
             class="-max-w-prose text-black"
@@ -180,14 +180,16 @@
           ><input
             aria-describedby="input-text-field-«Rtmlj5»-help-primary"
             aria-labelledby="input-text-field-«Rtmlj5»-label"
+            aria-required="true"
             class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-3 focus:ring-blue-500 focus:outline-hidden read-only:pointer-events-none read-only:bg-gray-100 read-only:opacity-70 disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-70 aria-invalid:border-red-500 aria-invalid:focus:border-red-500 aria-invalid:focus:ring-red-500 inline"
             id="input-text-field-«Rtmlj5»-input"
+            required=""
             type="text"
             inputmode="numeric"
             maxlength="15"
             autocomplete="off"
             name="individual-claimed-repayment"
-            value=""
+            value="0"
           />
         </div>
       </div>

frontend/e2e/__snapshots__/estimator/step-income.spec.ts/Navigating-to-fr-revenus-renders-the-french-income-page-1.txt

@@ -138,8 +138,7 @@
               >Entrez votre revenu de la Prestation universelle pour la garde
               d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré
               d'épargne-invalidité (<abbr>REEI</abbr>).</span
-            >
-            <span aria-hidden="true">(<!-- -->facultatif<!-- -->)</span></label
+            ></label
           >
           <div
             class="-max-w-prose text-black"
@@ -155,14 +154,16 @@
           <input
             aria-describedby="input-text-field-«Rpmlj5»-help-primary"
             aria-labelledby="input-text-field-«Rpmlj5»-label"
+            aria-required="true"
             class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-3 focus:ring-blue-500 focus:outline-hidden read-only:pointer-events-none read-only:bg-gray-100 read-only:opacity-70 disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-70 aria-invalid:border-red-500 aria-invalid:focus:border-red-500 aria-invalid:focus:ring-red-500 inline"
             id="input-text-field-«Rpmlj5»-input"
+            required=""
             type="text"
             inputmode="numeric"
             maxlength="16"
             autocomplete="off"
             name="individual-claimed-income"
-            value=""
+            value="0"
           /><span class="ml-1">$</span>
         </div>
         <div id="input-text-field-«Rtmlj5»" class="space-y-2">
@@ -171,8 +172,7 @@
               >Entrez votre remboursement de la Prestation universelle pour la
               garde d'enfants (<abbr>PUGE</abbr>) et du Régime enregistré
               d'épargne-invalidité (<abbr>REEI</abbr>).</span
-            >
-            <span aria-hidden="true">(<!-- -->facultatif<!-- -->)</span></label
+            ></label
           >
           <div
             class="-max-w-prose text-black"
@@ -188,14 +188,16 @@
           <input
             aria-describedby="input-text-field-«Rtmlj5»-help-primary"
             aria-labelledby="input-text-field-«Rtmlj5»-label"
+            aria-required="true"
             class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-3 focus:ring-blue-500 focus:outline-hidden read-only:pointer-events-none read-only:bg-gray-100 read-only:opacity-70 disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-70 aria-invalid:border-red-500 aria-invalid:focus:border-red-500 aria-invalid:focus:ring-red-500 inline"
             id="input-text-field-«Rtmlj5»-input"
+            required=""
             type="text"
             inputmode="numeric"
             maxlength="16"
             autocomplete="off"
             name="individual-claimed-repayment"
-            value=""
+            value="0"
           /><span class="ml-1">$</span>
         </div>
       </div>