fix: add check for childname when populating field value (#6715)

* fix: add check for childname when populating field value

* fix: update child field details with <21yo condition

* fix: remove empty childname from dropdown selection

* fix: import types from correct filepath

frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx

@@ -22,11 +22,7 @@ import {
 } from '@chakra-ui/react'
 import simplur from 'simplur'
 
-import {
-  ChildrenCompoundFieldInputs,
-  ChildrenCompoundFieldSchema,
-  DATE_DISPLAY_FORMAT,
-} from '~shared/constants/dates'
+import { DATE_DISPLAY_FORMAT } from '~shared/constants/dates'
 import { MYINFO_ATTRIBUTE_MAP } from '~shared/constants/field/myinfo'
 import {
   FormColorTheme,
@@ -45,6 +41,10 @@ import { FormLabel } from '~components/FormControl/FormLabel/FormLabel'
 import { IconButton } from '~components/IconButton/IconButton'
 
 import { BaseFieldProps, FieldContainer } from '../FieldContainer'
+import {
+  ChildrenCompoundFieldInputs,
+  ChildrenCompoundFieldSchema,
+} from '../types'
 
 export interface ChildrenCompoundFieldProps extends BaseFieldProps {
   schema: ChildrenCompoundFieldSchema
@@ -246,6 +246,14 @@ const ChildrenBody = ({
     return allChildren.filter((name) => !temp.has(name))
   }, [myInfoChildrenBirthRecords, allChildren, allSelectedNames])
 
+  const childNameValues = useMemo(() => {
+    return [childName, ...namesNotSelected()].filter((name) => {
+      if (name === '' || name === undefined) {
+        return false
+      } else return true
+    })
+  }, [childName, namesNotSelected])
+
   const indexOfChild: number = useMemo(() => {
     return (
       myInfoChildrenBirthRecords?.[MyInfoChildAttributes.ChildName]?.indexOf(
@@ -263,6 +271,16 @@ const ChildrenBody = ({
       if (indexOfChild === undefined || indexOfChild < 0) {
         return ''
       }
+
+      // We use the childname to check if the parent has a child above 21.
+      // If the childname is an empty string, it represents a child above 21.
+      // As our definition of child in FormSG means child below 21, we want to
+      // return empty strings for other child attributes even if their value is populated by myinfo
+      // if there is no childname.
+      if (myInfoChildrenBirthRecords.childname?.[indexOfChild] === '') {
+        return ''
+      }
+
       const result = myInfoChildrenBirthRecords?.[attr]?.[indexOfChild]
       // Unknown basically means no result
       if (
@@ -292,7 +310,7 @@ const ChildrenBody = ({
               {...selectRest}
               placeholder={"Select your child's name"}
               colorScheme={`theme-${colorTheme}`}
-              items={[childName, ...namesNotSelected()].filter((e) => e !== '')}
+              items={childNameValues}
               value={childName}
               isDisabled={isSubmitting}
               onChange={(name) => {

shared/constants/field/myinfo/index.ts

@@ -313,7 +313,7 @@ export const types: MyInfoFieldBlock[] = [
     verified: ['SG', 'PR', 'F'],
     source: 'Immigration & Checkpoints Authority / Health Promotion Board',
     description:
-      "The data of the form-filler's children. Vaccination status is verified by HPB. All other data in this field is verified by ICA.",
+      'The data of the form-filler’s children. Only data of children below 21 years old will be available. Vaccination status is verified by HPB. All other data is verified by ICA.',
     fieldType: BasicField.Children,
     previewValue: 'Child 1',
   },