UNPKG

react-cm-ui

Version:
802 lines (703 loc) 32.8 kB
"use strict"; function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _lodash = require("lodash"); var _classnames = _interopRequireDefault(require("classnames")); var _momentTimezone = _interopRequireDefault(require("moment-timezone")); var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes")); var _propTypes = _interopRequireDefault(require("prop-types")); var _react = _interopRequireWildcard(require("react")); var _personPanelConstants = require("./personPanelConstants"); var _constants = require("../../global/constants"); var _address = _interopRequireDefault(require("../address/address")); var _collapse = _interopRequireDefault(require("../../utils/collapse/collapse")); var _dataGroups = _interopRequireDefault(require("../dataGroups")); var _emailLink = _interopRequireDefault(require("../emailLink")); var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles")); var _personCoreMilestones = _interopRequireDefault(require("../personCoreMilestones")); var _personPanelDetailsActionButton = _interopRequireDefault(require("./personPanelDetailsActionButton")); var _telephoneLink = _interopRequireDefault(require("../telephoneLink")); var _typography = _interopRequireDefault(require("../typography/typography")); function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } var propTypes = { /** * The content of the PersonPanelDetails. */ children: _propTypes["default"].node, /** * Override or extend the styles applied to PersonPanelDetails. */ classes: _propTypes["default"].shape({ root: _propTypes["default"].string }), /** * Assign additional class names to PersonPanelDetails. */ className: _propTypes["default"].string, /** * The data that the PersonPanelDetails uses to build the UI. */ data: _propTypes["default"].shape({ acceptedChristDate: _propTypes["default"].string, activeInMissionsDate: _propTypes["default"].string, addresses: _propTypes["default"].arrayOf(_propTypes["default"].shape({ address1: _propTypes["default"].string, address2: _propTypes["default"].string, city: _propTypes["default"].string, country: _propTypes["default"].string, countryAlpha2: _propTypes["default"].string, isPrimary: _propTypes["default"].bool, postalCode: _propTypes["default"].string, region: _propTypes["default"].string, regionCode: _propTypes["default"].string })), allergies: _propTypes["default"].string, attendedClass101Date: _propTypes["default"].string, attendedClass201Date: _propTypes["default"].string, attendedClass301Date: _propTypes["default"].string, attendedClass401Date: _propTypes["default"].string, baptismDate: _propTypes["default"].string, birthdate: _propTypes["default"].number, campus: _propTypes["default"].string, churchEntities: _propTypes["default"].arrayOf(_propTypes["default"].shape({})), commonlyAttendedService: _propTypes["default"].arrayOf(_propTypes["default"].shape({})), congregationDate: _propTypes["default"].oneOfType([_reactMomentProptypes["default"].momentString, _propTypes["default"].oneOf([null])]), deceasedDate: _propTypes["default"].number, emails: _propTypes["default"].arrayOf(_propTypes["default"].shape({ isPrimary: _propTypes["default"].bool, value: _propTypes["default"].string })), emergencyContactAddresses: _propTypes["default"].arrayOf(_propTypes["default"].shape({ value: _propTypes["default"].string, isPrimary: _propTypes["default"].bool })), emergencyContactEmails: _propTypes["default"].arrayOf(_propTypes["default"].shape({ value: _propTypes["default"].string, isPrimary: _propTypes["default"].bool })), emergencyContactName: _propTypes["default"].string, emergencyContactPhones: _propTypes["default"].arrayOf(_propTypes["default"].shape({ value: _propTypes["default"].string, isPrimary: _propTypes["default"].bool })), emergencyContactPreferMethod: _propTypes["default"].oneOf(['email', 'letter', 'none', 'phone', 'text']), emergencyContactRelation: _propTypes["default"].string, firstContactDate: _propTypes["default"].oneOfType([_reactMomentProptypes["default"].momentString, _propTypes["default"].oneOf([null])]), firstMinistryJoinDate: _propTypes["default"].string, firstSmallGroupJoinDate: _propTypes["default"].string, gender: _personPanelConstants.GENDER_PROP_TYPE, gradeLevel: _propTypes["default"].string, hasAcceptedChrist: _propTypes["default"].bool, hasSignedMaturityCovenant: _propTypes["default"].bool, hasSignedMembershipAgreement: _propTypes["default"].bool, hasSignedMinistryCovenant: _propTypes["default"].bool, hasSignedMissionCovenant: _propTypes["default"].bool, hasTakenClass101: _propTypes["default"].bool, hasTakenClass201: _propTypes["default"].bool, hasTakenClass301: _propTypes["default"].bool, hasTakenClass401: _propTypes["default"].bool, iconColor: _propTypes["default"].string, isActiveInMissions: _propTypes["default"].bool, isBaptised: _propTypes["default"].bool, isDoNotContact: _propTypes["default"].bool, isInMinistry: _propTypes["default"].bool, isInSmallGroup: _propTypes["default"].bool, phones: _propTypes["default"].arrayOf(_propTypes["default"].shape({ type: _propTypes["default"].oneOf([1, 2, 3, 'cell', 'home', 'work']), isPrimary: _propTypes["default"].bool, value: _propTypes["default"].string })), preferredService: _propTypes["default"].string, recordType: _personPanelConstants.RECORD_TYPE_PROP_TYPE, signedMembershipAgreementDate: _propTypes["default"].string, signedMaturityCovenantDate: _propTypes["default"].string, signedMinistryCovenantDate: _propTypes["default"].string, signedMissionCovenantDate: _propTypes["default"].string }), /** * The `id` of the PersonPanelDetails. */ id: _propTypes["default"].string, /** /** * If `true`, expand PersonPanelDetails, otherwise collapse it. */ isExpanded: _propTypes["default"].bool, /** * Flag used to handle mobile popover behaviors onTap */ isMobile: _propTypes["default"].bool, /** * For passing in custom Data Groups. */ otherDataGroups: _propTypes["default"].arrayOf(_propTypes["default"].shape({})), /** * Button `props` to setup the Select button. */ selectButtonProps: _propTypes["default"].shape({ className: _propTypes["default"].string, disable: _propTypes["default"].bool, id: _propTypes["default"].string, label: _propTypes["default"].string, onClick: _propTypes["default"].func, onKeyDown: _propTypes["default"].func, onPromptCancelClick: _propTypes["default"].func, onPromptConfirmClick: _propTypes["default"].func, prompt: _propTypes["default"].bool, promptId: _propTypes["default"].string }), /** * If `false`, select button isn't displayed for PersonPanelDetails. */ showSelectButton: _propTypes["default"].bool, /** * Button `props` to setup the View Record button. */ viewRecordButtonProps: _propTypes["default"].shape({ className: _propTypes["default"].string, id: _propTypes["default"].string, onClick: _propTypes["default"].func, onKeyDown: _propTypes["default"].func, onPromptCancelClick: _propTypes["default"].func, onPromptConfirmClick: _propTypes["default"].func, prompt: _propTypes["default"].bool, promptId: _propTypes["default"].string }) }; var defaultProps = { children: null, className: null, classes: null, data: {}, id: null, isExpanded: false, isMobile: false, otherDataGroups: null, selectButtonProps: { label: 'Select', disable: false }, showSelectButton: true, viewRecordButtonProps: {} }; function setAddressDataGroup(_ref) { var addresses = _ref.addresses, isChild = _ref.isChild, isDoNotContact = _ref.isDoNotContact; if (!(0, _lodash.isEmpty)(addresses) && !isDoNotContact && !isChild) { var addressRows = (0, _lodash.map)(addresses, function (address) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_address["default"], { address1: address.address1, address2: address.address2, city: address.city, country: address.country, countryAlpha2: address.countryAlpha2, postalCode: address.postalCode, region: address.region, regionCode: address.regionCode }); }, fieldName: address.isPrimary ? 'Primary' : 'Address' }; }); return [{ header: 'Address', rows: _toConsumableArray(addressRows) }]; } return []; } var setEmailDataGroup = function setEmailDataGroup(_ref2) { var emails = _ref2.emails, isChild = _ref2.isChild, isDoNotContact = _ref2.isDoNotContact; if (!(0, _lodash.isEmpty)(emails) && !isDoNotContact && !isChild) { var emailRows = (0, _lodash.map)(emails, function (email) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_emailLink["default"], { email: email.value }); }, fieldName: email.isPrimary ? 'Primary' : 'Email' }; }); return [{ header: 'Email', rows: _toConsumableArray(emailRows) }]; } return []; }; function getPhoneFieldName(type, isPrimary) { var fieldName; switch (type) { case 'cell': case 3: fieldName = 'Cell'; break; case 'home': case 1: fieldName = 'Home'; break; case 'work': case 2: fieldName = 'Work'; break; default: } if (isPrimary) { fieldName = 'Primary'; } return fieldName; } var setPhoneDataGroup = function setPhoneDataGroup(_ref3) { var isChild = _ref3.isChild, isDoNotContact = _ref3.isDoNotContact, phones = _ref3.phones; if (!(0, _lodash.isEmpty)(phones) && !isDoNotContact && !isChild) { var phoneRows = (0, _lodash.map)(phones, function (phone) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_telephoneLink["default"], { number: phone.value }); }, fieldName: getPhoneFieldName(phone.type, phone.isPrimary) }; }); return [{ header: 'Phone', rows: _toConsumableArray(phoneRows) }]; } return []; }; var setEmergencyContactDataGroup = function setEmergencyContactDataGroup(_ref4) { var emergencyContactAddresses = _ref4.emergencyContactAddresses, emergencyContactEmails = _ref4.emergencyContactEmails, emergencyContactName = _ref4.emergencyContactName, emergencyContactPhones = _ref4.emergencyContactPhones, emergencyContactRelation = _ref4.emergencyContactRelation, emergencyContactPreferMethod = _ref4.emergencyContactPreferMethod; var nameRow = []; if (emergencyContactName) { nameRow = [{ accessor: 'emergencyContactName', fieldName: 'Name' }]; } var relationRow = []; if (emergencyContactRelation) { relationRow = [{ accessor: 'emergencyContactRelation', fieldName: 'Relation' }]; } var preferMethodRow = []; var addressRows = []; if (emergencyContactAddresses) { if (emergencyContactPreferMethod === 'letter') { var primaryPreferredAddress = (0, _lodash.filter)(emergencyContactAddresses, 'isPrimary')[0]; preferMethodRow = [].concat(_toConsumableArray(preferMethodRow), [{ accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_emailLink["default"], { email: primaryPreferredAddress.value }); }, fieldName: "Prefers ".concat(emergencyContactPreferMethod) }]); } addressRows = (0, _lodash.map)(emergencyContactAddresses, function (address) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_address["default"], { address1: address.address1, address2: address.address2, city: address.city, country: address.country, countryAlpha2: address.countryAlpha2, postalCode: address.postalCode, region: address.region, regionCode: address.regionCode }); }, fieldName: 'Address' }; }); } var emailRows = []; if (emergencyContactEmails) { if (emergencyContactPreferMethod === 'email') { var primaryPreferredEmail = (0, _lodash.filter)(emergencyContactEmails, 'isPrimary')[0]; preferMethodRow = [].concat(_toConsumableArray(preferMethodRow), [{ accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_emailLink["default"], { email: primaryPreferredEmail.value }); }, fieldName: "Prefers ".concat(emergencyContactPreferMethod) }]); } emailRows = (0, _lodash.map)(emergencyContactEmails, function (email) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_emailLink["default"], { email: email.value }); }, fieldName: 'Email' }; }); } var phoneRows = []; if (emergencyContactPhones && emergencyContactPreferMethod) { if (emergencyContactPreferMethod === 'text' || emergencyContactPreferMethod === 'phone') { var primaryPreferredPhone = (0, _lodash.filter)(emergencyContactPhones, 'isPrimary')[0]; preferMethodRow = [].concat(_toConsumableArray(preferMethodRow), [{ accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_telephoneLink["default"], { number: primaryPreferredPhone.value }); }, fieldName: "Prefers ".concat(emergencyContactPreferMethod) }]); } phoneRows = (0, _lodash.map)(emergencyContactPhones, function (phone) { return { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_telephoneLink["default"], { number: phone.value }); }, fieldName: 'Phone' }; }); } if (!(0, _lodash.isEmpty)(nameRow) && !(0, _lodash.isEmpty)(relationRow) && (!(0, _lodash.isEmpty)(addressRows) || !(0, _lodash.isEmpty)(emailRows) || !(0, _lodash.isEmpty)(phoneRows))) { return [{ header: 'Emergency Contact', rows: [].concat(_toConsumableArray(nameRow), _toConsumableArray(relationRow), _toConsumableArray(preferMethodRow), _toConsumableArray(phoneRows), _toConsumableArray(emailRows), _toConsumableArray(addressRows)) }]; } return []; }; var setPersonalDataGroup = function setPersonalDataGroup(_ref5) { var allergies = _ref5.allergies, birthdate = _ref5.birthdate, campus = _ref5.campus, churchEntities = _ref5.churchEntities, commonlyAttendedService = _ref5.commonlyAttendedService, deceasedDate = _ref5.deceasedDate, gradeLevel = _ref5.gradeLevel, isChild = _ref5.isChild, isStudent = _ref5.isStudent, preferredService = _ref5.preferredService; var birthdayRow = []; if (birthdate) { birthdayRow = [{ accessor: function accessor() { return birthdate ? _momentTimezone["default"].unix(birthdate).utc().format('MM/DD/YYYY') : 'N/A'; }, fieldName: 'Birthday' }]; } var deceasedDateRow = []; if (deceasedDate) { deceasedDateRow = [{ accessor: 'deceasedDate', fieldName: 'Deceased' }]; } var commonlyAttendedServiceContractedRow = []; var personAllergiesContractedRow = []; var personGradeLevelRow = []; if (isStudent || isChild) { if (allergies) { personAllergiesContractedRow = [{ accessor: 'allergies', fieldName: 'Allergies' }]; } if (!(0, _lodash.isEmpty)(commonlyAttendedService)) { var daysOfTheWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; commonlyAttendedServiceContractedRow = { accessor: function accessor() { return /*#__PURE__*/_react["default"].createElement(_typography["default"], { variant: "body1" }, (0, _lodash.map)(commonlyAttendedService, function (item) { if (item && item.id && item.schedule && item.schedule.sequences && item.schedule.sequences.length > 0) { var churchEntity = (0, _lodash.find)(churchEntities, function (c) { return c.id === item.churchEntityId; }); var name = churchEntity && churchEntity.name; return /*#__PURE__*/_react["default"].createElement("span", { key: "commonly_attended_service-".concat(item.id) }, daysOfTheWeek[item.schedule.sequences[0].dayOfWeek], ' ', item.schedule.sequences[0].startTime ? (0, _momentTimezone["default"])(item.schedule.sequences[0].startTime, ['HH.mm:ss']).format('h:mm a') : null, ",", ' ', name); } return null; })); }, fieldName: 'Commonly Attended Services' }; } if (gradeLevel) { personGradeLevelRow = [{ accessor: 'gradeLevel', fieldName: 'Grade' }]; } } var preferredServiceContractedRow = []; if (!isChild && preferredService) { preferredServiceContractedRow = [{ accessor: 'preferredService', fieldName: 'Preferred Service' }]; } var homeCampusRow = []; if (campus) { homeCampusRow = [{ accessor: 'campus', fieldName: 'Home Campus' }]; } if (!(0, _lodash.isEmpty)(birthdayRow) || !(0, _lodash.isEmpty)(personGradeLevelRow) || !(0, _lodash.isEmpty)(homeCampusRow) || !(0, _lodash.isEmpty)(preferredServiceContractedRow) || !(0, _lodash.isEmpty)(commonlyAttendedServiceContractedRow) || !(0, _lodash.isEmpty)(deceasedDateRow) || !(0, _lodash.isEmpty)(personAllergiesContractedRow)) { return [{ header: 'Personal', rows: [].concat(_toConsumableArray(birthdayRow), _toConsumableArray(personGradeLevelRow), _toConsumableArray(homeCampusRow), _toConsumableArray(preferredServiceContractedRow), _toConsumableArray(commonlyAttendedServiceContractedRow), _toConsumableArray(deceasedDateRow), _toConsumableArray(personAllergiesContractedRow)) }]; } return []; }; var useStyles = (0, _makeStyles["default"])(function (theme) { var palette = theme.palette, borderRadius = theme.shape.borderRadius; return { actions: { marginTop: '33px' }, dataGroups: { margin: '22px -22px -22px !important' }, innerContainer: { padding: 22 }, isExpanded: {}, personCoreMilestones: { borderBottom: "1px solid ".concat(palette.border.secondary), margin: '-22px -21px 11px', padding: '18px 21px' }, root: { backgroundColor: palette.background.primary, borderRadius: "0 0 ".concat(borderRadius, "px ").concat(borderRadius, "px"), boxShadow: 'inset -1px -1px 0px 0px transparent, inset 1px 0px 0px 0px transparent', color: palette.text.primary, flexGrow: 1, padding: 0, transition: 'box-shadow 200ms ease-in-out', width: '100%', '&$isExpanded': { boxShadow: "inset -1px -1px 0px 0px ".concat(palette.border.secondary, ", inset 1px 0px 0px 0px ").concat(palette.border.secondary) } } }; }); function PersonPanelDetails(props) { var children = props.children, className = props.className, data = props.data, id = props.id, isExpanded = props.isExpanded, isMobile = props.isMobile, otherDataGroups = props.otherDataGroups, selectButtonProps = props.selectButtonProps, showSelectButton = props.showSelectButton, viewRecordButtonProps = props.viewRecordButtonProps; var classes = useStyles(props); var _useState = (0, _react.useState)([]), _useState2 = _slicedToArray(_useState, 2), dataGroupsColumns = _useState2[0], setDataGroupsColumns = _useState2[1]; var acceptedChristDate = data.acceptedChristDate, activeInMissionsDate = data.activeInMissionsDate, addresses = data.addresses, allergies = data.allergies, attendedClass101Date = data.attendedClass101Date, attendedClass201Date = data.attendedClass201Date, attendedClass301Date = data.attendedClass301Date, attendedClass401Date = data.attendedClass401Date, baptismDate = data.baptismDate, birthdate = data.birthdate, campus = data.campus, churchEntities = data.churchEntities, commonlyAttendedService = data.commonlyAttendedService, congregationDate = data.congregationDate, deceasedDate = data.deceasedDate, emails = data.emails, emergencyContactAddresses = data.emergencyContactAddresses, emergencyContactEmails = data.emergencyContactEmails, emergencyContactName = data.emergencyContactName, emergencyContactPhones = data.emergencyContactPhones, emergencyContactPreferMethod = data.emergencyContactPreferMethod, emergencyContactRelation = data.emergencyContactRelation, firstContactDate = data.firstContactDate, firstMinistryJoinDate = data.firstMinistryJoinDate, firstSmallGroupJoinDate = data.firstSmallGroupJoinDate, gender = data.gender, gradeLevel = data.gradeLevel, hasAcceptedChrist = data.hasAcceptedChrist, hasSignedMaturityCovenant = data.hasSignedMaturityCovenant, hasSignedMembershipAgreement = data.hasSignedMembershipAgreement, hasSignedMinistryCovenant = data.hasSignedMinistryCovenant, hasSignedMissionCovenant = data.hasSignedMissionCovenant, hasTakenClass101 = data.hasTakenClass101, hasTakenClass201 = data.hasTakenClass201, hasTakenClass301 = data.hasTakenClass301, hasTakenClass401 = data.hasTakenClass401, iconColor = data.iconColor, isActiveInMissions = data.isActiveInMissions, isBaptised = data.isBaptised, isDoNotContact = data.isDoNotContact, isInMinistry = data.isInMinistry, isInSmallGroup = data.isInSmallGroup, phones = data.phones, preferredService = data.preferredService, recordType = data.recordType, signedMembershipAgreementDate = data.signedMembershipAgreementDate, signedMaturityCovenantDate = data.signedMaturityCovenantDate, signedMinistryCovenantDate = data.signedMinistryCovenantDate, signedMissionCovenantDate = data.signedMissionCovenantDate; var isChild = recordType === 'child'; var isStudent = recordType === 'student'; (0, _react.useEffect)(function () { var personalDataGroup = setPersonalDataGroup({ allergies: allergies, birthdate: birthdate, campus: campus, churchEntities: churchEntities, commonlyAttendedService: commonlyAttendedService, deceasedDate: deceasedDate, gradeLevel: gradeLevel, isChild: isChild, isStudent: isStudent, preferredService: preferredService }); var addressDataGroup = setAddressDataGroup({ addresses: addresses, isChild: isChild, isDoNotContact: isDoNotContact }); var emailDataGroup = setEmailDataGroup({ emails: emails, isChild: isChild, isDoNotContact: isDoNotContact }); var phoneDataGroup = setPhoneDataGroup({ isChild: isChild, isDoNotContact: isDoNotContact, phones: phones }); var emergencyContactDataGroup = setEmergencyContactDataGroup({ emergencyContactAddresses: emergencyContactAddresses, emergencyContactEmails: emergencyContactEmails, emergencyContactName: emergencyContactName, emergencyContactPhones: emergencyContactPhones, emergencyContactPreferMethod: emergencyContactPreferMethod, emergencyContactRelation: emergencyContactRelation }); var newDataGroupsColumns = [].concat(_toConsumableArray(personalDataGroup), _toConsumableArray(phoneDataGroup), _toConsumableArray(emailDataGroup), _toConsumableArray(addressDataGroup), _toConsumableArray(emergencyContactDataGroup)); if (!(0, _lodash.isNil)(otherDataGroups)) { newDataGroupsColumns = [].concat(_toConsumableArray(personalDataGroup), _toConsumableArray(phoneDataGroup), _toConsumableArray(emailDataGroup), _toConsumableArray(addressDataGroup), _toConsumableArray(emergencyContactDataGroup), _toConsumableArray(otherDataGroups)); } else { newDataGroupsColumns = [].concat(_toConsumableArray(personalDataGroup), _toConsumableArray(phoneDataGroup), _toConsumableArray(emailDataGroup), _toConsumableArray(addressDataGroup), _toConsumableArray(emergencyContactDataGroup)); } setDataGroupsColumns(newDataGroupsColumns); }, [addresses, allergies, birthdate, campus, churchEntities, commonlyAttendedService, deceasedDate, emails, emergencyContactAddresses, emergencyContactEmails, emergencyContactName, emergencyContactPhones, emergencyContactPreferMethod, emergencyContactRelation, gradeLevel, isChild, isDoNotContact, isStudent, otherDataGroups, phones, preferredService]); var rootClasses = (0, _classnames["default"])(classes.root, _constants.UI_CLASS_NAME, ["".concat(_personPanelConstants.BEM_DETAILS_NAME)], className, _defineProperty({}, classes.isExpanded, isExpanded)); var shouldDataGroupsRender = !(0, _lodash.isEmpty)(data) && !(0, _lodash.isEmpty)(dataGroupsColumns); var shouldRenderSelectButton = showSelectButton && !(0, _lodash.isEmpty)(selectButtonProps); var shouldRenderViewButton = !(0, _lodash.isEmpty)(viewRecordButtonProps); return /*#__PURE__*/_react["default"].createElement("div", { className: rootClasses, id: id }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], { "in": isExpanded }, /*#__PURE__*/_react["default"].createElement("div", { className: classes.innerContainer }, /*#__PURE__*/_react["default"].createElement(_personCoreMilestones["default"], { className: classes.personCoreMilestones, data: { acceptedChristDate: acceptedChristDate, firstSmallGroupJoinDate: firstSmallGroupJoinDate, firstMinistryJoinDate: firstMinistryJoinDate, activeInMissionsDate: activeInMissionsDate, attendedClass101Date: attendedClass101Date, attendedClass201Date: attendedClass201Date, attendedClass301Date: attendedClass301Date, attendedClass401Date: attendedClass401Date, baptismDate: baptismDate, congregationDate: congregationDate, firstContactDate: firstContactDate, gender: gender, hasAcceptedChrist: hasAcceptedChrist, hasSignedMaturityCovenant: hasSignedMaturityCovenant, hasSignedMembershipAgreement: hasSignedMembershipAgreement, hasSignedMinistryCovenant: hasSignedMinistryCovenant, hasSignedMissionCovenant: hasSignedMissionCovenant, hasTakenClass101: hasTakenClass101, hasTakenClass201: hasTakenClass201, hasTakenClass301: hasTakenClass301, hasTakenClass401: hasTakenClass401, isActiveInMissions: isActiveInMissions, isBaptised: isBaptised, isInMinistry: isInMinistry, isInSmallGroup: isInSmallGroup, recordType: recordType, signedMembershipAgreementDate: signedMembershipAgreementDate, signedMaturityCovenantDate: signedMaturityCovenantDate, signedMinistryCovenantDate: signedMinistryCovenantDate, signedMissionCovenantDate: signedMissionCovenantDate }, iconColor: iconColor, iconSize: 16, isMobile: isMobile }), shouldDataGroupsRender && /*#__PURE__*/_react["default"].createElement(_dataGroups["default"], { className: classes.dataGroups, columns: dataGroupsColumns, data: data, moduleType: "page" }), children, (shouldRenderSelectButton || shouldRenderViewButton) && /*#__PURE__*/_react["default"].createElement("div", { className: classes.actions }, shouldRenderSelectButton && /*#__PURE__*/_react["default"].createElement(_personPanelDetailsActionButton["default"], _extends({ label: "Select" // eslint-disable-next-line react/jsx-props-no-spreading }, selectButtonProps)), shouldRenderViewButton && /*#__PURE__*/_react["default"].createElement(_personPanelDetailsActionButton["default"] // eslint-disable-next-line react/jsx-props-no-spreading , _extends({}, viewRecordButtonProps, { label: "View Record", outlined: true })))))); } PersonPanelDetails.propTypes = propTypes; PersonPanelDetails.defaultProps = defaultProps; var _default = PersonPanelDetails; exports["default"] = _default;