add personal details and birth details on review page (#311)

DTS-STN · Feb 28, 2025 · 14e3d59 · 14e3d59
1 parent a844401
commit 14e3d59
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 7 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -197,6 +197,6 @@ PP_ENGLISH_LANGUAGE_CODE=
 # see app/.server/resources/preferred-language.json
 PP_FRENCH_LANGUAGE_CODE=
 
-# Power Platform country code for `Canada` (default: '0cf5389e-97ae-eb11-8236-000d3af4bfc3')
+# Power Platform country code for `Canada` (default: 'f8914e7c-2c95-ea11-a812-000d3a0c2b5d')
 # see app/.server/resources/countries.json
 PP_CANADA_COUNTRY_CODE=
diff --git a/frontend/app/.server/environment/power-platform.ts b/frontend/app/.server/environment/power-platform.ts
@@ -7,7 +7,7 @@ export type PowerPlatform = Readonly<v.InferOutput<typeof powerPlatform>>;
 export const defaults = {
   PP_ENGLISH_LANGUAGE_CODE: '1033',
   PP_FRENCH_LANGUAGE_CODE: '1036',
-  PP_CANADA_COUNTRY_CODE: '0cf5389e-97ae-eb11-8236-000d3af4bfc3',
+  PP_CANADA_COUNTRY_CODE: 'f8914e7c-2c95-ea11-a812-000d3a0c2b5d',
 } as const;
 
 export const powerPlatform = v.object({

diff --git a/frontend/app/.server/locales/protected-en.json b/frontend/app/.server/locales/protected-en.json
@@ -400,9 +400,13 @@
     "choosen-file": "File_chosen.pdf",
     "yes": "Yes",
     "no": "No",
+    "birth-place": "Birth place",
+    "multiple-birth": "Multiple birth",
     "edit-primary-identity-document": "Edit primary identity document",
     "edit-secondary-identity-document": "Edit secondary identity document",
-    "edit-current-name": "Edit current name"
+    "edit-current-name": "Edit current name",
+    "edit-personal-details": "Edit personal details",
+    "edit-birth-details": "Edit birth details"
   },
   "search-sin": {
     "page-title": "Search for a SIN",

diff --git a/frontend/app/.server/locales/protected-fr.json b/frontend/app/.server/locales/protected-fr.json
@@ -401,9 +401,13 @@
     "choosen-file": "Fichier_choisi.pdf",
     "yes": "Oui",
     "no": "Non",
+    "birth-place": "Lieu de naissance",
+    "multiple-birth": "Naissance multiple",
     "edit-primary-identity-document": "Modifier le document d'identité principal",
     "edit-secondary-identity-document": "Modifier le document d'identité secondaire",
-    "edit-current-name": "Modifier le nom actuel"
+    "edit-current-name": "Modifier le nom actuel",
+    "edit-personal-details": "Modifier les détails personnels",
+    "edit-birth-details": "Modifier les détails de naissance"
   },
   "search-sin": {
     "page-title": "Search for a SIN",

diff --git a/frontend/app/routes/protected/person-case/birth-details.tsx b/frontend/app/routes/protected/person-case/birth-details.tsx
@@ -45,7 +45,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
   const birthDetails = context.session.inPersonSINCase?.birthDetails;
 
   return {
-    documentTitle: t('protected:primary-identity-document.page-title'),
+    documentTitle: t('protected:birth-details.page-title'),
     localizedCountries: countryService.getLocalizedCountries(lang),
     localizedProvincesTerritoriesStates: provinceService.getLocalizedProvinces(lang),
     PP_CANADA_COUNTRY_CODE,

diff --git a/frontend/app/routes/protected/person-case/review.tsx b/frontend/app/routes/protected/person-case/review.tsx
@@ -10,6 +10,8 @@ import { useTranslation } from 'react-i18next';
 import type { Info, Route } from './+types/review';
 
 import { applicantGenderService } from '~/.server/domain/person-case/services';
+import { serverEnvironment } from '~/.server/environment';
+import { countryService, provinceService } from '~/.server/shared/services';
 import { requireAuth } from '~/.server/utils/auth-utils';
 import { i18nRedirect } from '~/.server/utils/route-utils';
 import { Button } from '~/components/button';
@@ -34,6 +36,8 @@ export async function loader({ context, request }: Route.LoaderArgs) {
   const { t, lang } = await getTranslation(request, handle.i18nNamespace);
   const inPersonSINCase = validateInPersonSINCaseSession(context.session, tabId, request);
 
+  const { PP_CANADA_COUNTRY_CODE } = serverEnvironment;
+
   return {
     documentTitle: t('protected:review.page-title'),
     inPersonSINCase: {
@@ -42,6 +46,20 @@ export async function loader({ context, request }: Route.LoaderArgs) {
         ...inPersonSINCase.primaryDocuments,
         genderName: applicantGenderService.getLocalizedApplicantGenderById(inPersonSINCase.primaryDocuments.gender, lang).name,
       },
+      personalInformation: {
+        ...inPersonSINCase.personalInformation,
+        genderName: applicantGenderService.getLocalizedApplicantGenderById(inPersonSINCase.personalInformation.gender, lang)
+          .name,
+      },
+      birthDetails: {
+        ...inPersonSINCase.birthDetails,
+        countryName: countryService.getLocalizedCountryById(inPersonSINCase.birthDetails.country, lang).name,
+        provinceName: inPersonSINCase.birthDetails.province
+          ? inPersonSINCase.birthDetails.country !== PP_CANADA_COUNTRY_CODE
+            ? inPersonSINCase.birthDetails.province
+            : provinceService.getLocalizedProvinceById(inPersonSINCase.birthDetails.province, lang).name
+          : undefined,
+      },
     },
     tabId,
   };
@@ -189,6 +207,8 @@ export default function Review({ loaderData, actionData, params }: Route.Compone
         <fetcher.Form method="post" noValidate>
           <p className="mb-8 text-lg">{t('protected:review.read-carefully')}</p>
           <div className="space-y-10">
+            {/* Primary identity document */}
+
             <section className="space-y-6">
               <h2 className="font-lato text-2xl font-bold">{t('protected:primary-identity-document.page-title')}</h2>
               <DescriptionList className="divide-y border-y">
@@ -235,6 +255,9 @@ export default function Review({ loaderData, actionData, params }: Route.Compone
                 {t('protected:review.edit-primary-identity-document')}
               </InlineLink>
             </section>
+
+            {/* Secondary identity document */}
+
             <section className="space-y-6">
               <h2 className="font-lato text-2xl font-bold">{t('protected:secondary-identity-document.page-title')}</h2>
               <DescriptionList className="divide-y border-y">
@@ -256,6 +279,9 @@ export default function Review({ loaderData, actionData, params }: Route.Compone
                 {t('protected:review.edit-secondary-identity-document')}
               </InlineLink>
             </section>
+
+            {/* Preferred name */}
+
             <section className="space-y-6">
               <h2 className="font-lato text-2xl font-bold">{t('protected:review.sub-title-preferred-name')}</h2>
               <DescriptionList className="divide-y border-y">
@@ -299,8 +325,8 @@ export default function Review({ loaderData, actionData, params }: Route.Compone
                     <DescriptionListItem term={t('protected:current-name.supporting-docs.title')}>
                       {inPersonSINCase.currentNameInfo.supportingDocuments.documentTypes.length > 0 && (
                         <ul className="ml-6 list-disc">
-                          {inPersonSINCase.currentNameInfo.supportingDocuments.documentTypes.map((value, index) => (
-                            <li key={index}>{t(`protected:current-name.doc-types.${value}` as ResourceKey)}</li>
+                          {inPersonSINCase.currentNameInfo.supportingDocuments.documentTypes.map((value) => (
+                            <li key={value}>{t(`protected:current-name.doc-types.${value}` as ResourceKey)}</li>
                           ))}
                         </ul>
                       )}
@@ -311,6 +337,64 @@ export default function Review({ loaderData, actionData, params }: Route.Compone
                 {t('protected:review.edit-current-name')}
               </InlineLink>
             </section>
+
+            {/* Personal details */}
+
+            <section className="space-y-6">
+              <h2 className="font-lato text-2xl font-bold">{t('protected:personal-information.page-title')}</h2>
+              <DescriptionList className="divide-y border-y">
+                <DescriptionListItem term={t('protected:personal-information.first-name-previously-used.label')}>
+                  {inPersonSINCase.personalInformation.firstNamePreviouslyUsed &&
+                    inPersonSINCase.personalInformation.firstNamePreviouslyUsed.length > 0 && (
+                      <ul className="ml-6 list-disc">
+                        {inPersonSINCase.personalInformation.firstNamePreviouslyUsed.map(
+                          (value, index) => value.length > 0 && <li key={`${index}-${value}`}>{value}</li>,
+                        )}
+                      </ul>
+                    )}
+                </DescriptionListItem>
+                <DescriptionListItem term={t('protected:personal-information.last-name-at-birth.label')}>
+                  <p>{inPersonSINCase.personalInformation.lastNameAtBirth}</p>
+                </DescriptionListItem>
+                <DescriptionListItem term={t('protected:personal-information.last-name-previously-used.label')}>
+                  {inPersonSINCase.personalInformation.lastNamePreviouslyUsed &&
+                    inPersonSINCase.personalInformation.lastNamePreviouslyUsed.length > 0 && (
+                      <ul className="ml-6 list-disc">
+                        {inPersonSINCase.personalInformation.lastNamePreviouslyUsed.map(
+                          (value, index) => value.length > 0 && <li key={`${index}-${value}`}>{value}</li>,
+                        )}
+                      </ul>
+                    )}
+                </DescriptionListItem>
+                <DescriptionListItem term={t('protected:personal-information.gender.label')}>
+                  <p>{inPersonSINCase.personalInformation.gender}</p>
+                </DescriptionListItem>
+              </DescriptionList>
+              <InlineLink file="routes/protected/person-case/personal-info.tsx">
+                {t('protected:review.edit-personal-details')}
+              </InlineLink>
+            </section>
+
+            {/* Birth details */}
+
+            <section className="space-y-6">
+              <h2 className="font-lato text-2xl font-bold">{t('protected:birth-details.page-title')}</h2>
+              <DescriptionList className="divide-y border-y">
+                <DescriptionListItem term={t('protected:review.birth-place')}>
+                  <p className="flex space-x-1">
+                    <span>{inPersonSINCase.birthDetails.city}</span>
+                    <span>{inPersonSINCase.birthDetails.provinceName}</span>
+                    <span>{inPersonSINCase.birthDetails.countryName}</span>
+                  </p>
+                </DescriptionListItem>
+                <DescriptionListItem term={t('protected:review.multiple-birth')}>
+                  <p>{inPersonSINCase.birthDetails.fromMultipleBirth ? t('protected:review.yes') : t('protected:review.no')}</p>
+                </DescriptionListItem>
+              </DescriptionList>
+              <InlineLink file="routes/protected/person-case/birth-details.tsx">
+                {t('protected:review.edit-birth-details')}
+              </InlineLink>
+            </section>
           </div>
           <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}>