Skip to content

Commit

Permalink
move logic to its own component
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhamv-ss
shubhamv-ss committed Nov 27, 2024
1 parent 12d2393 commit 8471463
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 144 deletions.
91 changes: 66 additions & 25 deletions src/components/CompanyData/AddressForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,47 +18,90 @@
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/

import React from 'react';
import { Row } from 'react-bootstrap';
import { TextField, Autocomplete } from '@mui/material';
import { validateCity, validatePostalCode, validateStreetHouseNumber } from 'helpers/validation';
import { CountryType } from 'types/MainTypes';
import { useTranslation } from 'react-i18next';
import React, { useEffect } from 'react'
import { Row } from 'react-bootstrap'
import { TextField, Autocomplete } from '@mui/material'
import {
validateCity,
validatePostalCode,
validateStreetHouseNumber,
} from 'helpers/validation'
import { CountryType } from 'types/MainTypes'
import { useTranslation } from 'react-i18next'
import { Patterns } from 'types/Patterns'

interface AddressFormProps {
country: string
city: string
setCity: (city: string) => void
postalCode: string
setPostalCode: (postalCode: string) => void
region: string
setRegion: (region: string) => void
countryArr: CountryType[]
defaultSelectedCountry: CountryType | null
setErrors: (errors: any) => void
errors: any
validateRegion: (value: string) => void
validateCountry: (value: string) => void
setStreetHouseNumber: (value: string) => void
streetHouseNumber: string
changedCountryValue: boolean
setCity: (city: string) => void
setPostalCode: (postalCode: string) => void
setRegion: (region: string) => void
setErrors: (errors: any) => void
setStreetHouseNumber: (value: string) => void
setShowIdentifiers: (value: boolean) => void
setChangedCountryValue: (value: boolean) => void
setCountry: (value: string) => void
refetch: () => void
}

const AddressForm: React.FC<AddressFormProps> = ({
country,
city,
setCity,
postalCode,
setPostalCode,
region,
setRegion,
countryArr,
defaultSelectedCountry,
setErrors,
errors,
validateCountry,
validateRegion,
setStreetHouseNumber,
streetHouseNumber,
}) => {
changedCountryValue,
setCity,
setPostalCode,
setRegion,
setErrors,
setStreetHouseNumber,
setShowIdentifiers,
setChangedCountryValue,
setCountry,
refetch,
}) => {
const { t } = useTranslation()
const validateCountry = (value: string) => {
setChangedCountryValue(true)
setCountry(value?.toUpperCase())
if (!Patterns.countryPattern.test(value?.trim())) {
setShowIdentifiers(false)
setErrors((prevState) => ({ ...prevState, country: 'countryError' }))
} else {
setErrors((prevState) => ({ ...prevState, country: '' }))
}
}

const validateRegion = (value: string) => {
setRegion(value)
const isRequiredCountry = ['MX', 'CZ', 'US'].includes(country)
const isValidRegion = value && Patterns.regionPattern.test(value?.trim())
setErrors((prevState) => ({
...prevState,
region:
(!value && isRequiredCountry) || (!isValidRegion && value)
? 'regionError'
: '',
}))
}

useEffect(() => {
if (errors.country === '' && country && changedCountryValue) {
refetch()
validateRegion(region)
}
}, [country])

return (
<>
Expand All @@ -67,7 +110,6 @@ const AddressForm: React.FC<AddressFormProps> = ({
{t('registrationStepOne.organizationAdd')}
</span>
</Row>

<Row className="mx-auto col-9">
<div className={`form-data ${errors.streetHouseNumber && 'error'}`}>
<label>
Expand Down Expand Up @@ -95,7 +137,6 @@ const AddressForm: React.FC<AddressFormProps> = ({
)}
</div>
</Row>

<Row className="mx-auto col-9">
<div className={`col-4 form-data ${errors.postalCode && 'error'}`}>
<label> {t('registrationStepOne.postalCode')} </label>
Expand Down Expand Up @@ -182,6 +223,6 @@ const AddressForm: React.FC<AddressFormProps> = ({
</Row>
</>
)
};
}

export default AddressForm;
export default AddressForm
67 changes: 46 additions & 21 deletions src/components/CompanyData/CompanyDataForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,42 +17,67 @@
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/
import { Row } from 'react-bootstrap';
import { Row } from 'react-bootstrap'
import SearchInput from 'react-search-input'
import { AiOutlineQuestionCircle } from 'react-icons/ai'; // Assuming AiOutlineQuestionCircle is a separate component
import { useTranslation } from 'react-i18next';
import { AiOutlineQuestionCircle } from 'react-icons/ai'
import { useTranslation } from 'react-i18next'

interface Props {
bpn: string;
bpnErrorMsg: string | null;
legalEntity: string;
registeredName: string;
interface CompanyDataFormProps {
bpn: string
bpnErrorMsg: string | null
legalEntity: string
registeredName: string
errors: {
legalEntity: string | null;
registeredName: string | null;
};
onSearchChange: (expr: string) => void;
validateLegalEntity: (value: string, setLegalEntity: (value: string) => void, setErrors: (errors: any) => void) => void;
validateRegisteredName: (value: string, setRegisteredName: (value: string) => void, setErrors: (errors: any) => void) => void;
setLegalEntity: (value: string) => void;
setRegisteredName: (value: string) => void;
setErrors: (errors: any) => void;
legalEntity: string | null
registeredName: string | null
}
validateLegalEntity: (
value: string,
setLegalEntity: (value: string) => void,
setErrors: (errors: any) => void
) => void
validateRegisteredName: (
value: string,
setRegisteredName: (value: string) => void,
setErrors: (errors: any) => void
) => void
setLegalEntity: (value: string) => void
setRegisteredName: (value: string) => void
setErrors: (errors: any) => void
isBPN: (expr: string) => boolean
fetchData: (expr: string) => Promise<void>
setFields: (fields: any) => void
setBpnErrorMessage: (message: string) => void
}
const CompanyDataForm = ({
const CompanyDataForm: React.FC<CompanyDataFormProps> = ({
bpn,
bpnErrorMsg,
legalEntity,
registeredName,
errors,
onSearchChange,
validateLegalEntity,
validateRegisteredName,
setLegalEntity,
setRegisteredName,
setErrors,
isBPN,
fetchData,
setFields,
setBpnErrorMessage,
}) => {
const { t } = useTranslation()

const onSearchChange = (expr: string) => {
if (isBPN(expr?.trim())) {
fetchData(expr).catch((errorCode: number) => {
setFields(null)
console.log('errorCode', errorCode)
setBpnErrorMessage(t('registrationStepOne.bpnNotExistError'))
})
setBpnErrorMessage('')
} else {
setBpnErrorMessage(t('registrationStepOne.bpnInvalidError'))
}
}
return (
<>
<Row className="mx-auto col-9">
Expand Down Expand Up @@ -153,4 +178,4 @@ const CompanyDataForm = ({
)
}

export default CompanyDataForm
export default CompanyDataForm
58 changes: 44 additions & 14 deletions src/components/CompanyData/Identiifier.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,68 @@
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/
import React from 'react';
import React, { useEffect } from 'react';
import { Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { UniqueIdentifier } from 'state/features/application/applicationApiSlice';
import { Patterns } from 'types/Patterns';

interface IdentifierFormProps {
uniqueIds: { type: string; value: string }[];
handleIdentifierSelect: (type: string, value: string) => void;
showIdentifiers: boolean;
identifierType: string;
identifierNumber: string;
errors: { identifierNumber: string };
onIdentifierTypeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
validateIdentifierNumber: (value: string) => void;
setIdentifierNumber: (value: string) => void;
identifierDetails: UniqueIdentifier[];
uniqueIds: { type: string; value: string }[]
showIdentifiers: boolean
identifierType: string
identifierNumber: string
errors: { identifierNumber: string }
identifierDetails: UniqueIdentifier[]
country: string
onIdentifierTypeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void
setIdentifierNumber: (value: string) => void
setChangedCountryValue: (value: boolean) => void
setErrors: (errors: any) => void
handleIdentifierSelect: (type: string, value: string) => void
}

export const IdentifierForm: React.FC<IdentifierFormProps> = ({
uniqueIds,
handleIdentifierSelect,
showIdentifiers,
identifierType,
identifierNumber,
errors,
identifierDetails,
country,
onIdentifierTypeChange,
validateIdentifierNumber,
setIdentifierNumber,
identifierDetails,
setChangedCountryValue,
setErrors,
handleIdentifierSelect,
}) => {
const { t } = useTranslation();

const validateIdentifierNumber = (value) => {
setChangedCountryValue(false)
setIdentifierNumber(value)
const countryCode = ['DE', 'FR', 'IN', 'MX'].includes(country)
? country
: 'Worldwide'
if (
identifierType &&
!Patterns[countryCode][identifierType].test(value?.trim())
) {
setErrors((prevState) => ({
...prevState,
identifierNumber: `${countryCode}_${identifierType}`,
}))
} else {
setErrors((prevState) => ({ ...prevState, identifierNumber: '' }))
}
}

useEffect(() => {
identifierNumber &&
identifierType &&
validateIdentifierNumber(identifierNumber)
}, [identifierType, identifierNumber])

return (
<>
{uniqueIds && uniqueIds?.length > 1 ? (
Expand Down
Loading

0 comments on commit 8471463

Please sign in to comment.