@star-insure/sdk 1.1.42 → 1.2.0

package/dist/components/forms/DateOfBirthField.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 interface Props {
+    name?: string;
+    id?: string;
+    onChange: (dateString: string) => void;
     value?: string;
-    onChange: (newValue: string) => void;
+    maxYear?: number;
+    showAge?: boolean;
 }
-export default function DateOfBirthField({ value, onChange }: Props): JSX.Element;
+export default function DateOfBirthField({ name, id, onChange, value, maxYear, showAge, }: Props): JSX.Element;
 export {};

package/dist/sdk.cjs.development.js

@@ -10,7 +10,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var uuid = require('uuid');
 var react = require('@headlessui/react');
-var lodashEs = require('lodash-es');
+var lodash = require('lodash');
 var cn = _interopDefault(require('classnames'));
 
 function parseDate(dateString) {
@@ -1474,67 +1474,57 @@ function TableRow(_ref) {
 }
 
 function DateOfBirthField(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange;
-
-  var _React$useState = React__default.useState({
-    day: (value == null ? void 0 : value.split("-")[2]) || '',
-    month: (value == null ? void 0 : value.split("-")[1]) || '',
-    year: (value == null ? void 0 : value.split("-")[0]) || ''
-  }),
-      dateOfBirth = _React$useState[0],
-      setDateOfBirth = _React$useState[1];
-
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'dob' : _ref$name,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'dob' : _ref$id,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      _ref$maxYear = _ref.maxYear,
+      maxYear = _ref$maxYear === void 0 ? 0 : _ref$maxYear,
+      _ref$showAge = _ref.showAge,
+      showAge = _ref$showAge === void 0 ? false : _ref$showAge;
   var dayOptions = [].concat(Array.from(Array(31).keys())).map(function (value) {
-    return lodashEs.padStart("" + (value + 1), 2, '0');
+    return lodash.padStart("" + (value + 1), 2, '0');
   });
   var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
   var monthOptions = [].concat(Array.from(Array(12).keys())).map(function (value) {
     return {
       title: months[value],
-      value: lodashEs.padStart("" + (value + 1), 2, '0')
+      value: lodash.padStart("" + (value + 1), 2, '0')
     };
-  });
-  var thisYear = new Date().getFullYear();
+  }); // Create 100 years of options, subtracting the maximum year if provided
+
   var yearOptions = [].concat(Array.from(Array(100).keys())).map(function (value) {
-    return (thisYear - value - 16).toString();
+    return maxYear ? maxYear - value : new Date().getFullYear() - value;
   });
 
-  function handleSelectChange(e) {
-    var _extends2;
-
+  function handleChange(e) {
     var _e$currentTarget = e.currentTarget,
         name = _e$currentTarget.name,
         value = _e$currentTarget.value;
-
-    var newDob = _extends({}, dateOfBirth, (_extends2 = {}, _extends2[name] = value, _extends2)); // Set local state
-
-
-    setDateOfBirth(newDob); // Format the date for the API
-
-    var formattedDate = newDob.year + "-" + newDob.month + "-" + newDob.day; // Call the upstream prop if we have all of the date parts
-
-    if (Object.values(newDob).every(function (value) {
-      return value !== '';
-    })) {
-      onChange(formattedDate);
-    } else {
-      // Otherwise, clear the value
-      onChange('');
-    }
+    var y = name.includes('year') ? value : year;
+    var m = name.includes('month') ? value : month;
+    var d = name.includes('day') ? value : day;
+    onChange(y + "-" + m + "-" + d);
   }
 
-  return React__default.createElement("label", {
-    className: "w-full"
+  var _ref2 = value ? value.split('-') : ['', '', ''],
+      year = _ref2[0],
+      month = _ref2[1],
+      day = _ref2[2];
+
+  var isValidDate = year && month && day && !isNaN(Date.parse(year + "-" + month + "-" + day));
+  return React__default.createElement("span", {
+    className: "flex flex-col gap-2"
   }, React__default.createElement("span", {
-    className: "relative mr-auto"
-  }, React__default.createElement("span", null, "Date of birth")), React__default.createElement("span", {
-    className: "flex space-x-4 border border-gray-300 rounded-lg mt-1 bg-white"
+    className: "flex space-x-4 border border-gray-300 rounded-lg bg-white"
   }, React__default.createElement("select", {
-    name: "day",
-    value: dateOfBirth.day,
+    name: name + "_day",
+    id: id + "_day",
+    value: day,
     className: "flex-grow focus:outline-none border-0",
-    onChange: handleSelectChange,
+    onChange: handleChange,
     required: true
   }, React__default.createElement("option", {
     value: ""
@@ -1544,10 +1534,11 @@ function DateOfBirthField(_ref) {
       value: option
     }, option);
   })), React__default.createElement("select", {
-    name: "month",
-    value: dateOfBirth.month,
+    name: name + "_month",
+    id: id + "_month",
+    value: month,
     className: "flex-grow focus:outline-none border-0",
-    onChange: handleSelectChange,
+    onChange: handleChange,
     required: true
   }, React__default.createElement("option", {
     value: ""
@@ -1557,10 +1548,11 @@ function DateOfBirthField(_ref) {
       value: option.value
     }, option.title);
   })), React__default.createElement("select", {
-    name: "year",
-    value: dateOfBirth.year,
+    name: name + "_year",
+    id: id + "_year",
+    value: year,
     className: "flex-grow focus:outline-none border-0",
-    onChange: handleSelectChange,
+    onChange: handleChange,
     required: true
   }, React__default.createElement("option", {
     value: ""
@@ -1569,7 +1561,9 @@ function DateOfBirthField(_ref) {
       key: option,
       value: option
     }, option);
-  }))));
+  }))), showAge && value && isValidDate && React__default.createElement("span", {
+    className: "font-bold"
+  }, "Age: ", calculateAge(value), " years"));
 }
 
 function MoneyField(_ref) {