From 49d8aa1dd981b78cf91662c785a6c5891e16bb34 Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Tue, 26 Nov 2024 15:49:50 +0530 Subject: [PATCH 1/7] fix: optimize, refactor the cax-campanydata.tsx --- CHANGELOG.md | 1 + src/components/cax-companyData.tsx | 248 +++++++++-------------------- src/helpers/constants.ts | 30 ++++ src/helpers/validation.ts | 100 ++++++++++++ src/locales/en/translations.json | 2 +- src/types/MainTypes.ts | 5 + 6 files changed, 212 insertions(+), 174 deletions(-) create mode 100644 src/helpers/constants.ts create mode 100644 src/helpers/validation.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 109db03a..cfeb1743 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Bugfix +- refactor, optimise and reorganise the code in cax-companyData.tsx file - created a new component for form header to avoid duplication of code in each step [#310](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/310) ## 2.1.0 diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx index 60b7be8b..344e75cf 100644 --- a/src/components/cax-companyData.tsx +++ b/src/components/cax-companyData.tsx @@ -26,7 +26,7 @@ import { useTranslation } from 'react-i18next' import { useEffect, useState } from 'react' import { FooterButton } from './footerButton' import { useDispatch, useSelector } from 'react-redux' -import { isBPN, isCity, isStreet, Patterns } from '../types/Patterns' +import { isBPN, Patterns } from '../types/Patterns' import { useFetchApplicationsQuery, useFetchCompanyDetailsWithAddressQuery, @@ -44,22 +44,9 @@ import { Autocomplete, TextField } from '@mui/material' import i18n from '../services/I18nService' import { Notify } from './Snackbar' import StepHeader from './StepHeader' - -type CountryType = { - id: string - label: string -} - -const initialErrors = { - legalEntity: '', - registeredName: '', - streetHouseNumber: '', - region: '', - postalCode: '', - city: '', - country: '', - identifierNumber: '', -} +import { validateCity, validateLegalEntity, validatePostalCode, validateRegisteredName, validateStreetHouseNumber } from 'helpers/validation' +import { CountryType } from 'types/MainTypes' +import { initialErrors } from 'helpers/constants' export const CompanyDataCax = () => { const { t } = useTranslation() @@ -136,14 +123,8 @@ export const CompanyDataCax = () => { }, [countryList, i18n.language]) useEffect(() => { - if (country) { - const countryCodeValue = countryArr?.find((code) => code.id === country) - if (countryCodeValue) { - setDefaultSelectedCountry(countryCodeValue) - } - } else { - setDefaultSelectedCountry(null) - } + const selectedCountry = countryArr?.find((code) => code.id === country) + setDefaultSelectedCountry(country ? selectedCountry : null) }, [country, countryArr]) useEffect(() => { @@ -170,18 +151,29 @@ export const CompanyDataCax = () => { setFields(companyDetails); }, [companyDetails]) - const setFields = (bpnDetails: any) =>{ - setBpn(bpnDetails?.bpn ?? '') - setLegalEntity(bpnDetails?.name ?? '') - setRegisteredName(bpnDetails?.name ?? '') - setStreetHouseNumber(bpnDetails?.streetName ?? '') - setRegion(bpnDetails?.region ?? '') - setPostalCode(bpnDetails?.zipCode ?? '') - setCity(bpnDetails?.city ?? '') - setCountry(bpnDetails?.countryAlpha2Code ?? '') - setUniqueIds(bpnDetails?.uniqueIds ?? '') - setIdentifierNumber(bpnDetails?.uniqueIds?.[0]?.value ?? '') - setIdentifierType(bpnDetails?.uniqueIds?.[0]?.type ?? '') + const setFields = (bpnDetails: any) => { + const { + bpn, + name, + streetName, + region, + zipCode, + city, + countryAlpha2Code, + uniqueIds, + } = bpnDetails ?? {} + + setBpn(bpn ?? '') + setLegalEntity(name ?? '') + setRegisteredName(name ?? '') + setStreetHouseNumber(streetName ?? '') + setRegion(region ?? '') + setPostalCode(zipCode ?? '') + setCity(city ?? '') + setCountry(countryAlpha2Code ?? '') + setUniqueIds(uniqueIds ?? '') + setIdentifierNumber(uniqueIds?.[0]?.value ?? '') + setIdentifierType(uniqueIds?.[0]?.type ?? '') } useEffect(() => { @@ -198,7 +190,6 @@ export const CompanyDataCax = () => { const onSearchChange = (expr: string) => { if (isBPN(expr?.trim())) { fetchData(expr) - // make sure to catch any error .catch((errorCode: number) => { setFields(null) console.log('errorCode', errorCode) @@ -210,137 +201,47 @@ export const CompanyDataCax = () => { } } - const validateLegalEntity = (value: string) => { - setLegalEntity(value) - - if (!Patterns.legalEntityPattern.test(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - legalEntity: 'legalEntityError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, legalEntity: '' })) - } - - const validateRegisteredName = (value: string) => { - setRegisteredName(value) - - if (!Patterns.registeredNamePattern.test(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - registeredName: 'registerdNameError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, registeredName: '' })) - } - - const validateStreetHouseNumber = (value: string) => { - setStreetHouseNumber(value) - - if (!isStreet(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - streetHouseNumber: 'streetHouseNumberError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, streetHouseNumber: '' })) - } - - const validatePostalCode = (value: string) => { - setPostalCode(value) - - if (!value) { - setErrors((prevState) => ({ ...prevState, postalCode: '' })) - return - } - - if (!Patterns.postalCodePattern.test(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - postalCode: 'postalCodeError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, postalCode: '' })) - } - - const validateCity = (value: string) => { - setCity(value) - - if (!isCity(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - city: 'cityError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, city: '' })) - } - const validateCountry = (value: string) => { setChangedCountryValue(true) setCountry(value?.toUpperCase()) if (!Patterns.countryPattern.test(value?.trim())) { setShowIdentifiers(false) - setErrors((prevState) => ({ - ...prevState, - country: 'countryError', - })) - return + setErrors((prevState) => ({ ...prevState, country: 'countryError' })) + } else { + setErrors((prevState) => ({ ...prevState, country: '' })) } - setErrors((prevState) => ({ ...prevState, country: '' })) } const validateRegion = (value: string) => { setRegion(value) - - if (!value && (country === 'MX' || country === 'CZ' || country === 'US')) { - setErrors((prevState) => ({ ...prevState, region: 'regionError' })) - return - } else { - setErrors((prevState) => ({ ...prevState, region: '' })) - } - - if (value && !Patterns.regionPattern.test(value?.trim())) { - setErrors((prevState) => ({ - ...prevState, - region: 'regionError', - })) - return - } - - setErrors((prevState) => ({ ...prevState, region: '' })) + const isRequiredCountry = ['MX', 'CZ', 'US'].includes(country) + const isValidRegion = value && Patterns.regionPattern.test(value?.trim()) + setErrors((prevState) => ({ + ...prevState, + region: + (!value && isRequiredCountry) || (!isValidRegion && value) + ? 'regionError' + : '', + })) } const validateIdentifierNumber = (value) => { setChangedCountryValue(false) setIdentifierNumber(value) - const countryCode = - country === 'DE' || - country === 'FR' || - country === 'IN' || - country === 'MX' - ? country - : 'Worldwide' + const countryCode = ['DE', 'FR', 'IN', 'MX'].includes(country) + ? country + : 'Worldwide' if ( identifierType && !Patterns[countryCode][identifierType].test(value?.trim()) ) { setErrors((prevState) => ({ ...prevState, - identifierNumber: countryCode + '_' + identifierType, + identifierNumber: `${countryCode}_${identifierType}`, })) - return + } else { + setErrors((prevState) => ({ ...prevState, identifierNumber: '' })) } - setErrors((prevState) => ({ ...prevState, identifierNumber: '' })) } const handleIdentifierSelect = (type, value) => { @@ -357,33 +258,34 @@ export const CompanyDataCax = () => { } const nextClick = () => { - const companyData = { ...companyDetails } - companyData.bpn = bpn?.trim() - companyData.name = legalEntity?.trim() - companyData.shortName = registeredName?.trim() - companyData.streetName = streetHouseNumber?.trim() - companyData.region = region?.trim() - companyData.city = city?.trim() - companyData.zipCode = postalCode?.trim() - companyData.countryAlpha2Code = country?.trim() - companyData.uniqueIds = [ - { - type: identifierType, - value: identifierNumber?.trim(), - }, - ] - //addCompanyData(companyData) + const companyData = { + ...companyDetails, + bpn: bpn?.trim(), + name: legalEntity?.trim(), + shortName: registeredName?.trim(), + streetName: streetHouseNumber?.trim(), + region: region?.trim(), + city: city?.trim(), + zipCode: postalCode?.trim(), + countryAlpha2Code: country?.trim(), + uniqueIds: [ + { + type: identifierType, + value: identifierNumber?.trim(), + }, + ], + } addCompanyDetailsWithAddress({ applicationId, companyData }) setNextClicked(true) } const renderSnackbar = () => { - let message = t('registration.apiError') - if (identifierError) { - message = t('registrationStepOne.identifierError') - } else if (submitError) { - message = t('registrationStepOne.submitError') - } + const message = identifierError + ? t('registrationStepOne.identifierError') + : submitError + ? t('registrationStepOne.submitError') + : t('registration.apiError') + return } @@ -452,7 +354,7 @@ export const CompanyDataCax = () => { type="text" value={legalEntity} onChange={(e) => { - validateLegalEntity(e.target.value) + validateLegalEntity(e.target.value, setLegalEntity, setErrors) }} onBlur={(e) => { setLegalEntity(e.target.value.trim()) @@ -475,7 +377,7 @@ export const CompanyDataCax = () => { type="text" value={registeredName} onChange={(e) => { - validateRegisteredName(e.target.value) + validateRegisteredName(e.target.value, setRegisteredName, setErrors) }} onBlur={(e) => { setRegisteredName(e.target.value.trim()) @@ -505,7 +407,7 @@ export const CompanyDataCax = () => { type="text" value={streetHouseNumber} onChange={(e) => { - validateStreetHouseNumber(e.target.value) + validateStreetHouseNumber(e.target.value, setStreetHouseNumber, setErrors) }} onBlur={(e) => { setStreetHouseNumber(e.target.value.trim()) @@ -526,7 +428,7 @@ export const CompanyDataCax = () => { type="text" value={postalCode} onChange={(e) => { - validatePostalCode(e.target.value) + validatePostalCode(e.target.value, setPostalCode, setErrors) }} onBlur={(e) => { setPostalCode(e.target.value.trim()) @@ -546,7 +448,7 @@ export const CompanyDataCax = () => { type="text" value={city} onChange={(e) => { - validateCity(e.target.value) + validateCity(e.target.value, setCity, setErrors) }} onBlur={(e) => { setCity(e.target.value.trim()) diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts new file mode 100644 index 00000000..568d0be0 --- /dev/null +++ b/src/helpers/constants.ts @@ -0,0 +1,30 @@ +/******************************************************************************** + * Copyright (c) 2022 Microsoft and BMW Group AG + * Copyright (c) 2022 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ + +export const initialErrors = { + legalEntity: '', + registeredName: '', + streetHouseNumber: '', + region: '', + postalCode: '', + city: '', + country: '', + identifierNumber: '', +} diff --git a/src/helpers/validation.ts b/src/helpers/validation.ts new file mode 100644 index 00000000..207a393e --- /dev/null +++ b/src/helpers/validation.ts @@ -0,0 +1,100 @@ +/******************************************************************************** + * Copyright (c) 2022 Microsoft and BMW Group AG + * Copyright (c) 2022 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ +import { Patterns } from '../types/Patterns' + +const validate = ( + value: string, + pattern: RegExp, + errorKey: string, + setError: (error: string) => void +) => { + setError(pattern.test(value?.trim()) ? '' : errorKey) +} + +export const validateLegalEntity = ( + value: string, + setLegalEntity: any, + setErrors: any +) => { + setLegalEntity(value) + validate(value, Patterns.legalEntityPattern, 'legalEntityError', (error) => { + setErrors((prevState) => ({ + ...prevState, + legalEntity: error, + })) + }) +} + +export const validateRegisteredName = ( + value: string, + setRegisteredName: any, + setErrors: any +) => { + setRegisteredName(value) + validate( + value, + Patterns.registeredNamePattern, + 'registeredNameError', + (error) => { + setErrors((prevState) => ({ + ...prevState, + registeredName: error, + })) + } + ) +} + +export const validatePostalCode = ( + value: string, + setPostalCode: any, + setErrors: any +) => { + setPostalCode(value) + validate(value, Patterns.postalCodePattern, 'postalCodeError', (error) => { + setErrors((prevState) => ({ + ...prevState, + postalCode: error, + })) + }) +} + +export const validateCity = (value: string, setCity: any, setErrors: any) => { + setCity(value) + validate(value, Patterns.CITY, 'cityError', (error) => { + setErrors((prevState) => ({ + ...prevState, + city: error, + })) + }) +} + +export const validateStreetHouseNumber = ( + value: string, + setStreetHouseNumber: any, + setErrors: any +) => { + setStreetHouseNumber(value) + validate(value, Patterns.STREET, 'streetHouseNumberError', (error) => { + setErrors((prevState) => ({ + ...prevState, + streetHouseNumber: error, + })) + }) +} \ No newline at end of file diff --git a/src/locales/en/translations.json b/src/locales/en/translations.json index cf390c69..b4862b66 100644 --- a/src/locales/en/translations.json +++ b/src/locales/en/translations.json @@ -64,7 +64,7 @@ "bpnInvalidError": "The BPN is invalid, please enter a valid BPN or use the manual flow below. Hint: A BPN has 16-digits.", "bpnNotExistError": "This BPN doesn't exist, please enter a valid BPN or use the manual flow below.", "legalEntityError": "Please enter a valid legal entity name.", - "registerdNameError": "Please enter a valid registered name.", + "registeredNameError": "Please enter a valid registered name.", "streetHouseNumberError": "Please enter a valid street and house number", "regionError": "Please enter a valid region.", "postalCodeError": "Please enter a valid postal code", diff --git a/src/types/MainTypes.ts b/src/types/MainTypes.ts index 9e923a36..8a674e09 100644 --- a/src/types/MainTypes.ts +++ b/src/types/MainTypes.ts @@ -65,3 +65,8 @@ export interface PostDocumentType { dispatch: Dispatch temporaryId: string } + +export type CountryType = { + id: string + label: string +} \ No newline at end of file From f26d415be936488ab6a93aaea7442af7353d2108 Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Wed, 27 Nov 2024 13:22:48 +0530 Subject: [PATCH 2/7] fix: moved identifier code to new file --- CHANGELOG.md | 2 +- src/components/CompanyData/Identiifier.tsx | 151 +++++++++++++++++++++ src/components/cax-companyData.tsx | 144 +++++--------------- 3 files changed, 188 insertions(+), 109 deletions(-) create mode 100644 src/components/CompanyData/Identiifier.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index cfeb1743..8e0e4713 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ ### Bugfix -- refactor, optimise and reorganise the code in cax-companyData.tsx file +- refactor, optimise and reorganise the code in cax-companyData.tsx file [#317](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/317) - created a new component for form header to avoid duplication of code in each step [#310](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/310) ## 2.1.0 diff --git a/src/components/CompanyData/Identiifier.tsx b/src/components/CompanyData/Identiifier.tsx new file mode 100644 index 00000000..87de954f --- /dev/null +++ b/src/components/CompanyData/Identiifier.tsx @@ -0,0 +1,151 @@ +/******************************************************************************** + * Copyright (c) 2022 Microsoft and BMW Group AG + * Copyright (c) 2022 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ +import React from 'react'; +import { Row } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import { UniqueIdentifier } from 'state/features/application/applicationApiSlice'; + +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) => void; + validateIdentifierNumber: (value: string) => void; + setIdentifierNumber: (value: string) => void; + identifierDetails: UniqueIdentifier[]; +} + +export const IdentifierForm: React.FC = ({ + uniqueIds, + handleIdentifierSelect, + showIdentifiers, + identifierType, + identifierNumber, + errors, + onIdentifierTypeChange, + validateIdentifierNumber, + setIdentifierNumber, + identifierDetails, +}) => { + const { t } = useTranslation(); + + return ( + <> + {uniqueIds && uniqueIds?.length > 1 ? ( + <> + + + {t('registrationStepOne.countryIdentifier')} +
+ {t('registrationStepOne.identifierhelperText')} +
+ + + +
    + {uniqueIds?.map((id) => ( +
  • + { + handleIdentifierSelect(id.type, id.value) + }} + defaultChecked={uniqueIds[0].type === id.type} + /> + +
    • + ))} +
+ + + ) : ( + showIdentifiers && ( + <> + + + {t('registrationStepOne.countryIdentifier')} + + + +
+ + +
+ + +
+ + { + validateIdentifierNumber(e.target.value) + }} + onBlur={(e) => { + setIdentifierNumber(e.target.value.trim()) + }} + /> + {errors.identifierNumber && ( + + )} +
+ + + ) + )} + + ) +}; \ No newline at end of file diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx index 344e75cf..263ec351 100644 --- a/src/components/cax-companyData.tsx +++ b/src/components/cax-companyData.tsx @@ -44,9 +44,16 @@ import { Autocomplete, TextField } from '@mui/material' import i18n from '../services/I18nService' import { Notify } from './Snackbar' import StepHeader from './StepHeader' -import { validateCity, validateLegalEntity, validatePostalCode, validateRegisteredName, validateStreetHouseNumber } from 'helpers/validation' +import { + validateCity, + validateLegalEntity, + validatePostalCode, + validateRegisteredName, + validateStreetHouseNumber, +} from 'helpers/validation' import { CountryType } from 'types/MainTypes' import { initialErrors } from 'helpers/constants' +import { IdentifierForm } from './CompanyData/Identiifier' export const CompanyDataCax = () => { const { t } = useTranslation() @@ -148,7 +155,7 @@ export const CompanyDataCax = () => { }, [identifierType, identifierNumber, country]) useEffect(() => { - setFields(companyDetails); + setFields(companyDetails) }, [companyDetails]) const setFields = (bpnDetails: any) => { @@ -189,12 +196,11 @@ export const CompanyDataCax = () => { const onSearchChange = (expr: string) => { if (isBPN(expr?.trim())) { - fetchData(expr) - .catch((errorCode: number) => { - setFields(null) - console.log('errorCode', errorCode) - setBpnErrorMessage(t('registrationStepOne.bpnNotExistError')) - }) + fetchData(expr).catch((errorCode: number) => { + setFields(null) + console.log('errorCode', errorCode) + setBpnErrorMessage(t('registrationStepOne.bpnNotExistError')) + }) setBpnErrorMessage('') } else { setBpnErrorMessage(t('registrationStepOne.bpnInvalidError')) @@ -377,7 +383,11 @@ export const CompanyDataCax = () => { type="text" value={registeredName} onChange={(e) => { - validateRegisteredName(e.target.value, setRegisteredName, setErrors) + validateRegisteredName( + e.target.value, + setRegisteredName, + setErrors + ) }} onBlur={(e) => { setRegisteredName(e.target.value.trim()) @@ -407,7 +417,11 @@ export const CompanyDataCax = () => { type="text" value={streetHouseNumber} onChange={(e) => { - validateStreetHouseNumber(e.target.value, setStreetHouseNumber, setErrors) + validateStreetHouseNumber( + e.target.value, + setStreetHouseNumber, + setErrors + ) }} onBlur={(e) => { setStreetHouseNumber(e.target.value.trim()) @@ -506,104 +520,18 @@ export const CompanyDataCax = () => { )} - - {uniqueIds && uniqueIds?.length > 1 ? ( - <> - - - {t('registrationStepOne.countryIdentifier')} -
- {t('registrationStepOne.identifierhelperText')} -
- - - -
    - {uniqueIds?.map((id) => ( -
  • - { - handleIdentifierSelect(id.type, id.value) - }} - defaultChecked={uniqueIds[0].type === id.type} - /> - -
    • - ))} -
- - - ) : ( - showIdentifiers && ( - <> - - - {t('registrationStepOne.countryIdentifier')} - - - -
- - -
- - -
- - { - validateIdentifierNumber(e.target.value) - }} - onBlur={(e) => { - setIdentifierNumber(e.target.value.trim()) - }} - /> - {errors.identifierNumber && ( - - )} -
- - - ) - )} + {notifyError && renderSnackbar()} From 2a3f5b1633a0d71f66ecca7eb223b53886a8839a Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Wed, 27 Nov 2024 16:52:23 +0530 Subject: [PATCH 3/7] fix: moved company data and address to its own component --- src/components/CompanyData/AddressForm.tsx | 187 ++++++++++++ .../CompanyData/CompanyDataForm.tsx | 156 +++++++++++ src/components/cax-companyData.tsx | 265 +++--------------- 3 files changed, 382 insertions(+), 226 deletions(-) create mode 100644 src/components/CompanyData/AddressForm.tsx create mode 100644 src/components/CompanyData/CompanyDataForm.tsx diff --git a/src/components/CompanyData/AddressForm.tsx b/src/components/CompanyData/AddressForm.tsx new file mode 100644 index 00000000..e8e24317 --- /dev/null +++ b/src/components/CompanyData/AddressForm.tsx @@ -0,0 +1,187 @@ +/******************************************************************************** + * Copyright (c) 2022 Microsoft and BMW Group AG + * Copyright (c) 2022 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * 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'; + +interface AddressFormProps { + 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 +} + +const AddressForm: React.FC = ({ + city, + setCity, + postalCode, + setPostalCode, + region, + setRegion, + countryArr, + defaultSelectedCountry, + setErrors, + errors, + validateCountry, + validateRegion, + setStreetHouseNumber, + streetHouseNumber, +}) => { + const { t } = useTranslation() + + return ( + <> + + + {t('registrationStepOne.organizationAdd')} + + + + +
+ + { + validateStreetHouseNumber( + e.target.value, + setStreetHouseNumber, + setErrors + ) + }} + onBlur={(e) => { + setStreetHouseNumber(e.target.value.trim()) + }} + /> + {errors.streetHouseNumber && ( + + )} +
+ + + +
+ + { + validatePostalCode(e.target.value, setPostalCode, setErrors) + }} + onBlur={(e) => { + setPostalCode(e.target.value.trim()) + }} + /> + {errors.postalCode && ( + + )} +
+ +
+ + { + validateCity(e.target.value, setCity, setErrors) + }} + onBlur={(e) => { + setCity(e.target.value.trim()) + }} + /> + {errors.city && ( + + )} +
+ + +
+ + {(countryArr?.length || errors.country) && ( + ( + + )} + onChange={(_e, values) => { + validateCountry(values?.id) + }} + sx={{ + '.MuiInput-input': { + height: '31px', + }, + }} + /> + )} + {errors.country && ( + + )} +
+ +
+ + { + validateRegion(e.target.value) + }} + onBlur={(e) => { + setRegion(e.target.value.trim()) + }} + /> + {errors.region && ( + + )} +
+ + + ) +}; + +export default AddressForm; \ No newline at end of file diff --git a/src/components/CompanyData/CompanyDataForm.tsx b/src/components/CompanyData/CompanyDataForm.tsx new file mode 100644 index 00000000..e6266140 --- /dev/null +++ b/src/components/CompanyData/CompanyDataForm.tsx @@ -0,0 +1,156 @@ +/******************************************************************************** + * Copyright (c) 2022 Microsoft and BMW Group AG + * Copyright (c) 2022 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ +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'; + +interface Props { + 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; +} +const CompanyDataForm = ({ + bpn, + bpnErrorMsg, + legalEntity, + registeredName, + errors, + onSearchChange, + validateLegalEntity, + validateRegisteredName, + setLegalEntity, + setRegisteredName, + setErrors, +}) => { + const { t } = useTranslation() + + return ( + <> + +
+ + { + onSearchChange(expr) + }} + /> + +
+ + + +
+ + {t('registrationStepOne.enterManualText')} + +
+ + + +
+ + +
+ {t('registrationStepOne.helperText')} +
+
+ + + +
+ + { + validateLegalEntity(e.target.value, setLegalEntity, setErrors) + }} + onBlur={(e) => { + setLegalEntity(e.target.value.trim()) + }} + /> + {errors.legalEntity && ( + + )} +
+ + + +
+ + { + validateRegisteredName( + e.target.value, + setRegisteredName, + setErrors + ) + }} + onBlur={(e) => { + setRegisteredName(e.target.value.trim()) + }} + /> + {errors.registeredName && ( + + )} +
+ + + ) +} + +export default CompanyDataForm \ No newline at end of file diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx index 263ec351..da0d29af 100644 --- a/src/components/cax-companyData.tsx +++ b/src/components/cax-companyData.tsx @@ -17,11 +17,7 @@ * * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ - -import { Row } from 'react-bootstrap' import { getCompanyDetails } from '../helpers/utils' -import { AiOutlineQuestionCircle } from 'react-icons/ai' -import SearchInput from 'react-search-input' import { useTranslation } from 'react-i18next' import { useEffect, useState } from 'react' import { FooterButton } from './footerButton' @@ -40,20 +36,18 @@ import { addCurrentStep, getCurrentStep, } from '../state/features/user/userApiSlice' -import { Autocomplete, TextField } from '@mui/material' import i18n from '../services/I18nService' import { Notify } from './Snackbar' import StepHeader from './StepHeader' import { - validateCity, validateLegalEntity, - validatePostalCode, validateRegisteredName, - validateStreetHouseNumber, } from 'helpers/validation' import { CountryType } from 'types/MainTypes' import { initialErrors } from 'helpers/constants' import { IdentifierForm } from './CompanyData/Identiifier' +import AddressForm from './CompanyData/AddressForm' +import CompanyDataForm from './CompanyData/CompanyDataForm' export const CompanyDataCax = () => { const { t } = useTranslation() @@ -130,8 +124,14 @@ export const CompanyDataCax = () => { }, [countryList, i18n.language]) useEffect(() => { - const selectedCountry = countryArr?.find((code) => code.id === country) - setDefaultSelectedCountry(country ? selectedCountry : null) + if (country) { + const countryCodeValue = countryArr?.find((code) => code.id === country) + if (countryCodeValue) { + setDefaultSelectedCountry(countryCodeValue) + } + } else { + setDefaultSelectedCountry(null) + } }, [country, countryArr]) useEffect(() => { @@ -304,222 +304,35 @@ export const CompanyDataCax = () => { stepDescription={t('registrationStepOne.verifyCompayDataSubHeading')} />
- -
- - { - onSearchChange(expr) - }} - /> - -
- - - -
- - {t('registrationStepOne.enterManualText')} - -
- - - -
- - -
- {t('registrationStepOne.helperText')} -
-
- - - -
- - { - validateLegalEntity(e.target.value, setLegalEntity, setErrors) - }} - onBlur={(e) => { - setLegalEntity(e.target.value.trim()) - }} - /> - {errors.legalEntity && ( - - )} -
- - - -
- - { - validateRegisteredName( - e.target.value, - setRegisteredName, - setErrors - ) - }} - onBlur={(e) => { - setRegisteredName(e.target.value.trim()) - }} - /> - {errors.registeredName && ( - - )} -
- - - - - {t('registrationStepOne.organizationAdd')} - - - - -
- - { - validateStreetHouseNumber( - e.target.value, - setStreetHouseNumber, - setErrors - ) - }} - onBlur={(e) => { - setStreetHouseNumber(e.target.value.trim()) - }} - /> - {errors.streetHouseNumber && ( - - )} -
- - - -
- - { - validatePostalCode(e.target.value, setPostalCode, setErrors) - }} - onBlur={(e) => { - setPostalCode(e.target.value.trim()) - }} - /> - {errors.postalCode && ( - - )} -
- -
- - { - validateCity(e.target.value, setCity, setErrors) - }} - onBlur={(e) => { - setCity(e.target.value.trim()) - }} - /> - {errors.city && ( - - )} -
- - - -
- - {(countryArr?.length || errors.country) && ( - ( - - )} - onChange={(_e, values) => { - validateCountry(values?.id) - }} - sx={{ - '.MuiInput-input': { - height: '31px', - }, - }} - /> - )} - {errors.country && ( - - )} -
- -
- - { - validateRegion(e.target.value) - }} - onBlur={(e) => { - setRegion(e.target.value.trim()) - }} - /> - {errors.region && ( - - )} -
- + + Date: Wed, 27 Nov 2024 17:22:55 +0530 Subject: [PATCH 4/7] move logic to its own component --- src/components/CompanyData/AddressForm.tsx | 91 +++++++++++---- .../CompanyData/CompanyDataForm.tsx | 67 +++++++---- src/components/CompanyData/Identiifier.tsx | 58 +++++++--- src/components/cax-companyData.tsx | 107 ++++-------------- 4 files changed, 179 insertions(+), 144 deletions(-) diff --git a/src/components/CompanyData/AddressForm.tsx b/src/components/CompanyData/AddressForm.tsx index e8e24317..a163c4da 100644 --- a/src/components/CompanyData/AddressForm.tsx +++ b/src/components/CompanyData/AddressForm.tsx @@ -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 = ({ + 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 ( <> @@ -67,7 +110,6 @@ const AddressForm: React.FC = ({ {t('registrationStepOne.organizationAdd')} -
-
@@ -182,6 +223,6 @@ const AddressForm: React.FC = ({ ) -}; +} -export default AddressForm; \ No newline at end of file +export default AddressForm \ No newline at end of file diff --git a/src/components/CompanyData/CompanyDataForm.tsx b/src/components/CompanyData/CompanyDataForm.tsx index e6266140..c04a0ce1 100644 --- a/src/components/CompanyData/CompanyDataForm.tsx +++ b/src/components/CompanyData/CompanyDataForm.tsx @@ -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 + setFields: (fields: any) => void + setBpnErrorMessage: (message: string) => void } -const CompanyDataForm = ({ +const CompanyDataForm: React.FC = ({ 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 ( <> @@ -153,4 +178,4 @@ const CompanyDataForm = ({ ) } -export default CompanyDataForm \ No newline at end of file +export default CompanyDataForm diff --git a/src/components/CompanyData/Identiifier.tsx b/src/components/CompanyData/Identiifier.tsx index 87de954f..0c8b3b94 100644 --- a/src/components/CompanyData/Identiifier.tsx +++ b/src/components/CompanyData/Identiifier.tsx @@ -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) => 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) => void + setIdentifierNumber: (value: string) => void + setChangedCountryValue: (value: boolean) => void + setErrors: (errors: any) => void + handleIdentifierSelect: (type: string, value: string) => void } export const IdentifierForm: React.FC = ({ 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 ? ( diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx index da0d29af..4d892126 100644 --- a/src/components/cax-companyData.tsx +++ b/src/components/cax-companyData.tsx @@ -22,7 +22,7 @@ import { useTranslation } from 'react-i18next' import { useEffect, useState } from 'react' import { FooterButton } from './footerButton' import { useDispatch, useSelector } from 'react-redux' -import { isBPN, Patterns } from '../types/Patterns' +import { isBPN } from '../types/Patterns' import { useFetchApplicationsQuery, useFetchCompanyDetailsWithAddressQuery, @@ -39,10 +39,7 @@ import { import i18n from '../services/I18nService' import { Notify } from './Snackbar' import StepHeader from './StepHeader' -import { - validateLegalEntity, - validateRegisteredName, -} from 'helpers/validation' +import { validateLegalEntity, validateRegisteredName } from 'helpers/validation' import { CountryType } from 'types/MainTypes' import { initialErrors } from 'helpers/constants' import { IdentifierForm } from './CompanyData/Identiifier' @@ -79,7 +76,6 @@ export const CompanyDataCax = () => { const [identifierNumber, setIdentifierNumber] = useState() const [changedCountryValue, setChangedCountryValue] = useState(false) const [errors, setErrors] = useState(initialErrors) - const [submitError, setSubmitError] = useState(false) const [identifierError, setIdentifierError] = useState(false) const [notifyError, setNotifyError] = useState(false) @@ -124,14 +120,14 @@ export const CompanyDataCax = () => { }, [countryList, i18n.language]) useEffect(() => { - if (country) { - const countryCodeValue = countryArr?.find((code) => code.id === country) - if (countryCodeValue) { - setDefaultSelectedCountry(countryCodeValue) - } - } else { - setDefaultSelectedCountry(null) - } + if (country) { + const countryCodeValue = countryArr?.find((code) => code.id === country) + if (countryCodeValue) { + setDefaultSelectedCountry(countryCodeValue) + } + } else { + setDefaultSelectedCountry(null) + } }, [country, countryArr]) useEffect(() => { @@ -144,16 +140,6 @@ export const CompanyDataCax = () => { if (country?.length === 2 && error) setIdentifierError(true) }, [identifierData, country, error]) - useEffect(() => { - if (errors.country === '' && country && changedCountryValue) { - refetch() - validateRegion(region) - } - identifierNumber && - identifierType && - validateIdentifierNumber(identifierNumber) - }, [identifierType, identifierNumber, country]) - useEffect(() => { setFields(companyDetails) }, [companyDetails]) @@ -194,62 +180,6 @@ export const CompanyDataCax = () => { setFields(details) } - 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')) - } - } - - 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' - : '', - })) - } - - 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: '' })) - } - } - const handleIdentifierSelect = (type, value) => { setIdentifierType(type) setIdentifierNumber(value) @@ -310,14 +240,18 @@ export const CompanyDataCax = () => { legalEntity={legalEntity} registeredName={registeredName} errors={errors} - onSearchChange={onSearchChange} validateLegalEntity={validateLegalEntity} validateRegisteredName={validateRegisteredName} setLegalEntity={setLegalEntity} setRegisteredName={setRegisteredName} setErrors={setErrors} + isBPN={isBPN} + fetchData={fetchData} + setFields={setFields} + setBpnErrorMessage={setBpnErrorMessage} /> { defaultSelectedCountry={defaultSelectedCountry} setErrors={setErrors} errors={errors} - validateRegion={validateRegion} - validateCountry={validateCountry} setStreetHouseNumber={setStreetHouseNumber} streetHouseNumber={streetHouseNumber} + setShowIdentifiers={setShowIdentifiers} + setChangedCountryValue={setChangedCountryValue} + setCountry={setCountry} + refetch={refetch} + changedCountryValue={changedCountryValue} /> { identifierNumber={identifierNumber} errors={errors} onIdentifierTypeChange={onIdentifierTypeChange} - validateIdentifierNumber={validateIdentifierNumber} setIdentifierNumber={setIdentifierNumber} identifierDetails={identifierDetails} + country={country} + setErrors={setErrors} + setChangedCountryValue={setChangedCountryValue} />
From 528e46cb9ab7725bb308adda69e1d1ea6adfa61e Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Fri, 29 Nov 2024 11:30:37 +0530 Subject: [PATCH 5/7] fix: format code --- src/components/CompanyData/Identiifier.tsx | 64 +++++++++++----------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/CompanyData/Identiifier.tsx b/src/components/CompanyData/Identiifier.tsx index 0c8b3b94..d8cd6c82 100644 --- a/src/components/CompanyData/Identiifier.tsx +++ b/src/components/CompanyData/Identiifier.tsx @@ -17,11 +17,11 @@ * * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -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'; +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 }[] @@ -44,7 +44,7 @@ export const IdentifierForm: React.FC = ({ identifierType, identifierNumber, errors, - identifierDetails, + identifierDetails, country, onIdentifierTypeChange, setIdentifierNumber, @@ -52,33 +52,33 @@ export const IdentifierForm: React.FC = ({ setErrors, handleIdentifierSelect, }) => { - const { t } = useTranslation(); + 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: '' })) - } - } + 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]) - useEffect(() => { - identifierNumber && - identifierType && - validateIdentifierNumber(identifierNumber) - }, [identifierType, identifierNumber]) - return ( <> {uniqueIds && uniqueIds?.length > 1 ? ( @@ -178,4 +178,4 @@ export const IdentifierForm: React.FC = ({ )} ) -}; \ No newline at end of file +} From 9e8aebb535df7de62725fccb46c39821fb63e043 Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Tue, 17 Dec 2024 17:21:29 +0530 Subject: [PATCH 6/7] fix: worked on the PR feedback --- CHANGELOG.md | 1 - src/components/CompanyData/AddressForm.tsx | 3 +-- .../CompanyData/CompanyDataForm.tsx | 10 +++----- src/components/CompanyData/Identiifier.tsx | 4 +--- src/helpers/constants.ts | 4 +--- src/helpers/validation.ts | 24 +++++++++---------- src/locales/de/translations.json | 2 +- src/locales/en/translations.json | 2 ++ 8 files changed, 20 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e0e4713..109db03a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,6 @@ ### Bugfix -- refactor, optimise and reorganise the code in cax-companyData.tsx file [#317](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/317) - created a new component for form header to avoid duplication of code in each step [#310](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/310) ## 2.1.0 diff --git a/src/components/CompanyData/AddressForm.tsx b/src/components/CompanyData/AddressForm.tsx index a163c4da..07c3ac2a 100644 --- a/src/components/CompanyData/AddressForm.tsx +++ b/src/components/CompanyData/AddressForm.tsx @@ -1,6 +1,5 @@ /******************************************************************************** - * Copyright (c) 2022 Microsoft and BMW Group AG - * Copyright (c) 2022 Contributors to the Eclipse Foundation + * Copyright (c) 2024 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional * information regarding copyright ownership. diff --git a/src/components/CompanyData/CompanyDataForm.tsx b/src/components/CompanyData/CompanyDataForm.tsx index c04a0ce1..09a60f3a 100644 --- a/src/components/CompanyData/CompanyDataForm.tsx +++ b/src/components/CompanyData/CompanyDataForm.tsx @@ -1,6 +1,5 @@ /******************************************************************************** - * Copyright (c) 2022 Microsoft and BMW Group AG - * Copyright (c) 2022 Contributors to the Eclipse Foundation + * Copyright (c) 2024 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional * information regarding copyright ownership. @@ -70,7 +69,6 @@ const CompanyDataForm: React.FC = ({ if (isBPN(expr?.trim())) { fetchData(expr).catch((errorCode: number) => { setFields(null) - console.log('errorCode', errorCode) setBpnErrorMessage(t('registrationStepOne.bpnNotExistError')) }) setBpnErrorMessage('') @@ -109,8 +107,7 @@ const CompanyDataForm: React.FC = ({ {t('registrationStepOne.bpn')}{' '} @@ -128,8 +125,7 @@ const CompanyDataForm: React.FC = ({ * {' '} { + setLegalEntity: (value: string) => void, + setErrors: (errors) => void +): void => { setLegalEntity(value) validate(value, Patterns.legalEntityPattern, 'legalEntityError', (error) => { setErrors((prevState) => ({ @@ -44,8 +42,8 @@ export const validateLegalEntity = ( export const validateRegisteredName = ( value: string, - setRegisteredName: any, - setErrors: any + setRegisteredName: (value: string) => void, + setErrors: (errors) => void ) => { setRegisteredName(value) validate( @@ -63,8 +61,8 @@ export const validateRegisteredName = ( export const validatePostalCode = ( value: string, - setPostalCode: any, - setErrors: any + setPostalCode: (value: string) => void, + setErrors: (errors) => void ) => { setPostalCode(value) validate(value, Patterns.postalCodePattern, 'postalCodeError', (error) => { @@ -75,7 +73,7 @@ export const validatePostalCode = ( }) } -export const validateCity = (value: string, setCity: any, setErrors: any) => { +export const validateCity = (value: string, setCity: (value: string) => void, setErrors: (errors)=>void) => { setCity(value) validate(value, Patterns.CITY, 'cityError', (error) => { setErrors((prevState) => ({ @@ -87,8 +85,8 @@ export const validateCity = (value: string, setCity: any, setErrors: any) => { export const validateStreetHouseNumber = ( value: string, - setStreetHouseNumber: any, - setErrors: any + setStreetHouseNumber: (value: string) => void, + setErrors: (errors) => void ) => { setStreetHouseNumber(value) validate(value, Patterns.STREET, 'streetHouseNumberError', (error) => { diff --git a/src/locales/de/translations.json b/src/locales/de/translations.json index 449c3426..cc722c8f 100644 --- a/src/locales/de/translations.json +++ b/src/locales/de/translations.json @@ -64,7 +64,7 @@ "bpnInvalidError": "The BPN is invalid, please enter a valid BPN or use the manual flow below. Hint: A BPN has 16-digits.", "bpnNotExistError": "This BPN doesn't exist, please enter a valid BPN or use the manual flow below.", "legalEntityError": "Bitte geben Sie einen gültigen Wert für die juristische Person ein.", - "registerdNameError": "Bitte geben Sie einen gültigen registrierten Namen ein.", + "registeredNameError": "Bitte geben Sie einen gültigen registrierten Namen ein.", "streetHouseNumberError": "Bitte geben Sie eine gültige Straße und Hausnummer ein.", "regionError": "Bitte geben Sie einen gültigen Region.", "postalCodeError": "Bitte geben Sie eine gültige Postleitzahl ein.", diff --git a/src/locales/en/translations.json b/src/locales/en/translations.json index b4862b66..4191c579 100644 --- a/src/locales/en/translations.json +++ b/src/locales/en/translations.json @@ -42,7 +42,9 @@ "seachDatabase": "Search for your company data by BPN to autofill the relevant data fields", "enterManualText": "or enter your data manually:", "bpn": "Business Partner Number", + "bpnTooltip": "Displays the bpn and can't get eddited.", "legalEntity": "Legal Entity Name", + "legalEntityTooltip": "Legal Company Name", "helperText": "In case you enter your data manually, this field fill be locked.", "registeredName": "Registered Name", "organizationAdd": "Organization Address", From f93fb57c214f27caf245d35b3eadafabc1d03f2e Mon Sep 17 00:00:00 2001 From: shubhamv-ss Date: Thu, 19 Dec 2024 12:31:58 +0530 Subject: [PATCH 7/7] fix: update german translation --- src/components/cax-companyData.tsx | 13 ++++++------- src/locales/de/translations.json | 2 ++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/cax-companyData.tsx b/src/components/cax-companyData.tsx index 4d892126..3e375663 100644 --- a/src/components/cax-companyData.tsx +++ b/src/components/cax-companyData.tsx @@ -216,13 +216,12 @@ export const CompanyDataCax = () => { } const renderSnackbar = () => { - const message = identifierError - ? t('registrationStepOne.identifierError') - : submitError - ? t('registrationStepOne.submitError') - : t('registration.apiError') - - return + const getMessage = () => { + if (identifierError) return t('registrationStepOne.identifierError') + if (submitError) return t('registrationStepOne.submitError') + return t('registration.apiError') + } + return } return ( diff --git a/src/locales/de/translations.json b/src/locales/de/translations.json index cc722c8f..5cdb706c 100644 --- a/src/locales/de/translations.json +++ b/src/locales/de/translations.json @@ -42,7 +42,9 @@ "seachDatabase": "Suche (mit Hilfe der BPN)", "enterManualText": "oder füllen Sie die relevanten Felder manuell aus:", "bpn": "Business Partner Number", + "bpnTooltip": "Zeigt die BPN an und kann nicht bearbeitet werden.", "legalEntity": "Rechtsträger", + "legalEntityTooltip": "legaler Firmenname", "helperText": "In case you enter your data manually, this field fill be locked.", "registeredName": "Eingetragener Unternehmensname", "organizationAdd": "Organisationsadresse",