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,6 +39,7 @@ import DetailsOverlay from './DetailsOverlay'
 import {
   setSelectedCompanyData,
   setSelectedCompanyStatus,
+  setSharingStateInfo,
 } from 'features/companyData/slice'
 import LoadingProgress from 'components/shared/basic/LoadingProgress'
 
@@ -75,7 +76,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,18 +125,25 @@ 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 {
@@ -144,11 +154,12 @@ export const CompanyAddressList = ({
   const getStatusColor = (status: string | undefined) => {
     if (status === SharingStateStatusType.Success) {
       return 'success'
-    } else if (
-      status === SharingStateStatusType.Pending ||
-      status === SharingStateStatusType.Initial
-    ) {
+    } else if (status === SharingStateStatusType.Initial) {
       return 'warning'
+    } else if (status === SharingStateStatusType.Pending) {
+      return 'info'
+    } else if (status === SharingStateStatusType.Ready) {
+      return 'primary'
     } else {
       return 'error'
     }

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,16 @@ 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 {
+  SharingStateStatusType,
+  type SharingStateType,
+} from 'features/companyData/companyDataApiSlice'
 
-export default function StatusInformation() {
+export default function StatusInformation({
+  error,
+}: {
+  readonly error?: SharingStateType
+}) {
   const { t } = useTranslation()
   const status = useSelector(statusSelector)
 
@@ -42,58 +49,99 @@ export default function StatusInformation() {
   const getStatusColor = (status: string | undefined) => {
     if (status === SharingStateStatusType.Success) {
       return 'success'
-    } else if (
-      status === SharingStateStatusType.Pending ||
-      status === SharingStateStatusType.Initial
-    ) {
+    } else if (status === SharingStateStatusType.Initial) {
       return 'warning'
+    } else if (status === SharingStateStatusType.Pending) {
+      return 'info'
+    } else if (status === SharingStateStatusType.Ready) {
+      return 'primary'
     } 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={getStatusColor(status)}
+            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>
+      )}
+    </>
   )
 }

src/features/companyData/companyDataApiSlice.tsx

@@ -165,7 +165,7 @@ export interface CompanyDataType {
       deliveryServiceType: string | undefined | null
       deliveryServiceQualifier: string | undefined | null
       deliveryServiceNumber: string | undefined | null
-    }
+    } | null
     confidenceCriteria: {
       sharedByOwner: true
       checkedByExternalDataSource: true
@@ -211,6 +211,10 @@ export enum SharingStateStatusType {
   Initial = 'Initial',
 }
 
+export interface ReadyStateRequestBody {
+  externalIds: string[]
+}
+
 export const apiSlice = createApi({
   reducerPath: 'rtk/companyData',
   baseQuery: fetchBaseQuery(apiBpdmGateQuery()),
@@ -241,7 +245,7 @@ export const apiSlice = createApi({
       }),
     }),
     updateCompanySiteAndAddress: builder.mutation<
-      CompanyDataResponse,
+      CompanyDataType[],
       CompanyDataType[]
     >({
       query: (data: CompanyDataType[]) => ({
@@ -250,6 +254,16 @@ export const apiSlice = createApi({
         body: data,
       }),
     }),
+    updateCompanyStatusToReady: builder.mutation<
+      CompanyDataType[],
+      ReadyStateRequestBody
+    >({
+      query: (data) => ({
+        url: '/sharing-state/ready',
+        method: 'POST',
+        body: data,
+      }),
+    }),
   }),
 })
 
@@ -258,4 +272,5 @@ export const {
   useFetchInputCompanyBusinessPartnersMutation,
   useFetchOutputCompanyBusinessPartnersMutation,
   useUpdateCompanySiteAndAddressMutation,
+  useUpdateCompanyStatusToReadyMutation,
 } = apiSlice