fix(company data): error handling

CHANGELOG.md

@@ -20,6 +20,10 @@
   - UI improvements
   - Add correct registration application checklist items
 - Fixed incorrect usage of pre-commit hook
+- Company Data
+  - Remove unwanted input forms
+  - Fix crash issue in details page
+  - Add error handling component in table
 
 ### Feature
 

src/components/pages/CompanyData/components/AddressDetails.tsx

@@ -33,23 +33,20 @@ export default function AddressDetails({
   const addressData = [
     {
       key: t('content.companyData.address.form.companySite.name'),
-      value: companyAddressData.site.name ?? '',
-    },
-    {
-      key: t('content.companyData.address.form.addressTitle.name'),
-      value: companyAddressData.address.name ?? '',
+      value: companyAddressData.site?.name ?? '',
     },
     {
       key: t('content.companyData.address.form.street.name'),
-      value: companyAddressData.address.physicalPostalAddress.street.name ?? '',
+      value:
+        companyAddressData.address?.physicalPostalAddress.street.name ?? '',
     },
     {
       key: t('content.companyData.address.form.postal.name'),
-      value: companyAddressData.address.physicalPostalAddress.postalCode ?? '',
+      value: companyAddressData.address?.physicalPostalAddress.postalCode ?? '',
     },
     {
       key: t('content.companyData.address.form.city.name'),
-      value: companyAddressData.address.physicalPostalAddress.city ?? '',
+      value: companyAddressData.address?.physicalPostalAddress.city ?? '',
     },
   ]
   return (

src/components/pages/CompanyData/components/CompanyAddressList.tsx

@@ -54,10 +54,17 @@ export const CompanyAddressList = ({
   handleConfirm: () => void
 }) => {
   const { t } = useTranslation()
-  const { data, refetch: refreshSharingData } = useFetchSharingStateQuery()
+  const {
+    data,
+    refetch: refreshSharingData,
+    isFetching,
+    error: sharingStateError,
+  } = useFetchSharingStateQuery()
   const sharingStates = data?.content
-  const [outputRequest] = useFetchOutputCompanyBusinessPartnersMutation()
-  const [inputRequest] = useFetchInputCompanyBusinessPartnersMutation()
+  const [outputRequest, { isLoading: isOutputLoading, error: outputError }] =
+    useFetchOutputCompanyBusinessPartnersMutation()
+  const [inputRequest, { isLoading: isInputLoading, error: inputError }] =
+    useFetchInputCompanyBusinessPartnersMutation()
   const [outputs, setOutputs] = useState<CompanyDataType[]>([])
   const [inputs, setInputs] = useState<CompanyDataType[]>([])
   const [details, setDetails] = useState<boolean>(false)
@@ -72,12 +79,15 @@ export const CompanyAddressList = ({
       )
       .map((state) => state.externalId)
 
-    if (params && params?.length > 0)
+    if (params && params?.length > 0) {
       await inputRequest(params)
         .unwrap()
         .then((payload) => {
           setOutputs(payload.content)
         })
+    } else {
+      setOutputs([])
+    }
   }
 
   const getOutputItems = async () => {
@@ -86,12 +96,15 @@ export const CompanyAddressList = ({
         (state) => state.sharingStateType === SharingStateStatusType.Success
       )
       .map((state) => state.externalId)
-    if (params && params?.length > 0)
+    if (params && params?.length > 0) {
       await outputRequest(params)
         .unwrap()
         .then((payload) => {
           setInputs(payload.content)
         })
+    } else {
+      setInputs([])
+    }
   }
 
   useEffect(() => {
@@ -141,9 +154,19 @@ export const CompanyAddressList = ({
     }
   }
 
+  const errorObj = {
+    status: 0,
+  }
+
+  const error = sharingStateError ?? inputError ?? outputError
+
+  if (error && 'status' in error) {
+    errorObj.status = error.status as number
+  }
+
   return (
     <>
-      {inputs.length > 0 || outputs.length > 0 ? (
+      {!isFetching && !isOutputLoading && !isInputLoading ? (
         <Table
           autoFocus={false}
           onButtonClick={handleButtonClick}
@@ -160,6 +183,7 @@ export const CompanyAddressList = ({
           getRowId={(row: { [key: string]: string }) => row.createdAt}
           rows={inputs.concat(outputs)}
           onCellClick={onRowClick}
+          error={errorObj}
           columns={[
             {
               field: 'site',

src/components/pages/CompanyData/components/EditForm.tsx

@@ -90,11 +90,6 @@ export default function EditForm({
     inputParams.address.physicalPostalAddress.city = form.body.city
     inputParams.address.physicalPostalAddress.country = form.body.countryCode
     inputParams.address.physicalPostalAddress.street.name = form.body.street
-    inputParams.identifiers.push({
-      type: form.body.countryIdentifier,
-      value: form.body.identifierNumber,
-      issuingBody: null,
-    })
     setInput(inputParams)
   }
 
@@ -115,8 +110,12 @@ export default function EditForm({
     setIsValid(form !== undefined)
     if (form) {
       inputParams.site.name = form.body.siteName
-      inputParams.address.name = form.body.addressTitle
       inputParams.address.addressType = AddressType.AdditionalAddress
+      inputParams.identifiers.push({
+        type: form.body.countryIdentifier,
+        value: form.body.identifierNumber,
+        issuingBody: null,
+      })
       getFilledData(form)
     }
   }
@@ -163,6 +162,7 @@ export default function EditForm({
                 ? handleAddressValidation(form)
                 : handleSiteValidation(form)
             }}
+            isAddress={isAddress}
           />
         </DialogContent>
         <DialogActions>

src/components/pages/CompanyData/components/FormFields.tsx

@@ -50,7 +50,6 @@ const responseToForm = (data: CompanyDataFieldsType) => {
   form.countryCode = data.countryCode ?? ''
   form.countryIdentifier = data.countryIdentifier ?? ''
   form.identifierNumber = data.identifierNumber ?? ''
-  form.addressTitle = data.addressTitle ?? ''
   return form
 }
 
@@ -62,19 +61,20 @@ const formToUpdate = (form: IHashMap<string>) => ({
   countryCode: form.countryCode,
   countryIdentifier: form.countryIdentifier,
   identifierNumber: form.identifierNumber,
-  addressTitle: form.addressTitle,
 })
 
 const UpdateForm = ({
   data,
   onChange,
   identifiers,
   newForm,
+  isAddress,
 }: {
   data: CompanyDataFieldsType
   onChange: (key: string, value: string | undefined) => boolean
   identifiers: UniqueIdentifier[]
   newForm: boolean
+  isAddress: boolean
 }) => {
   const { t } = useTranslation()
   const [defaultIdentifier, setDefaultIdentifier] =
@@ -89,19 +89,6 @@ const UpdateForm = ({
 
   return (
     <>
-      <div style={{ margin: '12px 0' }}>
-        <ValidatingInput
-          name="addressTitle"
-          label={t('content.companyData.address.form.addressTitle.name')}
-          value={data.addressTitle ?? ''}
-          hint={t('content.companyData.address.form.addressTitle.hint')}
-          validate={isName}
-          onValid={onChange}
-          onInvalid={onChange}
-          errorMessage={t('content.companyData.address.form.addressTitle.hint')}
-          skipInitialValidation={newForm}
-        />
-      </div>
       <div style={{ marginTop: '34px' }}>
         <ValidatingInput
           name="siteName"
@@ -167,57 +154,65 @@ const UpdateForm = ({
           skipInitialValidation={newForm}
         />
       </div>
-      <div
-        style={{
-          marginTop: '-20px',
-          marginBottom: '25px',
-        }}
-      >
-        <SelectList
-          error={false}
-          helperText={t('content.companyData.site.form.countryIdentifier.hint')}
-          defaultValue={defaultIdentifier?.[0]}
-          items={identifiers}
-          label={t('content.companyData.site.form.countryIdentifier.name')}
-          placeholder={t(
-            'content.companyData.site.form.countryIdentifier.name'
-          )}
-          onChangeItem={(val) => {
-            onChange('countryIdentifier', val.label)
-          }}
-          keyTitle={'label'}
-        />
-      </div>
-      <div style={{ margin: '12px 0' }}>
-        <ValidatingInput
-          name="identifierNumber"
-          label={t('content.companyData.site.form.identifierNumber.name')}
-          value={data.identifierNumber ?? ''}
-          hint={t('content.companyData.site.form.identifierNumber.hint')}
-          validate={(expr) =>
-            isCommercialRegNumber(expr) ||
-            isVatID(expr) ||
-            isVies(expr) ||
-            isEori(expr)
-          }
-          onValid={onChange}
-          onInvalid={onChange}
-          errorMessage={t(
-            'content.companyData.site.form.identifierNumber.error'
-          )}
-          skipInitialValidation={newForm}
-        />
-      </div>
+      {isAddress && (
+        <>
+          <div
+            style={{
+              marginTop: '-20px',
+              marginBottom: '25px',
+            }}
+          >
+            <SelectList
+              error={false}
+              helperText={t(
+                'content.companyData.site.form.countryIdentifier.hint'
+              )}
+              defaultValue={defaultIdentifier?.[0]}
+              items={identifiers}
+              label={t('content.companyData.site.form.countryIdentifier.name')}
+              placeholder={t(
+                'content.companyData.site.form.countryIdentifier.name'
+              )}
+              onChangeItem={(val) => {
+                onChange('countryIdentifier', val.label)
+              }}
+              keyTitle={'label'}
+            />
+          </div>
+          <div style={{ margin: '12px 0' }}>
+            <ValidatingInput
+              name="identifierNumber"
+              label={t('content.companyData.site.form.identifierNumber.name')}
+              value={data.identifierNumber ?? ''}
+              hint={t('content.companyData.site.form.identifierNumber.hint')}
+              validate={(expr) =>
+                isCommercialRegNumber(expr) ||
+                isVatID(expr) ||
+                isVies(expr) ||
+                isEori(expr)
+              }
+              onValid={onChange}
+              onInvalid={onChange}
+              errorMessage={t(
+                'content.companyData.site.form.identifierNumber.error'
+              )}
+              skipInitialValidation={newForm}
+            />
+          </div>
+        </>
+      )}
     </>
   )
 }
 
 export const FormFields = ({
   onValid,
   newForm,
+  isAddress,
 }: {
   onValid: (form: { body: CompanyDataFieldsType } | undefined) => void
   newForm: boolean
+  isAddress: boolean
 }) => {
   const companyData = useSelector(companyDataSelector)
 
@@ -247,7 +242,6 @@ export const FormFields = ({
       : companyData.address.physicalPostalAddress.country,
     countryIdentifier: newForm ? '' : identifier?.[0]?.type ?? '',
     identifierNumber: newForm ? '' : identifier?.[0]?.value ?? '',
-    addressTitle: newForm ? '' : companyData.address.name,
   }
   const [formData, setFormData] = useState<IHashMap<string>>(
     responseToForm(data)
@@ -264,8 +258,7 @@ export const FormFields = ({
       current.postalCode &&
       current.countryCode &&
       current.identifierNumber &&
-      current.countryIdentifier &&
-      current.addressTitle
+      current.countryIdentifier
     onValid(
       formValid
         ? {
@@ -288,6 +281,7 @@ export const FormFields = ({
       identifiers={identifiers ?? []}
       data={data}
       onChange={checkData}
+      isAddress={isAddress}
     />
   )
 }