@tenancy.nz/feature-ui 1.4.11 → 1.5.1

package/dist/cjs/components/PropertyCard.cjs

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
 var ui = require('@tenancy.nz/ui');
-var icons = require('@tenancy.nz/icons');
+var Stack = require('@mui/material/Stack');
+var BedRoundedIcon = require('@mui/icons-material/BedRounded');
+var BathtubRoundedIcon = require('@mui/icons-material/BathtubRounded');
+var DirectionsCarRoundedIcon = require('@mui/icons-material/DirectionsCarRounded');
 var IconLabel = require('./IconLabel.cjs');
 var PropertyCard_styled = require('./PropertyCard.styled.cjs');
 
@@ -36,7 +39,6 @@ function PropertyCard(_ref) {
       alignItems: "center"
     }
   }, rest), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyImage, null, /* @__PURE__ */React.createElement(ui.Media, {
-    as: "img",
     title: address,
     src: imgSrc
   })), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
@@ -53,6 +55,10 @@ function PropertyCard(_ref) {
         xs: "10px",
         sm: 0
       },
+      width: {
+        xs: "100%",
+        sm: "auto"
+      },
       "@media print": {
         ml: "auto"
       }
@@ -60,84 +66,99 @@ function PropertyCard(_ref) {
   }, /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(ui.Heading, {
     as: "h4",
     weight: "700"
-  }, rent), /* @__PURE__ */React.createElement(ui.Box, {
-    fontSize: "16px"
+  }, rent), /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: "600"
+    },
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center"
   }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bed"
+    startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
     variant: "inherit"
   }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bath"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
     variant: "inherit"
   }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
-      size: 21,
-      color: "inherit",
-      name: "car"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
     variant: "inherit"
   }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(ui.Box, {
-    paddingLeft: "25px",
-    borderLeft: "1px solid #00000040",
+    paddingLeft: "24px",
     display: "flex",
     direction: "column",
     sx: {
       gap: {
-        xs: "18px",
-        lg: "10px",
+        xs: 4,
+        lg: 2,
         xl: 0
       },
-      justifyContent: "space-between"
+      justifyContent: "space-between",
+      borderLeft: {
+        xs: "none",
+        sm: "1px solid"
+      },
+      borderLeftColor: {
+        xs: "transparent",
+        sm: "grey.300"
+      },
+      ml: {
+        xs: "auto",
+        sm: "0"
+      }
     }
-  }, viewingsCount && /* @__PURE__ */React.createElement(ui.Box, {
+  }, viewingsCount !== void 0 && /* @__PURE__ */React.createElement(ui.Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(ui.Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
     color: "textPrimary",
     as: "span",
-    weight: "600",
+    weight: "500",
     align: "right",
-    lineHeight: "15px"
+    variant: "body2"
   }, "Viewings")), /* @__PURE__ */React.createElement(ui.Heading, {
-    as: "h2"
-  }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(ui.Box, {
+    as: "h4"
+  }, viewingsCount)), enquiriesCount !== void 0 && /* @__PURE__ */React.createElement(ui.Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(ui.Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
+    variant: "body2",
     color: "textPrimary",
     as: "span",
-    weight: "600",
-    minWidth: "87px",
-    align: "right",
-    lineHeight: "15px"
+    weight: "500",
+    align: "right"
   }, "Enquiries")), /* @__PURE__ */React.createElement(ui.Heading, {
-    as: "h2"
+    as: "h4"
   }, enquiriesCount))))));
 }
 

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -5,7 +5,7 @@ var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+var StyledPropertyImage = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n    }\n\n    @media print {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n      display: block;\n    }\n  "])), theme.breakpoints.down("sm"), theme.breakpoints.up("sm"));
 });
@@ -13,9 +13,9 @@ var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3
   var theme = _ref2.theme;
   return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
 });
-var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n\n  gap: 18px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
+var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n  gap: 8px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
-  return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
+  return "\n    @media (min-width: ".concat(theme.breakpoints.values.sm, "px) {\n      align-items: flex-end;\n    }\n  ");
 });
 
 exports.StyledPropertyAmenitiesBox = StyledPropertyAmenitiesBox;

package/dist/cjs/components/analytics-doughnut-chart.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var doughnutChart = require('./doughnut-chart.cjs');
+var general = require('../utils/helpers/general.cjs');
+
+function AnalyticsDoughnutChart(_ref) {
+  var _ref$allhouseCount = _ref.allhouseCount,
+    allhouseCount = _ref$allhouseCount === void 0 ? 0 : _ref$allhouseCount,
+    _ref$bookMeCount = _ref.bookMeCount,
+    bookMeCount = _ref$bookMeCount === void 0 ? 0 : _ref$bookMeCount,
+    _ref$oneRoofCount = _ref.oneRoofCount,
+    oneRoofCount = _ref$oneRoofCount === void 0 ? 0 : _ref$oneRoofCount,
+    _ref$realEstateCount = _ref.realEstateCount,
+    realEstateCount = _ref$realEstateCount === void 0 ? 0 : _ref$realEstateCount,
+    _ref$tradeMeCount = _ref.tradeMeCount,
+    tradeMeCount = _ref$tradeMeCount === void 0 ? 0 : _ref$tradeMeCount,
+    _ref$manualCount = _ref.manualCount,
+    manualCount = _ref$manualCount === void 0 ? 0 : _ref$manualCount,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading;
+  var data = [{
+    color: "#0CC1A3",
+    count: general.parseChartCount(bookMeCount),
+    slug: "bookme",
+    title: "Tenant Portal"
+  }, {
+    color: "#000000",
+    count: general.parseChartCount(allhouseCount),
+    slug: "allhouse",
+    title: "Allhouse"
+  }, {
+    color: "#FF8500",
+    count: general.parseChartCount(oneRoofCount),
+    slug: "oneroof",
+    title: "OneRoof"
+  }, {
+    color: "#0098FF",
+    count: general.parseChartCount(realEstateCount),
+    slug: "realestate",
+    title: "realestate.co.nz"
+  }, {
+    color: "#4854D3",
+    count: general.parseChartCount(tradeMeCount),
+    slug: "trademe",
+    title: "Trade Me"
+  }, {
+    color: "#D9D9D9",
+    count: general.parseChartCount(manualCount),
+    slug: "manual",
+    title: "Manually Generated"
+  }];
+  return /* @__PURE__ */React.createElement(doughnutChart.default, {
+    data: data,
+    heading: heading
+  });
+}
+
+exports.default = AnalyticsDoughnutChart;

package/dist/cjs/components/doughnut-chart.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var reactUid = require('react-uid');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+var chart_js = require('primereact/chart.js');
+var ChartLegend = require('./ChartLegend.cjs');
+
+function DoughnutChart(_ref) {
+  var data = _ref.data,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$chartProps = _ref.chartProps,
+    chartProps = _ref$chartProps === void 0 ? {} : _ref$chartProps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "164px" : _ref$size;
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  var chartLabels = data.map(function (d) {
+    return d.title;
+  });
+  var chartValues = data.map(function (d) {
+    return d.count;
+  });
+  var chartColors = data.map(function (d) {
+    return d.color;
+  });
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      position: "relative"
+    },
+    alignItems: "center",
+    gap: 4
+  }, heading && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    color: "primary"
+  }, heading), /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: {
+      sm: "row"
+    },
+    gap: 12,
+    alignItems: "center"
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    width: size,
+    height: size,
+    overflow: "hidden",
+    position: "relative",
+    maxWidth: "100%",
+    sx: {
+      "&& > canvas": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(chart_js.Chart, _rollupPluginBabelHelpers.objectSpread2({
+    type: "doughnut",
+    data: {
+      labels: chartLabels,
+      datasets: [{
+        data: chartValues,
+        backgroundColor: chartColors,
+        hoverBackgroundColor: chartColors,
+        borderWidth: 0
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutoutPercentage: 64,
+      legend: {
+        display: false
+      },
+      animation: {
+        duration: 0
+      },
+      tooltips: {
+        backgroundColor: "#0E0044",
+        titleFontColor: "#fff",
+        bodyFontColor: "#fff",
+        xPadding: 8,
+        yPadding: 8,
+        bodyFontFamily: "Montserrat, sans-serif",
+        bodyFontStyle: "semibold",
+        bodyFontSize: 14,
+        borderColor: "transparent",
+        callbacks: {
+          labelColor: function labelColor(tooltipItem, chart) {
+            var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
+            var color = dataset.backgroundColor[tooltipItem.index];
+            return {
+              borderColor: color,
+              backgroundColor: color,
+              borderWidth: 0,
+              borderRadius: 5
+            };
+          }
+        }
+      }
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, chartProps))), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, data.map(function (item) {
+    var color = item.color,
+      count = item.count,
+      title = item.title;
+    return /* @__PURE__ */React.createElement(ChartLegend.default, {
+      key: reactUid.uid(item),
+      color: color,
+      count: count,
+      label: title
+    });
+  }))));
+}
+
+exports.default = DoughnutChart;

package/dist/cjs/index.cjs

@@ -9,7 +9,8 @@ var BookingTableRow = require('./components/BookingTableRow.cjs');
 var BookingTableRowHeader = require('./components/BookingTableRowHeader.cjs');
 var BookingTableRowSkeleton = require('./components/BookingTableRowSkeleton.cjs');
 var CheckedIcon = require('./components/CheckedIcon.cjs');
-var EnquiriesDoughnutChart = require('./components/EnquiriesDoughnutChart.cjs');
+var doughnutChart = require('./components/doughnut-chart.cjs');
+var analyticsDoughnutChart = require('./components/analytics-doughnut-chart.cjs');
 var GridList = require('./components/GridList.cjs');
 var Hidden = require('./components/Hidden.cjs');
 var IconLabel = require('./components/IconLabel.cjs');
@@ -27,7 +28,8 @@ exports.BookingTableRow = BookingTableRow.default;
 exports.BookingTableRowHeader = BookingTableRowHeader.default;
 exports.BookingTableRowSkeleton = BookingTableRowSkeleton.default;
 exports.CheckedIcon = CheckedIcon.default;
-exports.EnquiriesDoughnutChart = EnquiriesDoughnutChart.default;
+exports.DoughnutChart = doughnutChart.default;
+exports.AnalyticsDoughnutChart = analyticsDoughnutChart.default;
 exports.GridList = GridList.default;
 exports.Hidden = Hidden.default;
 exports.IconLabel = IconLabel.default;

package/dist/cjs/utils/helpers/general.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var parseChartCount = function parseChartCount(value) {
+  if (Number.isNaN(Number.parseInt(String(value), 10))) {
+    return 0;
+  }
+  if (value === 0) {
+    return 0;
+  }
+  return Math.max(Number(value), 1e-3);
+};
+
+exports.parseChartCount = parseChartCount;

package/dist/esm/components/AgentDetailsCard.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Box, Skeleton, Heading, Text } from '@tenancy.nz/ui';
-import { UserIcon, PhoneIcon, EnvelopeIcon } from '@tenancy.nz/icons';
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import PhoneRoundedIcon from '@mui/icons-material/PhoneRounded';
+import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
 import IconLabel from './IconLabel.js';
 
 function AgentDetailsCard(_ref) {
@@ -29,8 +31,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(UserIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Heading, {
     as: "h5",
@@ -41,8 +43,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(PhoneIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(PhoneRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
@@ -55,8 +57,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(EnvelopeIcon, {
-      size: "24px"
+    startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",

package/dist/esm/components/AnalyticsBox.js

@@ -1,8 +1,9 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { Paper, Box, Heading, Text } from '@tenancy.nz/ui';
+import Stack from '@mui/material/Stack';
+import { Paper, Heading, Text } from '@tenancy.nz/ui';
 
-var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text"];
+var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text", "sx"];
 function AnalyticsBox(_ref) {
   var width = _ref.width,
     minWidth = _ref.minWidth,
@@ -12,40 +13,48 @@ function AnalyticsBox(_ref) {
     label = _ref.label,
     amount = _ref.amount,
     text = _ref.text,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /* @__PURE__ */React.createElement(Paper, _objectSpread2(_objectSpread2({}, rest), {}, {
-    sx: {
+    inset: "medium",
+    sx: _objectSpread2(_objectSpread2({
       maxWidth: maxWidth,
       width: width,
       minWidth: minWidth,
-      border: border,
-      height: height || "100%",
+      border: border || "1px solid",
+      height: height,
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      padding: "16px"
-    }
-  }), /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
+      justifyContent: "center"
+    }, border ? {} : {
+      borderColor: "grey.300"
+    }), sx)
+  }), /* @__PURE__ */React.createElement(Stack, {
+    color: "text.primary"
+  }, /* @__PURE__ */React.createElement(Heading, {
     align: "center",
     weight: "700",
     as: "h3",
+    color: "primary",
     gutterBottom: true
   }, amount), /* @__PURE__ */React.createElement(Text, {
     align: "center",
-    weight: "400",
-    variant: "body2"
+    weight: "500",
+    variant: "body2",
+    color: "primary"
   }, label), text && /* @__PURE__ */React.createElement(Text, {
     align: "center",
     weight: "400",
+    color: "primary",
     sx: {
       fontSize: {
         xs: 8,
-        sm: 10,
-        xl: 14
+        sm: 10
       },
-      lineHeight: "15.6px",
+      lineHeight: "13px",
       maxWidth: "366px",
-      mt: "8px"
+      mt: 1
     }
   }, text)));
 }