diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts index 1ef54e3fa911..d5390fb6bbb6 100644 --- a/libs/application/core/src/lib/fieldBuilders.ts +++ b/libs/application/core/src/lib/fieldBuilders.ts @@ -748,6 +748,12 @@ export const buildNationalIdWithNameField = ( nameDefaultValue, errorMessage, minAgePerson, + searchPersons, + searchCompanies, + titleVariant, + description, + marginTop, + marginBottom, } = data return { ...extractCommonFields(data), @@ -761,9 +767,15 @@ export const buildNationalIdWithNameField = ( nameDefaultValue, errorMessage, minAgePerson, + searchPersons, + searchCompanies, children: undefined, type: FieldTypes.NATIONAL_ID_WITH_NAME, component: FieldComponents.NATIONAL_ID_WITH_NAME, + titleVariant, + description, + marginTop, + marginBottom, } } diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts index 0ff0be0e3bfe..877dc89d4621 100644 --- a/libs/application/types/src/lib/Fields.ts +++ b/libs/application/types/src/lib/Fields.ts @@ -570,6 +570,11 @@ export interface NationalIdWithNameField extends InputField { nameDefaultValue?: string errorMessage?: string minAgePerson?: number + searchPersons?: boolean + searchCompanies?: boolean + titleVariant?: TitleVariants + marginTop?: ResponsiveProp + marginBottom?: ResponsiveProp } type Modify = Omit & R diff --git a/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx b/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx index d232bc7ef1fd..fb42f7b19422 100644 --- a/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx +++ b/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from 'react' -import { Box, GridRow, GridColumn } from '@island.is/island-ui/core' +import { GridRow, GridColumn } from '@island.is/island-ui/core' import { useLocale } from '@island.is/localization' import { coreErrorMessages, @@ -8,12 +8,16 @@ import { } from '@island.is/application/core' import { Application, StaticText } from '@island.is/application/types' import { gql, useLazyQuery } from '@apollo/client' -import { IdentityInput, Query } from '@island.is/api/schema' +import { + IdentityInput, + Query, + RskCompanyInfoInput, +} from '@island.is/api/schema' import { InputController } from '@island.is/shared/form-fields' import { useFormContext } from 'react-hook-form' import * as kennitala from 'kennitala' import debounce from 'lodash/debounce' -import { IDENTITY_QUERY } from './graphql/queries' +import { COMPANY_IDENTITY_QUERY, IDENTITY_QUERY } from './graphql/queries' interface NationalIdWithNameProps { id: string @@ -29,6 +33,8 @@ interface NationalIdWithNameProps { nameDefaultValue?: string errorMessage?: string minAgePerson?: number + searchPersons?: boolean + searchCompanies?: boolean } export const NationalIdWithName: FC< @@ -47,6 +53,8 @@ export const NationalIdWithName: FC< nameDefaultValue, errorMessage, minAgePerson, + searchPersons = true, + searchCompanies = false, }) => { const fieldId = customId.length > 0 ? customId : id const nameField = `${fieldId}.name` @@ -58,6 +66,8 @@ export const NationalIdWithName: FC< formState: { errors }, } = useFormContext() const [nationalIdInput, setNationalIdInput] = useState('') + const [personName, setPersonName] = useState('') + const [companyName, setCompanyName] = useState('') // get name validation errors const nameFieldErrors = errorMessage @@ -101,23 +111,73 @@ export const NationalIdWithName: FC< { onCompleted: (data) => { onNameChange && onNameChange(data.identity?.name ?? '') - setValue(nameField, data.identity?.name ?? undefined) + setPersonName(data.identity?.name ?? '') }, }, ) + // query to get company name by national id + const [ + getCompanyIdentity, + { + data: companyData, + loading: companyQueryLoading, + error: companyQueryError, + }, + ] = useLazyQuery( + gql` + ${COMPANY_IDENTITY_QUERY} + `, + { + onCompleted: (companyData) => { + onNameChange && + onNameChange(companyData.companyRegistryCompany?.name ?? '') + setCompanyName(companyData.companyRegistryCompany?.name ?? '') + }, + }, + ) + // fetch and update name when user has entered a valid national id useEffect(() => { if (nationalIdInput.length === 10 && kennitala.isValid(nationalIdInput)) { - getIdentity({ - variables: { - input: { - nationalId: nationalIdInput, - }, - }, - }) + { + searchPersons && + getIdentity({ + variables: { + input: { + nationalId: nationalIdInput, + }, + }, + }) + } + + { + searchCompanies && + getCompanyIdentity({ + variables: { + input: { + nationalId: nationalIdInput, + }, + }, + }) + } + } + }, [ + nationalIdInput, + getIdentity, + getCompanyIdentity, + searchPersons, + searchCompanies, + ]) + + useEffect(() => { + const nameInAnswers = getValueViaPath(application.answers, nameField) + if (personName && nameInAnswers !== personName) { + setValue(nameField, personName) + } else if (companyName && nameInAnswers !== companyName) { + setValue(nameField, companyName) } - }, [nationalIdInput, getIdentity]) + }, [personName, companyName, setValue, nameField, application.answers]) return ( @@ -138,7 +198,7 @@ export const NationalIdWithName: FC< onNationalIdChange && onNationalIdChange(v.target.value.replace(/\W/g, '')) })} - loading={queryLoading} + loading={searchPersons ? queryLoading : companyQueryLoading} error={nationalIdFieldErrors} disabled={disabled} /> @@ -154,12 +214,23 @@ export const NationalIdWithName: FC< } required={required} error={ - queryError || data?.identity === null - ? formatMessage( - coreErrorMessages.nationalRegistryNameNotFoundForNationalId, - ) - : nameFieldErrors && !data - ? nameFieldErrors + searchPersons + ? queryError || data?.identity === null + ? formatMessage( + coreErrorMessages.nationalRegistryNameNotFoundForNationalId, + ) + : nameFieldErrors && !data + ? nameFieldErrors + : undefined + : searchCompanies + ? companyQueryError || + companyData?.companyRegistryCompany === null + ? formatMessage( + coreErrorMessages.nationalRegistryNameNotFoundForNationalId, + ) + : nameFieldErrors && !companyData + ? nameFieldErrors + : undefined : undefined } disabled diff --git a/libs/application/ui-components/src/components/NationalIdWithName/graphql/queries.ts b/libs/application/ui-components/src/components/NationalIdWithName/graphql/queries.ts index faa1771139c6..38c8d782b2ad 100644 --- a/libs/application/ui-components/src/components/NationalIdWithName/graphql/queries.ts +++ b/libs/application/ui-components/src/components/NationalIdWithName/graphql/queries.ts @@ -6,3 +6,11 @@ export const IDENTITY_QUERY = ` } } ` + +export const COMPANY_IDENTITY_QUERY = ` + query CompanyIdentityQuery($input: RskCompanyInfoInput!) { + companyRegistryCompany(input: $input) { + name + } + } +` diff --git a/libs/application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx b/libs/application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx index 1caf9fd5be81..1eba53e088a2 100644 --- a/libs/application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx +++ b/libs/application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx @@ -1,10 +1,17 @@ -import { buildFieldRequired } from '@island.is/application/core' +import { FC } from 'react' +import { + buildFieldRequired, + formatTextWithLocale, +} from '@island.is/application/core' import { FieldBaseProps, NationalIdWithNameField, } from '@island.is/application/types' import { NationalIdWithName } from '@island.is/application/ui-components' -import { FC } from 'react' +import { Box, Text } from '@island.is/island-ui/core' +import { FieldDescription } from '@island.is/shared/form-fields' +import { Locale } from '@island.is/shared/types' +import { useLocale } from '@island.is/localization' interface Props extends FieldBaseProps { field: NationalIdWithNameField @@ -13,20 +20,46 @@ interface Props extends FieldBaseProps { export const NationalIdWithNameFormField: FC< React.PropsWithChildren > = ({ application, field }) => { + const { formatMessage, lang: locale } = useLocale() + return ( - + + {field.title && ( + + {formatTextWithLocale( + field.title, + application, + locale as Locale, + formatMessage, + )} + + )} + {field.description && ( + + )} + + ) }