Merge pull request #2348 from Amsterdam/feature/91224-add-powerbrowser

91224

package.json

@@ -6,7 +6,7 @@
     "@amsterdam/amsterdam-react-final-form": "^0.1.140",
     "@amsterdam/asc-assets": "^0.38.0",
     "@amsterdam/asc-ui": "^0.38.0",
-    "@amsterdam/wonen-ui": "^1.0.43",
+    "@amsterdam/wonen-ui": "^1.0.50",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@reach/router": "^1.3.4",

src/app/features/cases/components/organisms/CaseDetail/CaseDetailSection.tsx

@@ -59,7 +59,7 @@ const CaseDetailSection: FC<Props> = ({ id, dataSource, title, data, footer, isB
               { hasLabel ? (
                   <>
                     <Label>{ key }</Label>
-                    { isBusy ? <InlineSkeleton /> : (value == null) ? <Value valid={ false } /> : <span>{ value }</span> }
+                    { isBusy ? <InlineSkeleton /> : (value == null) ? <Value valid={ false } /> : <span style={{ overflow: "hidden" }}>{ value }</span> }
                   </>
                 ) : (
                   <TwoColumns key={ String(key) + index }>{ value }</TwoColumns>

src/app/features/cases/components/organisms/CaseDetail/sections/Permits.tsx

@@ -1,33 +1,40 @@
-import React, { FC } from "react"
-import { PermitsOverview } from "@amsterdam/wonen-ui"
-import { useDecos, useCase } from "app/state/rest"
+import React from "react"
+import { PermitsOverview, PermitsSynopsis } from "@amsterdam/wonen-ui"
+import { useDecos, useCase, usePowerBrowser } from "app/state/rest"
 import { getBagId } from "../utils"
 import CaseDetailSection from "../CaseDetailSection"
-import { HrWide } from "../CaseDetailSectionStyles"
 
 type Props = {
   caseId: string
 }
 
-const Permits: FC<Props> = ({ caseId }) => {
+const Permits: React.FC<Props> = ({ caseId }) => {
   const { data: caseData } = useCase(caseId)
   const bagId = getBagId(caseData!)
-  const { data: decos, isBusy } = useDecos(bagId!, { lazy: !bagId })
+  const { data: decos, isBusy: loadingDecos } = useDecos(bagId!, { lazy: !bagId })
+  const { data: powerbrowser, isBusy: loadingPowerBrowser } = usePowerBrowser(bagId!, { lazy: !bagId })
+
+  const detailSection = [
+    [ "Databron", "Decos" ],
+    <PermitsOverview
+        permits={ decos?.permits || [] }
+        loading={ loadingDecos }
+        horizontalBordered={ false }
+      />,
+    [ "Databron", "PowerBrowser" ],
+    <PermitsSynopsis
+      permits={ powerbrowser || [] }
+      loading={ loadingPowerBrowser }
+      horizontalBordered={ false }
+    />
+  ]
 
   return (
     <CaseDetailSection
       id="vergunningen"
       title="Vergunningen"
-      dataSource="Decos"
-      isBusy={ isBusy }
-    >
-      <PermitsOverview
-        permits={ decos?.permits || [] }
-        loading={ isBusy }
-        horizontalBordered={ false }
-      />
-      <HrWide />
-    </CaseDetailSection>
+      data={ detailSection }
+    />
   )
 }
 

src/app/state/rest/index.ts

@@ -1,5 +1,5 @@
 import moment from "moment"
-import type { VakantieverhuurReportInformation, Permit } from "@amsterdam/wonen-ui"
+import type { VakantieverhuurReportInformation, Permit, PermitType } from "@amsterdam/wonen-ui"
 import useApiRequest from "./hooks/useApiRequest"
 import { makeGatewayUrl, useErrorHandler } from "./hooks/utils/utils"
 import currentDate from "../../features/shared/utils/currentDate"
@@ -311,6 +311,18 @@ export const useDecos = (bagId: string, options?: Options) => {
   })
 }
 
+// PowerBrowser permits for B&B
+export const usePowerBrowser = (bagId: string, options?: Options) => {
+  const handleError = useErrorHandler()
+  return useApiRequest<PermitType[]>({
+    ...options,
+    url: makeGatewayUrl([ "addresses", bagId, "permits-powerbrowser" ]),
+    groupName: "permits",
+    handleError,
+    isProtected: true
+  })
+}
+
 export const useMeldingen = (bagId: string, options?: Options) => {
   const params: any = {
     start_date: moment().subtract(1, "years").startOf("year").format()