diff --git a/frontend/app/.server/locales/protected-en.json b/frontend/app/.server/locales/protected-en.json index 695798cb..c2845442 100644 --- a/frontend/app/.server/locales/protected-en.json +++ b/frontend/app/.server/locales/protected-en.json @@ -363,5 +363,13 @@ "other-last-names": "Other last names", "search": "Search", "matches": "Matches" + }, + "pid-verification": { + "page-title": "Validation result", + "status-passed": "Passed", + "validation-passed": "Validation passed", + "all-input-successful": "All inputs have been successfully validated and match the primary identity document.", + "next": "Next", + "previous": "Previous" } } diff --git a/frontend/app/.server/locales/protected-fr.json b/frontend/app/.server/locales/protected-fr.json index 405118f3..fadf783d 100644 --- a/frontend/app/.server/locales/protected-fr.json +++ b/frontend/app/.server/locales/protected-fr.json @@ -364,5 +364,13 @@ "other-last-names": "Other last names", "search": "Search", "matches": "Matches" + }, + "pid-verification": { + "page-title": "Validation result", + "status-passed": "Passed", + "validation-passed": "Validation passed", + "all-input-successful": "All inputs have been successfully validated and match the primary identity document.", + "next": "Next", + "previous": "Previous" } } diff --git a/frontend/app/i18n-routes.ts b/frontend/app/i18n-routes.ts index 9f7eacb7..738acbc2 100644 --- a/frontend/app/i18n-routes.ts +++ b/frontend/app/i18n-routes.ts @@ -105,6 +105,14 @@ export const i18nRoutes = [ }, { id: 'MCF-0001', + file: 'routes/protected/multi-channel/pid-verification.tsx', + paths: { + en: '/en/protected/multi-channel/pid-verification', + fr: '/fr/protege/multi-chaine/pid-verification', + }, + }, + { + id: 'MCF-0002', file: 'routes/protected/multi-channel/search-sin.tsx', paths: { en: '/en/protected/multi-channel/search-sin', diff --git a/frontend/app/routes/protected/multi-channel/pid-verification.tsx b/frontend/app/routes/protected/multi-channel/pid-verification.tsx new file mode 100644 index 00000000..7d339cbe --- /dev/null +++ b/frontend/app/routes/protected/multi-channel/pid-verification.tsx @@ -0,0 +1,100 @@ +import { useId } from 'react'; + +import type { RouteHandle } from 'react-router'; +import { useFetcher } from 'react-router'; + +import { faCheck } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useTranslation } from 'react-i18next'; + +import type { Info, Route } from './+types/pid-verification'; + +import { requireAuth } from '~/.server/utils/auth-utils'; +import { i18nRedirect } from '~/.server/utils/route-utils'; +import { Button } from '~/components/button'; +import { FetcherErrorSummary } from '~/components/error-summary'; +import { PageTitle } from '~/components/page-title'; +import { AppError } from '~/errors/app-error'; +import { ErrorCodes } from '~/errors/error-codes'; +import { getTranslation } from '~/i18n-config.server'; +import { handle as parentHandle } from '~/routes/protected/layout'; + +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 getTranslation(request, handle.i18nNamespace); + + // TODO: fetch the verifiction status and send in order to display correct status message + return { + documentTitle: t('protected:pid-verification.page-title'), + }; +} + +export function meta({ data }: Route.MetaArgs) { + return [{ title: data.documentTitle }]; +} + +export async function action({ context, request }: Route.ActionArgs) { + requireAuth(context.session, new URL(request.url), ['user']); + + const formData = await request.formData(); + const action = formData.get('action'); + + switch (action) { + case 'back': { + // TODO: update with proper route + throw i18nRedirect('routes/protected/multi-channel/pid-verification.tsx', request); + } + + case 'next': { + throw i18nRedirect('routes/protected/multi-channel/search-sin.tsx', request); + } + + default: { + throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION); + } + } +} + +export default function PidVerification({ loaderData, actionData, params }: Route.ComponentProps) { + const { t } = useTranslation(handle.i18nNamespace); + const fetcherKey = useId(); + const fetcher = useFetcher({ key: fetcherKey }); + const isSubmitting = fetcher.state !== 'idle'; + + return ( + <> + {t('protected:pid-verification.page-title')} + + + {/* TODO: refactor status message as reuseable component(s) and display*/} +
+
+

+ {t('protected:pid-verification.validation-passed')} +

+

{t('protected:pid-verification.all-input-successful')}

+
+ + +
+
+
+ + ); +}