fix(company data): extended error handling

CHANGELOG.md

@@ -10,6 +10,9 @@
 ### Feature
 
 - Use scroll to top button from shared components
+- Company data
+  - Integrate /ready api to trigger once the new record is created
+  - Show sharing state error details in the company overlay details page
 - Subscription Overlay
   - implement loading state for provider subscription detail overlay
 

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

@@ -39,8 +39,10 @@ import DetailsOverlay from './DetailsOverlay'
 import {
   setSelectedCompanyData,
   setSelectedCompanyStatus,
+  setSharingStateInfo,
 } from 'features/companyData/slice'
 import LoadingProgress from 'components/shared/basic/LoadingProgress'
+import { statusColorMap } from 'utils/dataMapper'
 
 export const CompanyAddressList = ({
   handleButtonClick,
@@ -75,7 +77,9 @@ export const CompanyAddressList = ({
       ?.filter(
         (state) =>
           state.sharingStateType === SharingStateStatusType.Pending ||
-          state.sharingStateType === SharingStateStatusType.Initial
+          state.sharingStateType === SharingStateStatusType.Initial ||
+          state.sharingStateType === SharingStateStatusType.Ready ||
+          state.sharingStateType === SharingStateStatusType.Error
       )
       .map((state) => state.externalId)
 
@@ -122,38 +126,32 @@ export const CompanyAddressList = ({
       .sharingStateType
 
   const onRowClick = (params: GridCellParams) => {
+    const sharingStateInfo = sharingStates
+      ?.filter(
+        (state) => state.sharingStateType === SharingStateStatusType.Error
+      )
+      .filter((state) => state.externalId === params.row.externalId)
     const status = getStatus(params.row.externalId)
     setDetails(true)
     dispatch(setSelectedCompanyStatus(status))
     dispatch(setSelectedCompanyData(params.row))
+    if (sharingStateInfo) dispatch(setSharingStateInfo(sharingStateInfo[0]))
   }
 
   const renderIcon = (status: string | undefined) => {
     if (status === SharingStateStatusType.Success) {
       return <CheckCircleIcon />
     } else if (
       status === SharingStateStatusType.Pending ||
-      status === SharingStateStatusType.Initial
+      status === SharingStateStatusType.Initial ||
+      status === SharingStateStatusType.Ready
     ) {
       return <HourglassBottomIcon />
     } else {
       return <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'
-    }
-  }
-
   const errorObj = {
     status: 0,
   }
@@ -232,7 +230,11 @@ export const CompanyAddressList = ({
                   >
                     <Chip
                       icon={renderIcon(status)}
-                      color={getStatusColor(status)}
+                      color={
+                        status
+                          ? statusColorMap[status as SharingStateStatusType]
+                          : 'error'
+                      }
                       variant="filled"
                       label={status}
                       size="medium"

src/components/pages/CompanyData/components/DetailsOverlay.tsx

@@ -26,7 +26,10 @@ import { Box, Divider } from '@mui/material'
 import { useState } from 'react'
 import StatusInformation from './StatusInformation'
 import CompanyInfo from './CompanyInfo'
-import { companyDataSelector } from 'features/companyData/slice'
+import {
+  companyDataSelector,
+  sharingStateInfoSelector,
+} from 'features/companyData/slice'
 import { useSelector } from 'react-redux'
 import EditForm from './EditForm'
 import { AddressType } from 'features/companyData/companyDataApiSlice'
@@ -53,6 +56,7 @@ export default function DetailsOverlay({
     setEdit(true)
   }
   const companyData = useSelector(companyDataSelector)
+  const sharingStateErrorInfo = useSelector(sharingStateInfoSelector)
   const isSite = companyData.address.addressType === AddressType.SiteMainAddress
   return (
     <Box>
@@ -64,7 +68,7 @@ export default function DetailsOverlay({
           onCloseWithIcon={handleClose}
         />
         <DialogContent>
-          <StatusInformation />
+          <StatusInformation error={sharingStateErrorInfo} />
           <Divider
             sx={{
               borderColor: '#111111',

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

@@ -35,6 +35,7 @@ import {
   type CompanyDataType,
   useUpdateCompanySiteAndAddressMutation,
   type CompanyDataFieldsType,
+  useUpdateCompanyStatusToReadyMutation,
 } from 'features/companyData/companyDataApiSlice'
 import { useSelector } from 'react-redux'
 import {
@@ -67,6 +68,7 @@ export default function EditForm({
   const [loading, setLoading] = useState<boolean>(false)
   const [isValid, setIsValid] = useState<boolean>(false)
   const [updateData] = useUpdateCompanySiteAndAddressMutation()
+  const [updateReadyState] = useUpdateCompanyStatusToReadyMutation()
   const companyData = useSelector(companyDataSelector)
   const [success, setSuccess] = useState<boolean>(false)
   const [error, setError] = useState<boolean>(false)
@@ -79,6 +81,7 @@ export default function EditForm({
   })
   const [input, setInput] = useState<CompanyDataType>(companyDataInitialData)
   const inputParams = cloneDeep(newForm ? companyDataInitialData : companyData)
+
   if (companyInfo) {
     inputParams.externalId = `${companyInfo?.bpn}_${new Date().toISOString()}`
     inputParams.legalEntity.legalEntityBpn = companyInfo?.bpn
@@ -120,9 +123,11 @@ export default function EditForm({
     }
   }
 
-  const handleCreation = async () => {
+  const updateStateToReady = async (response: CompanyDataType[]) => {
     try {
-      await updateData([input])
+      await updateReadyState({
+        externalIds: [response[0].externalId],
+      })
         .unwrap()
         .then(() => {
           setSuccess(true)
@@ -133,6 +138,18 @@ export default function EditForm({
     setLoading(false)
   }
 
+  const handleCreation = async () => {
+    try {
+      await updateData([input])
+        .unwrap()
+        .then((response) => {
+          updateStateToReady(response)
+        })
+    } catch (e) {
+      setError(true)
+    }
+  }
+
   const getTitle = () => {
     if (newForm) {
       return isAddress

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

@@ -256,9 +256,7 @@ export const FormFields = ({
       current.street &&
       current.city &&
       current.postalCode &&
-      current.countryCode &&
-      current.identifierNumber &&
-      current.countryIdentifier
+      current.countryCode
     onValid(
       formValid
         ? {

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

@@ -25,9 +25,17 @@ 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'
+import type {
+  SharingStateStatusType,
+  SharingStateType,
+} from 'features/companyData/companyDataApiSlice'
+import { statusColorMap } from 'utils/dataMapper'
 
-export default function StatusInformation() {
+export default function StatusInformation({
+  error,
+}: {
+  readonly error?: SharingStateType
+}) {
   const { t } = useTranslation()
   const status = useSelector(statusSelector)
 
@@ -39,61 +47,92 @@ export default function StatusInformation() {
     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={{
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        marginBottom: '50px',
-        padding: '0px 10%',
-        marginTop: '50px',
-      }}
-    >
-      <Typography
-        variant="body1"
-        sx={{
-          fontSize: '18px',
-          width: '200px',
-        }}
-      >
-        {t('content.companyData.statusInfo.title')}
-      </Typography>
+    <>
       <Box
         sx={{
           display: 'flex',
-          alignItems: 'center',
-          marginLeft: '20%',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start',
+          marginBottom: '50px',
+          padding: '0px 10%',
+          marginTop: '50px',
         }}
       >
-        <Chip
-          icon={statusIcon[status]}
-          color={getStatusColor(status)}
-          variant="filled"
-          label={status}
-          size="medium"
-          withIcon={true}
+        <Typography
+          variant="body1"
           sx={{
-            marginRight: '0 !important',
-            margin: '0 auto',
-            width: '100px',
-            maxWidth: '100px',
+            fontSize: '18px',
+            width: '200px',
           }}
-        />
+        >
+          {t('content.companyData.statusInfo.title')}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            marginLeft: '20%',
+            flexDirection: 'column',
+          }}
+        >
+          <Chip
+            icon={statusIcon[status]}
+            color={
+              status
+                ? statusColorMap[status as SharingStateStatusType]
+                : 'error'
+            }
+            variant="filled"
+            label={status}
+            size="medium"
+            withIcon={true}
+            sx={{
+              marginRight: '0 !important',
+              margin: '0 auto',
+              width: '100px',
+              maxWidth: '100px',
+            }}
+          />
+        </Box>
       </Box>
-    </Box>
+      {error && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            marginBottom: '50px',
+            padding: '0px 10%',
+            marginTop: '50px',
+          }}
+        >
+          <Box
+            sx={{
+              width: '200px',
+            }}
+          ></Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: '20%',
+              flexDirection: 'column',
+            }}
+          >
+            <Typography
+              variant="body1"
+              sx={{
+                fontSize: '18px',
+                width: '200px',
+                color: '#d32f2f',
+              }}
+            >
+              {error.sharingErrorMessage}
+            </Typography>
+          </Box>
+        </Box>
+      )}
+    </>
   )
 }