feat: add property panel informations

mfrederic · Mar 29, 2024 · efae3de · efae3de
1 parent 22c6cb2
commit efae3de
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 11 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -43,6 +43,7 @@
     "@reduxjs/toolkit": "^2.2.2",
     "axios": "^1.6.8",
     "axios-cache-interceptor": "^1.5.1",
+    "dayjs": "^1.11.10",
     "ethers": "^6.11.1",
     "graphql": "^16.8.1",
     "i18next": "^23.10.1",

diff --git a/frontend/src/components/Map/PropertyPanel.tsx b/frontend/src/components/Map/PropertyPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Divider, Drawer, Grid, Image } from "@mantine/core";
+import { Button, Divider, Drawer, Flex, Grid, Image } from "@mantine/core";
 import { AffixBtn } from "../Common/AffixBtn";
 import { useAppDispatch, useAppSelector } from "../../hooks/useInitStore";
 import { selectedMarker } from "../../store/marker/markerSelector";
@@ -7,6 +7,9 @@ import { Property } from "../../types/property";
 import { useEffect } from "react";
 import { useCurrencyValue } from "../../hooks/useCurrencyValue";
 import { useTranslation } from "react-i18next";
+import date from "../../utils/date";
+import { selectedLanguage } from "../../store/settings/settingsSelector";
+import { selectDifferentiateOwned } from "../../store/mapOptions/mapOptionsSelector";
 
 function toFixedStr(value: number, precision: number = 2) {
   return value.toFixed(precision).toLowerCase();
@@ -51,6 +54,8 @@ export function PropertyPanelContent({
   onClose: () => void;
 }) {
   const { t } = useTranslation('common');
+  const language = useAppSelector(selectedLanguage);
+  const differentiateOwned = useAppSelector(selectDifferentiateOwned);
 
   const {
     fullName,
@@ -65,10 +70,15 @@ export function PropertyPanelContent({
     annualPercentageYield,
     marketplaceLink,
     totalInvestment,
+    rentStartDate,
+    rentalType,
+    initialLaunchDate,
+    neighborhood,
   } = property;
 
-  const yearlyRent = netRentYearPerToken * ownedAmount;
-  const dailyRent = netRentDayPerToken * ownedAmount;
+  const consolidatedOwnedAmount = ownedAmount === 0 ? 1 : ownedAmount;
+  const yearlyRent = netRentYearPerToken * consolidatedOwnedAmount;
+  const dailyRent = netRentDayPerToken * consolidatedOwnedAmount;
   const ownedAmountPrice = ownedAmount * tokenPrice;
   const rentedUnitsPercent = rentedUnits * 100 / totalUnits;
 
@@ -97,21 +107,33 @@ export function PropertyPanelContent({
       entry: { label: 'propertyPanel.tokenAmount', value: totalTokens },
     },
     {
-      ownedOnly: true,
+      ownedOnly: false,
       entry: { label: 'propertyPanel.yield', value: `${toFixedStr(annualPercentageYield)}%` },
     },
     {
-      ownedOnly: true,
+      ownedOnly: false,
       entry: { label: 'propertyPanel.weeklyRent', value: useCurrencyValue(dailyRent * 7) },
     },
     {
-      ownedOnly: true,
+      ownedOnly: false,
       entry: { label: 'propertyPanel.yearlyRent', value: useCurrencyValue(yearlyRent) },
     },
     {
       ownedOnly: false,
       entry: { label: 'propertyPanel.rentedUnit', value: `${rentedUnits} / ${totalUnits} (${toFixedStr(rentedUnitsPercent)}%)` },
     },
+    {
+      ownedOnly: false,
+      entry: { label: 'propertyPanel.initialLaunchDate', value: date.utc(initialLaunchDate.date).locale(language).format('LL') },
+    },
+    {
+      ownedOnly: false,
+      entry: { label: 'propertyPanel.rentStart', value: date.utc(rentStartDate.date).locale(language).format('LL') },
+    },
+    {
+      ownedOnly: false,
+      entry: { label: 'propertyPanel.rentalType', value: t(`rentalType.${rentalType}`) },
+    },
     {
       ownedOnly: false,
       entry: { label: 'propertyPanel.assetPrice', value: useCurrencyValue(totalInvestment) },
@@ -127,7 +149,10 @@ export function PropertyPanelContent({
           </Grid.Col>
           <Grid.Col span={12}>
             <Drawer.Title className="!mb-4">
-              <strong className="px-4">{fullName}</strong>
+              <Flex align="start" direction="column" className="px-4">
+                <strong>{fullName}</strong>
+                { neighborhood && <small>{neighborhood}</small>}
+              </Flex>
             </Drawer.Title>
             <Drawer.Title>
               <Grid className="px-4">
@@ -182,9 +207,18 @@ export function PropertyPanelContent({
         </Grid>
       </Drawer.Header>
       <Drawer.Body className="!p-0 mb-20 sm:mb-0">
+        {
+          (ownedAmount === 0 || !differentiateOwned) &&
+          <Grid className="px-4 py-2 bg-gray-500 text-white">
+            <Grid.Col span={12} className="font-semibold">
+              <h2>{t('propertyPanel.notOwned')}</h2>
+            </Grid.Col>
+          </Grid>
+        }
         {entries.map(({ ownedOnly, notOwnedOnly, entry, icon }) => {
           if (
             (ownedOnly && ownedAmount <= 0) ||
+            (ownedOnly && !differentiateOwned) ||
             (notOwnedOnly && ownedAmount > 0)
           ) {
             return null;

diff --git a/frontend/src/i18next/locales/en/common.json b/frontend/src/i18next/locales/en/common.json
@@ -8,7 +8,15 @@
     "weeklyRent": "Weekly Rent",
     "yearlyRent": "Yearly Rent",
     "rentedUnit": "Rented Unit",
-    "assetPrice": "Asset Price"
+    "initialLaunchDate": "Initial Launch Date",
+    "rentStart": "Rent Start",
+    "rentalType": "Rental Type",
+    "assetPrice": "Asset Price",
+    "notOwned": "Not owned"
+  },
+  "rentalType": {
+    "short_term": "Short term",
+    "long_term": "Long term"
   },
   "propertyType": {
     "1": "Single Family",

diff --git a/frontend/src/i18next/locales/fr/common.json b/frontend/src/i18next/locales/fr/common.json
@@ -8,7 +8,15 @@
     "weeklyRent": "Loyer hebdomadaire",
     "yearlyRent": "Loyer annuel",
     "rentedUnit": "Unité louée",
-    "assetPrice": "Prix de l'actif"
+    "initialLaunchDate": "Date de lancement",
+    "rentStart": "Début de la location",
+    "rentalType": "Type de location",
+    "assetPrice": "Prix de l'actif",
+    "notOwned": "Non possédé"
+  },
+  "rentalType": {
+    "short_term": "Court terme",
+    "long_term": "Long terme"
   },
   "propertyType": {
     "1": "Individuel",

diff --git a/frontend/src/utils/date.ts b/frontend/src/utils/date.ts
@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+
+dayjs.extend(utc);
+dayjs.extend(localizedFormat)
+
+export default dayjs;