add screen for privacy statement (#164)

Author: faiza-jahanzeb

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

@@ -31,5 +31,10 @@
     "next": "Next",
     "first-name": "Enter first name",
     "last-name": "Enter last name"
+  },
+  "privacy-statement": {
+    "confirm-privacy-notice-checkbox": "I agree to the terms and conditions",
+    "page-title": "Privacy Statement",
+    "title": "<span>Priv</span>acy Statement"
   }
 }

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

@@ -31,5 +31,10 @@
     "next": "Suivant",
     "first-name": "Entrez le prénom",
     "last-name": "Entrez le nom de famille"
+  },
+  "privacy-statement": {
+    "confirm-privacy-notice-checkbox": "J'accepte les termes et conditions.",
+    "page-title": "Déclaration de confidentialité",
+    "title": "<span>Décl</span>aration de confidentialité"
   }
 }

frontend/app/.server/validation/confirmPrivacyNoticeSchema.ts

@@ -0,0 +1,47 @@
+import * as v from 'valibot';
+
+import { mapIssueErrorMessage } from '~/.server/utils/validation-utils';
+
+/**
+ * Interface for customizable error messages in first name validation
+ */
+export interface ConfirmPrivacyNoticeSchemaErrorMessages extends Record<string, string | undefined> {
+  required_error?: string;
+}
+
+/**
+ * Localized error message configuration
+ */
+const DEFAULT_MESSAGES = {
+  en: {
+    required_error: 'Privacy notice statement is required.',
+  },
+  fr: {
+    required_error: 'Un avis de confidentialité est requis.',
+  },
+} as const satisfies Record<Language, Required<ConfirmPrivacyNoticeSchemaErrorMessages>>;
+
+/**
+ * Configuration options for first name schema validation
+ */
+export interface ConfirmPrivacyNoticeSchemaOptions {
+  /** Custom error messages to override defaults */
+  errorMessages?: ConfirmPrivacyNoticeSchemaErrorMessages;
+}
+
+/**
+ * Creates a Valibot schema for validating first names
+ *
+ * @param options - Validation configuration options
+ * @returns Valibot schema for first name validation
+ */
+export function confirmPrivacyNoticeSchema(options: ConfirmPrivacyNoticeSchemaOptions = {}) {
+  const { errorMessages = {} } = options;
+
+  return v.pipe(
+    // Base string validation with required error
+    v.string((issue) => mapIssueErrorMessage(issue, errorMessages, 'required_error', DEFAULT_MESSAGES)),
+    v.trim(),
+    v.nonEmpty((issue) => mapIssueErrorMessage(issue, errorMessages, 'required_error', DEFAULT_MESSAGES)),
+  );
+}

frontend/app/@types/express-session.d.ts

@@ -21,6 +21,7 @@ declare module 'express-session' {
     inPersonSINCase: {
       firstName?: string;
       lastName?: string;
+      confirmPrivacyNotice?: string;
     };
   }
 }

frontend/app/i18n-routes.ts

@@ -59,6 +59,11 @@ export const i18nRoutes = [
         file: 'routes/protected/person-case/last-name.tsx',
         paths: { en: '/en/protected/person-case/last-name', fr: '/fr/protege/person-case/last-name' },
       },
+      {
+        id: 'PROT-0006',
+        file: 'routes/protected/person-case/privacy-statement.tsx',
+        paths: { en: '/en/protected/person-case/privacy-statement', fr: '/fr/protege/person-case/privacy-statement' },
+      },
     ],
   },
   {

frontend/app/routes/protected/index.tsx

@@ -43,7 +43,7 @@ export default function Index() {
       <h2 className="mt-10 mb-2 text-2xl font-bold text-slate-700">{t('protected:dashboard.get-started')}</h2>
       <ButtonLink
         className="flex w-80 items-center justify-between rounded-none"
-        file="routes/protected/person-case/first-name.tsx"
+        file="routes/protected/person-case/privacy-statement.tsx"
       >
         <span className="text-bold flex flex-col text-slate-700">
           <span className="text-xl">{t('protected:in-person.title')}</span>

frontend/app/routes/protected/person-case/first-name.tsx

@@ -85,7 +85,12 @@ export default function FirstName({ loaderData, actionData, params }: Route.Comp
           type="text"
         />
         <div className="mt-8 flex flex-wrap items-center gap-3">
-          <ButtonLink id="back-button" file="routes/protected/index.tsx" params={params} disabled={isSubmitting}>
+          <ButtonLink
+            id="back-button"
+            file="routes/protected/person-case/privacy-statement.tsx"
+            params={params}
+            disabled={isSubmitting}
+          >
             {t('protected:person-case.previous')}
           </ButtonLink>
           <Button variant="primary" type="submit" id="continue-first-name-button" disabled={isSubmitting}>

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

@@ -0,0 +1,129 @@
+import { data, useFetcher } from 'react-router';
+import type { RouteHandle } from 'react-router';
+
+import { Trans, useTranslation } from 'react-i18next';
+import * as v from 'valibot';
+
+import type { Route, Info } from './+types/privacy-statement';
+
+import { requireAuth } from '~/.server/utils/auth-utils';
+import { i18nRedirect } from '~/.server/utils/route-utils';
+import { confirmPrivacyNoticeSchema } from '~/.server/validation/confirmPrivacyNoticeSchema';
+import { Button } from '~/components/button';
+import { ButtonLink } from '~/components/button-link';
+import { ErrorSummary } from '~/components/error-summary';
+import { InputCheckbox } from '~/components/input-checkbox';
+import { Progress } from '~/components/progress';
+import { getFixedT } from '~/i18n-config.server';
+import { handle as parentHandle } from '~/routes/protected/layout';
+import { getLanguage } from '~/utils/i18n-utils';
+
+export const handle = {
+  i18nNamespace: [...parentHandle.i18nNamespace, 'protected'],
+} as const satisfies RouteHandle;
+
+export async function loader({ context, request }: Route.LoaderArgs) {
+  requireAuth(context.session, new URL(request.url), ['user']);
+  const t = await getFixedT(request, handle.i18nNamespace);
+
+  return {
+    documentTitle: t('protected:privacy-statement.page-title'),
+    defaultFormValues: {
+      confirmPrivacyNotice: context.session.inPersonSINCase?.confirmPrivacyNotice,
+    },
+  };
+}
+
+export const meta: Route.MetaFunction = ({ data }) => {
+  return [{ title: data.documentTitle }];
+};
+
+export async function action({ context, request }: Route.ActionArgs) {
+  requireAuth(context.session, new URL(request.url), ['user']);
+  const lang = getLanguage(request);
+
+  const formData = await request.formData();
+  const input = { confirmPrivacyNotice: formData.get('confirmPrivacyNotice') as string };
+
+  const schema = v.object({ confirmPrivacyNotice: confirmPrivacyNoticeSchema() });
+  const parsedDataResult = v.safeParse(schema, input, { lang });
+
+  if (!parsedDataResult.success) {
+    return data({ errors: v.flatten<typeof schema>(parsedDataResult.issues).nested }, { status: 400 });
+  }
+
+  // If the first name is valid, store it in the session and redirect to the next page
+  context.session.inPersonSINCase = {
+    ...(context.session.inPersonSINCase ?? {}),
+    ...input,
+  };
+  return i18nRedirect('routes/protected/person-case/first-name.tsx', request);
+}
+
+export default function PrivacyStatement({ loaderData, actionData, params }: Route.ComponentProps) {
+  const { t } = useTranslation(handle.i18nNamespace);
+
+  const fetcher = useFetcher<Info['actionData']>();
+  const isSubmitting = fetcher.state !== 'idle';
+  const errors = fetcher.data?.errors;
+
+  return (
+    <>
+      <Progress className="mt-8 mb-8" label="" value={20} />
+      <span className="text-md">{t('protected:in-person.title')}</span>
+      <h1 className="mb-8 text-2xl font-bold text-slate-700">
+        <Trans
+          i18nKey="protected:privacy-statement.title"
+          components={{ span: <span className="underline decoration-red-800 underline-offset-8" /> }}
+        />
+      </h1>
+
+      <fetcher.Form method="post" noValidate>
+        <div className="space-y-6">
+          <ErrorSummary errors={errors} />
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Gravida pulvinar fringilla augue per lacinia cubilia aliquam.
+            Nibh egestas pharetra; at sit ipsum aliquet fames pellentesque. Posuere mauris pretium commodo hendrerit maecenas
+            neque imperdiet. Phasellus tempor metus phasellus eu malesuada. Mi fusce dapibus nam metus est sagittis nisl sem
+            fringilla. Iaculis gravida netus aptent mattis dignissim massa. Dolor curae donec hac dui, neque proin erat. Nullam
+            sem ullamcorper commodo phasellus hendrerit ex. Curabitur venenatis ex, vitae fermentum finibus nibh.
+          </p>
+
+          <p>
+            Himenaeos turpis id pretium mauris pellentesque quis curae. Facilisi sollicitudin justo erat habitasse turpis
+            consequat taciti. Scelerisque suspendisse hac dictumst mattis in odio. Molestie molestie parturient arcu iaculis
+            lacinia. Ut est vel massa fusce congue laoreet posuere pulvinar. Consectetur pharetra ipsum tortor cubilia ut.
+            Placerat a pellentesque commodo bibendum posuere vivamus. Senectus imperdiet sit praesent adipiscing accumsan nibh
+            consequat per. Aliquam turpis ut libero non malesuada tortor ac maximus dictum. Non vestibulum pellentesque posuere
+            dapibus eleifend cras tempus potenti.
+          </p>
+
+          <p>
+            Rhoncus semper dolor; scelerisque euismod justo integer. Rhoncus et cras cursus velit diam. Vehicula magna sem eget
+            urna vitae donec phasellus dignissim volutpat. Arcu mi neque ad nulla; dui maximus. Nulla ligula ultrices facilisi
+            urna rhoncus platea per platea. Nascetur nec dapibus augue dictum volutpat tristique nec dis. Dis ante metus tortor
+            lacus porta.
+          </p>
+
+          <InputCheckbox
+            id="confirmPrivacyNotice"
+            name="confirmPrivacyNotice"
+            errorMessage={errors?.confirmPrivacyNotice?.[0]}
+            defaultChecked={loaderData.defaultFormValues.confirmPrivacyNotice === 'on'}
+            required
+          >
+            {t('protected:privacy-statement.confirm-privacy-notice-checkbox')}
+          </InputCheckbox>
+        </div>
+        <div className="mt-8 flex flex-wrap items-center gap-3">
+          <ButtonLink id="back-button" file="routes/protected/index.tsx" params={params} disabled={isSubmitting}>
+            {t('protected:person-case.previous')}
+          </ButtonLink>
+          <Button variant="primary" type="submit" id="continue-button" disabled={isSubmitting}>
+            {t('protected:person-case.next')}
+          </Button>
+        </div>
+      </fetcher.Form>
+    </>
+  );
+}