fix(partner network): interface change (eclipse-tractusx#1002)

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+- Partner Network
+  - Change interface of the partner network apis. add /members to the POST api and update the business logic accordingly
+
 ## 2.2.0-RC1
 
 ### Change

DEPENDENCIES

@@ -601,7 +601,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.29, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.2.0, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #16029
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023
@@ -684,7 +684,7 @@ npm/npmjs/@mui/material/5.15.15, MIT AND CC-BY-3.0, approved, #13175
 npm/npmjs/@mui/private-theming/5.15.14, MIT AND CC-BY-3.0, approved, #13174
 npm/npmjs/@mui/styled-engine/5.15.14, MIT AND CC-BY-3.0, approved, #13173
 npm/npmjs/@mui/system/5.15.15, MIT, approved, #13170
-npm/npmjs/@mui/types/7.2.14, MIT, approved, clearlydefined
+npm/npmjs/@mui/types/7.2.14, MIT, approved, #16017
 npm/npmjs/@mui/utils/5.15.14, MIT AND OFL-1.1 AND CC-BY-3.0, approved, #13927
 npm/npmjs/@mui/x-data-grid/6.19.11, MIT, approved, #14027
 npm/npmjs/@mui/x-date-pickers/6.19.9, MIT, approved, #14025

package.json

@@ -34,7 +34,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.29",
+    "@catena-x/portal-shared-components": "^3.1.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hookform/error-message": "^2.0.1",

src/components/pages/PartnerNetwork/components/BusinessPartnerDetailOverlay/BusinessPartnerDetail.tsx

@@ -18,21 +18,36 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useFetchBusinessPartnersQuery } from 'features/newPartnerNetwork/partnerNetworkApiSlice'
+import { useFetchBusinessPartnerAddressMutation } from 'features/newPartnerNetwork/partnerNetworkApiSlice'
 import BusinessPartnerDetailContent from './BusinessPartnerDetailContent'
+import { useEffect, useState } from 'react'
+import { type BusinessPartner } from 'features/partnerNetwork/types'
 
 const BusinessPartnerDetail = ({ id }: { id: string }) => {
-  const { data } = useFetchBusinessPartnersQuery({
-    page: 0,
-    args: {
-      expr: id,
-    },
-  })
+  const [bpMutation] = useFetchBusinessPartnerAddressMutation()
+  const [items, setItems] = useState<BusinessPartner[]>()
+  const callApi = async () => {
+    await bpMutation({
+      bpnLs: [id],
+      legalName: '',
+    })
+      .unwrap()
+      .then((data) => {
+        setItems(data.content)
+      })
+      .catch(() => {
+        setItems([])
+      })
+  }
+
+  useEffect(() => {
+    callApi()
+  }, [])
 
   return (
     <>
-      {data?.content?.length && (
-        <BusinessPartnerDetailContent selectedRowBPN={data.content[0]} />
+      {items?.length && (
+        <BusinessPartnerDetailContent selectedRowBPN={items[0]} />
       )}
     </>
   )

src/components/pages/PartnerNetwork/index.tsx

@@ -21,20 +21,20 @@
 import 'components/pages/PartnerNetwork/PartnerNetwork.scss'
 import { useTranslation } from 'react-i18next'
 import {
-  useFetchBusinessPartnersQuery,
+  useFetchBusinessPartnersMutation,
   useFetchBusinessPartnerAddressMutation,
 } from 'features/newPartnerNetwork/partnerNetworkApiSlice'
 import {
   PageHeader,
-  PageLoadingTable,
+  Table,
   type PaginResult,
 } from '@catena-x/portal-shared-components'
 import { useSelector } from 'react-redux'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { updatePartnerSelector } from 'features/control/updates'
 import { PartnerNetworksTableColumns } from 'components/pages/PartnerNetwork/partnerNetworkTableColumns'
 import type { BusinessPartner } from 'features/newPartnerNetwork/types'
-import Patterns from 'types/Patterns'
+import Patterns, { isBPN } from 'types/Patterns'
 import { useFetchMemberCompaniesQuery } from 'features/newPartnerNetwork/partnerNetworkPortalApiSlice'
 import {
   isContentPresent,
@@ -46,42 +46,94 @@ import { type BusinessPartnerAddressResponse } from 'features/partnerNetwork/typ
 const PartnerNetwork = () => {
   const { t } = useTranslation()
   const [expr, setExpr] = useState<string>('')
-  const [refresh, setRefresh] = useState<number>(0)
+  const [bpn, setBpn] = useState<string>('')
   const searchInputData = useSelector(updatePartnerSelector)
   const columns = PartnerNetworksTableColumns(t)
   const [mutationRequest] = useFetchBusinessPartnerAddressMutation()
   const { data } = useFetchMemberCompaniesQuery()
+  const [fetchMembers] = useFetchBusinessPartnersMutation()
 
   const validateSearchText = (text: string): boolean =>
     Patterns.SEARCH.test(text.trim())
+  const [page, setPage] = useState<number>(0)
+  const [allItems, setAllItems] = useState<BusinessPartner[]>([])
+  const [memberData, setMemberData] = useState<PaginResult<BusinessPartner>>()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [fetchArgs, setFetchArgs] = useState({
+    args: {
+      expr,
+    },
+    page,
+  })
 
-  const [allItems, setAllItems] = useState<BusinessPartner[]>()
+  const fetchAllMembers = async () => {
+    await fetchMembers(fetchArgs)
+      .unwrap()
+      .then((payload) => {
+        setMemberData(payload)
+        if (isContentPresent(payload) && payload.content.length === 0) {
+          setAllItems([])
+          setLoading(false)
+        } else {
+          setCountryAttributes(payload)
+        }
+      })
+      .catch(() => {
+        setAllItems([])
+      })
+    setLoading(false)
+  }
 
-  const fetchAndApply = async (cData: PaginResult<BusinessPartner>) => {
-    //BPDM response does not has content attribute. Check for it and proceed
-    if (isContentPresent(cData) && cData.content.length === 0) {
-      setAllItems([])
-      return
-    }
+  useEffect(() => {
+    setLoading(true)
+    if (data && data.length > 0) fetchAllMembers()
+  }, [data, fetchArgs])
 
-    const result = cData.content.map((x: BusinessPartner) => x.bpnl)
+  const setCountryAttributes = (payload: PaginResult<BusinessPartner>) => {
+    let finalObj = JSON.parse(JSON.stringify(payload?.content))
+    finalObj = addCountryAttribute(
+      finalObj,
+      payload.content as unknown as BusinessPartnerAddressResponse[]
+    )
+    finalObj = addMemberAttribute(finalObj, data)
+    setAllItems((i) => (page === 0 ? finalObj : i.concat(finalObj)))
+  }
+
+  const fetchAndApply = async (result: string[]) => {
     await mutationRequest({ bpnLs: result, legalName: '' })
       .unwrap()
-      .then((payload: PaginResult<BusinessPartnerAddressResponse>) => {
-        //new country attribute && member attributes based on the response
-        let finalObj = JSON.parse(JSON.stringify(cData?.content))
-        finalObj = addCountryAttribute(
-          finalObj,
-          payload.content as unknown as BusinessPartnerAddressResponse[]
-        )
-        finalObj = addMemberAttribute(finalObj, data)
-        setAllItems(finalObj)
+      .then((payload) => {
+        setCountryAttributes(payload)
       })
       .catch(() => {
         setAllItems([])
       })
+
+    setLoading(false)
   }
 
+  useEffect(() => {
+    setFetchArgs({
+      args: {
+        expr,
+      },
+      page,
+    })
+  }, [page, expr])
+
+  useEffect(() => {
+    if (bpn === '') {
+      setFetchArgs({
+        args: {
+          expr: '',
+        },
+        page: 0,
+      })
+    }
+    setLoading(true)
+    fetchAndApply([bpn])
+  }, [bpn])
+
   return (
     <main className="partner-network-page-container">
       <PageHeader
@@ -91,29 +143,42 @@ const PartnerNetwork = () => {
       />
 
       <section id="identity-management-id">
-        <PageLoadingTable<BusinessPartner, { expr: string }>
+        <Table
           autoFocus={false}
-          searchExpr={expr}
+          searchExpr={expr || bpn}
           toolbarVariant={'ultimate'}
           hasBorder={false}
           columnHeadersBackgroundColor={'transparent'}
           searchPlaceholder={t('content.partnernetwork.searchfielddefaulttext')}
           searchInputData={searchInputData}
           onSearch={(expr: string) => {
+            if (expr === '') {
+              setBpn('')
+              setExpr('')
+              setPage(0)
+            }
             if (expr !== '' && !validateSearchText(expr)) return
-            setRefresh(Date.now())
-            setExpr(expr)
+            setAllItems([])
+            if (isBPN(expr)) setBpn(expr)
+            else setExpr(expr)
           }}
           searchDebounce={1000}
           title={t('content.partnernetwork.tabletitle')}
           loadLabel={t('global.actions.loadmore')}
-          fetchHook={useFetchBusinessPartnersQuery}
-          fetchHookArgs={{ expr }}
-          fetchHookRefresh={refresh}
           getRowId={(row: { bpnl: string }) => row.bpnl ?? ''}
           columns={columns}
-          callbackToPage={fetchAndApply}
-          allItems={allItems}
+          loading={loading}
+          rows={allItems}
+          rowsCount={allItems?.length}
+          noRowsMsg={t('content.companyData.table.noRowsMsg')}
+          nextPage={() => {
+            setPage(page + 1)
+          }}
+          hasMore={
+            memberData?.meta &&
+            memberData.meta.page < memberData.meta.totalPages - 1
+          }
+          hideFooterPagination={true}
         />
       </section>
     </main>

src/features/newPartnerNetwork/partnerNetworkApiSlice.ts

@@ -25,44 +25,53 @@ import type {
   PaginFetchArgs,
 } from '@catena-x/portal-shared-components'
 import type { BusinessPartner } from './types'
-import Patterns from 'types/Patterns'
-import type { BusinessPartnerAddressResponse } from 'features/partnerNetwork/types'
+import { isBPN } from 'types/Patterns'
 
 export interface BusinessPartnerRequest {
   bpnLs: string[]
   legalName: string
 }
 
-const checkIfBPNLNumber = (text: string): boolean =>
-  Patterns.BPN.test(text.trim())
-
 export const apiSlice = createApi({
   reducerPath: 'rtk/admin/partnerNetwork',
   baseQuery: fetchBaseQuery(apiBpdmPoolQuery()),
   endpoints: (builder) => ({
     fetchBusinessPartnerAddress: builder.mutation<
-      PaginResult<BusinessPartnerAddressResponse>,
+      PaginResult<BusinessPartner>,
       BusinessPartnerRequest
     >({
       query: (body) => ({
-        url: '/legal-entities/search?page=0&size=30',
+        url: '/members/legal-entities/search?page=0&size=10',
         method: 'POST',
         body,
       }),
     }),
-    fetchBusinessPartners: builder.query<
+    fetchBusinessPartners: builder.mutation<
       PaginResult<BusinessPartner>,
       PaginFetchArgs
     >({
       query: (fetchArgs) => {
-        if (fetchArgs.args.expr && !checkIfBPNLNumber(fetchArgs.args.expr)) {
-          return `/legal-entities?page=${
-            fetchArgs.page
-          }&size=10&legalName=${fetchArgs.args!.expr}`
-        } else if (checkIfBPNLNumber(fetchArgs.args.expr)) {
-          return `/legal-entities/${fetchArgs.args!.expr}`
+        let url = ''
+        let body = {}
+        if (fetchArgs.args.expr && !isBPN(fetchArgs.args.expr)) {
+          url = `/members/legal-entities/search?page=${fetchArgs.page}&size=10`
+          body = {
+            bpnl: [],
+            legalName: fetchArgs.args.expr,
+          }
+        } else if (isBPN(fetchArgs.args.expr)) {
+          url = `/members/legal-entities/search?page=${fetchArgs.page}&size=10`
+          body = {
+            bpnl: [fetchArgs.args.expr],
+            legalName: '',
+          }
         } else {
-          return `/legal-entities?page=${fetchArgs.page}&size=10`
+          url = `/members/legal-entities/search?page=${fetchArgs.page}&size=10`
+        }
+        return {
+          url,
+          method: 'POST',
+          body,
         }
       },
       // Add an ESLint exception until there is a solution
@@ -96,5 +105,5 @@ export const apiSlice = createApi({
 
 export const {
   useFetchBusinessPartnerAddressMutation,
-  useFetchBusinessPartnersQuery,
+  useFetchBusinessPartnersMutation,
 } = apiSlice

yarn.lock

@@ -329,10 +329,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@catena-x/portal-shared-components@^3.0.29":
-  version "3.0.29"
-  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.29.tgz#85f83ce4a3d7b8d19c9719af9cd138a93070269a"
-  integrity sha512-VFzU+Krmt6doZWPLMn91FvqTXbF/bACKkdm7e+cAyGkiarTs4hL1iv4wjtgwSp/Uq0qZUKBL46N6Ouxyw5p3iQ==
+"@catena-x/portal-shared-components@^3.1.3":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.2.0.tgz#dcf4b3c4b3c2576801d6c3d9cb5f85ce8a2635d6"
+  integrity sha512-uy2jgIcGBcbWsg0MBN44b3W0MM6ZXrdmN5YeObGq9PW6D4fiGJviCGbqw12u0Zm20dNgchoCquArkJaSnv1uTw==
   dependencies:
     "@date-io/date-fns" "^3.0.0"
     "@emotion/react" "^11.11.4"