fix(frontend): update validation

Author: gregory-j-baker

frontend/app/routes/protected/person-case/primary-docs.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import { useId, useState } from 'react';
 
+import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
 import { useTranslation } from 'react-i18next';
@@ -34,7 +35,9 @@ import { getSingleKey } from '~/utils/i18n-utils';
 
 const log = LogFactory.getLogger(import.meta.url);
 
-export const handle = parentHandle;
+export const handle = {
+  i18nNamespace: [...parentHandle.i18nNamespace, 'protected'],
+} as const satisfies RouteHandle;
 
 export function meta({ data }: Route.MetaArgs) {
   return [{ title: data.documentTitle }];
@@ -89,7 +92,7 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       const parseResult = v.safeParse(primaryDocumentSchema, formValues);
 
       if (!parseResult.success) {
-        const formErrors = v.flatten(parseResult.issues).nested;
+        const formErrors = v.flatten<typeof primaryDocumentSchema>(parseResult.issues).nested;
 
         machineActor.send({
           type: 'setFormData',

frontend/app/routes/protected/person-case/privacy-statement.tsx

@@ -55,7 +55,7 @@ export async function action({ context, params, request }: Route.ActionArgs) {
 
     case 'next': {
       const parseResult = v.safeParse(privacyStatementSchema, {
-        agreedToTerms: formData.get('agreedToTerms') ? true : undefined,
+        agreedToTerms: formData.get('agreedToTerms')?.toString() === 'on',
       });
 
       if (!parseResult.success) {

frontend/app/routes/protected/person-case/secondary-doc.tsx

@@ -57,20 +57,28 @@ export async function action({ context, params, request }: Route.ActionArgs) {
     }
 
     case 'next': {
-      const expiryYear = Number(formData.get('expiry-year'));
-      const expiryMonth = Number(formData.get('expiry-month'));
+      const formValues = {
+        documentType: formData.get('document-type')?.toString(),
+        expiryYear: formData.get('expiry-year')?.toString(),
+        expiryMonth: formData.get('expiry-month')?.toString(),
+      };
 
-      const parseResult = v.safeParse(secondaryDocumentSchema, {
-        documentType: String(formData.get('document-type')),
-        expiryYear: expiryYear,
-        expiryMonth: expiryMonth,
-      });
+      const parseResult = v.safeParse(secondaryDocumentSchema, formValues);
 
       if (!parseResult.success) {
-        return data(
-          { errors: v.flatten<typeof secondaryDocumentSchema>(parseResult.issues).nested },
-          { status: HttpStatusCodes.BAD_REQUEST },
-        );
+        const formErrors = v.flatten<typeof secondaryDocumentSchema>(parseResult.issues).nested;
+
+        machineActor.send({
+          type: 'setFormData',
+          data: {
+            secondaryDocument: {
+              values: formValues,
+              errors: formErrors,
+            },
+          },
+        });
+
+        return data({ formValues: formValues, formErrors: formErrors }, { status: HttpStatusCodes.BAD_REQUEST });
       }
 
       machineActor.send({ type: 'submitSecondaryDocuments', data: parseResult.output });
@@ -90,27 +98,30 @@ export async function loader({ context, request }: Route.LoaderArgs) {
 
   const { lang, t } = await getTranslation(request, handle.i18nNamespace);
   const machineActor = loadMachineActor(context.session, request, 'secondary-docs');
+  const machineContext = machineActor?.getSnapshot().context;
 
   return {
     documentTitle: t('protected:secondary-identity-document.page-title'),
     localizedApplicantSecondaryDocumentChoices: getLocalizedApplicantSecondaryDocumentChoices(lang),
-    defaultFormValues: machineActor?.getSnapshot().context.secondaryDocument,
+    formValues: machineContext?.formData?.secondaryDocument?.values ?? machineContext?.secondaryDocument,
+    formErrors: machineContext?.formData?.secondaryDocument?.errors,
   };
 }
 
-export default function SecondaryDoc({ loaderData, actionData, params }: Route.ComponentProps) {
+export default function SecondaryDoc({ actionData, loaderData, params }: Route.ComponentProps) {
   const { t } = useTranslation(handle.i18nNamespace);
 
   const fetcherKey = useId();
   const fetcher = useFetcher<Info['actionData']>({ key: fetcherKey });
-
   const isSubmitting = fetcher.state !== 'idle';
-  const errors = fetcher.data?.errors;
+
+  const formValues = fetcher.data?.formValues ?? loaderData.formValues;
+  const formErrors = fetcher.data?.formErrors ?? loaderData.formErrors;
 
   const docOptions = loaderData.localizedApplicantSecondaryDocumentChoices.map(({ id, name }) => ({
     value: id,
     children: name,
-    defaultChecked: id === loaderData.defaultFormValues?.documentType,
+    defaultChecked: id === loaderData.formValues?.documentType,
   }));
 
   return (
@@ -126,11 +137,11 @@ export default function SecondaryDoc({ loaderData, actionData, params }: Route.C
               name="document-type"
               options={docOptions}
               required
-              errorMessage={t(getSingleKey(errors?.documentType))}
+              errorMessage={t(getSingleKey(formErrors?.documentType))}
             />
             <DatePickerField
-              defaultMonth={loaderData.defaultFormValues?.expiryMonth}
-              defaultYear={loaderData.defaultFormValues?.expiryYear}
+              defaultMonth={Number(formValues?.expiryMonth)}
+              defaultYear={Number(formValues?.expiryYear)}
               id="expiry-date-id"
               legend={t('protected:secondary-identity-document.expiry-date.title')}
               required
@@ -139,8 +150,8 @@ export default function SecondaryDoc({ loaderData, actionData, params }: Route.C
                 year: 'expiry-year',
               }}
               errorMessages={{
-                year: t(getSingleKey(errors?.expiryYear)),
-                month: t(getSingleKey(errors?.expiryMonth)),
+                year: t(getSingleKey(formErrors?.expiryYear)),
+                month: t(getSingleKey(formErrors?.expiryMonth)),
               }}
             />
             <InputFile
@@ -150,10 +161,6 @@ export default function SecondaryDoc({ loaderData, actionData, params }: Route.C
               name="document"
               label={t('protected:secondary-identity-document.upload-document.title')}
               required
-              /*
-              TODO: Enable file upload
-              errorMessage={t(getSingleKey(errors?.document))}
-              */
             />
           </div>
           <div className="mt-8 flex flex-row-reverse flex-wrap items-center justify-end gap-3">

frontend/app/routes/protected/person-case/validation.server.ts

@@ -498,27 +498,34 @@ export const secondaryDocumentSchema = v.pipe(
       ),
     ),
     expiryYear: v.pipe(
-      v.number('protected:secondary-identity-document.expiry-date.required-year'),
-      v.integer('protected:secondary-identity-document.expiry-date.invalid-year'),
+      stringToIntegerSchema('protected:secondary-identity-document.expiry-date.required-year'),
       v.minValue(
         getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getFullYear(),
         'protected:secondary-identity-document.expiry-date.invalid-year',
       ),
     ),
     expiryMonth: v.pipe(
-      v.number('protected:secondary-identity-document.expiry-date.required-month'),
-      v.integer('protected:secondary-identity-document.expiry-date.invalid-month'),
+      stringToIntegerSchema('protected:secondary-identity-document.expiry-date.required-month'),
       v.minValue(1, 'protected:secondary-identity-document.expiry-date.invalid-month'),
       v.maxValue(12, 'protected:secondary-identity-document.expiry-date.invalid-month'),
     ),
   }),
   v.forward(
     v.partialCheck(
       [['expiryYear'], ['expiryMonth']],
-      (input) =>
-        input.expiryYear > getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getFullYear() ||
-        (input.expiryYear === getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getFullYear() &&
-          input.expiryMonth >= getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getMonth()),
+      ({ expiryYear, expiryMonth }) => {
+        const currentYear = getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getFullYear();
+        const currentMonth = getStartOfDayInTimezone(serverEnvironment.BASE_TIMEZONE).getMonth();
+
+        // expiry date is valid if expiry year is in the future
+        if (expiryYear > currentYear) return true;
+
+        // expiry date is valid if expiry month is in the future
+        if (expiryYear === currentYear) return expiryMonth >= currentMonth;
+
+        // expiry date is invalid
+        return false;
+      },
       'protected:secondary-identity-document.expiry-date.invalid',
     ),
     ['expiryMonth'],