Merge pull request #758 from Amsterdam/feature/WON-54-holiday-rental-…

…registrations

WON-54 Added holiday rental registrations component

src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import Placeholder from "../Data/components/Placeholder"
+import type { HolidayRentalRegistration } from "./types"
+import Registration from "./components/Registration"
+import LoadingRows from "../Data/components/LoadingRows"
+
+type Props = {
+  data: HolidayRentalRegistration[]
+  loading?: boolean
+  horizontalBordered?: boolean
+}
+
+/**
+ *  Detailed overview of Vakantieverhuur registraties.
+ */
+
+const HolidayRentalRegistrations: React.FC<Props> = ({
+  data, loading = false, horizontalBordered = true
+}) => {
+
+  if (loading) {
+    return <LoadingRows numRows={ 6 } />
+  }
+  return (
+    <>
+      { data === undefined || data.length === 0 ? (
+        <Placeholder>Geen registraties gevonden</Placeholder>
+      ) : (
+        <>
+          { data.map(registration => (
+            <Registration
+              key={ registration.registrationNumber }
+              registration={ registration }
+              horizontalBordered={ horizontalBordered }
+            />
+          )
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+export default HolidayRentalRegistrations

src/components/HolidayRentalRegistrations/components/Registration.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import styled from "styled-components"
+import DefinitionList  from "../../Data/DefinitionList/DefinitionList"
+import useValues from "./hooks/useValues"
+import type { HolidayRentalRegistration } from "../types"
+
+type Props = {
+  registration: HolidayRentalRegistration
+  horizontalBordered?: boolean
+}
+
+const StyledDiv = styled.div`
+  margin-top: 12px;
+`
+
+const Registration: React.FC<Props> = ({ registration, horizontalBordered }) => {
+  const values = useValues(registration) 
+  return (
+    <StyledDiv>
+      <DefinitionList 
+        title="Registratie"
+        data={ values }
+        horizontalBordered={ horizontalBordered }
+        headingSize="h4"
+      /> 
+    </StyledDiv>    
+  )
+}
+
+export default Registration

src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import type { HolidayRentalRegistration } from "../../types"
+import DateDisplay from "../../../DateDisplay/DateDisplay"
+
+const formatRequester = (requester: HolidayRentalRegistration["requester"]) => {
+  const { personalDetails } = requester
+  const name = `${ personalDetails?.firstName ?? "" } ${ personalDetails?.lastNamePrefix ? `${ personalDetails?.lastNamePrefix } ` : "" }${ personalDetails?.lastName ?? "" }`
+  return name
+}
+
+export default (registration: HolidayRentalRegistration) => {
+  const {
+    registrationNumber,
+    requester,
+    agreementDate,
+    createdAt,
+    requestForBedAndBreakfast
+  } = registration
+
+  const requesterName = formatRequester(requester)
+
+  const values = {
+    "Registratienummer": registrationNumber,
+    "Aanvrager": requesterName,
+    "E-mail": requester?.email,
+    "Aangemaakt": <DateDisplay date={createdAt} emptyText="-" />,
+    "Overeenkomstdatum": <DateDisplay date={agreementDate} emptyText="-" />,
+    "Verzoek voor B&B": requestForBedAndBreakfast ? "Ja" : "Nee"
+  }
+
+  return values
+}

src/components/HolidayRentalRegistrations/types.ts

@@ -0,0 +1,9 @@
+export type HolidayRentalRegistration = {
+  registrationNumber: string
+  requester: Record<string, any>
+  rentalHouse: Record<string, any>
+  requestForOther: boolean
+  requestForBedAndBreakfast: boolean
+  createdAt: string
+  agreementDate: string
+}

src/index.ts

@@ -1,6 +1,7 @@
 import type CaseEvent from "./components/EventsTimeline/CaseEvent"
 import type Permit from "./components/PermitsOverview/Permit"
 import type PermitType from "./components/PermitsSynopsis/PermitType"
+import type { HolidayRentalRegistration } from "./components/HolidayRentalRegistrations/types"
 import type { RentalReport } from "./components/HolidayRentalReports/types"
 import type { DefinitionListData } from "./components/Data/DefinitionList/DefinitionList"
 import type { ColumnType, Sorting } from "./components/Data/Table/types"
@@ -26,9 +27,11 @@ import Table from "./components/Data/Table/Table"
 import TextWithLinebreaks from "./components/TextWithLinebreaks/TextWithLinebreaks"
 import TextWithURLs from "./components/TextWithURLs/TextWithURLs"
 import * as Icons from "./components/Icons"
+import HolidayRentalRegistrations from "./components/HolidayRentalRegistrations/HolidayRentalRegistrations"
 
 export type {
   CaseEvent,
+  HolidayRentalRegistration,
   Permit,
   PermitType,
   RentalReport,
@@ -47,6 +50,7 @@ export {
   EventsTimeline,
   FinancialDisplay,
   getValidPermits,
+  HolidayRentalRegistrations,
   HolidayRentalReports,
   Icons,
   isValidDate,

src/stories/HolidayRentalRegistrations.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { HolidayRentalRegistrations } from "../index"
+import holidayRentalRegistrationsData from "./mockedData/holidayRentalRegistrationsData"
+
+const meta: Meta<typeof HolidayRentalRegistrations> = {
+  title: "HolidayRentalRegistrations",
+  component: HolidayRentalRegistrations
+}
+
+export default meta
+
+type Story = StoryObj<typeof HolidayRentalRegistrations>;
+
+export const Default: Story = {
+  args: {
+    data: holidayRentalRegistrationsData,
+    horizontalBordered: true,
+    loading: false
+  }
+}

src/stories/mockedData/holidayRentalRegistrationsData.ts

@@ -0,0 +1,176 @@
+import { HolidayRentalRegistration } from "../../components/HolidayRentalRegistrations/types"
+
+const holidayRentalRegistrationsData: HolidayRentalRegistration[] = [
+  {
+      "registrationNumber": "0363 98C3 E248 CBC3 E906",
+      "requester": {
+          "personType": "LegalEntity",
+          "email": "[email protected]",
+          "bsn": null,
+          "personalDetails": {
+              "firstName": "Luke",
+              "lastNamePrefix": null,
+              "lastName": "Skywalker"
+          }
+      },
+      "rentalHouse": {
+          "street": "Amstel",
+          "houseNumber": "1",
+          "houseLetter": null,
+          "houseNumberExtension": null,
+          "postalCode": "1011PN",
+          "city": "Amsterdam",
+          "shortName": "Amstel",
+          "adresseerbaarObjectIdentificatie": "0363010012143319",
+          "nummeraanduidingIdentificatie": "0363200012145295",
+          "openbareRuimteIdentificatie": "0363300000002701",
+          "woonplaatsIdentificatie": "3594",
+          "pandIdentificaties": [
+              "0363100012186092"
+          ],
+          "owner": null
+      },
+      "requestForOther": false,
+      "requestForBedAndBreakfast": true,
+      "createdAt": "2021-07-13T13:49:11.3915875Z",
+      "agreementDate": "2021-07-13T13:49:11.3915875Z"
+  },
+  {
+      "registrationNumber": "0363 A376 B039 B516 8EED",
+      "requester": {
+          "personType": "NaturalPerson",
+          "email": "[email protected]",
+          "bsn": null,
+          "personalDetails": {
+              "firstName": "Leia",
+              "lastNamePrefix": null,
+              "lastName": "Organa"
+          }
+      },
+      "rentalHouse": {
+          "street": "Amstel",
+          "houseNumber": "1",
+          "houseLetter": null,
+          "houseNumberExtension": null,
+          "postalCode": "1011PN",
+          "city": "Amsterdam",
+          "shortName": "Amstel",
+          "adresseerbaarObjectIdentificatie": "0363010012143319",
+          "nummeraanduidingIdentificatie": "0363200012145295",
+          "openbareRuimteIdentificatie": "0363300000002701",
+          "woonplaatsIdentificatie": "3594",
+          "pandIdentificaties": [
+              "0363100012186092"
+          ],
+          "owner": null
+      },
+      "requestForOther": false,
+      "requestForBedAndBreakfast": false,
+      "createdAt": "2022-08-24T09:20:46.4590698Z",
+      "agreementDate": "2022-08-24T09:20:46.4590698Z"
+  },
+  {
+      "registrationNumber": "0363 3BF1 1D4A 06A8 1DBC",
+      "requester": {
+          "personType": "NaturalPerson",
+          "email": "[email protected]",
+          "bsn": null,
+          "personalDetails": {
+              "firstName": "Obi-Wan",
+              "lastNamePrefix": null,
+              "lastName": "Kenobi"
+          }
+      },
+      "rentalHouse": {
+          "street": "Amstel",
+          "houseNumber": "1",
+          "houseLetter": null,
+          "houseNumberExtension": null,
+          "postalCode": "1011PN",
+          "city": "Amsterdam",
+          "shortName": "Amstel",
+          "adresseerbaarObjectIdentificatie": "0363010012143319",
+          "nummeraanduidingIdentificatie": "0363200012145295",
+          "openbareRuimteIdentificatie": "0363300000002701",
+          "woonplaatsIdentificatie": "3594",
+          "pandIdentificaties": [
+              "0363100012186092"
+          ],
+          "owner": null
+      },
+      "requestForOther": false,
+      "requestForBedAndBreakfast": true,
+      "createdAt": "2022-09-15T09:23:01.324015Z",
+      "agreementDate": "2022-09-15T09:23:01.324015Z"
+  },
+  {
+      "registrationNumber": "0363 D848 E18E ABDB 9AFF",
+      "requester": {
+          "personType": "NaturalPerson",
+          "email": "[email protected]",
+          "bsn": null,
+          "personalDetails": {
+              "firstName": "Chewbacca",
+              "lastNamePrefix": "from",
+              "lastName": "Kashyyyk"
+          }
+      },
+      "rentalHouse": {
+          "street": "Amstel",
+          "houseNumber": "1",
+          "houseLetter": null,
+          "houseNumberExtension": null,
+          "postalCode": "1011PN",
+          "city": "Amsterdam",
+          "shortName": "Amstel",
+          "adresseerbaarObjectIdentificatie": "0363010012143319",
+          "nummeraanduidingIdentificatie": "0363200012145295",
+          "openbareRuimteIdentificatie": "0363300000002701",
+          "woonplaatsIdentificatie": "3594",
+          "pandIdentificaties": [
+              "0363100012186092"
+          ],
+          "owner": null
+      },
+      "requestForOther": false,
+      "requestForBedAndBreakfast": true,
+      "createdAt": "2022-11-23T13:40:06.3829529Z",
+      "agreementDate": "2022-11-23T13:40:06.3829529Z"
+  },
+  {
+      "registrationNumber": "0363 4E71 131F A46A 3D9B",
+      "requester": {
+          "personType": "EuropeanCitizen",
+          "email": "[email protected]",
+          "bsn": null,
+          "personalDetails": {
+              "firstName": "R2-D2",
+              "lastNamePrefix": null,
+              "lastName": null
+          }
+      },
+      "rentalHouse": {
+          "street": "Amstel",
+          "houseNumber": "1",
+          "houseLetter": null,
+          "houseNumberExtension": null,
+          "postalCode": "1011PN",
+          "city": "Amsterdam",
+          "shortName": "Amstel",
+          "adresseerbaarObjectIdentificatie": "0363010012143319",
+          "nummeraanduidingIdentificatie": "0363200012145295",
+          "openbareRuimteIdentificatie": "0363300000002701",
+          "woonplaatsIdentificatie": "3594",
+          "pandIdentificaties": [
+              "0363100012186092"
+          ],
+          "owner": null
+      },
+      "requestForOther": false,
+      "requestForBedAndBreakfast": true,
+      "createdAt": "2024-11-28T10:43:23.0953603Z",
+      "agreementDate": "2024-11-28T10:43:23.0953603Z"
+  }
+]
+
+export default holidayRentalRegistrationsData