From c26ae90c7fa065046615b52f6c770fc4a3de7f6e Mon Sep 17 00:00:00 2001
From: faiza-jahanzeb <95882212+faiza-jahanzeb@users.noreply.github.com>
Date: Wed, 26 Feb 2025 12:56:50 -0500
Subject: [PATCH] update gender field from PP in personal info screen (#282)

---
 .../protected/person-case/personal-info.tsx   | 21 ++++++++++---------
 .../protected/person-case/primary-docs.tsx    |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/app/routes/protected/person-case/personal-info.tsx b/frontend/app/routes/protected/person-case/personal-info.tsx
index d719aef3..60175597 100644
--- a/frontend/app/routes/protected/person-case/personal-info.tsx
+++ b/frontend/app/routes/protected/person-case/personal-info.tsx
@@ -11,6 +11,7 @@ import * as v from 'valibot';
 
 import type { Info, Route } from './+types/personal-info';
 
+import { getGenders, getLocalizedGenders } from '~/.server/services/locale-data-service';
 import { requireAuth } from '~/.server/utils/auth-utils';
 import { i18nRedirect } from '~/.server/utils/route-utils';
 import { Button } from '~/components/button';
@@ -27,15 +28,13 @@ import { REGEX_PATTERNS } from '~/utils/regex-utils';
 
 type PersonalInformationSessionData = NonNullable<SessionData['inPersonSINCase']['personalInformation']>;
 
-const VALID_GENDERS = ['female', 'male', 'other'];
-
 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);
+  const { t, lang } = await getTranslation(request, handle.i18nNamespace);
 
   return {
     documentTitle: t('protected:personal-information.page-title'),
@@ -45,6 +44,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
       lastNamePreviouslyUsed: context.session.inPersonSINCase?.personalInformation?.lastNamePreviouslyUsed ?? [],
       gender: context.session.inPersonSINCase?.personalInformation?.gender,
     },
+    localizedGenders: getLocalizedGenders(lang),
   };
 }
 
@@ -79,7 +79,10 @@ export async function action({ context, request }: Route.ActionArgs) {
           v.regex(REGEX_PATTERNS.NON_DIGIT, t('protected:personal-information.last-name-at-birth.format')),
         ),
         lastNamePreviouslyUsed: v.optional(v.array(v.string())),
-        gender: v.picklist(VALID_GENDERS, t('protected:personal-information.gender.required')),
+        gender: v.picklist(
+          getGenders().map(({ id }) => id),
+          t('protected:personal-information.gender.required'),
+        ),
       }) satisfies v.GenericSchema<PersonalInformationSessionData>;
 
       const input = {
@@ -119,12 +122,10 @@ export default function PersonalInformation({ loaderData, params }: Route.Compon
   const [lastNames, setLastNames] = useState(loaderData.defaultFormValues.lastNamePreviouslyUsed);
   const [srAnnouncement, setSrAnnouncement] = useState('');
 
-  const GENDER = ['female', 'male', 'other'] as const;
-
-  const genderOptions = GENDER.map((value) => ({
-    value: value,
-    children: t(`protected:personal-information.gender.options.${value}` as const),
-    defaultChecked: value === loaderData.defaultFormValues.gender,
+  const genderOptions = loaderData.localizedGenders.map(({ id, name }) => ({
+    value: id,
+    children: name,
+    defaultChecked: id === loaderData.defaultFormValues.gender,
   }));
 
   function handleAddFirstName() {
diff --git a/frontend/app/routes/protected/person-case/primary-docs.tsx b/frontend/app/routes/protected/person-case/primary-docs.tsx
index 2460f972..cd6e284f 100644
--- a/frontend/app/routes/protected/person-case/primary-docs.tsx
+++ b/frontend/app/routes/protected/person-case/primary-docs.tsx
@@ -479,7 +479,7 @@ function PrimaryDocsFields({
   const genderOptions = genders.map(({ id, name }) => ({
     value: id,
     children: name,
-    defaultChecked: name === defaultValues?.gender,
+    defaultChecked: id === defaultValues?.gender,
   }));
 
   return (