feat(rental-agreement): NationalIdWithName in repeatableTableField

libs/application/templates/rental-agreement/src/fields/Summary/ApplicantsRepresentativesSummary.tsx

@@ -17,15 +17,15 @@ type Props = {
 export const ApplicantsRepresentativesSummary = ({ answers }: Props) => {
   const { formatMessage } = useLocale()
 
-  const landlordListHasRepresentatives = answers.landlordInfo.table.some(
+  const landlordListHasRepresentatives = answers.landlordInfo.table?.some(
     (landlord) =>
       landlord.isRepresentative && landlord.isRepresentative.length > 0,
   )
   const tenantListHasRepresentatives = answers.tenantInfo.table.some(
     (tenant) => tenant.isRepresentative && tenant.isRepresentative.length > 0,
   )
 
-  const landlordRepresentatives = answers.landlordInfo.table.filter(
+  const landlordRepresentatives = answers.landlordInfo.table?.filter(
     (landlordRep) =>
       landlordRep.isRepresentative && landlordRep.isRepresentative.length > 0,
   )
@@ -41,19 +41,19 @@ export const ApplicantsRepresentativesSummary = ({ answers }: Props) => {
           <SummarySection
             sectionLabel={formatMessage(summary.landlordsRepresentativeLabel)}
           >
-            {landlordRepresentatives.map((landlordRep) => {
+            {landlordRepresentatives?.map((landlordRep) => {
               return (
-                <Fragment key={landlordRep.nationalIdWithName?.nationalId}>
+                <Fragment key={landlordRep.nationalIdWithName.nationalId}>
                   <GridRow className={gridRow}>
                     <GridColumn span={['12/12']}>
                       <KeyValue
                         labelVariant="h5"
                         labelAs="p"
-                        label={landlordRep.nationalIdWithName?.name as string}
+                        label={landlordRep.nationalIdWithName.name as string}
                         value={`${formatMessage(
                           summary.nationalIdLabel,
                         )}${formatNationalId(
-                          landlordRep.nationalIdWithName?.nationalId || '-',
+                          landlordRep.nationalIdWithName.nationalId || '-',
                         )}`}
                         gap={'smallGutter'}
                       />
@@ -85,17 +85,17 @@ export const ApplicantsRepresentativesSummary = ({ answers }: Props) => {
           >
             {tenantRepresentatives.map((tenantRep) => {
               return (
-                <Fragment key={tenantRep.nationalIdWithName?.nationalId}>
+                <Fragment key={tenantRep.nationalIdWithName.nationalId}>
                   <GridRow className={gridRow}>
                     <GridColumn span={['12/12']}>
                       <KeyValue
                         labelVariant="h5"
                         labelAs="p"
-                        label={tenantRep.nationalIdWithName?.name as string}
+                        label={tenantRep.nationalIdWithName.name as string}
                         value={`${formatMessage(
                           summary.nationalIdLabel,
                         )}${formatNationalId(
-                          tenantRep.nationalIdWithName?.nationalId || '-',
+                          tenantRep.nationalIdWithName.nationalId || '-',
                         )}`}
                         gap={'smallGutter'}
                       />

libs/application/templates/rental-agreement/src/fields/Summary/ApplicantsSummary.tsx

@@ -1,10 +1,9 @@
 import { Fragment } from 'react'
 import { GridColumn, GridRow } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
-import { formatPhoneNumber } from '@island.is/application/ui-components'
 import { RentalAgreement } from '../../lib/dataSchema'
 import { summary } from '../../lib/messages'
-import { formatNationalId } from '../../lib/utils'
+import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
 import { KeyValue } from './KeyValue'
 import { SummarySection } from './SummarySection'
 import { Divider } from './Divider'
@@ -17,7 +16,7 @@ type Props = {
 export const ApplicantsSummary = ({ answers }: Props) => {
   const { formatMessage } = useLocale()
 
-  const landlordListWithoutRepresentatives = answers.landlordInfo.table.filter(
+  const landlordListWithoutRepresentatives = answers.landlordInfo.table?.filter(
     (landlord) =>
       !landlord.isRepresentative || landlord.isRepresentative.length === 0,
   )
@@ -31,24 +30,25 @@ export const ApplicantsSummary = ({ answers }: Props) => {
     <>
       <SummarySection
         sectionLabel={
+          landlordListWithoutRepresentatives &&
           landlordListWithoutRepresentatives.length > 1
             ? formatMessage(summary.landlordsHeaderPlural)
             : formatMessage(summary.landlordsHeader)
         }
       >
-        {landlordListWithoutRepresentatives.map((landlord) => {
+        {landlordListWithoutRepresentatives?.map((landlord) => {
           return (
-            <Fragment key={landlord.nationalIdWithName?.nationalId}>
+            <Fragment key={landlord.nationalIdWithName.nationalId}>
               <GridRow className={gridRow}>
                 <GridColumn span={['12/12']}>
                   <KeyValue
                     labelVariant="h5"
                     labelAs="p"
-                    label={landlord.nationalIdWithName?.name as string}
+                    label={landlord.nationalIdWithName.name as string}
                     value={`${formatMessage(
                       summary.nationalIdLabel,
                     )}${formatNationalId(
-                      landlord.nationalIdWithName?.nationalId || '-',
+                      landlord.nationalIdWithName.nationalId || '-',
                     )}`}
                     gap={'smallGutter'}
                   />
@@ -81,17 +81,17 @@ export const ApplicantsSummary = ({ answers }: Props) => {
       >
         {tenantListWithoutRepresentatives.map((tenant) => {
           return (
-            <Fragment key={tenant.nationalIdWithName?.nationalId}>
+            <Fragment key={tenant.nationalIdWithName.nationalId}>
               <GridRow className={gridRow}>
                 <GridColumn span={['12/12']}>
                   <KeyValue
                     labelVariant="h5"
                     labelAs="p"
-                    label={tenant.nationalIdWithName?.name as string}
+                    label={tenant.nationalIdWithName.name as string}
                     value={`${formatMessage(
                       summary.nationalIdLabel,
                     )}${formatNationalId(
-                      tenant.nationalIdWithName?.nationalId || '-',
+                      tenant.nationalIdWithName.nationalId || '-',
                     )}`}
                     gap={'smallGutter'}
                   />

libs/application/templates/rental-agreement/src/forms/rentalHousingInfo/rentalHousingLandlordInfo.ts

@@ -2,10 +2,9 @@ import {
   buildSubSection,
   buildMultiField,
   buildTableRepeaterField,
-  YES,
 } from '@island.is/application/core'
-import { formatPhoneNumber } from '@island.is/application/ui-components'
-import { formatNationalId } from '../../lib/utils'
+import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
+import { IS_REPRESENTATIVE } from '../../lib/constants'
 import { landlordDetails } from '../../lib/messages'
 
 export const RentalHousingLandlordInfo = buildSubSection({
@@ -24,37 +23,46 @@ export const RentalHousingLandlordInfo = buildSubSection({
           marginTop: 1,
           maxRows: 10,
           fields: {
-            NationalIdWithName: {
+            nationalIdWithName: {
               component: 'nationalIdWithName',
+              required: true,
             },
             phone: {
               component: 'phone',
+              required: true,
               label: landlordDetails.phoneInputLabel,
               enableCountrySelector: true,
               width: 'half',
             },
             email: {
               component: 'input',
+              required: true,
               label: landlordDetails.emailInputLabel,
               type: 'email',
               width: 'half',
             },
+            address: {
+              component: 'input',
+              required: true,
+              label: landlordDetails.addressInputLabel,
+              maxLength: 100,
+            },
             isRepresentative: {
               component: 'checkbox',
-              label: landlordDetails.representativeLabel,
               large: true,
               options: [
                 {
                   label: landlordDetails.representativeLabel,
-                  value: YES,
+                  value: IS_REPRESENTATIVE,
                 },
               ],
             },
           },
           table: {
             format: {
-              formatPhoneNumber: (value: string) => formatPhoneNumber(value),
-              nationalId: (value: string) => formatNationalId(value),
+              name: (value) => value,
+              phone: (value) => value && formatPhoneNumber(value),
+              nationalId: (value) => value && formatNationalId(value),
             },
             header: [
               landlordDetails.nameInputLabel,

libs/application/templates/rental-agreement/src/forms/rentalHousingInfo/rentalHousingTenantInfo.ts

@@ -2,10 +2,9 @@ import {
   buildSubSection,
   buildMultiField,
   buildTableRepeaterField,
-  YES,
 } from '@island.is/application/core'
-import { formatPhoneNumber } from '@island.is/application/ui-components'
-import { formatNationalId } from '../../lib/utils'
+import { formatNationalId, formatPhoneNumber } from '../../lib/utils'
+import { IS_REPRESENTATIVE } from '../../lib/constants'
 import { tenantDetails } from '../../lib/messages'
 
 export const RentalHousingTenantInfo = buildSubSection({
@@ -23,37 +22,47 @@ export const RentalHousingTenantInfo = buildSubSection({
           editField: true,
           marginTop: 1,
           fields: {
-            NationalIdWithName: {
+            nationalIdWithName: {
               component: 'nationalIdWithName',
+              required: true,
             },
             phone: {
               component: 'phone',
+              required: true,
               label: tenantDetails.phoneInputLabel,
               enableCountrySelector: true,
               width: 'half',
             },
             email: {
               component: 'input',
+              required: true,
               label: tenantDetails.emailInputLabel,
               type: 'email',
               width: 'half',
             },
+            address: {
+              component: 'input',
+              required: true,
+              label: tenantDetails.addressInputLabel,
+              maxLength: 100,
+            },
             isRepresentative: {
               component: 'checkbox',
               label: tenantDetails.representativeLabel,
               large: true,
               options: [
                 {
                   label: tenantDetails.representativeLabel,
-                  value: YES,
+                  value: IS_REPRESENTATIVE,
                 },
               ],
             },
           },
           table: {
             format: {
-              formatPhoneNumber: (value: string) => formatPhoneNumber(value),
-              nationalId: (value: string) => formatNationalId(value),
+              name: (value) => value,
+              phone: (value) => value && formatPhoneNumber(value),
+              nationalId: (value) => value && formatNationalId(value),
             },
             header: [
               tenantDetails.nameInputLabel,

libs/application/templates/rental-agreement/src/lib/constants.ts

@@ -15,6 +15,8 @@ export enum Roles {
   APPLICANT = 'applicant',
 }
 
+export const IS_REPRESENTATIVE = 'isRepresentative'
+
 export enum AnswerOptions {
   YES = 'yes',
   NO = 'no',