feat(new-primary-school): Child info page

libs/application/core/src/lib/fieldBuilders.ts

@@ -298,6 +298,7 @@ export const buildTextField = (
     min,
     readOnly,
     rightAlign,
+    tooltip,
     onChange,
   } = data
   return {
@@ -315,6 +316,7 @@ export const buildTextField = (
     rightAlign,
     max,
     min,
+    tooltip,
     onChange,
     type: FieldTypes.TEXT,
     component: FieldComponents.TEXT,

libs/application/template-api-modules/src/lib/modules/templates/new-primary-school/new-primary-school.utils.ts

@@ -14,7 +14,6 @@ export const transformApplicationToNewPrimarySchoolDTO = (
   application: Application,
 ): FormDto => {
   const {
-    differentPlaceOfResidence,
     childInfo,
     parents,
     siblings,
@@ -95,13 +94,18 @@ export const transformApplicationToNewPrimarySchoolDTO = (
     user: {
       name: childInfo.name,
       nationalId: childInfo.nationalId,
-      preferredName: childInfo.preferredName,
-      pronouns: childInfo.pronouns,
+      ...(childInfo.usePronounAndPreferredName?.includes(YES)
+        ? {
+            preferredName: childInfo.preferredName,
+            pronouns: childInfo.pronouns,
+          }
+        : {}),
       domicile: {
         address: childInfo.address.streetAddress,
         postCode: childInfo.address.postalCode,
       },
-      ...(differentPlaceOfResidence === YES && childInfo.placeOfResidence
+      ...(childInfo.differentPlaceOfResidence === YES &&
+      childInfo.placeOfResidence
         ? {
             residence: {
               address: childInfo.placeOfResidence.streetAddress,

libs/application/templates/new-primary-school/src/fields/DynamicDisabledText/index.tsx

@@ -0,0 +1,63 @@
+import {
+  FieldBaseProps,
+  FieldComponents,
+  FieldTypes,
+  FormTextWithLocale,
+} from '@island.is/application/types'
+import { TextFormField } from '@island.is/application/ui-fields'
+import { useLocale } from '@island.is/localization'
+import { FC, useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { formatTextWithLocale } from '@island.is/application/core'
+import { Locale } from '@island.is/shared/types'
+
+interface DynamicDisabledTextProps {
+  field: {
+    props: {
+      value: FormTextWithLocale
+    }
+  }
+}
+
+const DynamicDisabledText: FC<
+  React.PropsWithChildren<FieldBaseProps & DynamicDisabledTextProps>
+> = ({ field, application }) => {
+  const { lang: locale, formatMessage } = useLocale()
+  const { setValue } = useFormContext()
+  const {
+    title,
+    id,
+    width,
+    props: { value },
+  } = field
+
+  const defaultValue = formatTextWithLocale(
+    value,
+    application,
+    locale as Locale,
+    formatMessage,
+  )
+
+  useEffect(() => {
+    setValue(id, defaultValue)
+  }, [id, defaultValue, setValue])
+
+  return (
+    <TextFormField
+      application={application}
+      showFieldName
+      field={{
+        id,
+        disabled: true,
+        defaultValue,
+        title,
+        width,
+        type: FieldTypes.TEXT,
+        component: FieldComponents.TEXT,
+        children: undefined,
+      }}
+    />
+  )
+}
+
+export default DynamicDisabledText

libs/application/templates/new-primary-school/src/fields/Review/review-groups/Child.tsx

@@ -15,6 +15,7 @@ import { OptionsType } from '../../../lib/constants'
 import { newPrimarySchoolMessages } from '../../../lib/messages'
 import {
   getApplicationAnswers,
+  getGenderMessage,
   getSelectedOptionLabel,
 } from '../../../lib/newPrimarySchoolUtils'
 import { ReviewGroupProps } from './props'
@@ -25,16 +26,16 @@ export const Child = ({
   goToScreen,
 }: ReviewGroupProps) => {
   const { formatMessage } = useLocale()
-  const { childInfo, differentPlaceOfResidence } = getApplicationAnswers(
-    application.answers,
-  )
+  const { childInfo } = getApplicationAnswers(application.answers)
 
   const {
     options: pronounOptions,
     loading,
     error,
   } = useFriggOptions(OptionsType.PRONOUN)
 
+  const genderMessage = getGenderMessage(application)
+
   return (
     <ReviewGroup
       isEditable={editable}
@@ -86,11 +87,15 @@ export const Child = ({
                 />
               </GridColumn>
             </GridRow>
-            {(childInfo.preferredName?.trim().length > 0 ||
-              childInfo.pronouns?.length > 0 ||
-              differentPlaceOfResidence === YES) && (
-              <GridRow rowGap={2}>
-                {childInfo.preferredName?.trim().length > 0 && (
+            <GridRow rowGap={2}>
+              <GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
+                <DataValue
+                  label={formatMessage(newPrimarySchoolMessages.shared.gender)}
+                  value={formatMessage(genderMessage)}
+                />
+              </GridColumn>
+              {childInfo.usePronounAndPreferredName?.includes(YES) &&
+                childInfo.preferredName?.trim().length > 0 && (
                   <GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
                     <DataValue
                       label={formatMessage(
@@ -101,8 +106,9 @@ export const Child = ({
                     />
                   </GridColumn>
                 )}
-                {childInfo.pronouns?.length > 0 && (
-                  <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
+              {childInfo.usePronounAndPreferredName?.includes(YES) &&
+                childInfo.pronouns?.length > 0 && (
+                  <GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
                     <DataValue
                       label={formatMessage(
                         newPrimarySchoolMessages.childrenNParents
@@ -121,19 +127,18 @@ export const Child = ({
                     />
                   </GridColumn>
                 )}
-                {differentPlaceOfResidence === YES && (
-                  <GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
-                    <DataValue
-                      label={formatMessage(
-                        newPrimarySchoolMessages.childrenNParents
-                          .childInfoPlaceOfResidence,
-                      )}
-                      value={`${childInfo.placeOfResidence?.streetAddress}, ${childInfo.placeOfResidence?.postalCode}`}
-                    />
-                  </GridColumn>
-                )}
-              </GridRow>
-            )}
+              {childInfo.differentPlaceOfResidence === YES && (
+                <GridColumn span={['12/12', '12/12', '12/12', '5/12']}>
+                  <DataValue
+                    label={formatMessage(
+                      newPrimarySchoolMessages.childrenNParents
+                        .childInfoPlaceOfResidence,
+                    )}
+                    value={`${childInfo.placeOfResidence?.streetAddress}, ${childInfo.placeOfResidence?.postalCode}`}
+                  />
+                </GridColumn>
+              )}
+            </GridRow>
           </>
         )}
       </Stack>

libs/application/templates/new-primary-school/src/fields/index.ts

@@ -1,4 +1,4 @@
 export { default as FriggOptionsAsyncSelectField } from './FriggOptionsAsyncSelectField'
-export { default as Grade } from './Grade'
+export { default as DynamicDisabledText } from './DynamicDisabledText'
 export { default as ContactsTableRepeater } from './ContactsTableRepeater'
 export { Review } from './Review'

libs/application/templates/new-primary-school/src/forms/NewPrimarySchoolForm/childrenNParentsSection/childInfoSubSection.ts

@@ -1,4 +1,5 @@
 import {
+  buildCheckboxField,
   buildCustomField,
   buildMultiField,
   buildRadioField,
@@ -11,6 +12,7 @@ import { newPrimarySchoolMessages } from '../../../lib/messages'
 import {
   getApplicationAnswers,
   getApplicationExternalData,
+  getGenderMessage,
 } from '../../../lib/newPrimarySchoolUtils'
 
 export const childInfoSubSection = buildSubSection({
@@ -67,10 +69,40 @@ export const childInfoSubSection = buildSubSection({
           defaultValue: (application: Application) =>
             getApplicationExternalData(application.externalData).applicantCity,
         }),
+        buildCustomField(
+          {
+            id: 'childInfo.gender',
+            component: 'DynamicDisabledText',
+            title: newPrimarySchoolMessages.shared.gender,
+          },
+          {
+            value: (application: Application) => getGenderMessage(application),
+          },
+        ),
+        buildCheckboxField({
+          id: 'childInfo.usePronounAndPreferredName',
+          title: '',
+          spacing: 0,
+          options: [
+            {
+              value: YES,
+              label:
+                newPrimarySchoolMessages.childrenNParents
+                  .usePronounAndPreferredName,
+            },
+          ],
+        }),
         buildTextField({
           id: 'childInfo.preferredName',
           title:
             newPrimarySchoolMessages.childrenNParents.childInfoPreferredName,
+          tooltip:
+            newPrimarySchoolMessages.childrenNParents.preferredNameTooltip,
+          condition: (answers) => {
+            const { childInfo } = getApplicationAnswers(answers)
+
+            return !!childInfo?.usePronounAndPreferredName?.includes(YES)
+          },
           defaultValue: (application: Application) =>
             getApplicationExternalData(application.externalData)
               .childInformation.preferredName ?? undefined,
@@ -79,6 +111,11 @@ export const childInfoSubSection = buildSubSection({
           {
             id: 'childInfo.pronouns',
             title: newPrimarySchoolMessages.childrenNParents.childInfoPronouns,
+            condition: (answers) => {
+              const { childInfo } = getApplicationAnswers(answers)
+
+              return !!childInfo?.usePronounAndPreferredName?.includes(YES)
+            },
             component: 'FriggOptionsAsyncSelectField',
             defaultValue: (application: Application) =>
               getApplicationExternalData(application.externalData)
@@ -96,6 +133,9 @@ export const childInfoSubSection = buildSubSection({
           id: 'childInfo.differentPlaceOfResidence',
           title:
             newPrimarySchoolMessages.childrenNParents.differentPlaceOfResidence,
+          description:
+            newPrimarySchoolMessages.childrenNParents
+              .differentPlaceOfResidenceDescription,
           width: 'half',
           required: true,
           space: 4,
@@ -117,9 +157,9 @@ export const childInfoSubSection = buildSubSection({
           width: 'half',
           required: true,
           condition: (answers) => {
-            const { differentPlaceOfResidence } = getApplicationAnswers(answers)
+            const { childInfo } = getApplicationAnswers(answers)
 
-            return differentPlaceOfResidence === YES
+            return childInfo?.differentPlaceOfResidence === YES
           },
         }),
         buildTextField({
@@ -129,9 +169,9 @@ export const childInfoSubSection = buildSubSection({
           format: '###',
           required: true,
           condition: (answers) => {
-            const { differentPlaceOfResidence } = getApplicationAnswers(answers)
+            const { childInfo } = getApplicationAnswers(answers)
 
-            return differentPlaceOfResidence === YES
+            return childInfo?.differentPlaceOfResidence === YES
           },
         }),
       ],