fix(company data): show error component in table. fix crash issue if …

…some value is missing in the response. remove unwanted inputs from the form

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)
   }
 
@@ -116,6 +111,11 @@ export default function EditForm({
     if (form) {
       inputParams.site.name = form.body.siteName
       inputParams.address.addressType = AddressType.AdditionalAddress
+      inputParams.identifiers.push({
+        type: form.body.countryIdentifier,
+        value: form.body.identifierNumber,
+        issuingBody: null,
+      })
       getFilledData(form)
     }
   }
@@ -162,6 +162,7 @@ export default function EditForm({
                 ? handleAddressValidation(form)
                 : handleSiteValidation(form)
             }}
+            isAddress={isAddress}
           />
         </DialogContent>
         <DialogActions>

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

@@ -68,11 +68,13 @@ const UpdateForm = ({
   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] =
@@ -152,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)
 
@@ -271,6 +281,7 @@ export const FormFields = ({
       identifiers={identifiers ?? []}
       data={data}
       onChange={checkData}
+      isAddress={isAddress}
     />
   )
 }

src/components/pages/CompanyData/components/StatusInformation.tsx

@@ -17,14 +17,15 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Typography } from '@catena-x/portal-shared-components'
+import { Chip, Typography } from '@catena-x/portal-shared-components'
 import { Box } from '@mui/material'
 import { statusSelector } from 'features/companyData/slice'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'
 import WarningAmberIcon from '@mui/icons-material/WarningAmber'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import { SharingStateStatusType } from 'features/companyData/companyDataApiSlice'
 
 export default function StatusInformation() {
   const { t } = useTranslation()
@@ -33,11 +34,24 @@ export default function StatusInformation() {
   const statusIcon: Record<string, JSX.Element> = {
     Success: <CheckCircleIcon />,
     Pending: <HourglassBottomIcon />,
-    Ready: <WarningAmberIcon />,
-    Initial: <WarningAmberIcon />,
+    Ready: <HourglassBottomIcon />,
+    Initial: <HourglassBottomIcon />,
     Error: <WarningAmberIcon />,
   }
 
+  const getStatusColor = (status: string | undefined) => {
+    if (status === SharingStateStatusType.Success) {
+      return 'success'
+    } else if (
+      status === SharingStateStatusType.Pending ||
+      status === SharingStateStatusType.Initial
+    ) {
+      return 'warning'
+    } else {
+      return 'error'
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -46,6 +60,7 @@ export default function StatusInformation() {
         alignItems: 'flex-start',
         marginBottom: '50px',
         padding: '0px 10%',
+        marginTop: '50px',
       }}
     >
       <Typography
@@ -64,15 +79,20 @@ export default function StatusInformation() {
           marginLeft: '20%',
         }}
       >
-        {statusIcon[status]}
-        <Typography
+        <Chip
+          icon={statusIcon[status]}
+          color={getStatusColor(status)}
+          variant="filled"
+          label={status}
+          size="medium"
+          withIcon={true}
           sx={{
-            marginLeft: '10px',
+            marginRight: '0 !important',
+            margin: '0 auto',
+            width: '100px',
+            maxWidth: '100px',
           }}
-          variant="body1"
-        >
-          {status}
-        </Typography>
+        />
       </Box>
     </Box>
   )