react-cm-ui

import { includes, isEmpty, } from 'lodash'; import ClassNames from 'classnames'; import moment from 'moment-timezone'; import PropTypes from 'prop-types'; import React from 'react'; import { GENDER_PROP_TYPE, RECORD_TYPE_COLOR, RECORD_TYPE_PROP_TYPE, } from '../personPanel/personPanelConstants'; import { BEM_PERSON_CORE_MILESTONES, PERSON_CORE_MILESTONES_CLASSES, } from '../../global/constants'; import { ACCEPTED_CHRIST_DATE_PROP_TYPE, ACTIVE_IN_MISSIONS_DATE_PROP_TYPE, ATTENDED_CLASS101_DATE_PROP_TYPE, ATTENDED_CLASS201_DATE_PROP_TYPE, ATTENDED_CLASS301_DATE_PROP_TYPE, ATTENDED_CLASS401_DATE_PROP_TYPE, BAPTISM_DATE_PROP_TYPE, CONGREGATION_DATE_PROP_TYPE, DISABLE_POPOVER_DEFAULT_PROP, DISABLE_POPOVER_PROP_TYPE, FIRST_CONTACT_DATE_PROP_TYPE, FIRST_MINISTRY_JOIN_DATE_PROP_TYPE, FIRST_SMALL_GROUP_JOIN_DATE_PROP_TYPE, HAS_ACCEPTED_CHRIST_PROP_TYPE, HAS_SIGNED_MATURITY_COVENANT_PROP_TYPE, HAS_SIGNED_MEMBERSHIP_AGREEMENT_PROP_TYPE, HAS_SIGNED_MINISTRY_COVENANT_PROP_TYPE, HAS_SIGNED_MISSION_COVENANT_PROP_TYPE, HAS_TAKEN_CLASS101_PROP_TYPE, HAS_TAKEN_CLASS201_PROP_TYPE, HAS_TAKEN_CLASS301_PROP_TYPE, HAS_TAKEN_CLASS401_PROP_TYPE, ICON_COLOR_DEFAULT_PROP, ICON_COLOR_PROP_TYPE, ICON_SIZE_DEFAULT_PROP, ICON_SIZE_PROP_TYPE, INVERSE_DEFAULT_PROP, INVERSE_PROP_TYPE, IS_ACTIVE_IN_MISSIONS_PROP_TYPE, IS_BAPTISED_PROP_TYPE, IS_IN_MINISTRY_PROP_TYPE, IS_IN_SMALL_GROUP_PROP_TYPE, REMOVE_ACCEPTED_CHRIST_COLUMN_DEFAULT_PROP, REMOVE_ACCEPTED_CHRIST_COLUMN_PROP_TYPE, REMOVE_BAPTISM_COLUMN_DEFAULT_PROP, REMOVE_BAPTISM_COLUMN_PROP_TYPE, REMOVE_CLASS_COLUMN_DEFAULT_PROP, REMOVE_CLASS_COLUMN_PROP_TYPE, REMOVE_CONGREGATION_DATE_COLUMN_DEFAULT_PROP, REMOVE_CONGREGATION_DATE_COLUMN_PROP_TYPE, REMOVE_FIRST_CONTACT_DATE_COLUMN_DEFAULT_PROP, REMOVE_FIRST_CONTACT_DATE_COLUMN_PROP_TYPE, REMOVE_IN_MINISTRY_COLUMN_DEFAULT_PROP, REMOVE_IN_MINISTRY_COLUMN_PROP_TYPE, REMOVE_IN_TRIPS_COLUMN_DEFAULT_PROP, REMOVE_IN_TRIPS_COLUMN_PROP_TYPE, REMOVE_SMALL_GROUP_COLUMN_DEFAULT_PROP, REMOVE_SMALL_GROUP_COLUMN_PROP_TYPE, SIGNED_MATURITY_COVENANT_DATE_PROP_TYPE, SIGNED_MINISTRY_COVENANT_DATE_PROP_TYPE, SIGNED_MISSION_COVENANT_DATE_PROP_TYPE, } from './constants'; import { getIconSize } from './utils'; import dateUtils from '../../utils/dateUtils'; import Grid from '../../layout/grid'; import GridColumnAcceptedChrist from './gridColumnAcceptedChrist'; import GridColumnBaptised from './gridColumnBaptised'; import GridColumnClassBaseballDiamond from './gridColumnClassBaseballDiamond'; import GridColumnMinistry from './gridColumnMinistry'; import GridColumnSmallGroup from './gridColumnSmallGroup'; import GridColumnMissions from './gridColumnMissions'; import makeStyles from '../../styles/makeStyles'; import TimeFromNow from '../timeFromNow'; import Typography from '../typography'; const propTypes = { data: PropTypes.shape({ acceptedChristDate: ACCEPTED_CHRIST_DATE_PROP_TYPE, activeInMissionsDate: ACTIVE_IN_MISSIONS_DATE_PROP_TYPE, attendedClass101Date: ATTENDED_CLASS101_DATE_PROP_TYPE, attendedClass201Date: ATTENDED_CLASS201_DATE_PROP_TYPE, attendedClass301Date: ATTENDED_CLASS301_DATE_PROP_TYPE, attendedClass401Date: ATTENDED_CLASS401_DATE_PROP_TYPE, baptismDate: BAPTISM_DATE_PROP_TYPE, congregationDate: CONGREGATION_DATE_PROP_TYPE, firstContactDate: FIRST_CONTACT_DATE_PROP_TYPE, firstMinistryJoinDate: FIRST_MINISTRY_JOIN_DATE_PROP_TYPE, firstSmallGroupJoinDate: FIRST_SMALL_GROUP_JOIN_DATE_PROP_TYPE, gender: GENDER_PROP_TYPE, hasAcceptedChrist: HAS_ACCEPTED_CHRIST_PROP_TYPE, hasSignedMaturityCovenant: HAS_SIGNED_MATURITY_COVENANT_PROP_TYPE, hasSignedMembershipAgreement: HAS_SIGNED_MEMBERSHIP_AGREEMENT_PROP_TYPE, hasSignedMinistryCovenant: HAS_SIGNED_MINISTRY_COVENANT_PROP_TYPE, hasSignedMissionCovenant: HAS_SIGNED_MISSION_COVENANT_PROP_TYPE, hasTakenClass101: HAS_TAKEN_CLASS101_PROP_TYPE, hasTakenClass201: HAS_TAKEN_CLASS201_PROP_TYPE, hasTakenClass301: HAS_TAKEN_CLASS301_PROP_TYPE, hasTakenClass401: HAS_TAKEN_CLASS401_PROP_TYPE, isActiveInMissions: IS_ACTIVE_IN_MISSIONS_PROP_TYPE, isBaptised: IS_BAPTISED_PROP_TYPE, isInMinistry: IS_IN_MINISTRY_PROP_TYPE, isInSmallGroup: IS_IN_SMALL_GROUP_PROP_TYPE, recordType: RECORD_TYPE_PROP_TYPE, signedMaturityCovenantDate: SIGNED_MATURITY_COVENANT_DATE_PROP_TYPE, signedMinistryCovenantDate: SIGNED_MINISTRY_COVENANT_DATE_PROP_TYPE, signedMissionCovenantDate: SIGNED_MISSION_COVENANT_DATE_PROP_TYPE, }), className: PropTypes.string, disablePopover: DISABLE_POPOVER_PROP_TYPE, iconColor: ICON_COLOR_PROP_TYPE, iconSize: ICON_SIZE_PROP_TYPE, id: PropTypes.string, inverse: INVERSE_PROP_TYPE, isMobile: PropTypes.bool, // eslint-disable-next-line react/no-unused-prop-types parentConsumer: PropTypes.string, removeAcceptedChristColumn: REMOVE_ACCEPTED_CHRIST_COLUMN_PROP_TYPE, removeBaptismColumn: REMOVE_BAPTISM_COLUMN_PROP_TYPE, removeClassColumn: REMOVE_CLASS_COLUMN_PROP_TYPE, removeCongregationDateColumn: REMOVE_CONGREGATION_DATE_COLUMN_PROP_TYPE, removeFirstContactDateColumn: REMOVE_FIRST_CONTACT_DATE_COLUMN_PROP_TYPE, removeInMinistryColumn: REMOVE_IN_MINISTRY_COLUMN_PROP_TYPE, removeInTripsColumn: REMOVE_IN_TRIPS_COLUMN_PROP_TYPE, removeSmallGroupColumn: REMOVE_SMALL_GROUP_COLUMN_PROP_TYPE, }; const defaultProps = { data: null, className: undefined, disablePopover: DISABLE_POPOVER_DEFAULT_PROP, iconColor: ICON_COLOR_DEFAULT_PROP, iconSize: ICON_SIZE_DEFAULT_PROP, id: null, inverse: INVERSE_DEFAULT_PROP, isMobile: false, parentConsumer: undefined, removeAcceptedChristColumn: REMOVE_ACCEPTED_CHRIST_COLUMN_DEFAULT_PROP, removeBaptismColumn: REMOVE_BAPTISM_COLUMN_DEFAULT_PROP, removeClassColumn: REMOVE_CLASS_COLUMN_DEFAULT_PROP, removeCongregationDateColumn: REMOVE_CONGREGATION_DATE_COLUMN_DEFAULT_PROP, removeFirstContactDateColumn: REMOVE_FIRST_CONTACT_DATE_COLUMN_DEFAULT_PROP, removeInMinistryColumn: REMOVE_IN_MINISTRY_COLUMN_DEFAULT_PROP, removeInTripsColumn: REMOVE_IN_TRIPS_COLUMN_DEFAULT_PROP, removeSmallGroupColumn: REMOVE_SMALL_GROUP_COLUMN_DEFAULT_PROP, }; const useStyles = makeStyles((theme) => { const { palette, } = theme; const columnHorizontalPadding = 5.5; return { root: { backgroundColor: ({ backgroundTransparent, isMobile }) => { let backgroundColorValue; if (backgroundTransparent && !isMobile) { backgroundColorValue = 'transparent'; } else if (backgroundTransparent && isMobile) { backgroundColorValue = 'rgb(255, 255, 255, 0.16)'; } if (!backgroundTransparent) { backgroundColorValue = palette.background.primary; } return backgroundColorValue; }, }, column: { height: (props) => getIconSize({ isMobile: props.isMobile, iconSize: props.iconSize }), padding: `0 ${columnHorizontalPadding}px`, width: (props) => `${getIconSize({ isMobile: props.isMobile, iconSize: props.iconSize }) + (columnHorizontalPadding * 2)}px !important`, }, congregationDateColummn: { padding: `0 ${columnHorizontalPadding}px`, width: 'auto !important', }, congregationDateLabelTypography: { color: ({ backgroundTransparent }) => (backgroundTransparent ? palette.text.contrastText : palette.text.secondary ), }, congregationDateTypography: { color: ({ backgroundTransparent }) => backgroundTransparent && palette.text.contrastText, }, firstContactDateColumn: ({ parentConsumer, isMobile }) => { if (parentConsumer === 'personRecord') { return { padding: isMobile ? '0px 5px 0px 15px !important' : '10px 15px 10px 5px !important', width: 'auto !important', }; } return { flexGrow: 1, padding: `0 ${columnHorizontalPadding}px`, textAlign: 'right', width: 'auto !important', }; }, firstContactDateLabelTypography: { color: ({ backgroundTransparent }) => (backgroundTransparent ? palette.text.contrastText : palette.text.secondary ), }, firstContactDateTypography: { color: ({ backgroundTransparent }) => backgroundTransparent && palette.text.contrastText, }, dateContainers: { display: 'inline-block', textAlign: 'left', }, genderFemale: {}, genderMale: {}, genderUndefined: {}, grid: { margin: `0 -${columnHorizontalPadding}px !important`, width: 'auto', }, icon: ({ iconColor }) => ({ opacity: iconColor ? 0.25 : 1, display: 'flex !important', '&.ui.icon .icon-use-path': { fill: iconColor ? `${iconColor} !important` : palette.static.main, }, }), inverse: {}, isAdult: {}, isChild: {}, isStudent: {}, }; }); function PersonCoreMilestones(props) { const { data, className, disablePopover, iconColor, iconSize: iconSizeProp, id, inverse, isMobile, removeAcceptedChristColumn, removeBaptismColumn, removeClassColumn, removeCongregationDateColumn, removeFirstContactDateColumn, removeInMinistryColumn, removeInTripsColumn, removeSmallGroupColumn, } = props; const { acceptedChristDate, activeInMissionsDate, attendedClass101Date, attendedClass201Date, attendedClass301Date, attendedClass401Date, baptismDate, congregationDate: congregationDateProp, firstContactDate: firstContactDateProp, firstMinistryJoinDate, firstSmallGroupJoinDate, gender, hasAcceptedChrist, hasTakenClass101, hasTakenClass201, hasTakenClass301, hasTakenClass401, hasSignedMembershipAgreement, hasSignedMaturityCovenant, hasSignedMinistryCovenant, hasSignedMissionCovenant, isActiveInMissions, isBaptised, isInMinistry, isInSmallGroup, recordType, signedMaturityCovenantDate, signedMinistryCovenantDate, signedMissionCovenantDate, } = data; const classes = useStyles(props); if (isEmpty(data)) { return null; } const isAdult = recordType === 'adult'; const isFemale = includes(['f', 'F'], gender); const isMale = includes(['m', 'M'], gender); const rootClasses = ClassNames( PERSON_CORE_MILESTONES_CLASSES, classes.root, className, { [classes.genderFemale]: isFemale, [classes.genderMale]: isMale, [classes.genderUndefined]: !isFemale && !isMale, [classes.inverse]: inverse, [classes.isAdult]: recordType === 'adult', [classes.isChild]: recordType === 'child', [classes.isStudent]: recordType === 'student', }, ); const iconSize = getIconSize({ isMobile, iconSize: iconSizeProp }); const relativeTime = { s: '1 day', ss: '1 day', m: '1 day', mm: '1 day', h: '1 day', hh: '1 day', d: '1 day', dd: '%d days', M: '1 month', MM: '%d months', y: '1 year', yy: '%d years', }; const relativeTimeThreshold = { s: 60, m: 60, h: 24, d: 31, M: 12, }; const relativeTimeRounding = Math.floor; const userTimeZone = dateUtils.getDetectedTimeZone(); let atSaddlebackDate; let memberForDate; if (firstContactDateProp) { atSaddlebackDate = moment.utc(firstContactDateProp).tz(userTimeZone); } if (congregationDateProp) { memberForDate = moment.utc(congregationDateProp).tz(userTimeZone); } return ( <div className={rootClasses} id={id} > <Grid alignItems="center" className={classes.grid} spacing={0} > <GridColumnAcceptedChrist acceptedChristDate={acceptedChristDate} classes={{ root: classes.column, icon: classes.icon, }} disablePopover={disablePopover} hasAcceptedChrist={hasAcceptedChrist} iconSize={iconSize} inverse={inverse} isFemale={isFemale} isMale={isMale} recordType={recordType} removeAcceptedChristColumn={removeAcceptedChristColumn} /> <GridColumnBaptised baptismDate={baptismDate} classes={{ root: classes.column, icon: classes.icon, }} disablePopover={disablePopover} isBaptised={isBaptised} iconSize={iconSize} inverse={inverse} isFemale={isFemale} isMale={isMale} recordType={recordType} removeBaptismColumn={removeBaptismColumn} /> <GridColumnClassBaseballDiamond attendedClass101Date={attendedClass101Date} attendedClass201Date={attendedClass201Date} attendedClass301Date={attendedClass301Date} attendedClass401Date={attendedClass401Date} classes={{ root: classes.column, }} congregationDate={congregationDateProp} disablePopover={disablePopover} hasSignedMaturityCovenant={hasSignedMaturityCovenant} hasSignedMembershipAgreement={hasSignedMembershipAgreement} hasSignedMinistryCovenant={hasSignedMinistryCovenant} hasSignedMissionCovenant={hasSignedMissionCovenant} hasTakenClass101={hasTakenClass101} hasTakenClass201={hasTakenClass201} hasTakenClass301={hasTakenClass301} hasTakenClass401={hasTakenClass401} iconColor={iconColor} iconSize={iconSize} inverse={inverse} isAdult={isAdult} isFemale={isFemale} isMale={isMale} recordType={recordType} removeClassColumn={removeClassColumn} signedMaturityCovenantDate={signedMaturityCovenantDate} signedMinistryCovenantDate={signedMinistryCovenantDate} signedMissionCovenantDate={signedMissionCovenantDate} /> <GridColumnSmallGroup classes={{ root: classes.column, icon: classes.icon, }} disablePopover={disablePopover} firstSmallGroupJoinDate={firstSmallGroupJoinDate} iconSize={iconSize} inverse={inverse} isFemale={isFemale} isInSmallGroup={isInSmallGroup} isMale={isMale} recordType={recordType} removeSmallGroupColumn={removeSmallGroupColumn} /> <GridColumnMinistry classes={{ root: classes.column, icon: classes.icon, }} disablePopover={disablePopover} firstMinistryJoinDate={firstMinistryJoinDate} iconSize={iconSize} inverse={inverse} isFemale={isFemale} isInMinistry={isInMinistry} isMale={isMale} recordType={recordType} removeInMinistryColumn={removeInMinistryColumn} /> <GridColumnMissions activeInMissionsDate={activeInMissionsDate} classes={{ root: classes.column, icon: classes.icon, }} disablePopover={disablePopover} iconSize={iconSize} inverse={inverse} isActiveInMissions={isActiveInMissions} isFemale={isFemale} isMale={isMale} recordType={recordType} removeInTripsColumn={removeInTripsColumn} /> {atSaddlebackDate && !removeFirstContactDateColumn && isAdult && ( <Grid.Column className={ClassNames( `${BEM_PERSON_CORE_MILESTONES}--first_contact_date_column`, classes.firstContactDateColumn, )} > <Typography className={classes.firstContactDateLabelTypography} variant="h6" > At Saddleback </Typography> <span className={`${BEM_PERSON_CORE_MILESTONES}--at_saddleback_date font-size-xsmall font-weight-bold`} > <TimeFromNow className={classes.firstContactDateTypography} date={atSaddlebackDate} relativeTime={relativeTime} relativeTimeThreshold={relativeTimeThreshold} relativeTimeRounding={relativeTimeRounding} /> </span> </Grid.Column> )} {memberForDate && !removeCongregationDateColumn && isAdult && ( <Grid.Column className={ClassNames( `${BEM_PERSON_CORE_MILESTONES}--congregation_date_column`, classes.congregationDateColummn, )} > <Typography className={classes.congregationDateLabelTypography} variant="h6" > Member For </Typography> <span className={`${BEM_PERSON_CORE_MILESTONES}--member_for_date font-size-xsmall font-weight-bold`} > <TimeFromNow className={classes.congregationDateTypography} date={memberForDate} relativeTime={relativeTime} relativeTimeThreshold={relativeTimeThreshold} relativeTimeRounding={relativeTimeRounding} /> </span> </Grid.Column> )} </Grid> </div> ); } PersonCoreMilestones.propTypes = propTypes; PersonCoreMilestones.defaultProps = defaultProps; export default PersonCoreMilestones;