[AB#301335] Add Latin name fields for beneficiaries

pyproject.toml

@@ -113,6 +113,8 @@ dependencies = [
   "swapper>=1.3,<2",
   "tblib>=1.7,<4",
   "tomli>=2.0.1,<3",
+  "transliterate>=1.10.2",
+  "unidecode>=1.4",
   "update>=0.0.1,<1",
   "urllib3>=1.26.9,<3",
   "weasyprint>=68",

src/frontend/src/components/accountability/Feedback/HouseholdQuestionnaire/HouseholdQuestionnaire.tsx

@@ -11,6 +11,7 @@ import { LoadingComponent } from '@components/core/LoadingComponent';
 import { useQuery } from '@tanstack/react-query';
 import { HouseholdDetail } from '@restgenerated/models/HouseholdDetail';
 import { RestService } from '@restgenerated/services/RestService';
+import { displayNameWithLatin } from '@utils/utils';
 import { restQueryKey } from '@utils/queryKeys';
 
 interface HouseholdQuestionnaireProps {
@@ -90,7 +91,7 @@ function HouseholdQuestionnaire({
             <ContentLink
               href={`/${baseUrl}/population/individuals/${selectedHouseholdData.headOfHousehold?.id}`}
             >
-              {selectedHouseholdData.headOfHousehold?.fullName}
+              {displayNameWithLatin(selectedHouseholdData.headOfHousehold, 'fullName')}
             </ContentLink>
           ),
           size: 3,

src/frontend/src/components/accountability/Feedback/IndividualQuestionnnaire/IndividualQuestionnaire.tsx

@@ -7,7 +7,7 @@ import { ContentLink } from '@core/ContentLink';
 import { useProgramContext } from 'src/programContext';
 import { ReactElement } from 'react';
 import withErrorBoundary from '@components/core/withErrorBoundary';
-import { choicesToDict } from '@utils/utils';
+import { choicesToDict, displayNameWithLatin } from '@utils/utils';
 import { RestService } from '@restgenerated/index';
 import { restQueryKey } from '@utils/queryKeys';
 import { IndividualChoices } from '@restgenerated/models/IndividualChoices';
@@ -50,7 +50,7 @@ const IndividualQuestionnaire = ({
             <ContentLink
               href={`/${baseUrl}/population/individuals/${selectedIndividualData.id}`}
             >
-              {selectedIndividualData.fullName}
+              {displayNameWithLatin(selectedIndividualData, 'fullName')}
             </ContentLink>
           ),
           size: 3,

src/frontend/src/components/core/ContentLink.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { MiśTheme } from '../../theme';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 interface LinkProps {
   fullWidth?: boolean;
@@ -23,7 +23,7 @@ export function ContentLink({
   fullWidth = false,
 }: {
   href: string;
-  children: string | ReactElement;
+  children: ReactNode;
   download?: boolean;
   fullWidth?: boolean;
 }): ReactElement {

src/frontend/src/components/grievances/AddIndividualDataChange.tsx

@@ -9,6 +9,8 @@ import { FormikDateField } from '@shared/Formik/FormikDateField';
 import { FormikFileField } from '@shared/Formik/FormikFileField';
 import { FormikSelectField } from '@shared/Formik/FormikSelectField';
 import { FormikTextField } from '@shared/Formik/FormikTextField';
+import { FormikCheckboxField } from '@shared/Formik/FormikCheckboxField';
+import { LATIN_NAME_FIELDS } from './utils/latinNames';
 import { LoadingComponent } from '@core/LoadingComponent';
 import { Title } from '@core/Title';
 import { AgencyField } from './AgencyField';
@@ -188,7 +190,14 @@ function AddIndividualDataChange({
   const flexFields =
     combinedData.results.filter((item) => item.isFlexField) || [];
   const coreFields =
-    combinedData.results.filter((item) => !item.isFlexField) || [];
+    combinedData.results.filter(
+      (item) =>
+        !item.isFlexField &&
+        !(
+          values.transliterateLatinNames &&
+          LATIN_NAME_FIELDS.includes(item.name)
+        ),
+    ) || [];
   return (
     !isEditTicket && (
       <>
@@ -203,6 +212,14 @@ function AddIndividualDataChange({
           {coreFields.map((item) => (
             <AddIndividualDataChangeField key={item.name} field={item} />
           ))}
+          <Grid size={12}>
+            <Field
+              name="transliterateLatinNames"
+              label={t('Transliterate Latin names automatically')}
+              color="primary"
+              component={FormikCheckboxField}
+            />
+          </Grid>
           {flexFields.length > 0 && <Grid size={12}>{t('Flex Fields')}</Grid>}
           {flexFields.map((item) => (
             <AddIndividualDataChangeField

src/frontend/src/components/grievances/AddIndividualGrievanceDetails.tsx

@@ -103,6 +103,9 @@ function AddIndividualGrievanceDetails({
   delete individualData.identities;
   const flexFields = individualData?.flexFields;
   delete individualData?.flexFields;
+  // UX flag, not a field of the individual being added
+  const transliterateLatinNames = individualData?.transliterateLatinNames;
+  delete individualData?.transliterateLatinNames;
   const labels =
     Object.entries(individualData || {}).map(([key, value]) => {
       let textValue = value;
@@ -231,6 +234,13 @@ function AddIndividualGrievanceDetails({
           )}
         </Box>
       </Title>
+      {transliterateLatinNames ? (
+        <Box data-cy="transliterate-latin-names-info" sx={{ mb: 2 }}>
+          <Typography variant="body2">
+            {t('Latin names will be transliterated automatically')}
+          </Typography>
+        </Box>
+      ) : null}
       <Grid container spacing={6}>
         {allLabels}
       </Grid>

src/frontend/src/components/grievances/EditIndividualDataChange/EditIndividualDataChange.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Grid, Typography } from '@mui/material';
 import { AddCircleOutlined } from '@mui/icons-material';
 import { useLocation } from 'react-router-dom';
-import { FieldArray } from 'formik';
+import { Field, FieldArray } from 'formik';
 import { ReactElement, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -11,6 +11,8 @@ import { restQueryKey } from '@utils/queryKeys';
 import { useBaseUrl } from '@hooks/useBaseUrl';
 import { LoadingComponent } from '@core/LoadingComponent';
 import { Title } from '@core/Title';
+import { FormikCheckboxField } from '@shared/Formik/FormikCheckboxField';
+import { hasNameFieldRow } from '@components/grievances/utils/latinNames';
 import { EditIndividualDataChangeFieldRow } from './EditIndividualDataChangeFieldRow';
 import { ExistingDocumentFieldArray } from './ExistingDocumentFieldArray';
 import { ExistingIdentityFieldArray } from './ExistingIdentityFieldArray';
@@ -210,6 +212,16 @@ function EditIndividualDataChange({
                       {t('Add new field')}
                     </Button>
                   </Grid>
+                  {hasNameFieldRow(values.individualDataUpdateFields) && (
+                    <Grid size={12}>
+                      <Field
+                        name="transliterateLatinNames"
+                        label={t('Transliterate Latin names automatically')}
+                        color="primary"
+                        component={FormikCheckboxField}
+                      />
+                    </Grid>
+                  )}
                 </>
               )}
             />

src/frontend/src/components/grievances/EditIndividualDataChange/EditIndividualDataChangeFieldRow.tsx

@@ -8,6 +8,7 @@ import { FormikSelectField } from '@shared/Formik/FormikSelectField';
 import { EditIndividualDataChangeField } from './EditIndividualDataChangeField';
 import { CurrentValue } from './CurrentValue';
 import { IndividualDetail } from '@restgenerated/models/IndividualDetail';
+import { LATIN_NAME_FIELDS } from '../utils/latinNames';
 
 export interface EditIndividualDataChangeFieldRowProps {
   fields;
@@ -58,8 +59,12 @@ export const EditIndividualDataChangeFieldRow = ({
           choices={fields
             .filter(
               (item) =>
-                !notAvailableFields.includes(item.name) ||
-                item.name === itemValue?.fieldName,
+                item.name === itemValue?.fieldName ||
+                (!notAvailableFields.includes(item.name) &&
+                  !(
+                    values.transliterateLatinNames &&
+                    LATIN_NAME_FIELDS.includes(item.name)
+                  )),
             )
             .map((item) => ({
               value: item.name,

src/frontend/src/components/grievances/EditPeopleDataChange/EditPeopleDataChange.tsx

@@ -8,11 +8,13 @@ import { IndividualList } from '@restgenerated/models/IndividualList';
 import { RestService } from '@restgenerated/services/RestService';
 import { restQueryKey } from '@utils/queryKeys';
 import { useQuery } from '@tanstack/react-query';
-import { FieldArray } from 'formik';
+import { Field, FieldArray } from 'formik';
 import { ReactElement, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import { FormikCheckboxField } from '@shared/Formik/FormikCheckboxField';
+import { hasNameFieldRow } from '@components/grievances/utils/latinNames';
 import { EditPeopleDataChangeFieldRow } from './EditPeopleDataChangeFieldRow';
 import { ExistingDocumentFieldArray } from '@components/grievances/EditIndividualDataChange/ExistingDocumentFieldArray';
 import { NewDocumentFieldArray } from '@components/grievances/EditIndividualDataChange/NewDocumentFieldArray';
@@ -194,6 +196,16 @@ function EditPeopleDataChange({
                     {t('Add new field')}
                   </Button>
                 </Grid>
+                {hasNameFieldRow(values.individualDataUpdateFields) && (
+                  <Grid size={12}>
+                    <Field
+                      name="transliterateLatinNames"
+                      label={t('Transliterate Latin names automatically')}
+                      color="primary"
+                      component={FormikCheckboxField}
+                    />
+                  </Grid>
+                )}
               </>
             )}
           />

src/frontend/src/components/grievances/EditPeopleDataChange/EditPeopleDataChangeFieldRow.tsx

@@ -8,6 +8,7 @@ import { FormikSelectField } from '@shared/Formik/FormikSelectField';
 import { EditPeopleDataChangeField } from './EditPeopleDataChangeField';
 import { CurrentValue } from './CurrentValue';
 import { IndividualDetail } from '@restgenerated/models/IndividualDetail';
+import { LATIN_NAME_FIELDS } from '../utils/latinNames';
 
 export interface EditPeopleDataChangeFieldRowProps {
   fields: any[];
@@ -58,8 +59,12 @@ export const EditPeopleDataChangeFieldRow = ({
           choices={fields
             .filter(
               (item) =>
-                !notAvailableFields.includes(item.name) ||
-                item.name === itemValue?.fieldName,
+                item.name === itemValue?.fieldName ||
+                (!notAvailableFields.includes(item.name) &&
+                  !(
+                    values.transliterateLatinNames &&
+                    LATIN_NAME_FIELDS.includes(item.name)
+                  )),
             )
             .map((item) => ({
               value: item.name,

src/frontend/src/components/grievances/FlagDetails.tsx

@@ -8,6 +8,7 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
+import { displayNameWithLatin } from '@utils/utils';
 import styled from 'styled-components';
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
@@ -136,7 +137,7 @@ export const FlagDetails = ({
             </TableCell>
             <TableCell align="left">-</TableCell>
             <TableCell align="left">
-              {details.goldenRecordsIndividual.fullName}
+              {displayNameWithLatin(details.goldenRecordsIndividual, 'fullName')}
             </TableCell>
             <TableCell align="left">
               <UniversalMoment>

src/frontend/src/components/grievances/HouseholdQuestionnaire/HouseholdQuestionnaire.tsx

@@ -11,6 +11,7 @@ import withErrorBoundary from '@components/core/withErrorBoundary';
 import { HouseholdDetail } from '@restgenerated/models/HouseholdDetail';
 import { useQuery } from '@tanstack/react-query';
 import { RestService } from '@restgenerated/services/RestService';
+import { displayNameWithLatin } from '@utils/utils';
 import { restQueryKey } from '@utils/queryKeys';
 
 interface HouseholdQuestionnaireProps {
@@ -93,7 +94,7 @@ function HouseholdQuestionnaire({
             <ContentLink
               href={`/${baseUrl}/population/individuals/${selectedHouseholdData.headOfHousehold.id}`}
             >
-              {selectedHouseholdData.headOfHousehold.fullName}
+              {displayNameWithLatin(selectedHouseholdData.headOfHousehold, 'fullName')}
             </ContentLink>
           ) : (
             '-'

src/frontend/src/components/grievances/IndividualQuestionnnaire/IndividualQuestionnaire.tsx

@@ -11,7 +11,7 @@ import { RestService } from '@restgenerated/index';
 import { restQueryKey } from '@utils/queryKeys';
 import { IndividualChoices } from '@restgenerated/models/IndividualChoices';
 import { useQuery } from '@tanstack/react-query';
-import { choicesToDict } from '@utils/utils';
+import { choicesToDict, displayNameWithLatin } from '@utils/utils';
 
 interface IndividualQuestionnaireProps {
   values;
@@ -49,7 +49,7 @@ const IndividualQuestionnaire = ({
             <ContentLink
               href={`/${baseUrl}/population/individuals/${selectedIndividualData.id}`}
             >
-              {selectedIndividualData.fullName}
+              {displayNameWithLatin(selectedIndividualData, 'fullName')}
             </ContentLink>
           ),
           size: 3,
@@ -123,7 +123,7 @@ const IndividualQuestionnaire = ({
             <ContentLink
               href={`/${baseUrl}/population/individuals/${selectedIndividualData.id}`}
             >
-              {selectedIndividualData.fullName}
+              {displayNameWithLatin(selectedIndividualData, 'fullName')}
             </ContentLink>
           ),
           size: 3,

src/frontend/src/components/grievances/LookUps/LookUpDelegate/LookUpDelegateDisplay.tsx

@@ -3,6 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import { useTranslation } from 'react-i18next';
 import { BlueText, DarkGrey, LightGrey, StyledBox } from '../LookUpStyles';
+import { displayNameWithLatin } from '@utils/utils';
 import { ReactElement } from 'react';
 
 interface LookUpDelegateDisplayProps {
@@ -37,7 +38,7 @@ export const LookUpDelegateDisplay = ({
             {t('Delegate')}:
             <BlueText data-cy="delegate-individual">
               {values.selectedDelegate?.unicefId ||
-                values.selectedDelegate?.fullName ||
+                displayNameWithLatin(values.selectedDelegate, 'fullName') ||
                 '-'}
             </BlueText>
           </Box>

src/frontend/src/components/grievances/LookUps/LookUpIndividualTable/LookUpIndividualTableRow.tsx

@@ -5,7 +5,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import { Radio } from '@mui/material';
 import TableCell from '@mui/material/TableCell';
 import { IndividualList } from '@restgenerated/models/IndividualList';
-import { sexToCapitalize } from '@utils/utils';
+import { displayNameWithLatin, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useProgramContext } from 'src/programContext';
 
@@ -54,7 +54,7 @@ export function LookUpIndividualTableRow({
           <span>{individual.unicefId || '-'}</span>
         )}
       </TableCell>
-      <TableCell align="left">{individual.fullName}</TableCell>
+      <TableCell align="left">{displayNameWithLatin(individual, 'fullName')}</TableCell>
       {!isSocialDctType && (
         <TableCell align="left">
           {individual.household ? individual.household.unicefId : '-'}

src/frontend/src/components/grievances/NeedsAdjudication/NeedsAdjudicationTable.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
 import { BlackLink } from '@core/BlackLink';
+import { displayNameWithLatin } from '@utils/utils';
 import { UniversalMoment } from '@core/UniversalMoment';
 import PeopleIcon from '@mui/icons-material/People';
 import PersonIcon from '@mui/icons-material/Person';
@@ -157,7 +158,7 @@ export const NeedsAdjudicationTable = ({
         </TableCell>
       )}
       <TableCell align="left" data-cy="full-name-cell">
-        {possibleDuplicate?.fullName}
+        {displayNameWithLatin(possibleDuplicate, 'fullName')}
       </TableCell>
       <TableCell align="left" data-cy="sex-cell">
         {possibleDuplicate?.sex}

src/frontend/src/components/grievances/RequestedIndividualDataChange.tsx

@@ -71,6 +71,9 @@ export function RequestedIndividualDataChange({
   delete individualData.accounts;
   delete individualData.accounts_to_edit;
 
+  // UX flag, not an approvable field change
+  delete individualData.transliterateLatinNames;
+
   const entries = Object.entries(individualData);
   const entriesFlexFields = Object.entries(flexFields);
   allApprovedCount += documents.filter((el) => el.approveStatus).length;

src/frontend/src/components/grievances/RequestedIndividualDataChangeTable/RequestedIndividualDataChangeTable.tsx

@@ -1,4 +1,6 @@
 import { ReactElement } from 'react';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import { useArrayToDict } from '@hooks/useArrayToDict';
 import { LoadingComponent } from '@core/LoadingComponent';
 import { DocumentsTable } from './DocumentsTable';
@@ -29,6 +31,7 @@ export function RequestedIndividualDataChangeTable({
   values,
   isEdit,
 }: RequestedIndividualDataChangeTableProps): ReactElement {
+  const { t } = useTranslation();
   const { businessAreaSlug } = useBaseUrl();
 
   const { data: addIndividualFieldsData, isLoading: loading } = useQuery({
@@ -94,6 +97,7 @@ export function RequestedIndividualDataChangeTable({
     accounts,
     accountsToEdit,
     flexFields,
+    transliterateLatinNames,
     ...restIndividualData
   } = individualData;
   const entries = restIndividualData && Object.entries(restIndividualData);
@@ -133,6 +137,13 @@ export function RequestedIndividualDataChangeTable({
 
   return (
     <div>
+      {transliterateLatinNames?.value ? (
+        <Box data-cy="transliterate-latin-names-info" sx={{ p: 2 }}>
+          <Typography variant="body2">
+            {t('Latin names will be transliterated automatically')}
+          </Typography>
+        </Box>
+      ) : null}
       {entries?.length || entriesFlexFields?.length ? (
         <EntriesTable
           values={values}