abandon button on all screens (#344)

DTS-STN · Mar 6, 2025 · 9f86cd2 · 9f86cd2
1 parent 6f4ea52
commit 9f86cd2
Show file tree

Hide file tree

Showing 11 changed files with 214 additions and 135 deletions.
diff --git a/frontend/app/routes/protected/person-case/birth-details.tsx b/frontend/app/routes/protected/person-case/birth-details.tsx
@@ -3,7 +3,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
-import { faExclamationCircle, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
@@ -21,7 +21,6 @@ import type { InputRadiosProps } from '~/components/input-radios';
 import { InputRadios } from '~/components/input-radios';
 import { InputSelect } from '~/components/input-select';
 import { PageTitle } from '~/components/page-title';
-import { Progress } from '~/components/progress';
 import { AppError } from '~/errors/app-error';
 import { ErrorCodes } from '~/errors/error-codes';
 import { getTranslation } from '~/i18n-config.server';
@@ -136,6 +135,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -200,18 +204,16 @@ export default function BirthDetails({ actionData, loaderData, matches, params }
 
   return (
     <>
-      <div className="flex justify-end">
-        <Button id="abandon-button" endIcon={faXmark} variant="link">
-          {t('protected:person-case.abandon-button')}
-        </Button>
-        <Button id="refer-button" endIcon={faExclamationCircle} variant="link">
-          {t('protected:person-case.refer-button')}
-        </Button>
-      </div>
-      <Progress className="mt-8" label="" value={30} />
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:birth-details.page-title')}</PageTitle>
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:birth-details.page-title')}</PageTitle>
+
           <div className="space-y-6">
             <InputSelect
               id="country-id"

diff --git a/frontend/app/routes/protected/person-case/contact-information.tsx b/frontend/app/routes/protected/person-case/contact-information.tsx
@@ -3,6 +3,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
@@ -139,6 +140,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -192,9 +198,15 @@ export default function ContactInformation({ loaderData, actionData, params }: R
 
   return (
     <div className="max-w-prose">
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:contact-information.page-title')}</PageTitle>
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:contact-information.page-title')}</PageTitle>
+
           <div className="space-y-6">
             <h2 className="font-lato text-2xl font-bold">{t('protected:contact-information.correspondence')}</h2>
             <InputRadios

diff --git a/frontend/app/routes/protected/person-case/current-name.tsx b/frontend/app/routes/protected/person-case/current-name.tsx
@@ -4,7 +4,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
-import { faExclamationCircle, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import type { ResourceKey } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import type { PartialDeep } from 'type-fest';
@@ -22,7 +22,6 @@ import { InputField } from '~/components/input-field';
 import type { InputRadiosProps } from '~/components/input-radios';
 import { InputRadios } from '~/components/input-radios';
 import { PageTitle } from '~/components/page-title';
-import { Progress } from '~/components/progress';
 import { AppError } from '~/errors/app-error';
 import { ErrorCodes } from '~/errors/error-codes';
 import { getTranslation } from '~/i18n-config.server';
@@ -157,6 +156,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -247,33 +251,31 @@ export default function CurrentName({ loaderData, actionData, params }: Route.Co
 
   return (
     <>
-      <div className="flex justify-end">
-        <Button id="abandon-button" endIcon={faXmark} variant="link">
-          {t('protected:person-case.abandon-button')}
-        </Button>
-        <Button id="refer-button" endIcon={faExclamationCircle} variant="link">
-          {t('protected:person-case.refer-button')}
-        </Button>
-      </div>
-      <Progress className="mt-8" label="" value={30} />
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:current-name.page-title')}</PageTitle>
-      <p className="mb-4">{t('protected:current-name.recorded-name.description')}</p>
-      <ul className="mb-8 list-disc pl-5 font-bold">
-        <li>
-          {t('protected:current-name.recorded-name.first-name')}
-          <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.firstName}</span>
-        </li>
-        <li>
-          {t('protected:current-name.recorded-name.middle-name')}
-          <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.middleName}</span>
-        </li>
-        <li>
-          {t('protected:current-name.recorded-name.last-name')}
-          <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.lastName}</span>
-        </li>
-      </ul>
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:current-name.page-title')}</PageTitle>
+          <p className="mb-4">{t('protected:current-name.recorded-name.description')}</p>
+          <ul className="mb-8 list-disc pl-5 font-bold">
+            <li>
+              {t('protected:current-name.recorded-name.first-name')}
+              <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.firstName}</span>
+            </li>
+            <li>
+              {t('protected:current-name.recorded-name.middle-name')}
+              <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.middleName}</span>
+            </li>
+            <li>
+              {t('protected:current-name.recorded-name.last-name')}
+              <span className="ml-[1ch] font-normal">{loaderData.primaryDocName.lastName}</span>
+            </li>
+          </ul>
+
           <div className="space-y-6">
             <InputRadios
               errorMessage={errors?.preferredSameAsDocumentName?.at(0)}

diff --git a/frontend/app/routes/protected/person-case/parent-details.tsx b/frontend/app/routes/protected/person-case/parent-details.tsx
@@ -176,6 +176,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -221,9 +226,15 @@ export default function CreateRequest({ loaderData, actionData, params }: Route.
 
   return (
     <>
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:parent-details.page-title')}</PageTitle>
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:parent-details.page-title')}</PageTitle>
+
           <ParentInformation errors={errors} loaderData={loaderData} />
           <div className="mt-8 flex flex-row-reverse flex-wrap items-center justify-end gap-3">
             <Button name="action" value="next" variant="primary" id="continue-button" disabled={isSubmitting}>

diff --git a/frontend/app/routes/protected/person-case/personal-info.tsx b/frontend/app/routes/protected/person-case/personal-info.tsx
@@ -3,7 +3,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
-import { faExclamationCircle, faXmark, faXmarkCircle } from '@fortawesome/free-solid-svg-icons';
+import { faXmark, faXmarkCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
@@ -19,7 +19,6 @@ import { FetcherErrorSummary } from '~/components/error-summary';
 import { InputField } from '~/components/input-field';
 import { InputRadios } from '~/components/input-radios';
 import { PageTitle } from '~/components/page-title';
-import { Progress } from '~/components/progress';
 import { AppError } from '~/errors/app-error';
 import { ErrorCodes } from '~/errors/error-codes';
 import { getTranslation } from '~/i18n-config.server';
@@ -93,6 +92,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -204,20 +208,16 @@ export default function PersonalInformation({ actionData, loaderData, params, ma
 
   return (
     <>
-      <div className="flex justify-end">
-        <Button id="abandon-button" endIcon={faXmark} variant="link">
-          {t('protected:person-case.abandon-button')}
-        </Button>
-        <Button id="refer-button" endIcon={faExclamationCircle} variant="link">
-          {t('protected:person-case.refer-button')}
-        </Button>
-      </div>
-
-      <Progress className="mt-8" label="" value={30} />
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:personal-information.page-title')}</PageTitle>
-
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate={true}>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:personal-information.page-title')}</PageTitle>
+
           <div className="flex flex-col space-y-6">
             <div id="other-first-name-input" className="flex space-x-4">
               <InputField

diff --git a/frontend/app/routes/protected/person-case/previous-sin.tsx b/frontend/app/routes/protected/person-case/previous-sin.tsx
@@ -4,6 +4,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
@@ -108,6 +109,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -149,9 +155,15 @@ export default function PreviousSin({ loaderData, actionData, params }: Route.Co
 
   return (
     <>
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:previous-sin.page-title')}</PageTitle>
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate>
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:previous-sin.page-title')}</PageTitle>
+
           <div className="space-y-6">
             <InputRadios
               id="has-previous-sin"

diff --git a/frontend/app/routes/protected/person-case/primary-docs.tsx b/frontend/app/routes/protected/person-case/primary-docs.tsx
@@ -4,7 +4,7 @@ import { useId, useState } from 'react';
 import type { RouteHandle } from 'react-router';
 import { data, redirect, useFetcher } from 'react-router';
 
-import { faExclamationCircle, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
 import * as v from 'valibot';
 
@@ -24,7 +24,6 @@ import { InputFile } from '~/components/input-file';
 import { InputRadios } from '~/components/input-radios';
 import { InputSelect } from '~/components/input-select';
 import { PageTitle } from '~/components/page-title';
-import { Progress } from '~/components/progress';
 import { AppError } from '~/errors/app-error';
 import { ErrorCodes } from '~/errors/error-codes';
 import { getTranslation } from '~/i18n-config.server';
@@ -225,6 +224,11 @@ export async function action({ context, params, request }: Route.ActionArgs) {
       break;
     }
 
+    case 'abandon': {
+      machineActor.send({ type: 'cancel' });
+      break;
+    }
+
     default: {
       throw new AppError(`Unrecognized action: ${action}`, ErrorCodes.UNRECOGNIZED_ACTION);
     }
@@ -267,19 +271,16 @@ export default function PrimaryDocs({ loaderData, actionData, params }: Route.Co
 
   return (
     <>
-      <div className="flex justify-end">
-        <Button id="abandon-button" endIcon={faXmark} variant="link">
-          {t('protected:person-case.abandon-button')}
-        </Button>
-        <Button id="refer-button" endIcon={faExclamationCircle} variant="link">
-          {t('protected:person-case.refer-button')}
-        </Button>
-      </div>
-      <Progress className="mt-8" label="" value={30} />
-      <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:primary-identity-document.page-title')}</PageTitle>
-
       <FetcherErrorSummary fetcherKey={fetcherKey}>
         <fetcher.Form method="post" noValidate encType="multipart/form-data">
+          <div className="flex justify-end">
+            <Button name="action" value="abandon" id="abandon-button" endIcon={faXmark} variant="link">
+              {t('protected:person-case.abandon-button')}
+            </Button>
+          </div>
+
+          <PageTitle subTitle={t('protected:in-person.title')}>{t('protected:primary-identity-document.page-title')}</PageTitle>
+
           <div className="space-y-6">
             <CurrentStatusInCanada
               defaultValue={loaderData.defaultFormValues?.currentStatusInCanada}