\r\n
\r\n
Company Information \r\n
Update information about your company here.
\r\n
\r\n\r\n
\r\n
Name \r\n \r\n
\r\n handleInfoChange(e, 'name')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n
\r\n\r\n
\r\n
Address \r\n \r\n
\r\n handleInfoChange(e, 'street1')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'street2')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'city')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'state')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'zipCode')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n
\r\n\r\n
\r\n
Contact \r\n \r\n
\r\n handleInfoChange(e, 'phone')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'fax')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n handleInfoChange(e, 'email')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': { border: '2px solid #195FFB' },\r\n },\r\n }}\r\n /> */}\r\n
\r\n
\r\n
Domain \r\n \r\n
\r\n
www.{companyInfo?.subDomain}.unionhub.com
\r\n
\r\n\r\n
\r\n handleSave()}\r\n style={{\r\n fontSize: 16,\r\n fontWeight: 400,\r\n padding: 20,\r\n height: '20px',\r\n width: 'auto',\r\n borderColor: '#195FFB',\r\n borderRadius: '33px',\r\n }}\r\n >\r\n Save Changes\r\n \r\n \r\n \r\n
\r\n
Personal Information \r\n
Update your personal details and photo here.
\r\n
\r\n\r\n
\r\n
Name \r\n \r\n
\r\n handleInfoChange(e, 'firstName')}\r\n />\r\n handleInfoChange(e, 'lastName')}\r\n />\r\n
\r\n\r\n
\r\n
Email Address \r\n \r\n
\r\n handleInfoChange(e, 'email')}\r\n />\r\n
\r\n
\r\n
Your Photo \r\n \r\n
\r\n
\r\n {props.thisUser?.firstName &&\r\n `${props.thisUser?.firstName[0]?.toUpperCase()}${props.thisUser?.lastName[0]?.toUpperCase()}`}\r\n \r\n\r\n {/* UPLOAD AREA */}\r\n\r\n e.preventDefault()}\r\n onDrop={handlePictureDrop}\r\n >\r\n \r\n \r\n Click to upload\r\n \r\n \r\n SVG, PNG, JPG, or GIF (max.800x400px)\r\n \r\n \r\n
\r\n
Job Title \r\n \r\n \r\n handleInfoChange(e, 'title')}\r\n />\r\n
\r\n\r\n {/* Role */}\r\n \r\n
Role \r\n \r\n \r\n \r\n Role \r\n x.roleId == userInfo?.roleId)?.roleId\r\n }\r\n label=\"Role\"\r\n onChange={(e) => handleInfoChange(e, 'roleId')}\r\n >\r\n {props?.roles &&\r\n props.roles?.map((role) => {\r\n return (\r\n \r\n \r\n {role.roleName}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n\r\n {/* Password */}\r\n \r\n
Password \r\n \r\n \r\n {editPassword && (\r\n <>\r\n handlePasswordInfoChange(e, 'oldPassword')}\r\n />\r\n handlePasswordInfoChange(e, 'newPassword')}\r\n onKeyDown={passwordKeyPressHandler}\r\n />\r\n \r\n handlePasswordInfoChange(e, 'confirmNewPassword')\r\n }\r\n onKeyDown={passwordKeyPressHandler}\r\n />\r\n \r\n )}\r\n {!editPassword && (\r\n <>\r\n setEditPassword(true)}\r\n style={{\r\n fontSize: 16,\r\n fontWeight: 400,\r\n padding: 20,\r\n height: '20px',\r\n width: 'auto',\r\n borderColor: 'primary.main',\r\n borderRadius: '33px',\r\n marginBottom: '10px',\r\n }}\r\n >\r\n Edit Password\r\n \r\n \r\n )}\r\n
\r\n \r\n handleSave()}\r\n style={{\r\n fontSize: 16,\r\n fontWeight: 400,\r\n padding: 20,\r\n height: '20px',\r\n width: 'auto',\r\n }}\r\n >\r\n Save Changes\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
Permissions Settings \r\n
Customize the permissions settings for users here.
\r\n
\r\n\r\n
\r\n
\r\n Role \r\n handleRoleChange(e, 'activeRole')}\r\n >\r\n {props.roles &&\r\n props.roles.map((role) => {\r\n return (\r\n \r\n \r\n {role.roleName}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n {activeRole == 1 && (\r\n <>\r\n
The most powerful role in UnionHub.
\r\n
\r\n System administrators can manage permissions and change fields\r\n that other agents can not. Magage further settings here.\r\n
\r\n \r\n )}\r\n\r\n {activeRole == 2 && (\r\n <>\r\n
Your most common power users of UnionHub.
\r\n
\r\n Enrollers have basic access of UnionHub and can be managed\r\n further here.\r\n
\r\n \r\n )}\r\n
\r\n
\r\n \r\n {props.roles &&\r\n props.roles\r\n ?.find((x) => x.roleId == activeRole)\r\n .permissions.map((permission) => {\r\n if (permission.id <= 11) {\r\n return (\r\n <>\r\n {permission.description} {' '}\r\n \r\n );\r\n }\r\n })}\r\n \r\n\r\n \r\n {props.roles &&\r\n props.roles\r\n ?.find((x) => x.roleId == activeRole)\r\n .permissions.map((permission) => {\r\n if (permission.id > 11) {\r\n return (\r\n <>\r\n {permission.description} {' '}\r\n \r\n );\r\n }\r\n })}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
Notification Settings \r\n
We may still send you important notifications about your account outside of your notification settings.
\r\n
\r\n \r\n
\r\n
New Ticket Assignments \r\n
These are notifications when you are assigned a new ticket.
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Ticket Response \r\n
These are notifications that a customer has responded to a ticket that is currently assigned to you or you are watching.
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Comments \r\n
These are notifications that someone has commented on a ticket that is currently assigned to you or you are watching.
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
Tags \r\n
These are notifications that someone has tagged you in a comment on a ticket.
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{params.value &&
;\r\n // // console.log('renderparam',params)\r\n // },\r\n // },\r\n {\r\n field: 'fullName',\r\n headerName: 'User',\r\n flex: 180,\r\n renderCell: (params) => {\r\n return (\r\n \r\n \r\n \r\n 0 ? `api/image/user/${params.row.id}` : ''\r\n }\r\n >\r\n {params.row.firstName &&\r\n `${params.row.firstName[0].toUpperCase()}${params.row.lastName[0].toUpperCase()}`}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {titleCase(params.row.fullName)}\r\n \r\n \r\n \r\n \r\n );\r\n },\r\n },\r\n {\r\n field: 'role',\r\n headerName: 'Role',\r\n flex: 80,\r\n renderCell: (params) => {\r\n return (\r\n \r\n \r\n {params.row.role}\r\n \r\n \r\n );\r\n },\r\n },\r\n {\r\n field: 'permissions',\r\n headerName: 'Permissions',\r\n flex: 100,\r\n renderCell: (params) => {\r\n return (\r\n \r\n \r\n {roleDict.get(params.row.permissions)}\r\n \r\n \r\n );\r\n },\r\n },\r\n {\r\n field: 'email',\r\n headerName: 'Email',\r\n flex: 200,\r\n renderCell: (params) => {\r\n return (\r\n \r\n \r\n {params.row.email}\r\n \r\n \r\n );\r\n },\r\n },\r\n ];\r\n\r\n const handleRowClick = (e) => {\r\n setSelectedRowId(e.id);\r\n const found = thisContext.allUsers.find(\r\n (element) => element.id == e.row.id\r\n );\r\n if (found) {\r\n found.fullName = found.firstName + ' ' + found.lastName;\r\n found.permissions = found.roleId;\r\n setProfileSummary(found);\r\n }\r\n // history.push(`/members/${e.id}`, { profile: true, profileId: e.id });\r\n };\r\n const [selectedRowId, setSelectedRowId] = React.useState(null);\r\n const getRowClassName = (params) => {\r\n //return params.id === selectedRowId ? 'highlighted-row' : '';\r\n return params.id === selectedRowId\r\n ? 'highlighted-row'\r\n : params.id % 2 === 0\r\n ? 'even'\r\n : 'odd';\r\n };\r\n\r\n return (\r\n <>\r\n \r\n handleTest2()}\r\n disabled={true}\r\n sx={settingsTeamStyles.employeeCardButton}\r\n >\r\n \r\n \r\n {/* DATA GRID */}\r\n \r\n \r\n {/*\r\n \r\n \r\n \r\n 0\r\n ? `api/image/user/${profileSummary.id}`\r\n : ''\r\n }\r\n sx={{\r\n bgcolor: 'primary.light',\r\n color: 'primary.main',\r\n fontFamily: 'Archivo',\r\n fontWeight: '600',\r\n fontSize: 64,\r\n width: '124px',\r\n height: '124px',\r\n }}\r\n >\r\n {profileSummary.firstName &&\r\n `${profileSummary.firstName[0].toUpperCase()}${profileSummary.lastName[0].toUpperCase()}`}\r\n \r\n \r\n \r\n \r\n {titleCase(profileSummary.fullName)}\r\n \r\n \r\n \r\n {profileSummary.isEnabled ? 'Active ' : 'Inactive'} | Agent\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n User Information\r\n \r\n \r\n\r\n \r\n \r\n \r\n Email\r\n \r\n \r\n \r\n \r\n {profileSummary.email}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Permissions\r\n \r\n \r\n \r\n \r\n {roleDict.get(profileSummary.permissions)}\r\n \r\n \r\n \r\n \r\n\r\n {/* The below content is a more filled out version of the design that we may want to bring back once we have more user data pulling from the backend. */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Employment*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Last login*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* No Data*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Permissions*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* {roleDict.get(profileSummary.permissions)}*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Activation Date*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* No Data*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Activated By*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* No Data*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/**/}\r\n {/* */}\r\n {/* Contact Information*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Email*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* {profileSummary.email}*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Phone*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* No Data*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* Ext.*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* No Data*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/*\r\n handleTest()}\r\n disabled={true}\r\n sx={settingsTeamStyles.employeeCardButton}\r\n style={{ float: 'left' }}\r\n >\r\n SEND PASSWORD RESET LINK\r\n \r\n handleTest2()}\r\n disabled={true}\r\n sx={settingsTeamStyles.employeeCardButton}\r\n style={{ float: 'right' }}\r\n >\r\n EDIT\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState, useContext } from 'react';\r\n\r\n//Services\r\n\r\n// Assets\r\n\r\n//MuiIcons\r\n\r\n//MuiComponents\r\nimport Button from '@mui/material/Button';\r\n\r\nimport { AgentColorModeContext } from '../../../../App';\r\n\r\nexport default function SettingsPersonalization(props) {\r\n const colorMode = useContext(AgentColorModeContext);\r\n\r\n return (\r\n <>\r\n {/* ACTUAL CONTENT */}\r\n\r\n \r\n \r\n
\r\n
Color Scheme: \r\n \r\n
\r\n colorMode.ToggleColorMode()}>\r\n Set to {colorMode.colorMode === 'light' ? 'Dark' : 'Light'} Mode\r\n \r\n *Beta \r\n
\r\n
\r\n {/* SIDE NAV */}\r\n {/* \r\n \r\n Settings \r\n setPageState({profile:true})} selected={pageState?.profile}>\r\n Profile\r\n \r\n setPageState({settings:true})} selected={pageState?.settings}>\r\n Company\r\n \r\n setPageState({permissions:true})} selected={pageState?.permissions}>\r\n Permissions\r\n \r\n setPageState({teams:true})} selected={pageState?.teams}>\r\n Teams\r\n \r\n \r\n Files\r\n \r\n \r\n Notifications\r\n \r\n
\r\n
*/}\r\n\r\n {/* MAIN CONTENT */}\r\n\r\n \r\n Settings \r\n \r\n \r\n {/*sx={{ borderBottom: 'solid 1px', borderColor: 'background.border' }}*/}\r\n \r\n \r\n \r\n PROFILE\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n PERSONALIZATION\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n USER MANAGEMENT\r\n \r\n \r\n
\r\n\r\n {/* Hide Notifications */}\r\n {/* \r\n
\r\n Notifications\r\n
\r\n
\r\n
\r\n Company\r\n
\r\n\r\n
\r\n
\r\n Permissions\r\n
\r\n
\r\n \r\n \r\n {activePage === 0 && thisUser && (\r\n
\r\n \r\n \r\n );\r\n}\r\n","import axios from 'axios';\r\nimport Settings from '../settings';\r\nimport authService, { authHeader } from './auth-service';\r\nimport { baseService } from './baseService';\r\n\r\nclass internalDashboardService extends baseService {\r\n //options\r\n getGroupPlans() {\r\n const url = Settings.API_URL + 'dashboard/groupplan';\r\n return this.get(url);\r\n }\r\n getEnrollmentWindows(groupPlanId) {\r\n const url = Settings.API_URL + 'dashboard/windows/' + groupPlanId;\r\n return this.get(url);\r\n }\r\n\r\n getEnrollmentReport(groupPlanId) {\r\n const url = Settings.API_URL + 'dashboard/enrollment/' + groupPlanId;\r\n return this.get(url);\r\n }\r\n getAllEnrollmentReports() {\r\n const url = Settings.API_URL + 'dashboard/enrollment/all';\r\n return this.get(url);\r\n }\r\n getEnrollmentMethodsByGroupPlan(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/method/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getPremiumsWithDescription(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/premiums/descriptions/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getPremiumsByType(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/premiums/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getEnrollmentsByState(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/state/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getCsvEnrollmentsByState(groupPlanId, enrollmentWindowId, enrollmentStateId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/state/download/${groupPlanId}/${enrollmentWindowId}/${enrollmentStateId}`;\r\n return this.get(url);\r\n }\r\n getEnrollmentGoal(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/goal/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getEnrolledByDate(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/methodbydate/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getCSVEnrolledByDate(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/methodbydate/download/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n getPayments(groupPlanId, enrollmentWindowId) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/payments/${groupPlanId}/${enrollmentWindowId}`;\r\n return this.get(url);\r\n }\r\n\r\n //POST ENROLLMENT QUERIES\r\n getPostEnrollCoverage(groupPlanId) {\r\n const url = `${Settings.API_URL}dashboard/postenrollment/coverage/${groupPlanId}`;\r\n return this.get(url);\r\n }\r\n getPostEnrollWorkingStatus(groupPlanId) {\r\n const url = `${Settings.API_URL}dashboard/postenrollment/workingstatus/${groupPlanId}`;\r\n return this.get(url);\r\n }\r\n getPostEnrollTickets(groupPlanId) {\r\n const url = `${Settings.API_URL}dashboard/postenrollment/tickets/${groupPlanId}`;\r\n return this.get(url);\r\n }\r\n getPostEnrollPayments(groupPlanId) {\r\n const url = `${Settings.API_URL}dashboard/postenrollment/paymentstats/${groupPlanId}`;\r\n return this.get(url);\r\n }\r\n\r\n getCSVPostEnrollPayments(groupPlanId) {\r\n const url = `${Settings.API_URL}dashboard/postenrollment/paymentstats/download/${groupPlanId}`;\r\n return this.get(url);\r\n }\r\n\r\n //EDIT GOALS - need to connect to existing backend method\r\n updateDashboardGoal(goal) {\r\n const url = `${Settings.API_URL}dashboard/enrollment/goal`;\r\n return this.put(url, goal);\r\n }\r\n}\r\n\r\nconst dashboardService = new internalDashboardService();\r\nexport default dashboardService;\r\n","const reportingDashboardStyles = {\r\n individualReportInfinityLoader: {\r\n position: \"absolute\",\r\n zIndex: 5,\r\n width: \"100%\",\r\n height: \"100%\",\r\n backgroundColor: \"#00000001\",\r\n backdropFilter: \"blur(6px)\",\r\n },\r\n smallReportContainer: {\r\n position: \"relative\",\r\n minHeight: \"250px\",\r\n },\r\n}\r\n\r\nexport default reportingDashboardStyles\r\n","import { Box } from '@mui/system';\r\nimport React, { useEffect, useRef, useState } from 'react';\r\n// import {RadialBarChart, RadialBar, Legend, Tooltip} from 'recharts'\r\nimport {\r\n PieChart,\r\n Pie,\r\n Cell,\r\n LabelList,\r\n BarChart,\r\n CartesianGrid,\r\n XAxis,\r\n YAxis,\r\n Bar,\r\n Label,\r\n ResponsiveContainer,\r\n Legend,\r\n Tooltip,\r\n PolarAngleAxis,\r\n RadialBarChart,\r\n RadialBar,\r\n LineChart,\r\n Line,\r\n} from 'recharts';\r\n\r\nimport {\r\n Paper,\r\n useTheme,\r\n Typography,\r\n Tabs,\r\n Tab,\r\n Button,\r\n Icon,\r\n} from '@mui/material';\r\nimport TextField from '@mui/material/TextField';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport IconButton from '@mui/material/IconButton';\r\n\r\n//MuiX\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\n\r\n//Mui icons\r\nimport { Circle } from '@mui/icons-material';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\n\r\n//Services\r\nimport dashboardService from '../../../../services/dashboard-service';\r\n\r\n//Our Components\r\nimport reportingDashboardStyles from '../reportingDashboardStyles';\r\nimport InfinityLoader from '../../../UH-loading-animation/InfinityLoader';\r\n\r\nexport default function EnrollmentReport(props) {\r\n const [loading, setLoading] = useState(false);\r\n const componentStyles = {\r\n dateAndButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'flex-start',\r\n },\r\n dateSelectorContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n color: 'text.secondary',\r\n },\r\n preSelectedDatePicker: {\r\n margin: ' 4px 16px 4px 0px',\r\n width: '155px',\r\n '& fieldset': {\r\n borderRadius: '8px',\r\n height: '42px',\r\n },\r\n '& .MuiSelect-select': {\r\n padding: '8px 12px',\r\n fontSize: '14px',\r\n },\r\n },\r\n customDatePicker: {\r\n minWidth: '150px',\r\n margin: ' 4px 16px 4px 0px',\r\n padding: '0px',\r\n '& .MuiOutlinedInput-input': {\r\n padding: '8px 12px',\r\n fontSize: '14px', // Adjust the font size\r\n },\r\n '& fieldset': {\r\n borderRadius: '8px',\r\n height: '42px',\r\n },\r\n },\r\n addIcon: {\r\n height: '20px',\r\n marginRight: '2px',\r\n },\r\n clearDateButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n clearDateButton: {\r\n borderRadius: '8px',\r\n },\r\n closeIcon: {\r\n color: 'text.secondary',\r\n height: '18px',\r\n marginRight: '4px',\r\n },\r\n clearDateText: { fontSize: '13px!important', color: 'text.secondary' },\r\n };\r\n const formatter = Intl.NumberFormat('en', { notation: 'compact' });\r\n const formatterSmall = Intl.NumberFormat('en', { notation: 'standard' });\r\n\r\n const [windowDateRange, setWindowDateRange] = useState({\r\n min: new Date(),\r\n max: new Date(),\r\n });\r\n const [report, setReport] = useState([]);\r\n const getReport = async () => {\r\n setLoading(true);\r\n let _report = await dashboardService.getEnrollmentReport(props.groupPlanId);\r\n if (_report) setReport(_report);\r\n setLoading(false);\r\n };\r\n const getAllGroupReports = async () => {\r\n setLoading(true);\r\n let _report = await dashboardService.getAllEnrollmentReports();\r\n if (_report) setReport(_report);\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n if (props.groupPlanId == 'all') {\r\n getAllGroupReports();\r\n } else if (props.groupPlanId > 0) {\r\n getReport();\r\n }\r\n }, [props.groupPlanId]);\r\n\r\n const [enrollmentStatus, setEnrollmentStatus] = useState([\r\n {\r\n status: 0,\r\n count: 0,\r\n },\r\n {\r\n status: 1,\r\n count: 0,\r\n },\r\n ]);\r\n const [enrollDate, setEnrollDate] = useState({});\r\n\r\n const [std, setStd] = useState(0);\r\n const [ltd, setLtd] = useState(0);\r\n const [ladd, setLadd] = useState({\r\n member: 0,\r\n spouse: 0,\r\n dependent: 0,\r\n });\r\n const [ci, setCI] = useState(0);\r\n\r\n const [lineOfCoverage, setLineOfCoverage] = useState([]);\r\n\r\n const createReports = () => {\r\n setLoading(true);\r\n let windowDateRangeMax = new Date('01/01/2020');\r\n let windowDateRangeMin = new Date();\r\n let submitted = 0;\r\n let notSubmitted = 0;\r\n let submittedDates = {};\r\n let overallTotal = 0;\r\n let _std = 0;\r\n let _ltd = 0;\r\n let _laddMember = 0;\r\n let _laddSpouse = 0;\r\n let _laddDependent = 0;\r\n let _ci = 0;\r\n if (report) {\r\n for (let member of report) {\r\n if (member?.enrollmentStateId == 1) notSubmitted += 1;\r\n else if (member?.enrollmentStateId == 2) {\r\n let preFormatDate = new Date(\r\n `${\r\n member?.submissionDate && member.submissionDate.slice(0, 10)\r\n }T00:00:00`\r\n );\r\n let groupPlanId = member?.groupPlanId || props.groupPlanId;\r\n let cleanDate = `${\r\n preFormatDate.getMonth() + 1\r\n }/${preFormatDate.getDate()}/${preFormatDate.getFullYear()}`;\r\n // if (submittedDates[groupPlanId]) {\r\n // if (submittedDates[groupPlanId][cleanDate]) {\r\n // submittedDates[groupPlanId][cleanDate] += 1;\r\n // } else {\r\n // submittedDates[groupPlanId][cleanDate] = 1;\r\n // }\r\n // } else {\r\n // submittedDates[groupPlanId] = {};\r\n // submittedDates[groupPlanId][cleanDate] = 1;\r\n // }\r\n if (submittedDates[cleanDate]) {\r\n submittedDates[cleanDate]['count'] += 1;\r\n if (submittedDates[cleanDate][groupPlanId]) {\r\n submittedDates[cleanDate][groupPlanId] += 1;\r\n } else {\r\n submittedDates[cleanDate][groupPlanId] = 1;\r\n }\r\n } else {\r\n submittedDates[cleanDate] = {};\r\n submittedDates[cleanDate]['count'] = 0;\r\n submittedDates[cleanDate][groupPlanId] = 1;\r\n }\r\n\r\n submitted += 1;\r\n if (member?.stdPlan != null) {\r\n _std += 1;\r\n }\r\n if (member?.ltdPlan != null) {\r\n _ltd += 1;\r\n }\r\n if (member?.ciPlan != null) {\r\n _ci += 1;\r\n }\r\n if (member?.memberCoverageAmount > 0) {\r\n _laddMember += 1;\r\n }\r\n if (member?.spouseCoverageAmount > 0) {\r\n _laddSpouse += 1;\r\n }\r\n if (member?.dependentCoverageAmount > 0) {\r\n _laddDependent += 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n setLadd({\r\n ...ladd,\r\n member: _laddMember,\r\n spouse: _laddSpouse,\r\n dependent: _laddDependent,\r\n });\r\n setStd(_std);\r\n setLtd(_ltd);\r\n setCI(_ci);\r\n\r\n setLineOfCoverage([\r\n { lineOfCoverage: 'Short Term Disability', count: _std },\r\n { lineOfCoverage: 'Long Term Disability', count: _ltd },\r\n { lineOfCoverage: 'Life & AD&D', count: _laddMember },\r\n { lineOfCoverage: 'Life & AD&D Spouse', count: _laddSpouse },\r\n { lineOfCoverage: 'Life & AD&D Dependent', count: _laddDependent },\r\n { lineOfCoverage: 'Critical Illness', count: ci },\r\n ]);\r\n\r\n setEnrollmentStatus([\r\n {\r\n status: 'Submitted',\r\n count: submitted,\r\n },\r\n {\r\n status: 'In Progress',\r\n count: notSubmitted,\r\n },\r\n ]);\r\n\r\n // let _enrollDateObj = {};\r\n let _enrollDate = [];\r\n // for (let [key, topVal] of Object.entries(submittedDates)) {\r\n // let groupPlanId = key;\r\n for (let [key, val] of Object.entries(submittedDates)) {\r\n let date = key;\r\n let obj = val;\r\n\r\n if (new Date(date).getTime() > new Date(windowDateRangeMax).getTime())\r\n windowDateRangeMax = new Date(date);\r\n if (\r\n new Date(date).getTime() < new Date(windowDateRangeMin).getTime() &&\r\n new Date(date).getTime() > new Date('01/01/2020').getTime()\r\n )\r\n windowDateRangeMin = new Date(date);\r\n let dateObj = {\r\n date: new Date(date).getTime(),\r\n count: 0,\r\n total: 0,\r\n };\r\n for (let [key, val] of Object.entries(obj)) {\r\n if (key == 'count') continue;\r\n let keyStr = `count${key}`;\r\n dateObj[keyStr] = val;\r\n dateObj['count'] += val;\r\n }\r\n overallTotal += dateObj.count;\r\n dateObj.total = overallTotal;\r\n _enrollDate.push(dateObj);\r\n }\r\n // }\r\n\r\n setEnrollDate(_enrollDate);\r\n setWindowDateRange({\r\n min: windowDateRangeMin,\r\n max: windowDateRangeMax,\r\n });\r\n if (dateRange.name == 'All') {\r\n setDateRange({\r\n name: 'All',\r\n startDate: windowDateRangeMin,\r\n endDate: windowDateRangeMax,\r\n });\r\n }\r\n // setEnrollDate(_enrollDateObj);\r\n setLoading(false);\r\n };\r\n\r\n const rebuildCoverageReport = () => {\r\n setLoading(true);\r\n let submitted = 0;\r\n let notSubmitted = 0;\r\n let _std = 0;\r\n let _ltd = 0;\r\n let _laddMember = 0;\r\n let _laddSpouse = 0;\r\n let _laddDependent = 0;\r\n let _ci = 0;\r\n if (report) {\r\n for (let member of report) {\r\n if (\r\n new Date(member?.validFrom).getTime() <\r\n new Date(dateRange.endDate).getTime() &&\r\n new Date(member?.validFrom).getTime() >\r\n new Date(dateRange.startDate).getTime()\r\n ) {\r\n if (member?.enrollmentStateId == 1) notSubmitted += 1;\r\n else if (member?.enrollmentStateId == 2) {\r\n let preFormatDate = new Date(\r\n `${\r\n member?.submissionDate && member.submissionDate.slice(0, 10)\r\n }T00:00:00`\r\n );\r\n let groupPlanId = member?.groupPlanId || props.groupPlanId;\r\n let cleanDate = `${\r\n preFormatDate.getMonth() + 1\r\n }/${preFormatDate.getDate()}/${preFormatDate.getFullYear()}`;\r\n // if (submittedDates[groupPlanId]) {\r\n // if (submittedDates[groupPlanId][cleanDate]) {\r\n // submittedDates[groupPlanId][cleanDate] += 1;\r\n // } else {\r\n // submittedDates[groupPlanId][cleanDate] = 1;\r\n // }\r\n // } else {\r\n // submittedDates[groupPlanId] = {};\r\n // submittedDates[groupPlanId][cleanDate] = 1;\r\n // }\r\n\r\n submitted += 1;\r\n if (member?.stdPlan != null) {\r\n _std += 1;\r\n }\r\n if (member?.ltdPlan != null) {\r\n _ltd += 1;\r\n }\r\n if (member?.ciPlan != null) {\r\n _ci += 1;\r\n }\r\n if (member?.memberCoverageAmount > 0) {\r\n _laddMember += 1;\r\n }\r\n if (member?.spouseCoverageAmount > 0) {\r\n _laddSpouse += 1;\r\n }\r\n if (member?.dependentCoverageAmount > 0) {\r\n _laddDependent += 1;\r\n }\r\n }\r\n }\r\n }\r\n setLadd({\r\n ...ladd,\r\n member: _laddMember,\r\n spouse: _laddSpouse,\r\n dependent: _laddDependent,\r\n });\r\n setStd(_std);\r\n setLtd(_ltd);\r\n setCI(_ci);\r\n setLineOfCoverage([\r\n { lineOfCoverage: 'Short Term Disability', count: _std },\r\n { lineOfCoverage: 'Long Term Disability', count: _ltd },\r\n { lineOfCoverage: 'Life & AD&D', count: _laddMember },\r\n { lineOfCoverage: 'Life & AD&D Spouse', count: _laddSpouse },\r\n { lineOfCoverage: 'Life & AD&D Dependent', count: _laddDependent },\r\n { lineOfCoverage: 'Critical Illness', count: ci },\r\n ]);\r\n setEnrollmentStatus([\r\n {\r\n status: 'Submitted',\r\n count: submitted,\r\n },\r\n {\r\n status: 'In Progress',\r\n count: notSubmitted,\r\n },\r\n ]);\r\n }\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n createReports();\r\n }, [report]);\r\n\r\n let data = [\r\n {\r\n Id: 0,\r\n MemberId: 0,\r\n LTDPlan: '',\r\n STDPlan: '',\r\n MemberCoverageAmount: 0,\r\n SpouseCoverageAmount: 0,\r\n DependentCoverageAmount: 0,\r\n SubmissionDate: '',\r\n SubmissionStatusId: 0,\r\n SubmissionStatus: 'Submitted',\r\n },\r\n {\r\n Id: 1,\r\n MemberId: 1,\r\n LTDPlan: '',\r\n STDPlan: '',\r\n MemberCoverageAmount: 0,\r\n SpouseCoverageAmount: 0,\r\n DependentCoverageAmount: 0,\r\n SubmissionDate: '',\r\n SubmissionStatusId: 1,\r\n SubmissionStatus: 'In Progress',\r\n },\r\n ];\r\n let theme = useTheme();\r\n\r\n const COLORS = [\r\n theme?.palette?.primary?.main,\r\n '#906FDC',\r\n '#5387FC',\r\n theme?.palette?.secondary?.main,\r\n ];\r\n const circleSize = 300;\r\n\r\n const CustomTooltip = ({ active, payload, label }) => {\r\n if (active && payload && payload.length) {\r\n let _label = new Date(label);\r\n if (_label == 'Invalid Date') _label = label;\r\n else {\r\n _label = `${\r\n _label.getMonth() + 1\r\n }/${_label.getDate()}/${_label.getFullYear()}`;\r\n }\r\n return (\r\n \r\n {`${_label}`}
\r\n\r\n {payload[0].dataKey == 'total' ? (\r\n \r\n {/* \r\n */}\r\n {formatterSmall.format(payload[0].value)} Total\r\n Enrollment(s)\r\n
\r\n ) : (\r\n Object.entries(payload[0].payload).map((key, value) => {\r\n let groupPlanId = key[0].replace('count', '');\r\n\r\n let groupPlan = props.groupPlans.find(\r\n (groupPlan) => groupPlan.id == groupPlanId\r\n );\r\n if (!groupPlan) groupPlan = { name: 'Total' };\r\n if (key[0] == 'date') return null;\r\n if (key[0] == 'total') return null;\r\n if (key[0] == 'lineOfCoverage') return null;\r\n return (\r\n \r\n {/* \r\n */}\r\n {formatterSmall.format(key[1])} {groupPlan?.name}{' '}\r\n Enrollment(s)\r\n
\r\n );\r\n })\r\n )}\r\n \r\n );\r\n }\r\n\r\n return null;\r\n };\r\n\r\n const [enrollmentGoal, setEnrollmentGoal] = useState([]);\r\n const getGoals = () => {\r\n let _enrollmentGoal = props?.goals?.find(\r\n (goal) => goal?.name == 'Total Enrollments'\r\n );\r\n setEnrollmentGoal(_enrollmentGoal?.goal);\r\n };\r\n\r\n const [value, setValue] = React.useState(1);\r\n\r\n const handleChange = (event, newValue) => {\r\n setValue(newValue);\r\n };\r\n\r\n useEffect(() => {\r\n getGoals();\r\n }, [props.goals]);\r\n\r\n //Date logic\r\n let today = new Date();\r\n const preSelectedDateRange = [\r\n {\r\n name: 'All',\r\n startDate: new Date(windowDateRange.min),\r\n endDate: new Date(windowDateRange.max),\r\n },\r\n {\r\n name: 'Past month',\r\n startDate: new Date(\r\n today.getFullYear(),\r\n today.getMonth() - 1,\r\n today.getDate()\r\n ),\r\n endDate: today,\r\n },\r\n {\r\n name: 'Past 6 months',\r\n startDate: new Date(\r\n today.getFullYear(),\r\n today.getMonth() - 6,\r\n today.getDate()\r\n ),\r\n endDate: today,\r\n },\r\n {\r\n name: 'Past 12 months',\r\n startDate: new Date(\r\n today.getFullYear(),\r\n today.getMonth() - 12,\r\n today.getDate()\r\n ),\r\n\r\n endDate: today,\r\n },\r\n {\r\n name: 'Past 24 months',\r\n startDate: new Date(\r\n today.getFullYear(),\r\n today.getMonth() - 24,\r\n today.getDate()\r\n ),\r\n\r\n endDate: today,\r\n },\r\n {\r\n name: 'Custom',\r\n startDate: null,\r\n endDate: null,\r\n },\r\n ];\r\n const [dateRange, setDateRange] = useState(preSelectedDateRange[0]);\r\n const [historyError, setHistoryError] = useState(null);\r\n\r\n const clearDateRangeFilter = async () => {\r\n setLoading(true);\r\n setDateRange({\r\n name: 'Past 24 months',\r\n startDate: preSelectedDateRange[4].startDate,\r\n endDate: preSelectedDateRange[4].endDate,\r\n });\r\n\r\n setLoading(false);\r\n };\r\n //handle pre-selected date range change\r\n const handleUpdatePreSelectedDateRange = async (e) => {\r\n setLoading(true);\r\n let selectedDateRange = preSelectedDateRange?.find(\r\n (range) => range.name === e.target.value\r\n );\r\n\r\n if (selectedDateRange?.name === 'Custom') {\r\n setDateRange({\r\n ...dateRange,\r\n name: 'Custom',\r\n startDate: dateRange.startDate,\r\n endDate: dateRange.endDate,\r\n });\r\n\r\n setLoading(false);\r\n return;\r\n }\r\n setDateRange(selectedDateRange);\r\n\r\n setLoading(false);\r\n };\r\n\r\n const [dateErrorOne, setDateErrorOne] = useState(null);\r\n const [dateErrorTwo, setDateErrorTwo] = useState(null);\r\n\r\n //Update history data with custom dates\r\n const handleDateRangeChange = async (e, type) => {\r\n setLoading(true);\r\n if (e?.getTime() != e?.getTime()) {\r\n // alert(\"Invalid date entered\")\r\n return;\r\n }\r\n let dateSelected = e;\r\n let validDate = dateSelected ? dateSelected.toJSON() : null;\r\n //issue with dobErrorOne and two, both are a step behind showing the error\r\n\r\n if (\r\n validDate\r\n // && !dateErrorOne\r\n // && !dateErrorTwo\r\n ) {\r\n setLoading(true);\r\n //update date range state\r\n setDateRange({\r\n ...dateRange,\r\n [type]: dateSelected,\r\n name: 'Custom',\r\n });\r\n } else {\r\n //invalid date entered\r\n //update date range state\r\n setDateRange({\r\n ...dateRange,\r\n [type]: null,\r\n name: 'Custom',\r\n });\r\n setLoading(false);\r\n }\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n rebuildCoverageReport();\r\n }, [dateRange.startDate, dateRange.endDate]);\r\n\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth);\r\n const [windowHeight, setWindowHeight] = useState(window.innerHeight);\r\n useEffect(() => {\r\n setLoading(true);\r\n window.addEventListener('resize', () => {\r\n setWindowWidth(window.innerWidth);\r\n setWindowHeight(window.innerHeight);\r\n });\r\n return () => {\r\n setLoading(false);\r\n window.removeEventListener('resize', () => {\r\n setWindowWidth(window.innerWidth);\r\n setWindowHeight(window.innerHeight);\r\n });\r\n };\r\n }, []);\r\n\r\n const [hoveredPlan, setHoveredPlan] = useState(null);\r\n\r\n return (\r\n <>\r\n {loading && (\r\n <>\r\n \r\n \r\n \r\n \r\n {enrollmentStatus.map((entry, index) => (\r\n | \r\n\r\n ))}\r\n \r\n \r\n \r\n */}\r\n\r\n \r\n \r\n enrollment.status == 'Submitted'\r\n )}\r\n startAngle={180}\r\n endAngle={0}\r\n >\r\n <>\r\n \r\n {enrollmentStatus &&\r\n enrollmentStatus?.find(\r\n (enrollment) => enrollment.status == 'Submitted'\r\n )?.count}\r\n \r\n \r\n Submitted Enrollments\r\n \r\n \r\n 0\r\n \r\n \r\n {enrollmentGoal}\r\n \r\n \r\n \r\n \r\n \r\n {enrollmentStatus &&\r\n enrollmentStatus?.find(\r\n (enrollment) => enrollment.status == 'In Progress'\r\n )?.count}\r\n \r\n in progress enrollments \r\n {/* enrollment.status == 'In Progress')?.count < 1}>Download In Progress Report */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* pre selected date range menu */}\r\n \r\n {preSelectedDateRange.map((option, index) => (\r\n \r\n {option.name}\r\n \r\n ))}\r\n \r\n\r\n {/* start date*/}\r\n\r\n \r\n handleDateRangeChange(e, 'startDate')}\r\n format=\"MM/dd/yyyy\"\r\n sx={componentStyles.customDatePicker}\r\n onError={(error) => setDateErrorOne(error)}\r\n slotProps={{\r\n textField: {\r\n InputLabelProps: {\r\n shrink: true,\r\n },\r\n },\r\n }}\r\n />\r\n \r\n\r\n {/* end date */}\r\n \r\n handleDateRangeChange(e, 'endDate')}\r\n format=\"MM/dd/yyyy\"\r\n sx={componentStyles.customDatePicker}\r\n onError={(error) => setDateErrorTwo(error)}\r\n slotProps={{\r\n textField: {\r\n InputLabelProps: {\r\n shrink: true,\r\n },\r\n },\r\n }}\r\n />\r\n \r\n\r\n {/* Clear Custom Dates */}\r\n {dateRange?.name === 'Custom' && (\r\n \r\n \r\n \r\n CLEAR FILTER\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n\r\n {value == 1 && (\r\n <>\r\n {Object.keys(enrollDate)?.length > 0 && (\r\n \r\n \r\n \r\n {\r\n let date = new Date(unixTime);\r\n return `${\r\n date.getMonth() + 1\r\n }/${date.getDate()}/${date.getFullYear()}\r\n `;\r\n }}\r\n label={{\r\n value: 'Submission Date',\r\n offset: '2',\r\n position: 'bottom',\r\n fill: theme?.palette?.text?.primary,\r\n }}\r\n domain={[\r\n dateRange.startDate.getTime() - 43200000,\r\n dateRange.endDate.getTime() + 43200000,\r\n ]}\r\n allowDataOverflow={true}\r\n >\r\n \r\n \r\n */}\r\n setLoading(true)}\r\n // onAnimationEnd={() => setLoading(false)}\r\n isAnimationActive={false}\r\n // key={index}\r\n // type={'monotone'}\r\n dataKey={`count`}\r\n // stroke={COLORS[index % COLORS.length]}\r\n // fill={`#${Math.floor(Math.random() * 0x195ffb)\r\n // .toString(16)\r\n // .padStart(6, '0')}`}\r\n fill={theme?.palette?.primary?.main}\r\n // fill={\r\n // hoveredPlan == null\r\n // ? COLORS[index % COLORS.length]\r\n // : hoveredPlan == `count${entry.id}`\r\n // ? '#78000a'\r\n // : COLORS[index % COLORS.length] + '8A'\r\n // }\r\n // fill={color}\r\n // dot={false}\r\n barSize={200}\r\n >\r\n {/* {props.groupPlans.map((entry, index) => {\r\n return (\r\n setLoading(true)}\r\n // onAnimationEnd={() => setLoading(false)}\r\n isAnimationActive={false}\r\n key={index}\r\n stackId={'a'}\r\n // type={'monotone'}\r\n dataKey={`count${entry.id}`}\r\n // stroke={COLORS[index % COLORS.length]}\r\n // fill={`#${Math.floor(Math.random() * 0x195ffb)\r\n // .toString(16)\r\n // .padStart(6, '0')}`}\r\n fill={\r\n hoveredPlan == null\r\n ? COLORS[index % COLORS.length]\r\n : hoveredPlan == `count${entry.id}`\r\n ? '#78000a'\r\n : COLORS[index % COLORS.length] + '8A'\r\n }\r\n // fill={color}\r\n // dot={false}\r\n barSize={200}\r\n >\r\n );\r\n })} */}\r\n {/* */}\r\n {/* */}\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n {value == 2 && (\r\n <>\r\n {lineOfCoverage.length > 0 && (\r\n // \r\n // \r\n // \r\n // {/* \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n\r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n {value == 3 && (\r\n <>\r\n {Object.keys(enrollDate)?.length > 0 && (\r\n \r\n \r\n \r\n {\r\n let date = new Date(unixTime);\r\n return `${\r\n date.getMonth() + 1\r\n }/${date.getDate()}/${date.getFullYear()}\r\n `;\r\n }}\r\n label={{\r\n value: 'Submission Date',\r\n offset: '2',\r\n position: 'bottom',\r\n fill: theme?.palette?.text?.primary,\r\n }}\r\n domain={[\r\n dateRange.startDate.getTime() - 43200000,\r\n dateRange.endDate.getTime() + 43200000,\r\n ]}\r\n allowDataOverflow={true}\r\n >\r\n {\r\n if (value > 1000) {\r\n return formatter.format(value);\r\n } else {\r\n return value;\r\n }\r\n }}\r\n // domain={[0.5, 'dataMax']}\r\n // scale={'sqrt'}\r\n >\r\n {/* \r\n */}\r\n setLoading(true)}\r\n // onAnimationEnd={() => setLoading(false)}\r\n isAnimationActive={false}\r\n // key={index}\r\n type={'monotone'}\r\n dataKey={`total`}\r\n // stroke={COLORS[index % COLORS.length]}\r\n\r\n stroke={theme?.palette?.primary?.main}\r\n strokeWidth={'4px'}\r\n dot={false}\r\n >\r\n {/* {props.groupPlans.map((entry, index) => {\r\n return (\r\n setLoading(true)}\r\n // onAnimationEnd={() => setLoading(false)}\r\n isAnimationActive={false}\r\n key={index}\r\n stackId={'a'}\r\n // type={'monotone'}\r\n dataKey={`count${entry.id}`}\r\n // stroke={COLORS[index % COLORS.length]}\r\n // fill={`#${Math.floor(Math.random() * 0x195ffb)\r\n // .toString(16)\r\n // .padStart(6, '0')}`}\r\n fill={\r\n hoveredPlan == null\r\n ? COLORS[index % COLORS.length]\r\n : hoveredPlan == `count${entry.id}`\r\n ? '#78000a'\r\n : COLORS[index % COLORS.length] + '8A'\r\n }\r\n // fill={color}\r\n // dot={false}\r\n barSize={200}\r\n >\r\n );\r\n })} */}\r\n {/* */}\r\n {/* */}\r\n \r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n}\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n//MuiIcons\r\n\r\n//Services\r\nimport authService from '../../../services/auth-service';\r\nimport userService from '../../../services/user-service';\r\nimport dashboardService from '../../../services/dashboard-service';\r\n\r\n//MuiComponents\r\nimport InputLabel from '@mui/material/InputLabel';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport FormControl from '@mui/material/FormControl';\r\nimport Select from '@mui/material/Select';\r\nimport { Paper, Typography } from '@mui/material';\r\nimport { Box } from '@mui/system';\r\nimport Fade from '@mui/material/Fade';\r\nimport Chip from '@mui/material/Chip';\r\n\r\n//Assets\r\n\r\n//Our components\r\nimport { thisUserContext } from '../nav-container/NavContainer';\r\nimport EnrollmentReport from '../Reporting/individual-reports/EnrollmentReport';\r\n\r\nexport default function Dashboard(props) {\r\n let myContext = useContext(thisUserContext);\r\n const [thisUser, setThisUser] = useState();\r\n let getThisUser = async () => {\r\n // let _thisUser = await userService.getMe()\r\n\r\n setThisUser(myContext.thisUser);\r\n };\r\n\r\n useEffect(() => {\r\n if (myContext) getThisUser();\r\n getGroupPlans();\r\n }, [myContext.thisUser]);\r\n\r\n const [groupPlans, setGroupPlans] = useState([]);\r\n const [thisGroupPlan, setThisGroupPlan] = useState(0);\r\n\r\n const getGroupPlans = async () => {\r\n let _groupPlans = await dashboardService.getGroupPlans();\r\n setGroupPlans(_groupPlans.filter((groupPlan) => groupPlan.isOpen == true));\r\n };\r\n\r\n useEffect(() => {\r\n if (groupPlans?.length == 0) getGroupPlans();\r\n }, []);\r\n\r\n //reset group plan selection to first in list\r\n useEffect(() => {\r\n setThisGroupPlan(groupPlans[0]?.id);\r\n }, [groupPlans]);\r\n\r\n const handleChange = (event) => {\r\n setThisGroupPlan(event.target.value);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n Welcome back\r\n \r\n , {thisUser?.firstName}! \r\n \r\n \r\n
Welcome to Unionhub Peak!
\r\n
\r\n Have feedback on UnionHub? Let us know by emailing us at\r\n feedback@unionhub.com!\r\n
\r\n
Thanks,
\r\n
The UnionHub Team
\r\n
\r\n
\r\n \r\n Enrollments \r\n \r\n \r\n Group Plan \r\n \r\n {groupPlans?.map(groupPlan => {\r\n return {groupPlan?.name} \r\n })}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n groupPlan?.id == thisGroupPlan)?.goals}/>\r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n {!forgotPassword && (\r\n <>\r\n
\r\n Log in to your account\r\n \r\n
\r\n Welcome back! Please enter your details.\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n {loading && (\r\n Login \r\n )}\r\n \r\n \r\n Forgot your password?\r\n \r\n {authError && (\r\n Incorrect email or password \r\n )}\r\n \r\n )}\r\n {forgotPassword && !forgotEmailSent && (\r\n <>\r\n Forgot your password? \r\n No worries, we'll send you reset instructions.
\r\n\r\n \r\n \r\n Reset Password\r\n \r\n \r\n \r\n Back to log in\r\n \r\n \r\n )}\r\n\r\n {forgotPassword && forgotEmailSent && (\r\n <>\r\n Check your email \r\n We sent a password reset link to {values.userName}
\r\n\r\n \r\n \r\n Open Email Application\r\n \r\n \r\n \r\n \r\n Back to Log In\r\n \r\n \r\n \r\n )}\r\n \r\n // \r\n //
\r\n // \r\n // 404\r\n // \r\n // \r\n // Oops!\r\n // \r\n // \r\n //
This is not the right page.
\r\n //
\r\n \r\n \r\n
\r\n 404 Error \r\n
\r\n
\r\n
\r\n We can't find that page \r\n
\r\n
\r\n Sorry, the page you are looking for doesn’t exist or has been moved. \r\n
\r\n
\r\n Go Back \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default NotFound","import React, { useEffect, useState } from \"react\";\r\nimport { useHistory, useLocation } from 'react-router-dom';\r\n\r\n\r\n//MuiIcons\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport NoVisibilityIcon from '@mui/icons-material/VisibilityOff';\r\n\r\n//Services\r\n\r\nimport registerService from '../../../services/register-service';\r\n\r\n//MuiComponents\r\nimport Button from \"@mui/material/Button\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport Alert from '@mui/material/Alert';\r\n\r\n//Assets \r\nimport fullColorLogo from '../../../assets/images/FullColorOnlyLogo.png'\r\n\r\n\r\nexport default function ResetPassword(props) {\r\n\r\n const location = useLocation();\r\n\r\n const [values, setValues] = useState({\r\n passwordOne: \"\",\r\n passwordTwo: \"\",\r\n })\r\n\r\n const handlePasswordOneChange = (event) => {\r\n event.persist();\r\n setValues((values) => ({\r\n ...values,\r\n passwordOne: event.target.value,\r\n }));\r\n }\r\n\r\n const handlePasswordTwoChange = (event) => {\r\n event.persist();\r\n setValues((values) => ({\r\n ...values,\r\n passwordTwo: event.target.value,\r\n }));\r\n }\r\n\r\n const handleResetPassword = async(event) => {\r\n if(values.passwordOne != values.passwordTwo){\r\n setAuthError(true)\r\n handleAuthError()\r\n } else {\r\n const guid = location.pathname.replace(\"/resetlink/\", \"\");\r\n await registerService.updatePassword(guid, values.password);\r\n }\r\n }\r\n\r\n //Password Visibility\r\n const [displayPassword, setDisplayPassword] = useState(false)\r\n\r\n const swapIcon = (e) => {\r\n //e.preventDefault();\r\n let inputElement = e.target.parentNode.children[0];\r\n if (displayPassword) {\r\n inputElement.setAttribute(\"type\", \"password\");\r\n setDisplayPassword(false);\r\n } else {\r\n inputElement.setAttribute(\"type\", \"text\");\r\n setDisplayPassword(true);\r\n }\r\n }\r\n\r\n // Password Icon\r\n const visibilityIcon =
\r\n const noVisibilityIcon =
\r\n const passwordIcon = displayPassword ? noVisibilityIcon : visibilityIcon;\r\n \r\n //Authentication Error\r\n const [authError, setAuthError] = useState(false)\r\n\r\n const handleAuthError = () => {\r\n const timeId = setTimeout(() => {\r\n // After 5 seconds set the show value to false\r\n setAuthError(false)\r\n }, 5000)\r\n\r\n return () => {\r\n clearTimeout(timeId)\r\n }\r\n}\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n <>\r\n
Set new password \r\n
Your new password must be different to previously used passwords.
\r\n\r\n
\r\n \r\n
\r\n\r\n
\r\n
\r\n Reset Password \r\n \r\n \r\n {authError &&\r\n Passwords do not match \r\n }\r\n \r\n
\r\n option.street1}\r\n renderOption={(props, option) => {\r\n return (\r\n \r\n {option.freeFormAddress}\r\n \r\n );\r\n }}\r\n renderInput={(params) => (\r\n props.toggleField('street2')}\r\n >\r\n \r\n )}\r\n {(props.showCollapsedField.street2 || props.memberInfo.street2) && (\r\n props.handleMemberInfoChange(e, 'street2')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n\r\n props.handleMemberInfoChange(e, 'city')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n props.handleMemberInfoChange(e, 'state')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n props.handleMemberInfoChange(e, 'zipCode')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195FFB',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n );\r\n}\r\n","const memberInfoStyles = {\r\n sectionContainer: {\r\n width: \"100%\",\r\n fontFamily: \"Archivo\",\r\n borderBottom: \"1px solid\",\r\n borderColor: \"background.border\",\r\n paddingBottom: \"16px\",\r\n margin: \"0 auto\",\r\n },\r\n sectionHeaderContainer: {\r\n borderBottom: \"1px solid\",\r\n borderColor: \"background.border\",\r\n padding: \"16px\",\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"center\",\r\n },\r\n sectionTitle: {\r\n fontSize: \"20px\",\r\n fontWeight: 500,\r\n fontFamily: \"Poppins\",\r\n color: \"text.primary\",\r\n },\r\n editButtonsContainer: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n // flexWrap: \"wrap\",\r\n justifyContent: \"flex-end\",\r\n paddingTop: \"5px\",\r\n },\r\n editButton: {\r\n fontSize: \"13px\",\r\n fontWeight: 500,\r\n padding: \"10px\",\r\n height: \"30px\",\r\n borderColor: \"primary.main\",\r\n \"&.MuiButtonBase-root.MuiButton-root\": {\r\n minWidth: \"44px\",\r\n },\r\n },\r\n cancelEditButton: {\r\n fontSize: \"13px\",\r\n fontWeight: 500,\r\n padding: \"5px\",\r\n height: \"30px\",\r\n width: \"60px\",\r\n },\r\n saveEditButton: {\r\n fontSize: \"13px\",\r\n fontWeight: 500,\r\n height: \"30px\",\r\n padding: \"10px\",\r\n borderColor: \"primary.main\",\r\n marginLeft: \"6px\",\r\n borderColor: \"primary.main\",\r\n \"&.MuiButtonBase-root.MuiButton-root\": {\r\n minWidth: \"44px\",\r\n },\r\n },\r\n}\r\n\r\nexport default memberInfoStyles\r\n","import React, { useEffect, useState, useLayoutEffect } from 'react';\r\nimport { format, differenceInCalendarYears, differenceInYears } from 'date-fns';\r\nimport { IMaskInput, IMaskMixin, IMask } from 'react-imask';\r\nimport { TransitionGroup } from 'react-transition-group';\r\n\r\n//MuiIcons\r\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\r\nimport EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';\r\nimport PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';\r\nimport AccessTimeIcon from '@mui/icons-material/AccessTime';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport VisibilityOffIcon from '@mui/icons-material/VisibilityOff';\r\nimport HomeWorkIcon from '@mui/icons-material/HomeWork';\r\nimport LanguageIcon from '@mui/icons-material/Language';\r\nimport CakeIcon from '@mui/icons-material/Cake';\r\nimport PersonIcon from '@mui/icons-material/Person';\r\nimport AccessibilityIcon from '@mui/icons-material/Accessibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\r\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport ShieldIcon from '@mui/icons-material/Shield';\r\nimport LockIcon from '@mui/icons-material/Lock';\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Select from '@mui/material/Select';\r\nimport TextField from '@mui/material/TextField';\r\nimport {\r\n Box,\r\n Collapse,\r\n FormControl,\r\n IconButton,\r\n InputLabel,\r\n InputAdornment,\r\n Typography,\r\n Stack,\r\n AlertTitle,\r\n Paper,\r\n Icon,\r\n} from '@mui/material';\r\nimport Skeleton from '@mui/material/Skeleton';\r\nimport Alert from '@mui/material/Alert';\r\n\r\n//MUI X\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { DateField, LocalizationProvider } from '@mui/x-date-pickers';\r\n\r\n//Our Components\r\nimport AutoCompleteAddress from './AutoCompleteAddress';\r\n// Services\r\nimport memberService from '../../../../../../services/member-service';\r\n\r\n//utils\r\nimport {\r\n compareObjects,\r\n formatDateObjYYYYMMDD, //yyyy-MM-dd format\r\n formatUTCYYYYMMDD,\r\n formatUTCDateToObjWithTimeZone,\r\n formatUTCToShortDate,\r\n titleCase,\r\n} from '../../../../../utils';\r\n\r\n//Our Styles\r\nimport memberInfoStyles from '../memberInfoStyles';\r\nimport { borderColor, color, fontStyle, fontWeight, margin } from '@mui/system';\r\n\r\nconst componentStyles = {\r\n avatarAndNameContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: '16px 16px 10px 16px',\r\n // border: \"1px solid orange\",\r\n },\r\n memberAvatar: {\r\n bgcolor: 'primary.light',\r\n color: 'primary.main',\r\n fontFamily: 'Archivo',\r\n fontWeight: '600',\r\n width: 47,\r\n height: 47,\r\n margin: '0px 24px 0px 0px',\r\n },\r\n nameAndEnrollmentIdContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifycontent: 'flex-start',\r\n },\r\n archivedAlert: {\r\n margin: '2px',\r\n border: '1px solid #ef5350',\r\n padding: '8px',\r\n fontSize: '16px',\r\n fontWeight: 500,\r\n fontFamily: 'Archivo',\r\n lineHeight: '24px',\r\n color: 'rgb(95, 33, 32)',\r\n backgroundColor: 'unset',\r\n titleBox: {\r\n alignItems: 'baseline',\r\n },\r\n title: {\r\n fontWeight: 500,\r\n },\r\n icon: {\r\n color: '#ef5350',\r\n margin: '4px',\r\n },\r\n button: {\r\n color: 'rgb(95, 33, 32)',\r\n paddingRight: '10px',\r\n },\r\n content: {\r\n paddingLeft: '6px',\r\n paddingBottom: '16px',\r\n paddingRight: '16px',\r\n },\r\n },\r\n\r\n memberInfoItemContainer: {\r\n margin: '0px auto',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n padding: '7px 37px 7px 23px',\r\n position: 'relative',\r\n },\r\n memberInfoItem: {\r\n width: '100%',\r\n },\r\n memberInfoIcon: (edit) => ({\r\n margin: edit ? '12px 32px 0px 10px' : '0px 32px 0px 10px',\r\n height: '24px',\r\n color: 'text.disabled',\r\n }),\r\n memberInfoText: {\r\n fontSize: 15,\r\n overflowWrap: 'break-word',\r\n paddingRight: '12px ',\r\n maxWidth: '200px',\r\n },\r\n horizontalLine: {\r\n width: '90%',\r\n margin: '5px auto',\r\n },\r\n //////EDIT\r\n addInputButton: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n fontSize: '13px',\r\n color: 'primary.main',\r\n textAlign: 'right',\r\n fontWeight: 500,\r\n },\r\n addIcon: {\r\n height: '18px',\r\n marginRight: '5px',\r\n },\r\n input: {\r\n margin: '5px 0px',\r\n width: '100%',\r\n },\r\n showMoreButtonContainer: { display: 'flex', justifyContent: 'center' },\r\n showMoreButton: {\r\n width: '90%',\r\n marginTop: '10px',\r\n },\r\n viewSSNIconContainer: {\r\n color: 'text.disabled',\r\n padding: '2px 0px 0px 0px',\r\n },\r\n viewSSNIcon: {\r\n fontSize: '20px',\r\n cursor: 'pointer',\r\n },\r\n customDatePicker: {\r\n // minWidth: \"150px\",\r\n margin: ' 4px 16px 4px 0px',\r\n padding: '0px',\r\n '& .MuiOutlinedInput-input': {\r\n padding: '10px 12px',\r\n fontSize: '14px', // Adjust the font size\r\n },\r\n '& fieldset': {\r\n borderRadius: '8px',\r\n height: '45px',\r\n },\r\n },\r\n};\r\n\r\nexport default function MemberInfoTop(props) {\r\n const [loading, setLoading] = useState(false);\r\n let formatPhoneNumber = (phoneNumberString) => {\r\n let noCountryMatch = phoneNumberString?.match(/^(\\d{3})(\\d{3})(\\d{4})$/);\r\n\r\n if (noCountryMatch) {\r\n return `(${noCountryMatch[1]}) ${noCountryMatch[2]}-${noCountryMatch[3]}`;\r\n }\r\n // else if (countryMatch) {\r\n // return `+${match[1]} (${match[2]}) ${match[3]}-${match[4]}`\r\n // }\r\n return phoneNumberString;\r\n };\r\n let profileDisabled = props.profileDisabled;\r\n\r\n const [edit, setEdit] = useState(false);\r\n const [memberInfo, setMemberInfo] = useState();\r\n\r\n const handleEditProfile = () => {\r\n setEdit(true);\r\n //expand all fields when editing\r\n setExpandProfile(true);\r\n };\r\n\r\n //Toggle/Add an edit section\r\n const [showCollapsedField, setShowCollapsedField] = useState({\r\n preferredName: false,\r\n suffix: false,\r\n secondEmail: false,\r\n secondaryPhone: false,\r\n street2: false,\r\n });\r\n\r\n const toggleField = (fieldName) => {\r\n setShowCollapsedField({\r\n ...showCollapsedField,\r\n [fieldName]: !showCollapsedField[fieldName],\r\n });\r\n };\r\n\r\n const setMemberInfoFunction = () => {\r\n if (props.member) {\r\n //format dob for DateField to date obj\r\n setMemberInfo({\r\n ...props?.member,\r\n dob: props.member.dob\r\n ? formatUTCDateToObjWithTimeZone(props.member.dob)\r\n : null,\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n setMemberInfoFunction();\r\n }, [props?.member]);\r\n\r\n let handleMemberInfoChange = (e, property) => {\r\n let value = e.target.value;\r\n\r\n if (property !== 'middleInitial' && property !== 'social') {\r\n setMemberInfo({\r\n ...memberInfo,\r\n [property]: value,\r\n });\r\n } else if (property === 'social') {\r\n //limit to 9 digits max\r\n let social = e.target.value;\r\n if (social?.length > 9) {\r\n social = social?.slice(0, 9);\r\n }\r\n setMemberInfo({\r\n ...memberInfo,\r\n [property]: social,\r\n });\r\n } else if (property === 'middleInitial') {\r\n //limit middle initial input to only 1 character\r\n let middleInitial = e.target.value;\r\n let middleInitialSingleChar = middleInitial.slice(0, 1);\r\n setMemberInfo({\r\n ...memberInfo,\r\n [property]: middleInitialSingleChar,\r\n });\r\n }\r\n };\r\n\r\n //update dob\r\n const handleDobChange = (e) => {\r\n let inputVal = e; //date in date obj format\r\n setMemberInfo({\r\n ...memberInfo,\r\n dob: inputVal,\r\n });\r\n };\r\n\r\n ///PHONES\r\n //local phone state for handling phone number format\r\n const [primaryPhone, setPrimaryPhone] = useState({});\r\n const [secondaryPhone, setSecondaryPhone] = useState({});\r\n const [phoneNumberInDb, setPhoneNumberInDb] = useState({});\r\n\r\n //updated phones in state if phone changes are made\r\n useEffect(() => {\r\n setPrimaryPhone(props.primaryPhone?.number ? props.primaryPhone : {});\r\n setSecondaryPhone(props.secondaryPhone?.number ? props.secondaryPhone : {});\r\n }, [props.member, props.phones, props.primaryPhone, props.secondaryPhone]);\r\n\r\n //monitor phone changes - this will only update on save member info or page refresh\r\n useEffect(() => {\r\n setPhoneNumberInDb({\r\n primaryPhone: props.primaryPhone?.number ? props.primaryPhone.number : {},\r\n secondaryPhone: props.secondaryPhone?.number\r\n ? props.secondaryPhone.number\r\n : {},\r\n });\r\n }, []);\r\n\r\n const handlePrimaryPhoneChange = (val, mask) => {\r\n mask.updateValue(val);\r\n };\r\n\r\n const handleSecondaryPhoneChange = (val, mask) => {\r\n mask.updateValue(val);\r\n };\r\n\r\n // UPDATE or ADD either primary or secondary phones onBlur event\r\n\r\n const handlePhoneComplete = (e) => {\r\n let enteredNumber = e.target.value;\r\n //remove mask symbols: () and -\r\n let numericPhoneNumber = enteredNumber.replace(/\\D/g, '');\r\n //primary vs. secondary updates\r\n if (e.target.id === 'primary-phone-mask') {\r\n //check length of number\r\n //check if a primary mobile phone exists and add current ID of that phone\r\n if (props?.primaryPhone?.id) {\r\n let updatePrimaryPhone = {\r\n ...props?.primaryPhone,\r\n number: numericPhoneNumber,\r\n };\r\n props.setPrimaryPhone(updatePrimaryPhone);\r\n //update local state\r\n setPrimaryPhone({ ...primaryPhone, number: numericPhoneNumber });\r\n } else {\r\n //create new phone if one not in DB\r\n let insertPrimaryPhone = {\r\n memberId: props.member.id,\r\n phoneNumberTypeId: 1, // Mobile,home,work\r\n isPreferred: true,\r\n number: numericPhoneNumber,\r\n };\r\n props.setPrimaryPhone(insertPrimaryPhone);\r\n //update local state\r\n setPrimaryPhone({ ...primaryPhone, number: numericPhoneNumber });\r\n }\r\n } else {\r\n //check length of number for error messaging\r\n // setHomePhoneLength(numericPhoneNumber);\r\n // check if a secondary mobile phone exists and add current ID of that phone\r\n if (props.secondaryPhone?.id) {\r\n let updateSecondaryPhone = {\r\n ...props?.secondaryPhone,\r\n number: numericPhoneNumber,\r\n };\r\n props.setSecondaryPhone(updateSecondaryPhone);\r\n //update local state\r\n setSecondaryPhone({ ...secondaryPhone, number: numericPhoneNumber });\r\n } else {\r\n //create new phone\r\n let insertSecondaryPhone = {\r\n memberId: props?.member?.id,\r\n phoneNumberTypeId: 2, // home\r\n isPreferred: false,\r\n number: numericPhoneNumber,\r\n };\r\n\r\n props.setSecondaryPhone(insertSecondaryPhone);\r\n //update local state\r\n setSecondaryPhone({ ...secondaryPhone, number: numericPhoneNumber });\r\n }\r\n }\r\n };\r\n\r\n // let noCountryMatch = str.match(/^(\\d{3})(\\d{3})(\\d{4})$/);\r\n // // let countryMatch = str.match(/^(\\d{1-3})(\\d{3})(\\d{3})(\\d{4})$/);\r\n\r\n // if (noCountryMatch) {\r\n // return `(${noCountryMatch[1]}) ${noCountryMatch[2]}-${noCountryMatch[3]}`\r\n // }\r\n // // else if (countryMatch) {\r\n // // return `+${match[1]} (${match[2]}) ${match[3]}-${match[4]}`\r\n // // }\r\n // return str\r\n // };\r\n\r\n const PrimaryPhoneMask = IMaskMixin(({ ref, ...props }) => (\r\n fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n ));\r\n\r\n //format member language for display\r\n const formatLanguage = (languageTypeId) => {\r\n let language = props?.languageTypes?.find(\r\n (lang) => lang.id === languageTypeId\r\n );\r\n return language ? language.name : '';\r\n };\r\n\r\n const handleArchivedChange = () => {\r\n let archived = !props?.member?.isArchived;\r\n props?.updateMember({\r\n ...props?.member,\r\n isArchived: archived,\r\n });\r\n props.setMessage({\r\n ...props.message,\r\n messageDisplay: true,\r\n autoHideDuration: 3000,\r\n backgroundColor: '',\r\n severity: 'success',\r\n message: 'Member profile unarchived.',\r\n });\r\n };\r\n\r\n return (\r\n \r\n {/* Title and Edit Button */}\r\n {props?.member?.isArchived && (\r\n \r\n \r\n \r\n \r\n This profile is locked\r\n \r\n \r\n UNLOCK\r\n \r\n \r\n \r\n \r\n \r\n Member Info\r\n \r\n \r\n {!edit ? (\r\n \r\n EDIT\r\n \r\n ) : (\r\n <>\r\n \r\n CANCEL\r\n \r\n \r\n SAVE\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n {/* Member Name and Enrollment Id */}\r\n \r\n {props?.loading ? (\r\n \r\n {props.member?.firstName &&\r\n `${props.member?.firstName[0].toUpperCase()}${props.member?.lastName[0].toUpperCase()}`}\r\n \r\n )}\r\n\r\n \r\n {props?.loading ? (\r\n \r\n {' '}\r\n {titleCase(props.member?.firstName)}{' '}\r\n {props.member?.preferredName\r\n ? `'${titleCase(props.member?.preferredName)}'`\r\n : ''}{' '}\r\n {props.member?.middleInitial\r\n ? `${titleCase(props.member?.middleInitial)}.`\r\n : ''}{' '}\r\n {titleCase(props.member?.lastName)} {props.member?.suffix}\r\n \r\n )}\r\n {props?.loading ? (\r\n \r\n Enrollment ID: {props.member?.registrationCode}\r\n \r\n )}\r\n \r\n \r\n {/* View AND Edit member Info */}\r\n \r\n {/*update name input hidden if user is not editing*/}\r\n {edit && (\r\n <>\r\n \r\n \r\n \r\n \r\n handleMemberInfoChange(e, 'firstName')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n {/* Add Preferred Name Input - if there is no preferred name, show button to add one and give dropdown */}\r\n\r\n {!showCollapsedField.preferredName &&\r\n !memberInfo.preferredName && (\r\n toggleField('preferredName')}\r\n >\r\n \r\n )}\r\n {(showCollapsedField.preferredName ||\r\n memberInfo.preferredName) && (\r\n handleMemberInfoChange(e, 'preferredName')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n\r\n handleMemberInfoChange(e, 'middleInitial')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n handleMemberInfoChange(e, 'lastName')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n {/* Add Suffix Input - if no suffix exists, show button to add one and give dropdown */}\r\n {!showCollapsedField.suffix && !memberInfo.suffix && (\r\n <>\r\n toggleField('suffix')}\r\n >\r\n \r\n \r\n )}\r\n {(showCollapsedField.suffix || memberInfo.suffix) && (\r\n handleMemberInfoChange(e, 'suffix')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n \r\n \r\n \r\n {props.member && (\r\n // \r\n\r\n // \r\n // \r\n // \r\n // <>\r\n\r\n // \r\n // {(props.member?.street1 &&\r\n // \"11:18 AM Mountain Time (US & Canada)\") ||\r\n // \"--\"}\r\n // \r\n // \r\n\r\n // {edit && (\r\n\r\n // fieldset\": {\r\n // border: \"2px solid primary.main\",\r\n // },\r\n // },\r\n // }}\r\n // />\r\n // )}\r\n // \r\n // \r\n\r\n <>\r\n {/*///// Start of Temp Email and Phone Number pre-profile expansion (\"show-more button\") data (place holder until timezone data available) //////*/}\r\n \r\n \r\n \r\n\r\n \r\n {!edit && (\r\n <>\r\n \r\n {props?.loading ? (\r\n \r\n {props.member?.email ? props.member?.email : '--'}\r\n \r\n\r\n {props?.member?.secondEmail && (\r\n \r\n {props.member?.secondEmail}\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n )}\r\n {edit && (\r\n <>\r\n handleMemberInfoChange(e, 'email')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n data-uhtest=\"member-info-primary-email-field\"\r\n />\r\n\r\n {/* Add Second Email Iput - if no email exists, show button to add one and give dropdown */}\r\n {!showCollapsedField.secondEmail &&\r\n !memberInfo.secondEmail && (\r\n toggleField('secondEmail')}\r\n >\r\n \r\n )}\r\n {(showCollapsedField.secondEmail ||\r\n memberInfo.secondEmail) && (\r\n \r\n handleMemberInfoChange(e, 'secondEmail')\r\n }\r\n sx={componentStyles.input}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset':\r\n {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n \r\n )}\r\n \r\n \r\n {edit && \r\n \r\n \r\n \r\n {!edit && (\r\n <>\r\n {props?.loading ? (\r\n <>\r\n \r\n \r\n {(props.primaryPhone?.number &&\r\n formatPhoneNumber(props.primaryPhone?.number)) ||\r\n '--'}\r\n \r\n \r\n {(props.secondaryPhone?.number &&\r\n formatPhoneNumber(\r\n props.secondaryPhone?.number\r\n )) ||\r\n ''}\r\n \r\n \r\n )}\r\n \r\n )}\r\n\r\n {/* Edit Primary Phone */}\r\n {edit && (\r\n \r\n \r\n handlePrimaryPhoneChange(value, mask)\r\n }\r\n onBlur={(e) => handlePhoneComplete(e)}\r\n overwrite\r\n autoComplete=\"tel-national\"\r\n type=\"tel\"\r\n />\r\n\r\n {/* // Add Secondary Phone */}\r\n\r\n {!showCollapsedField.secondaryPhone &&\r\n !memberInfo.secondaryPhone && (\r\n <>\r\n toggleField('secondaryPhone')}\r\n >\r\n \r\n \r\n )}\r\n {(showCollapsedField.secondaryPhone ||\r\n memberInfo.secondaryPhone) && (\r\n // Secondary Phone Edit\r\n \r\n handleSecondaryPhoneChange(value, mask)\r\n }\r\n onBlur={(e) => handlePhoneComplete(e)}\r\n overwrite\r\n autoComplete=\"tel-national\"\r\n type=\"tel\"\r\n />\r\n )}\r\n \r\n )}\r\n \r\n \r\n {edit && \r\n <>\r\n {/* Email - hiding for now until time-zone available and will remove email display above/comment this back in */}\r\n {/* \r\n \r\n \r\n\r\n \r\n {!edit && (\r\n <>\r\n \r\n {props?.loading ? (\r\n \r\n {props.member?.email\r\n ? props.member?.email\r\n : \"--\"}\r\n \r\n\r\n \r\n {props.member?.secondEmail}\r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n {edit && (\r\n <>\r\n handleMemberInfoChange(e, \"email\")}\r\n InputProps={{\r\n sx: {\r\n \"&.MuiOutlinedInput-root.Mui-focused > fieldset\":\r\n {\r\n border: \"2px solid primary.main\",\r\n },\r\n },\r\n }}\r\n /> */}\r\n\r\n {/* Add Second Email Iput - if no email exists, show button to add one and give dropdown */}\r\n {/* {!showCollapsedField.secondEmail &&\r\n !memberInfo.secondEmail && (\r\n toggleField(\"secondEmail\")}\r\n >\r\n \r\n )}\r\n {(showCollapsedField.secondEmail ||\r\n memberInfo.secondEmail) && (\r\n \r\n handleMemberInfoChange(e, \"secondEmail\")\r\n }\r\n sx={componentStyles.input}\r\n InputProps={{\r\n sx: {\r\n \"&.MuiOutlinedInput-root.Mui-focused > fieldset\":\r\n {\r\n border: \"2px solid primary.main\",\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n \r\n )}\r\n \r\n */}\r\n {/* {edit && \r\n \r\n \r\n \r\n {!edit && (\r\n <>\r\n {props?.loading ? (\r\n \r\n {(primaryPhone &&\r\n formatPhoneNumber(primaryPhone)) ||\r\n \"--\"}\r\n \r\n )}\r\n \r\n )} */}\r\n\r\n {/* {edit && (\r\n // handleMemberInfoChange(e, 'primaryPhone')}\r\n // InputProps={{\r\n // sx: {\r\n // '&.MuiOutlinedInput-root.Mui-focused > fieldset': { border: '2px solid primary.main' },\r\n // },\r\n // }}\r\n // />\r\n /////////////////////////////////\r\n <>\r\n \r\n handlePhoneChange(value, mask)\r\n }\r\n onComplete={(value, mask) =>\r\n handlePhoneComplete(value, mask)\r\n }\r\n overwrite\r\n autoComplete=\"false\"\r\n /> */}\r\n\r\n {/* // Add Secondary Phone */}\r\n\r\n {/* {!showCollapsedField.secondaryPhone &&\r\n !memberInfo.secondaryPhone && (\r\n <>\r\n toggleField(\"secondaryPhone\")}\r\n >\r\n \r\n \r\n )}\r\n {(showCollapsedField.secondaryPhone ||\r\n memberInfo.secondaryPhone) && (\r\n // Secondary Phone change\r\n \r\n handlePhoneChange(value, mask)\r\n }\r\n onComplete={(value, mask) =>\r\n handlePhoneComplete(value, mask)\r\n }\r\n overwrite\r\n autoComplete=\"false\"\r\n />\r\n )}\r\n \r\n )}\r\n \r\n */}\r\n {/* {edit && \r\n \r\n \r\n \r\n <>\r\n \r\n {(props.member?.street1 &&\r\n \"11:18 AM Mountain Time (US & Canada)\") ||\r\n \"--\"}\r\n \r\n \r\n\r\n {edit && (\r\n fieldset\": {\r\n border: \"2px solid primary.main\",\r\n },\r\n },\r\n }}\r\n />\r\n )}\r\n \r\n */}\r\n\r\n {/* address */}\r\n \r\n \r\n \r\n \r\n {!edit && (\r\n <>\r\n \r\n {(props.member?.street1 &&\r\n titleCase(props.member?.street1)) ||\r\n '--'}{' '}\r\n {props.member?.street2}\r\n \r\n \r\n {titleCase(props.member?.city)}\r\n {props.member?.state && ','} {props.member?.state}{' '}\r\n {props.member?.zipCode}\r\n \r\n {/* TODO: Edit City, State, Zipcode */}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n {edit && \r\n \r\n \r\n \r\n {!edit && (\r\n \r\n {formatLanguage(props.member?.languageTypeId) || '--'}\r\n \r\n )}\r\n {edit && (\r\n fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n onChange={(e) =>\r\n handleMemberInfoChange(e, 'languageTypeId')\r\n }\r\n value={memberInfo?.languageTypeId || ''}\r\n >\r\n {props?.languageTypes?.length > 0 &&\r\n props.languageTypes.map((option) => {\r\n return (\r\n {option.name} \r\n );\r\n })}\r\n \r\n )}\r\n \r\n \r\n {edit && \r\n \r\n \r\n \r\n {!edit && (\r\n \r\n {props.member?.dob &&\r\n formatUTCToShortDate(props.member.dob)}\r\n {(props.member?.dob &&\r\n ` (${differenceInYears(\r\n new Date(),\r\n new Date(props?.member?.dob)\r\n )} years old)`) ||\r\n '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n )}\r\n \r\n \r\n {edit && \r\n \r\n \r\n \r\n {!edit && (\r\n \r\n {(props.member?.gender &&\r\n props.genderOptions?.length > 0 &&\r\n props.genderOptions.find(\r\n (gender) => gender.id == props.member.gender\r\n )?.name) ||\r\n '--'}\r\n \r\n )}\r\n {edit && (\r\n <>\r\n \r\n handleMemberInfoChange(e, 'gender')}\r\n >\r\n {(props.genderOptions?.length > 0 &&\r\n props.genderOptions.map((option) => {\r\n return (\r\n \r\n {option.name}\r\n \r\n );\r\n })) ||\r\n '--'}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n\r\n {/* SSN */}\r\n \r\n \r\n \r\n \r\n {!edit && (\r\n \r\n \r\n {props.member?.social\r\n ? maskFullSocial(memberInfo?.social) //display local state social\r\n : '--'}\r\n \r\n {/* view/hide full social button visible IF agent w/ permissions AND social length > 4 */}\r\n {props?.permissionsEnabler?.viewFullSocial &&\r\n props?.member?.social?.length === 9 && (\r\n \r\n {showFullSocial ? (\r\n \r\n )}\r\n {edit && (\r\n 4\r\n ? '***-**-0000'\r\n : 'XXX-XX-0000'\r\n }\r\n definitions={{\r\n '*': /[0-9X]/,\r\n }}\r\n // overwrite\r\n onAccept={(value, mask) => handleSSNChange(value, mask)}\r\n onComplete={(value, mask) =>\r\n handleSSNComplete(value, mask)\r\n }\r\n // onBlur={(e) => handleSSNComplete(e)}\r\n />\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Show More Button */}\r\n \r\n \r\n {expandProfile && (\r\n \r\n Show Less \r\n )}\r\n {!expandProfile && (\r\n \r\n Show More \r\n )}\r\n \r\n \r\n {/* */}\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\n//MuiIcons\r\nimport WorkOutlineOutlinedIcon from \"@mui/icons-material/WorkOutlineOutlined\";\r\nimport WorkOffOutlinedIcon from \"@mui/icons-material/WorkOffOutlined\";\r\nimport CheckIcon from \"@mui/icons-material/Check\";\r\nimport Healing from \"@mui/icons-material/Healing\";\r\n// import WorkHistoryOutlinedIcon from '@mui/icons-material/WorkHistoryOutlined';\r\nimport WorkOffIcon from \"@mui/icons-material/WorkOff\";\r\n// import WorkHistoryIcon from \"@mui/icons-material/WorkHistory\";\r\n\r\n//Mui Components\r\n\r\nimport Chip from \"@mui/material/Chip\";\r\nimport optionService from \"../../../../services/optionService\";\r\n\r\nexport default function WorkingStatusChips(props) {\r\n\r\n let selectedStatus = props?.employmentStatuses?.find(status => status.id === props.workingStatusId);\r\n\r\n const [chip, setChip] = useState({\r\n icon: null,\r\n backgroundColor: \"\",\r\n color: \"\",\r\n border: \"\",\r\n borderColor: \"\",\r\n label: \"\",\r\n });\r\n\r\n const buildChip = () => {\r\n switch (props.workingStatusId) {\r\n case 0:\r\n setChip({\r\n icon: (\r\n \r\n {/* Title and Edit Button */}\r\n \r\n \r\n Employment\r\n \r\n \r\n {!edit ? (\r\n setEdit(true)}\r\n sx={memberInfoStyles.editButton}\r\n >\r\n EDIT\r\n \r\n ) : (\r\n <>\r\n \r\n CANCEL\r\n \r\n {\r\n updateMember();\r\n // updateMemberOrganization()\r\n }}\r\n sx={memberInfoStyles.saveEditButton}\r\n >\r\n SAVE\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n {/* Employment Info Body */}\r\n \r\n {/* Working Status */}\r\n \r\n Working Status \r\n {!edit && (\r\n \r\n \r\n )}\r\n\r\n {edit && (\r\n \r\n \r\n Working Status \r\n status.id === memberInfo.workStatusId\r\n )?.id) ||\r\n 0\r\n }\r\n onChange={(e) => handleMemberInfoChange(e, 'workStatusId')}\r\n >\r\n {props?.employmentStatuses?.length > 0 &&\r\n props.employmentStatuses.map((status) => {\r\n return (\r\n \r\n {status.name}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Association \r\n {!edit && {'--'} }\r\n {edit && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Organization \r\n {!edit && (\r\n \r\n \r\n {displayUnion() ?? ''}\r\n \r\n \r\n {displayOrganization() ?? ''}\r\n \r\n \r\n {displayTertiary() ?? ''}\r\n \r\n \r\n )}\r\n {edit && (\r\n \r\n {/* Top Parent Organization */}\r\n \r\n \r\n handleOrganizationInformation(e, 'topParentOrganizationId')\r\n }\r\n >\r\n {props?.organizations &&\r\n props?.organizations.map((organization) => {\r\n if (!organization.parentId) {\r\n return (\r\n \r\n {organization.displayName}\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n\r\n {/* Organization 2nd */}\r\n {handleHasChildren(\r\n memberOrganization?.topParentOrganizationId\r\n ) && (\r\n \r\n \r\n handleOrganizationInformation(e, 'organizationId')\r\n }\r\n >\r\n {props?.organizations &&\r\n props?.organizations.map((organization) => {\r\n if (\r\n organization.parentId ===\r\n memberOrganization?.topParentOrganizationId\r\n ) {\r\n return (\r\n \r\n {organization.name}\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n\r\n {/* Organization - 3rd */}\r\n {handleHasChildren(memberOrganization?.organizationId) && (\r\n \r\n \r\n handleOrganizationInformation(e, 'lowestOrganizationId')\r\n }\r\n >\r\n {props?.organizations &&\r\n props?.organizations.map((organization) => {\r\n if (\r\n organization.parentId ==\r\n memberOrganization?.organizationId\r\n ) {\r\n return (\r\n \r\n {organization.name}\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Employer \r\n {!edit && (\r\n \r\n {(memberInfo?.employerName && memberInfo.employerName) || '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n setOpen(false)}\r\n onClick={(e) => setOpen(true)}\r\n forcePopupIcon={true}\r\n popupIcon={\r\n {params.key}\r\n \r\n );\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Job Title \r\n {!edit && (\r\n \r\n {(props.member?.jobTitle && props.member?.jobTitle) || '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n handleMemberInfoChange(e, 'jobTitle')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Joined \r\n {!edit && (\r\n \r\n {(props.member?.joinedUnionDate &&\r\n new Date(props.member?.joinedUnionDate) >\r\n new Date('1900-01-01') &&\r\n format(\r\n new Date(\r\n `${props.member.joinedUnionDate.slice(0, 10)}T00:00:00`\r\n ),\r\n 'MMM yyyy'\r\n )) ||\r\n '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n handleMemberInfoChange(e, 'joinedUnionDate')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Salary \r\n {!edit && (\r\n \r\n {(props.member?.annualSalary &&\r\n props.member &&\r\n props.UsdFormatter.format(props.member.annualSalary)) ||\r\n '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n handleMemberInfoChange(e, 'annualSalary')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {edit && \r\n Retirement \r\n {!edit && -- }\r\n {edit && (\r\n \r\n fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { format, differenceInCalendarYears } from 'date-fns';\r\n\r\n//MuiIcons\r\nimport EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';\r\nimport PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';\r\nimport CakeIcon from '@mui/icons-material/Cake';\r\nimport PersonIcon from '@mui/icons-material/Person';\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport {\r\n Box,\r\n TextField,\r\n Typography,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n} from '@mui/material';\r\n\r\n//Our Styles\r\nimport memberInfoStyles from '../memberInfoStyles';\r\n\r\n//utils\r\nimport { titleCase } from '../../../../../utils';\r\n\r\nexport default function MemberInfoBottom(props) {\r\n //Component Styling\r\n const componentStyles = {\r\n spouseAndDependentInfoItem: {\r\n padding: '5px 18px',\r\n position: 'relative',\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n flexWrap: 'wrap',\r\n },\r\n spouseAndDependentInfoTitle: {\r\n // alignItems: \"center\",\r\n alignContent: 'top',\r\n fontSize: '16px',\r\n fontWeight: 400,\r\n marginBottom: 0,\r\n flex: 1,\r\n },\r\n spouseAndDependentInfo: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n fontSize: '16px',\r\n fontWeight: 400,\r\n // flex: 7,\r\n },\r\n spouseAndDependentEditInfo: {\r\n flex: 1.5,\r\n },\r\n inputField: {\r\n sx: { marginBottom: '0px', fontSize: '10px' },\r\n },\r\n addDependentInputField: {\r\n sx: { fontSize: '10px', marginBottom: '10px' },\r\n },\r\n };\r\n\r\n let profileDisabled = props.profileDisabled;\r\n\r\n //Utility Functions\r\n const formatDate = (rawDate) => {\r\n if (rawDate?.length < 11) rawDate = new Date(rawDate).toISOString();\r\n let [yyyy, mm, dd, hh, m, s] = rawDate.split(/[^\\d]+/);\r\n let date = new Date();\r\n date.setUTCFullYear(+yyyy);\r\n date.setUTCDate(+dd);\r\n date.setUTCMonth(mm - 1);\r\n date.setUTCHours(+hh);\r\n date.setUTCMinutes(+m + date.getTimezoneOffset());\r\n date.setUTCSeconds(+s);\r\n\r\n return date;\r\n };\r\n\r\n const [edit, setEdit] = useState(false);\r\n const [memberInfo, setMemberInfo] = useState();\r\n // useEffect(() => {\r\n // if (props.member) {\r\n // let _memberInfo = {\r\n // spouseFirstName: props.member.spouseFirstName,\r\n // spouseLastName: props.member.spouseLastName,\r\n // }\r\n // if (props.member.spouseDOB) {\r\n // _memberInfo = {\r\n // ..._memberInfo,\r\n // spouseDOB: format(new Date(`${props.member.spouseDOB.slice(0, 10)}T00:00:00`), 'yyyy-MM-dd'),\r\n // }\r\n // }\r\n // setMemberInfo(_memberInfo)\r\n // }\r\n // }, [props.member]);\r\n\r\n let handleMemberInfoChange = (e, property) => {\r\n let value = e.target.value;\r\n setMemberInfo({\r\n ...memberInfo,\r\n [property]: value,\r\n });\r\n };\r\n\r\n //Spouse\r\n let updateMember = () => {\r\n // let spouseInfoChanged = (\r\n // memberInfo.spouseFirstName != props.member.spouseFirstName ||\r\n // memberInfo.spouseLastName != props.member.spouseLastName ||\r\n // memberInfo.spouseDOB != props.member.spouseDOB\r\n // )\r\n // if (spouseInfoChanged){\r\n // props.updateMember(memberInfo)\r\n // }\r\n props.saveSpouseInfo();\r\n props.saveDependents();\r\n props.getThisMember();\r\n setShowAddDependent(true);\r\n setEdit(false);\r\n //refresh timeline after member info updates\r\n setTimeout(() => {\r\n props?.refreshHistory();\r\n }, 500);\r\n };\r\n\r\n const [dependents, setDependents] = useState([]);\r\n\r\n useEffect(() => {\r\n if (props.dependents) {\r\n setDependents(props.dependents);\r\n }\r\n }, [props.dependents, edit]);\r\n\r\n let handleDependentInfoChange = (e, property, id) => {\r\n let value = e.target.value;\r\n\r\n setDependents([\r\n ...dependents.map((dependent) =>\r\n dependent.id === id\r\n ? Object.assign(dependent, { [property]: value })\r\n : dependent\r\n ),\r\n ]);\r\n };\r\n\r\n const [showAddDependent, setShowAddDependent] = useState(true);\r\n\r\n let handleAddDependentButton = (e) => {\r\n setShowAddDependent((prev) => !prev);\r\n };\r\n\r\n const [newDependent, setNewDependent] = useState({\r\n firstName: '',\r\n lastName: '',\r\n dob: '',\r\n });\r\n\r\n let handleNewDependentChange = (e, property) => {\r\n let value = e.target.value;\r\n setNewDependent({\r\n ...newDependent,\r\n [property]: value,\r\n });\r\n };\r\n\r\n let handleAddNewDependent = (e) => {\r\n props.addDependent(newDependent);\r\n setNewDependent({ firstName: '', lastName: '', dob: '' });\r\n setShowAddDependent(true);\r\n };\r\n\r\n let handleRemoveDependent = (e, id) => {\r\n props.deleteDependent(id);\r\n };\r\n\r\n const handleDobBlur = (e) => {\r\n if (!e.target.value) e.target.setAttribute('type', '');\r\n };\r\n\r\n const handleDobFocus = (e) => {\r\n e.target.setAttribute('type', 'date');\r\n };\r\n\r\n const handleSaveClick = () => {\r\n updateMember();\r\n };\r\n\r\n const handleCancelClick = () => {\r\n setEdit(false);\r\n //reset spouse info\r\n props.getSpouse();\r\n if (props.spouse) {\r\n props.setSpouse(props.spouse);\r\n }\r\n //reset dependent fields to current dependent info from db\r\n props.getThisMember();\r\n if (props.dependents) {\r\n setDependents(props.dependents);\r\n }\r\n //reset new dependent fields if not saved\r\n setNewDependent({\r\n firstName: '',\r\n lastName: '',\r\n dob: '',\r\n });\r\n setShowAddDependent(true);\r\n };\r\n\r\n return (\r\n <>\r\n {/* SPOUSE/DEPENDENT TITLE SECTION */}\r\n \r\n \r\n \r\n Spouse & Dependent\r\n \r\n\r\n \r\n {!edit && (\r\n setEdit(true)}\r\n sx={memberInfoStyles.editButton}\r\n disabled={profileDisabled}\r\n >\r\n EDIT\r\n \r\n )}\r\n {edit && (\r\n <>\r\n \r\n CANCEL\r\n \r\n \r\n SAVE\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n {/* Spouse Name*/}\r\n \r\n \r\n Spouse\r\n \r\n {!edit && (\r\n \r\n {props.spouse?.firstName && titleCase(props.spouse?.firstName)}{' '}\r\n {titleCase(props.spouse?.lastName) || '--'}\r\n \r\n )}\r\n\r\n {edit && (\r\n \r\n \r\n props.setSpouse({\r\n ...props.spouse,\r\n firstName: e.target.value,\r\n })\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n \r\n props.setSpouse({ ...props.spouse, lastName: e.target.value })\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {/* Spouse PHONE NUMBER - do not currently have this info or collect from member */}\r\n\r\n {/* \r\n \r\n Phone number\r\n \r\n {!edit && (\r\n */}\r\n {/* add phone info here */}\r\n {/* --\r\n \r\n )}\r\n {edit && (\r\n \r\n fieldset\": {\r\n border: \"2px solid primary.main\",\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n */}\r\n\r\n {/* Spouse Email */}\r\n \r\n \r\n Email\r\n \r\n\r\n {!edit && (\r\n \r\n {(props.spouse?.email && props.spouse.email) || '--'}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n props.setSpouse({\r\n ...props.spouse,\r\n email: e.target.value,\r\n })\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n\r\n {/* Spouse Gender*/}\r\n \r\n \r\n Gender\r\n \r\n {!edit && (\r\n \r\n {(props.spouse?.gender &&\r\n props.genderOptions?.length > 0 &&\r\n props.genderOptions.find(\r\n (gender) => gender.id == props.spouse.gender\r\n )?.name) ||\r\n '--'}\r\n \r\n )}\r\n\r\n {edit && (\r\n \r\n \r\n Gender \r\n fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n value={props.spouse?.gender ? props.spouse.gender : ''}\r\n onChange={(e) =>\r\n props.setSpouse({\r\n ...props.spouse,\r\n gender: e.target.value,\r\n })\r\n }\r\n >\r\n {(props.genderOptions?.length > 0 &&\r\n props.genderOptions.map((option) => {\r\n return (\r\n \r\n {option.name}\r\n \r\n );\r\n })) ||\r\n '--'}\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {/* Spouse Birthday */}\r\n\r\n \r\n \r\n Birthday\r\n \r\n {!edit && (\r\n \r\n {(props.spouse?.dateOfBirth &&\r\n format(\r\n new Date(\r\n `${props?.spouse?.dateOfBirth.slice(0, 10)}T00:00:00`\r\n ),\r\n 'MM/dd/yyyy'\r\n )) ||\r\n '--'}\r\n\r\n {/* {(props.spouse?.dateOfBirth &&\r\n format(\r\n new Date(\r\n `${props.spouse?.dateOfBirth?.slice(0, 10)}T00:00:00`\r\n ),\r\n \"MM/dd/yyyy\"\r\n )) ||\r\n \"--\"} */}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n props.setSpouse({\r\n ...props.spouse,\r\n dateOfBirth: e.target.value,\r\n })\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}\r\n \r\n \r\n {!edit && (\r\n <>\r\n \r\n Dependent(s)\r\n \r\n \r\n {'--'}\r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n\r\n {/* Dependent list for 1 or more */}\r\n {dependents?.length > 0 &&\r\n dependents?.map((dependent, i) => {\r\n return (\r\n \r\n \r\n \r\n Dependent [{i + 1}]\r\n \r\n {!edit && (\r\n \r\n {titleCase(dependent?.firstName)} \r\n {titleCase(dependent?.lastName)}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n handleDependentInfoChange(\r\n e,\r\n `firstName`,\r\n props.dependents[i].id\r\n )\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n \r\n handleDependentInfoChange(\r\n e,\r\n `lastName`,\r\n props.dependents[i].id\r\n )\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n )}{' '}\r\n \r\n {/* Dependent Birthday */}\r\n \r\n \r\n Birthday\r\n \r\n {!edit && (\r\n \r\n {(dependent?.dob &&\r\n format(formatDate(dependent?.dob), 'MM/dd/yyyy')) ||\r\n '--'}\r\n \r\n )}\r\n\r\n {edit && (\r\n \r\n \r\n handleDependentInfoChange(\r\n e,\r\n `dob`,\r\n props.dependents[i].id\r\n )\r\n }\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n onBlur={handleDobBlur}\r\n onFocus={handleDobFocus}\r\n />\r\n \r\n )}\r\n \r\n {edit && (\r\n handleRemoveDependent(e, dependent?.id)}\r\n sx={{\r\n color: 'primary.main',\r\n textAlign: 'right',\r\n padding: '0px 18px',\r\n fontSize: '14px',\r\n }}\r\n >\r\n REMOVE\r\n \r\n )}\r\n\r\n \r\n {showAddDependent && (\r\n
\r\n \r\n \r\n Dependent [{dependents.length + 1}]\r\n \r\n \r\n {/* Add Dependent First Name */}\r\n handleNewDependentChange(e, 'firstName')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n {/* Add Dependent Last Name */}\r\n handleNewDependentChange(e, 'lastName')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n\r\n {/* Add Dependent Birthday */}\r\n handleNewDependentChange(e, 'dob')}\r\n InputProps={{\r\n sx: {\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid primary.main',\r\n },\r\n },\r\n }}\r\n />\r\n \r\n \r\n\r\n \r\n \r\n Add\r\n \r\n {/* \r\n \r\n Cancel\r\n */}\r\n
\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { format, differenceInCalendarYears } from 'date-fns';\r\n\r\n//Services\r\nimport optionService from '../../../../../services/optionService';\r\nimport memberService from '../../../../../services/member-service';\r\nimport organizationService from '../../../../../services/organization-service';\r\n\r\n//MuiIcons\r\nimport AccountCircleIcon from '@mui/icons-material/AccountCircle';\r\nimport EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';\r\nimport PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';\r\nimport AccessTimeIcon from '@mui/icons-material/AccessTime';\r\nimport HomeWorkIcon from '@mui/icons-material/HomeWork';\r\nimport LanguageIcon from '@mui/icons-material/Language';\r\nimport CakeIcon from '@mui/icons-material/Cake';\r\nimport PersonIcon from '@mui/icons-material/Person';\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport { Box } from '@mui/system';\r\n//Our components\r\nimport MemberInfoTop from './member-info-sections/MemberInfoTop';\r\nimport MemberInfoMiddle from './member-info-sections/MemberInfoMiddle';\r\nimport MemberInfoBottom from './member-info-sections/MemberInfoBottom';\r\n\r\n//custom styles for scrollbar\r\nimport './memberInfoScroller.css';\r\n\r\nexport default function MemberInfo(props) {\r\n let profileDisabled = props.profileDisabled;\r\n let disabledProfileStyle = props.disabledProfileStyle;\r\n\r\n let UsdFormatter = new Intl.NumberFormat('en-US', {\r\n style: 'currency',\r\n currency: 'USD',\r\n });\r\n let history = useHistory();\r\n\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [member, setMember] = useState();\r\n useEffect(() => {\r\n setLoading(true);\r\n if (props.phones) {\r\n setLoading(false);\r\n }\r\n if (props.member) {\r\n setMember(props.member);\r\n getEmployers(props.member?.organizationId);\r\n getEmploymentStatuses();\r\n getGenderOptions();\r\n setLoading(false);\r\n // getPhones()\r\n }\r\n }, [props.member, props.member?.organizationId]);\r\n\r\n const [employmentStatuses, setEmploymentStatuses] = useState();\r\n let getEmploymentStatuses = async () => {\r\n let _statuses = await optionService.getWorkStatus();\r\n setEmploymentStatuses(_statuses);\r\n };\r\n\r\n const [genderOptions, setGenderOptions] = useState();\r\n let getGenderOptions = async () => {\r\n let _genderOptions = await optionService.getGenderTypes();\r\n setGenderOptions(_genderOptions);\r\n };\r\n\r\n const [employers, setEmployers] = useState();\r\n // this function is picked as is from EnrollmentPersonalInfo.js, not imported because unsure of circular imports that might happen later.\r\n const getEmployers = async (orgId) => {\r\n let _employers;\r\n //for BLET only, HARDCODE organizationId=18 to require specific employer list\r\n if (props?.member?.organizationName?.includes('BLET' || 'blet')) {\r\n _employers = await organizationService.getEmployersByOrganization(18);\r\n } else {\r\n _employers = await organizationService.getEmployersByOrganization(orgId);\r\n }\r\n\r\n if (_employers) {\r\n // [TODO:ORGNAME] 2311 -> 2186 Bookmark. This is targetting employer.name, not not organization.name, so it should remain unchanged.\r\n //sort employers alphabetically\r\n let sortedEmployers = _employers?.sort((a, b) => {\r\n const nameA = a.name.replace(/\"/g, '').toLowerCase(); // Remove quotes and convert to lowercase\r\n const nameB = b.name.replace(/\"/g, '').toLowerCase();\r\n if (nameA < nameB) return -1;\r\n if (nameA > nameB) return 1;\r\n return 0;\r\n });\r\n setEmployers(sortedEmployers);\r\n } else setEmployers([]);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {/* TOP SECTION */}\r\n <>\r\n \r\n \r\n = maxDate}\r\n disabled={true}\r\n >\r\n \r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { set, format } from 'date-fns';\r\n\r\n//Mui icons\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\n\r\n//Mui Components\r\nimport Chip from '@mui/material/Chip';\r\nimport Fade from '@mui/material/Fade';\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\nimport FormControl from '@mui/material/FormControl';\r\nimport InputLabel from '@mui/material/InputLabel';\r\nimport Button from '@mui/material/Button';\r\nimport ButtonGroup from '@mui/material/ButtonGroup';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Collapse } from '@mui/material';\r\nimport Select from '@mui/material/Select';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\n//our components\r\nimport InfinityLoader from '../../../../../../../UH-loading-animation/InfinityLoader';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\n\r\nexport default function EnrollmentSummaryCardLTD(props) {\r\n let plan = props.plan;\r\n\r\n let selectedOptionId = plan?.selectedOptionId;\r\n let selectedOption = plan?.options?.find(\r\n (option) => option.memberOptionId === selectedOptionId\r\n );\r\n\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [edit, setEdit] = useState(false);\r\n //This is bolding the payment info on the right side when edit==true\r\n useEffect(() => {\r\n if (props.setCurrentEdit) {\r\n //Check if this is rendered in planSummary or enrollmentSummary\r\n if (edit) {\r\n props.setCurrentEdit({\r\n ...props.currentEdit,\r\n ltd: true,\r\n });\r\n } else {\r\n props.setCurrentEdit({\r\n ...props.currentEdit,\r\n ltd: false,\r\n });\r\n }\r\n }\r\n }, [edit]);\r\n\r\n const [ltdPlan, setLtdPlan] = useState();\r\n useEffect(() => {\r\n if (plan) setLtdPlan(plan);\r\n }, [plan]);\r\n\r\n let handleLtdPlanChange = (e) => {\r\n let value = e.target.value;\r\n setLtdPlan({\r\n ...ltdPlan,\r\n selectedOptionId: value,\r\n });\r\n };\r\n\r\n let updateSinglePlan = async () => {\r\n setLoading(true);\r\n await props.updateSinglePlan('ltdPlan', ltdPlan);\r\n await props.getThisPlan();\r\n //setTimeout(() => {\r\n // setEdit(false)\r\n\r\n // setLoading(false)\r\n //},[2000])\r\n setEdit(false);\r\n\r\n setLoading(false);\r\n };\r\n\r\n const [editEffectiveDate, setEditEffectiveDate] = useState(false);\r\n const updateCoverageEffectiveDate = async () => {\r\n setLoading(true);\r\n // await props.updateCoverageEffectiveDate('stdPlan', stdPlan)\r\n // await props.getThisPlan()\r\n //setTimeout(() => {\r\n // setEditEffectiveDate(false)\r\n // setLoading(false)\r\n //},[2000])\r\n setEditEffectiveDate(false);\r\n setLoading(false);\r\n };\r\n\r\n //open verticle dot menu to edit or cancel coverage\r\n const [anchorEl, setAnchorEl] = useState({});\r\n\r\n const handleOpenRowMenu = (e) => {\r\n setAnchorEl({\r\n ...anchorEl,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n };\r\n\r\n const handleCloseRowMenu = () => {\r\n setAnchorEl({});\r\n };\r\n\r\n const handleOpenCancelCoverageDrawer = (e, plan, planName) => {\r\n props.handleOpenDrawer(plan, planName);\r\n handleCloseRowMenu();\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.memberPremiumAmount || 0\r\n )}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.benefitAmount || 0\r\n )}{' '}\r\n {selectedOption?.benefitTypeFriendly}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Amount \r\n fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n }}\r\n IconComponent={() => (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.benefitAmount || 0\r\n )}{' '}\r\n {option.benefitTypeFriendly}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n
\r\n Elimination Period \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.eliminationPeriod}\r\n \r\n {selectedOption?.eliminationPeriodType}\r\n \r\n
\r\n
\r\n
\r\n Benefit Duration \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitDuration}\r\n \r\n {selectedOption?.benefitDurationType}\r\n \r\n
\r\n
\r\n
\r\n Offset \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitOffsets}\r\n \r\n
\r\n
\r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.memberPremiumAmount || 0\r\n )}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.benefitAmount || 0\r\n )}{' '}\r\n {selectedOption?.benefitTypeFriendly}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Amount \r\n fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n }}\r\n IconComponent={() => (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.benefitAmount || 0\r\n )}{' '}\r\n {option?.benefitTypeFriendly}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n
\r\n Elimination Period \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.eliminationPeriod}\r\n \r\n {selectedOption?.eliminationPeriodType}\r\n \r\n
\r\n
\r\n
\r\n Benefit Duration \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitDuration}\r\n \r\n {selectedOption?.benefitDurationType}\r\n \r\n
\r\n
\r\n
\r\n Offset \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitOffsets}\r\n \r\n
\r\n
\r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n // disabled={!props.allowModify}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n {/* pop-up to be used later when implementing delete beneficiary functionality */}\r\n {/* \r\n {\"Confirm Delete\"} \r\n \r\n \r\n {bennyToDelete.id\r\n ? `Are you sure you want to delete the beneficiary ${bennyToDelete.firstName} ${bennyToDelete.lastName}?`\r\n : \"Error: unable to delete beneficiary at this time.\"}\r\n \r\n \r\n \r\n Cancel \r\n {bennyToDelete?.id && (\r\n \r\n Delete\r\n \r\n )}\r\n \r\n */}\r\n\r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(plan?.totalPremiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n //reset this to empty if starting to edit\r\n setRecentlyUpdatedBennies([]);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n\r\n {\r\n setEdit(true);\r\n //reset this to empty if starting to edit\r\n setRecentlyUpdatedBennies([]);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowEditEnrollment}\r\n >\r\n Edit Beneficiaries\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n
\r\n \r\n Member -{' '}\r\n {props.UsdFormatterDec.format(\r\n memberSelection?.coverageAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n memberSelection?.premiumAmount || 0\r\n )})`}\r\n
\r\n \r\n Spouse -{' '}\r\n {memberSelection &&\r\n props.UsdFormatterDec.format(\r\n spouseSelection?.coverageAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n spouseSelection?.premiumAmount || 0\r\n )})`}\r\n
\r\n \r\n Dependent(s) -{' '}\r\n {memberSelection &&\r\n props.UsdFormatterDec.format(\r\n dependentSelection?.coverageAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n dependentSelection?.premiumAmount || 0\r\n )})`}\r\n
\r\n \r\n )}\r\n {edit && props?.allowModify && (\r\n
\r\n \r\n Member Benefit \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.memberOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.coverageAmount || 0\r\n )}{' '}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n \r\n Spouse Benefit \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.spouseOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(option.coverageAmount)}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n Dependent Benefit\r\n \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.dependentOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(option.coverageAmount)}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n )}\r\n
\r\n \r\n Primary Beneficiary \r\n {edit && primaryBennies?.length > 0 && (\r\n \r\n setEvenSplitPrimary(!evenSplitPrimary)}\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n \r\n\r\n {!edit && (\r\n \r\n
\r\n {primaryBennies.map((benny) => (\r\n \r\n {benny?.amount}% {benny?.firstName} {benny?.lastName} |{' '}\r\n {props.relationshipTypes &&\r\n getRelationshipTypeFromId(benny?.relationshipTypeId)}\r\n
\r\n ))}\r\n \r\n
\r\n {edit &&\r\n primaryBennies.map((benny, i) => (\r\n \r\n {/* Edit Primary Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: { height: '40px' },\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* Display Primary Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName}\r\n {' | '}\r\n \r\n\r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n {/* input fields w/ corresponding methods to update primary beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"firstNamePrimary\",\r\n }}\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"lastNamePrimary\",\r\n }}\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n inputProps={{\r\n \"data-update\": \"dob\",\r\n }}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n {/* \r\n Delete Beneficiary */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n ))}\r\n\r\n {/* ADD NEW PRIMARY BENEFICIARY */}\r\n {edit && !addPrimaryBenny && (\r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n //close add contingent benny if open\r\n setAddContingentBenny(false);\r\n }}\r\n >\r\n + Add additional primary beneficiary\r\n \r\n )}\r\n\r\n {addPrimaryBenny && (\r\n \r\n \r\n {' '}\r\n Add additional primary beneficiary{' '}\r\n \r\n\r\n {/* Potential Beneficiaries to select */}\r\n \r\n {potentialBeneficiaries?.length > 0 &&\r\n potentialBeneficiaries?.map((potentialBen, i) => {\r\n //map and compare current beneficiaries to potentials by first AND last name - only return potentials that are NOT already beneficiaries and who have a first and last name\r\n const isCurrentBenny = primaryBennies?.find(\r\n (benny) =>\r\n benny?.firstName?.toLowerCase() ===\r\n potentialBen?.firstName?.toLowerCase() &&\r\n benny?.lastName?.toLowerCase() ===\r\n potentialBen?.lastName?.toLowerCase()\r\n );\r\n if (\r\n !isCurrentBenny &&\r\n potentialBen?.firstName &&\r\n potentialBen?.lastName\r\n ) {\r\n let firstName = potentialBen?.firstName\r\n ? potentialBen?.firstName\r\n : '';\r\n let lastName = potentialBen?.lastName\r\n ? potentialBen?.lastName\r\n : '';\r\n let relationship = potentialBen?.relationshipTypeId\r\n ? getRelationshipTypeFromId(\r\n potentialBen?.relationshipTypeId\r\n )\r\n : 'Dependent';\r\n return (\r\n \r\n handleAddDependentAsBenny(potentialBen)\r\n }\r\n >\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'primary')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'primary')\r\n }\r\n // InputProps={{\r\n // sx: componentStyles.inputShape\r\n // }}\r\n />\r\n\r\n {/* Add a new beneficiary with birthdate in the future - uncomment and this will work w/ current method */}\r\n {/* \r\n handleAddBeneficiaryInputChange(e, \"dob\", \"primary\")\r\n }\r\n /> */}\r\n\r\n legend': { display: 'none' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n }}\r\n variant=\"outlined\"\r\n label=\"Relationship\"\r\n value={newPrimaryBenny?.relationshipTypeId || ''}\r\n onChange={(e) =>\r\n handleAddBeneficiaryRelationshipChange(e, 'primary')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n setNewPrimaryBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {/* CONTINGENT BENEFICIARY */}\r\n\r\n \r\n \r\n Contingent Beneficiary \r\n {edit && contingentBennies?.length > 0 && (\r\n \r\n \r\n setEvenSplitContingent(!evenSplitContingent)\r\n }\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n
\r\n\r\n {!edit && (\r\n \r\n
\r\n {contingentBennies?.length > 0 ? (\r\n <>\r\n {contingentBennies.map((benny) => (\r\n \r\n {benny.amount}% {benny.firstName} {benny.lastName} |{' '}\r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n
\r\n ))}\r\n \r\n ) : (\r\n <>N/A\r\n )}\r\n \r\n
\r\n {edit &&\r\n contingentBennies.map((benny, i) => (\r\n \r\n {/* Edit Contingent Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: { height: '40px' },\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* Display Contingent Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName} {' | '}\r\n {' '}\r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n\r\n {/* input fields w/ corresponding methods to update contingent beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n\r\n {/* Delete Beneficiary Button */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n ))}\r\n\r\n {/* ADD A NEW CONTINGENT BENEFICIARY */}\r\n\r\n {edit && !addContingentBenny && (\r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n //close add primary benny if open\r\n setAddPrimaryBenny(false);\r\n }}\r\n >\r\n + Add additional contingent beneficiary\r\n \r\n )}\r\n\r\n {addContingentBenny && (\r\n \r\n \r\n {' '}\r\n Add additional contingent beneficiary{' '}\r\n \r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'contingent')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'contingent')\r\n }\r\n />\r\n\r\n {/* Add a new beneficiary with birthdate in the future - uncomment and this will work w/ current method */}\r\n {/* \r\n handleAddBeneficiaryInputChange(e, \"dob\", \"contingent\")\r\n }\r\n /> */}\r\n\r\n legend': { display: 'none' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n }}\r\n variant=\"outlined\"\r\n label=\"Relationship\"\r\n value={newContingentBenny?.relationshipTypeId || ''}\r\n onChange={(e) =>\r\n handleAddBeneficiaryRelationshipChange(e, 'contingent')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n setNewContingentBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {totalAllocationError && edit && (\r\n \r\n {primaryBennies?.length > 0 &&\r\n totalAllocationError?.primaryTotal != 100 && (\r\n \r\n Primary allocations must total 100%.\r\n \r\n )}\r\n {contingentBennies?.length > 0 &&\r\n totalAllocationError?.contingentTotal != 100 && (\r\n \r\n Contingent allocations must total 100%.\r\n \r\n )}\r\n \r\n )}\r\n\r\n {props.allowEditEnrollment && (\r\n \r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n
\r\n \r\n {\r\n cancelEditOrAdd();\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(premiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Covered Lives \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {coveredLives}\r\n \r\n )}\r\n {edit && (\r\n \r\n Covered Lives \r\n fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n }}\r\n IconComponent={() => (\r\n \r\n Member{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndSpousePremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndDependentsPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.familyPremiumAmount || 0\r\n )}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n } else {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n {props.allowModify && (\r\n \r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(premiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Covered Lives \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {coveredLives}\r\n \r\n )}\r\n {edit && (\r\n \r\n Covered Lives \r\n fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n }}\r\n IconComponent={() => (\r\n \r\n Member{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndSpousePremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndDependentsPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.familyPremiumAmount || 0\r\n )}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n } else {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n {props.allowModify && (\r\n \r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(premiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n
\r\n Benefit Amount \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.name || 'Declined'}\r\n \r\n
\r\n
\r\n \r\n Covered Lives \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {coveredLives}\r\n \r\n )}\r\n {edit && (\r\n \r\n Covered Lives \r\n fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n }}\r\n IconComponent={() => (\r\n \r\n Member{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndSpousePremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndDependentsPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.familyPremiumAmount || 0\r\n )}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n } else {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n {props.allowModify && (\r\n \r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n // disabled={!props.allowModify}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.memberPremiumAmount || 0\r\n )}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.benefitAmount || 0\r\n )}{' '}\r\n {selectedOption?.benefitTypeFriendly}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Amount \r\n (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.benefitAmount\r\n )}{' '}\r\n {option?.benefitTypeFriendly}\r\n \r\n );\r\n } else if (option.isDecline) {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n Elimination Period \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {selectedOption?.eliminationPeriod}\r\n \r\n {selectedOption?.eliminationPeriodType}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n Elimination Period\r\n \r\n (\r\n \r\n {option.eliminationPeriod} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n Benefit Duration \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {selectedOption?.benefitDuration}\r\n \r\n {selectedOption?.benefitDurationType}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Duration \r\n (\r\n \r\n {option.duration} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n
\r\n Offset \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitOffsets || 'N/A'}\r\n \r\n
\r\n
\r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n // disabled={!props.allowModify}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.memberPremiumAmount || 0\r\n )}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {props.UsdFormatterDec.format(\r\n selectedOption?.benefitAmount || 0\r\n )}{' '}\r\n {selectedOption?.benefitTypeFriendly}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Amount \r\n (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.benefitAmount || 0\r\n )}{' '}\r\n {option.benefitTypeFriendly}\r\n \r\n );\r\n } else if (option.isDecline) {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n Elimination Period \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {selectedOption?.eliminationPeriod}\r\n \r\n {selectedOption?.eliminationPeriodType}\r\n \r\n )}\r\n {edit && (\r\n \r\n \r\n Elimination Period\r\n \r\n (\r\n \r\n {option.eliminationPeriod} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n Benefit Duration \r\n
\r\n\r\n \r\n {!edit && (\r\n \r\n {selectedOption?.benefitDuration}\r\n \r\n {selectedOption?.benefitDurationType}\r\n \r\n )}\r\n {edit && (\r\n \r\n Benefit Duration \r\n (\r\n \r\n {option.duration} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n
\r\n Offset \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.benefitOffsets || 'N/A'}\r\n \r\n
\r\n
\r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n // disabled={!props.allowModify}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}:\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(premiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n // if(props?.activePlansNotPendingCancel?.length > 1){\r\n // //cancel single line of coverage\r\n // handleOpenCancelCoverageDrawer(e, props?.plan, props?.planName);\r\n // }else if (props?.activePlansNotPendingCancel?.length === 1){\r\n // //cancel all coverage\r\n // props?.openCancelAllCoverageModal();\r\n // }\r\n // }}\r\n disabled={true}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n
\r\n Benefit Amount \r\n
\r\n\r\n
\r\n \r\n {selectedOption?.name || 'Declined'}\r\n \r\n
\r\n
\r\n
\r\n Covered Lives \r\n
\r\n\r\n
\r\n {!edit && (\r\n \r\n {coveredLives}\r\n \r\n )}\r\n {edit && (\r\n <>\r\n legend': { display: 'none' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n }}\r\n IconComponent={() => (\r\n \r\n Member{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndSpousePremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.memberAndDependentsPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {props.UsdFormatterDec.format(\r\n option?.familyPremiumAmount || 0\r\n )}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n } else {\r\n return (\r\n \r\n Decline\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n
\r\n
\r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n <>\r\n
\r\n \r\n {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n }}\r\n // disabled={!props.allowModify}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n {loading && (\r\n <>\r\n \r\n \r\n \r\n {props?.cancelEnrollment ? 'Cancel Enrollment' : ''}\r\n {props?.cancelAllCoverage ? 'Cancel All Coverage' : ''}\r\n \r\n \r\n \r\n \r\n {/* Plan Info */}\r\n \r\n \r\n {!props?.cancelEnrollment ? '' : props?.singleEnrollment?.name}\r\n \r\n\r\n {/* display this message if canceling enrollment during open enrollment */}\r\n {props?.cancelEnrollment ? (\r\n \r\n Canceling this enrollment will prevent it from going into effect\r\n or making payments. This will leave the enrollment in a\r\n cancelled status that you can revert back during this enrollment\r\n window.\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n\r\n {/* Edit fields */}\r\n \r\n {!props?.cancelEnrollment && (\r\n <>\r\n \r\n {props?.dateSelectOptions?.length > 0 &&\r\n props?.dateSelectOptions.map((date) => {\r\n return (\r\n \r\n {`${date.name} (${date.displayDate})`}\r\n \r\n );\r\n })}\r\n \r\n\r\n {\r\n props?.handleChangeReasonForCancelation(e);\r\n }}\r\n label=\"Reason for Cancellation\"\r\n value={props?.reasonForCancelation || ''}\r\n select\r\n >\r\n {props?.cancellationReasons &&\r\n props?.cancellationReasons.map((reason) => {\r\n return (\r\n \r\n {reason.name}\r\n \r\n );\r\n })}\r\n \r\n\r\n {/* \r\n setGenerateNewForm(!generateNewForm)}\r\n // value={}\r\n checked={generateNewForm}\r\n name={'generateNewForm'}\r\n sx={{\r\n padding: '0px',\r\n marginRight: '12px',\r\n }}\r\n icon={ */}\r\n \r\n )}\r\n \r\n {/* Buttons */}\r\n \r\n \r\n CANCEL\r\n \r\n \r\n SUBMIT CANCELLATION\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n//services\r\nimport enrollmentService from '../../../../../../../services/enrollment-service';\r\nimport activeCoverageService from '../../../../../../../services/activeCoverage-service';\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport TextField from '@mui/material/TextField';\r\nimport Select from '@mui/material/Select';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Alert, Box, Typography, Checkbox } from '@mui/material';\r\n\r\n//Mui icons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport NoVisibilityIcon from '@mui/icons-material/VisibilityOff';\r\n\r\n//Our Components\r\nimport InfinityLoader from '../../../../../../UH-loading-animation/InfinityLoader';\r\nimport { set, format } from 'date-fns';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n componentBody: {\r\n fontFamily: 'Poppins',\r\n minWidth: '538px',\r\n height: '100%',\r\n backgroundColor: 'background.default',\r\n overflowY: 'auto',\r\n },\r\n headerContainer: {\r\n width: '100%',\r\n padding: '10px 30px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '0 auto',\r\n borderBottom: '1px solid',\r\n borderColor: 'primary.main',\r\n },\r\n drawerTitle: {\r\n color: 'text.primary',\r\n fontFamily: 'Poppins',\r\n fontSize: '22px',\r\n fontWeight: '400',\r\n },\r\n infoContainer: {\r\n width: '100%',\r\n padding: '10px 30px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'left',\r\n margin: '0 auto',\r\n },\r\n policyDetails: {\r\n fontFamily: 'Archivo',\r\n fontSize: '13px!important',\r\n fontWeight: 400,\r\n color: 'text.secondary',\r\n lineHeight: '20px',\r\n },\r\n description: {\r\n color: 'text.primary',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n fontWeight: '500',\r\n padding: '10px 16px 10px 20px',\r\n },\r\n closeDrawerButton: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n buttonContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n },\r\n};\r\nexport default function EditCoverageEffectiveDrawer(props) {\r\n //Plan to cancel title:\r\n const displayPlanName = (displayName) => {\r\n let name = displayName;\r\n switch (displayName) {\r\n case 'LADD-S':\r\n name = 'LADD-Spouse';\r\n break;\r\n case 'LADD-D':\r\n name = 'LADD-Dependent';\r\n break;\r\n default:\r\n return name;\r\n }\r\n return name;\r\n };\r\n //Drawer Logic\r\n const handleCloseDrawer = () => {\r\n props?.setEditCoverageEffectiveDateDrawerOpen(false);\r\n };\r\n\r\n const [error, setError] = useState(false);\r\n const [loading, setLoading] = useState(false);\r\n\r\n //submit change\r\n const submitEffectiveDateChange = async () => {\r\n setLoading(true);\r\n //Cancel all coverage\r\n if (props?.cancelAllCoverage) {\r\n props?.handleCancelAllCoverage();\r\n } else {\r\n //cancel single line of coverage\r\n let activeCoverageId = props?.planToCancel?.id;\r\n if (!props?.cancelEnrollment) {\r\n if (activeCoverageId) {\r\n try {\r\n //cancel coverage\r\n await activeCoverageService.cancelActiveCoverageForMember(\r\n activeCoverageId,\r\n props?.reasonForCancelation,\r\n props?.dateOfCancelation\r\n );\r\n } catch (error) {\r\n console.error('error canceling single line of coverage', error);\r\n }\r\n }\r\n } else {\r\n //cancel enrollment during open enrollment\r\n let memberId = props?.member?.id;\r\n let enrollmentId = props?.planEnrollmentId;\r\n let errorCanceling = false;\r\n\r\n try {\r\n let cancelAllCoverage = await enrollmentService.cancelEnrollment(\r\n enrollmentId,\r\n memberId\r\n );\r\n } catch (error) {\r\n console.error('error canceling all coverage', error);\r\n props?.setCancelAllError(error);\r\n //local error value for conditional rendering of modal\r\n errorCanceling = true;\r\n setLoading(false);\r\n }\r\n setTimeout(() => {\r\n //refresh enrollment data\r\n\r\n props?.getThisPlan();\r\n //refresh payment schedules\r\n // props?.getPaymentSchedule()\r\n setLoading(false);\r\n //close modal if no error, otherwise display error\r\n if (!errorCanceling) {\r\n handleCloseDrawer();\r\n }\r\n }, 500);\r\n }\r\n }\r\n\r\n //following cancel coverage, refresh\r\n //refresh payment schedule plan and cancellation list\r\n setTimeout(() => {\r\n props?.getPaymentSchedule();\r\n props?.getActiveCoverage(props?.member?.id);\r\n props?.getMemberHistory();\r\n handleCloseDrawer();\r\n setLoading(false);\r\n }, 500);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {loading && (\r\n <>\r\n \r\n \r\n \r\n Coverage Effective Date\r\n \r\n \r\n \r\n \r\n\r\n {/* Edit fields */}\r\n \r\n {!props?.cancelEnrollment && (\r\n <>\r\n \r\n {props?.currentAvailableWindows?.length > 0 &&\r\n props?.currentAvailableWindows.map((date) => {\r\n return (\r\n \r\n {`${date.paymentStart}`}\r\n ding\r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n \r\n {/* Buttons */}\r\n \r\n \r\n CANCEL\r\n \r\n \r\n SUBMIT DATE CHANGE\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { add, format, set } from 'date-fns';\r\n\r\n//Services\r\nimport enrollmentService from '../../../../../../../../services/enrollment-service';\r\n\r\n//Mui icons\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport DeleteIcon from '@mui/icons-material/Delete';\r\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';\r\n\r\n//Mui Components\r\nimport Chip from '@mui/material/Chip';\r\nimport Alert from '@mui/material/Alert';\r\nimport Fade from '@mui/material/Fade';\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box, border, textAlign } from '@mui/system';\r\nimport Button from '@mui/material/Button';\r\nimport ButtonGroup from '@mui/material/ButtonGroup';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Collapse, InputLabel } from '@mui/material';\r\nimport FormControl from '@mui/material/FormControl';\r\nimport Select from '@mui/material/Select';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport InputAdornment from '@mui/material/InputAdornment';\r\nimport TextField from '@mui/material/TextField';\r\nimport Dialog from '@mui/material/Dialog';\r\nimport DialogActions from '@mui/material/DialogActions';\r\nimport DialogContent from '@mui/material/DialogContent';\r\nimport DialogContentText from '@mui/material/DialogContentText';\r\nimport DialogTitle from '@mui/material/DialogTitle';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport { FormGroup, FormControlLabel, Switch } from '@mui/material';\r\n\r\n//our components\r\nimport InfinityLoader from '../../../../../../../UH-loading-animation/InfinityLoader';\r\nimport { is } from 'date-fns/locale';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\n\r\nexport default function EnrollmentSummaryCardCriticalIllness(props) {\r\n const componentStyles = {\r\n addBeneficiaryInputs: {\r\n margin: '5px 0px',\r\n },\r\n editBeneficiaryContainer: {\r\n display: 'flex',\r\n width: '100%',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n margin: ' 0px 0px 10px 10px',\r\n },\r\n editBeneficiaryRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '50%',\r\n marginBottom: '16px',\r\n alignItems: 'center',\r\n },\r\n allocationInput: { marginRight: '5px', minWidth: '80px' },\r\n beneficiaryChip: {\r\n margin: '5px 4px 0px 0px',\r\n backgroundColor: 'transparent',\r\n color: 'primary.main',\r\n border: 'solid 1px',\r\n borderColor: 'primary.main',\r\n fontWeight: '500',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n height: '36px',\r\n borderRadius: '50px',\r\n },\r\n selectDropDown: {\r\n height: '40px',\r\n borderRadius: '4px',\r\n padding: '10px 0px',\r\n width: '100%',\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n textAlign: 'left',\r\n },\r\n };\r\n\r\n let plan = props.plan;\r\n\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [storedAllocations, setStoredAllocations] = useState([]);\r\n const [primaryBennies, setPrimaryBennies] = useState([]);\r\n const [contingentBennies, setContingentBennies] = useState([]);\r\n const [potentialBeneficiaries, setPotentialBeneficiaries] = useState([]);\r\n const [totalAllocationError, setTotalAllocationError] = useState(false);\r\n\r\n const getAllocations = async () => {\r\n //TECHNICALLY A HARDCODE, CHECK FOR BENNY ON PLAN\r\n // props.setLoading(true);\r\n let _storedAllocations;\r\n\r\n //get allocations for agent-side single enrollment with planId and memberId\r\n const planId = plan.planId;\r\n const memberId = props.member?.id;\r\n\r\n try {\r\n _storedAllocations =\r\n await enrollmentService.getBeneficiaryAllocationsForMember(\r\n planId,\r\n memberId\r\n );\r\n\r\n if (!_storedAllocations || _storedAllocations.length === 0) {\r\n setStoredAllocations([]);\r\n } else {\r\n //format dob\r\n let formattedDobBennies = [];\r\n _storedAllocations.forEach((benny) => {\r\n if (\r\n benny.dob &&\r\n (benny?.dob?.slice(0, 4) !== '0001' ||\r\n benny?.dob?.slice(0, 4) !== '9999')\r\n ) {\r\n benny.dob = format(props?.formatDate(benny.dob), 'yyyy-MM-dd');\r\n }\r\n formattedDobBennies.push({ ...benny });\r\n });\r\n\r\n setStoredAllocations(formattedDobBennies);\r\n }\r\n } catch (error) {\r\n console.error('error grabbing allocations for member side', error);\r\n }\r\n };\r\n\r\n const getPotentialBeneficiariesForMember = async () => {\r\n let _potentials;\r\n try {\r\n _potentials = await enrollmentService.getPotentialBeneficiariesForMember(\r\n props?.member?.id\r\n ); //FOR MEMBER\r\n setPotentialBeneficiaries(_potentials);\r\n } catch (error) {\r\n console.error('error getting potential bennies', error);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props.member && plan) {\r\n getAllocations();\r\n getPotentialBeneficiariesForMember();\r\n }\r\n }, [props.member, props?.member?.id, plan]);\r\n\r\n useEffect(() => {\r\n if (storedAllocations && storedAllocations.length > 0) {\r\n //separating primary bennies\r\n let _primaryBennies = storedAllocations?.filter(\r\n (allocation) => allocation.isPrimary && !allocation.isDeleted\r\n );\r\n\r\n //separating contingent bennies\r\n let _contingentBennies = storedAllocations?.filter(\r\n (allocation) => !allocation.isPrimary && !allocation.isDeleted\r\n );\r\n setPrimaryBennies(_primaryBennies);\r\n setContingentBennies(_contingentBennies);\r\n }\r\n }, [storedAllocations]);\r\n\r\n //ADDING new beneficiaries when even-split button is on: overall allocations are updated w/ new bennies added, update primary and contingent bennies amount allocated evenly\r\n //need to run this when switch is on\r\n\r\n //show if even split is on or off\r\n const [evenSplitPrimary, setEvenSplitPrimary] = useState(true);\r\n const [evenSplitContingent, setEvenSplitContingent] = useState(true);\r\n\r\n const handleEvenSplitOnAddBeneficiary = () => {\r\n //primary benny reallocation\r\n if (primaryBennies?.length > 0 && evenSplitPrimary) {\r\n let indexOfZeroBenny;\r\n let bennyWithZeroAmount = primaryBennies?.find((benny, index) => {\r\n indexOfZeroBenny = index;\r\n return benny.amount === 0;\r\n });\r\n\r\n if (bennyWithZeroAmount) {\r\n //find new even allocation amount for benny with 0 amount\r\n let total = 100;\r\n let _evenSplitAmount = Math.floor(total / primaryBennies?.length);\r\n //update the rest of the bennies taking into account this new amount\r\n handleAllocationChange(\r\n _evenSplitAmount,\r\n bennyWithZeroAmount,\r\n indexOfZeroBenny\r\n );\r\n }\r\n }\r\n //contingent benny reallocation\r\n if (contingentBennies?.length > 0 && evenSplitContingent) {\r\n let indexOfZeroBenny;\r\n let bennyWithZeroAmount = contingentBennies?.find((benny, index) => {\r\n indexOfZeroBenny = index;\r\n return benny.amount === 0;\r\n });\r\n\r\n if (bennyWithZeroAmount) {\r\n //find new even allocation amount for benny with 0 amount\r\n let total = 100;\r\n let _evenSplitAmount = Math.floor(total / contingentBennies?.length);\r\n //update the rest of the bennies taking into account this new amount\r\n handleAllocationChange(\r\n _evenSplitAmount,\r\n bennyWithZeroAmount,\r\n indexOfZeroBenny\r\n );\r\n }\r\n }\r\n };\r\n\r\n let memberSelectedId = plan.selectedOptionId;\r\n let spouseSelectedId = plan.spouseSelectedOptionId;\r\n let dependentSelectedId = plan.dependentSelectedOptionId;\r\n let memberSelection =\r\n plan.memberOptions &&\r\n plan.memberOptions.find(\r\n (option) => option.memberOptionId === memberSelectedId\r\n );\r\n let spouseSelection =\r\n plan.spouseOptions &&\r\n plan.spouseOptions.find(\r\n (option) => option.memberAndSpouseOptionId === spouseSelectedId\r\n );\r\n let dependentSelection =\r\n plan.dependentOptions &&\r\n plan.dependentOptions.find(\r\n (option) => option.memberAndDependentsOptionId === dependentSelectedId\r\n );\r\n //open verticle dot menu to edit or cancel coverage\r\n const [anchorEl, setAnchorEl] = useState({});\r\n\r\n const handleOpenRowMenu = (e) => {\r\n setAnchorEl({\r\n ...anchorEl,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n };\r\n\r\n const handleCloseRowMenu = () => {\r\n setAnchorEl({});\r\n };\r\n\r\n //Open cancel Coverage drawer\r\n const handleOpenCancelCoverageDrawer = (e, plan, planName) => {\r\n props.handleOpenDrawer(plan, planName);\r\n handleCloseRowMenu();\r\n };\r\n\r\n const [edit, setEdit] = useState();\r\n //EDIT STATES\r\n //This is bolding the payment info on the right side when edit==true\r\n useEffect(() => {\r\n if (props.setCurrentEdit) {\r\n let _currentEdit = { ...props.currentEdit };\r\n\r\n let editArray = [\r\n ['criticalIllnessMember', edit],\r\n ['criticalIllnessSpouse', edit],\r\n ['criticalIllnessDependent', edit],\r\n ];\r\n\r\n editArray.forEach((edit) => {\r\n let key = edit[0];\r\n let val = edit[1];\r\n _currentEdit[key] = val;\r\n });\r\n props.setCurrentEdit(_currentEdit);\r\n }\r\n //reset allocation error\r\n setTotalAllocationError(false);\r\n }, [edit]);\r\n\r\n //AMOUNTS FOR EDIT\r\n const [criticalIllnessAmounts, setCriticalIllnessAmounts] = useState({\r\n memberAmt: 0,\r\n spouseAmt: 0,\r\n dependentAmt: 0,\r\n });\r\n const [isCriticalIllnessAmountsUpdated, setIsCriticalIllnessAmountsUpdated] =\r\n useState(false);\r\n\r\n useEffect(() => {\r\n if (plan) {\r\n setCriticalIllnessAmounts({\r\n memberAmt:\r\n plan.memberOptions.find((option) => option.isSelected)\r\n ?.coverageAmount || 0,\r\n spouseAmt:\r\n plan.spouseOptions.find((option) => option.isSelected)\r\n ?.coverageAmount || 0,\r\n dependentAmt:\r\n plan.dependentOptions.find((option) => option.isSelected)\r\n ?.coverageAmount || 0,\r\n });\r\n }\r\n }, [plan]);\r\n\r\n let handleCriticalIllnessAmountChange = (e, personAmt) => {\r\n setIsCriticalIllnessAmountsUpdated(true);\r\n let value = e.target.value;\r\n setCriticalIllnessAmounts({\r\n ...criticalIllnessAmounts,\r\n [personAmt]: value,\r\n });\r\n };\r\n\r\n let saveNewAmounts = async () => {\r\n let memberId = props?.member.id;\r\n let groupPlanId = props?.groupPlanId;\r\n let planId = plan.planId;\r\n let enrollmentId = props.planEnrollmentId;\r\n let cancellationReasonId = 0;\r\n let memberCoverageAmount = criticalIllnessAmounts.memberAmt;\r\n let spouseCoverageAmount = criticalIllnessAmounts.spouseAmt;\r\n let dependentCoverageAmount = criticalIllnessAmounts.dependentAmt;\r\n\r\n await enrollmentService.editCriticalIllnessForMember(\r\n memberId,\r\n groupPlanId,\r\n planId,\r\n enrollmentId,\r\n cancellationReasonId,\r\n memberCoverageAmount,\r\n spouseCoverageAmount,\r\n dependentCoverageAmount\r\n );\r\n\r\n //update payment schedules\r\n props?.getPaymentSchedule();\r\n //reset isCriticalIllnessAmountsUpdated to false\r\n setIsCriticalIllnessAmountsUpdated(false);\r\n };\r\n\r\n //check allocation totals on blur for each input\r\n const checkAllocationTotals = () => {\r\n // check totals of primary and contingent to make sure each add up to 100\r\n let _primaryTotal = primaryBennies.reduce((accumulator, currentValue) => {\r\n return accumulator + currentValue?.amount;\r\n }, 0);\r\n let _contingentTotal = contingentBennies.reduce(\r\n (accumulator, currentValue) => {\r\n return accumulator + currentValue?.amount;\r\n },\r\n 0\r\n );\r\n\r\n if (\r\n primaryBennies?.length > 0 &&\r\n contingentBennies?.length > 0 &&\r\n _primaryTotal === 100 &&\r\n _contingentTotal === 100\r\n ) {\r\n //if both primariees and contingents exist, each must total 100\r\n setTotalAllocationError(false);\r\n //if only primaries exist, they must total 100\r\n } else if (\r\n primaryBennies?.length > 0 &&\r\n contingentBennies?.length === 0 &&\r\n _primaryTotal === 100\r\n ) {\r\n setTotalAllocationError(false);\r\n //if only contingents exist, they must total 100\r\n } else if (\r\n primaryBennies?.length === 0 &&\r\n contingentBennies?.length > 0 &&\r\n _contingentTotal === 100\r\n ) {\r\n setTotalAllocationError(false);\r\n } else {\r\n setTotalAllocationError({\r\n primaryTotal: _primaryTotal,\r\n contingentTotal: _contingentTotal,\r\n });\r\n }\r\n };\r\n\r\n const saveBeneficiaryChanges = async () => {\r\n //only update if benny info besides allocations was changed\r\n if (recentlyUpdatedBennies?.length > 0) {\r\n try {\r\n recentlyUpdatedBennies.forEach(async (benny) => {\r\n await enrollmentService.updateBeneficiaryForMember(\r\n benny.memberId,\r\n benny\r\n );\r\n });\r\n } catch (error) {\r\n console.error('error updating bennies', error);\r\n }\r\n }\r\n\r\n // only update if allocations were changed\r\n if (isAllocationUpdated && !totalAllocationError) {\r\n await updateAllocationsInDb();\r\n }\r\n\r\n //reset allocation update state after save\r\n setIsAllocationUpdated(false);\r\n };\r\n\r\n let updateSinglePlan = async () => {\r\n setLoading(true);\r\n //check permissions before updating beneficiary changes and plan amount/ coverage effective changes\r\n if (props?.allowEditEnrollment) {\r\n await saveBeneficiaryChanges();\r\n }\r\n //check permissions and that amounts have changed before updating plan amounts\r\n if (props?.allowModify && isCriticalIllnessAmountsUpdated) {\r\n await saveNewAmounts();\r\n }\r\n await props.getThisPlan();\r\n\r\n //setTimeout(() => {\r\n // setEdit(false)\r\n\r\n // setLoading(false)\r\n //},[2000])\r\n setEdit(false);\r\n setLoading(false);\r\n };\r\n\r\n const [editEffectiveDate, setEditEffectiveDate] = useState(false);\r\n const updateCoverageEffectiveDate = async () => {\r\n setLoading(true);\r\n // await props.updateCoverageEffectiveDate('stdPlan', stdPlan)\r\n // await props.getThisPlan()\r\n //setTimeout(() => {\r\n // setEditEffectiveDate(false)\r\n // setLoading(false)\r\n //},[2000])\r\n setEditEffectiveDate(false);\r\n setLoading(false);\r\n };\r\n\r\n //BENNY UPDATES\r\n\r\n const getRelationshipTypeFromId = (id) => {\r\n let relationshipType = props?.relationshipTypes.find(\r\n (type) => type.id === id\r\n );\r\n return relationshipType?.name;\r\n };\r\n\r\n //states to keep track of beneficiaries updated\r\n const [recentlyUpdatedBennies, setRecentlyUpdatedBennies] = useState([]); //updates to name, dob, relationship type... future use\r\n const [isAllocationUpdated, setIsAllocationUpdated] = useState(false); //updates to allocations\r\n\r\n //UPDATE NAME AND DOB - can use this to update these properties - input fields must be commented back in\r\n const handleBeneficiaryInputChange = (e, property, beneficiary) => {\r\n let val = e.target.value;\r\n\r\n //update primary beneficiary OR contingent beneficiary\r\n if (beneficiary.isPrimary) {\r\n setPrimaryBennies([\r\n ...primaryBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { [property]: val })\r\n : benny\r\n ),\r\n ]);\r\n } else {\r\n setContingentBennies([\r\n ...contingentBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { [property]: val })\r\n : benny\r\n ),\r\n ]);\r\n }\r\n\r\n //add updated benny to recently updated array if it doesn't exist or update it if alreay in array\r\n\r\n if (recentlyUpdatedBennies.some((benny) => benny.id === beneficiary.id)) {\r\n let updatedArray = recentlyUpdatedBennies.map((item) =>\r\n item.id === beneficiary.id ? { ...item, [property]: val } : item\r\n );\r\n\r\n setRecentlyUpdatedBennies(updatedArray);\r\n } else {\r\n let updatedBenny = { ...beneficiary, [property]: val };\r\n\r\n setRecentlyUpdatedBennies([...recentlyUpdatedBennies, updatedBenny]);\r\n }\r\n };\r\n\r\n //UPDATE RELATIONSHIP type for primary and contingent\r\n const handleRelationshipChange = (e, beneficiary) => {\r\n //update relationship type if it is changed\r\n if (beneficiary.isPrimary) {\r\n setPrimaryBennies([\r\n ...primaryBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { relationshipTypeId: e.target.value })\r\n : benny\r\n ),\r\n ]);\r\n } else {\r\n setContingentBennies([\r\n ...contingentBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { relationshipTypeId: e.target.value })\r\n : benny\r\n ),\r\n ]);\r\n }\r\n\r\n //add updated benny to recently updated array if it doesn't exist or update it if alreay in array\r\n\r\n if (recentlyUpdatedBennies.some((benny) => benny.id === beneficiary.id)) {\r\n let updatedArray = recentlyUpdatedBennies.map((item) =>\r\n item.id === beneficiary.id\r\n ? { ...item, relationshipTypeId: e.target.value }\r\n : item\r\n );\r\n\r\n setRecentlyUpdatedBennies(updatedArray);\r\n } else {\r\n let updatedBenny = { ...beneficiary, relationshipTypeId: e.target.value };\r\n\r\n setRecentlyUpdatedBennies([...recentlyUpdatedBennies, updatedBenny]);\r\n }\r\n };\r\n\r\n //UPDATE ALLOCATION\r\n const handleAllocationChange = (e, beneficiary, i) => {\r\n setIsAllocationUpdated(true);\r\n let total = 100;\r\n //check if e is a number equal to 0 (will get this from delete) othersiwse get value from e.target.value\r\n // let val = e === 0 ? 0 : Number(e.target.value);\r\n let val;\r\n //check if e is an event or a number and assign value accordingly\r\n if (e?.target?.value) {\r\n val = Number(e.target.value);\r\n } else {\r\n val = e;\r\n }\r\n\r\n let unhandledAmount = total - val;\r\n\r\n let primaryBenniesRemaining = primaryBennies?.length - 1;\r\n let contingentBenniesRemaining = contingentBennies?.length - 1;\r\n\r\n // UPDATE PRIMARY beneficiary\r\n if (beneficiary.isPrimary) {\r\n // check that value is not greater than 100 or less than 0\r\n if (val <= 100 && val >= 0) {\r\n //update current primary beneficiary w/ new value\r\n setPrimaryBennies((prevPrimaryBennies) =>\r\n prevPrimaryBennies.map((benny) =>\r\n benny.id === beneficiary.id ? { ...benny, amount: val } : benny\r\n )\r\n );\r\n }\r\n //IF evenSplit = true, check if there are other beneficiaries to update w/ new remaining amount if unhandled amount > 0\r\n if (evenSplitPrimary) {\r\n if (primaryBenniesRemaining > 0 && unhandledAmount >= 0) {\r\n //update other primary beneficiaries w/ new value\r\n let evenSplitAmount = Math.floor(\r\n Math.abs(unhandledAmount) / primaryBenniesRemaining\r\n );\r\n let remainder = unhandledAmount % primaryBenniesRemaining;\r\n\r\n //add remainder if greater than 0\r\n setPrimaryBennies((prePrimaryBennies) =>\r\n prePrimaryBennies.map((benny, index) => {\r\n if (index !== i) {\r\n // Check if the last beneficiary needs to receive the remainder\r\n if (index === primaryBenniesRemaining) {\r\n return { ...benny, amount: evenSplitAmount + remainder };\r\n } else {\r\n return { ...benny, amount: evenSplitAmount };\r\n }\r\n } else {\r\n return benny; // Return the unchanged beneficiary\r\n }\r\n })\r\n );\r\n }\r\n }\r\n }\r\n\r\n //UPDATE CONTINGENT beneficiary\r\n if (!beneficiary.isPrimary) {\r\n // check that value is not greater than 100 or less than 0\r\n if (val <= 100 && val >= 0) {\r\n //update current primary beneficiary w/ new value\r\n setContingentBennies((prevContBennies) =>\r\n prevContBennies.map((benny) =>\r\n benny.id === beneficiary.id ? { ...benny, amount: val } : benny\r\n )\r\n );\r\n }\r\n //IF evenSplit = true, check if there are other beneficiaries to update w/ new remaining amount if unhandled amount > 0\r\n if (evenSplitContingent) {\r\n if (contingentBenniesRemaining > 0 && unhandledAmount >= 0) {\r\n //update other primary beneficiaries w/ new value\r\n let evenSplitAmount = Math.floor(\r\n Math.abs(unhandledAmount) / contingentBenniesRemaining\r\n );\r\n let remainder = unhandledAmount % contingentBenniesRemaining;\r\n\r\n //add remainder if greater than 0\r\n setContingentBennies((prevContBennies) =>\r\n prevContBennies.map((benny, index) => {\r\n if (index !== i) {\r\n // Check if the last beneficiary needs to receive the remainder\r\n if (index === contingentBenniesRemaining) {\r\n return { ...benny, amount: evenSplitAmount + remainder };\r\n } else {\r\n return { ...benny, amount: evenSplitAmount };\r\n }\r\n } else {\r\n return benny; // Return the unchanged beneficiary\r\n }\r\n })\r\n );\r\n }\r\n }\r\n }\r\n };\r\n\r\n //Update allocations in db\r\n const updateAllocationsInDb = async () => {\r\n let allAllocations = [...primaryBennies, ...contingentBennies];\r\n // Create new benny objects to fufill data requirements for back updating allocations\r\n let allocationsWithBennyIds = allAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n } = object; // Destructure 'id' from the object\r\n\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n };\r\n });\r\n\r\n try {\r\n let results = await enrollmentService.saveBeneficiaryAllocationForMember(\r\n allocationsWithBennyIds,\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error('error updating allocations for beneficiaries', error);\r\n }\r\n };\r\n\r\n //ADD NEW BENEFICIARY LOGIC\r\n const [addPrimaryBenny, setAddPrimaryBenny] = useState(false);\r\n const [addContingentBenny, setAddContingentBenny] = useState(false);\r\n const [newPrimaryBenny, setNewPrimaryBenny] = useState({});\r\n const [newContingentBenny, setNewContingentBenny] = useState({});\r\n\r\n const handleAddBeneficiaryInputChange = (e, property, type) => {\r\n let val = e.target.value;\r\n\r\n if (type === 'primary') {\r\n setNewPrimaryBenny({ ...newPrimaryBenny, [property]: val });\r\n }\r\n\r\n if (type === 'contingent') {\r\n setNewContingentBenny({ ...newContingentBenny, [property]: val });\r\n }\r\n };\r\n\r\n const handleAddBeneficiaryRelationshipChange = (e, type) => {\r\n let val = e.target.value;\r\n if (type === 'primary') {\r\n setNewPrimaryBenny({ ...newPrimaryBenny, relationshipTypeId: val });\r\n }\r\n\r\n if (type === 'contingent') {\r\n setNewContingentBenny({ ...newContingentBenny, relationshipTypeId: val });\r\n }\r\n };\r\n\r\n const handleAddDependentAsBenny = (selection) => {\r\n setNewPrimaryBenny({\r\n ...newPrimaryBenny,\r\n firstName: selection.firstName,\r\n lastName: selection.lastName,\r\n relationshipTypeId: selection?.relationshipTypeId || '',\r\n });\r\n };\r\n\r\n const saveNewBeneficiary = async () => {\r\n //current total allocations before adding the new benny\r\n let allCurrentAllocations = [...primaryBennies, ...contingentBennies];\r\n let currentAllocationsWithBennyIds = allCurrentAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n } = object; // Destructure 'id' from the object\r\n\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n };\r\n });\r\n\r\n //add new primary beneficiary to db\r\n if (addPrimaryBenny) {\r\n let _newPrimaryBennyObj = {\r\n ...newPrimaryBenny,\r\n middleInitial: '',\r\n planId: props?.plan?.planId,\r\n isPrimary: true,\r\n isDeleted: false,\r\n memberId: props?.member.id,\r\n amount: 0,\r\n };\r\n\r\n try {\r\n let newBennyInDb = await enrollmentService.addBeneficiaryForMember(\r\n props?.member.id,\r\n _newPrimaryBennyObj\r\n );\r\n\r\n //if new benny added suscessfully, create new benny allocation obj and add it to current benny allocations array to update allocation in db\r\n if (newBennyInDb.id) {\r\n //if there are no primary bennies, set new benny amount to 100, otherwise set to 0\r\n let newBennyAmount = primaryBennies.length > 0 ? 0 : 100;\r\n let newBennyAllocation = {\r\n BeneficiaryId: newBennyInDb.id,\r\n planId: props?.plan?.planId,\r\n amount: newBennyAmount,\r\n isPrimary: true,\r\n isDeleted: false,\r\n memberId: newBennyInDb.memberId,\r\n };\r\n\r\n try {\r\n await enrollmentService.saveBeneficiaryAllocationForMember(\r\n [...currentAllocationsWithBennyIds, newBennyAllocation],\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error(\r\n 'error updating allocations for new primary beneficiary',\r\n error\r\n );\r\n }\r\n }\r\n } catch (error) {\r\n console.error('error adding new primary beneficiary', error);\r\n }\r\n }\r\n //add new contingent beneficiary to db\r\n if (addContingentBenny) {\r\n let _newContingentBennyObj = {\r\n ...newContingentBenny,\r\n middleInitial: '',\r\n planId: props?.plan?.planId,\r\n isPrimary: false,\r\n isDeleted: false,\r\n memberId: props?.member.id,\r\n amount: 0,\r\n };\r\n\r\n try {\r\n let newBennyInDb = await enrollmentService.addBeneficiaryForMember(\r\n props?.member.id,\r\n _newContingentBennyObj\r\n );\r\n\r\n //if new benny added suscessfully, create new contingent benny allocation obj and add it to current benny allocations array to update allocation in db\r\n if (newBennyInDb.id) {\r\n //if there are no primary bennies, set new benny amount to 100, otherwise set to 0\r\n let newBennyAmount = contingentBennies.length > 0 ? 0 : 100;\r\n let newBennyAllocation = {\r\n BeneficiaryId: newBennyInDb.id,\r\n planId: props?.plan?.planId,\r\n amount: newBennyAmount,\r\n isPrimary: false,\r\n isDeleted: false,\r\n memberId: newBennyInDb.memberId,\r\n };\r\n\r\n try {\r\n await enrollmentService.saveBeneficiaryAllocationForMember(\r\n [...currentAllocationsWithBennyIds, newBennyAllocation],\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error(\r\n 'error updating allocations for new contingent beneficiary',\r\n error\r\n );\r\n }\r\n }\r\n } catch (error) {\r\n console.error('error adding new primary beneficiary', error);\r\n }\r\n }\r\n\r\n getAllocations();\r\n //close and clear add benny form\r\n if (addPrimaryBenny) {\r\n setAddPrimaryBenny(false);\r\n setNewPrimaryBenny({});\r\n }\r\n if (addContingentBenny) {\r\n setAddContingentBenny(false);\r\n setNewContingentBenny({});\r\n }\r\n };\r\n\r\n //DELETE BENEFICIARY LOGIC\r\n\r\n const [openConfirmDelete, setOpenConfirmDelete] = useState(false);\r\n const [bennyToDelete, setBennyToDelete] = useState({});\r\n\r\n const openDeleteModal = (e, beneficiary, i) => {\r\n setIsDeleted(false);\r\n setOpenConfirmDelete(true);\r\n setBennyToDelete({ ...beneficiary, index: i });\r\n };\r\n const closeDeleteModal = () => {\r\n setOpenConfirmDelete(false);\r\n setBennyToDelete({});\r\n };\r\n\r\n const [isDeleted, setIsDeleted] = useState(false);\r\n //confirm delete benny and update db\r\n const handleDeleteBenny = async () => {\r\n setIsDeleted(bennyToDelete);\r\n //update local state allocations w/ deleted benny allocations = 0\r\n handleAllocationChange(0, bennyToDelete, bennyToDelete?.index);\r\n //delete them from db\r\n try {\r\n await enrollmentService.deleteBeneficiaryByMemberId(\r\n props?.member.id,\r\n bennyToDelete?.id\r\n );\r\n } catch (error) {\r\n console.error('error deleting beneficiary', error);\r\n }\r\n\r\n getAllocations();\r\n closeDeleteModal();\r\n };\r\n\r\n //function to update all other allocations in db minus the recently deleted benny (called in useEffect below)\r\n //still struggling w/ updating to current allocations (need a page reload to see changes - but it is working!)\r\n const updateCurrentAllocationsAfterDelete = async () => {\r\n let allAllocations = [...primaryBennies, ...contingentBennies];\r\n\r\n // Create new benny objects to fufill data requirements for back updating allocations\r\n let allocationsWithBennyIds = allAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n } = object; // Destructure 'id' from the object\r\n\r\n if (object.id !== isDeleted.id) {\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n };\r\n }\r\n });\r\n\r\n try {\r\n enrollmentService.saveBeneficiaryAllocationForMember(\r\n allocationsWithBennyIds,\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error('error updating allocations for beneficiaries', error);\r\n }\r\n setIsDeleted(false);\r\n getAllocations();\r\n };\r\n\r\n //update allocations IF beneficiary is deleted\r\n useEffect(() => {\r\n if (isDeleted) {\r\n updateCurrentAllocationsAfterDelete();\r\n }\r\n }, [isDeleted]);\r\n\r\n //Cancel edit and/or add beneficiary\r\n const cancelEditOrAdd = () => {\r\n setEdit(false);\r\n setEditEffectiveDate(false);\r\n setIsAllocationUpdated(false);\r\n setIsCriticalIllnessAmountsUpdated(false);\r\n setRecentlyUpdatedBennies([]);\r\n getAllocations();\r\n\r\n if (addPrimaryBenny) {\r\n setAddPrimaryBenny(false);\r\n }\r\n if (addContingentBenny) {\r\n setAddContingentBenny(false);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {/* pop-up to be used later when implementing delete beneficiary functionality */}\r\n {/* \r\n {\"Confirm Delete\"} \r\n \r\n \r\n {bennyToDelete.id\r\n ? `Are you sure you want to delete the beneficiary ${bennyToDelete.firstName} ${bennyToDelete.lastName}?`\r\n : \"Error: unable to delete beneficiary at this time.\"}\r\n \r\n \r\n \r\n Cancel \r\n {bennyToDelete?.id && (\r\n \r\n Delete\r\n \r\n )}\r\n \r\n */}\r\n\r\n \r\n
\r\n \r\n {props.planName.toUpperCase()}\r\n \r\n
\r\n\r\n
\r\n \r\n {props.UsdFormatterDec.format(plan?.totalPremiumAmount || 0)}\r\n \r\n \r\n /per month\r\n \r\n\r\n {props?.activeCoveragePlanSummary && (\r\n <>\r\n handleOpenRowMenu(e, props?.plan)}\r\n value={props?.plan?.planId}\r\n sx={{ padding: '0px', marginLeft: '12px' }}\r\n >\r\n \r\n {\r\n if (props?.activePlansNotPendingCancel?.length > 1) {\r\n //cancel single line of coverage\r\n handleOpenCancelCoverageDrawer(\r\n e,\r\n props?.plan,\r\n props?.planName\r\n );\r\n } else if (\r\n props?.activePlansNotPendingCancel?.length === 1\r\n ) {\r\n //cancel all coverage\r\n props?.openCancelAllCoverageModal();\r\n }\r\n }}\r\n disabled={!props.allowModify || props?.pendingCancellation}\r\n >\r\n {/* if not pending cancel and not last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length > 1 &&\r\n `Cancel ${props?.planName.toUpperCase()} Coverage`}\r\n\r\n {/* if not pending cancel and is last active line of coverage */}\r\n {!props?.pendingCancellation &&\r\n props?.planName &&\r\n props?.activePlansNotPendingCancel?.length === 1 &&\r\n 'Cancel All Coverage'}\r\n\r\n {/* if pending cancel */}\r\n {props?.pendingCancellation && 'Pending Cancellation'}\r\n \r\n\r\n {\r\n setEdit(true);\r\n //reset this to empty if starting to edit\r\n setRecentlyUpdatedBennies([]);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowModify}\r\n >\r\n Edit Coverage\r\n \r\n\r\n {\r\n setEdit(true);\r\n //reset this to empty if starting to edit\r\n setRecentlyUpdatedBennies([]);\r\n handleCloseRowMenu();\r\n }}\r\n disabled={!props.allowEditEnrollment}\r\n >\r\n Edit Beneficiaries\r\n \r\n {/* )} */}\r\n \r\n \r\n )}\r\n \r\n \r\n Benefit Amount \r\n
\r\n\r\n \r\n {!edit && (\r\n
\r\n \r\n Member -{' '}\r\n {props.UsdFormatterDec.format(\r\n memberSelection?.benefitAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n memberSelection?.memberPremiumAmount || 0\r\n )})`}\r\n
\r\n \r\n Spouse -{' '}\r\n {memberSelection &&\r\n props.UsdFormatterDec.format(\r\n spouseSelection?.benefitAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n spouseSelection?.memberAndSpousePremiumAmount || 0\r\n )})`}\r\n
\r\n \r\n Dependent(s) -{' '}\r\n {memberSelection &&\r\n props.UsdFormatterDec.format(\r\n dependentSelection?.benefitAmount || 0\r\n )}\r\n {` (${props.UsdFormatterDec.format(\r\n dependentSelection?.memberAndDependentsPremiumAmount || 0\r\n )})`}\r\n
\r\n \r\n )}\r\n {edit && props?.allowModify && (\r\n
\r\n \r\n Member Benefit \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.memberOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(\r\n option?.coverageAmount || 0\r\n )}{' '}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n \r\n Spouse Benefit \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.spouseOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(option.coverageAmount)}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n Dependent Benefit\r\n \r\n (\r\n \r\n {props.UsdFormatterDec.format(0)}\r\n \r\n {plan.dependentOptions.map((option) => {\r\n return (\r\n \r\n {props.UsdFormatterDec.format(option.coverageAmount)}\r\n {` (${props.UsdFormatterDec.format(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n )}\r\n
\r\n \r\n Primary Beneficiary \r\n {edit && primaryBennies?.length > 0 && (\r\n \r\n setEvenSplitPrimary(!evenSplitPrimary)}\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n \r\n\r\n {!edit && (\r\n \r\n
\r\n {primaryBennies.map((benny) => (\r\n \r\n {benny?.amount}% {benny?.firstName} {benny?.lastName} |{' '}\r\n {props.relationshipTypes &&\r\n getRelationshipTypeFromId(benny?.relationshipTypeId)}\r\n
\r\n ))}\r\n \r\n
\r\n {edit &&\r\n primaryBennies.map((benny, i) => (\r\n \r\n {/* Edit Primary Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: { borderRadius: '4px', height: '40px' },\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* Display Primary Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName}\r\n {' | '}\r\n \r\n\r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n {/* input fields w/ corresponding methods to update primary beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"firstNamePrimary\",\r\n }}\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"lastNamePrimary\",\r\n }}\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n inputProps={{\r\n \"data-update\": \"dob\",\r\n }}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n {/* \r\n Delete Beneficiary */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n ))}\r\n\r\n {/* ADD NEW PRIMARY BENEFICIARY */}\r\n {edit && !addPrimaryBenny && (\r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n //close add contingent benny if open\r\n setAddContingentBenny(false);\r\n }}\r\n >\r\n + Add additional primary beneficiary\r\n \r\n )}\r\n\r\n {addPrimaryBenny && (\r\n \r\n \r\n {' '}\r\n Add additional primary beneficiary{' '}\r\n \r\n\r\n {/* Potential Beneficiaries to select */}\r\n \r\n {potentialBeneficiaries?.length > 0 &&\r\n potentialBeneficiaries?.map((potentialBen, i) => {\r\n //map and compare current beneficiaries to potentials by first AND last name - only return potentials that are NOT already beneficiaries and who have a first and last name\r\n const isCurrentBenny = primaryBennies?.find(\r\n (benny) =>\r\n benny?.firstName?.toLowerCase() ===\r\n potentialBen?.firstName?.toLowerCase() &&\r\n benny?.lastName?.toLowerCase() ===\r\n potentialBen?.lastName?.toLowerCase()\r\n );\r\n if (\r\n !isCurrentBenny &&\r\n potentialBen?.firstName &&\r\n potentialBen?.lastName\r\n ) {\r\n let firstName = potentialBen?.firstName\r\n ? potentialBen?.firstName\r\n : '';\r\n let lastName = potentialBen?.lastName\r\n ? potentialBen?.lastName\r\n : '';\r\n let relationship = potentialBen?.relationshipTypeId\r\n ? getRelationshipTypeFromId(\r\n potentialBen?.relationshipTypeId\r\n )\r\n : 'Dependent';\r\n return (\r\n \r\n handleAddDependentAsBenny(potentialBen)\r\n }\r\n >\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'primary')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'primary')\r\n }\r\n // InputProps={{\r\n // sx: componentStyles.inputShape\r\n // }}\r\n />\r\n\r\n {/* Add a new beneficiary with birthdate in the future - uncomment and this will work w/ current method */}\r\n {/* \r\n handleAddBeneficiaryInputChange(e, \"dob\", \"primary\")\r\n }\r\n /> */}\r\n\r\n legend': { display: 'none' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n }}\r\n variant=\"outlined\"\r\n label=\"Relationship\"\r\n value={newPrimaryBenny?.relationshipTypeId || ''}\r\n onChange={(e) =>\r\n handleAddBeneficiaryRelationshipChange(e, 'primary')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n setNewPrimaryBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {/* CONTINGENT BENEFICIARY */}\r\n\r\n \r\n \r\n Contingent Beneficiary \r\n {edit && contingentBennies?.length > 0 && (\r\n \r\n \r\n setEvenSplitContingent(!evenSplitContingent)\r\n }\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n
\r\n\r\n {!edit && (\r\n \r\n
\r\n {contingentBennies?.length > 0 ? (\r\n <>\r\n {contingentBennies.map((benny) => (\r\n \r\n {benny.amount}% {benny.firstName} {benny.lastName} |{' '}\r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n
\r\n ))}\r\n \r\n ) : (\r\n <>N/A\r\n )}\r\n \r\n
\r\n {edit &&\r\n contingentBennies.map((benny, i) => (\r\n \r\n {/* Edit Contingent Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: { borderRadius: '4px', height: '40px' },\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* Display Contingent Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName} {' | '}\r\n {' '}\r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n\r\n {/* input fields w/ corresponding methods to update contingent beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n\r\n {/* Delete Beneficiary Button */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n ))}\r\n\r\n {/* ADD A NEW CONTINGENT BENEFICIARY */}\r\n\r\n {edit && !addContingentBenny && (\r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n //close add primary benny if open\r\n setAddPrimaryBenny(false);\r\n }}\r\n >\r\n + Add additional contingent beneficiary\r\n \r\n )}\r\n\r\n {addContingentBenny && (\r\n \r\n \r\n {' '}\r\n Add additional contingent beneficiary{' '}\r\n \r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'contingent')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'contingent')\r\n }\r\n />\r\n\r\n {/* Add a new beneficiary with birthdate in the future - uncomment and this will work w/ current method */}\r\n {/* \r\n handleAddBeneficiaryInputChange(e, \"dob\", \"contingent\")\r\n }\r\n /> */}\r\n\r\n legend': { display: 'none' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n }}\r\n variant=\"outlined\"\r\n label=\"Relationship\"\r\n value={newContingentBenny?.relationshipTypeId || ''}\r\n onChange={(e) =>\r\n handleAddBeneficiaryRelationshipChange(e, 'contingent')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n setNewContingentBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {totalAllocationError && edit && (\r\n \r\n {primaryBennies?.length > 0 &&\r\n totalAllocationError?.primaryTotal != 100 && (\r\n \r\n Primary allocations must total 100%.\r\n \r\n )}\r\n {contingentBennies?.length > 0 &&\r\n totalAllocationError?.contingentTotal != 100 && (\r\n \r\n Contingent allocations must total 100%.\r\n \r\n )}\r\n \r\n )}\r\n\r\n {props.allowEditEnrollment && (\r\n \r\n {!edit && !editEffectiveDate && (\r\n
\r\n Effective Date:{' '}\r\n {props?.plan?.effectiveDate\r\n ? format(\r\n props?.formatDate(props?.plan?.effectiveDate),\r\n 'MM/dd/yyyy'\r\n )\r\n : 'N/A'}\r\n
\r\n )}\r\n {(edit || editEffectiveDate) && (\r\n
\r\n \r\n {\r\n cancelEditOrAdd();\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n
\r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n 0\r\n ? `api/image/organization/${props.member?.organizationId}`\r\n : '/api/image/organization'\r\n }\r\n alt=\"organization logo\"\r\n width=\"80%\"\r\n // sx={componentStyles.image}\r\n />\r\n \r\n \r\n\r\n \r\n \r\n {props?.singleEnrollment?.name ? (\r\n isAirPlan(props?.singleEnrollment, props?.surveyResponses) ? (\r\n 'Teamsters Voluntary Income Protection VIP+ Air'\r\n ) : (\r\n props?.singleEnrollment?.name || 'Enrollment'\r\n )\r\n ) : (\r\n <>\r\n // \r\n {props?.singleEnrollment?.enrollmentStateId === 0 ||\r\n !props?.singleEnrollment.enrollmentStateId ||\r\n props?.singleEnrollment?.enrollmentState === 0 ? (\r\n \r\n No current coverage.\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {conditionalMessage.icon}\r\n \r\n \r\n \r\n {conditionalMessage.title}\r\n \r\n \r\n {conditionalMessage.message}\r\n \r\n \r\n\r\n {/* Button Section and Menu */}\r\n \r\n \r\n \r\n 2)\r\n }\r\n variant=\"variant\"\r\n component=\"label\"\r\n size=\"medium\"\r\n sx={componentStyles.conditionalButton}\r\n onClick={conditionalMessage.buttonHandler}\r\n data-uhtest=\"enrollment-summary-conditional-button\"\r\n >\r\n {conditionalMessage.buttonText}\r\n \r\n \r\n setResumeAnchorEl(e.currentTarget)}\r\n sx={{ padding: '2px 0px' }}\r\n >\r\n setResumeAnchorEl(null)}\r\n anchorOrigin={{\r\n vertical: 'bottom',\r\n horizontal: 'right',\r\n }}\r\n transformOrigin={{\r\n vertical: 'top',\r\n horizontal: 'right',\r\n }}\r\n >\r\n {(enrollmentInfo?.enrollmentStateId === 2 ||\r\n enrollmentInfo?.enrollmentStateId === 1) && (\r\n \r\n {!collapse ? 'Show Preview' : 'Hide Preview'}\r\n \r\n )}\r\n {(enrollmentInfo?.enrollmentStateId === 2 ||\r\n enrollmentInfo?.enrollmentStateId === 1) && (\r\n 2}\r\n >\r\n Cancel Enrollment\r\n \r\n )}\r\n {/* {enrollmentInfo?.enrollmentStateId === 2 && (\r\n \r\n Change Coverage Effective\r\n \r\n )} */}\r\n {enrollmentInfo?.enrollmentStateId === 2 && (\r\n \r\n Regenerate PDF\r\n \r\n )}\r\n {(enrollmentInfo?.enrollmentStateId === 0 ||\r\n enrollmentInfo?.enrollmentStateId == undefined) && (\r\n \r\n Send Enrollment Link\r\n \r\n )}\r\n {enrollmentInfo?.enrollmentStateId === 3 && (\r\n \r\n Re-Open Application\r\n \r\n )}\r\n {/* \r\n HIDE\r\n */}\r\n\r\n {/*///////temp pilot enrollment logic - disable pilot enrollment IF pilot enrollment accidentally opened and not started */}\r\n {(props?.singleEnrollment?.name\r\n ?.toLowerCase()\r\n .includes('teamsters') ||\r\n props?.singleEnrollment?.name\r\n ?.toLowerCase()\r\n .includes('ibt')) &&\r\n props?.surveyResponses?.isPilot && (\r\n {\r\n //close menu\r\n setResumeAnchorEl(null);\r\n //open pilot modal\r\n props?.handleOpenPilotModal();\r\n }}\r\n disabled={\r\n props?.singleEnrollment?.enrollmentStateId > 0 ||\r\n props?.singleEnrollment?.enrollmentState > 0\r\n } //cannot enable if isPilot is already true\r\n >\r\n \r\n \r\n \r\n \r\n \r\n {/* )} */}\r\n \r\n\r\n {/* Election View Expanded */}\r\n \r\n {/* Election Summary */}\r\n \r\n {/* For rolling enrollments, use isLastWindow to determine if the enrollment is in last window. If it is, then hide the coverage effective dates */}\r\n {!props?.singleEnrollment?.isLastWindow && (\r\n // \r\n \r\n \r\n {(props.singleEnrollment &&\r\n props.singleEnrollment?.policyNumber?.length > 0 &&\r\n `Policy #${props.singleEnrollment?.policyNumber}`) ||\r\n 'Policy Number'}\r\n \r\n {/* 0}>\r\n {plans.length > 0 &&\r\n plans.map((plan) => {\r\n let planKey = Object.keys(plan)[0];\r\n let planValue = Object.values(plan)[0];\r\n let planName = planKey.slice(0, planKey.length - 4);\r\n switch (planName.toUpperCase()) {\r\n case 'LIFEADD':\r\n planName = 'Life & AD&D';\r\n break;\r\n default:\r\n console.log('no plan found');\r\n }\r\n\r\n //find any declined plan options elected, otherwise this value is false\r\n //check for declined ladd plan in return below w/ planValue?.totalPremiumAmount == 0 since ladd plan has this value on object and will be > 0 if anything is elected\r\n // let declinePlanOptionSelected = false\r\n // if(planValue?.options){\r\n // declinePlanOptionSelected = planValue?.options?.find(option => {\r\n // if(option?.isDecline && option?.memberOptionId === planValue?.selectedOptionId) {\r\n // return option\r\n // }\r\n // })\r\n // }\r\n\r\n return (\r\n \r\n {planName.toUpperCase()}:{' '}\r\n {(planValue?.effectiveDate &&\r\n formatEffective(planValue?.effectiveDate)) ||\r\n ''}\r\n \r\n );\r\n })}\r\n \r\n \r\n // \r\n )}\r\n {/* \r\n Coverage Effective Date:{' '}\r\n {(props?.singleEnrollment?.coverageEffectiveDate &&\r\n dateFormatter(props?.singleEnrollment?.coverageEffectiveDate)) ||\r\n ''}\r\n */}\r\n \r\n {/* \r\n list of lines of coverage */}\r\n {plans.length > 0 &&\r\n plans.map((plan) => {\r\n let planKey = Object.keys(plan)[0];\r\n let planValue = Object.values(plan)[0];\r\n\r\n // let selectedOptionId = planValue?.selectedOptionId\r\n let returnedPlanComponent;\r\n\r\n let planName = planKey.slice(0, planKey.length - 4);\r\n switch (planName.toUpperCase()) {\r\n case 'LIFEADD':\r\n planName = 'Life & AD&D';\r\n break;\r\n case 'CRITICALILLNESS':\r\n planName = 'Critical Illness';\r\n break;\r\n default:\r\n console.log('no plan found');\r\n }\r\n switch (planKey.slice(0, planKey.length - 4).toUpperCase()) {\r\n case 'LTD':\r\n if (planValue?.isIncremental) {\r\n // need incremental\r\n returnedPlanComponent = (\r\n \r\n {!collapse && <>{/* Collapsed */}}\r\n \r\n );\r\n}\r\n","const activeCoverageStyles = {\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n padding: '8px 18px',\r\n },\r\n planTitleRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: ' 16px 0px 10px 0px',\r\n justifyContent: 'space-between',\r\n },\r\n planTitle: {\r\n fontFamily: 'Poppins',\r\n fontWeight: 500,\r\n fontSize: '20px',\r\n lineHeight: '32px',\r\n letterSpacing: '.15px',\r\n color: 'primary.main',\r\n },\r\n planAmountContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n planAmount: {\r\n fontFamiily: 'Poppins',\r\n fontWeight: 400,\r\n fontSize: '24px',\r\n lineHeight: '32px',\r\n color: 'primary.main',\r\n },\r\n perMonth: {\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n letterSpacing: '.17px',\r\n color: 'text.secondary',\r\n alignSelf: 'flex-end',\r\n paddingBottom: '6px',\r\n },\r\n planInfoRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n minHeight: '40px',\r\n marginRight: '8px',\r\n },\r\n planInfoText: {\r\n marginLeft: '8px',\r\n },\r\n threeDotMenu: {\r\n iconButton: {\r\n padding: '0px',\r\n marginLeft: '12px',\r\n borderRadius: '50%',\r\n },\r\n MoreVertIcon: { color: 'text.secondary' },\r\n },\r\n editButtonsContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n padding: '20px 0px',\r\n justifyContent: 'flex-end',\r\n },\r\n saveAndCancelEditButtons: {\r\n fontSize: '14px',\r\n borderRadius: '8px',\r\n height: '40px',\r\n fontWeight: '500!important',\r\n marginLeft: '10px',\r\n },\r\n //EDITING COVERAGE\r\n editInputContainer: {\r\n width: '50%',\r\n maxWidth: '300px',\r\n // marginBottom: \"10px\",\r\n },\r\n selectDropDown: {\r\n height: '40px',\r\n borderRadius: '4px',\r\n padding: '10px 0px',\r\n width: '100%',\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid',\r\n borderColor: 'primary.main',\r\n },\r\n textAlign: 'left',\r\n marginBottom: '10px',\r\n },\r\n selectDownArrowIcon: {\r\n position: 'absolute',\r\n right: 7,\r\n },\r\n\r\n //WARNINGS - CANCEL OR MIDIFIED PLANS\r\n pendingChangesContainer: {\r\n // width: \"100%\",\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n padding: '0px 5px 6px 0px',\r\n },\r\n pendingChangesChip: (type) => ({\r\n backgroundColor:\r\n type === 'cancel'\r\n ? 'background.notification.critical'\r\n : 'background.inProgressChip',\r\n color: type === 'cancel' ? 'error.main' : 'primary.inProgressChip',\r\n fontFamily: 'Archivo',\r\n margin: '5px 0px',\r\n fontWeight: '500',\r\n alignItems: 'center',\r\n fontSize: '13px',\r\n }),\r\n};\r\n\r\nexport default activeCoverageStyles;\r\n","import React from 'react';\r\n\r\n//Mui icons\r\n\r\n//Mui Components\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\n\r\n//utils\r\nimport { formatCurrency } from '../../../../../../../../utils';\r\n\r\n//Our styles\r\nimport activeCoverageStyles from '../activeCoverageStyles';\r\n\r\nexport default function AccAddCanOrHospitalCoverage(props) {\r\n return (\r\n <>\r\n {/* Benefit Amount Row */}\r\n {props?.plan?.benefitAmount && props?.plan?.benefitAmount > 0 ? (\r\n \r\n Benefit Amount \r\n\r\n \r\n {formatCurrency(props?.plan?.benefitAmount)}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Covered Lives - show for accident, add, hospital, and cancer plans*/}\r\n {props?.plan?.personType ? (\r\n \r\n Covered Lives \r\n\r\n \r\n {props?.plan?.personType === 0 ? 'Member' : props?.plan?.personType}\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n}\r\n","import React from 'react';\r\n\r\n//Mui icons\r\n\r\n//Mui Components\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\n\r\n//utils\r\nimport { formatCurrency } from '../../../../../../../../utils';\r\n\r\n//Our styles\r\nimport activeCoverageStyles from '../activeCoverageStyles';\r\n\r\nexport default function IncrementalStdAndLtdActiveCoverage(props) {\r\n return (\r\n <>\r\n {/* Benefit Amount Row */}\r\n {props?.plan?.benefitAmount && props?.plan?.benefitAmount > 0 ? (\r\n \r\n Benefit Amount \r\n {/* Non-edit view */}\r\n\r\n \r\n {formatCurrency(props?.plan?.benefitAmount)}\r\n {props?.plan?.benefitTypeFriendly &&\r\n props?.plan?.benefitTypeFriendly?.toLowerCase() !== 'fixed'\r\n ? ` ${props?.plan?.benefitTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Elimination Period Row*/}\r\n {props?.plan?.eliminationPeriod ? (\r\n \r\n Elimination Period \r\n\r\n \r\n {props?.plan?.eliminationPeriod}{' '}\r\n {props?.plan?.eliminationPeriodTypeFriendly\r\n ? ` ${props?.plan?.eliminationPeriodTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Benefit Duration Row*/}\r\n {props?.plan?.benefitDuration ? (\r\n \r\n Benefit Duration \r\n\r\n \r\n {props?.plan?.benefitDuration}\r\n {props?.plan?.benefitDurationTypeFriendly\r\n ? ` ${props?.plan?.benefitDurationTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n}\r\n","import React from 'react';\r\n\r\n//Mui icons\r\n\r\n//Mui Components\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\n\r\n//utils\r\nimport { formatCurrency } from '../../../../../../../../utils';\r\n\r\n//Our styles\r\nimport activeCoverageStyles from '../activeCoverageStyles';\r\n\r\nexport default function NonIncrementalStdAndLtdActiveCoverage(props) {\r\n return (\r\n <>\r\n {/* Benefit Amount Row */}\r\n {props?.plan?.benefitAmount && props?.plan?.benefitAmount > 0 ? (\r\n \r\n Benefit Amount \r\n {/* Non-edit view */}\r\n\r\n \r\n {formatCurrency(props?.plan?.benefitAmount)}\r\n {props?.plan?.benefitTypeFriendly &&\r\n props?.plan?.benefitTypeFriendly?.toLowerCase() !== 'fixed'\r\n ? ` ${props?.plan?.benefitTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Elimination Period Row*/}\r\n {props?.plan?.eliminationPeriod ? (\r\n \r\n Elimination Period \r\n\r\n \r\n {props?.plan?.eliminationPeriod}{' '}\r\n {props?.plan?.eliminationPeriodTypeFriendly\r\n ? ` ${props?.plan?.eliminationPeriodTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Benefit Duration Row*/}\r\n {props?.plan?.benefitDuration ? (\r\n \r\n Benefit Duration \r\n\r\n \r\n {props?.plan?.benefitDuration}\r\n {props?.plan?.benefitDurationTypeFriendly\r\n ? ` ${props?.plan?.benefitDurationTypeFriendly}`\r\n : ''}\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { set, format } from 'date-fns';\r\n\r\n//Mui Components\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\n//Our components\r\nimport InfinityLoader from '../../../../../../../UH-loading-animation/InfinityLoader';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\nimport AccAddCanOrHospitalCoverage from './viewAndEditCoverageBody/AccAddCanOrHospitalActiveCoverage';\r\nimport IncrementalStdAndLtdActiveCoverage from './viewAndEditCoverageBody/IncrementalStdAndLtdActiveCoverage';\r\nimport NonIncrementalStdAndLtdActiveCoverage from './viewAndEditCoverageBody/NonIncrementalStdAndLtdActiveCoverage';\r\n\r\n//Serviees\r\nimport activeCoverageService from '../../../../../../../../services/activeCoverage-service';\r\n\r\n//utils\r\nimport {\r\n formatCurrency,\r\n formatUTCToShortDate,\r\n} from '../../../../../../../utils';\r\n\r\n//Our styles\r\nimport activeCoverageStyles from './activeCoverageStyles';\r\n\r\nconst componentStyles = {\r\n menuOptions: {\r\n color: 'text.primary',\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n fontSize: '14px',\r\n lineHeight: '24px',\r\n height: '48px',\r\n '&:hover': { backgroundColor: 'primary.light' },\r\n },\r\n};\r\n\r\nexport default function ActiveLineOfCoverage(props) {\r\n //set single plan in state\r\n const [plan, setPlan] = useState({});\r\n const [planOptions, setPlanOptions] = useState([]);\r\n\r\n useEffect(() => {\r\n if (props?.singlePlan?.options) {\r\n setPlanOptions(props?.singlePlan?.options);\r\n }\r\n\r\n if (props?.singlePlan?.lineOfCoverage) {\r\n setPlan(props?.singlePlan?.lineOfCoverage);\r\n }\r\n }, [props?.singlePlan?.options, props?.singlePlan?.lineOfCoverage]);\r\n\r\n //check if plan is add, accident, cancer, or hospital - we edit these differently\r\n\r\n const checkIfPlanIsAccAddCanOrHosp = () => {\r\n let _isAccAddCanOrHosp = false;\r\n if (\r\n plan?.calculatedPlanTypeId &&\r\n (plan?.calculatedPlanTypeId === 3 ||\r\n plan?.calculatedPlanTypeId === 7 ||\r\n plan?.calculatedPlanTypeId === 8 ||\r\n plan?.calculatedPlanTypeId === 9)\r\n ) {\r\n _isAccAddCanOrHosp = true;\r\n }\r\n setIsAccAddCanOrHosp(_isAccAddCanOrHosp);\r\n };\r\n\r\n const [isAccAddCanOrHosp, setIsAccAddCanOrHosp] = useState(false);\r\n\r\n useEffect(() => {\r\n checkIfPlanIsAccAddCanOrHosp();\r\n }, [plan?.calculatedPlanTypeId]);\r\n\r\n //Manage Plan Info\r\n //open verticle dot menu to open active coverage drawer\r\n // const [edit, setEdit] = useState(false);\r\n const [anchorEl, setAnchorEl] = useState({});\r\n\r\n const handleOpenRowMenu = (e) => {\r\n setAnchorEl({\r\n ...anchorEl,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n };\r\n\r\n const handleCloseRowMenu = () => {\r\n setAnchorEl({});\r\n };\r\n\r\n return (\r\n \r\n {/* Plan Title and Amount */}\r\n \r\n \r\n {plan?.displayName}\r\n \r\n \r\n \r\n {formatCurrency(plan?.premiumAmount)}\r\n \r\n /per month \r\n\r\n {/* Edit Plan Menu */}\r\n \r\n handleOpenRowMenu(e, plan)}\r\n value={plan?.planId}\r\n sx={activeCoverageStyles.threeDotMenu.iconButton}\r\n disabled={props?.isFutureCoverage}\r\n >\r\n \r\n {!plan?.isCancelled &&\r\n props?.activePlansNotPendingCancel?.length === 1 && (\r\n {\r\n props?.handleOpenCancelCoverageDrawer(\r\n null,\r\n 'cancelAllCoverage'\r\n );\r\n\r\n handleCloseRowMenu();\r\n }}\r\n sx={componentStyles.menuOptions}\r\n disabled={!props.allowModify || plan?.isCancelled}\r\n >\r\n Cancel All Coverage\r\n \r\n )}\r\n\r\n {/* manage coverage drawer button */}\r\n {\r\n props?.handleOpenActiveCoverageDrawer(e, plan, planOptions);\r\n handleCloseRowMenu();\r\n }}\r\n sx={componentStyles.menuOptions}\r\n disabled={!props.allowModify}\r\n >\r\n Manage Coverage\r\n \r\n \r\n \r\n \r\n \r\n {/* Pending cancelation or modification warning */}\r\n {(plan?.futureActiveCoverageId || plan?.isCancelled) &&\r\n props?.pendingChangesMessage(plan)}\r\n {/* ////////// View Active Coverage Body ////////////*/}\r\n\r\n {/* Non-incremental plans */}\r\n {!planOptions?.isIncremental && !isAccAddCanOrHosp && (\r\n \r\n Offset \r\n \r\n {plan?.benefitOffsets}\r\n \r\n \r\n ) : null}\r\n {/* Coverage Effective Date and Edit/Save Edit buttons*/}\r\n {/* {!editCED ? ( */}\r\n \r\n {`Effective Date: ${\r\n plan?.effectiveStartDate\r\n ? formatUTCToShortDate(plan?.effectiveStartDate)\r\n : 'N/A'\r\n }`} \r\n \r\n {/* temporarily keeping this depending on how ux wants to allow editing CED in future\r\n ) : (\r\n \r\n \r\n {\r\n setEditCED(false);\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n \r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n )}{' '} */}\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect, useMemo } from 'react';\r\n\r\n//Services\r\nimport enrollmentService from '../../../../../../../../services/enrollment-service';\r\n\r\n//Mui icons\r\nimport DeleteIcon from '@mui/icons-material/Delete';\r\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';\r\n\r\n//MuiX\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\n\r\n//Mui Components\r\nimport {\r\n Alert,\r\n Box,\r\n Button,\r\n Chip,\r\n FormControlLabel,\r\n FormGroup,\r\n IconButton,\r\n InputAdornment,\r\n MoreVertIcon,\r\n MenuItem,\r\n Menu,\r\n Select,\r\n Switch,\r\n TextField,\r\n Typography,\r\n} from '@mui/material';\r\n\r\n//our components\r\nimport InfinityLoader from '../../../../../../../UH-loading-animation/InfinityLoader';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\n\r\n//utils\r\nimport {\r\n formatUTCDateToObjWithTimeZone,\r\n formatDateObjMMDDYYYYDisplay,\r\n formatUTCToShortDate,\r\n} from '../../../../../../../utils';\r\n\r\n//Component Styles\r\nconst componentStyles = {\r\n componentContainer: {\r\n position: 'relative',\r\n margin: '10px 0px',\r\n },\r\n bennyGroupRow: {\r\n marginBottom: '16px',\r\n justifyContent: 'space-between',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n bennyTypeTitleLeftSide: (edit) => ({\r\n width: edit ? '100%' : '30%',\r\n display: 'flex',\r\n flexDirection: edit ? 'row' : 'column',\r\n justifyContent: 'space-between',\r\n alignItems: edit ? 'center' : 'flex-start',\r\n }),\r\n\r\n bennyGroupColumnRightSide: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-end',\r\n },\r\n singleBennyViewRow: {\r\n margin: '0px 0px 5px 0px',\r\n textAlign: 'right',\r\n },\r\n\r\n //EDIT EXISTING BENEFICIARY\r\n editBeneficiaryContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n margin: ' 0px 0px 10px 0px',\r\n // border: \"1px solid blue\",\r\n width: '100%',\r\n },\r\n editBeneficiaryRow: {\r\n display: 'flex',\r\n width: '100%',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n padding: '0px 0px 15px 16px',\r\n alignItems: 'center',\r\n // border: \"1px solid green\",\r\n },\r\n allocationInputStyles: {\r\n textField: { marginRight: '5px', minWidth: '100px' },\r\n inputPropsStyles: { height: '40px' },\r\n inputAdornment: { marginLeft: '-30px' },\r\n },\r\n nameRelationshipOnEditRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '50%',\r\n flexWrap: 'wrap',\r\n },\r\n editableFieldsRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n alignItems: 'flex-start',\r\n // border: \"1px solid green\",\r\n },\r\n editViewBennyNameText: {\r\n fontWeight: 'bold',\r\n fontSize: '14px',\r\n },\r\n editViewRelationshipText: {\r\n fontSize: '14px',\r\n },\r\n verticalLineTextSeparator: { margin: '0px 8px' },\r\n\r\n //ADD BENEFICIARY\r\n addAdditionalButton: { fontWeight: 600, fontSize: '15px' },\r\n beneficiaryChip: {\r\n margin: '5px 4px 0px 0px',\r\n backgroundColor: 'transparent',\r\n color: 'primary.main',\r\n border: 'solid 1px',\r\n borderColor: 'primary.main',\r\n fontWeight: '500',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n height: '36px',\r\n borderRadius: '50px',\r\n },\r\n\r\n addBeneficiaryContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '20px 0px',\r\n width: '100%',\r\n },\r\n potentialBeneficiaryRow: {\r\n display: 'fled',\r\n flexDirection: 'row',\r\n width: '100%',\r\n flexWrap: 'wrap',\r\n margin: '5px 0px 10px',\r\n },\r\n addBeneficiaryInputs: {\r\n margin: '5px 0px',\r\n },\r\n customDatePicker: (editExisting) => ({\r\n padding: '0px',\r\n margin: editExisting ? '0px 8px 1px' : '5px 0px',\r\n '& .MuiOutlinedInput-input': {\r\n padding: '10px 12px 9px',\r\n fontSize: '14px', // Adjust the font size\r\n top: '-20px',\r\n },\r\n width: editExisting ? '160px' : '100%',\r\n }),\r\n cancelOrAddBeneficiaryButtons: {\r\n height: '23px',\r\n fontWeight: '500!important',\r\n fontSize: '13px',\r\n marginLeft: '10px',\r\n },\r\n\r\n //ALLOCATION ALERT STYLES\r\n editContingentAndDisplayAlertRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n flexWrap: 'wrap',\r\n },\r\n allocationErrorAlert: {\r\n alertContainer: {\r\n minWidth: '270px',\r\n alignSelf: 'flex-end',\r\n },\r\n alertBody: {\r\n padding: '5px 10px',\r\n },\r\n alertText: {\r\n fontSize: '12px!important',\r\n },\r\n },\r\n\r\n //SAVE CHANGES & BACK BUTTON BOTTOM ROW\r\n bottomRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n minHeight: '40px',\r\n marginRight: '8px',\r\n fontFamily: 'Archivo',\r\n },\r\n saveAndCancelButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n padding: '20px 0px 10px',\r\n justifyContent: 'flex-end',\r\n },\r\n saveAndCancelEditButtons: (save) => ({\r\n fontSize: '13px',\r\n borderRadius: '8px',\r\n height: '30px',\r\n fontWeight: '500!important',\r\n marginLeft: '10px',\r\n minWidth: save ? '142px' : '58px',\r\n }),\r\n};\r\n\r\nexport default function BeneficiaryViewAndEdit(props) {\r\n //requirements for this component -\r\n //use in a plan that has benefeciaries associated\r\n //pas in setEdit state held in plan component - for ladd - have setEditBeneficiary state of true or false is passed in as setEdit to separate updating ladd coverage OR beneficiary info\r\n //pass in plan object\r\n //pass in member obj\r\n //pass in relationship types called in member profile\r\n\r\n const [loading, setLoading] = useState(false);\r\n //Benny Logic from Ladd component\r\n //should be getting plan from props as the parent plan object from active coverage\r\n const [storedAllocations, setStoredAllocations] = useState([]);\r\n const [primaryBennies, setPrimaryBennies] = useState([]);\r\n const [contingentBennies, setContingentBennies] = useState([]);\r\n const [potentialBeneficiaries, setPotentialBeneficiaries] = useState([]);\r\n const [totalAllocationError, setTotalAllocationError] = useState(false);\r\n\r\n const getAllocations = async () => {\r\n //TECHNICALLY A HARDCODE, CHECK FOR BENNY ON PLAN\r\n // props.setLoading(true);\r\n //get allocations for agent-side single enrollment with planId and memberId\r\n const planId = props?.plan.planId;\r\n const memberId = props.member?.id;\r\n\r\n try {\r\n let _storedAllocations =\r\n await enrollmentService.getBeneficiaryAllocationsForMember(\r\n planId,\r\n memberId\r\n );\r\n\r\n if (!_storedAllocations || _storedAllocations.length === 0) {\r\n setStoredAllocations([]);\r\n } else {\r\n //check for dob that is not null and format to date obj - if 00001 year, set dob to null\r\n _storedAllocations.forEach((allocation) => {\r\n if (allocation?.dob && allocation?.dob?.slice(0, 4) !== '0001') {\r\n allocation.dob = formatUTCDateToObjWithTimeZone(allocation.dob);\r\n } else if (\r\n allocation?.dob &&\r\n allocation?.dob?.slice(0, 4) === '0001'\r\n ) {\r\n allocation.dob = null;\r\n }\r\n });\r\n setStoredAllocations(_storedAllocations);\r\n }\r\n } catch (error) {\r\n console.error('error grabbing allocations for member side', error);\r\n }\r\n };\r\n\r\n const getPotentialBeneficiariesForMember = async () => {\r\n try {\r\n let _potentials =\r\n await enrollmentService.getPotentialBeneficiariesForMember(\r\n props?.member?.id\r\n );\r\n if (!_potentials || _potentials.length === 0) {\r\n setPotentialBeneficiaries([]);\r\n } else {\r\n //check for dob that is not null and format to date obj - if 00001 year, set dob to null\r\n _potentials?.forEach((potentialBenny) => {\r\n if (\r\n potentialBenny?.dob &&\r\n potentialBenny?.dob?.slice(0, 4) !== '0001'\r\n ) {\r\n potentialBenny.dob = formatUTCDateToObjWithTimeZone(\r\n potentialBenny.dob\r\n );\r\n } else if (\r\n potentialBenny?.dob &&\r\n potentialBenny?.dob?.slice(0, 4) === '0001'\r\n ) {\r\n potentialBenny.dob = null;\r\n }\r\n });\r\n setPotentialBeneficiaries(_potentials);\r\n }\r\n } catch (error) {\r\n console.error('error getting potential bennies', error);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props.member && props?.plan?.planId) {\r\n getAllocations();\r\n getPotentialBeneficiariesForMember();\r\n }\r\n }, [props.member, props?.member?.id, props?.plan]);\r\n\r\n useEffect(() => {\r\n if (storedAllocations && storedAllocations.length > 0) {\r\n //separating primary bennies\r\n let _primaryBennies = storedAllocations?.filter(\r\n (allocation) => allocation.isPrimary && !allocation.isDeleted\r\n );\r\n\r\n //separating contingent bennies\r\n let _contingentBennies = storedAllocations?.filter(\r\n (allocation) => !allocation.isPrimary && !allocation.isDeleted\r\n );\r\n setPrimaryBennies(_primaryBennies);\r\n setContingentBennies(_contingentBennies);\r\n }\r\n }, [storedAllocations]);\r\n\r\n //ADDING new beneficiaries when even-split button is on: overall allocations are updated w/ new bennies added, update primary and contingent bennies amount allocated evenly\r\n //need to run this when switch is on\r\n\r\n //show if even split is on or off\r\n const [evenSplitPrimary, setEvenSplitPrimary] = useState(true);\r\n const [evenSplitContingent, setEvenSplitContingent] = useState(true);\r\n\r\n const handleEvenSplitOnAddBeneficiary = () => {\r\n //primary benny reallocation\r\n if (primaryBennies?.length > 0 && evenSplitPrimary) {\r\n let indexOfZeroBenny;\r\n let bennyWithZeroAmount = primaryBennies?.find((benny, index) => {\r\n indexOfZeroBenny = index;\r\n return benny.amount === 0;\r\n });\r\n\r\n if (bennyWithZeroAmount) {\r\n //find new even allocation amount for benny with 0 amount\r\n let total = 100;\r\n let _evenSplitAmount = Math.floor(total / primaryBennies?.length);\r\n //update the rest of the bennies taking into account this new amount\r\n handleAllocationChange(\r\n _evenSplitAmount,\r\n bennyWithZeroAmount,\r\n indexOfZeroBenny\r\n );\r\n }\r\n }\r\n //contingent benny reallocation\r\n if (contingentBennies?.length > 0 && evenSplitContingent) {\r\n let indexOfZeroBenny;\r\n let bennyWithZeroAmount = contingentBennies?.find((benny, index) => {\r\n indexOfZeroBenny = index;\r\n return benny.amount === 0;\r\n });\r\n\r\n if (bennyWithZeroAmount) {\r\n //find new even allocation amount for benny with 0 amount\r\n let total = 100;\r\n let _evenSplitAmount = Math.floor(total / contingentBennies?.length);\r\n //update the rest of the bennies taking into account this new amount\r\n handleAllocationChange(\r\n _evenSplitAmount,\r\n bennyWithZeroAmount,\r\n indexOfZeroBenny\r\n );\r\n }\r\n }\r\n };\r\n\r\n //check allocation totals on blur for each input\r\n const checkAllocationTotals = () => {\r\n // check totals of primary and contingent to make sure each add up to 100\r\n let _primaryTotal = primaryBennies.reduce((accumulator, currentValue) => {\r\n return accumulator + currentValue?.amount;\r\n }, 0);\r\n let _contingentTotal = contingentBennies.reduce(\r\n (accumulator, currentValue) => {\r\n return accumulator + currentValue?.amount;\r\n },\r\n 0\r\n );\r\n\r\n if (\r\n primaryBennies?.length > 0 &&\r\n contingentBennies?.length > 0 &&\r\n _primaryTotal === 100 &&\r\n _contingentTotal === 100\r\n ) {\r\n //if both primariees and contingents exist, each must total 100\r\n setTotalAllocationError(false);\r\n //if only primaries exist, they must total 100\r\n } else if (\r\n primaryBennies?.length > 0 &&\r\n contingentBennies?.length === 0 &&\r\n _primaryTotal === 100\r\n ) {\r\n setTotalAllocationError(false);\r\n //if only contingents exist, they must total 100\r\n } else if (\r\n primaryBennies?.length === 0 &&\r\n contingentBennies?.length > 0 &&\r\n _contingentTotal === 100\r\n ) {\r\n setTotalAllocationError(false);\r\n } else {\r\n setTotalAllocationError({\r\n primaryTotal: _primaryTotal,\r\n contingentTotal: _contingentTotal,\r\n });\r\n }\r\n };\r\n\r\n const saveBeneficiaryChanges = async () => {\r\n setLoading(true);\r\n //only update if benny info besides allocations was changed\r\n if (recentlyUpdatedBennies?.length > 0) {\r\n try {\r\n recentlyUpdatedBennies.forEach(async (benny) => {\r\n await enrollmentService.updateBeneficiaryForMember(\r\n benny.memberId,\r\n benny\r\n );\r\n });\r\n } catch (error) {\r\n console.error('error updating bennies', error);\r\n }\r\n }\r\n\r\n // only update if allocations were changed\r\n if (isAllocationUpdated && !totalAllocationError) {\r\n await updateAllocationsInDb();\r\n }\r\n\r\n //reset allocation update state after save\r\n setIsAllocationUpdated(false);\r\n\r\n //reset loading and edit beneficiary states\r\n setLoading(false);\r\n props?.setEdit(false);\r\n };\r\n\r\n //BENNY UPDAT\r\n const getRelationshipTypeFromId = (id) => {\r\n let relationshipType = props?.relationshipTypes.find(\r\n (type) => type.id === id\r\n );\r\n return relationshipType?.name;\r\n };\r\n\r\n //states to keep track of beneficiaries updated\r\n const [recentlyUpdatedBennies, setRecentlyUpdatedBennies] = useState([]); //updates to name, dob, relationship type... future use\r\n const [isAllocationUpdated, setIsAllocationUpdated] = useState(false); //updates to allocations\r\n\r\n //Check for recently updated bennies\r\n const checkRecentBeneficiaryUpdates = (beneficiary, property, val) => {\r\n //add updated benny to recently updated array if it doesn't exist or update it if alreay in array\r\n\r\n if (recentlyUpdatedBennies.some((benny) => benny.id === beneficiary.id)) {\r\n let updatedArray = recentlyUpdatedBennies.map((item) =>\r\n item.id === beneficiary.id ? { ...item, [property]: val } : item\r\n );\r\n\r\n setRecentlyUpdatedBennies(updatedArray);\r\n } else {\r\n let updatedBenny = { ...beneficiary, [property]: val };\r\n\r\n setRecentlyUpdatedBennies([...recentlyUpdatedBennies, updatedBenny]);\r\n }\r\n };\r\n //UPDATE NAME AND DOB - can use this to update these properties - input fields must be commented back in\r\n const handleBeneficiaryInputChange = (e, property, beneficiary) => {\r\n let val = e.target.value;\r\n\r\n //update primary beneficiary OR contingent beneficiary\r\n if (beneficiary.isPrimary) {\r\n setPrimaryBennies([\r\n ...primaryBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { [property]: val })\r\n : benny\r\n ),\r\n ]);\r\n } else {\r\n setContingentBennies([\r\n ...contingentBennies.map((benny) =>\r\n benny.id === beneficiary.id\r\n ? Object.assign(benny, { [property]: val })\r\n : benny\r\n ),\r\n ]);\r\n }\r\n //add updated benny to recently updated array if it doesn't exist or update it if alreay in array\r\n checkRecentBeneficiaryUpdates(beneficiary, property, val);\r\n };\r\n\r\n //UPDATE ALLOCATION\r\n const handleAllocationChange = (e, beneficiary, i) => {\r\n setIsAllocationUpdated(true);\r\n let total = 100;\r\n //check if e is a number equal to 0 (will get this from delete) othersiwse get value from e.target.value\r\n // let val = e === 0 ? 0 : Number(e.target.value);\r\n let val;\r\n //check if e is an event or a number and assign value accordingly\r\n if (e?.target?.value) {\r\n val = Number(e.target.value);\r\n } else {\r\n val = e;\r\n }\r\n\r\n let unhandledAmount = total - val;\r\n\r\n let primaryBenniesRemaining = primaryBennies?.length - 1;\r\n let contingentBenniesRemaining = contingentBennies?.length - 1;\r\n\r\n // UPDATE PRIMARY beneficiary\r\n if (beneficiary.isPrimary) {\r\n // check that value is not greater than 100 or less than 0\r\n if (val <= 100 && val >= 0) {\r\n //update current primary beneficiary w/ new value\r\n setPrimaryBennies((prevPrimaryBennies) =>\r\n prevPrimaryBennies.map((benny) =>\r\n benny.id === beneficiary.id ? { ...benny, amount: val } : benny\r\n )\r\n );\r\n }\r\n //IF evenSplit = true, check if there are other beneficiaries to update w/ new remaining amount if unhandled amount > 0\r\n if (evenSplitPrimary) {\r\n if (primaryBenniesRemaining > 0 && unhandledAmount >= 0) {\r\n //update other primary beneficiaries w/ new value\r\n let evenSplitAmount = Math.floor(\r\n Math.abs(unhandledAmount) / primaryBenniesRemaining\r\n );\r\n let remainder = unhandledAmount % primaryBenniesRemaining;\r\n\r\n //add remainder if greater than 0\r\n setPrimaryBennies((prePrimaryBennies) =>\r\n prePrimaryBennies.map((benny, index) => {\r\n if (index !== i) {\r\n // Check if the last beneficiary needs to receive the remainder\r\n if (index === primaryBenniesRemaining) {\r\n return { ...benny, amount: evenSplitAmount + remainder };\r\n } else {\r\n return { ...benny, amount: evenSplitAmount };\r\n }\r\n } else {\r\n return benny; // Return the unchanged beneficiary\r\n }\r\n })\r\n );\r\n }\r\n }\r\n }\r\n\r\n //UPDATE CONTINGENT beneficiary\r\n if (!beneficiary.isPrimary) {\r\n // check that value is not greater than 100 or less than 0\r\n if (val <= 100 && val >= 0) {\r\n //update current primary beneficiary w/ new value\r\n setContingentBennies((prevContBennies) =>\r\n prevContBennies.map((benny) =>\r\n benny.id === beneficiary.id ? { ...benny, amount: val } : benny\r\n )\r\n );\r\n }\r\n //IF evenSplit = true, check if there are other beneficiaries to update w/ new remaining amount if unhandled amount > 0\r\n if (evenSplitContingent) {\r\n if (contingentBenniesRemaining > 0 && unhandledAmount >= 0) {\r\n //update other primary beneficiaries w/ new value\r\n let evenSplitAmount = Math.floor(\r\n Math.abs(unhandledAmount) / contingentBenniesRemaining\r\n );\r\n let remainder = unhandledAmount % contingentBenniesRemaining;\r\n\r\n //add remainder if greater than 0\r\n setContingentBennies((prevContBennies) =>\r\n prevContBennies.map((benny, index) => {\r\n if (index !== i) {\r\n // Check if the last beneficiary needs to receive the remainder\r\n if (index === contingentBenniesRemaining) {\r\n return { ...benny, amount: evenSplitAmount + remainder };\r\n } else {\r\n return { ...benny, amount: evenSplitAmount };\r\n }\r\n } else {\r\n return benny; // Return the unchanged beneficiary\r\n }\r\n })\r\n );\r\n }\r\n }\r\n }\r\n };\r\n\r\n //Update allocations in db\r\n const updateAllocationsInDb = async () => {\r\n let allAllocations = [...primaryBennies, ...contingentBennies];\r\n // Create new benny objects to fufill data requirements for back updating allocations\r\n let allocationsWithBennyIds = allAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n } = object; // Destructure 'id' from the object\r\n\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n };\r\n });\r\n\r\n try {\r\n let results = await enrollmentService.saveBeneficiaryAllocationForMember(\r\n allocationsWithBennyIds,\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error('error updating allocations for beneficiaries', error);\r\n }\r\n };\r\n\r\n //Edit Existing Beneficiary DOB\r\n const handleBeneficiaryDob = (e, beneficiary) => {\r\n let _dob = e;\r\n //update stored allocations benny w/ new dob\r\n setStoredAllocations((prevStoredAllocations) => {\r\n return prevStoredAllocations.map((benny) =>\r\n benny.id === beneficiary.id ? { ...benny, dob: _dob } : benny\r\n );\r\n });\r\n //add updated benny to recently updated array if it doesn't exist or update it if alreay in array\r\n checkRecentBeneficiaryUpdates(beneficiary, 'dob', _dob);\r\n };\r\n\r\n //ADD NEW BENEFICIARY LOGIC\r\n const [addPrimaryBenny, setAddPrimaryBenny] = useState(false);\r\n const [addContingentBenny, setAddContingentBenny] = useState(false);\r\n const [newPrimaryBenny, setNewPrimaryBenny] = useState({});\r\n const [newContingentBenny, setNewContingentBenny] = useState({});\r\n\r\n const handleAddBeneficiaryInputChange = (e, property, type) => {\r\n let val = e.target.value;\r\n\r\n if (type === 'primary') {\r\n setNewPrimaryBenny({ ...newPrimaryBenny, [property]: val });\r\n }\r\n\r\n if (type === 'contingent') {\r\n setNewContingentBenny({ ...newContingentBenny, [property]: val });\r\n }\r\n };\r\n\r\n const handleAddBeneficiaryRelationshipChange = (e, type) => {\r\n let val = e.target.value;\r\n if (type === 'primary') {\r\n setNewPrimaryBenny({ ...newPrimaryBenny, relationshipTypeId: val });\r\n }\r\n\r\n if (type === 'contingent') {\r\n setNewContingentBenny({ ...newContingentBenny, relationshipTypeId: val });\r\n }\r\n };\r\n\r\n const handleAddBeneficiaryDob = (e, type) => {\r\n let _dob = e;\r\n if (type === 'primary') {\r\n setNewPrimaryBenny({ ...newPrimaryBenny, dob: _dob });\r\n }\r\n\r\n if (type === 'contingent') {\r\n setNewContingentBenny({ ...newContingentBenny, dob: _dob });\r\n }\r\n };\r\n\r\n const handleAddDependentAsBenny = (selection) => {\r\n setNewPrimaryBenny({\r\n ...newPrimaryBenny,\r\n firstName: selection.firstName,\r\n lastName: selection.lastName,\r\n dob: selection.dob,\r\n relationshipTypeId: selection?.relationshipTypeId || '',\r\n });\r\n };\r\n\r\n const saveNewBeneficiary = async () => {\r\n //current total allocations before adding the new benny\r\n let allCurrentAllocations = [...primaryBennies, ...contingentBennies];\r\n let currentAllocationsWithBennyIds = allCurrentAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n dob,\r\n } = object; // Destructure 'id' from the object\r\n\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n dob,\r\n };\r\n });\r\n\r\n //add new primary beneficiary to db\r\n if (addPrimaryBenny) {\r\n let _newPrimaryBennyObj = {\r\n ...newPrimaryBenny,\r\n middleInitial: '',\r\n planId: props?.plan?.planId,\r\n isPrimary: true,\r\n isDeleted: false,\r\n memberId: props?.member.id,\r\n amount: 0,\r\n };\r\n\r\n try {\r\n let newBennyInDb = await enrollmentService.addBeneficiaryForMember(\r\n props?.member.id,\r\n _newPrimaryBennyObj\r\n );\r\n\r\n //if new benny added suscessfully, create new benny allocation obj and add it to current benny allocations array to update allocation in db\r\n if (newBennyInDb.id) {\r\n //if there are no primary bennies, set new benny amount to 100, otherwise set to 0\r\n let newBennyAmount = primaryBennies.length > 0 ? 0 : 100;\r\n let newBennyAllocation = {\r\n BeneficiaryId: newBennyInDb.id,\r\n planId: props?.plan?.planId,\r\n amount: newBennyAmount,\r\n isPrimary: true,\r\n isDeleted: false,\r\n memberId: newBennyInDb.memberId,\r\n };\r\n\r\n try {\r\n await enrollmentService.saveBeneficiaryAllocationForMember(\r\n [...currentAllocationsWithBennyIds, newBennyAllocation],\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error(\r\n 'error updating allocations for new primary beneficiary',\r\n error\r\n );\r\n }\r\n }\r\n } catch (error) {\r\n console.error('error adding new primary beneficiary', error);\r\n }\r\n }\r\n //add new contingent beneficiary to db\r\n if (addContingentBenny) {\r\n let _newContingentBennyObj = {\r\n ...newContingentBenny,\r\n middleInitial: '',\r\n planId: props?.plan?.planId,\r\n isPrimary: false,\r\n isDeleted: false,\r\n memberId: props?.member.id,\r\n amount: 0,\r\n };\r\n\r\n try {\r\n let newBennyInDb = await enrollmentService.addBeneficiaryForMember(\r\n props?.member.id,\r\n _newContingentBennyObj\r\n );\r\n\r\n //if new benny added suscessfully, create new contingent benny allocation obj and add it to current benny allocations array to update allocation in db\r\n if (newBennyInDb.id) {\r\n //if there are no primary bennies, set new benny amount to 100, otherwise set to 0\r\n let newBennyAmount = contingentBennies.length > 0 ? 0 : 100;\r\n let newBennyAllocation = {\r\n BeneficiaryId: newBennyInDb.id,\r\n planId: props?.plan?.planId,\r\n amount: newBennyAmount,\r\n isPrimary: false,\r\n isDeleted: false,\r\n memberId: newBennyInDb.memberId,\r\n };\r\n\r\n try {\r\n await enrollmentService.saveBeneficiaryAllocationForMember(\r\n [...currentAllocationsWithBennyIds, newBennyAllocation],\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error(\r\n 'error updating allocations for new contingent beneficiary',\r\n error\r\n );\r\n }\r\n }\r\n } catch (error) {\r\n console.error('error adding new primary beneficiary', error);\r\n }\r\n }\r\n\r\n getAllocations();\r\n //close and clear add benny form\r\n if (addPrimaryBenny) {\r\n setAddPrimaryBenny(false);\r\n setNewPrimaryBenny({});\r\n }\r\n if (addContingentBenny) {\r\n setAddContingentBenny(false);\r\n setNewContingentBenny({});\r\n }\r\n };\r\n\r\n //DELETE BENEFICIARY LOGIC\r\n\r\n const [openConfirmDelete, setOpenConfirmDelete] = useState(false);\r\n const [bennyToDelete, setBennyToDelete] = useState({});\r\n\r\n const openDeleteModal = (e, beneficiary, i) => {\r\n setIsDeleted(false);\r\n setOpenConfirmDelete(true);\r\n setBennyToDelete({ ...beneficiary, index: i });\r\n };\r\n const closeDeleteModal = () => {\r\n setOpenConfirmDelete(false);\r\n setBennyToDelete({});\r\n };\r\n\r\n const [isDeleted, setIsDeleted] = useState(false);\r\n //confirm delete benny and update db\r\n const handleDeleteBenny = async () => {\r\n setIsDeleted(bennyToDelete);\r\n //update local state allocations w/ deleted benny allocations = 0\r\n handleAllocationChange(0, bennyToDelete, bennyToDelete?.index);\r\n //delete them from db\r\n try {\r\n await enrollmentService.deleteBeneficiaryByMemberId(\r\n props?.member.id,\r\n bennyToDelete?.id\r\n );\r\n } catch (error) {\r\n console.error('error deleting beneficiary', error);\r\n }\r\n\r\n getAllocations();\r\n closeDeleteModal();\r\n };\r\n\r\n //function to update all other allocations in db minus the recently deleted benny (called in useEffect below)\r\n //still struggling w/ updating to current allocations (need a page reload to see changes - but it is working!)\r\n const updateCurrentAllocationsAfterDelete = async () => {\r\n let allAllocations = [...primaryBennies, ...contingentBennies];\r\n\r\n // Create new benny objects to fufill data requirements for back updating allocations\r\n let allocationsWithBennyIds = allAllocations.map((object) => {\r\n const {\r\n id,\r\n memberId,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n lastModifiedBy,\r\n } = object; // Destructure 'id' from the object\r\n\r\n if (object.id !== isDeleted.id) {\r\n return {\r\n BeneficiaryId: id,\r\n planId,\r\n amount,\r\n isPrimary,\r\n isDeleted,\r\n memberId,\r\n lastModifiedBy,\r\n };\r\n }\r\n });\r\n\r\n try {\r\n enrollmentService.saveBeneficiaryAllocationForMember(\r\n allocationsWithBennyIds,\r\n props?.member.id\r\n );\r\n } catch (error) {\r\n console.error('error updating allocations for beneficiaries', error);\r\n }\r\n setIsDeleted(false);\r\n getAllocations();\r\n };\r\n\r\n //update allocations IF beneficiary is deleted\r\n useEffect(() => {\r\n if (isDeleted) {\r\n updateCurrentAllocationsAfterDelete();\r\n }\r\n }, [isDeleted]);\r\n\r\n //DOB error handling\r\n ////WANT TO REFACTOR THIS STUFF\r\n let today = new Date();\r\n let day = today.getDate();\r\n let month = today.getMonth() + 1;\r\n let year = today.getFullYear();\r\n day = day < 10 ? '0' + day : day;\r\n month = month < 10 ? '0' + month : month;\r\n let dateMax = `${year - 0}-${month}-${day}`;\r\n let dateMaxObj = new Date(dateMax);\r\n let dateMin = `${year - 100}-${month}-${day}`;\r\n let dateMinObj = new Date(dateMin);\r\n\r\n const [dobError, setDobError] = useState(false);\r\n\r\n const dobErrorMessage = useMemo(() => {\r\n switch (dobError) {\r\n case 'minDate': {\r\n return 'Must be less than 100';\r\n }\r\n case 'disableFuture': {\r\n return 'Must be greater than 0';\r\n }\r\n case 'invalidDate': {\r\n return 'Invalid date';\r\n }\r\n default: {\r\n return '';\r\n }\r\n }\r\n }, [dobError]);\r\n\r\n //set error message for EXISTING primary or contingent benny\r\n const setDobErrorInExistingBeneficiaries = (benny, error) => {\r\n let _allExistingBeneficiaries = [...storedAllocations];\r\n\r\n //find benny in storedAllocations that matches benny.id and update dobError\r\n let _updatedExistingBeneficiaries = _allExistingBeneficiaries.map((b) => {\r\n if (b.id === benny.id) {\r\n return { ...b, dobError: !!(error && error.length > 0) };\r\n } else return b;\r\n });\r\n\r\n //update stored allocations\r\n setStoredAllocations(_updatedExistingBeneficiaries);\r\n setDobError(error);\r\n };\r\n\r\n //set error message for NEW primary or contingent benny\r\n const setDobErrorMessageNewBeneficiary = (benny, type, error) => {\r\n if (type === 'primary') {\r\n //update new primary benny\r\n setNewPrimaryBenny({\r\n ...newPrimaryBenny,\r\n dobError: !!(error && error.length > 0),\r\n });\r\n } else if (type === 'contingent') {\r\n //update new contingent benny\r\n setNewContingentBenny({\r\n ...newContingentBenny,\r\n dobError: !!(error && error.length > 0),\r\n });\r\n }\r\n\r\n //set message to display as helper text\r\n setDobError(error);\r\n };\r\n\r\n //Cancel edit and/or add beneficiary\r\n const cancelEditOrAdd = () => {\r\n props?.setEdit(false);\r\n setIsAllocationUpdated(false);\r\n setRecentlyUpdatedBennies([]);\r\n setAddContingentBenny(false);\r\n setAddPrimaryBenny(false);\r\n setTotalAllocationError(false);\r\n //refetch db allocations\r\n getAllocations();\r\n };\r\n\r\n return (\r\n \r\n {/* PRIMARY BENEFICIARY */}\r\n \r\n \r\n Primary Beneficiary \r\n\r\n {props?.edit && primaryBennies?.length > 0 && (\r\n \r\n setEvenSplitPrimary(!evenSplitPrimary)}\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n \r\n\r\n {!props?.edit && (\r\n \r\n {primaryBennies?.map((benny) => (\r\n \r\n {benny?.amount}% {benny?.firstName} {benny?.lastName} |{' '}\r\n {props.relationshipTypes &&\r\n getRelationshipTypeFromId(benny?.relationshipTypeId)}{' '}\r\n {benny?.dob\r\n ? `| ${formatDateObjMMDDYYYYDisplay(benny?.dob)}`\r\n : ''}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n\r\n {/* Edit Primary Beneficiary */}\r\n \r\n {props?.edit &&\r\n primaryBennies.map((benny, i) => (\r\n \r\n {/* Display Primary Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName}\r\n \r\n \r\n |\r\n \r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n\r\n {/* editable fields for primary benny - dob and allocation */}\r\n \r\n {/* Edit primary benny DOB */}\r\n \r\n handleBeneficiaryDob(e, benny)}\r\n onError={(error) =>\r\n setDobErrorInExistingBeneficiaries(benny, error)\r\n }\r\n sx={componentStyles.customDatePicker('editExisting')}\r\n slotProps={{\r\n textField: {\r\n helperText: benny?.dobError ? dobErrorMessage : '',\r\n size: 'small',\r\n },\r\n openPickerButton: { sx: { display: 'none' } }, //hide calendar icon calandar\r\n }}\r\n />\r\n \r\n\r\n {/* Edit Primary Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: componentStyles.allocationInputStyles.inputPropsStyles,\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* input fields w/ corresponding methods to update primary beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"firstNamePrimary\",\r\n }}\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n inputProps={{\r\n \"data-update\": \"lastNamePrimary\",\r\n }}\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n inputProps={{\r\n \"data-update\": \"dob\",\r\n }}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n {/* \r\n Delete Beneficiary */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n \r\n ))}\r\n\r\n {/* ADD NEW PRIMARY BENEFICIARY */}\r\n\r\n {props?.edit && !addPrimaryBenny && (\r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n //close add contingent benny if open\r\n setAddContingentBenny(false);\r\n }}\r\n >\r\n + Add additional primary beneficiary\r\n \r\n )}\r\n\r\n {addPrimaryBenny && (\r\n \r\n \r\n {' '}\r\n Add additional primary beneficiary{' '}\r\n \r\n\r\n {/* Potential Beneficiaries to select */}\r\n \r\n {potentialBeneficiaries?.length > 0 &&\r\n potentialBeneficiaries?.map((potentialBen, i) => {\r\n //map and compare current beneficiaries to potentials by first AND last name - only return potentials that are NOT already beneficiaries and who have a first and last name\r\n const isCurrentBenny = primaryBennies?.find(\r\n (benny) =>\r\n benny?.firstName?.toLowerCase() ===\r\n potentialBen?.firstName?.toLowerCase() &&\r\n benny?.lastName?.toLowerCase() ===\r\n potentialBen?.lastName?.toLowerCase()\r\n );\r\n if (\r\n !isCurrentBenny &&\r\n potentialBen?.firstName &&\r\n potentialBen?.lastName\r\n ) {\r\n let firstName = potentialBen?.firstName\r\n ? potentialBen?.firstName\r\n : '';\r\n let lastName = potentialBen?.lastName\r\n ? potentialBen?.lastName\r\n : '';\r\n let relationship = potentialBen?.relationshipTypeId\r\n ? getRelationshipTypeFromId(\r\n potentialBen?.relationshipTypeId\r\n )\r\n : 'Dependent';\r\n return (\r\n handleAddDependentAsBenny(potentialBen)}\r\n >\r\n \r\n\r\n {/* Add new Form */}\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'primary')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'primary')\r\n }\r\n // InputProps={{\r\n // sx: componentStyles.inputShape\r\n // }}\r\n />\r\n\r\n \r\n handleAddBeneficiaryRelationshipChange(e, 'primary')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n handleAddBeneficiaryDob(e, 'primary')}\r\n onError={(error) =>\r\n setDobErrorMessageNewBeneficiary(\r\n newPrimaryBenny,\r\n 'primary',\r\n error\r\n )\r\n }\r\n sx={componentStyles.customDatePicker(false)}\r\n slotProps={{\r\n textField: {\r\n helperText: newPrimaryBenny?.dobError\r\n ? dobErrorMessage\r\n : '',\r\n size: 'small',\r\n },\r\n openPickerButton: { sx: { display: 'none' } }, //hide calendar icon calandar\r\n }}\r\n />\r\n \r\n\r\n \r\n {\r\n setAddPrimaryBenny((prevVal) => !prevVal);\r\n setNewPrimaryBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {/* CONTINGENT BENEFICIARY */}\r\n\r\n \r\n \r\n Contingent Beneficiary \r\n\r\n {props?.edit && contingentBennies?.length > 0 && (\r\n \r\n \r\n setEvenSplitContingent(!evenSplitContingent)\r\n }\r\n inputProps={{ 'aria-label': 'controlled' }}\r\n />\r\n }\r\n label=\"Evenly split allocations\"\r\n />\r\n \r\n )}\r\n \r\n\r\n {!props?.edit && (\r\n \r\n {contingentBennies?.map((benny) => (\r\n \r\n {benny?.amount}% {benny?.firstName} {benny?.lastName} |{' '}\r\n {props.relationshipTypes &&\r\n getRelationshipTypeFromId(benny?.relationshipTypeId)}{' '}\r\n {benny?.dob\r\n ? `| ${formatDateObjMMDDYYYYDisplay(benny?.dob)}`\r\n : ''}\r\n \r\n ))}\r\n \r\n )}\r\n \r\n\r\n {/* Edit Contingent Beneficiary */}\r\n \r\n \r\n {props?.edit &&\r\n contingentBennies.map((benny, i) => (\r\n \r\n {/* Display Contingent Name/Relationship */}\r\n \r\n \r\n {benny.firstName} {benny.lastName}\r\n \r\n \r\n |\r\n \r\n \r\n {\r\n props.relationshipTypes.find(\r\n (type) => type.id === benny.relationshipTypeId\r\n )?.name\r\n }\r\n \r\n \r\n\r\n {/* editable fields for contingent benny - dob and allocation */}\r\n \r\n {/* Edit contingent benny DOB */}\r\n \r\n handleBeneficiaryDob(e, benny)}\r\n onError={(error) =>\r\n setDobErrorInExistingBeneficiaries(benny, error)\r\n }\r\n sx={componentStyles.customDatePicker('editExisting')}\r\n slotProps={{\r\n textField: {\r\n helperText: benny?.dobError ? dobErrorMessage : '',\r\n size: 'small',\r\n },\r\n openPickerButton: { sx: { display: 'none' } }, //hide calendar icon calandar\r\n }}\r\n />\r\n \r\n\r\n {/* Edit Contingent Allocation */}\r\n handleAllocationChange(e, benny, i)}\r\n onBlur={() => checkAllocationTotals()}\r\n InputProps={{\r\n sx: componentStyles.allocationInputStyles\r\n .inputPropsStyles,\r\n endAdornment: (\r\n \r\n %\r\n \r\n ),\r\n }}\r\n inputProps={{\r\n max: '100',\r\n min: '0',\r\n type: 'number',\r\n }}\r\n onFocus={(e) => e.target.select()}\r\n />\r\n\r\n {/* input fields w/ corresponding methods to update contingent beneficiary name, dob, relationship, and delete benny */}\r\n {/* \r\n handleBeneficiaryInputChange(e, \"firstName\", benny)\r\n }\r\n />\r\n\r\n \r\n handleBeneficiaryInputChange(e, \"lastName\", benny)\r\n }\r\n />\r\n\r\n handleBeneficiaryInputChange(e, \"dob\", benny)}\r\n />\r\n\r\n handleRelationshipChange(e, benny)}\r\n >\r\n {props?.relationshipTypes &&\r\n props?.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType?.name}\r\n \r\n ))}\r\n */}\r\n\r\n {/* Delete Beneficiary Button */}\r\n {/* openDeleteModal(e, benny, i)}>\r\n */}\r\n \r\n \r\n ))}\r\n\r\n {/* ADD A NEW CONTINGENT BENEFICIARY */}\r\n\r\n {props?.edit && !addContingentBenny && (\r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n //close add primary benny if open\r\n setAddPrimaryBenny(false);\r\n }}\r\n >\r\n + Add additional contingent beneficiary\r\n \r\n )}\r\n\r\n {addContingentBenny && (\r\n \r\n \r\n {' '}\r\n Add additional contingent beneficiary{' '}\r\n \r\n\r\n {/* Add new Form */}\r\n \r\n handleAddBeneficiaryInputChange(e, 'firstName', 'contingent')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryInputChange(e, 'lastName', 'contingent')\r\n }\r\n />\r\n\r\n \r\n handleAddBeneficiaryRelationshipChange(e, 'contingent')\r\n }\r\n >\r\n {props.relationshipTypes &&\r\n props.relationshipTypes.map((relationshipType) => (\r\n \r\n {relationshipType.name}\r\n \r\n ))}\r\n \r\n\r\n \r\n handleAddBeneficiaryDob(e, 'contingent')}\r\n onError={(error) =>\r\n setDobErrorMessageNewBeneficiary(\r\n newContingentBenny,\r\n 'contingent',\r\n error\r\n )\r\n }\r\n sx={componentStyles.customDatePicker(false)}\r\n slotProps={{\r\n textField: {\r\n helperText: newContingentBenny?.dobError\r\n ? dobErrorMessage\r\n : '',\r\n size: 'small',\r\n },\r\n openPickerButton: { sx: { display: 'none' } }, //hide calendar icon calandar\r\n }}\r\n />\r\n \r\n\r\n \r\n {\r\n setAddContingentBenny((prevVal) => !prevVal);\r\n setNewContingentBenny({});\r\n }}\r\n >\r\n CANCEL\r\n \r\n \r\n ADD\r\n \r\n \r\n \r\n )}\r\n \r\n\r\n {totalAllocationError && props?.edit && (\r\n \r\n \r\n {primaryBennies?.length > 0 &&\r\n totalAllocationError?.primaryTotal != 100 && (\r\n \r\n Primary allocations must total 100%.\r\n \r\n )}\r\n {contingentBennies?.length > 0 &&\r\n totalAllocationError?.contingentTotal != 100 && (\r\n \r\n Contingent allocations must total 100%.\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n {/* \r\n {totalAllocationError && props?.edit && (\r\n \r\n {primaryBennies?.length > 0 &&\r\n totalAllocationError?.primaryTotal != 100 && (\r\n \r\n Primary allocations must total 100%.\r\n \r\n )}\r\n {contingentBennies?.length > 0 &&\r\n totalAllocationError?.contingentTotal != 100 && (\r\n \r\n Contingent allocations must total 100%.\r\n \r\n )}\r\n \r\n )} */}\r\n\r\n {/* SAVE AND CANCEL BUTTONS + display coverage effective date for uniform display in parent plan while editBeneficiary = true*/}\r\n {props?.edit && (\r\n \r\n {`Effective Date: ${\r\n props?.plan?.beginDate\r\n ? formatUTCToShortDate(props?.plan?.beginDate)\r\n : 'N/A'\r\n }`} \r\n \r\n cancelEditOrAdd()}\r\n >\r\n BACK\r\n \r\n\r\n saveBeneficiaryChanges()}\r\n disabled={loading || totalAllocationError || dobError}\r\n >\r\n {loading ? (\r\n <>\r\n \r\n \r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { format } from 'date-fns';\r\n\r\n//Mui icons\r\n\r\n//Mui Components\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\n//our components\r\nimport InfinityLoader from '../../../../../../../UH-loading-animation/InfinityLoader';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\nimport BeneficiaryViewAndEdit from './BeneficiaryViewAndEdit';\r\n\r\n//Utils\r\nimport {\r\n formatCurrency,\r\n formatUTCToShortDate,\r\n} from '../../../../../../../utils';\r\n\r\n//Active coverage global Styles\r\nimport activeCoverageStyles from './activeCoverageStyles';\r\n\r\n//component local styles\r\nconst componentStyles = {\r\n menuOptions: {\r\n color: 'text.primary',\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n fontSize: '14px',\r\n lineHeight: '24px',\r\n height: '48px',\r\n '&:hover': { backgroundColor: 'primary.light' },\r\n },\r\n benefitInfoRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'top',\r\n minHeight: '40px',\r\n marginRight: '8px',\r\n fontFamily: 'Archivo',\r\n },\r\n benefitAmountContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n minWidth: '50%',\r\n },\r\n benefitAmountRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n textAlign: 'right',\r\n width: '100%',\r\n minHeight: '40px',\r\n },\r\n};\r\n\r\nexport default function ActiveLineOfCoverageLadd(props) {\r\n //loading state for future edit CED\r\n const [loading, setLoading] = useState(false);\r\n\r\n //set array of local Ladd plans in state of this component\r\n const [memberLaddPlan, setMemberLaddPlan] = useState({});\r\n const [totalPremium, setTotalPremium] = useState(0);\r\n\r\n useEffect(() => {\r\n if (props?.activeLaddPlansAndOptions?.length > 0) {\r\n //set member ladd plan object to only the active coverage object\r\n let _memberLaddPlan = props?.activeLaddPlansAndOptions.find((plan) => {\r\n return plan?.lineOfCoverage?.displayName === 'LADD';\r\n });\r\n setMemberLaddPlan(_memberLaddPlan?.lineOfCoverage);\r\n\r\n //get total premium amount for all ladd plans\r\n let total = 0;\r\n props?.activeLaddPlansAndOptions.forEach((plan) => {\r\n if (plan?.lineOfCoverage?.premiumAmount > 0) {\r\n total += plan?.lineOfCoverage?.premiumAmount;\r\n }\r\n });\r\n setTotalPremium(total);\r\n }\r\n }, [props?.activeLaddPlansAndOptions]);\r\n\r\n // const [edit, setEdit] = useState(false);\r\n const [editBeneficiary, setEditBeneficiary] = useState(false);\r\n\r\n //open verticle dot menu to edit or cancel coverage\r\n const [anchorEl, setAnchorEl] = useState({});\r\n\r\n const handleOpenRowMenu = (e) => {\r\n setAnchorEl({\r\n ...anchorEl,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n };\r\n\r\n const handleCloseRowMenu = () => {\r\n setAnchorEl({});\r\n };\r\n\r\n const getSinglePlanDisplayName = (name) => {\r\n switch (name) {\r\n case 'LADD':\r\n return 'Member';\r\n case 'LADD-S':\r\n return 'Spouse';\r\n case 'LADD-D':\r\n return 'Dependent';\r\n default:\r\n return '';\r\n }\r\n };\r\n\r\n return (\r\n \r\n {/* Plan Title and Amount */}\r\n \r\n LIFE & AD&D \r\n \r\n \r\n {formatCurrency(totalPremium) || ''}\r\n \r\n /per month \r\n\r\n {/* Vertical 3 dot menu */}\r\n \r\n \r\n handleOpenRowMenu(e, props?.activeLaddPlansAndOptions)\r\n }\r\n value={\r\n props?.activeLaddPlansAndOptions[0]?.lineOfCoverage?.planId\r\n }\r\n sx={activeCoverageStyles.threeDotMenu.iconButton}\r\n disabled={props?.isFutureCoverage}\r\n >\r\n \r\n {/* manage coverage drawer button */}\r\n {\r\n props?.handleOpenActiveCoverageDrawer(e, memberLaddPlan);\r\n handleCloseRowMenu();\r\n }}\r\n sx={componentStyles.menuOptions}\r\n disabled={!props.allowModify}\r\n >\r\n Manage Coverage\r\n \r\n\r\n {\r\n setEditBeneficiary(true);\r\n handleCloseRowMenu();\r\n }}\r\n sx={componentStyles.menuOptions}\r\n disabled={\r\n !props?.allowEditEnrollment || memberLaddPlan?.isCancelled\r\n }\r\n >\r\n Edit Beneficiaries\r\n \r\n\r\n {/* Cancel all coverage option if only one line exists */}\r\n {props?.activePlansNotPendingCancel?.length === 1 && (\r\n {\r\n if (props?.activePlansNotPendingCancel?.length === 1) {\r\n //cancel all coverage - open CancelCoverageDrawer\r\n props?.handleOpenCancelCoverageDrawer(\r\n null,\r\n 'cancelAllCoverage'\r\n );\r\n }\r\n handleCloseRowMenu();\r\n }}\r\n sx={componentStyles.menuOptions}\r\n disabled={!props?.allowModify}\r\n >\r\n Cancel All Coverage\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n\r\n {/* BenefitAmount Section */}\r\n \r\n Benefit Amount \r\n\r\n {/* Benefit Amounts */}\r\n \r\n {/* display current amounts from db */}\r\n {props?.activeLaddPlansAndOptions?.length > 0\r\n ? props?.activeLaddPlansAndOptions\r\n ?.sort(\r\n (a, b) =>\r\n a.lineOfCoverage?.calculatedPlanTypeId -\r\n b.lineOfCoverage?.calculatedPlanTypeId\r\n )\r\n ?.map((plan, index) => {\r\n return (\r\n \r\n {/* pending changes message */}\r\n {plan?.lineOfCoverage?.futureActiveCoverageId ||\r\n plan?.lineOfCoverage?.isCancelled\r\n ? props?.pendingChangesMessage(plan?.lineOfCoverage)\r\n : null}\r\n\r\n \r\n {getSinglePlanDisplayName(\r\n plan?.lineOfCoverage?.displayName\r\n )}\r\n \r\n {' - '} \r\n \r\n {` ${formatCurrency(\r\n plan?.lineOfCoverage?.benefitAmount\r\n )} - \r\n ${formatCurrency(\r\n plan?.lineOfCoverage?.premiumAmount\r\n )}` || ''}\r\n \r\n \r\n );\r\n })\r\n : null}\r\n \r\n \r\n\r\n {/* Beneficiaries */}\r\n \r\n {`Effective Date: ${\r\n props?.activeLaddPlansAndOptions[0]?.lineOfCoverage\r\n ?.effectiveStartDate\r\n ? formatUTCToShortDate(\r\n props?.activeLaddPlansAndOptions[0]?.lineOfCoverage\r\n ?.effectiveStartDate\r\n )\r\n : 'N/A'\r\n }`} \r\n \r\n\r\n {/* {editCED &&(\r\n \r\n \r\n {\r\n setEditCED(false);\r\n }}\r\n >\r\n BACK\r\n \r\n\r\n \r\n {loading ? (\r\n <>\r\n \r\n \r\n SAVE CHANGES \r\n \r\n ) : (\r\n <>SAVE CHANGES\r\n )}\r\n \r\n \r\n \r\n )} */}\r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\n//services\r\n// import enrollmentService from '../../../../../../../../services/enrollment-service';\r\n// import activeCoverageService from '../../../../../../../../services/activeCoverage-service';\r\n\r\nimport {\r\n Box,\r\n Typography,\r\n Menu,\r\n MenuItem,\r\n IconButton,\r\n Button,\r\n} from '@mui/material';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\r\n//utils\r\nimport {\r\n formatCurrency as utilsFormatCurrency,\r\n formatBenefit,\r\n formatMonthDay,\r\n} from '../../../../../../../utils';\r\n\r\nconst styles = {\r\n container: {\r\n backgroundColor: '#FEF6E7',\r\n padding: '10px',\r\n minWidth: '250px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '18px',\r\n borderRadius: '4px',\r\n marginTop: '8px',\r\n },\r\n title: {\r\n color: '#5f2b01',\r\n fontSize: '16px',\r\n marginLeft: 1,\r\n paddingTop: '5px',\r\n fontWeight: '500',\r\n },\r\n message: {\r\n color: '#5f2b01',\r\n fontSize: '14px',\r\n fontStyle: 'normal',\r\n fontWeight: 400,\r\n letterSpacing: '0.17px',\r\n maxWidth: '400px',\r\n wordBreak: 'break-word',\r\n marginLeft: 6,\r\n },\r\n details: {\r\n color: '#5f2b01',\r\n marginLeft: 6,\r\n maxWidth: '400px',\r\n marginBottom: '8px',\r\n },\r\n button: {\r\n backgroundColor: 'transparent',\r\n color: '#5f2b01',\r\n textTransform: 'uppercase',\r\n fontSize: '13px',\r\n fontWeight: 'bold',\r\n letterSpacing: '0.46px',\r\n padding: 0,\r\n '&:hover': {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n iconButton: {\r\n padding: 0,\r\n color: '#5f2b01',\r\n },\r\n warningHeaderContainer: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n warningHeaderInnerContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n },\r\n changesMade: {\r\n fontWeight: 'medium',\r\n fontSize: '14px',\r\n },\r\n changeDescription: {\r\n marginLeft: 2,\r\n fontSize: '14px',\r\n },\r\n boldText: {\r\n fontWeight: '600',\r\n fontSize: '14px',\r\n },\r\n laddContainer: {\r\n marginTop: '-10px',\r\n paddingTop: 0,\r\n gap: '4px',\r\n },\r\n laddChangeDescription: {\r\n marginLeft: 2,\r\n fontSize: '14px',\r\n marginBottom: '2px',\r\n },\r\n};\r\n\r\n// Warning Component\r\nexport const WarningComponent = ({\r\n title,\r\n message,\r\n details,\r\n buttonLabel,\r\n onButtonClick,\r\n handleMenuClick,\r\n iconColor,\r\n}) => (\r\n \r\n \r\n \r\n {title} \r\n \r\n {buttonLabel ? (\r\n \r\n {buttonLabel}\r\n \r\n ) : (\r\n \r\n \r\n )}\r\n \r\n {message} \r\n {details && {details} }\r\n \r\n);\r\n\r\n// Pending Changes Warning Component - logic\r\nexport const PendingChangesWarning = ({\r\n plan, //array of active coverage data\r\n memberId,\r\n planId,\r\n initialWarningType = 'claim', //default warning type - can be claim, pending, modification, cancellation, ladd_warning\r\n handleModificationTypeChange,\r\n ...props\r\n // onClaimClick, a future implementation\r\n}) => {\r\n // Constants for warning types\r\n const WARNING_TYPES = {\r\n CLAIM: 'claim',\r\n PENDING: 'pending',\r\n MODIFICATION: 'modification',\r\n CANCELLATION: 'cancellation',\r\n LADD_WARNING: 'ladd_warning',\r\n };\r\n\r\n // Helper functions\r\n const formatCurrency = (amount) =>\r\n !amount || isNaN(amount) ? '$0.00' : utilsFormatCurrency(amount);\r\n\r\n const [warningType, setWarningType] = useState(initialWarningType);\r\n const [menuAnchorEl, setMenuAnchorEl] = useState(null);\r\n\r\n // console.log('lines in pending changes warning:', plan);\r\n\r\n useEffect(() => {\r\n if (!plan) return;\r\n\r\n // console.log('📊 Coverage data:', plan);\r\n\r\n const newWarningType = plan.some((item) => item.isClaimInProgress)\r\n ? WARNING_TYPES.CLAIM\r\n : plan.some(\r\n (item) =>\r\n item?.lineOfCoverage?.displayName === 'LADD' &&\r\n (item?.lineOfCoverage?.futureBenefitAmount ||\r\n item?.lineOfCoverage?.futureBeginDate)\r\n )\r\n ? WARNING_TYPES.LADD_WARNING\r\n : plan.some((item) => item?.lineOfCoverage?.isCancelled)\r\n ? WARNING_TYPES.CANCELLATION\r\n : WARNING_TYPES.PENDING;\r\n\r\n setWarningType(newWarningType);\r\n // console.log('⚠️ Warning type:', newWarningType);\r\n }, [\r\n plan,\r\n plan?.length,\r\n plan?.some((line) => line?.lineOfcoverage)?.futureActiveCoverageId,\r\n plan?.some((line) => line?.lineOfcoverage)?.futurePremiumAmount,\r\n plan?.some((line) => line?.lineOfcoverage)?.isCancelled,\r\n ]); //\r\n\r\n const handleMenuClick = (event) => setMenuAnchorEl(event.currentTarget);\r\n const handleMenuClose = () => setMenuAnchorEl(null);\r\n\r\n //lines of coverage that are pending cancellation or have future begin date\r\n const warningData = plan?.filter(\r\n (item) =>\r\n item?.lineOfCoverage?.isCancelled ||\r\n (item?.lineOfCoverage?.futureBeginDate &&\r\n item?.lineOfCoverage?.futureActiveCoverageId &&\r\n item?.lineOfCoverage?.futureBeginDate !== '0001-01-01T00:00:00+00:00' &&\r\n new Date(item?.lineOfCoverage?.futureBeginDate) > new Date())\r\n );\r\n\r\n /////build warning message\r\n const warningMessages = {\r\n //Claims - future implementation\r\n [WARNING_TYPES.CLAIM]: (data) => ({\r\n title: `${\r\n data[0]?.lineOfCoverage?.displayName || 'Coverage'\r\n } Claim in Progress`,\r\n message:\r\n 'This line of coverage is currently under claim. The member will not be charged during this time. This plan cannot be changed or canceled.',\r\n buttonLabel: 'Go to Claim',\r\n iconColor: 'rgba(230, 81, 0, 1)',\r\n link: data?.claimLink,\r\n }),\r\n [WARNING_TYPES.LADD_WARNING]: (data) => ({\r\n title: 'Coverage Changes Pending',\r\n message: 'Changes made:',\r\n details: (\r\n \r\n {data.map((item, index) => {\r\n const line = item?.lineOfCoverage;\r\n const displayName =\r\n props?.findSingleLineDisplayName(line?.displayName) || 'Coverage';\r\n const effectiveDate = formatMonthDay(line?.futureBeginDate);\r\n const cancellationDate = formatMonthDay(line?.endDate);\r\n const isCancelled = line?.isCancelled;\r\n const currentBenefit = formatCurrency(line?.benefitAmount || 0);\r\n const futureBenefit = formatCurrency(\r\n line?.futureBenefitAmount || 0\r\n );\r\n const hasBenefitChange =\r\n line?.benefitAmount != null &&\r\n line?.futureBenefitAmount != null &&\r\n line?.futureBenefitAmount !== line?.benefitAmount;\r\n\r\n // Determine the change type\r\n let changeType = '';\r\n if (isCancelled) {\r\n changeType = 'cancelled';\r\n } else if (hasBenefitChange) {\r\n changeType =\r\n line?.futureBenefitAmount > line?.benefitAmount\r\n ? 'increased'\r\n : 'decreased';\r\n } else {\r\n changeType = 'updated';\r\n }\r\n // console.log('📊 LADD data:', data);\r\n // console.log('📊 canceldate data:', cancellationDate);\r\n return (\r\n \r\n • {displayName} {changeType}, effective{' '}\r\n {isCancelled ? cancellationDate : effectiveDate}.\r\n {!isCancelled && hasBenefitChange && (\r\n <>\r\n {' '}\r\n Benefit Amount {changeType} from{' '}\r\n \r\n {currentBenefit}\r\n {' '}\r\n to{' '}\r\n \r\n {futureBenefit}.\r\n \r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n ),\r\n iconColor: '#5f2b01',\r\n }),\r\n\r\n [WARNING_TYPES.PENDING]: (data) => {\r\n // console.log('📊 Pending data:', data);\r\n //accident\r\n const renderAccidentChanges = (data) => {\r\n if (!data || !data[0]?.lineOfCoverage) {\r\n console.error('Invalid data structure for Accident changes:', data);\r\n return null;\r\n }\r\n // Accessing premium amounts\r\n const premiumAmount = data[0]?.lineOfCoverage?.premiumAmount ?? 0;\r\n const futurePremiumAmount =\r\n data[0]?.lineOfCoverage?.futurePremiumAmount ?? 0;\r\n\r\n // Determine if the premium amount has changed\r\n const premiumChange =\r\n futurePremiumAmount > premiumAmount\r\n ? 'increased'\r\n : futurePremiumAmount < premiumAmount\r\n ? 'decreased'\r\n : 'unchanged';\r\n\r\n return (\r\n \r\n • Premium Amount {premiumChange} from{' '}\r\n \r\n {formatCurrency(premiumAmount)}\r\n {' '}\r\n to{' '}\r\n \r\n {formatCurrency(futurePremiumAmount)}\r\n \r\n .\r\n \r\n );\r\n };\r\n\r\n // Plan-specific changes (Hospital, ADD, Cancer)\r\n const renderPlanChanges = (data) => {\r\n if (!data || !data[0]?.lineOfCoverage) {\r\n console.error('Invalid data structure for Plan changes:', data);\r\n return null;\r\n }\r\n\r\n // Access benefits\r\n const benefitAmount = data[0]?.lineOfCoverage?.benefitAmount ?? 0;\r\n const futureBenefitAmount =\r\n data[0]?.lineOfCoverage?.futureBenefitAmount ?? 0;\r\n\r\n // Determine change action\r\n const changeAction =\r\n futureBenefitAmount > benefitAmount\r\n ? 'increased'\r\n : futureBenefitAmount < benefitAmount\r\n ? 'decreased'\r\n : 'unchanged';\r\n\r\n return (\r\n \r\n • Benefit Amount {changeAction} from{' '}\r\n \r\n {formatBenefit(benefitAmount)}\r\n {' '}\r\n to{' '}\r\n \r\n {formatBenefit(futureBenefitAmount)}\r\n \r\n .\r\n \r\n );\r\n };\r\n\r\n // STD - different Weekly benefit\r\n const renderSTDChanges = (data) => {\r\n if (!data || !data[0]?.lineOfCoverage) {\r\n console.error('Invalid data structure for STD changes:', data);\r\n return null;\r\n }\r\n\r\n // Access benefits\r\n const benefitAmount = data[0]?.lineOfCoverage?.benefitAmount ?? 0;\r\n const futureBenefitAmount =\r\n data[0]?.lineOfCoverage?.futureBenefitAmount ?? 0;\r\n\r\n // Determine change action\r\n const changeAction =\r\n futureBenefitAmount > benefitAmount\r\n ? 'increased'\r\n : futureBenefitAmount < benefitAmount\r\n ? 'decreased'\r\n : 'unchanged';\r\n\r\n // Determine benefit type (Weekly or Monthly)\r\n const benefitType = data[0]?.lineOfCoverage?.desc.includes('Weekly')\r\n ? 'Weekly'\r\n : 'Monthly';\r\n\r\n return (\r\n \r\n • Benefit Amount {changeAction} from{' '}\r\n \r\n ${benefitAmount} {benefitType} Benefit\r\n {' '}\r\n to{' '}\r\n \r\n ${futureBenefitAmount} {benefitType} Benefit\r\n \r\n .\r\n \r\n );\r\n };\r\n\r\n //LTD - different monthly benefit\r\n const renderLTDChanges = (data) => {\r\n if (!data || !data[0]?.lineOfCoverage) {\r\n console.error('Invalid data structure for LTD changes:', data);\r\n return null;\r\n }\r\n\r\n //Percentage and dollar amouns\r\n const benefitPercentage = data[0]?.lineOfCoverage?.desc || 0;\r\n const futureBenefitAmount =\r\n data[0]?.lineOfCoverage?.futureBenefitAmount ?? 0;\r\n\r\n // Determine the change action\r\n const changeAction =\r\n data[0]?.lineOfCoverage?.futureBenefitAmount != null &&\r\n data[0]?.lineOfCoverage?.benefitAmount != null\r\n ? data[0]?.lineOfCoverage?.futureBenefitAmount >\r\n data[0]?.lineOfCoverage?.benefitAmount\r\n ? 'increased'\r\n : 'decreased'\r\n : 'updated';\r\n\r\n // Format the future benefit amount as dollars\r\n const formattedFutureBenefitAmount = formatBenefit(\r\n futureBenefitAmount,\r\n false // Not a percentage\r\n );\r\n\r\n return (\r\n \r\n • Benefit Amount {changeAction} from{' '}\r\n \r\n {benefitPercentage}\r\n {' '}\r\n to{' '}\r\n \r\n {formattedFutureBenefitAmount}\r\n \r\n .\r\n \r\n );\r\n };\r\n\r\n // Return the formatted description\r\n return {\r\n title: 'Coverage Changes Pending',\r\n message: `Changes in coverage have been scheduled to go into effect on ${formatMonthDay(\r\n data[0]?.lineOfCoverage?.futureBeginDate ?? 0\r\n )}. The new premium amount will be ${formatCurrency(\r\n data[0]?.lineOfCoverage?.futurePremiumAmount ?? 0\r\n )}/mo.`,\r\n details: (\r\n \r\n \r\n Changes made:\r\n \r\n {data[0]?.lineOfCoverage?.desc === 'Accident'\r\n ? renderAccidentChanges(data)\r\n : data[0]?.lineOfCoverage?.displayName === 'STD'\r\n ? renderSTDChanges(data)\r\n : data[0]?.lineOfCoverage?.displayName === 'LTD'\r\n ? renderLTDChanges(data)\r\n : ['Hospital', 'ADD', 'Cancer'].includes(\r\n data[0]?.lineOfCoverage?.displayName\r\n )\r\n ? renderPlanChanges(data)\r\n : null}\r\n \r\n ),\r\n iconColor: '#5f2b01',\r\n };\r\n },\r\n\r\n [WARNING_TYPES.CANCELLATION]: (data) => ({\r\n title: 'Coverage Changes Pending',\r\n message: `Changes in coverage have been scheduled to go into effect on ${formatMonthDay(\r\n data[0]?.lineOfCoverage?.endDate ?? 0\r\n )}. The new premium amount will be ${formatCurrency(\r\n data[0]?.lineOfCoverage?.futurePremiumAmount ?? 0\r\n )}/mo.`,\r\n details: (\r\n \r\n \r\n Changes made:\r\n \r\n {data.map((item, index) => (\r\n \r\n • CANCELLATION.\r\n \r\n ))}\r\n \r\n ),\r\n iconColor: '#5f2b01',\r\n }),\r\n };\r\n\r\n // console.log('📊 Warning data:', warningData);\r\n\r\n //makes sure theres a change - if so renders\r\n const currentMessage =\r\n warningType &&\r\n warningData?.length > 0 &&\r\n typeof warningMessages[warningType] === 'function'\r\n ? warningMessages[warningType](warningData)\r\n : null;\r\n\r\n if (!currentMessage) return null;\r\n\r\n // go to claim button functionality -- future implementation\r\n const onClaimClick = () => {\r\n if (currentMessage.claimLink) {\r\n window.location.href = currentMessage.claimLink;\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {/* connected to active coverage drawer edit and cancel */}\r\n handleModificationTypeChange('edit')}\r\n disabled={!props?.allowModify}\r\n >\r\n Modify Changes\r\n \r\n {/* future sprint */}\r\n {/* handleModificationTypeChange('cancel')}>\r\n Cancel Changes\r\n */}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default PendingChangesWarning;\r\n","//services\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport { Box, Typography, Checkbox, Stack } from '@mui/material';\r\n\r\n//Mui icons\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\n\r\n//Our Components\r\n\r\n//utils\r\n\r\n//component styles\r\nconst componentStyles = {\r\n checkboxRow: (coveragePendingCancel) => ({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n color: coveragePendingCancel ? 'text.disabled' : 'text.primary',\r\n }),\r\n displayMultipleLinesContainer: {\r\n width: '100%',\r\n padding: '0px 0px 0px 30px',\r\n },\r\n checkboxContainer: {\r\n margin: '10px 0px',\r\n },\r\n helperText: {\r\n fontSize: '12px',\r\n color: 'text.lightGrey',\r\n },\r\n pendingCancelMessage: { marginLeft: '4px', fontStyle: 'italic' },\r\n};\r\n\r\nexport default function CancelMultipleAcLinesSelection(props) {\r\n return (\r\n <>\r\n \r\n \r\n Please select which coverage you would like to cancel:\r\n \r\n \r\n \r\n {props?.lineToCancel?.length > 0\r\n ? props?.lineToCancel\r\n ?.sort((a, b) => {\r\n // Sort by calculatedPlanTypeId to display Member first\r\n return (\r\n a?.lineOfCoverage?.calculatedPlanTypeId -\r\n b?.lineOfCoverage?.calculatedPlanTypeId\r\n );\r\n })\r\n .map((line) => (\r\n \r\n \r\n {line?.lineOfCoverage?.displayName\r\n ? props?.findSingleLineDisplayName(\r\n line?.lineOfCoverage?.displayName\r\n )\r\n : ''}\r\n \r\n {line?.lineOfCoverage?.isCancelled && (\r\n \r\n - Pending Cancellation\r\n \r\n )}\r\n \r\n ))\r\n : 'No coverage found'}\r\n \r\n \r\n Cancelling member life coverage will automatically cancel all.\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import { display, maxWidth } from '@mui/system';\r\n\r\nconst acDrawerSharedStyles = {\r\n drawerContainer: {\r\n maxWidth: '538px',\r\n height: '100vh',\r\n },\r\n componentContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-start',\r\n width: '100%',\r\n maxWidth: '506px',\r\n height: '100%',\r\n },\r\n bodyContainer: {\r\n padding: '10px 26px',\r\n width: '100%',\r\n },\r\n infoContainer: {\r\n width: '100%',\r\n padding: '18px 16px 10px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'left',\r\n margin: '0 auto',\r\n },\r\n infoRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n margin: '10px 0px',\r\n },\r\n inputContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n margin: '30px 0px 20px 0px',\r\n },\r\n editInputContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n margin: '15px 0px 20px 0px',\r\n },\r\n inputTextField: {\r\n marginBottom: '12px',\r\n },\r\n\r\n buttonContainer: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n margin: '8px 0px',\r\n },\r\n memberinfolinesView: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: '24px',\r\n },\r\n sectiontitleView: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n // marginBottom: '5px',\r\n },\r\n buttonContainerCancel: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n width: '100%',\r\n padding: '16px',\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n marginTop: 'auto',\r\n },\r\n cancelButtonStyle: {\r\n width: '100%',\r\n textTransform: 'uppercase',\r\n },\r\n valueView: {\r\n fontSize: '16px',\r\n },\r\n editIconView: {\r\n marginLeft: '8px',\r\n fontSize: '24px',\r\n color: 'primary.main',\r\n cursor: 'pointer',\r\n '&:hover': {\r\n color: '#003d82',\r\n },\r\n },\r\n labelView: {\r\n fontSize: '16px',\r\n },\r\n priceView: {\r\n fontSize: '24px',\r\n fontFamily: 'Poppins',\r\n fontWeight: 400,\r\n color: 'primary.main',\r\n },\r\n pendingChangesView: {\r\n margin: '0 0 18px 0',\r\n },\r\n laddbenefitAmountWrapper: {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n margin: 0,\r\n padding: 0,\r\n },\r\n laddbenefitNameView: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n gap: '8px',\r\n },\r\n laddbenefitAmountView: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n width: '100%',\r\n textAlign: 'right',\r\n },\r\n effectiveDateView: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginTop: '20px',\r\n },\r\n priceContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginLeft: 'auto',\r\n },\r\n perMonthText: {\r\n fontSize: '14px',\r\n color: 'text.secondary',\r\n marginLeft: '4px',\r\n },\r\n offsetBox: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginBottom: '16px',\r\n width: 'auto',\r\n maxWidth: '450px',\r\n },\r\n offsetLabel: {\r\n fontSize: '16px',\r\n flexShrink: 0,\r\n minWidth: '120px',\r\n textAlign: 'left',\r\n marginRight: '12px',\r\n },\r\n offsetValue: {\r\n fontSize: '16px',\r\n textAlign: 'right',\r\n marginLeft: 'auto',\r\n whiteSpace: 'normal',\r\n wordBreak: 'break-word',\r\n },\r\n};\r\n\r\nexport default acDrawerSharedStyles;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\n//services\r\nimport activeCoverageService from '../../../../../../../../services/activeCoverage-service';\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport TextField from '@mui/material/TextField';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Box, Typography } from '@mui/material';\r\n\r\n//Mui icons\r\n\r\n//Our Components\r\nimport CancelMultipleAcLinesSelection from './CancelMultipleAcLinesSelection';\r\n\r\n//utils\r\n\r\n//shared styles\r\nimport acDrawerSharedStyles from './acDrawerSharedStyles';\r\n\r\nexport default function CancelAcLine(props) {\r\n //local state of coverage line(s) selected for cancellation - adding additional property to each line to be able to filter out the lines that are not selected for cancellation in instances where more than one line is displayed\r\n const [lineToCancel, setLineToCancel] = useState([]);\r\n useEffect(() => {\r\n if (props?.activeCoverageDrawerOpen?.lineSelected?.length > 0) {\r\n let _updatedLineSelected =\r\n props?.activeCoverageDrawerOpen?.lineSelected.map((line) => {\r\n return {\r\n ...line,\r\n lineOfCoverage: {\r\n ...line.lineOfCoverage,\r\n cancelLineOfCoverage: true,\r\n },\r\n };\r\n });\r\n setLineToCancel(_updatedLineSelected);\r\n }\r\n }, [props?.activeCoverageDrawerOpen?.lineSelected]);\r\n\r\n //update line selected if more than one exist - used on ladd or ci (coverge w/ multiple lines)\r\n const handleUpdateLineSelected = (coverage) => {\r\n //check if member coverage is currently selected and a different line is trying to be de-selected\r\n //update selected line to cancelLineOfCoverage: true\r\n let _updatedLineSelected = lineToCancel.map((line) => {\r\n if (line?.lineOfCoverage?.id === coverage.id) {\r\n return {\r\n ...line,\r\n lineOfCoverage: {\r\n ...line?.lineOfCoverage,\r\n cancelLineOfCoverage: !line?.lineOfCoverage?.cancelLineOfCoverage,\r\n },\r\n };\r\n } else {\r\n return line;\r\n }\r\n });\r\n\r\n //if coverage selected is member AND selection is true OR member coverage is already selected, set all lines to true\r\n let _memberSelected = _updatedLineSelected.find(\r\n (line) => line?.lineOfCoverage?.calculatedPlanTypeId === 4\r\n );\r\n if (\r\n (coverage?.calculatedPlanTypeId === 4 &&\r\n !coverage?.cancelLineOfCoverage) ||\r\n _memberSelected?.lineOfCoverage?.cancelLineOfCoverage\r\n ) {\r\n _updatedLineSelected = _updatedLineSelected.map((line) => {\r\n return {\r\n ...line,\r\n lineOfCoverage: {\r\n ...line?.lineOfCoverage,\r\n cancelLineOfCoverage: true,\r\n },\r\n };\r\n });\r\n }\r\n\r\n setLineToCancel(_updatedLineSelected);\r\n };\r\n\r\n //submit cancelation\r\n const submitCancellation = async () => {\r\n props?.setLoading(true);\r\n\r\n if (lineToCancel?.length > 0) {\r\n //RO DO: add in logic for CI plans to match ladd logic w/ calculatedPlanTypeId\r\n let _memberLaddSelected = lineToCancel.find(\r\n (line) =>\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 4 &&\r\n line?.lineOfCoverage?.cancelLineOfCoverage &&\r\n !line?.lineOfCoverage?.isCancelled\r\n );\r\n //if member ladd or member CI (coming soon) selected to cancel, hit api with member only as back-end will cancel all existing ladd (member, spouse, and/or dependent)\r\n if (_memberLaddSelected) {\r\n try {\r\n //cancel coverage\r\n await activeCoverageService.cancelActiveCoverageForMember(\r\n _memberLaddSelected?.lineOfCoverage?.id,\r\n props?.reasonForCancelation,\r\n props?.dateOfCancelation\r\n );\r\n } catch (error) {\r\n console.error('error canceling member ladd line of coverage', error);\r\n }\r\n } else {\r\n //cancel each line selected if not already pending cancellation\r\n for (const coverage of lineToCancel) {\r\n if (\r\n coverage?.lineOfCoverage?.cancelLineOfCoverage &&\r\n !coverage?.lineOfCoverage?.isCancelled\r\n ) {\r\n try {\r\n // Cancel coverage\r\n await activeCoverageService.cancelActiveCoverageForMember(\r\n coverage?.lineOfCoverage?.id,\r\n props?.reasonForCancelation,\r\n props?.dateOfCancelation\r\n );\r\n } catch (error) {\r\n console.error('Error canceling single line of coverage', error);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n //*****make post cancel submit return to view */\r\n\r\n //following cancel coverage, refresh data\r\n setTimeout(() => {\r\n props?.getPaymentSchedule\r\n ? props?.getPaymentSchedule()\r\n : console.log('no getPaymentSchedule method');\r\n props?.getActiveCoverage\r\n ? props?.getActiveCoverage(lineToCancel[0]?.lineOfCoverage?.memberId)\r\n : console.log('no getActiveCoverage method');\r\n props?.getMemberHistory\r\n ? props?.getMemberHistory()\r\n : console.log('no getMemberHistory method');\r\n //TO DO: once we roll-out full drawer, need to add in update modification type back to 'view' after cancel complete\r\n props?.setLoading(false);\r\n props?.handleModificationTypeChange('view'); //exit EDIT section and return to view section\r\n }, 2000);\r\n };\r\n\r\n //cancel all coverage flow when only one line of coverage exists\r\n const handleCancelAllCoverageFlow = (e) => {\r\n if (props?.activePlansNotPendingCancel?.length === 1) {\r\n //open cancel all coverage drawer\r\n props?.handleOpenCancelCoverageDrawer(e, 'cancelAllCoverage');\r\n //set modification type to 'veiw' in ActiveCoverageDrawer\r\n props?.handleModificationTypeChange('view');\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n Cancel Coverage \r\n\r\n \r\n <>\r\n \r\n Policy #\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.policyNumber || ''}\r\n \r\n \r\n Carrier:{' '}\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.carrierName || ''}\r\n \r\n {props?.renderEffectiveDateList(\r\n props?.activeCoverageDrawerOpen?.lineSelected\r\n )}\r\n \r\n\r\n {/* Checkbox Select section for coverage that has multiple lines like LADD or CI */}\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD' || 'CI'\r\n ) && (\r\n <>\r\n \r\n \r\n {props?.cancelCoverageDateSelectionOptions?.length > 0 &&\r\n props?.cancelCoverageDateSelectionOptions?.map((date) => {\r\n return (\r\n \r\n {`${date.name} (${date.displayDate})`}\r\n \r\n );\r\n })}\r\n \r\n\r\n {\r\n props?.handleChangeReasonForCancelation(e);\r\n }}\r\n label=\"Reason for Cancellation\"\r\n value={props?.reasonForCancelation || ''}\r\n select\r\n >\r\n {props?.cancellationReasons &&\r\n props?.cancellationReasons.map((reason) => {\r\n return (\r\n \r\n {reason.name}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n {/* Buttons */}\r\n \r\n props?.handleModificationTypeChange('view') //exit cancel section and return to view section\r\n }\r\n >\r\n BACK\r\n \r\n \r\n props?.activePlansNotPendingCancel?.length === 1\r\n ? handleCancelAllCoverageFlow(e)\r\n : submitCancellation()\r\n }\r\n >\r\n CONFIRM CANCELLATION\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useParams } from 'react-router-dom';\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport { Box, Typography } from '@mui/material';\r\n\r\n//Our Components\r\nimport PendingChangesWarning from './PendingChangesWarning';\r\nimport PropTypes from 'prop-types';\r\nimport CancelAcLine from './CancelAcLine';\r\n//utils\r\nimport { formatUTCToShortDate } from '../../../../../../../utils';\r\n\r\n//shared styles -- moved most styles over\r\nimport acDrawerSharedStyles from './acDrawerSharedStyles';\r\n\r\nexport default function ViewAcLine({\r\n plan, // array of line(s) of coverage\r\n onClose,\r\n handleModificationTypeChange,\r\n findSingleLineDisplayName,\r\n ...props\r\n}) {\r\n const { id: memberId } = useParams();\r\n const [hasPendingWarning, setHasPendingWarning] = useState(false);\r\n const plans = Array.isArray(plan) ? plan : plan ? [plan] : [];\r\n const planData = plans[0];\r\n const { lineOfCoverage } = planData || {};\r\n\r\n //Checks if theres a pending warning\r\n useEffect(() => {\r\n setHasPendingWarning(\r\n !!lineOfCoverage?.futureActiveCoverageId || !!lineOfCoverage?.isCancelled\r\n );\r\n }, [lineOfCoverage]);\r\n\r\n if (!plan || plan.length === 0) {\r\n return No plan data available ;\r\n }\r\n\r\n const isLaddPlan = Array.isArray(plan)\r\n ? plan.some((item) =>\r\n item.lineOfCoverage?.displayName?.toLowerCase().includes('ladd')\r\n )\r\n : plan?.lineOfCoverage?.displayName?.toLowerCase().includes('ladd');\r\n\r\n return (\r\n \r\n {/* All other content */}\r\n \r\n {isLaddPlan ? 'Manage Coverage' : 'Member Coverage'}\r\n {/* noticed that if plan is cancelled pencil is there for a brief moment needs to disapear in that case -- fix */}\r\n \r\n !hasPendingWarning && props?.allowModify && handleModificationTypeChange('edit')\r\n }\r\n sx={{\r\n ...acDrawerSharedStyles.editIconView,\r\n color: hasPendingWarning\r\n ? 'text.disabled'\r\n : acDrawerSharedStyles.editIconView.color,\r\n cursor: hasPendingWarning\r\n ? 'default'\r\n : acDrawerSharedStyles.editIconView.cursor,\r\n pointerEvents: hasPendingWarning ? 'none' : 'auto',\r\n '&:hover': {\r\n color: hasPendingWarning\r\n ? 'text.disabled'\r\n : acDrawerSharedStyles.editIconView['&:hover'].color,\r\n },\r\n }}\r\n >\r\n \r\n \r\n\r\n \r\n handleModificationTypeChange('edit')}\r\n onCancelChanges={() => console.log('Cancel clicked')} //need to think on this logic more - likely disable for this sprint MVP\r\n handleModificationTypeChange={handleModificationTypeChange}\r\n findSingleLineDisplayName={findSingleLineDisplayName}\r\n allowModify={props?.allowModify}\r\n />\r\n \r\n\r\n \r\n {isLaddPlan ? (\r\n \r\n\r\n {/* Cancel Button */}\r\n \r\n handleModificationTypeChange('cancel')}\r\n sx={acDrawerSharedStyles.cancelButtonStyle}\r\n disabled={plan[0]?.lineOfCoverage?.isCancelled || !props?.allowModify}\r\n >\r\n Cancel Line of Coverage\r\n \r\n \r\n \r\n );\r\n}\r\n\r\n// Component for LADD and CI Plan Details\r\nfunction LaddandCiPlanDetails({ plan, findSingleLineDisplayName }) {\r\n if (!Array.isArray(plan) || plan.length === 0) return null;\r\n\r\n const sortedPlan = [...plan].sort((a, b) => {\r\n const order = { Member: 0, Spouse: 1, Dependent: 2 };\r\n const aPriority =\r\n order[\r\n findSingleLineDisplayName(a?.lineOfCoverage?.displayName || '').trim()\r\n ] ?? 3;\r\n const bPriority =\r\n order[\r\n findSingleLineDisplayName(b?.lineOfCoverage?.displayName || '').trim()\r\n ] ?? 3;\r\n return aPriority - bPriority;\r\n });\r\n\r\n // Calculate overall effective date and premium\r\n const overallEffectiveDate = sortedPlan\r\n .map((coverage) => new Date(coverage?.lineOfCoverage?.effectiveStartDate))\r\n .sort((a, b) => a - b)[0];\r\n const formattedEffectiveDate = overallEffectiveDate\r\n ? formatUTCToShortDate(overallEffectiveDate.toISOString())\r\n : 'N/A';\r\n\r\n const overallTotalPremium = sortedPlan.reduce(\r\n (total, coverage) => total + (coverage?.lineOfCoverage?.premiumAmount || 0),\r\n 0\r\n );\r\n\r\n return (\r\n \r\n {/* Benefit Amount Section */}\r\n \r\n \r\n Benefit Amount\r\n \r\n \r\n {sortedPlan.map((coverage, index) => {\r\n const lineOfCoverage = coverage?.lineOfCoverage || {};\r\n const displayName = findSingleLineDisplayName(\r\n lineOfCoverage?.displayName || 'N/A'\r\n );\r\n const benefitAmount = lineOfCoverage?.benefitAmount\r\n ? `$${lineOfCoverage.benefitAmount.toLocaleString()}`\r\n : 'N/A';\r\n const monthlyCost = lineOfCoverage?.premiumAmount\r\n ? `$${lineOfCoverage.premiumAmount.toFixed(2)}`\r\n : 'N/A';\r\n\r\n return (\r\n \r\n {displayName} \r\n \r\n - {benefitAmount} - {monthlyCost}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n {/* Overall Effective Date and Total Premium */}\r\n \r\n \r\n Effective Date: {formattedEffectiveDate}\r\n \r\n \r\n \r\n ${overallTotalPremium.toFixed(2)}\r\n \r\n \r\n / per month\r\n \r\n \r\n \r\n {/* Future Sprint: Beneficiary Details */}\r\n {/* \r\n );\r\n}\r\n\r\n// Component for Other Plans Details LTD, STD, Cancer, ADD, Accident etc.\r\nfunction OtherPlansDetails({ plan, findSingleLineDisplayName }) {\r\n // Ensure valid data exists\r\n if (!plan || (!plan.lineOfCoverage && !Array.isArray(plan))) return null;\r\n const plans = Array.isArray(plan) ? plan : [plan];\r\n\r\n return (\r\n <>\r\n {plans.map((coverage, index) => (\r\n \r\n {/* Benefit Amount */}\r\n {coverage?.lineOfCoverage?.benefitAmount > 0 && (\r\n \r\n \r\n Benefit Amount\r\n \r\n \r\n {coverage?.lineOfCoverage?.displayName === 'LTD'\r\n ? `$${coverage.lineOfCoverage.benefitAmount.toLocaleString(\r\n undefined,\r\n { minimumFractionDigits: 2, maximumFractionDigits: 2 }\r\n )} monthly`\r\n : coverage?.lineOfCoverage?.displayName === 'STD'\r\n ? `$${coverage.lineOfCoverage.benefitAmount.toLocaleString(\r\n undefined,\r\n { minimumFractionDigits: 2, maximumFractionDigits: 2 }\r\n )} weekly`\r\n : `$${coverage.lineOfCoverage.benefitAmount.toLocaleString(\r\n undefined,\r\n { minimumFractionDigits: 2, maximumFractionDigits: 2 }\r\n )}`}\r\n \r\n \r\n )}\r\n\r\n {/* Elimination Period */}\r\n {coverage?.lineOfCoverage?.eliminationPeriod > 0 && (\r\n \r\n \r\n Elimination Period\r\n \r\n \r\n {coverage.lineOfCoverage.eliminationPeriod}{' '}\r\n {coverage.lineOfCoverage.eliminationPeriodTypeFriendly ||\r\n 'days'}\r\n \r\n \r\n )}\r\n\r\n {/* Benefit Duration */}\r\n {coverage?.lineOfCoverage?.benefitDuration > 0 && (\r\n \r\n \r\n Benefit Duration\r\n \r\n \r\n {coverage.lineOfCoverage.benefitDuration}{' '}\r\n {coverage.lineOfCoverage.benefitDurationTypeFriendly || 'years'}\r\n \r\n \r\n )}\r\n\r\n {/* Offset */}\r\n {coverage?.lineOfCoverage?.benefitOffsets &&\r\n coverage.lineOfCoverage.benefitOffsets.trim() !== '' && (\r\n \r\n \r\n Offset\r\n \r\n \r\n {coverage.lineOfCoverage.benefitOffsets}\r\n \r\n \r\n )}\r\n\r\n {/* Covered Lives */}\r\n {coverage?.lineOfCoverage?.displayName?.includes('LADD') ||\r\n coverage?.lineOfCoverage?.displayName?.includes('CI') ? (\r\n \r\n \r\n Covered Lives\r\n \r\n \r\n {findSingleLineDisplayName(coverage.lineOfCoverage.displayName)}\r\n \r\n \r\n ) : (\r\n coverage?.lineOfCoverage?.personType &&\r\n coverage.lineOfCoverage.personType.trim() &&\r\n coverage.lineOfCoverage.displayName !== 'LTD' &&\r\n coverage.lineOfCoverage.displayName !== 'STD' && (\r\n \r\n \r\n Covered Lives\r\n \r\n \r\n {coverage.lineOfCoverage.personType}\r\n \r\n \r\n )\r\n )}\r\n\r\n {/* Effective Date & Monthly Cost */}\r\n {coverage?.lineOfCoverage?.effectiveStartDate &&\r\n coverage?.lineOfCoverage?.premiumAmount > 0 && (\r\n \r\n \r\n Effective Date:{' '}\r\n {formatUTCToShortDate(\r\n coverage.lineOfCoverage.effectiveStartDate\r\n )}\r\n \r\n \r\n \r\n ${coverage.lineOfCoverage.premiumAmount.toFixed(2)}\r\n \r\n \r\n / per month\r\n \r\n \r\n \r\n )}\r\n \r\n ))}\r\n \r\n );\r\n}\r\n\r\n// Prop Validations\r\nViewAcLine.propTypes = {\r\n plan: PropTypes.shape({\r\n lineOfCoverage: PropTypes.shape({\r\n benefitAmount: PropTypes.number,\r\n benefitOffsets: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n benefitDuration: PropTypes.number,\r\n benefitDurationTypeFriendly: PropTypes.string,\r\n eliminationPeriod: PropTypes.number,\r\n eliminationPeriodTypeFriendly: PropTypes.string,\r\n effectiveStartDate: PropTypes.string,\r\n premiumAmount: PropTypes.number,\r\n personType: PropTypes.string,\r\n }).isRequired,\r\n primaryBeneficiaries: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n percentage: PropTypes.number,\r\n name: PropTypes.string,\r\n relationship: PropTypes.string,\r\n })\r\n ),\r\n contingentBeneficiaries: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n percentage: PropTypes.number,\r\n name: PropTypes.string,\r\n relationship: PropTypes.string,\r\n })\r\n ),\r\n }).isRequired,\r\n onClose: PropTypes.func,\r\n handleModificationTypeChange: PropTypes.func.isRequired,\r\n findSingleLineDisplayName: PropTypes.func.isRequired,\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\n//services\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport {\r\n Box,\r\n FormControl,\r\n InputLabel,\r\n MenuItem,\r\n Select,\r\n Typography,\r\n TextField,\r\n Stack,\r\n} from '@mui/material';\r\n\r\n//Mui icons\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\n\r\n//Our Components\r\n\r\n//utils\r\nimport { formatCurrency } from '../../../../../../../utils';\r\n//shared styles\r\nimport acDrawerSharedStyles from './acDrawerSharedStyles';\r\nimport { max, set } from 'date-fns';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n displayMultipleLinesContainer: {\r\n maxWidth: '454px',\r\n },\r\n};\r\n\r\nexport default function EditMultipleAcLinesSection(props) {\r\n //local state obj to keep track of member, spouse, and dependent selection changes and compare w/ max amounts allowed\r\n const [laddSelections, setLaddSelections] = useState({});\r\n useEffect(() => {\r\n if (props?.multiLinesToEdit?.length > 0) {\r\n //get total premium per line and update with edit changes\r\n let _totalPremium = props?.getTotalPremium(props?.multiLinesToEdit);\r\n //set initial selections and separate by member, spouse, dep\r\n let _sortedLinesObj = props?.multiLinesToEdit?.reduce(\r\n (acc, line) => {\r\n if (line?.lineOfCoverage?.calculatedPlanTypeId === 4) {\r\n acc.member = line;\r\n } else if (line?.lineOfCoverage?.calculatedPlanTypeId === 5) {\r\n acc.spouse = line;\r\n } else if (line?.lineOfCoverage?.calculatedPlanTypeId === 6) {\r\n acc.dependent = line;\r\n }\r\n return acc;\r\n },\r\n { member: {}, spouse: {}, dependent: {} }\r\n );\r\n\r\n //check for lines to auto cancel if benefit amount is 0\r\n let _linesToAutoCancel = props?.multiLinesToEdit.filter((line) => {\r\n return line?.editInfo?.benefitAmount === 0;\r\n });\r\n props?.setLinesToAutoCancel(_linesToAutoCancel);\r\n setLaddSelections(_sortedLinesObj);\r\n props?.setTotalMultiLinePremium(_totalPremium);\r\n }\r\n }, [\r\n props?.multiLinesToEdit?.some((line) => line?.editInfo)?.benefitAmount,\r\n props?.multiLinesToEdit,\r\n ]);\r\n\r\n const optionsPersonTypeDisplayName = (lineDisplayName) => {\r\n let lowerCaseDisplayName = '';\r\n if (lineDisplayName) {\r\n lowerCaseDisplayName = props\r\n ?.findSingleLineDisplayName(lineDisplayName)\r\n ?.toLowerCase();\r\n }\r\n return lowerCaseDisplayName;\r\n };\r\n\r\n // Benefit Amount Change\r\n\r\n const handleBenefitAmountChange = (e, type, acId, optionSelected) => {\r\n //match line on acId and update benefit amount\r\n const updatedLines = props?.multiLinesToEdit.map((line) => {\r\n if (line?.lineOfCoverage?.id === acId) {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n benefitAmount: optionSelected?.coverageAmount,\r\n premiumAmount: optionSelected?.premiumAmount,\r\n isUpdated:\r\n line?.lineOfCoverage?.benefitAmount !==\r\n optionSelected?.coverageAmount\r\n ? true\r\n : false,\r\n },\r\n };\r\n }\r\n return line;\r\n });\r\n props.setMultiLinesToEdit(updatedLines);\r\n };\r\n\r\n ///////////// Spouse and Dependent option max logic ////////////\r\n const [spouseMaxAmount, setSpouseMaxAmount] = useState(0);\r\n const [dependentMaxAmount, setDependentMaxAmount] = useState(0);\r\n\r\n useEffect(() => {\r\n let _updatedLinesArray = [...props?.multiLinesToEdit];\r\n //////////CHECK SPOUSE max amount w/ member benefit changes\r\n if (\r\n props?.multiLinesToEdit[0]?.options?.spouseMaximumAmount &&\r\n props?.multiLinesToEdit[0]?.options?.spousePercentageCap\r\n ) {\r\n //check spouse max amount against member amount AND spouse percentage cap\r\n let _spouseMax;\r\n if (\r\n props?.multiLinesToEdit[0]?.options?.spouseMaximumAmount <=\r\n laddSelections?.member?.editInfo?.benefitAmount *\r\n props?.multiLinesToEdit[0]?.options?.spousePercentageCap\r\n ) {\r\n _spouseMax = props?.multiLinesToEdit[0]?.options?.spouseMaximumAmount;\r\n setSpouseMaxAmount(\r\n props?.multiLinesToEdit[0]?.options?.spouseMaximumAmount\r\n );\r\n } else {\r\n _spouseMax =\r\n laddSelections?.member?.editInfo?.benefitAmount *\r\n props?.multiLinesToEdit[0]?.options?.spousePercentageCap;\r\n setSpouseMaxAmount(_spouseMax);\r\n }\r\n\r\n let _newSpouseSelection;\r\n //IF current spouse selection > new spouse max, find and update spouse w/ new closest spouse option that meets spouse max parameters OR 0 if no options match\r\n if (laddSelections?.spouse?.editInfo?.benefitAmount > _spouseMax) {\r\n _newSpouseSelection =\r\n props?.multiLinesToEdit[0]?.options?.spouseOptions.reduce(\r\n (prevOption, currOption) => {\r\n if (\r\n currOption.coverageAmount <= _spouseMax &&\r\n prevOption.coverageAmount <= _spouseMax\r\n ) {\r\n return prevOption.coverageAmount > currOption.coverageAmount\r\n ? prevOption\r\n : currOption;\r\n }\r\n // Return the previous option if the condition is not met\r\n return prevOption;\r\n },\r\n props?.multiLinesToEdit[0]?.options?.spouseOptions[0]\r\n );\r\n\r\n //update spouse selection\r\n //if doesn't meet spouse max, set spouse to 0\r\n if (_newSpouseSelection?.coverageAmount <= _spouseMax) {\r\n _updatedLinesArray = _updatedLinesArray?.map((line) => {\r\n if (line?.lineOfCoverage?.calculatedPlanTypeId === 5) {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n benefitAmount: _newSpouseSelection?.coverageAmount,\r\n premiumAmount: _newSpouseSelection?.premiumAmount,\r\n isUpdated: true,\r\n },\r\n };\r\n } else return line;\r\n });\r\n } else {\r\n //set spouse to 0 so we can cancel line\r\n _updatedLinesArray = _updatedLinesArray?.map((line) => {\r\n if (line?.lineOfCoverage?.calculatedPlanTypeId === 5) {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n benefitAmount: 0,\r\n premiumAmount: 0,\r\n isUpdated: true,\r\n },\r\n };\r\n } else return line;\r\n });\r\n }\r\n }\r\n }\r\n ////DEPENDENT CHECK\r\n if (\r\n props?.multiLinesToEdit[0]?.options?.dependentMaximumAmount &&\r\n props?.multiLinesToEdit[0]?.options?.dependentPercentageCap\r\n ) {\r\n let _dependentMax;\r\n //check dependent max amount agains member amount AND dependent percentage cap\r\n if (\r\n props?.multiLinesToEdit[0]?.options?.dependentMaximumAmount <=\r\n laddSelections?.member?.editInfo?.benefitAmount *\r\n props?.multiLinesToEdit[0]?.options?.dependentPercentageCap\r\n ) {\r\n _dependentMax =\r\n props?.multiLinesToEdit[0]?.options?.dependentMaximumAmount;\r\n setDependentMaxAmount(_dependentMax);\r\n } else {\r\n _dependentMax =\r\n laddSelections?.member?.editInfo?.benefitAmount *\r\n props?.multiLinesToEdit[0]?.options?.dependentPercentageCap;\r\n setDependentMaxAmount(_dependentMax);\r\n }\r\n\r\n let _newDependentSelection;\r\n //IF current dependent selection > new dependent max, find and update dependent w/ new closest dependent option that meets dependent max parameters\r\n if (laddSelections?.dependent?.editInfo?.benefitAmount > _dependentMax) {\r\n _newDependentSelection =\r\n props?.multiLinesToEdit[0]?.options?.dependentOptions.reduce(\r\n (prevOption, currOption) => {\r\n if (\r\n currOption.coverageAmount <= _dependentMax &&\r\n prevOption.coverageAmount <= _dependentMax\r\n ) {\r\n return prevOption.coverageAmount > currOption.coverageAmount\r\n ? prevOption\r\n : currOption;\r\n }\r\n // Return the previous option if the condition is not met\r\n return prevOption;\r\n },\r\n props?.multiLinesToEdit[0]?.options?.dependentOptions[0]\r\n );\r\n\r\n //update dependent selection\r\n //if doesn't meet dep max requirements, set dep to 0\r\n if (_newDependentSelection?.coverageAmount <= _dependentMax) {\r\n _updatedLinesArray = _updatedLinesArray?.map((line) => {\r\n if (line?.lineOfCoverage?.calculatedPlanTypeId === 6) {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n benefitAmount: _newDependentSelection?.coverageAmount,\r\n premiumAmount: _newDependentSelection?.premiumAmount,\r\n isUpdated: true,\r\n },\r\n };\r\n }\r\n return line;\r\n });\r\n } else {\r\n //set dep to 0 so we can cancel line\r\n _updatedLinesArray = _updatedLinesArray?.map((line) => {\r\n if (line?.lineOfCoverage?.calculatedPlanTypeId === 6) {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n benefitAmount: 0,\r\n premiumAmount: 0,\r\n isUpdated: true,\r\n },\r\n };\r\n } else return line;\r\n });\r\n }\r\n }\r\n }\r\n\r\n props?.setMultiLinesToEdit(_updatedLinesArray);\r\n }, [\r\n laddSelections?.member?.editInfo?.benefitAmount,\r\n props?.multiLinesToEdit[0]?.options?.spouseMaximumAmount,\r\n props?.multiLinesToEdit[0]?.options?.spousePercentageCap,\r\n props?.multiLinesToEdit[0]?.options?.dependentMaximumAmount,\r\n props?.multiLinesToEdit[0]?.options?.dependentPercentageCap,\r\n ]);\r\n\r\n return (\r\n <>\r\n \r\n {props?.multiLinesToEdit?.length > 0\r\n ? props?.multiLinesToEdit\r\n ?.sort((a, b) => {\r\n // Sort by calculatedPlanTypeId to display Member first\r\n return (\r\n a?.lineOfCoverage?.calculatedPlanTypeId -\r\n b?.lineOfCoverage?.calculatedPlanTypeId\r\n );\r\n })\r\n .map((line) => {\r\n let lowerCaseDisplayName = optionsPersonTypeDisplayName(\r\n line?.lineOfCoverage?.displayName\r\n );\r\n return (\r\n \r\n {`${\r\n line?.lineOfCoverage?.displayName\r\n ? props?.findSingleLineDisplayName(\r\n line?.lineOfCoverage?.displayName\r\n )\r\n : ''\r\n } Benefit`} \r\n =\r\n laddSelections?.member?.editInfo?.benefitAmount\r\n }\r\n >\r\n {line?.options?.[`${lowerCaseDisplayName}Options`]?.map(\r\n (option) => {\r\n //member options - greater than 0, and less than or equal to member's current coverage\r\n if (\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 4 &&\r\n // option.coverageAmount > 0 &&\r\n option?.coverageAmount <=\r\n line?.lineOfCoverage?.benefitAmount\r\n ) {\r\n return (\r\n \r\n handleBenefitAmountChange(\r\n e,\r\n `${lowerCaseDisplayName}Options`,\r\n line?.lineOfCoverage?.id,\r\n option\r\n )\r\n }\r\n >\r\n {formatCurrency(option?.coverageAmount || 0)}{' '}\r\n {` (${formatCurrency(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n }\r\n //only show options that are less than or equal to spouse max relative to member election, greater than 0, and less than or equal to member's current coverage\r\n else if (\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 5 &&\r\n option.coverageAmount <= spouseMaxAmount &&\r\n // option.coverageAmount > 0 &&\r\n option?.coverageAmount <=\r\n line?.lineOfCoverage?.benefitAmount\r\n ) {\r\n return (\r\n \r\n handleBenefitAmountChange(\r\n e,\r\n `${lowerCaseDisplayName}Options`,\r\n line?.lineOfCoverage?.id,\r\n option\r\n )\r\n }\r\n >\r\n {formatCurrency(option?.coverageAmount || 0)}{' '}\r\n {` (${formatCurrency(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n }\r\n //only show options that are less than or equal to dependent max relative to member election, greater than 0, and less than or equal to member's current coverage\r\n else if (\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 6 &&\r\n option.coverageAmount <= dependentMaxAmount &&\r\n // option.coverageAmount > 0 &&\r\n option?.coverageAmount <=\r\n line?.lineOfCoverage?.benefitAmount\r\n ) {\r\n return (\r\n \r\n handleBenefitAmountChange(\r\n e,\r\n `${lowerCaseDisplayName}Options`,\r\n line?.lineOfCoverage?.id,\r\n option\r\n )\r\n }\r\n >\r\n {formatCurrency(option?.coverageAmount || 0)}{' '}\r\n {` (${formatCurrency(\r\n option?.premiumAmount || 0\r\n )})`}\r\n \r\n );\r\n }\r\n }\r\n )}\r\n \r\n \r\n );\r\n })\r\n : 'No coverage found'}\r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\n//services\r\nimport activeCoverageService from '../../../../../../../../services/activeCoverage-service';\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport {\r\n Alert,\r\n Box,\r\n Button,\r\n TextField,\r\n Typography,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@mui/material';\r\n\r\n//Mui icons\r\n\r\n//Our Components\r\nimport EditMultipleAcLinesSection from './EditMultipleAcLinesSection';\r\nimport EditCoverageEffectiveDateStepper from '../EditCoverageEffectiveDateStepper';\r\n\r\n//utils\r\nimport {\r\n formatCurrency,\r\n formatUTCToShortDate,\r\n} from '../../../../../../../utils';\r\n\r\n//shared styles\r\nimport acDrawerSharedStyles from './acDrawerSharedStyles';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n offsetRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: '10px 0 0 0 ',\r\n },\r\n offsetLabel: {\r\n fontWeight: 600,\r\n },\r\n offsetDescription: {\r\n margin: '0 0 0 8px',\r\n },\r\n};\r\n\r\nexport default function EditAcLine(props) {\r\n //local state of coverage line(s) selected for cancellation - adding additional property to each line to be able to filter out the lines that are not selected for cancellation in instances where more than one line is displayed\r\n\r\n /////////////// SINGLE LINE EDIT LOGIC //////////////////////////\r\n const [lineToEdit, setLineToEdit] = useState([]);\r\n useEffect(() => {\r\n if (props?.activeCoverageDrawerOpen?.lineSelected?.length > 0) {\r\n //add editInfo object to line selected to track changes\r\n let _updatedLinesSelected =\r\n props?.activeCoverageDrawerOpen?.lineSelected.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n isElected: true,\r\n planOptionId: line?.lineOfCoverage?.planOptionId,\r\n benefitAmount: line?.lineOfCoverage?.benefitAmount,\r\n premiumAmount: line?.lineOfCoverage?.premiumAmount,\r\n isUpdated: false,\r\n benefitDuration: line?.lineOfCoverage?.benefitDuration,\r\n eliminationPeriod: line?.lineOfCoverage?.eliminationPeriod,\r\n personTypeId: line?.lineOfCoverage?.personTypeId,\r\n activeCoverageId: line?.lineOfCoverage?.id,\r\n },\r\n };\r\n });\r\n setLineToEdit(_updatedLinesSelected);\r\n }\r\n }, [props?.activeCoverageDrawerOpen?.lineSelected]);\r\n\r\n //handle edit general coverage info\r\n const handleEditCoverageInfo = (e, type) => {\r\n let planOptionId = e.target.value;\r\n let selectedMatchingOption = lineToEdit[0]?.options?.options.find(\r\n (option) => option.memberOptionId == planOptionId\r\n );\r\n //update state\r\n let _updatedCoverage = lineToEdit.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n planOptionId: planOptionId,\r\n benefitAmount: selectedMatchingOption?.benefitAmount,\r\n premiumAmount: selectedMatchingOption?.memberPremiumAmount,\r\n isUpdated: true,\r\n benefitDuration: selectedMatchingOption?.benefitDuration,\r\n eliminationPeriod: selectedMatchingOption?.eliminationPeriod,\r\n personTypeId: selectedMatchingOption?.personTypeId,\r\n },\r\n };\r\n });\r\n setLineToEdit(_updatedCoverage);\r\n };\r\n\r\n //update edit date - commented out for now as we are only allowing edits to go into effect at the start of the next month\r\n const handleEditDateChange = (e) => {\r\n let date = e.target.value;\r\n props?.setActiveCoverageDrawerOpen((prevState) => ({\r\n ...prevState,\r\n dateOfEdit: date,\r\n }));\r\n };\r\n\r\n const checkIfLineIsAccAddCanOrHosp = () => {\r\n let _isAccAddCanOrHosp = false;\r\n lineToEdit?.forEach((line) => {\r\n if (\r\n line?.lineOfCoverage?.calculatedPlanTypeId &&\r\n (line?.lineOfCoverage?.calculatedPlanTypeId === 3 ||\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 7 ||\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 8 ||\r\n line?.lineOfCoverage?.calculatedPlanTypeId === 9)\r\n ) {\r\n _isAccAddCanOrHosp = true;\r\n }\r\n });\r\n setIsAccAddCanOrHosp(_isAccAddCanOrHosp);\r\n };\r\n\r\n const [isAccAddCanOrHosp, setIsAccAddCanOrHosp] = useState(false);\r\n\r\n useEffect(() => {\r\n if (lineToEdit?.length > 0) checkIfLineIsAccAddCanOrHosp();\r\n }, [lineToEdit[0]?.lineOfCoverage?.calculatedPlanTypeId]);\r\n\r\n //// ELIMINATION PERIOD & BENEFIT DURATION EDIT LOGIC - some plans will have more than one option for these /////\r\n\r\n const [eliminationPeriodTypes, setEliminationPeriodTypes] = useState([]);\r\n const [benefitDurTypes, setBenefitDurTypes] = useState([]);\r\n //selected elimination period\r\n const [selectedEliminationPeriod, setSelectedEliminationPeriod] =\r\n useState(null);\r\n // selected benefit duration\r\n const [selectedBenefitDuration, setSelectedBenefitDuration] = useState();\r\n\r\n //get only unique values of elimination period from member options excluding duplicates and 0\r\n const getUniqueEliminationPeriodList = () => {\r\n let elimPeriodInfo = [];\r\n for (let option of lineToEdit[0]?.options?.options) {\r\n if (option?.eliminationPeriod && option?.eliminationPeriod > 0) {\r\n let object = {\r\n eliminationPeriod: option.eliminationPeriod,\r\n type: option.eliminationPeriodType,\r\n typeId: option.eliminationPeriodTypeId,\r\n };\r\n elimPeriodInfo.push(object);\r\n }\r\n }\r\n\r\n let uniqueElimPeriodArr = [\r\n ...new Set(elimPeriodInfo.map((obj) => obj.eliminationPeriod)),\r\n ];\r\n\r\n let uniqueElimPeriodOptions = uniqueElimPeriodArr.map(\r\n (eliminationPeriod) => {\r\n return elimPeriodInfo.find(\r\n (obj) => obj.eliminationPeriod === eliminationPeriod\r\n );\r\n }\r\n );\r\n\r\n setEliminationPeriodTypes(uniqueElimPeriodOptions);\r\n setSelectedEliminationPeriod(uniqueElimPeriodOptions[0]?.eliminationPeriod);\r\n };\r\n\r\n // get only unique values of benefit duration from member options excluding duplicates and 0\r\n const getUniqueBenefitDurationList = () => {\r\n let benefitDurationInfo = [];\r\n\r\n for (let option of lineToEdit[0]?.options?.options) {\r\n if (option?.benefitDuration > 0) {\r\n let object = {\r\n duration: option.benefitDuration,\r\n type: option.benefitDurationType,\r\n typeId: option.benefitDurationTypeId,\r\n };\r\n benefitDurationInfo.push(object);\r\n }\r\n }\r\n\r\n let uniqueBenefitDurList = [\r\n ...new Set(benefitDurationInfo.map((obj) => obj.duration)),\r\n ];\r\n\r\n let uniqueBenefitDurOptions = uniqueBenefitDurList.map((duration) => {\r\n return benefitDurationInfo.find((obj) => obj.duration === duration);\r\n });\r\n\r\n //set member benefit duration options off of unique options only\r\n setBenefitDurTypes(uniqueBenefitDurOptions);\r\n };\r\n\r\n //only get benefit duration and elimination period options if non-ladd or ci plan\r\n useEffect(() => {\r\n if (\r\n lineToEdit[0]?.options?.options &&\r\n !lineToEdit[0]?.lineOfCoverage?.displayName?.includes('LADD' || 'CI')\r\n ) {\r\n getUniqueEliminationPeriodList();\r\n getUniqueBenefitDurationList();\r\n }\r\n }, [lineToEdit[0]?.options]);\r\n\r\n // //EDIT benefit duration or elimination period for incremental plans\r\n\r\n const handleEditBenefitDuration = (e) => {\r\n let value = e.target.value;\r\n let selectedMatchingOption = lineToEdit[0]?.options?.options.find(\r\n (option) => option.benefitDuration == value\r\n );\r\n if (selectedMatchingOption) {\r\n let _updatedCoverage = lineToEdit?.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n planOptionId: selectedMatchingOption.memberOptionId,\r\n benefitAmount: selectedMatchingOption.benefitAmount,\r\n premiumAmount: selectedMatchingOption.memberPremiumAmount,\r\n isUpdated: true,\r\n benefitDuration: value,\r\n eliminationPeriod: selectedMatchingOption.eliminationPeriod,\r\n personTypeId: selectedMatchingOption.personTypeId,\r\n },\r\n };\r\n });\r\n setLineToEdit(_updatedCoverage);\r\n }\r\n };\r\n\r\n const handleEditEliminationPeriod = (e) => {\r\n let value = e.target.value;\r\n let selectedMatchingOption = lineToEdit[0]?.options?.options.find(\r\n (option) => option.eliminationPeriod == value\r\n );\r\n let _updatedCoverage = lineToEdit.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n planOptionId: selectedMatchingOption.memberOptionId,\r\n benefitAmount: selectedMatchingOption.benefitAmount,\r\n premiumAmount: selectedMatchingOption.memberPremiumAmount,\r\n isUpdated: true,\r\n benefitDuration: selectedMatchingOption.eliminationPeriod,\r\n eliminationPeriod: value,\r\n personTypeId: selectedMatchingOption.personTypeId,\r\n },\r\n };\r\n });\r\n setLineToEdit(_updatedCoverage);\r\n };\r\n\r\n const getCoveredLivesAdditionalInfo = (planOptionId) => {\r\n let memberIsSelected;\r\n let memberAndSpouseIsSelected;\r\n let memberAndDependentsIsSelected;\r\n let familyIsSelected;\r\n let _selectedOption;\r\n\r\n for (let option of lineToEdit[0]?.options?.options) {\r\n if (option?.memberOptionId == planOptionId) {\r\n memberIsSelected = true;\r\n }\r\n if (option?.memberAndSpouseOptionId == planOptionId)\r\n memberAndSpouseIsSelected = true;\r\n if (option?.memberAndDependentsOptionId == planOptionId)\r\n memberAndDependentsIsSelected = true;\r\n if (option?.familyOptionId == planOptionId) familyIsSelected = true;\r\n //find selected option from true statement(s) above and set - should only be a single option selected\r\n if (\r\n memberIsSelected ||\r\n memberAndSpouseIsSelected ||\r\n memberAndDependentsIsSelected ||\r\n familyIsSelected\r\n ) {\r\n _selectedOption = option;\r\n break;\r\n }\r\n }\r\n // console.log('selected option', _selectedOption);\r\n\r\n let premiumAmount = 0;\r\n let _personTypeId = 0;\r\n if (memberIsSelected) {\r\n premiumAmount = _selectedOption?.memberPremiumAmount;\r\n _personTypeId = 0;\r\n } else if (memberAndSpouseIsSelected) {\r\n premiumAmount = _selectedOption?.memberAndSpousePremiumAmount;\r\n _personTypeId = 1;\r\n } else if (memberAndDependentsIsSelected) {\r\n premiumAmount = _selectedOption?.memberAndDependentsPremiumAmount;\r\n _personTypeId = 2;\r\n } else if (familyIsSelected) {\r\n premiumAmount = _selectedOption?.familyPremiumAmount;\r\n _personTypeId = 3;\r\n }\r\n\r\n //return object with updated personType and premium amount\r\n let _personTypeMatch = {\r\n premiumAmount: premiumAmount,\r\n personTypeId: _personTypeId,\r\n option: _selectedOption,\r\n };\r\n return _personTypeMatch;\r\n };\r\n\r\n //Edit local state value of plan\r\n let handleCoveredLivesChange = (e, personType) => {\r\n let planOptionId = e.target.value;\r\n\r\n //returns object of new personTypeId and premium amount\r\n let _updatedPersonTypeAndPremium =\r\n getCoveredLivesAdditionalInfo(planOptionId);\r\n //find corresponding personTypeId\r\n //update state\r\n let _updatedCoverage = lineToEdit.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n ...line.editInfo,\r\n planOptionId: planOptionId,\r\n benefitAmount: _updatedPersonTypeAndPremium.option?.benefitAmount,\r\n premiumAmount: _updatedPersonTypeAndPremium.premiumAmount,\r\n isUpdated: true,\r\n personTypeId: _updatedPersonTypeAndPremium.personTypeId,\r\n },\r\n };\r\n });\r\n console.log('updated coverage', _updatedCoverage);\r\n setLineToEdit(_updatedCoverage);\r\n };\r\n\r\n //Update coverage info in db for single line\r\n const updateSingleLine = async () => {\r\n props?.setLoading(true);\r\n let editedLineObj = lineToEdit[0]?.editInfo;\r\n //build copy of plan object to send w/ new benefit amount, planOptionId, personTypeId, premium amount\r\n //update accident, add, cancer, hospital plans premium amount and personTypeId conditionally\r\n let _updatedLineObj = {\r\n ...lineToEdit[0]?.lineOfCoverage,\r\n planOptionId: editedLineObj?.planOptionId,\r\n benefitAmount: editedLineObj?.benefitAmount,\r\n premiumAmount: editedLineObj?.premiumAmount,\r\n benefitDuration: editedLineObj?.benefitDuration,\r\n eliminationPeriod: editedLineObj?.eliminationPeriod,\r\n personTypeId: editedLineObj?.personTypeId,\r\n };\r\n\r\n //update line of coverage in db if benefit amount > 0 OR plan is a acc, add, can, or hosp plan (these have benefit amount=0 BUT need to check premium amount to determine if decline option selected), else oopen cancel coverage drawer\r\n if (\r\n _updatedLineObj.benefitAmount > 0 ||\r\n (isAccAddCanOrHosp && _updatedLineObj.premiumAmount > 0)\r\n ) {\r\n let response;\r\n try {\r\n response = await activeCoverageService.updateActiveCoverageForMember(\r\n _updatedLineObj,\r\n props?.activeCoverageDrawerOpen?.dateOfEdit\r\n );\r\n } catch (error) {\r\n console.error('error updating plan', error);\r\n }\r\n //refresh active coverages and payments\r\n if (response) {\r\n await props?.getActiveCoverage(lineToEdit[0]?.lineOfCoverage?.memberId);\r\n await props?.getPaymentSchedule();\r\n props?.handleModificationTypeChange('view'); //exit EDIT section and return to view section\r\n }\r\n }\r\n props?.setLoading(false);\r\n };\r\n\r\n /////////////////////////// MULTIPLE lines of coverage per type of coverage (LADD and CI ) data //////////////////////////\r\n const [multiLinesToEdit, setMultiLinesToEdit] = useState([]);\r\n const [linesToAutoCancel, setLinesToAutoCancel] = useState([]);\r\n const [totalMultiLinePremium, setTotalMultiLinePremium] = useState(0);\r\n useEffect(() => {\r\n if (\r\n props?.activeCoverageDrawerOpen?.lineSelected?.length > 0 &&\r\n props?.activeCoverageDrawerOpen?.lineSelected?.length > 0 &&\r\n props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD' || 'CI'\r\n )\r\n ) {\r\n let _updatedLinesSelected =\r\n props?.activeCoverageDrawerOpen?.lineSelected.map((line) => {\r\n return {\r\n ...line,\r\n editInfo: {\r\n isElected: true,\r\n benefitAmount: line?.lineOfCoverage?.benefitAmount,\r\n premiumAmount: line?.lineOfCoverage?.premiumAmount,\r\n isUpdated: false,\r\n personTypeId: line?.lineOfCoverage?.personTypeId,\r\n activeCoverageId: line?.lineOfCoverage?.id,\r\n benefitOffsets: line?.lineOfCoverage?.benefitOffsets,\r\n //for ci, may need to add more fields\r\n },\r\n };\r\n });\r\n\r\n //SET LADD SELECTIONS\r\n setMultiLinesToEdit(_updatedLinesSelected);\r\n\r\n //get total premium amount for combined lines\r\n let total = getTotalPremium(_updatedLinesSelected);\r\n setTotalMultiLinePremium(total);\r\n }\r\n }, [props?.activeCoverageDrawerOpen?.lineSelected]);\r\n\r\n //get total premium amount for multiple lines array\r\n const getTotalPremium = (lineOfCoverageArray) => {\r\n if (!lineOfCoverageArray) return 0;\r\n let total = 0;\r\n lineOfCoverageArray?.forEach((line) => {\r\n if (line?.editInfo?.premiumAmount > 0) {\r\n total += line?.editInfo?.premiumAmount;\r\n }\r\n });\r\n return total;\r\n };\r\n\r\n //UPDATE BENEFIT AMOUNTS IN DB\r\n const updateMultipleLines = async () => {\r\n props?.setLoading(true);\r\n\r\n let updateCount = 0; // Counter to track how many updates have completed\r\n const totalLines = multiLinesToEdit.length; \r\n\r\n for (let line of multiLinesToEdit) {\r\n try {\r\n if (\r\n (line?.editInfo?.isUpdated ||\r\n (line?.lineOfCoverage?.futureActiveCoverageId > 0 &&\r\n line?.lineOfCoverage?.futurePremiumAmount !==\r\n line?.lineOfCoverage?.premiumAmount)) &&\r\n line?.editInfo?.premiumAmount > 0\r\n ) {\r\n let _updatedLine = {\r\n ...line?.lineOfCoverage,\r\n benefitAmount: line?.editInfo?.benefitAmount,\r\n premiumAmount: line?.editInfo?.premiumAmount,\r\n };\r\n\r\n\r\n await activeCoverageService.updateActiveCoverageForMember(\r\n _updatedLine,\r\n props?.activeCoverageDrawerOpen?.dateOfEdit\r\n );\r\n } else if (\r\n line?.editInfo?.isUpdated &&\r\n line?.editInfo?.premiumAmount === 0\r\n ) {\r\n await activeCoverageService.cancelActiveCoverageForMember(\r\n line?.lineOfCoverage?.id,\r\n props?.reasonForCancelation,\r\n props?.dateOfCancelation\r\n );\r\n }\r\n } catch (error) {\r\n console.error('Error updating/canceling line of coverage', error);\r\n }\r\n\r\n updateCount++; \r\n\r\n // If all updates are complete, refresh\r\n if (updateCount === totalLines) {\r\n setTimeout(() => {\r\n props?.setLoading(false);\r\n props?.getActiveCoverage(\r\n props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.memberId\r\n );\r\n props?.getPaymentSchedule();\r\n props?.handleModificationTypeChange('view'); // Exit EDIT section and return to view section\r\n }, 2000);\r\n }\r\n }\r\n };\r\n\r\n /////SUBMIT EDIT to DB\r\n const submitEdit = () => {\r\n //check if ladd/CI or other plan type\r\n if (\r\n props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD' || 'CI'\r\n )\r\n ) {\r\n updateMultipleLines();\r\n } else {\r\n updateSingleLine();\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n Edit Coverage \r\n\r\n \r\n \r\n {/* Benefit Amount*/}\r\n {/* input for benefit amount for non hospital, cancer, accident, and add plans */}\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.benefitAmount > 0 &&\r\n !isAccAddCanOrHosp && (\r\n <>\r\n {' '}\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD' || 'CI'\r\n ) ? (\r\n \r\n Benefit Amount \r\n handleEditCoverageInfo(e)}\r\n >\r\n {lineToEdit[0]?.options?.options &&\r\n lineToEdit[0]?.options?.options?.map((option) => {\r\n if (\r\n option?.benefitDuration ==\r\n lineToEdit[0]?.editInfo?.benefitDuration &&\r\n option?.eliminationPeriod ==\r\n lineToEdit[0]?.editInfo?.eliminationPeriod &&\r\n !option.isDecline\r\n //commenting out temporarily - need direction - do we want to prevent agents from increasing benefit amount?\r\n // &&\r\n // option?.benefitAmount <=\r\n // lineToEdit[0]?.lineOfCoverage?.benefitAmount //don't allow selection over current benefit amount\r\n ) {\r\n return (\r\n \r\n {formatCurrency(option?.benefitAmount || 0)}{' '}\r\n {option?.benefitTypeFriendly?.toLowerCase() !==\r\n 'fixed'\r\n ? option?.benefitTypeFriendly\r\n : ''}\r\n {option?.memberPremiumAmount\r\n ? ` (${formatCurrency(\r\n option?.memberPremiumAmount\r\n )})`\r\n : ''}\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n )}\r\n \r\n )}\r\n {/* Benefit-Amount view for add, accident, cancer, and hospital plans*/}\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.benefitAmount > 0 &&\r\n isAccAddCanOrHosp && (\r\n \r\n Benefit Amount \r\n \r\n handleEditCoverageInfo(e, 'nonIncremental')\r\n }\r\n >\r\n {lineToEdit[0]?.options?.options?.length > 0 &&\r\n lineToEdit[0]?.options?.options\r\n ?.sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option) => {\r\n if (!option.isDecline) {\r\n let itemList = [];\r\n if (option.memberPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n }\r\n })}\r\n \r\n \r\n )}\r\n\r\n {/* Benefit Duration*/}\r\n {lineToEdit[0]?.lineOfCoverage?.benefitDuration &&\r\n benefitDurTypes?.length > 0 ? (\r\n \r\n Benefit Duration \r\n handleEditBenefitDuration(e)}\r\n >\r\n {benefitDurTypes &&\r\n benefitDurTypes?.map((option) => {\r\n return (\r\n \r\n {option.duration} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Elimination Period*/}\r\n {lineToEdit[0]?.lineOfCoverage?.eliminationPeriod &&\r\n eliminationPeriodTypes?.length > 0 ? ( //multiple elim periods\r\n \r\n \r\n Elimination Period\r\n \r\n handleEditEliminationPeriod(e)}\r\n >\r\n {eliminationPeriodTypes &&\r\n eliminationPeriodTypes.map((option) => {\r\n return (\r\n \r\n {option.eliminationPeriod} {option.type}\r\n \r\n );\r\n })}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Covered Lives - show for accident, add, hospital, and cancer plans */}\r\n {isAccAddCanOrHosp && (\r\n \r\n Covered Lives \r\n handleCoveredLivesChange(e)}\r\n >\r\n {lineToEdit[0]?.options?.options?.length > 0 &&\r\n lineToEdit[0]?.options?.options\r\n ?.sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option) => {\r\n if (!option.isDecline) {\r\n let itemList = [];\r\n if (option.memberPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n {formatCurrency(\r\n option?.memberPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndSpousePremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Spouse{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n {formatCurrency(\r\n option?.memberAndSpousePremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.memberAndDependentsPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Member and Dependent{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n {formatCurrency(\r\n option?.memberAndDependentsPremiumAmount || 0\r\n )}\r\n \r\n );\r\n if (option.familyPremiumAmount > 0)\r\n itemList.push(\r\n \r\n Family{' '}\r\n {option?.explanationOfBenefits ===\r\n 'AD&D Coverage'\r\n ? ` (${option?.name}) `\r\n : ''}\r\n {formatCurrency(\r\n option?.familyPremiumAmount || 0\r\n )}\r\n \r\n );\r\n return itemList.map((item) => item);\r\n }\r\n })}\r\n \r\n \r\n )}\r\n {/* Changes Effective selector */}\r\n handleEditDateChange(e)}\r\n InputLabelProps={{ shrink: true }}\r\n >\r\n {props?.editCoverageDateSelectOptions?.length > 0 &&\r\n props?.editCoverageDateSelectOptions?.map((date) => {\r\n return (\r\n \r\n {`${date.name} (${date.displayDate})`}\r\n \r\n );\r\n })}\r\n \r\n\r\n {/* Benefit Offset*/}\r\n {lineToEdit[0]?.lineOfCoverage?.benefitOffsets &&\r\n lineToEdit[0]?.lineOfCoverage?.benefitOffsets !== '' &&\r\n lineToEdit[0]?.lineOfCoverage?.benefitOffsets !== '.' ? (\r\n \r\n \r\n Offset:\r\n \r\n \r\n {lineToEdit[0]?.lineOfCoverage?.benefitOffsets}\r\n \r\n \r\n ) : null}\r\n\r\n {/* Premium priceContainer */}\r\n \r\n \r\n $\r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD' || 'CI'\r\n )\r\n ? totalMultiLinePremium.toFixed(2)\r\n : lineToEdit[0]?.editInfo?.premiumAmount?.toFixed(2)}\r\n \r\n \r\n / per month\r\n \r\n \r\n \r\n\r\n {/* Buttons */}\r\n \r\n props?.handleModificationTypeChange('view') //exit EDIT section and return to view section\r\n }\r\n >\r\n CANCEL\r\n \r\n \r\n SAVE CHANGES\r\n \r\n \r\n {linesToAutoCancel?.length > 0 && (\r\n \r\n \r\n \r\n {`Due to lowering member coverage, ${\r\n linesToAutoCancel?.length > 1 ? 'these lines' : 'this line'\r\n } will be automatically cancelled:` ||\r\n ''}\r\n \r\n \r\n {linesToAutoCancel?.length > 0 &&\r\n linesToAutoCancel?.map((line) => {\r\n return (\r\n \r\n -{' '}\r\n {props?.findSingleLineDisplayName(\r\n line?.lineOfCoverage?.displayName\r\n )}{' '}\r\n coverage\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n//services\r\nimport enrollmentService from '../../../../../../../services/enrollment-service';\r\nimport activeCoverageService from '../../../../../../../services/activeCoverage-service';\r\n\r\n// Assets\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport TextField from '@mui/material/TextField';\r\nimport Select from '@mui/material/Select';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Alert, Box, Typography, Checkbox } from '@mui/material';\r\n\r\n//Mui icons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\n\r\n//Our Components\r\nimport InfinityLoader from '../../../../../../UH-loading-animation/InfinityLoader';\r\nimport ViewAcLine from './active-coverage-drawer-components/ViewAcLine';\r\nimport EditAcLine from './active-coverage-drawer-components/EditAcLine';\r\nimport CancelAcLine from './active-coverage-drawer-components/CancelAcLine';\r\n\r\n//utils\r\nimport { formatUTCToShortDate } from '../../../../../../utils';\r\n\r\n//shared styles\r\nimport acDrawerSharedStyles from './active-coverage-drawer-components/acDrawerSharedStyles';\r\nimport activeCoverageStyles from './activeCoverage-summary-plans/activeCoverageStyles';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n componentBody: {\r\n fontFamily: 'Poppins',\r\n minWidth: '538px',\r\n height: '100%',\r\n backgroundColor: 'background.default',\r\n overflowY: 'auto',\r\n },\r\n headerContainer: {\r\n width: '100%',\r\n padding: '10px 16px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '0 auto',\r\n borderBottom: '1px solid',\r\n borderColor: 'primary.main',\r\n },\r\n drawerTitle: {\r\n color: 'text.primary',\r\n },\r\n policyDetails: {\r\n fontFamily: 'Archivo',\r\n fontSize: '13px!important',\r\n fontWeight: 400,\r\n color: 'text.secondary',\r\n lineHeight: '20px',\r\n },\r\n description: {\r\n color: 'text.primary',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n fontWeight: '500',\r\n padding: '10px 16px 10px 20px',\r\n },\r\n closeDrawerButton: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n buttonContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n },\r\n};\r\nexport default function ActiveCoverageDrawer(props) {\r\n const [error, setError] = useState(false);\r\n const [loading, setLoading] = useState(false);\r\n const [modificationType, setModificationType] = useState({\r\n view: true,\r\n edit: false,\r\n cancel: false, // switch this view will be default true\r\n });\r\n\r\n useEffect(() => {\r\n //default open to cancel when drawer opens - doing this for ladd cancel as first logic added to drawer\r\n if (props?.activeCoverageDrawerOpen?.open) {\r\n setModificationType({\r\n ...modificationType,\r\n view: true,\r\n edit: false,\r\n cancel: false,\r\n });\r\n }\r\n }, [props?.activeCoverageDrawerOpen?.open]);\r\n\r\n const handleModificationTypeChange = (type) => {\r\n setModificationType((prevState) => {\r\n // Reset all keys to false, then set the specified key to true\r\n const updatedState = Object.keys(prevState).reduce((acc, key) => {\r\n acc[key] = key === type;\r\n return acc;\r\n }, {});\r\n return updatedState;\r\n });\r\n };\r\n\r\n const titleDisplayName = (displayName) => {\r\n let upperCaseDisplay = displayName?.toUpperCase() || '';\r\n let name = upperCaseDisplay;\r\n switch (upperCaseDisplay) {\r\n case 'LADD':\r\n case 'LADD-S':\r\n case 'LADD-D':\r\n name = 'Life and AD&D';\r\n break;\r\n case 'STD':\r\n name = 'Short-Term Disability';\r\n break;\r\n case 'LTD':\r\n name = 'Long-Term Disability';\r\n break;\r\n case 'ACCIDENT':\r\n name = 'Accident';\r\n break;\r\n case 'CANCER':\r\n name = 'Cancer';\r\n break;\r\n //ADD AND CI - to be added if needed\r\n default:\r\n return name;\r\n }\r\n return name;\r\n };\r\n\r\n const findSingleLineDisplayName = (displayName) => {\r\n let upperCaseDisplay = displayName?.toUpperCase() || '';\r\n let name = upperCaseDisplay;\r\n switch (upperCaseDisplay) {\r\n case 'LADD':\r\n name = 'Member';\r\n break;\r\n case 'LADD-S':\r\n name = 'Spouse';\r\n break;\r\n case 'LADD-D':\r\n name = 'Dependent';\r\n break;\r\n default:\r\n return name;\r\n }\r\n return name;\r\n };\r\n\r\n const renderEffectiveDateList = (lineSelected) => {\r\n if (lineSelected?.length > 1) {\r\n //ladd or ci\r\n let builtListDisplay = lineSelected?.map((coverage) => {\r\n let displayName = coverage?.lineOfCoverage?.displayName\r\n ? findSingleLineDisplayName(coverage?.lineOfCoverage?.displayName)\r\n : '';\r\n return (\r\n \r\n {`${displayName} Effective Date: ${\r\n coverage?.lineOfCoverage?.effectiveStartDate\r\n ? formatUTCToShortDate(\r\n coverage?.lineOfCoverage?.effectiveStartDate\r\n )\r\n : ''\r\n }`}\r\n \r\n );\r\n });\r\n return builtListDisplay;\r\n } else {\r\n return (\r\n \r\n Effective Date:{' '}\r\n {lineSelected[0]?.lineOfCoverage?.effectiveStartDate\r\n ? formatUTCToShortDate(\r\n lineSelected[0]?.lineOfCoverage?.effectiveStartDate\r\n )\r\n : ''}\r\n \r\n );\r\n }\r\n };\r\n\r\n //Drawer Logic\r\n const handleCloseDrawer = () => {\r\n props?.setActiveCoverageDrawerOpen((prevState) => {\r\n return {\r\n ...prevState,\r\n open: false,\r\n lineSelected: [],\r\n };\r\n });\r\n props?.setReasonForCancelation('');\r\n //reset initial view state of drawer\r\n setModificationType({\r\n view: false,\r\n edit: false,\r\n cancel: true,\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {loading && (\r\n <>\r\n \r\n \r\n \r\n {props?.activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage\r\n ?.displayName\r\n ? titleDisplayName(\r\n props?.activeCoverageDrawerOpen?.lineSelected[0]\r\n ?.lineOfCoverage?.displayName\r\n )\r\n : 'Active Coverage'}\r\n \r\n \r\n \r\n \r\n {/* View Coverage Info Section */}\r\n {modificationType?.view && (\r\n \r\n \r\n )}\r\n {/* Edit Coverage Info Section */}\r\n {modificationType?.edit && (\r\n \r\n \r\n )}\r\n {/* Cancel Coverage Info Section */}\r\n {modificationType?.cancel && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { format, differenceInCalendarYears, set } from 'date-fns';\r\n\r\n//Assets\r\nimport FallbackLogo from '../../../../../../../assets/images/SourceFileonly icon.png';\r\nimport airLogo from '../../../../../../../assets/images/TeamstersAirLogo.png';\r\n\r\n//Services\r\nimport planService from '../../../../../../../services/plan-service';\r\nimport enrollmentService from '../../../../../../../services/enrollment-service';\r\nimport activeCoverageService from '../../../../../../../services/activeCoverage-service';\r\nimport optionService from '../../../../../../../services/optionService';\r\n\r\n//Mui icons\r\nimport EventIcon from '@mui/icons-material/Event';\r\n// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport FlightIcon from '@mui/icons-material/Flight';\r\n\r\n//Mui Components\r\nimport Chip from '@mui/material/Chip';\r\nimport Fade from '@mui/material/Fade';\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box } from '@mui/system';\r\nimport Button from '@mui/material/Button';\r\nimport ButtonGroup from '@mui/material/ButtonGroup';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport { Collapse } from '@mui/material';\r\nimport Skeleton from '@mui/material/Skeleton';\r\nimport Alert from '@mui/material/Alert';\r\nimport Divider from '@mui/material/Divider';\r\nimport Tooltip from '@mui/material/Tooltip';\r\n\r\n//Our Components\r\nimport ActiveLineOfCoverage from './activeCoverage-summary-plans/ActiveLineOfCoverage';\r\nimport ActiveLineOfCoverageLadd from './activeCoverage-summary-plans/ActiveLineOfCoverageLadd';\r\nimport CancelCoverageDrawer from './CancelCoverageDrawer';\r\nimport ReinstateCoverageDrawer from './ReinstateCoverageDrawer';\r\nimport ActiveCoverageDrawer from './ActiveCoverageDrawer';\r\n\r\n//Our active coverage global styles\r\nimport activeCoverageStyles from './activeCoverage-summary-plans/activeCoverageStyles';\r\n\r\n//utils\r\nimport {\r\n getPersonTypeFromId,\r\n isAirPlan,\r\n formatDateObjMMDDYYYYDisplay,\r\n formatDateObjYYYYMMDD,\r\n todayDateObj,\r\n todayDateShort,\r\n day,\r\n month,\r\n year,\r\n firstDayOfCurrentMonth,\r\n lastDayOfCurrentMonth,\r\n firstDayOfNextMonth,\r\n lastDayOfPreviousMonth,\r\n} from '../../../../../../utils';\r\n//component styles\r\nconst componentStyles = {\r\n menuOptions: {\r\n color: 'text.primary',\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n fontSize: '14px',\r\n lineHeight: '24px',\r\n height: '48px',\r\n '&:hover': { backgroundColor: 'primary.light' },\r\n },\r\n collapsedPlanSection: {\r\n minHeight: '119px',\r\n padding: '8px 18px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n // border: '1px solid blue'\r\n },\r\n collapsedPlanInfoContainer: {\r\n padding: '20px 0px 5px 15px',\r\n flex: 4,\r\n // border: \"1px solid red\",\r\n },\r\n planTitlAndMenuRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: '10px',\r\n justifyContent: 'space-between',\r\n },\r\n planImageContainer: {\r\n marginTop: '20px',\r\n textAlign: 'center',\r\n maxWidth: '120px',\r\n },\r\n planMenuContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n textAlign: 'end',\r\n },\r\n collapsedLineOfCoverageContainer: {\r\n paddingBottom: '4px',\r\n width: '100%',\r\n // border: '1px solid green'\r\n },\r\n planNameAndDateRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n },\r\n planNameAndDate: {\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n fontWeight: 500,\r\n lineHeight: '22px',\r\n letterSpacing: '.1px',\r\n color: 'text.gray',\r\n marginLeft: '6px',\r\n },\r\n policyNumberText: {\r\n fontFamily: 'Archivo',\r\n fontSize: '16px',\r\n fontWeight: 400,\r\n lineHeight: '28px',\r\n letterSpacing: '.15px',\r\n color: 'text.gray',\r\n },\r\n dividerStyle: {\r\n color: 'text.secondary',\r\n height: '1px',\r\n },\r\n};\r\nexport default function PlanSummaryCard(props) {\r\n let UsdFormatterDec = new Intl.NumberFormat('en-US', {\r\n style: 'currency',\r\n currency: 'USD',\r\n minimumFractionDigits: 2,\r\n });\r\n let formatDate = props?.formatDate;\r\n\r\n //get plan info from enrollmetn Id to show options for editing individual lines of coverage\r\n const [planInfo, setPlanInfo] = useState(null);\r\n\r\n const getPlanOptionsInfo = async () => {\r\n let planInfo;\r\n try {\r\n planInfo = await enrollmentService.getEnrollmentById(\r\n props?.currentActiveCoverage.enrollmentId\r\n );\r\n if (planInfo) {\r\n setPlanInfo(planInfo);\r\n } else {\r\n setPlanInfo(props?.currentActiveCoverage);\r\n }\r\n } catch (error) {\r\n console.error(\r\n `Error grabbing enrollment ${props?.currentActiveCoverage.enrollmentId}`,\r\n error\r\n );\r\n setPlanInfo(props?.currentActiveCoverage);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props?.currentActiveCoverage && !planInfo) {\r\n getPlanOptionsInfo();\r\n }\r\n }, [props?.currentActiveCoverage?.linesOfCoverage?.length]);\r\n\r\n const months = [\r\n 'January',\r\n 'February',\r\n 'March',\r\n 'April',\r\n 'May',\r\n 'June',\r\n 'July',\r\n 'August',\r\n 'September',\r\n 'October',\r\n 'November',\r\n 'December',\r\n ];\r\n\r\n const formatEffective = (date) => {\r\n // let fullDate = new Date(props?.enrollmentResults?.coverageEffectiveDate);\r\n let sliceDate = date.slice(0, 10);\r\n let thisYear = Number(sliceDate.slice(0, 4));\r\n let thisMonth = Number(sliceDate.slice(5, 7)) - 1;\r\n return `${months[thisMonth]} ${thisYear} Effective`;\r\n };\r\n\r\n ////////////////// ACTIVE COVERAGE STUFF /////////////////////////////////\r\n\r\n const [activeCoveragePlansAndOptions, setActiveCoveragePlansAndOptions] =\r\n useState([]);\r\n //organize life/LADD plans for member/spouse and dep into a single group\r\n const [activeLaddPlansAndOptions, setActiveLaddPlansAndOptions] = useState(\r\n []\r\n );\r\n\r\n //match each active line of coverage with the corresponding planInfo options for editing individual lines of coverage\r\n useEffect(() => {\r\n if (planInfo && props?.currentActiveCoverage?.linesOfCoverage?.length > 0) {\r\n let _activeCoveragePlansAndOptions =\r\n props?.currentActiveCoverage?.linesOfCoverage?.map((plan) => {\r\n let _matchingPlanOptions;\r\n for (let singlePlan in planInfo) {\r\n if (plan.planId == planInfo[singlePlan]?.planId) {\r\n _matchingPlanOptions = planInfo[singlePlan];\r\n }\r\n }\r\n //build object of active plan and matching plan options for that plan\r\n return { lineOfCoverage: plan, options: _matchingPlanOptions };\r\n });\r\n\r\n if (_activeCoveragePlansAndOptions.length > 0) {\r\n setActiveCoveragePlansAndOptions(_activeCoveragePlansAndOptions);\r\n }\r\n\r\n //separate out life plans into a single group\r\n let _lifePlans = _activeCoveragePlansAndOptions.filter((plan) => {\r\n if (plan?.lineOfCoverage?.displayName.toUpperCase()?.includes('LADD')) {\r\n return plan;\r\n }\r\n });\r\n\r\n if (_lifePlans.length > 0) {\r\n setActiveLaddPlansAndOptions(_lifePlans);\r\n }\r\n }\r\n }, [planInfo, props?.currentActiveCoverage?.linesOfCoverage]);\r\n\r\n //filter out all active coverages that are not pending cancelation\r\n const [activePlansNotPendingCancel, setActivePlansNotPendingCancel] =\r\n useState([]);\r\n\r\n useEffect(() => {\r\n if (props?.currentActiveCoverage?.linesOfCoverage.length > 0) {\r\n let _activePlans = props?.currentActiveCoverage?.linesOfCoverage?.filter(\r\n (plan) => {\r\n if (!plan?.isCancelled) {\r\n return plan;\r\n }\r\n }\r\n );\r\n setActivePlansNotPendingCancel(_activePlans);\r\n }\r\n }, [props?.currentActiveCoverage?.linesOfCoverage]);\r\n\r\n //show/hide expanded plan section\r\n const [resumeAnchorEl, setResumeAnchorEl] = useState(null);\r\n const [collapse, setCollapse] = useState(false);\r\n\r\n const handleRegenerateClick = async () => {\r\n let sendEmail = false;\r\n try {\r\n //await enrollmentService.generateEnrollmentReport(\r\n // activeCoveragePlansAndOptions[0]?.lineOfCoverage?.enrollmentId,\r\n // sendEmail\r\n //)\r\n await enrollmentService.generateACReport(\r\n activeCoveragePlansAndOptions[0]?.lineOfCoverage?.enrollmentId,\r\n new Date(),\r\n sendEmail\r\n );\r\n } catch (error) {\r\n console.error('error generating enrollment report', error);\r\n }\r\n setTimeout(async () => {\r\n await props.getAllDocuments();\r\n }, 200);\r\n setResumeAnchorEl(null);\r\n };\r\n\r\n const handleRegenerateFutureClick = async () => {\r\n let sendEmail = false;\r\n try {\r\n //await enrollmentService.generateEnrollmentReport(\r\n // activeCoveragePlansAndOptions[0]?.lineOfCoverage?.enrollmentId,\r\n // sendEmail\r\n //)\r\n var date = new Date();\r\n date.setMonth(date.getMonth() + 1, 1);\r\n await enrollmentService.generateACReport(\r\n activeCoveragePlansAndOptions[0]?.lineOfCoverage?.enrollmentId,\r\n date,\r\n sendEmail\r\n );\r\n } catch (error) {\r\n console.error('error generating enrollment report', error);\r\n }\r\n setTimeout(async () => {\r\n await props.getAllDocuments();\r\n }, 200);\r\n setResumeAnchorEl(null);\r\n };\r\n\r\n /////////////CANCEL (reason and date) LOGIC /////////////////\r\n //Date - range: beginning of current month, end of current month, beginning of next month\r\n\r\n //start of CURRENT month\r\n const firstDayOfCurrentMonthString = formatDateObjYYYYMMDD(\r\n firstDayOfCurrentMonth\r\n );\r\n const firstDayOfCurrentMonthFormatted = formatDateObjMMDDYYYYDisplay(\r\n firstDayOfCurrentMonth\r\n );\r\n\r\n //end of CURRENT month\r\n const lastDayOfCurrentMonthString = formatDateObjYYYYMMDD(\r\n lastDayOfCurrentMonth\r\n );\r\n\r\n const lastDayOfCurrentMonthFormatted = formatDateObjMMDDYYYYDisplay(\r\n lastDayOfCurrentMonth\r\n );\r\n\r\n //start of NEXT month\r\n const firstDayOfNextMonthString = formatDateObjYYYYMMDD(firstDayOfNextMonth);\r\n\r\n const beginnionOfNextMonthFormatted =\r\n formatDateObjMMDDYYYYDisplay(firstDayOfNextMonth);\r\n\r\n //end of PREVIOUS month\r\n const lastDayOfPreviousMonthString = formatDateObjYYYYMMDD(\r\n lastDayOfPreviousMonth\r\n );\r\n const lastDayOfPreviousMonthFormatted = formatDateObjMMDDYYYYDisplay(\r\n lastDayOfPreviousMonth\r\n );\r\n\r\n const editCoverageDateSelectOptions = [\r\n {\r\n name: 'Beginning of Current Month',\r\n value: firstDayOfCurrentMonthString,\r\n displayDate: firstDayOfCurrentMonthFormatted,\r\n },\r\n {\r\n //only for modifying future coverage (not for cancel)\r\n name: 'Beginning of Next Month',\r\n value: firstDayOfNextMonthString,\r\n displayDate: beginnionOfNextMonthFormatted,\r\n },\r\n ];\r\n\r\n const cancelCoverageDateSelectionOptions = [\r\n {\r\n name: 'End of Last Month',\r\n value: lastDayOfPreviousMonthString,\r\n displayDate: lastDayOfPreviousMonthFormatted,\r\n },\r\n {\r\n name: 'End of Current Month',\r\n value: lastDayOfCurrentMonthString,\r\n displayDate: lastDayOfCurrentMonthFormatted,\r\n },\r\n ];\r\n\r\n const [dateOfCancelation, setDateOfCancelation] = useState(\r\n lastDayOfCurrentMonthString\r\n );\r\n const [cancelDateError, setCancelDateError] = useState(false);\r\n //REASON\r\n const [reasonForCancelation, setReasonForCancelation] = useState(\r\n props?.cancellationReasons[0]?.name\r\n );\r\n\r\n const handleChangeReasonForCancelation = (e) => {\r\n setReasonForCancelation(e.target.value);\r\n };\r\n\r\n useEffect(() => {\r\n setDateOfCancelation(lastDayOfCurrentMonthString);\r\n }, []);\r\n\r\n //cancelation date selection\r\n const handleCancelDateChange = (e) => {\r\n let inputValue = e.target.value;\r\n //check if date is within range before updating value\r\n setDateOfCancelation(inputValue);\r\n };\r\n\r\n //not currently allowing specific date selection\r\n // const checkCancelDateError = () => {\r\n // //cannot cancel in past and can only cancel today if it is last day of month\r\n // if (\r\n // todayString === endOfCurrentMonth &&\r\n // dateOfCancelation === endOfCurrentMonth\r\n // ) {\r\n // setCancelDateError(false)\r\n // } else if (dateOfCancelation < tomorrowString) {\r\n // setCancelDateError(\r\n // \"Date of cancelation must be after today and before end of month\"\r\n // )\r\n // }\r\n // //cannot cancel after end of month\r\n // if (\r\n // dateOfCancelation > endOfCurrentMonth &&\r\n // todayString !== endOfCurrentMonth\r\n // ) {\r\n // setCancelDateError(\r\n // \"Date of cancelation cannot be after the end of the current month\"\r\n // )\r\n // }\r\n // if (\r\n // dateOfCancelation >= tomorrowString &&\r\n // dateOfCancelation <= endOfCurrentMonth\r\n // ) {\r\n // setCancelDateError(false)\r\n // }\r\n // }\r\n\r\n //OPEN ActiveCoverageDrawer per line of coverage\r\n //this drawer holds view, edit, and cancel logic per line\r\n //ladd containes all ladd lines of coverage\r\n //working on phasing out CancelCoverageDrawer and ReinstateCoverageDrawer per line - this will remain in use for cancel all and cancel enrollment logic\r\n const [activeCoverageDrawerOpen, setActiveCoverageDrawerOpen] = useState({\r\n open: false,\r\n lineSelected: [],\r\n dateOfEdit: null,\r\n //structure if line selected lineSelected: [{lineOfCoverage: {lineSelected}, options: {planOptions}}, {lineOfCoverage: {lineSelected}, options: {planOptions}}]\r\n });\r\n\r\n //check if AC drawer is open and if so, update line selected when AC data changes\r\n useEffect(() => {\r\n if (activeCoverageDrawerOpen?.open) {\r\n //if ladd plan, update laddd plans and options\r\n if (\r\n activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage?.displayName?.includes(\r\n 'LADD'\r\n )\r\n ) {\r\n setActiveCoverageDrawerOpen({\r\n ...activeCoverageDrawerOpen,\r\n lineSelected: activeLaddPlansAndOptions,\r\n });\r\n } else {\r\n //find matching activeCoverage and options\r\n let _currentActiveCoverageInDrawer =\r\n activeCoverageDrawerOpen?.lineSelected[0]?.lineOfCoverage;\r\n let _matchingRefreshedActiveCoverage =\r\n activeCoveragePlansAndOptions?.find((coverage) => {\r\n return (\r\n coverage?.lineOfCoverage?.id ===\r\n _currentActiveCoverageInDrawer?.id\r\n );\r\n });\r\n //update line selected active coverage with refreshed matching active coverage and options\r\n setActiveCoverageDrawerOpen((prevState) => ({\r\n ...prevState,\r\n lineSelected: [\r\n {\r\n lineOfCoverage: _matchingRefreshedActiveCoverage?.lineOfCoverage,\r\n options: _matchingRefreshedActiveCoverage?.options || {},\r\n },\r\n ],\r\n }));\r\n }\r\n }\r\n }, [activeCoveragePlansAndOptions, activeLaddPlansAndOptions]); //refresh line in drawer if drawer is open and active coverage data has changed\r\n\r\n const handleOpenActiveCoverageDrawer = (e, lineSelected, planOptions) => {\r\n console.log('opening drawer with plan options', planOptions);\r\n let _activeCoverageDrawerOpen = { ...activeCoverageDrawerOpen, open: true };\r\n //check ladd plans - will be passed in as member ladd, will want to include spouse and dep if they exist also\r\n if (\r\n lineSelected?.calculatedPlanTypeId === 4 &&\r\n activeLaddPlansAndOptions?.length > 0\r\n ) {\r\n _activeCoverageDrawerOpen.lineSelected = activeLaddPlansAndOptions;\r\n } else {\r\n _activeCoverageDrawerOpen.lineSelected = [\r\n { lineOfCoverage: lineSelected, options: planOptions },\r\n ];\r\n }\r\n //update date of edit to default to beginning of next month\r\n _activeCoverageDrawerOpen.dateOfEdit =\r\n editCoverageDateSelectOptions[1]?.value;\r\n setActiveCoverageDrawerOpen(_activeCoverageDrawerOpen);\r\n //close menu\r\n setResumeAnchorEl(null);\r\n };\r\n\r\n // CANCEL SINGLE LOGIC\r\n const [cancelCoverageDrawerOpen, setCancelCoverageDrawerOpen] =\r\n useState(false);\r\n\r\n const [planToCancel, setPlanToCancel] = useState(null);\r\n const [planToReinstate, setPlanToReinstate] = useState(null);\r\n\r\n const handleOpenCancelCoverageDrawer = (e, planSelected) => {\r\n if (planSelected === 'cancelAllCoverage') {\r\n setCancelAllCoverage(true);\r\n }\r\n setCancelCoverageDrawerOpen(true);\r\n //close menu\r\n setResumeAnchorEl(null);\r\n };\r\n\r\n //CANCEL ALL LOGIC\r\n const [cancelAllCoverage, setCancelAllCoverage] = useState(false);\r\n const handleCancelAllCoverage = async () => {\r\n let memberId = props?.member?.id;\r\n\r\n //iterate over each active coverage and check current isCancelled status\r\n //if not cancelled, continue with cancel\r\n //STEFAN - I added in cancel all option. Later we will want to add in a new separate method for cancel all, but for now I'm just using the same method\r\n // activeCoveragePlansAndOptions?.forEach(async (plan) => {\r\n let plan = activeCoveragePlansAndOptions[0];\r\n let activeCoverageId = plan?.lineOfCoverage?.id;\r\n let cancelReason = `Cancel all coverage - ${reasonForCancelation}`;\r\n let cancelAll = true;\r\n try {\r\n await activeCoverageService.cancelActiveCoverageForMember(\r\n activeCoverageId,\r\n cancelReason,\r\n dateOfCancelation,\r\n cancelAll\r\n );\r\n } catch (error) {\r\n console.error('error canceling active coverage', error);\r\n }\r\n //})\r\n setTimeout(() => {\r\n //refresh enrollment data\r\n props?.getActiveCoverage(memberId);\r\n //refresh payment schedules\r\n props?.getPaymentSchedule();\r\n }, 500);\r\n };\r\n\r\n //ACTIVE COVERAGE Pending cancelation or modification warning\r\n //can still use this w/ updated cancel active coverage - need to pass in endDate\r\n const pendingChangesMessage = (plan) => {\r\n let _formattedDate;\r\n let _futureCoverageTitle = '';\r\n //determine if future coverage has benefit amount or covered lives - some accident, add, hospital, cancer will have 0 benefit amount, but still have premium and covered lives\r\n if (plan?.futureBenefitAmount > 0) {\r\n //check for ADD coverage specifically - this has both benefit amount AND covered lives - show futureCoveredLives value\r\n if (plan?.displayName === 'ADD') {\r\n _futureCoverageTitle = `Future benefit ${props?.UsdFormatterDec.format(\r\n plan?.futureBenefitAmount\r\n )} | Covered lives - ${\r\n plan?.futurePersonTypeId >= 0\r\n ? getPersonTypeFromId(plan?.futurePersonTypeId)\r\n : ''\r\n } | Premium ${props?.UsdFormatterDec.format(\r\n plan?.futurePremiumAmount\r\n )} `;\r\n } else {\r\n _futureCoverageTitle = `Future benefit ${props?.UsdFormatterDec.format(\r\n plan?.futureBenefitAmount\r\n )} | Premium ${props?.UsdFormatterDec.format(\r\n plan?.futurePremiumAmount\r\n )} `;\r\n }\r\n } else if (\r\n plan?.futureBenefitAmount === 0 &&\r\n plan?.futurePremiumAmount > 0\r\n ) {\r\n _futureCoverageTitle = `Future covered lives - ${\r\n plan?.futurePersonTypeId >= 0\r\n ? getPersonTypeFromId(plan?.futurePersonTypeId)\r\n : ''\r\n } | Premium ${props?.UsdFormatterDec.format(plan?.futurePremiumAmount)}`;\r\n }\r\n\r\n //cancelled plan display\r\n if (plan?.isCancelled) {\r\n //show current plan end date for cancelled plan\r\n _formattedDate = format(props?.formatDate(plan?.endDate), 'MM/dd/yyyy');\r\n return (\r\n \r\n \r\n );\r\n //modified plan display\r\n } else if (plan?.futureActiveCoverageId && !plan?.isCancelled) {\r\n //show future plan begin date for edited plan\r\n _formattedDate = format(\r\n props?.formatDate(plan?.futureBeginDate),\r\n 'MM/dd/yyyy'\r\n );\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n };\r\n\r\n const handleLogoError = (e) => {\r\n e.target.src = FallbackLogo;\r\n };\r\n\r\n //Policy Number - get unique array of numbers that can differ for each line of active coverage\r\n const [uniquePolicyNumbers, setUniquePolicyNumbers] = useState([]);\r\n\r\n useEffect(() => {\r\n if (props?.currentActiveCoverage?.linesOfCoverage?.length > 0) {\r\n let _policyNumsArr = props?.currentActiveCoverage?.linesOfCoverage?.map(\r\n (plan) => {\r\n if (\r\n plan?.policyNumber !== '' &&\r\n plan?.policyNumber !== ' ' &&\r\n plan?.policyNumber\r\n ) {\r\n return plan?.policyNumber;\r\n }\r\n }\r\n );\r\n let _uniquePolicyNums = [...new Set(_policyNumsArr)];\r\n setUniquePolicyNumbers(_uniquePolicyNums);\r\n }\r\n }, [props?.currentActiveCoverage?.linesOfCoverage?.length]);\r\n\r\n const [reinstateCoverageDrawerOpen, setReinstateCoverageDrawerOpen] =\r\n useState(false);\r\n\r\n const handleOpenReinstateDrawer = (e, planSelected) => {\r\n if (planSelected) setPlanToReinstate({ ...planSelected });\r\n setReinstateCoverageDrawerOpen(true);\r\n };\r\n\r\n const formatDisplayNameFriendly = (plan) => {\r\n switch (plan?.displayName) {\r\n case 'LADD':\r\n return 'LIFE-Member';\r\n case 'LADD-S':\r\n return 'LIFE-Spouse';\r\n case 'LADD-D':\r\n return 'LIFE-Dependent';\r\n default:\r\n return plan?.displayName;\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n 0\r\n ? `api/image/organization/${props.member?.organizationId}`\r\n : '/api/image/organization'\r\n }\r\n alt=\"organization logo\"\r\n width=\"100%\"\r\n onError={handleLogoError}\r\n />\r\n \r\n \r\n\r\n \r\n \r\n \r\n {planInfo?.name ? (\r\n isAirPlan(planInfo) ? (\r\n 'Teamsters Voluntary Income Protection VIP+ Air'\r\n ) : (\r\n planInfo?.name || 'Enrollment'\r\n )\r\n ) : (\r\n \r\n\r\n \r\n \r\n setResumeAnchorEl(e.currentTarget)}\r\n disabled={activeCoveragePlansAndOptions.length < 1}\r\n >\r\n setResumeAnchorEl(null)}\r\n sx={{ ul: { padding: '0px' }, justifyContent: 'flex-start' }}\r\n PaperProps={{\r\n style: {\r\n borderRadius: '4px',\r\n // width:'127px',\r\n padding: '0px',\r\n },\r\n }}\r\n anchorOrigin={{\r\n vertical: 'bottom',\r\n horizontal: 'right',\r\n }}\r\n transformOrigin={{\r\n vertical: 'top',\r\n horizontal: 'right',\r\n }}\r\n >\r\n \r\n Re-Generate PDF (current coverage)\r\n \r\n \r\n Re-Generate PDF (future coverage)\r\n \r\n \r\n handleOpenCancelCoverageDrawer(e, 'cancelAllCoverage')\r\n }\r\n disabled={\r\n activeCoveragePlansAndOptions.length < 1 ||\r\n (activePlansNotPendingCancel.length < 1 &&\r\n activeCoveragePlansAndOptions.length > 0) ||\r\n props?.isFutureCoverage\r\n }\r\n sx={componentStyles.menuOptions}\r\n >\r\n Cancel All Coverage\r\n \r\n {(props?.currentActiveCoverage?.groupPlanName\r\n ?.toLowerCase()\r\n .includes('teamsters') ||\r\n props?.currentActiveCoverage?.groupPlanName\r\n ?.toLowerCase()\r\n .includes('ibt')) &&\r\n !props?.isFutureCoverage && (\r\n {\r\n //close menu\r\n setResumeAnchorEl(null);\r\n //open pilot modal\r\n props?.handleOpenPilotModal();\r\n }}\r\n disabled={props?.surveyResponses?.isPilot} //cannot enable if isPilot is already true\r\n >\r\n \r\n \r\n\r\n {/* Plan Lines of Coverage Summary */}\r\n \r\n {/* Display Policy Numbers */}\r\n {props?.currentActiveCoverage?.linesOfCoverage?.length > 0 &&\r\n uniquePolicyNumbers?.length > 0 ? (\r\n uniquePolicyNumbers?.map((num, i) => {\r\n if (num) {\r\n return (\r\n \r\n {`Policy #${num}`}\r\n \r\n );\r\n } else return '';\r\n })\r\n ) : (\r\n \r\n Policy Number N/A{' '}\r\n \r\n )}\r\n\r\n {/* Display Active Coverage Plans List */}\r\n \r\n {activeCoveragePlansAndOptions.length > 0 &&\r\n activeCoveragePlansAndOptions.map((plan) => {\r\n let singlePlan = plan?.lineOfCoverage;\r\n return (\r\n \r\n \r\n {formatDisplayNameFriendly(singlePlan)}:\r\n \r\n\r\n {/* show effective date if not pending cancellation or modification sinclePlan.futureActiveCoverage: 0 = not modified*/}\r\n {!singlePlan?.isCancelled &&\r\n !singlePlan.futureActiveCoverageId && (\r\n \r\n {formatEffective(singlePlan?.effectiveStartDate)}\r\n \r\n )}\r\n\r\n {/* show pending cancelation*/}\r\n {singlePlan?.isCancelled && //temporarily hidden until isCancelled is added by Stefan\r\n singlePlan?.endDate > todayDateShort &&\r\n singlePlan?.endDate?.slice(0, 4) != '9999' ? ( // temporarily here until isCancelled is added by Stefan\r\n \r\n PENDING CANCELLATION{' '}\r\n {format(\r\n props?.formatDate(singlePlan?.endDate),\r\n 'MM/dd/yyyy'\r\n )}\r\n \r\n ) : null}\r\n\r\n {/* show canceled line of coverage*/}\r\n {singlePlan?.isCancelled &&\r\n singlePlan?.endDate < todayDateShort ? (\r\n \r\n CANCELED{' '}\r\n {format(\r\n props?.formatDate(singlePlan?.endDate),\r\n 'MM/dd/yyyy'\r\n )}\r\n \r\n ) : null}\r\n\r\n {/* show modified line of coverage */}\r\n {singlePlan?.futureActiveCoverageId &&\r\n !singlePlan?.isCancelled && //temporarily hidden until isCancelled is added by Stefan\r\n todayDateShort <= singlePlan?.endDate ? (\r\n \r\n PENDING COVERAGE CHANGES{' '}\r\n {format(\r\n props?.formatDate(singlePlan?.futureBeginDate), //coverage changes have futureBeginDate that we use instead of endDate - cancel coverage only has endDate\r\n 'MM/dd/yyyy'\r\n )}\r\n \r\n ) : null}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n\r\n {/* Expanded Plan section */}\r\n\r\n \r\n \r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/HandSign.646b8aa6.svg\";","import './SignatureModal.css';\r\n\r\nimport React, { useEffect, useState, useRef } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport SignatureCanvas from 'react-signature-canvas';\r\n\r\n//Assets\r\nimport HandSignSVG from '../../../../assets/images/HandSign.svg';\r\n\r\n//Services\r\nimport enrollmentService from '../../../../services/enrollment-service';\r\n\r\n//MuiComponents\r\nimport TextField from '@mui/material/TextField';\r\nimport Button from '@mui/material/Button';\r\nimport Box from '@mui/material/Box';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport Divider from '@mui/material/Divider';\r\nimport Typography from '@mui/material/Typography';\r\nimport Modal from '@mui/material/Modal';\r\n\r\n//MuiIcons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport Paper from '@mui/material/Paper';\r\nimport { Alert } from '@mui/material';\r\n\r\n//Our Components\r\nimport { formatUTCToMonthDay } from '../../../utils';\r\n\r\nfunction WrapperComponent(props) {\r\n if (window.innerWidth < 800) {\r\n return (\r\n \r\n {props.children}\r\n \r\n );\r\n } else {\r\n return (\r\n e.preventDefault()}\r\n // keepMounted\r\n sx={{\r\n position: 'absolute',\r\n borderRadius: '12px 12px 12px 12px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n }}\r\n container={props.container || document.body}\r\n hideBackdrop={props.agentEnroller ? true : false}\r\n disableScrollLock={true}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n Authorization\r\n \r\n \r\n \r\n \r\n {!props.agentEnroller ? (\r\n <>\r\n {/* /////////////////////////////////////// */}\r\n \r\n \r\n To complete your enrollment application please acknowledge and\r\n sign below.\r\n \r\n
\r\n\r\n \r\n \r\n setSigState({\r\n ...sigState,\r\n working: !sigState.working,\r\n })\r\n }\r\n value={sigState.working}\r\n checked={sigState.working}\r\n // name={1}\r\n sx={{\r\n display: 'flex',\r\n alignSelf: 'flex-start',\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n height: '50%',\r\n }}\r\n inputProps={{\r\n 'data-uhtest': 'employedAndActivelyWorking_checkbox',\r\n }}\r\n // TouchRippleProps={{sx:{display:'flex',alignSelf:'center', marginLeft:'auto', marginRight:'auto', backgroundColor:'red', height:'50%' }}}\r\n icon={\r\n \r\n I acknowledge that to be covered on the effective date [\r\n {effectiveDate}], I must be employed and actively working. I\r\n understand that if my work status and/or union status changes,\r\n I may not be covered.\r\n \r\n \r\n\r\n \r\n \r\n setSigState({\r\n ...sigState,\r\n priorDisability: !sigState.priorDisability,\r\n })\r\n }\r\n value={sigState.priorDisability}\r\n checked={sigState.priorDisability}\r\n // name={1}\r\n sx={{ display: 'flex', alignSelf: 'flex-start' }}\r\n inputProps={{\r\n 'data-uhtest': 'disabilitiesAfterCoverage_checkbox',\r\n }}\r\n icon={\r\n \r\n I understand that only disabilities starting after the\r\n coverage effective date are eligible for benefits, subject to\r\n the pre-existing condition limitation. Disabilities starting\r\n before the coverage effective date are not covered.\r\n \r\n \r\n\r\n \r\n Or\r\n \r\n\r\n \r\n \r\n \r\n Clear\r\n \r\n\r\n \r\n {sigState.fullName?.length > 0 ||\r\n (!sigState.signature && (\r\n \r\n \r\n setSigState({\r\n ...sigState,\r\n accept: !sigState.accept,\r\n })\r\n }\r\n value={sigState.accept}\r\n checked={sigState.accept}\r\n // name={1}\r\n sx={{}}\r\n icon={\r\n \r\n I understand this is a legal representation of my signature.\r\n \r\n \r\n {/* /////////////////////////////////////// */}\r\n \r\n ) : (\r\n <>\r\n {props?.signClick == 'Submit' &&\r\n (props?.fullMemberObj?.email == null ||\r\n props?.fullMemberObj?.email == undefined ||\r\n props?.fullMemberObj?.email == '') && (\r\n \r\n \r\n Member is missing email address. Please add email address\r\n to member's personal information before submitting\r\n enrollment.\r\n \r\n \r\n )}\r\n\r\n \r\n {props.signClick == 'Reopen' &&\r\n 'To reopen this enrollment application, click \"Reopen Enrollment\".'}\r\n {props.signClick == 'CancelIsReopen' &&\r\n 'To cancel this enrollment application, click \"Cancel Enrollment\". Application will be moved back to an \"In Progress\" state and can be submitted again if this was a mistake. This is no longer submitted and payments will not be processed.'}\r\n {props.signClick == 'Cancel' &&\r\n 'To Cancel this enrollment application, click \"Cancel Enrollment\".'}\r\n {props.signClick == 'Submit' &&\r\n 'To submit this enrollment application, click \"Enroll\".'}\r\n \r\n \r\n )}\r\n\r\n \r\n {/* {props.signClick == 'Reopen' ? 'Reopen enrollment' : 'Enroll'} */}\r\n {props.signClick == 'Reopen' && 'Reopen Enrollment'}\r\n {(props.signClick == 'Cancel' ||\r\n props.signClick == 'CancelIsReopen') &&\r\n 'Cancel Enrollment'}\r\n {props.signClick == 'Submit' && 'Enroll'}\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","//MuiIcons\r\nimport InfoOutlinedIcon from \"@mui/icons-material/InfoOutlined\"\r\n\r\n//Mui Components\r\nimport Chip from \"@mui/material/Chip\"\r\n\r\nexport default function NonPeakPayChip(props) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n Payment Summary\r\n \r\n \r\n View payment breakdown for all plans.\r\n \r\n \r\n \r\n \r\n {expanded ? \r\n \r\n \r\n \r\n {/* rename plan names to display abbreviations */}\r\n {props?.totalPlanCosts &&\r\n totalPlanCostArr.map((plan, index) => {\r\n let planName = Object.keys(plan)[0]\r\n let value = plan[planName]\r\n planName = formatLineOfcoverageName(planName)\r\n\r\n if (planName) {\r\n return (\r\n \r\n \r\n {planName}{\" \"}\r\n \r\n \r\n {value && props.UsdFormatterDec.format(value)}{\" \"}\r\n \r\n \r\n )\r\n }\r\n })}\r\n \r\n \r\n Transaction Fee\r\n \r\n \r\n {props?.totalPlanCosts?.[\"Transaction Fee\"] && isPeakPay\r\n ? props.UsdFormatterDec.format(\r\n props?.totalPlanCosts[\"Transaction Fee\"]\r\n )\r\n : \"-\"}\r\n \r\n \r\n \r\n \r\n \r\n {isPeakPay ? \"Monthly Total\" : \"Subtotal*\"} \r\n \r\n {isPeakPay\r\n ? props.UsdFormatterDec.format(\r\n props?.totalPlanCosts?.[\"Monthly Total\"] +\r\n props?.totalPlanCosts?.[\"Transaction Fee\"] || 0\r\n )\r\n : props.UsdFormatterDec.format(\r\n props?.totalPlanCosts?.[\"Monthly Total\"] || 0\r\n )}\r\n \r\n \r\n\r\n {/* subtotal disclosure for non- peak pay */}\r\n {!isPeakPay && props?.memberHasActiveCoverage && (\r\n \r\n *Subtotal reflects payment balance without transaction fees\r\n \r\n )}\r\n \r\n )\r\n}\r\n","//need to figure out how to pass in value to accountCard for failed prenote vs. archived vs. active\r\n\r\nconst paymentsTabStyles = {\r\n //Bank Account display shared styles\r\n accountCard: {\r\n padding: \"8px 10px 8px 8px\",\r\n width: \"93%\",\r\n minHeight: \"96px\",\r\n margin: \"15px auto 0px\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"center\",\r\n fontFamily: \"Poppins\",\r\n border: \"1px solid \",\r\n borderColor: \"background.border\",\r\n backgroundColor: \"background.default\",\r\n },\r\n iconContainer: {\r\n display: \"flex\",\r\n minWidth: \"60px\",\r\n margin: \"0 auto\",\r\n },\r\n accountBalanceIcon:(showDisabled) => ({\r\n color: showDisabled ? \"text.disabled\" : 'primary.main',\r\n margin: \"6px auto\",\r\n }),\r\n accountInfo: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n paddingLeft: \"6px\",\r\n width: \"100%\",\r\n },\r\n accountNameText:(showDisabled) => ({\r\n fontFamily: \"Poppins\",\r\n fontWeight: \"500\",\r\n color: showDisabled ? \"text.disabled\" : 'text.primary',\r\n fontSize: \"14px!important\",\r\n }),\r\n menuContainer: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n fontFamily: \"Archivo\",\r\n fontSize: \"15px\",\r\n fontWeight: 500,\r\n justifyContent: \"flex-end\",\r\n margin: \"0px 20px 0px 0px\",\r\n },\r\n moreVertIcon: {\r\n color: \"text.secondary\",\r\n float: \"right\",\r\n },\r\n bankAccountInfoContainer: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n },\r\n bankAccountText: (showDisabled) => ({\r\n color: showDisabled ? \"text.disabled\" : 'text.primary',\r\n fontSize: \"14px!important\",\r\n marginRight: \"5px\",\r\n }),\r\n}\r\n\r\nexport default paymentsTabStyles\r\n","import React, { useEffect, useState } from 'react';\r\n\r\n//Mui Components\r\nimport {\r\n Alert,\r\n Box,\r\n Card,\r\n Fade,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n Radio,\r\n Typography,\r\n} from '@mui/material';\r\n\r\n// Assets\r\n\r\n//Mui icons\r\nimport AccountBalanceIcon from '@mui/icons-material/AccountBalance';\r\nimport CheckIcon from '@mui/icons-material/Check';\r\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport { set } from 'date-fns';\r\n\r\n//Our shared styles\r\nimport paymentsTabStyles from '../paymentsTabStyles';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n accountCard: (prenoteStatus) => ({\r\n padding: '8px 10px 8px 8px',\r\n width: '93%',\r\n minHeight: '96px',\r\n margin: '12px auto 0px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n fontFamily: 'Poppins',\r\n border: '1px solid',\r\n borderColor: prenoteStatus ? 'rgba(211, 47, 47)' : 'background.border',\r\n backgroundColor: prenoteStatus\r\n ? 'rgba(211, 47, 47, 0.04)'\r\n : 'background.default',\r\n }),\r\n errorIcon: {\r\n color: 'rgba(211, 47, 47)',\r\n margin: '6px auto',\r\n },\r\n\r\n editAccountButton: {\r\n color: 'rgba(211, 47, 47)',\r\n fontSize: '12px !important',\r\n height: '24px',\r\n padding: '8px 6px',\r\n marginRight: '18px',\r\n },\r\n\r\n viewFullAccountButton: {\r\n fontSize: '10px',\r\n fontWeight: 500,\r\n padding: '0px',\r\n maxHeight: '20px',\r\n color: 'primary.main',\r\n alignSelf: 'flex-end',\r\n marginBottom: '3px',\r\n },\r\n};\r\nexport default function PaymentBankAccounts(props) {\r\n //Handle three dot menu button\r\n const handleEditWalletMenu = (e) => {\r\n props.setEditWalletMenu({\r\n ...props.editWalletMenu,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n };\r\n\r\n //manage displaying full bank account for user w/ permissions\r\n const [isShowFullAccount, setIsShowFullAccount] = useState(false);\r\n\r\n const [sortedAccounts, setSortedAccounts] = useState([]);\r\n\r\n //filter and sort bank accounts for display\r\n useEffect(() => {\r\n if (!props?.bankAccount || props?.bankAccount?.length < 1) {\r\n return;\r\n } else {\r\n let _filteredAccounts = [];\r\n let _sortedAccounts = [];\r\n\r\n _filteredAccounts = props?.bankAccount?.filter((account) => {\r\n //return accounts that are deleted\r\n if (!account.isDeleted) return account;\r\n });\r\n\r\n //sort bank accounts and display default account at top\r\n _sortedAccounts = _filteredAccounts?.sort((a, b) => {\r\n if (a.isPrimary) {\r\n return -1;\r\n }\r\n if (b.isPrimary) {\r\n return 1;\r\n } else return 0;\r\n });\r\n setSortedAccounts(_sortedAccounts);\r\n }\r\n }, [\r\n props?.bankAccount?.length,\r\n props?.bankAccount,\r\n props?.defaultAccount,\r\n props?.member?.id,\r\n ]);\r\n\r\n //Handle show full bank account button click\r\n const handleShowFullAccount = (e, index) => {\r\n //if value is true or 0 (index of 0 = first in list), set to false, else set to index of account\r\n if (isShowFullAccount || isShowFullAccount === 0) {\r\n setIsShowFullAccount(false);\r\n } else {\r\n setIsShowFullAccount(index);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {/* Bank Account(s) - display all*/}\r\n {(sortedAccounts?.length > 0 &&\r\n sortedAccounts?.map((account, index) => {\r\n return (\r\n \r\n \r\n {account.prenoteStatusId === 4 ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n\r\n {/* Member Name and Account Type */}\r\n \r\n {/* Account Name - 4 digit view */}\r\n \r\n {account?.description ? `${account?.description} - ` : ''}{' '}\r\n {props.getMemberAccountType(account.bankAccountTypeId)}{' '}\r\n account\r\n \r\n\r\n {/* Bank Info 4 digit account*/}\r\n \r\n {((!isShowFullAccount && isShowFullAccount !== 0) ||\r\n isShowFullAccount !== index) && (\r\n <>\r\n \r\n {account.bankName || 'Account'}\r\n \r\n\r\n \r\n {` *${account.accountNumber?.slice(-4)}`}\r\n \r\n \r\n )}\r\n\r\n {/* Full bank account number if user has permissions and edit wallet drawer is not open */}\r\n {props?.permissionsEnabler?.viewFullBankAccounts &&\r\n !props.editWalletDrawerOpen &&\r\n isShowFullAccount === index && (\r\n \r\n {`${account.bankName || 'Account '} - ${\r\n account?.accountNumber\r\n } Routing - ${account?.routingNumber}`}\r\n \r\n )}\r\n\r\n {/* Show/Hide full bank button */}\r\n {props?.permissionsEnabler?.viewFullBankAccounts &&\r\n !props.editWalletDrawerOpen && (\r\n handleShowFullAccount(e, index)}\r\n >\r\n {isShowFullAccount === index ? 'HIDE' : 'SHOW'}\r\n \r\n )}\r\n \r\n \r\n \r\n {account?.isPrimary && (\r\n <>\r\n Default \r\n \r\n )}\r\n {/* Show radio button to select account in Make a Payment drawer - only show when drawer is open, disable all accounts that are not 'default account' if custom date is not entered, disable radio selection if account has failed prenote */}\r\n {props.showSelectBankAccount && (\r\n props.handleBankAccountSelect(e, account)}\r\n sx={{ padding: '0px 0px 0px 15px' }}\r\n />\r\n )}\r\n\r\n {/* Menu dropdown to remove or make accoutn default */}\r\n {(!account?.isPrimary ||\r\n (account?.isPrimary && account?.prenoteStatusId === 4)) &&\r\n props.editWalletDrawerOpen && (\r\n <>\r\n \r\n \r\n \r\n\r\n {/* Show Failed Prenote Message if account has failed prenote */}\r\n {account.prenoteStatusId === 4 && (\r\n \r\n \r\n Failed Prenote\r\n \r\n \r\n )}\r\n {/* // Display message after prenote status update */}\r\n \r\n \r\n Prenote status has been reset. Please note - this does not\r\n guarantee blocks removed from the bank processor. If this\r\n continues to error, please contact support.\r\n \r\n \r\n \r\n );\r\n })) || (\r\n \r\n \r\n No Bank Information\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n","// import React, { useEffect, useState } from \"react\"\r\n\r\n//Services\r\n\r\n//Mui Components\r\nimport {\r\n Box,\r\n Card,\r\n IconButton,\r\n Menu,\r\n MenuItem,\r\n Typography,\r\n} from \"@mui/material\"\r\n\r\n// Assets\r\n\r\n//Mui icons\r\nimport AccountBalanceIcon from \"@mui/icons-material/AccountBalance\"\r\nimport MoreVertIcon from \"@mui/icons-material/MoreVert\"\r\nimport { set } from \"date-fns\"\r\n\r\n// Our shared styles for payments tab\r\nimport paymentsTabStyles from \"../paymentsTabStyles\"\r\n\r\nexport default function ArchivedBankAccounts(props) {\r\n //PROPS\r\n const {\r\n archivedBankAccounts,\r\n member,\r\n getMemberAccountType,\r\n editWalletDrawerOpen,\r\n editArchivedAccountMenu,\r\n setEditArchivedAccountMenu,\r\n handleCloseArchivedAccountMenu,\r\n handleUnarchiveAccount,\r\n } = props\r\n\r\n //handle three dot menu botton\r\n const handleEditArchivedAccountMenu = (e) => {\r\n setEditArchivedAccountMenu({\r\n ...editArchivedAccountMenu,\r\n [e.currentTarget.value]: e.currentTarget,\r\n })\r\n }\r\n\r\n //Future logic for full delete and unarchive still needed\r\n\r\n return (\r\n <>\r\n {/* Archived Account(s) - display all*/}\r\n {archivedBankAccounts?.length > 0 &&\r\n archivedBankAccounts?.map((account, index) => {\r\n return (\r\n \r\n {/* icon */}\r\n \r\n \r\n\r\n {/* Member Name and Account Type */}\r\n \r\n \r\n {account?.description ? `${account?.description} - ` : \"\"}{\" \"}\r\n {getMemberAccountType(account.bankAccountTypeId)} account\r\n \r\n\r\n {/* Bank Info 4 digit account*/}\r\n \r\n \r\n {account.bankName || \"Account\"}\r\n \r\n\r\n \r\n {` *${account.accountNumber?.slice(-4)}`}\r\n \r\n \r\n \r\n\r\n {/* Three dot menu */}\r\n \r\n \r\n \r\n \r\n )\r\n })}\r\n \r\n )\r\n}\r\n","// Mui Components\r\nimport { Box, Typography } from \"@mui/material\"\r\n\r\n//Our Components\r\nimport InfinityLoader from \"./InfinityLoader\"\r\n\r\nexport default function ButtonInfinityLoader(props) {\r\n //PROPS\r\n let { buttonTitle } = props\r\n return (\r\n <>\r\n \r\n \r\n {buttonTitle} \r\n \r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\n\r\n//services\r\nimport walletService from '../../../../../../../services/wallet-service';\r\n// Assets\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport TextField from '@mui/material/TextField';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport {\r\n Alert,\r\n Box,\r\n Fade,\r\n Typography,\r\n Checkbox,\r\n Collapse,\r\n Switch,\r\n} from '@mui/material';\r\n\r\n//Mui icons\r\nimport AddIcon from '@mui/icons-material/Add';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport CheckIcon from '@mui/icons-material/Check';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\n\r\n//Our Components\r\nimport PaymentBankAccounts from '../card-components/PaymentBankAccounts';\r\nimport ArchivedBankAccounts from '../card-components/ArchivedBankAccounts';\r\nimport ButtonInfinityLoader from '../../../../../../UH-loading-animation/ButtonInfinityLoader';\r\nimport { set } from 'date-fns';\r\nimport FlexSnackbar from '../../../../../../flex-snackbar/FlexSnackbar';\r\n\r\n//Component Styles\r\nconst componentStyles = {\r\n componentContainer: {\r\n backgroundColor: 'background.default',\r\n width: '538px',\r\n height: '100%',\r\n },\r\n headerContainer: {\r\n backgroundColor: 'background.default',\r\n width: '100%',\r\n padding: '10px 16px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n margin: '0 auto',\r\n borderBottom: '1px solid',\r\n borderColor: 'primary.main',\r\n },\r\n collapseContainersRow: { display: 'flex', flexDirection: 'row' },\r\n accountDisplayBody: {\r\n backgroundColor: 'background.default',\r\n fontFamily: 'Poppins',\r\n minWidth: '538px',\r\n height: '100%',\r\n overflowY: 'auto',\r\n padding: '10px 16px',\r\n },\r\n componentTitle: {\r\n color: 'text.primary',\r\n fontFamily: 'Poppins',\r\n fontSize: '24px',\r\n fontWeight: '400',\r\n },\r\n switchContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n paddingRight: '20px',\r\n },\r\n sectionHeaderContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n fontFamily: 'Archivo',\r\n margin: '5px 0px 12px',\r\n },\r\n sectionTitle: {\r\n color: 'text.primary',\r\n fontFamily: 'Poppins',\r\n fontSize: '14px',\r\n fontWeight: '500',\r\n marginRight: '10px',\r\n },\r\n defaultPaymentMethodUpdatedMessage: {\r\n color: 'primary.paymentScheduleChip',\r\n alignItems: 'center',\r\n lineHeight: '18px',\r\n fontWeight: 500,\r\n textAlign: 'center',\r\n height: '30px',\r\n },\r\n closeDrawerButton: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n },\r\n addNewAccountBtn: {\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n color: 'primary.main',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n padding: '20px 20px 10px',\r\n },\r\n icon: { height: '20px' },\r\n text: {\r\n fontWeight: '500',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px!important',\r\n },\r\n },\r\n //ADD and EDIT form styles\r\n form: {\r\n title: {\r\n fontSize: '15px',\r\n fontWeight: 500,\r\n fontFamily: 'Poppins',\r\n margin: '20px',\r\n },\r\n container: { padding: '0px 30px ', minWidth: '538px' },\r\n inputContainer: {\r\n marginBottom: '15px',\r\n },\r\n input: {\r\n '& fieldset': { borderRadius: '8px' },\r\n },\r\n selectContainer: {\r\n padding: '0px',\r\n textAlign: 'left',\r\n marginBottom: '15px',\r\n },\r\n select: {\r\n '& fieldset': { borderRadius: '8px' },\r\n '&.MuiOutlinedInput-root.Mui-focused > fieldset': {\r\n border: '2px solid #195ffb',\r\n },\r\n },\r\n checkboxContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: '0px 0px 0px 0vw',\r\n position: 'relative',\r\n marginBottom: '15px',\r\n },\r\n checkbox: {\r\n padding: '0px',\r\n marginRight: '8px',\r\n },\r\n checkboxIcon: {\r\n height: '19px',\r\n },\r\n routingNumCheckAlertContainer: {\r\n padding: '10px 17px',\r\n justifyContent: 'center',\r\n },\r\n routingNumAlertSuccess: {\r\n border: '2px solid #4E9A51',\r\n color: '#4E9A51',\r\n alignItems: 'center',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n fontWeight: 500,\r\n textAlign: 'center',\r\n },\r\n routingNumAlertFail: {\r\n alignItems: 'center',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n fontWeight: 500,\r\n textAlign: 'center',\r\n },\r\n },\r\n saveButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n },\r\n saveAndCancelButtons: {\r\n marginTop: '30px',\r\n height: '42px',\r\n fontSize: '15px',\r\n },\r\n errorMessage: {\r\n padding: '0px 20px',\r\n width: '60%',\r\n margin: '0 auto',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n fontSize: '20px',\r\n },\r\n};\r\nexport default function EditWalletDrawer(props) {\r\n const [loading, setLoading] = useState(false);\r\n const [error, setError] = useState(false);\r\n\r\n //Drawer Logic\r\n const handleEditWalletDrawerClose = () => {\r\n props.setEditWalletDrawerOpen(false);\r\n //clear and close form\r\n setRoutingBankInfo([]);\r\n setAddNewAccount(false);\r\n setEditAccount(false);\r\n setDisplayedValue({});\r\n setEditAccount(false);\r\n setLoading(false);\r\n setError(false);\r\n setMatchingAccountError(false);\r\n setShowArchived(false);\r\n\r\n //if there's an action still sitting in the undo snackbar, run it before closing the drawer\r\n if (undoSnackbarInfo?.action) {\r\n undoSnackbarInfo?.actionFunction();\r\n clearUndoSnackbar();\r\n }\r\n //refresh bank accounts\r\n setTimeout(() => {\r\n props.getBankAccount();\r\n }, 200);\r\n };\r\n\r\n //UNDO logic\r\n const [undoSnackbarInfo, setUndoSnackbarInfo] = useState({});\r\n\r\n const clearUndoSnackbar = () => {\r\n setUndoSnackbarInfo({\r\n ...undoSnackbarInfo,\r\n message: null,\r\n action: null,\r\n confirmAction: null,\r\n autoHideDuration: null,\r\n actionFunction: null,\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n clearUndoSnackbar();\r\n }, []);\r\n\r\n //ADD A NEW payment method/account\r\n const [disableSave, setDisableSave] = useState(true);\r\n const [addNewAccount, setAddNewAccount] = useState(false);\r\n //open blank form to add new account\r\n const openAddNewAccount = () => {\r\n setRoutingBankInfo([]);\r\n setAddNewAccount({});\r\n setDisplayedValue({});\r\n setEditAccount(false);\r\n //auto check the set-default payment method box if no accounts present\r\n if (props?.bankAccount?.length > 0) {\r\n setCheckedSetNewDefault(false);\r\n } else setCheckedSetNewDefault(true);\r\n };\r\n\r\n const newAccountHandler = (e) => {\r\n const regex = /^[0-9]*$/;\r\n let newValue = e.target.value;\r\n\r\n let handledId = e.target.id.replace('Updater', '');\r\n //UPDATE description\r\n if (e.target.id === 'descriptionUpdater') {\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: newValue,\r\n });\r\n setAddNewAccount({\r\n ...addNewAccount,\r\n [handledId]: newValue,\r\n });\r\n } else {\r\n // UPDATE routing or account number - use regex parameters for routing number only\r\n if (e.target.id === 'routingNumberUpdater' && regex.test(newValue)) {\r\n let routingNumTruncated = newValue.slice(0, 9);\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: routingNumTruncated,\r\n });\r\n setAddNewAccount({\r\n ...addNewAccount,\r\n [handledId]: routingNumTruncated,\r\n });\r\n } else if (\r\n e.target.id === 'accountNumberUpdater' ||\r\n e.target.id === 'confirmAccountUpdater'\r\n ) {\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: newValue,\r\n });\r\n setAddNewAccount({\r\n ...addNewAccount,\r\n [handledId]: newValue,\r\n });\r\n }\r\n }\r\n };\r\n\r\n const saveNewAccount = async (e) => {\r\n setLoading(true);\r\n let builtNewBank = {\r\n description: addNewAccount.description,\r\n accountNumber: addNewAccount.accountNumber,\r\n routingNumber: addNewAccount.routingNumber,\r\n isPrimary: checkedSetNewDefault,\r\n memberId: props.member.id,\r\n bankName:\r\n routingBankInfo[0]?.status === 'success'\r\n ? routingBankInfo[0].data.name\r\n : '',\r\n bankAccountTypeId: addNewAccount.bankAccountTypeId\r\n ? addNewAccount.bankAccountTypeId\r\n : 1,\r\n // prenoteStatusId: 1,\r\n };\r\n\r\n try {\r\n await walletService.addBankAccountForMember(builtNewBank);\r\n setLoading(false);\r\n setError(false);\r\n props.setBankAccount([...props.bankAccount, builtNewBank]);\r\n } catch (error) {\r\n setLoading(false);\r\n setError('Error saving new bank account');\r\n console.error('saveNew bank account error', error);\r\n }\r\n\r\n //Clear form\r\n setRoutingBankInfo([]);\r\n setAddNewAccount(false);\r\n setDisplayedValue({});\r\n\r\n setEditAccount(false);\r\n setCheckedSetNewDefault(false);\r\n\r\n //update bank account list\r\n props.getBankAccount();\r\n };\r\n\r\n //function to edit default checkbox\r\n const [checkedSetNewDefault, setCheckedSetNewDefault] = useState(false);\r\n const [showDefaultSuccessMessage, setShowDefaultSuccessMessage] =\r\n useState(false);\r\n\r\n //update state and value of checkbox on add new account\r\n const handleCheckboxSetAsDefault = (e) => {\r\n setCheckedSetNewDefault(() => !checkedSetNewDefault);\r\n };\r\n\r\n //UPDATE exisiting account to the default account - backend will change all other accounts to isPrimary:false\r\n const changeDefaultAccount = async (e, account) => {\r\n //update selected account to new default account (isPrimary: true)\r\n let updatedDefaultAccount = {\r\n ...account,\r\n isPrimary: true,\r\n };\r\n try {\r\n await walletService.updateBankAccountForMember(updatedDefaultAccount);\r\n //display success message\r\n setShowDefaultSuccessMessage(true);\r\n } catch (error) {\r\n console.error('update bank account error', error);\r\n }\r\n //update bankaccount list from db\r\n props.getBankAccount();\r\n //close menu\r\n handleCloseWalletMenu();\r\n\r\n //hide success message\r\n setTimeout(() => {\r\n setShowDefaultSuccessMessage(false);\r\n }, 3000);\r\n };\r\n\r\n //Edit failed prenote account\r\n const [editAccount, setEditAccount] = useState(false);\r\n const [failedPrenoteAccount, setFailedPrenoteAccount] = useState(false);\r\n const [displayPrenoteSuccessMessage, setDisplayPrenoteSuccessMessage] =\r\n useState(false);\r\n\r\n //set display prenote success message to false every time EditWalletDrawer is opened\r\n useEffect(() => {\r\n setDisplayPrenoteSuccessMessage(false);\r\n }, [props?.editWalletDrawerOpen]);\r\n\r\n const openEditFailedPrenote = (e, account) => {\r\n //can only edit on click if prenoteStatusId = 4\r\n\r\n if (account.prenoteStatusId === 4) {\r\n setAddNewAccount(false);\r\n //reference to original account before edits\r\n setFailedPrenoteAccount(account);\r\n\r\n //this account info will be edited\r\n setEditAccount(account);\r\n setRoutingBankInfo([]);\r\n setDisplayedValue({\r\n routingNumber: account?.routingNumber,\r\n accountNumber: account?.accountNumber,\r\n });\r\n //uncheck the set-default payment method box IF another default account exists that is not the failed prenote account\r\n if (props?.bankAccount?.length > 1 && !account?.isPrimary) {\r\n setCheckedSetNewDefault(false);\r\n } else setCheckedSetNewDefault(true);\r\n }\r\n //close menu\r\n handleCloseWalletMenu();\r\n };\r\n\r\n const editAccountHandler = (e) => {\r\n const regex = /^[0-9]*$/;\r\n let newValue = e.target.value;\r\n let handledId = e.target.id.replace('Updater', '');\r\n //UPDATE description\r\n if (e.target.id === 'descriptionUpdater') {\r\n setEditAccount({\r\n ...editAccount,\r\n [handledId]: newValue,\r\n });\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: newValue,\r\n });\r\n } else {\r\n // UPDATE routing or account number (use regex parameters for routing number only)\r\n if (e.target.id === 'routingNumberUpdater' && regex.test(newValue)) {\r\n let routingNumTruncated = newValue.slice(0, 9);\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: routingNumTruncated,\r\n });\r\n setEditAccount({\r\n ...editAccount,\r\n [handledId]: routingNumTruncated,\r\n });\r\n } else if (\r\n e.target.id === 'accountNumberUpdater' ||\r\n e.target.id === 'confirmAccountUpdater'\r\n ) {\r\n setDisplayedValue({\r\n ...displayedValue,\r\n [handledId]: newValue,\r\n });\r\n setEditAccount({\r\n ...editAccount,\r\n [handledId]: newValue,\r\n });\r\n }\r\n }\r\n };\r\n\r\n const saveEditAccount = async (e) => {\r\n setLoading(true);\r\n let updatedFailedPrenoteAccount = {\r\n id: editAccount.id,\r\n description: editAccount.description,\r\n accountNumber: editAccount.accountNumber,\r\n routingNumber: editAccount.routingNumber,\r\n isPrimary: checkedSetNewDefault,\r\n memberId: props.member.id,\r\n bankName:\r\n routingBankInfo[0]?.status === 'success'\r\n ? routingBankInfo[0].data.name\r\n : '',\r\n bankAccountTypeId: editAccount.bankAccountTypeId\r\n ? editAccount.bankAccountTypeId\r\n : 1,\r\n prenoteStatusId: 1,\r\n };\r\n\r\n try {\r\n await walletService.updateBankAccountForMember(\r\n updatedFailedPrenoteAccount\r\n );\r\n setLoading(false);\r\n setError(false);\r\n } catch (error) {\r\n setLoading(false);\r\n setError('Error updating bank account');\r\n console.error('update bank error', error);\r\n }\r\n\r\n //Clear form\r\n setRoutingBankInfo([]);\r\n setAddNewAccount(false);\r\n setEditAccount(false);\r\n setDisplayedValue({});\r\n\r\n setCheckedSetNewDefault(false);\r\n\r\n //update bank account list\r\n props.getBankAccount();\r\n };\r\n\r\n let accountTypes = [\r\n { id: 1, name: 'Checking' },\r\n { id: 2, name: 'Savings' },\r\n ];\r\n\r\n //set either new or edited bank account type id\r\n const bankAccountHandler = (e, addOrEdit) => {\r\n console.error(('bank account Type Id', e.target.value));\r\n let value = e.target.value;\r\n if (addOrEdit == 'Add') {\r\n setAddNewAccount({\r\n ...addNewAccount,\r\n bankAccountTypeId: value,\r\n });\r\n } else {\r\n setEditAccount({\r\n ...editAccount,\r\n bankAccountTypeId: value,\r\n });\r\n }\r\n };\r\n\r\n // Check Routing Number + get bank info from Routing Number\r\n const [routingBankInfo, setRoutingBankInfo] = useState([]);\r\n const checkRoutingNumber = async (e) => {\r\n let _bankInfo;\r\n if (addNewAccount) {\r\n _bankInfo = await walletService.getBankFromRouting(\r\n addNewAccount.routingNumber\r\n );\r\n } else if (editAccount) {\r\n _bankInfo = await walletService.getBankFromRouting(\r\n editAccount.routingNumber\r\n );\r\n }\r\n\r\n setRoutingBankInfo(_bankInfo);\r\n\r\n console.error('banking info', _bankInfo);\r\n };\r\n\r\n //Check account added and CONFIRM account match\r\n const [matchingAccountError, setMatchingAccountError] = useState(false);\r\n const checkMatchingAccount = () => {\r\n if (addNewAccount) {\r\n if (\r\n addNewAccount?.accountNumber?.length > 0 &&\r\n addNewAccount.accountNumber !== addNewAccount.confirmAccount\r\n )\r\n setMatchingAccountError(true);\r\n else setMatchingAccountError(false);\r\n } else if (editAccount) {\r\n if (\r\n editAccount?.accountNumber?.length > 0 &&\r\n editAccount.accountNumber !== editAccount.confirmAccount\r\n )\r\n setMatchingAccountError(true);\r\n else setMatchingAccountError(false);\r\n }\r\n };\r\n\r\n //disable save button if all fields are not filled AND account numbers do not match\r\n //Adding new account\r\n useEffect(() => {\r\n if (addNewAccount) {\r\n let nameProvided = addNewAccount?.description?.length > 0;\r\n let routingProvided = addNewAccount?.routingNumber?.length > 0;\r\n let accountProvided = addNewAccount?.accountNumber?.length > 0;\r\n let confirmProvided = addNewAccount?.confirmAccount?.length > 0;\r\n if (\r\n nameProvided &&\r\n routingProvided &&\r\n accountProvided &&\r\n confirmProvided &&\r\n !matchingAccountError\r\n ) {\r\n setDisableSave(false);\r\n } else setDisableSave(true);\r\n }\r\n }, [addNewAccount, matchingAccountError]);\r\n\r\n //Editing existing account\r\n useEffect(() => {\r\n if (editAccount) {\r\n let _editAccount = { ...editAccount };\r\n delete _editAccount.confirmAccount;\r\n let nameProvided = editAccount?.description?.length > 0;\r\n let routingProvided = editAccount?.routingNumber?.length > 0;\r\n let accountProvided = editAccount?.accountNumber?.length > 0;\r\n let confirmProvided = editAccount?.confirmAccount?.length > 0;\r\n if (\r\n nameProvided &&\r\n routingProvided &&\r\n accountProvided &&\r\n confirmProvided &&\r\n !matchingAccountError &&\r\n (editAccount.routingNumber !== failedPrenoteAccount.routingNumber ||\r\n editAccount.accountNumber !== failedPrenoteAccount.accountNumber ||\r\n editAccount.bankAccountTypeId !==\r\n failedPrenoteAccount.bankAccountTypeId)\r\n // JSON.stringify(_editAccount) != JSON.stringify(props.failedPrenote)\r\n ) {\r\n setDisableSave(false);\r\n } else setDisableSave(true);\r\n }\r\n }, [editAccount, matchingAccountError]);\r\n\r\n //RESET prenote status to 3\r\n let handleUnblockBank = async (e, id) => {\r\n try {\r\n let updatedAccount = await walletService.unblockBankAccount(id);\r\n\r\n if (updatedAccount) {\r\n //display success message temporarily w/ setTimeout, it will hide after 5 seconds\r\n setDisplayPrenoteSuccessMessage(id);\r\n\r\n //close the edit account form\r\n setEditAccount(false);\r\n }\r\n } catch (error) {\r\n console.error('ERROR unblocking account \\n\\n', error);\r\n }\r\n handleCloseWalletMenu();\r\n props.getBankAccount();\r\n };\r\n\r\n //ARCHVE BANK ACCOUNT - can only archive a bank account that is not the default\r\n const handleDeleteBank = (e, id) => {\r\n //check if any account and action are already in snackbar, if so, run current undo action BEFORE setting new action\r\n //update local state of bank accounts FOR DISPLAY ONLY to move account to archive/hide from Active bank list immediately\r\n let updatedBankAccounts = props.bankAccount.map((account) => {\r\n if (account.id === id) {\r\n return { ...account, isDeleted: true };\r\n }\r\n return account;\r\n });\r\n props?.setBankAccount(updatedBankAccounts);\r\n\r\n //display undo snackbar and give option to undo\r\n setUndoSnackbarInfo({\r\n ...undoSnackbarInfo,\r\n action: true,\r\n message: 'Payment method moved to archive',\r\n confirmAction: true,\r\n autoHideDuration: 5000,\r\n actionFunction: () => confirmDeleteBank(e, id),\r\n });\r\n\r\n //close menu\r\n handleCloseWalletMenu();\r\n };\r\n\r\n //run after timer runs out for undo snackbar\r\n const confirmDeleteBank = async (e, id) => {\r\n //delete from database\r\n let accountToDelete = props.bankAccount.find((account) => {\r\n return account.id === id;\r\n });\r\n try {\r\n await walletService.deleteBankAccount(id);\r\n } catch (error) {\r\n console.error('ERROR deleting account \\n\\n', error, accountToDelete);\r\n }\r\n\r\n // //refresh bank account list and close drawer\r\n // props.getBankAccount()\r\n };\r\n\r\n //EDIT wallet menu (on all active accounts except default)\r\n const [editWalletMenu, setEditWalletMenu] = useState(null);\r\n const handleCloseWalletMenu = () => {\r\n setEditWalletMenu(null);\r\n };\r\n\r\n //////////////////// Archived bank accounts \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\r\n const [archivedBankAccounts, setArchivedBankAccounts] = useState([]);\r\n const [showArchived, setShowArchived] = useState(false);\r\n\r\n useEffect(() => {\r\n //filter archived accounts\r\n let _archivedAccounts = props?.bankAccount?.filter((account) => {\r\n return account.isDeleted;\r\n });\r\n setArchivedBankAccounts(_archivedAccounts);\r\n //check if show archive button should be disabled depending on if there are any archived accounts\r\n if (_archivedAccounts.length < 1) setShowArchived(false);\r\n }, [props?.bankAccount, props?.editWalletDrawerOpen]);\r\n\r\n //Edit archived account menu\r\n const [editArchivedAccountMenu, setEditArchivedAccountMenu] = useState(null);\r\n const handleCloseArchivedAccountMenu = () => {\r\n setEditArchivedAccountMenu(null);\r\n };\r\n\r\n //Unarchive Account - set isDeleted to 0\r\n const handleUnarchiveAccount = (e, account) => {\r\n //check if any account and action are already in snackbar - potentially need to run current undo action BEFORE setting new action // temp fix is disable archive/unarchive btn IF undo snackbar is open\r\n //update local state of bank accounts FOR DISPLAY ONLY to move account to archive/hide from Active bank list immediately\r\n let updatedBankAccounts = props.bankAccount.map((acc) => {\r\n if (acc.id === account.id) {\r\n return { ...acc, isDeleted: false };\r\n }\r\n return acc;\r\n });\r\n props?.setBankAccount(updatedBankAccounts); //updating bankAccount state will triger useEffects to refilter archived vs. unarchived accounts\r\n //display undo snackbar and give option to undo\r\n setUndoSnackbarInfo({\r\n ...undoSnackbarInfo,\r\n action: true,\r\n message: 'Payment method unarchived',\r\n confirmAction: true,\r\n autoHideDuration: 5000,\r\n actionFunction: (e) => confirmUnarchive(e, account),\r\n });\r\n\r\n //close menu\r\n handleCloseArchivedAccountMenu();\r\n };\r\n\r\n const confirmUnarchive = async (e, account) => {\r\n let _updatedAccount = {\r\n ...account,\r\n isDeleted: false,\r\n };\r\n try {\r\n await walletService.updateBankAccountForMember(_updatedAccount);\r\n } catch (error) {\r\n console.error('ERROR unarchiving account', error);\r\n }\r\n //refresh bank account list\r\n // props.getBankAccount()\r\n };\r\n ////////////////////////////////////////////////////////////////////////////////////\r\n\r\n //display and mask account and routing numbers\r\n const [displayedValue, setDisplayedValue] = useState({\r\n routingNumber: '',\r\n accountNumber: '',\r\n confirmAccount: '',\r\n });\r\n\r\n const handleCancelClick = () => {\r\n //clear and close form\r\n setRoutingBankInfo([]);\r\n setAddNewAccount(false);\r\n setEditAccount(false);\r\n setDisplayedValue({});\r\n setEditAccount(false);\r\n setError(false);\r\n };\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n Edit Wallet\r\n \r\n \r\n \r\n \r\n {/* Display Accounts if not Adding or Editing */}\r\n \r\n \r\n \r\n \r\n setShowArchived(!showArchived)}\r\n checked={showArchived}\r\n disabled={archivedBankAccounts?.length < 1}\r\n />\r\n Show Archived \r\n \r\n\r\n {/* Active Bank Accounts Section*/}\r\n \r\n \r\n Saved Payment Methods\r\n \r\n\r\n \r\n \r\n Default payment method updated!\r\n \r\n \r\n \r\n \r\n\r\n {/* Accounts */}\r\n\r\n \r\n \r\n ADD NEW PAYMENT METHOD\r\n \r\n \r\n )}\r\n\r\n {/* Archived Accounts */}\r\n 0}>\r\n \r\n \r\n Archived Payment Methods\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n {/* Adding a new account - display form */}\r\n \r\n \r\n Add New Payment Method\r\n \r\n\r\n \r\n \r\n \r\n \r\n {\r\n checkRoutingNumber();\r\n }}\r\n label=\"Routing Number\"\r\n value={displayedValue?.routingNumber || ''}\r\n placeholder=\"Routing Number\"\r\n />\r\n \r\n\r\n \r\n \r\n\r\n \r\n {\r\n // maskOnBlur(e);\r\n checkMatchingAccount();\r\n }}\r\n // onFocus={unmaskOnFocus}\r\n label=\"Confirm Account Number\"\r\n value={displayedValue?.confirmAccount || ''}\r\n placeholder=\"Confirm Account Number\"\r\n />\r\n \r\n\r\n \r\n bankAccountHandler(e, 'Add')}\r\n label=\"Account Type\"\r\n >\r\n {accountTypes.map((account) => (\r\n \r\n {account.name}\r\n \r\n ))}\r\n \r\n \r\n\r\n {/* Set as default account checkbox */}\r\n \r\n \r\n\r\n {/* Display Bank associated w/ Routing number -success message */}\r\n \r\n \r\n {routingBankInfo[0]?.status == 'success' && (\r\n \r\n Succesfully Connected\r\n \r\n \r\n )}\r\n {routingBankInfo[0]?.status == 'fail' && (\r\n \r\n \r\n Incorrect routing number - no bank found\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n \r\n \r\n CANCEL\r\n \r\n\r\n \r\n {loading ? (\r\n \r\n \r\n \r\n\r\n {/* Edit Failed Prenote Account */}\r\n \r\n \r\n Edit Failed Prenote Account\r\n \r\n\r\n \r\n \r\n \r\n \r\n {\r\n checkRoutingNumber();\r\n }}\r\n label=\"Routing Number\"\r\n InputLabelProps={{ shrink: 'auto' }}\r\n value={displayedValue?.routingNumber || ''}\r\n />\r\n \r\n\r\n \r\n {\r\n // maskOnBlur(e);\r\n // }}\r\n // onFocus={unmaskOnFocus}\r\n label=\"Account Number\"\r\n InputLabelProps={{ shrink: 'auto' }}\r\n value={displayedValue.accountNumber}\r\n />\r\n \r\n\r\n \r\n {\r\n // maskOnBlur(e);\r\n checkMatchingAccount();\r\n }}\r\n // onFocus={unmaskOnFocus}\r\n label=\"Confirm Account Number\"\r\n InputLabelProps={{ shrink: 'auto' }}\r\n value={displayedValue.confirmAccount}\r\n />\r\n \r\n\r\n \r\n bankAccountHandler(e, 'Edit')}\r\n label=\"Account Type\"\r\n InputLabelProps={{ shrink: 'auto' }}\r\n >\r\n {accountTypes.map((account) => (\r\n \r\n {account.name}\r\n \r\n ))}\r\n \r\n \r\n\r\n {/* Set as default account checkbox */}\r\n \r\n \r\n\r\n {/* Display Bank associated w/ Routing number -success message */}\r\n \r\n \r\n \r\n Succesfully Connected\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n CANCEL\r\n \r\n\r\n \r\n {loading ? (\r\n \r\n \r\n \r\n \r\n\r\n {/* display error if save new or update existing account fails */}\r\n {error && (\r\n \r\n {error} \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n}\r\n","import { useEffect, useState, useCallback } from 'react';\r\nimport {\r\n formatUTCToShortDate,\r\n formatUTCYYYYMMDD,\r\n todayDateObj,\r\n todayDateShort,\r\n} from '../../../utils';\r\nimport walletService from '../../../../services/wallet-service';\r\n\r\n//MuiIcons\r\nimport AccessTimeIcon from '@mui/icons-material/AccessTime';\r\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\r\n\r\n//Mui Components\r\nimport { Alert, Chip, Button } from '@mui/material';\r\nimport Box from '@mui/material/Box';\r\n\r\n//Our Components\r\nimport ButtonInfinityLoader from '../../../UH-loading-animation/ButtonInfinityLoader';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n alertChip: (paymentType) => ({\r\n height: '24px',\r\n color:\r\n paymentType === 'oneTime' ? '#0288D1!important' : '#1B5E20!important',\r\n }),\r\n chipBody: (paymentType) => ({\r\n minWidth: '200px',\r\n backgroundColor:\r\n paymentType === 'oneTime'\r\n ? 'background.onMedicalLeaveChip'\r\n : 'background.activeWorking',\r\n color:\r\n paymentType === 'oneTime'\r\n ? 'primary.onMedicalLeaveChip'\r\n : 'primary.activeChip',\r\n fontFamily: 'Archivo',\r\n margin: '10px 0px 0px auto',\r\n fontWeight: '500',\r\n alignItems: 'center',\r\n fontSize: '13px',\r\n alignSelf: 'flex-end',\r\n }),\r\n resetScheduleAlert: {\r\n padding: '6px 20px',\r\n position: 'relative',\r\n fontFamily: 'Archivo',\r\n fontWeight: '400',\r\n lineHeight: '20px',\r\n margin: '10px 0px 0px auto',\r\n fontSize: '14px',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n maxWidth: '450px',\r\n borderRadius: '4px',\r\n },\r\n otpStuckWarning: (isPlansTab) => ({\r\n padding: '6px 20px',\r\n position: 'relative',\r\n fontFamily: 'Archivo',\r\n fontWeight: '400',\r\n lineHeight: '20px',\r\n margin: isPlansTab ? '10px 0px 0px 0px' : '10px 0px 0px auto',\r\n fontSize: '14px',\r\n maxWidth: '275px',\r\n borderRadius: '4px',\r\n alignSelf: isPlansTab ? 'flex-start' : 'flex-end',\r\n }),\r\n componentBody: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n // alignItems: 'flex-end',\r\n // maxWidth: '450px',\r\n },\r\n};\r\n\r\nexport default function NextPaymentChip(props) {\r\n const currentDate = todayDateObj;\r\n const [loading, setLoading] = useState(false);\r\n\r\n // Function to check for stuck one-time payments\r\n const checkStuckOneTimePayment = useCallback(() => {\r\n let otpStuckInPast = false;\r\n\r\n //nextoccurrence is in future of today BUT calculated next occurrence is in the past = otp stuck in past\r\n if (\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate <\r\n todayDateShort &&\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate !==\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate &&\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate >\r\n todayDateShort\r\n ) {\r\n otpStuckInPast = true;\r\n } else if (\r\n //both next occurrence AND calculated next occurrence is in the past = both otp and pay schedule stuck in past\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate <\r\n todayDateShort &&\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate !==\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate &&\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate <\r\n todayDateShort\r\n ) {\r\n otpStuckInPast = true;\r\n } else {\r\n otpStuckInPast = false;\r\n }\r\n return otpStuckInPast;\r\n }, [props?.currentCombinedPaymentInfo]); // Added dependencies here\r\n\r\n // Check for upcoming payment in future (either active schedule or one-time payment)\r\n\r\n const [otpStuckInPast, setOtpStuckInPast] = useState(false);\r\n useEffect(() => {\r\n if (\r\n (props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate,\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate)\r\n ) {\r\n let _otpStuckInPast = checkStuckOneTimePayment();\r\n if (_otpStuckInPast) {\r\n setOtpStuckInPast(_otpStuckInPast);\r\n } else {\r\n setOtpStuckInPast(false);\r\n }\r\n }\r\n }, [\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate,\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate,\r\n ]);\r\n\r\n const handleReset = async () => {\r\n setLoading(true);\r\n try {\r\n let result = await walletService.resetPaymentSchedule(\r\n props?.currentCombinedPaymentInfo.activePaymentSchedule\r\n );\r\n if (result) {\r\n props.getPaymentSchedule();\r\n setLoading(false);\r\n }\r\n } catch (error) {\r\n console.log('resetting payment schedule');\r\n setLoading(false);\r\n }\r\n };\r\n\r\n // Check for upcoming payment in future (either active schedule or one-time payment)\r\n const [chipType, setChipType] = useState(null);\r\n const checkChipType = () => {\r\n let chipType;\r\n if (\r\n (props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate &&\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate >=\r\n todayDateShort &&\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate >=\r\n todayDateShort) ||\r\n props?.displayNextPaymentChip?.oneTimePaymentsExist\r\n ) {\r\n // Compare day from calculatedNextOccurrence to active schedule payment date(s)\r\n // If schedule exists and is enabled and these dates don't match OR future one-time payment exists before next scheduled payment, then it is a one time payment\r\n if (\r\n props?.currentCombinedPaymentInfo?.futureOneTimePayment ||\r\n props?.displayNextPaymentChip?.oneTimePaymentsExist\r\n ) {\r\n let futureOneTimePaymentShort = props?.currentCombinedPaymentInfo\r\n ?.futureOneTimePayment?.occurrence\r\n ? formatUTCYYYYMMDD(\r\n props?.currentCombinedPaymentInfo?.futureOneTimePayment\r\n ?.occurrence\r\n )\r\n : null;\r\n //next scheduled payment date we build in memberProfile - need to use this in case nextOccurrence from db is stuck in past\r\n let nextScheduledPaymentDateShort = props?.currentCombinedPaymentInfo\r\n ?.nextScheduledPaymentDate\r\n ? formatUTCYYYYMMDD(\r\n props?.currentCombinedPaymentInfo?.nextScheduledPaymentDate\r\n )\r\n : null;\r\n // check if future one time payment is before next scheduled payment or future one time payment exists but payment schedule possibly does not (related to a disabled schedule)\r\n futureOneTimePaymentShort <= nextScheduledPaymentDateShort ||\r\n (!nextScheduledPaymentDateShort && futureOneTimePaymentShort)\r\n ? (chipType = 'oneTime')\r\n : (chipType = 'nextScheduled');\r\n } else {\r\n chipType = 'nextScheduled';\r\n }\r\n } else {\r\n // Check if the calculatedNextOccurrence is in the past\r\n if (\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate <\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate &&\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate >\r\n todayDateShort\r\n ) {\r\n // Next occurrence in past but calculated next occurrence is in the past = OTP stuck in past\r\n // We want to show the regular next scheduled payment chip but also show the warning for OTP stuck\r\n chipType = 'nextScheduled';\r\n } else if (\r\n // Next occurrence in past AND calculated next occurrence is in the past = both OTP and pay schedule stuck in past\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate !==\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate &&\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate <\r\n todayDateShort\r\n ) {\r\n chipType = 'error';\r\n } else {\r\n chipType = 'error';\r\n }\r\n }\r\n return chipType;\r\n };\r\n\r\n useEffect(() => {\r\n //check for existing and enabled active one time payment schedule OR future one time payment\r\n if (\r\n props?.currentCombinedPaymentInfo?.calculatedNextOccurrenceShortDate ||\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceShortDate ||\r\n props?.displayNextPaymentChip?.oneTimePaymentsExist\r\n ) {\r\n let _chipType = checkChipType();\r\n setChipType(_chipType);\r\n } else {\r\n //reset chipType if no data (likely means schedule is disabled)\r\n setChipType(null);\r\n }\r\n }, [\r\n props?.currentCombinedPaymentInfo,\r\n props?.currentCombinedPaymentInfo?.nextOccurrenceFromActiveSchedule,\r\n props?.displayNextPaymentChip?.oneTimePaymentsExist,\r\n ]);\r\n\r\n return (\r\n \r\n \r\n {loading ? (\r\n \r\n );\r\n}\r\n","//Mui Components\r\nimport Chip from '@mui/material/Chip';\r\n\r\nexport default function DisabledPaymentScheduleChip(props) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n Method\r\n \r\n \r\n \r\n \r\n EDIT\r\n \r\n \r\n \r\n\r\n {/* Payment Schedule */}\r\n {props?.paymentSchedule && props?.paymentSchedule?.length > 0 && (\r\n \r\n {/* Check if multiple payment schedules exist and if BOTH are disabled and member on PeakPay, show schedule disabled */}\r\n\r\n {!props?.paymentSchedule[0]?.isEnabled &&\r\n !props?.paymentSchedule[1]?.isEnabled &&\r\n props?.paymentSchedule[0]?.isPeakPay && (\r\n \r\n )}\r\n\r\n {permissions.viewWallet ? (\r\n <>\r\n {defaultAccount && (\r\n \r\n {defaultAccount.prenoteStatusId === 4 ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n\r\n {/* Account description OR Member name and Account Type */}\r\n \r\n \r\n {defaultAccount?.description\r\n ? `${defaultAccount?.description} - `\r\n : `${props?.member?.firstName} ${props?.member?.lastName} - `}{' '}\r\n {getMemberAccountType(defaultAccount.bankAccountTypeId)}{' '}\r\n account\r\n \r\n\r\n {/* Bank Information*/}\r\n \r\n {defaultAccount.bankName || 'Account'} *\r\n {defaultAccount.accountNumber?.slice(-4)}\r\n \r\n \r\n \r\n {defaultAccount?.isPrimary && (\r\n <>\r\n Default \r\n \r\n )}\r\n \r\n \r\n )}\r\n\r\n {/* default display if no bank account info exists */}\r\n {!defaultAccount && (\r\n \r\n \r\n No Bank Information\r\n \r\n \r\n )}\r\n\r\n {/* Show Failed Prenote Message if account has failed prenote */}\r\n {defaultAccount?.prenoteStatusId === 4 && (\r\n \r\n Failed Prenote\r\n \r\n )}\r\n \r\n ) : (\r\n \r\n \r\n You do not have the required permissions to view bank accounts.\r\n \r\n \r\n )}\r\n\r\n \r\n );\r\n}\r\n","import Settings from \"../settings\";\r\nimport { baseService } from \"./baseService\";\r\n\r\nclass internalAttachmentService extends baseService {\r\n getAttachments() {\r\n const url = Settings.API_URL + \"attachment\";\r\n return this.get(url);\r\n }\r\n getAttachmentsForMember(memberId) {\r\n const url = Settings.API_URL + \"attachment/\" + memberId;\r\n return this.get(url);\r\n }\r\n getAttachmentsByTicketId(ticketId) {\r\n const url = Settings.API_URL + \"attachment/ticket/\" + ticketId;\r\n return this.get(url);\r\n }\r\n getAttachmentsByGroupPlanId(groupPlanId) {\r\n const url = Settings.API_URL + \"attachment/groupplan/\" + groupPlanId;\r\n return this.get(url);\r\n }\r\n uploadAttachment(memberId, attachmentTypeId, filename, base64) {\r\n const url = Settings.API_URL + \"attachment/\" + memberId;\r\n var objToPost = {\r\n attachmentTypeId: attachmentTypeId,\r\n filename: filename,\r\n file: base64\r\n }\r\n return this.post(url, objToPost);\r\n }\r\n uploadAttachmentTicket(ticketId, attachmentTypeId, filename, base64) {\r\n const url = Settings.API_URL + \"attachment/ticket/\" + ticketId;\r\n var objToPost = {\r\n attachmentTypeId: attachmentTypeId,\r\n filename: filename,\r\n file: base64\r\n }\r\n return this.post(url, objToPost);\r\n }\r\n /// Taskes the member id, the message you would like to send, and the attachmentId in GUID form -- let me know if you want to adjust. MB\r\n emailAttachmentToMember(memberId, message, attachmentId) {\r\n const url = Settings.API_URL + \"attachment/\" + memberId + \"/send\";\r\n\r\n var objToPost = {\r\n files: [],\r\n message: message\r\n };\r\n\r\n objToPost.files.push(attachmentId);\r\n\r\n return this.post(url, objToPost);\r\n }\r\n}\r\n\r\nconst attachmentService = new internalAttachmentService();\r\n\r\nexport default attachmentService;","import React, { useContext, useEffect, useRef, useState } from 'react';\r\n\r\n//Mui Components\r\nimport Button from '@mui/material/Button';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport TextField from '@mui/material/TextField';\r\nimport { Chip, Divider, Typography } from '@mui/material';\r\n\r\n//Mui icons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\n\r\n// Methods\r\nimport attachmentService from '../../../../../../services/attachment-service';\r\n\r\nexport default function DocumentDrawer(props) {\r\n //Drawer Logic\r\n const handleDrawerClose = (e) => {\r\n props.setDocumentDrawerOpen(false);\r\n };\r\n\r\n const [customMessage, setCustomMessage] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n\r\n const sendEmail = async () => {\r\n let selectedDocument = props.allDocuments?.length\r\n ? props?.selectedDocument\r\n : props.selectedDocument?.uniqueId;\r\n try {\r\n setLoading(true);\r\n let sendEmail = await attachmentService.emailAttachmentToMember(\r\n props?.member?.id,\r\n customMessage,\r\n selectedDocument\r\n );\r\n props.setMessage({\r\n ...props.message,\r\n messageDisplay: true,\r\n autoHideDuration: '1600',\r\n severity: 'success',\r\n backgroundColor: '',\r\n message: 'Successfully Sent Email',\r\n });\r\n setCustomMessage('');\r\n props.setDocumentDrawerOpen(false);\r\n } catch (err) {\r\n console.error(err);\r\n props.setMessage({\r\n ...props.message,\r\n messageDisplay: true,\r\n autoHideDuration: '2400',\r\n severity: 'error',\r\n backgroundColor: '',\r\n message: `${err}`,\r\n });\r\n }\r\n setLoading(false);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n Send Document via Email\r\n \r\n \r\n\r\n
\r\n `}\r\n />\r\n ),\r\n }}\r\n sx={{ marginBottom: '20px' }}\r\n value=\"\"\r\n disabled={true}\r\n />\r\n\r\n `}\r\n />\r\n ),\r\n }}\r\n sx={{ marginBottom: '20px' }}\r\n value=\"\"\r\n disabled={true}\r\n />\r\n\r\n \r\n document.uniqueId == props.selectedDocument\r\n )[0]?.filename\r\n : props.selectedDocument?.filename\r\n }\r\n />\r\n ),\r\n }}\r\n sx={{ marginBottom: '20px' }}\r\n value=\"\"\r\n disabled={true}\r\n />\r\n\r\n setCustomMessage(e.target.value)}\r\n sx={{\r\n marginBottom: '40px',\r\n }}\r\n />\r\n\r\n \r\n \r\n Send Email\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useContext, useEffect, useState, useRef } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n//services\r\nimport enrollmentService from '../../../../../../../services/enrollment-service';\r\nimport attachmentService from '../../../../../../../services/attachment-service';\r\n\r\n//Mui Components\r\nimport Box from '@mui/material/Box';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Paper from '@mui/material/Paper';\r\nimport Typography from '@mui/material/Typography';\r\nimport Button from '@mui/material/Button';\r\nimport ButtonGroup from '@mui/material/ButtonGroup';\r\nimport FormControl from '@mui/material/FormControl';\r\nimport InputLabel from '@mui/material/InputLabel';\r\nimport Select from '@mui/material/Select';\r\nimport TextField from '@mui/material/TextField';\r\n\r\n//Mui Icons\r\nimport UploadFileIcon from '@mui/icons-material/UploadFile';\r\nimport CircleIcon from '@mui/icons-material/Circle';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\n\r\n//our components\r\nimport DocumentDrawer from '../../member-documents-tab/DocumentDrawer';\r\nimport { thisUserContext } from '../../../../../nav-container/NavContainer';\r\nimport FlexSnackbar from '../../../../../../flex-snackbar/FlexSnackbar';\r\n\r\nexport default function MemberPlanDocuments(props) {\r\n const componentStyles = {\r\n componentBody: {\r\n width: '100%',\r\n borderRadius: '0px',\r\n fontFamily: 'Poppins',\r\n backgroundColor: 'background.default',\r\n overflowY: 'auto',\r\n paddingBottom: '16px',\r\n borderBottom: '1px solid rgba(217, 217, 217, 1)',\r\n },\r\n sectionContainer: {\r\n padding: '16px 16px 8px',\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'top',\r\n margin: '0 auto',\r\n position: 'sticky',\r\n top: '0px',\r\n backgroundColor: 'background.default',\r\n zIndex: 5,\r\n // border: \"2px solid blue\"\r\n },\r\n title: {\r\n color: 'text.primary',\r\n fontFamily: 'Poppins',\r\n fontSize: '20px',\r\n fontWeight: '500',\r\n },\r\n description: {\r\n color: 'text.secondary',\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n fontWeight: '400',\r\n paddingBottom: '6px',\r\n },\r\n documentListContainer: {\r\n // display: \"flex\",\r\n // flexWrap: \"wrap\",\r\n // flexDirection: \"column\",\r\n // justifyContent: \"flex-start\",\r\n // margin: \"0px 16px\",\r\n maxHeight: 'calc(100vh - 685px)',\r\n },\r\n singleDocumentRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n margin: '0px 0px 12px 16px',\r\n maxWidth: '700px',\r\n },\r\n documentIconContainer: {\r\n margin: '0px 16px',\r\n },\r\n documentData: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n padding: '0px 8px',\r\n },\r\n documentDownloadMenu: {\r\n textAlign: 'center',\r\n padding: '0px 14px',\r\n margin: '0 0',\r\n marginLeft: 'auto',\r\n position: 'relative',\r\n // border: \"2px solid red\"\r\n },\r\n };\r\n\r\n const [thisUser, setThisUser] = useState();\r\n let _thisUser = useContext(thisUserContext);\r\n let getThisUser = async () => {\r\n setThisUser(_thisUser.thisUser);\r\n };\r\n useEffect(() => {\r\n if (_thisUser) getThisUser();\r\n }, [_thisUser]);\r\n\r\n const [enrollmentDocuments, setEnrollmentDocuments] = useState([]);\r\n const getAllDocuments = async (memberId) => {\r\n await props.getAllDocuments();\r\n };\r\n\r\n //get all documents, filter to show only enrollment documents, and update doc list if new member is selected\r\n useEffect(() => {\r\n if (props.documents) {\r\n let filteredDocuments = props.documents.filter(\r\n (doc) => doc.attachmentTypeId === 1\r\n );\r\n setEnrollmentDocuments(filteredDocuments);\r\n }\r\n }, [props.documents, props.documents?.length]);\r\n\r\n //open document menu to download\r\n //need to update anchor element (anchorEl) to the current document for each row\r\n const [anchorEl, setAnchorEl] = useState({});\r\n\r\n const handleOpenRowMenu = (e, document) => {\r\n setAnchorEl({\r\n ...anchorEl,\r\n [e.currentTarget.value]: e.currentTarget,\r\n });\r\n setSelectedDocument(document);\r\n };\r\n\r\n const handleCloseRowMenu = () => {\r\n setAnchorEl({});\r\n };\r\n\r\n const [attachmentTypes, setAttachmentTypes] = useState([]);\r\n useEffect(() => {\r\n if (props.attachmentTypes) setAttachmentTypes(props.attachmentTypes);\r\n }, [props.attachmentTypes]);\r\n\r\n const uploadAnchorEl = useRef(null);\r\n\r\n const [uploadDocument, setUploadDocument] = useState({\r\n file: null,\r\n attachmentTypeId: 1,\r\n fileName: '',\r\n base64: '',\r\n });\r\n const handleUploadFinalize = async () => {\r\n try {\r\n await attachmentService.uploadAttachment(\r\n props.member.id,\r\n uploadDocument.attachmentTypeId,\r\n uploadDocument.fileName,\r\n uploadDocument.base64\r\n );\r\n setMessage({\r\n ...message,\r\n messageDisplay: true,\r\n autoHideDuration: '1600',\r\n severity: 'success',\r\n backgroundColor: '',\r\n message: 'Successfully uploaded file',\r\n });\r\n getAllDocuments(props.member.id);\r\n } catch (error) {\r\n setMessage({\r\n ...message,\r\n messageDisplay: true,\r\n autoHideDuration: '1600',\r\n severity: 'error',\r\n backgroundColor: '',\r\n message: 'Error uploading file',\r\n });\r\n }\r\n let blankState = {\r\n file: null,\r\n attachmentTypeId: 1,\r\n fileName: '',\r\n base64: '',\r\n };\r\n setUploadDocument(blankState);\r\n };\r\n\r\n //download a document\r\n //need to pass in the document info of whichever document is selected\r\n const [selectedDocument, setSelectedDocument] = useState({});\r\n const [documentDrawerOpen, setDocumentDrawerOpen] = useState(false);\r\n const handleSendClick = () => {\r\n setDocumentDrawerOpen(true);\r\n setAnchorEl(null);\r\n };\r\n\r\n const downloadSingleDocument = (selectedDocument) => {\r\n if (selectedDocument.uniqueId) {\r\n const link = document.createElement('a');\r\n link.download = `/api/attachment/${selectedDocument.uniqueId}`;\r\n link.href = `./api/attachment/${selectedDocument.uniqueId}`;\r\n link.click();\r\n //clear it from the dom\r\n link.remove();\r\n }\r\n };\r\n\r\n const [message, setMessage] = useState({});\r\n\r\n useEffect(() => {\r\n const timeId = setTimeout(() => {\r\n // After 3 seconds set the show value to false\r\n setMessage({\r\n ...message,\r\n messageDisplay: false,\r\n autoHideDuration: '',\r\n severity: 'info',\r\n backgroundColor: '',\r\n message: '',\r\n });\r\n }, 5000);\r\n\r\n return () => {\r\n clearTimeout(timeId);\r\n };\r\n }, [message.messageDisplay]);\r\n\r\n const handleMessageClose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n setMessage({\r\n ...message,\r\n messageDisplay: false,\r\n autoHideDuration: '',\r\n severity: 'info',\r\n backgroundColor: '',\r\n message: '',\r\n });\r\n };\r\n\r\n let getFileAsBase64 = (file, cb) => {\r\n let reader = new FileReader();\r\n //reader is async, so we have to handle promise below\r\n reader.readAsDataURL(file);\r\n\r\n //callback to use result elsewhere\r\n reader.onload = function () {\r\n cb(reader.result);\r\n };\r\n reader.onerror = function (err) {\r\n console.error(err);\r\n };\r\n };\r\n\r\n let handleUploadClick = async (e) => {\r\n if (e.target.files) {\r\n for (let file of e.target.files) {\r\n getFileAsBase64(file, async (result) => {\r\n //just the string, not the encoding\r\n let base64 = result.replace(`data:${file.type};base64,`, '');\r\n setUploadDocument({\r\n ...uploadDocument,\r\n file: file,\r\n fileName: file.name,\r\n base64: base64,\r\n });\r\n });\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n Documents\r\n \r\n \r\n List of all completed enrollment documents.\r\n \r\n \r\n \r\n \r\n UPLOAD\r\n \r\n \r\n\r\n {uploadDocument?.file && (\r\n \r\n Selected File: {uploadDocument?.file?.name} \r\n \r\n Document Type \r\n \r\n setUploadDocument({\r\n ...uploadDocument,\r\n attachmentTypeId: e.target.value,\r\n })\r\n }\r\n label=\"Document Type\"\r\n labelId=\"document-type-label\"\r\n >\r\n {attachmentTypes?.length > 0 &&\r\n attachmentTypes.map((type) => {\r\n return {type.name} ;\r\n })}\r\n \r\n \r\n \r\n setUploadDocument({ ...uploadDocument, fileName: e.target.value })\r\n }\r\n />\r\n \r\n \r\n Upload\r\n \r\n \r\n setUploadDocument({ ...uploadDocument, file: null })\r\n }\r\n >\r\n Cancel\r\n \r\n
\r\n \r\n )}\r\n\r\n {/* document list */}\r\n \r\n {enrollmentDocuments.length > 0 &&\r\n enrollmentDocuments.map((document) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {document?.filename || 'Unnamed document'}\r\n \r\n \r\n {document?.fileType || 'PDF'}{' '}\r\n \r\n\r\n {/* download pdf dropdown menu */}\r\n \r\n <>\r\n handleOpenRowMenu(e, document)}\r\n value={document?.id}\r\n >\r\n \r\n downloadSingleDocument(document)}\r\n >\r\n Download PDF\r\n \r\n\r\n \r\n Send attachment\r\n \r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\n//MuiIcons\r\nimport AccessTimeIcon from '@mui/icons-material/AccessTime';\r\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle';\r\nimport ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\r\n\r\n//Mui Components\r\nimport Chip from \"@mui/material/Chip\";\r\n\r\nexport default function PaymentHealthChips(props) {\r\n\r\n const UsdFormatterDec = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 });\r\n\r\n const [chip, setChip] = useState({\r\n icon: null,\r\n backgroundColor: \"\",\r\n color: \"\",\r\n border: \"\",\r\n borderColor: \"\",\r\n label: \"\",\r\n visibility: 'hidden'\r\n });\r\n\r\n\r\n //buildig chip based off of the object with an isDelinquent property of true or false\r\n const buildChip = () => {\r\n switch (props.paymentHealthStatus?.isDelinquent) {\r\n // switch(false){\r\n case true:\r\n setChip({\r\n icon: (\r\n \r\n \r\n \r\n Are you sure? \r\n \r\n \r\n \r\n \r\n {props?.surveyResponses?.isPilot\r\n ? `Disabling pilot enrollment will switch the member's plan to the Teamsters Voluntary Income Protection VIP+ Plan. Do you want to continue?`\r\n : `Enabling pilot enrollment will switch the member's plan to the IBT\r\n VIP Air Plan. Do you want to continue?`}\r\n \r\n \r\n \r\n\r\n {/* Buttons */}\r\n \r\n \r\n NEVERMIND\r\n \r\n confirmUpdatePilotStatus()}\r\n >\r\n {props?.loading ? (\r\n \r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState, useContext } from 'react';\r\n//Assets\r\nimport airLogo from '../../../../../../assets/images/TeamstersAirLogo.png';\r\n//Services\r\nimport calculatorService from '../../../../../../services/calculator-service';\r\n//Mui icons\r\nimport ManageSearchIcon from '@mui/icons-material/ManageSearch';\r\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\r\nimport FlightIcon from '@mui/icons-material/Flight';\r\n\r\n//Mui Components\r\n// import { Box } from '@mui/system';\r\nimport {\r\n Box,\r\n Button,\r\n Divider,\r\n Menu,\r\n MenuItem,\r\n Paper,\r\n Typography,\r\n Fade,\r\n} from '@mui/material';\r\n\r\n//Our Components\r\nimport EnrollmentSummaryCard from './summary-cards/EnrollmentSummaryCard';\r\nimport PlanSummaryCard from './summary-cards/PlanSummaryCard';\r\nimport SignatureModal from '../../../../../app-external/external-enrollments/signature-modal/SignatureModal';\r\nimport NonPeakPayChip from '../../../DisplayChips/NonPeakPayChip';\r\n//Our components for R-side of plans tab\r\nimport MemberPlanPaymentSummary from './plan-tab-left-side/MemberPlanPaymentSummary';\r\nimport MemberPlanPaymentSchedule from './plan-tab-left-side/MemberPlanPaymentSchedule';\r\nimport MemberPlanDocuments from './plan-tab-left-side/MemberPlanDocuments';\r\nimport PaymentHealthChips from '../../../DisplayChips/PaymentHealthChips';\r\nimport { set } from 'date-fns';\r\nimport PilotStatusModal from './PilotStatusModal';\r\n\r\n//utils\r\nimport { isAirPlan } from '../../../../../utils';\r\n\r\nconst componentStyles = {\r\n titleContainer: { padding: '16px 16px 0px', borderBottom: '0px' },\r\n sectionTitle: {\r\n fontFamily: 'Poppins',\r\n fontWeight: 500,\r\n fontSize: '20px',\r\n lineHeight: '32px',\r\n letterSpacing: '.15px',\r\n color: 'light',\r\n width: '100%',\r\n },\r\n sectionSubtitle: {\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n fontSie: '16px',\r\n lineHeight: '28px',\r\n letter: '.15px',\r\n color: 'text.gray',\r\n width: '100%',\r\n },\r\n divider: {\r\n width: '98%',\r\n height: '1px',\r\n margin: '0 auto',\r\n color: 'background.border',\r\n opacity: 0.6,\r\n },\r\n // enrollmentMenuContainer: {\r\n // display: 'flex',\r\n // flexDirection: 'row',\r\n // justifyContent: 'flex-end',\r\n // textAlign: 'end',\r\n // },\r\n // enrollmentMenuOptions: {\r\n // color: 'text.primary',\r\n // fontFamily: 'Archivo',\r\n // fontWeight: 400,\r\n // fontSize: '14px',\r\n // lineHeight: '24px',\r\n // height: '48px',\r\n // '&:hover': { backgroundColor: 'primary.light' },\r\n // },\r\n};\r\n\r\nexport default function MemberPlansTab(props) {\r\n //////////////RE-enrollment temp modicfications work calculator service logic for getting and answering isPilot question to conditionally render open re-enrollment\r\n //Temoporary for IBT Air re-enrolls We will remove this after getting re-enroll full sorted.\r\n // const [isPilot, setIsPilot] = useState(null);\r\n // const [surveyResponses, setSurveyResponses] = useState(null);\r\n const getSurveyResponses = async () => {\r\n let _surveyResponses = null;\r\n try {\r\n _surveyResponses =\r\n await calculatorService.getRecommendationResponsesForMember(\r\n props?.member?.id\r\n );\r\n if (_surveyResponses) {\r\n props?.setSurveyResponses(_surveyResponses);\r\n setLoading(false);\r\n //close pilot modal after getting responses\r\n handleClosePilotModal();\r\n return _surveyResponses;\r\n }\r\n } catch (error) {\r\n console.error('error ngetting survey responses', error);\r\n //close pilot modal after getting responses\r\n handleClosePilotModal();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (props?.member?.id) {\r\n getSurveyResponses();\r\n }\r\n }, [props?.member?.id]);\r\n\r\n //update survey response for is pilot question\r\n const [loading, setLoading] = useState(false);\r\n const updateSurveyResponse = async (question, answer) => {\r\n setLoading(true);\r\n //local obj to send survey response to db\r\n let localSurveyResObj = { ...props?.surveyResponses };\r\n //update local obj\r\n localSurveyResObj = { ...localSurveyResObj, [question]: answer };\r\n //update db\r\n try {\r\n await calculatorService.getRecommendationsForMember(\r\n props?.member?.id,\r\n localSurveyResObj\r\n );\r\n } catch (error) {\r\n console.error('error updating survey response', error);\r\n }\r\n //use this value to stop loading after update\r\n\r\n setTimeout(() => {\r\n getSurveyResponses();\r\n }, 500);\r\n };\r\n\r\n //open modal to update pilot status\r\n const [openPilotModal, setOpenPilotModal] = useState(false);\r\n\r\n const handleOpenPilotModal = () => {\r\n setOpenPilotModal(true);\r\n };\r\n const handleClosePilotModal = () => {\r\n setOpenPilotModal(false);\r\n };\r\n\r\n //determine if current AC is different groupPlanId from open enrollment - ex: we want gpId = 20 teamsters to be able to enroll in gpId 19\r\n //will remove this after we release re-enrollment fully\r\n const [openEnrollmentDiffGpId, setOpenEnrollmentDiffGpId] = useState(true);\r\n\r\n const openEnrollmentDifferentGroupPlanId = () => {\r\n let _openEnrollment = props?.availableEnrollments?.find(\r\n (enrollment) => enrollment?.isEnrollmentOpen\r\n );\r\n let _currentActiveCoverage = props?.currentActiveCoverage[0];\r\n if (\r\n _openEnrollment &&\r\n _currentActiveCoverage &&\r\n props?.futureActiveCoverage?.length === 0 && // make sure they don't have future AC from deferred CED\r\n _openEnrollment?.groupPlanId !== _currentActiveCoverage?.groupPlanId\r\n ) {\r\n return setOpenEnrollmentDiffGpId(true);\r\n }\r\n return setOpenEnrollmentDiffGpId(false);\r\n };\r\n\r\n useEffect(() => {\r\n if (props?.availableEnrollments?.length > 0) {\r\n openEnrollmentDifferentGroupPlanId();\r\n }\r\n }, [\r\n props?.currentActiveCoverage,\r\n props?.futureActiveCoverage?.length,\r\n props?.availableEnrollments,\r\n ]);\r\n\r\n ////////////////////////////////////////////////////////////////\r\n\r\n const [permissionsEnabler, setPermissionsEnabler] = useState({});\r\n useEffect(() => {\r\n if (props.permissionsEnabler) {\r\n setPermissionsEnabler(props.permissionsEnabler);\r\n }\r\n }, [props.permissionsEnabler]);\r\n const [currentEdit, setCurrentEdit] = useState({});\r\n let planCosts = props?.planCosts;\r\n const [paymentSchedule, setPaymentSchedule] = useState();\r\n useEffect(() => {\r\n setPaymentSchedule(props.paymentSchedule);\r\n }, [props?.paymentSchedule]);\r\n //make sure a user can edit a wallet from the plans tab\r\n useEffect(() => {\r\n props.setEditWalletFromPlans(true);\r\n }, []);\r\n //format date to be used in other components throughout plans summary\r\n const formatDate = (rawDate) => {\r\n // if (rawDate?.length < 11) rawDate = new Date(rawDate).toISOString();\r\n let [yyyy, mm, dd, hh, m, s] = rawDate.split(/[^\\d]+/);\r\n let date = new Date();\r\n date.setUTCFullYear(+yyyy);\r\n date.setUTCDate(+dd);\r\n date.setUTCMonth(mm - 1);\r\n date.setUTCHours(+hh);\r\n date.setUTCMinutes(+m + date.getTimezoneOffset());\r\n date.setUTCSeconds(+s);\r\n return date;\r\n };\r\n //SigModal\r\n // State starts closed\r\n const [openEnrollment, setOpenEnrollment] = useState(false);\r\n const [modalConfig, setModalConfig] = useState('');\r\n\r\n const handleEnrollmentClick = (\r\n enrollmentStateId,\r\n cancelEnrollment = false\r\n ) => {\r\n if (enrollmentStateId == 2) {\r\n if (cancelEnrollment) {\r\n //Show sig modal for cancel\r\n setModalConfig('cancelEnrollment');\r\n setSigModalOpen(true);\r\n // setEnrollmentMenu(null)\r\n } else {\r\n //Show sig modal for reopen\r\n setModalConfig('Reopen');\r\n setSigModalOpen(true);\r\n // setEnrollmentMenu(null)\r\n }\r\n } else if (enrollmentStateId == 3) {\r\n setSigModalOpen(true);\r\n setModalConfig('Cancel');\r\n // setEnrollmentMenu(null)\r\n } else {\r\n setOpenEnrollment(true);\r\n // setTabValue(4)\r\n }\r\n };\r\n const [sigModalOpen, setSigModalOpen] = useState(false);\r\n\r\n //PAY CHIP DISPLAY\r\n const [payChipDisplay, setPayChipDisplay] = useState('');\r\n\r\n const handlePayChipDisplay = () => {\r\n if (\r\n props?.paymentSchedule?.length < 1 &&\r\n !props?.topOutstandingBanance >= 0\r\n )\r\n return '';\r\n //display health chip if member has active covrage and is on peak pay\r\n if (\r\n props?.currentActiveCoverage?.length > 0 &&\r\n props?.paymentSchedule[0]?.id > 0 &&\r\n props?.paymentSchedule[0]?.isPeakPay\r\n ) {\r\n return (\r\n \r\n \r\n \r\n \r\n Member does not currently have plan information\r\n \r\n \r\n ) : (\r\n //Display existing plan info\r\n \r\n \r\n \r\n \r\n All Plans\r\n \r\n {payChipDisplay}\r\n \r\n \r\n \r\n \r\n Overview of all plans that a member is participating in\r\n \r\n \r\n\r\n \r\n {/* PLAN INFO */}\r\n \r\n {/* OPEN ENROLLMENTS AND NO CURRENT ACTIVE COVERAGE DISPLAY */}\r\n {\r\n //temporarily showing for IBT air re-enrolls, remove this block after re-enroll\r\n (props?.surveyResponses?.isPilot ||\r\n props?.currentActiveCoverage?.length === 0 ||\r\n openEnrollmentDiffGpId) && (\r\n <>\r\n {props.availableEnrollments?.length > 0 ? (\r\n <>\r\n {\r\n props.availableEnrollments.map((enrollment) => {\r\n // _testAvailableEnrollments.map((enrollment) => {\r\n //check if future AC enrollmentId matches available enrollmentId and display - this mean enrollment is still open and agent can make changes\r\n let _displayAvailableEnrollment =\r\n checkOpenEnrollmentAgainstFutureAC(enrollment);\r\n\r\n return _displayAvailableEnrollment ? (\r\n \r\n \r\n Active Coverage\r\n \r\n\r\n \r\n View current plan coverage\r\n \r\n \r\n \r\n \r\n Future Active Coverage\r\n \r\n\r\n \r\n View future plan coverage\r\n \r\n \r\n \r\n\r\n {/* RIGHT SIDE - PAYMENT INFO */}\r\n \r\n setSigModalOpen(false)}\r\n handleOpen={() => setSigModalOpen(false)}\r\n setEnrollmentSelected={props.setSelectedEnrollment}\r\n signClick={modalConfig}\r\n setOpenEnrollment={setOpenEnrollment}\r\n // setTabValue={setTabValue}\r\n enrollmentId={props?.singleEnrollment?.enrollmentId}\r\n setSigModalOpen={setSigModalOpen}\r\n // displayPay={displayPay}\r\n refreshEnrollments={props.getEnrollments}\r\n refreshEnrollment={props.getOneEnrollment}\r\n setActivePage={props.setActivePage}\r\n getActiveCoverage={props.getActiveCoverage}\r\n getPaymentSchedule={props.getPaymentSchedule}\r\n getEnrollments={props.getEnrollments}\r\n loading={loading}\r\n setLoading={setLoading}\r\n />\r\n \r\n );\r\n}\r\n","import React, { useContext, useEffect, useState, useRef } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport {\r\n format,\r\n formatDistance,\r\n subMinutes,\r\n addDays,\r\n addYears,\r\n} from 'date-fns';\r\n\r\n//MuiX\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\n\r\n//services\r\nimport ticketService from '../../../../../../services/ticket-service';\r\nimport optionService from '../../../../../../services/optionService';\r\nimport userService from '../../../../../../services/user-service';\r\n\r\n//Mui Components\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport FormGroup from '@mui/material/FormGroup';\r\nimport FormControlLabel from '@mui/material/FormControlLabel';\r\nimport Button from '@mui/material/Button';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Box from '@mui/material/Box';\r\nimport Typography from '@mui/material/Typography';\r\nimport TextField from '@mui/material/TextField';\r\nimport Tooltip from '@mui/material/Tooltip';\r\nimport Autocomplete from '@mui/material/Autocomplete';\r\nimport Stack from '@mui/material/Stack';\r\n\r\n// Assets\r\nimport openSvg from '../../../../../../assets/images/openSvg.svg';\r\nimport closedSvg from '../../../../../../assets/images/closedSvg.svg';\r\n\r\n//Mui icons\r\nimport ManageSearchIcon from '@mui/icons-material/ManageSearch';\r\nimport SyncIcon from '@mui/icons-material/Sync';\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\r\n\r\n//Our Components\r\nimport OurDataGrid from '../../../../DataGrid/OurDataGrid';\r\nimport { thisUserContext } from '../../../../nav-container/NavContainer';\r\nimport CreateTicketDrawer from './CreateTicketDrawer';\r\nimport { useGridApiRef } from '@mui/x-data-grid';\r\nimport TicketPriorityChips from '../../../DisplayChips/TicketPriorityChips';\r\n\r\n//utils\r\nimport {\r\n formatUTCDateToObjWithTimeZone,\r\n formatDateObjMMDDYYYYDisplay,\r\n formatDateObjYYYYMMDD,\r\n titleCase,\r\n} from '../../../../../utils';\r\n\r\nexport default function MemberTicketsTab(props) {\r\n let history = useHistory();\r\n\r\n const apiRef = useGridApiRef();\r\n\r\n const [tickets, setTickets] = useState([]);\r\n const [origins, setOrigins] = useState(null);\r\n const [types, setTypes] = useState(null);\r\n const [priorities, setPriorities] = useState(null);\r\n const [SLAs, setSLAs] = useState(null);\r\n const [selectedList, setSelectedList] = useState('All Tickets');\r\n const [account, setAccount] = useState(null);\r\n const [thisUser, setThisUser] = useState();\r\n const [checks, setChecks] = useState({\r\n open: true,\r\n closed: false,\r\n system: false,\r\n });\r\n\r\n useEffect(() => {\r\n buildRows();\r\n getGridCols();\r\n }, [checks]);\r\n\r\n // STATE GETTERS AND CALLING EFFECTS\r\n let _thisUser = useContext(thisUserContext);\r\n const [allUsers, setAllUsers] = useState([]);\r\n let getThisUser = async () => {\r\n setThisUser(_thisUser.thisUser);\r\n setAllUsers(_thisUser.allUsers);\r\n };\r\n useEffect(() => {\r\n if (_thisUser) getThisUser();\r\n }, [_thisUser]);\r\n\r\n const [loadingState, setLoadingState] = useState(false);\r\n const refreshTickets = async () => {\r\n setLoadingState(true);\r\n let tickets = await ticketService.getAllTickets();\r\n\r\n switch (selectedList) {\r\n case 'All Tickets':\r\n setTickets(\r\n tickets.filter((ticket) => ticket?.memberId == props.member?.id)\r\n );\r\n break;\r\n }\r\n setLoadingState(false);\r\n };\r\n const getTickets = async () => {\r\n let tickets = await ticketService.getTicketsByMemberId(props.member?.id);\r\n setTickets(tickets);\r\n\r\n if (!origins) {\r\n let origins = await optionService.getTicketOrigins();\r\n setOrigins(origins);\r\n }\r\n if (!types) {\r\n let types = await optionService.getTicketTypes();\r\n setTypes(types);\r\n }\r\n if (!priorities) {\r\n let priorities = await optionService.getTicketPriority();\r\n setPriorities(priorities);\r\n }\r\n if (!priorities) {\r\n let SLAs = await optionService.getTicketSLA();\r\n setSLAs(SLAs);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n getThisUser();\r\n }, []);\r\n\r\n useEffect(() => {\r\n getTickets();\r\n }, [thisUser, selectedList, props.member]);\r\n\r\n useEffect(() => {\r\n if (origins && types && priorities && SLAs && tickets) {\r\n buildRows();\r\n }\r\n }, [origins, types, priorities, SLAs, tickets]);\r\n\r\n //NEW TICKET DRAWER\r\n const [ticketDrawerOpen, setTicketDrawerOpen] = useState(false);\r\n\r\n // Event Handlers\r\n const handleChangeSelectedList = (event) => {\r\n setSelectedList(event?.target?.value);\r\n };\r\n\r\n const handleCheckBox = (event) => {\r\n let key = event.target.value;\r\n let value = event.target.checked;\r\n setChecks({ ...checks, [key]: value });\r\n };\r\n\r\n const getStatusIcon = (statusId) => {\r\n switch (statusId) {\r\n case 1:\r\n let openStatus = {\r\n value: 'open',\r\n image: openSvg,\r\n };\r\n return openStatus;\r\n break;\r\n case 2:\r\n let closedStatus = {\r\n value: 'closed',\r\n image: closedSvg,\r\n };\r\n return closedStatus;\r\n break;\r\n default:\r\n console.log('no status found');\r\n }\r\n };\r\n\r\n let dateMinObj = new Date();\r\n let dateMaxObj = addYears(new Date(), 1);\r\n\r\n const handleDueDateChange = async (newDate, params) => {\r\n //format new date that is in date obj format to short date string for db\r\n newDate = formatDateObjYYYYMMDD(newDate);\r\n let ticket = tickets.find((ticket) => ticket.id == params.id);\r\n setLoadingState(true);\r\n ticket.dueDate = newDate;\r\n try {\r\n await ticketService.updateTicket(ticket);\r\n } catch (error) {\r\n console.error('error updating due date', error);\r\n }\r\n refreshTickets();\r\n let outerClick = document.getElementById('member-tickets-grid');\r\n if (outerClick) outerClick.click();\r\n // if ((newDate >= dateMinObj) && (newDate <= dateMaxObj)){\r\n // setCreatedTicket({\r\n // ...createdTicket,\r\n // dueDate:newDate\r\n // })\r\n // }\r\n };\r\n\r\n // This state object determines which columns are hidden on page load. The default setting if the user has no past status is below. The name in the grid col MUST match the \"Field\" property within the row definitions in each individual grid.\r\n const [gridCols, setGridCols] = useState({});\r\n\r\n // Returns all filters from local storage or builds new\r\n const getGridCols = () => {\r\n let _gridCols = localStorage.getItem('memberTicketGridCols');\r\n if (_gridCols) {\r\n _gridCols = JSON.parse(_gridCols);\r\n setGridCols(_gridCols);\r\n } else {\r\n setGridCols({\r\n id: false,\r\n status: true,\r\n organization: true,\r\n uniqueId: true,\r\n requester: true,\r\n subject: true,\r\n assignee: true,\r\n lastUpdated: true,\r\n origin: true,\r\n priority: true,\r\n dueDate: true,\r\n ticketTypeId: true,\r\n });\r\n }\r\n };\r\n\r\n // Updates local storage with current settings\r\n const saveGridCols = () => {\r\n localStorage.setItem('memberTicketGridCols', JSON.stringify(gridCols));\r\n getGridCols();\r\n };\r\n\r\n useEffect(() => {\r\n if (Object.keys(gridCols).length != 0) {\r\n saveGridCols();\r\n }\r\n }, [JSON.stringify(gridCols)]);\r\n\r\n //DATAGRID STUFF\r\n const [rows, setRows] = useState([]);\r\n const buildRows = () => {\r\n let _rows = [];\r\n\r\n let filterCheck = [];\r\n for (let [key, val] of Object.entries(checks)) {\r\n if (val === true) filterCheck.push(key);\r\n }\r\n\r\n tickets.forEach((ticket) => {\r\n if (filterCheck.length > 0) {\r\n if (filterCheck.includes(getStatusIcon(ticket.ticketStatusId)?.value)) {\r\n let builtRow = {\r\n id: ticket.id,\r\n status: getStatusIcon(ticket.ticketStatusId)?.value,\r\n uniqueId: ticket.uniqueId,\r\n requester: ticket.memberDisplayName,\r\n subject: ticket.subject,\r\n assignee: ticket.userId,\r\n lastUpdated: ticket.lastModifiedDate,\r\n origin: origins.find((origin) => origin.id == ticket.ticketOriginId)\r\n ?.name,\r\n priority: ticket.ticketPriorityId,\r\n dueDate: ticket.dueDate\r\n ? formatUTCDateToObjWithTimeZone(ticket.dueDate)\r\n : null, //convert to date obj\r\n };\r\n _rows.push(builtRow);\r\n }\r\n } else {\r\n let builtRow = {\r\n id: ticket.id,\r\n status: getStatusIcon(ticket.ticketStatusId)?.value,\r\n uniqueId: ticket.uniqueId,\r\n requester: ticket.memberDisplayName,\r\n subject: ticket.subject,\r\n assignee: ticket.userId,\r\n lastUpdated: ticket.lastModifiedDate,\r\n origin: origins.find((origin) => origin.id == ticket.ticketOriginId)\r\n ?.name,\r\n priority: ticket.ticketPriorityId,\r\n dueDate: ticket.dueDate\r\n ? formatUTCDateToObjWithTimeZone(ticket.dueDate)\r\n : null, //convert to date obj\r\n };\r\n _rows.push(builtRow);\r\n }\r\n });\r\n setRows(_rows);\r\n };\r\n\r\n //CUSTOM DATE RANGE OPERATOR\r\n function DateRangeInput(props) {\r\n const { item, applyValue, focusElementRef = null } = props;\r\n\r\n const filterTimeout = useRef();\r\n const [filterValueState, setFilterValueState] = useState(item.value ?? '');\r\n\r\n const [applying, setIsApplying] = useState(false);\r\n\r\n useEffect(() => {\r\n return () => {\r\n clearTimeout(filterTimeout.current);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n const itemValue = item.value ?? [undefined, undefined];\r\n setFilterValueState(itemValue);\r\n }, [item.value]);\r\n\r\n const updateFilterValue = (lowerBound, upperBound) => {\r\n clearTimeout(filterTimeout.current);\r\n setFilterValueState([lowerBound, upperBound]);\r\n\r\n setIsApplying(true);\r\n filterTimeout.current = setTimeout(() => {\r\n setIsApplying(false);\r\n applyValue({ ...item, value: [lowerBound, upperBound] });\r\n }, 500);\r\n };\r\n\r\n const handleUpperFilterChange = (event) => {\r\n const newUpperBound = event.target.value;\r\n updateFilterValue(filterValueState[0], newUpperBound);\r\n };\r\n const handleLowerFilterChange = (event) => {\r\n const newLowerBound = event.target.value;\r\n updateFilterValue(newLowerBound, filterValueState[1]);\r\n };\r\n\r\n return (\r\n \r\n \r\n 1
\r\n },\r\n },\r\n {\r\n field: 'status',\r\n headerName: 'Status',\r\n headerClassName: ' hide-right-sep hide-left-sep',\r\n renderCell: (params) => (\r\n <>\r\n \r\n \r\n {params.formattedValue === 2 ? 'C' : 'O'}\r\n \r\n \r\n \r\n {params.formattedValue === 2 ? 'Closed' : 'Open'}\r\n \r\n \r\n ),\r\n valueFormatter: ({ value }) => {\r\n switch (value) {\r\n case 'open':\r\n return 1;\r\n break;\r\n case 'closed':\r\n return 2;\r\n break;\r\n }\r\n },\r\n type: 'string',\r\n width: 150,\r\n // align:'center',\r\n },\r\n {\r\n field: 'subject',\r\n headerName: 'Subject',\r\n width: 200,\r\n valueFormatter: ({ value }) => {\r\n return `${value}`;\r\n },\r\n renderCell: ({ value }) => (\r\n <>\r\n {value} \r\n \r\n ),\r\n valueFormatter: ({ value }) => {\r\n return `${value}`;\r\n },\r\n },\r\n {\r\n field: 'lastUpdated',\r\n headerName: 'Last Updated',\r\n headerClassName: 'hide-right-sep hide-left-sep',\r\n renderCell: (params) =>\r\n `${formatDistance(new Date(params.value), new Date())} ago`,\r\n type: 'date',\r\n width: 170,\r\n },\r\n {\r\n field: 'origin',\r\n headerName: 'Origin',\r\n headerClassName: 'hide-right-sep hide-left-sep',\r\n width: 120,\r\n valueFormatter: ({ value }) => {\r\n return `${value}`;\r\n },\r\n renderCell: ({ value }) => (\r\n <>\r\n {value} \r\n \r\n ),\r\n valueFormatter: ({ value }) => {\r\n return `${value}`;\r\n },\r\n },\r\n {\r\n field: 'priority',\r\n headerName: 'Priority',\r\n headerClassName: 'hide-right-sep hide-left-sep',\r\n width: 120,\r\n valueGetter: (params) => {\r\n switch (params.value) {\r\n case 1:\r\n return 'Low';\r\n break;\r\n case 2:\r\n return 'Medium';\r\n break;\r\n case 3:\r\n return 'High';\r\n break;\r\n }\r\n },\r\n renderCell: ({ value }) => {\r\n return \r\n \r\n {params.value ? formatDateObjMMDDYYYYDisplay(params.value) : ''}\r\n \r\n
\r\n );\r\n },\r\n renderEditCell: (params) => {\r\n let topParams = params;\r\n return (\r\n \r\n \r\n handleDueDateChange(e, topParams)}\r\n format=\"MM/dd/yyyy\"\r\n sx={{\r\n width: '100%',\r\n padding: '0px',\r\n '& .MuiOutlinedInput-input': {\r\n padding: '12px 12px',\r\n fontSize: '15px', // Adjust the font size\r\n },\r\n '& fieldset': {\r\n height: '50px',\r\n },\r\n }}\r\n />\r\n \r\n \r\n );\r\n },\r\n },\r\n {\r\n field: 'uniqueId',\r\n headerName: 'Ticket ID',\r\n headerClassName: 'hide-right-sep hide-left-sep',\r\n valueGetter: (params) => {\r\n return `${params.row.id}`;\r\n },\r\n renderCell: (params) => {\r\n return `${params.row.id}`;\r\n },\r\n valueFormatter: (params) => params?.value,\r\n width: 100,\r\n },\r\n {\r\n field: 'assignee',\r\n headerName: 'Assignee',\r\n headerClassName: 'hide-right-sep hide-left-sep',\r\n width: 220,\r\n editable: true,\r\n valueGetter: (params) => {\r\n return params.row.assignee\r\n ? `${\r\n params.row.assignee &&\r\n allUsers &&\r\n allUsers?.find((user) => user.id == params.value)?.firstName\r\n } ${\r\n params.row.assignee &&\r\n allUsers &&\r\n allUsers?.find((user) => user.id == params.value)?.lastName\r\n }`\r\n : '';\r\n },\r\n renderCell: (params) => {\r\n apiRef.current = params.api;\r\n return (\r\n \r\n {params.row.assignee ? (\r\n
\r\n \r\n \r\n {allUsers &&\r\n `${allUsers\r\n ?.find((user) => user.id == params.row.assignee)\r\n ?.firstName[0].toUpperCase()}\r\n ${allUsers\r\n ?.find((user) => user.id == params.row.assignee)\r\n ?.lastName[0].toUpperCase()}`}\r\n \r\n \r\n\r\n \r\n \r\n {titleCase(\r\n allUsers &&\r\n allUsers?.find((user) => user.id == params.row.assignee)\r\n ?.firstName\r\n )}{' '}\r\n \r\n {titleCase(\r\n allUsers &&\r\n allUsers?.find((user) => user.id == params.row.assignee)\r\n ?.lastName\r\n )}\r\n \r\n \r\n \r\n ) : (\r\n <>No User Assigned\r\n )}\r\n
setOpen(true)}\r\n onClose={() => setOpen(false)}\r\n sx={{ padding: '5px' }}\r\n popupIcon={\r\n 0 ? `api/image/user/${option.id}` : ''}\r\n >\r\n {`${params?.key[0].toUpperCase()}${params?.key[1].toUpperCase()}`}\r\n \r\n \r\n {params.key}\r\n \r\n \r\n );\r\n }}\r\n />\r\n \r\n );\r\n },\r\n },\r\n ];\r\n\r\n //THIS OVERRIDES THE NO ROWS DATAGRID COMPONENT\r\n function NoTicketRows(props) {\r\n return (\r\n \r\n
\r\n \r\n No tickets currently assigned here\r\n
\r\n\r\n \r\n {/*
setTicketDrawerOpen(true)}\r\n // startIcon={ */}\r\n
No tickets found
\r\n\r\n \r\n {/*
setTicketDrawerOpen(true)}\r\n // startIcon={ */}\r\n
\r\n \r\n \r\n {/* MAIN AREA */}\r\n \r\n
\r\n \r\n
\r\n \r\n Tickets\r\n \r\n \r\n setTicketDrawerOpen(true)}\r\n\r\n // startIcon={ \r\n \r\n\r\n {/* NEW TICKET DRAWER */}\r\n \r\n \r\n \r\n 0\r\n ? `api/image/organization/${props.fullMemberObj?.organizationId}`\r\n : '/api/image/organization'\r\n }\r\n style={componentStyles.image(rowImg, isLandingPage)}\r\n ref={logoRef}\r\n onError={handleLogoError}\r\n />\r\n \r\n \r\n \r\n {isAirPlan(selectedEnrollment)\r\n ? 'Teamsters Voluntary Income Protection VIP+ Air'\r\n : selectedEnrollment?.name || 'Enrollment'}\r\n \r\n \r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/CustomRecBenefitCheck.fc31123c.svg\";","import React, { useEffect, useLayoutEffect, useState } from 'react';\r\n\r\n//MuiComponents\r\nimport Box from '@mui/material/Box';\r\nimport Typography from '@mui/material/Typography';\r\n\r\n//Our Icons\r\nimport CustomRecBenefitCheck from '../../../assets/images/CustomRecBenefitCheck.svg';\r\n\r\n//HOW TO USE THE THEMES FROM APP\r\n\r\nexport default function RecommendedBenefitDisplay(props) {\r\n const componentStyles = {\r\n defaultCalculatorDisplay: {\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n padding: '10px 20px',\r\n margin: '0 auto',\r\n maxWidth: '600px',\r\n borderRadius: '8px',\r\n backgroundColor: 'background.recommendation',\r\n color: 'text.recommendation',\r\n border: '1px solid',\r\n borderColor: 'secondary.recommendationOutline',\r\n },\r\n title: {\r\n fontSize: '14px',\r\n fontWeight: 500,\r\n lineHeight: '22px',\r\n textAlign: 'center',\r\n letterSpacing: '0.10px',\r\n marginBottom: '4px',\r\n },\r\n description: {\r\n fontSize: '12px',\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n textAlign: 'center',\r\n letterSpacing: '0.40px',\r\n },\r\n },\r\n allPlans: {\r\n container: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n padding: '8px 15px 8px 13px ',\r\n margin: '8px auto 10px',\r\n width: '99%',\r\n minHeight: '42px',\r\n borderRadius: '8px',\r\n backgroundColor: 'background.recommendation',\r\n color: 'text.recommendation',\r\n border: '1px solid',\r\n borderColor: 'secondary.recommendationOutline',\r\n },\r\n amount: {\r\n fontSize: '14px',\r\n fontWeight: 500,\r\n lineHeight: '22px',\r\n textAlign: 'center',\r\n letterSpacing: '0.10px',\r\n },\r\n },\r\n checkMark: {\r\n height: '20px',\r\n color: 'text.recommendation',\r\n },\r\n };\r\n\r\n /////USD formatting - dynamic fraction digits\r\n\r\n function formatNumberWithDynamicFraction(number) {\r\n // Check if there are any decimal places\r\n let hasDecimalPlaces = number % 1 !== 0;\r\n\r\n // Set minimumFractionDigits\r\n let minimumFractionDigits = hasDecimalPlaces ? 2 : 0;\r\n\r\n // Create formatter with dynamic minimumFractionDigits\r\n let formatter = new Intl.NumberFormat('en-US', {\r\n style: 'currency',\r\n currency: 'USD',\r\n minimumFractionDigits: minimumFractionDigits,\r\n });\r\n\r\n return formatter.format(number);\r\n }\r\n\r\n let currentRecAmount =\r\n props?.currRec?.benefitAmount || props?.currRec?.coverageAmount;\r\n\r\n return (\r\n <>\r\n {/* generic display for calculator page */}\r\n {props?.calculatorDisplay && (\r\n \r\n \r\n Recommended Benefit\r\n \r\n \r\n Recommended benefits are highlighted in green and based on the\r\n answers you provided above.\r\n \r\n \r\n )}\r\n\r\n {/* display for all plans if rec is > $0 */}\r\n {currentRecAmount > 0 && (\r\n \r\n \r\n {`${formatNumberWithDynamicFraction(\r\n currentRecAmount\r\n )} Recommended Benefit`}\r\n \r\n \r\n )}\r\n\r\n {/* display for spouse ladd/ci if > $0 */}\r\n {(props?.currSpouseRec?.coverageAmount > 0 ||\r\n props?.currSpouseRec?.benefitAmount > 0) && (\r\n \r\n \r\n {`${formatNumberWithDynamicFraction(\r\n props?.currSpouseRec?.coverageAmount ||\r\n props?.currSpouseRec?.benefitAmount\r\n )} Recommended Benefit`}\r\n \r\n \r\n )}\r\n\r\n {/* display for dependent ladd/ci */}\r\n {(props?.currDepRec?.coverageAmount > 0 ||\r\n props?.currDepRec?.benefitAmount > 0 ||\r\n props?.currDepRec > 0) && (\r\n \r\n \r\n Dependent Coverage Recommended\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n","import React, { useEffect, useState } from 'react';\r\n\r\n//MUI Components\r\nimport { Box, Button, Drawer, IconButton, Typography } from '@mui/material';\r\n\r\n//MUI Icons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\n\r\n//component Styles\r\nconst componentStyles = {\r\n drawerPaperProps: {\r\n borderRadius: '12px 12px 0px 0px',\r\n padding: '0px 20px 20px',\r\n bgcolor: 'background.default',\r\n color: 'text.primary',\r\n maxHeight: '75%',\r\n },\r\n drawerContainer: {\r\n maxHeight: '230px',\r\n maxWidth: '575px',\r\n margin: '0 auto',\r\n },\r\n headerContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n marginBottom: '10px',\r\n position: 'sticky',\r\n top: 0,\r\n paddingTop: '16px',\r\n },\r\n closeIcon: {\r\n color: 'primary.main',\r\n padding: '0px',\r\n },\r\n bodyContainer: {\r\n width: '100%',\r\n marginBottom: '20px',\r\n },\r\n buttonRow: {\r\n width: '100%',\r\n maxWidth: '370px',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n margin: '10px auto',\r\n },\r\n buttonContainer: {\r\n minWidth: '121px',\r\n display: 'flex',\r\n },\r\n surveyButton: {\r\n borderRadius: '100px',\r\n height: '42px',\r\n fontWeight: '700',\r\n width: '100%',\r\n maxWidth: '275px',\r\n '&.Mui-disabled': {\r\n color: 'primary.main',\r\n backgroundColor: 'white',\r\n border: '1px solid #195ffb',\r\n cursor: 'pointer',\r\n },\r\n '&.Mui-disabled:hover': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n};\r\nexport function DrawerContainer(props) {\r\n return (\r\n props?.setDrawerOpen(false)}\r\n anchor=\"bottom\"\r\n sx={componentStyles.drawerContainer}\r\n PaperProps={{\r\n sx: componentStyles.drawerPaperProps,\r\n }}\r\n disableScrollLock={true}\r\n >\r\n \r\n {/* Drawer Header */}\r\n \r\n {props?.title} \r\n \r\n props?.setDrawerOpen(false)}>\r\n \r\n \r\n \r\n\r\n \r\n {/* Content/message */}\r\n {props?.bodyText && (\r\n \r\n {props?.bodyText}\r\n \r\n )}\r\n {/* NAW only buttons */}\r\n {props?.survey && !props?.survey?.isEmployed && (\r\n \r\n \r\n \r\n YES, I AM EMPLOYED\r\n \r\n \r\n \r\n \r\n SAVE & EXIT\r\n \r\n \r\n \r\n )}\r\n\r\n {/* Decline All */}\r\n {props?.handleDecline && (\r\n \r\n \r\n \r\n Cancel\r\n \r\n \r\n \r\n \r\n Decline\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default DrawerContainer;\r\n","import React from 'react';\r\n\r\n//MUI Components\r\nimport { Box, Typography } from '@mui/material';\r\n\r\n//Assets\r\nimport FullColorBlackText from '../../../assets/images/FullColorBlackText.svg';\r\n\r\nexport default function PoweredBy(props) {\r\n //component styles\r\n const componentStyles = {\r\n componentContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n fontWeight: 800,\r\n width: '100%',\r\n minHeight: '50px',\r\n marginTop: 'auto',\r\n ...props.containerStyle,\r\n },\r\n text: {\r\n margin: ' 15px auto 25px',\r\n fontWeight: 800,\r\n alignItems: 'center',\r\n fontSize: '10px!important',\r\n ...props.textStyle,\r\n },\r\n };\r\n return (\r\n <>\r\n \r\n \r\n POWERED BY {' '}\r\n \r\n \r\n \r\n );\r\n}\r\n","import './topbar-back.css';\r\nimport {useHistory} from \"react-router-dom\";\r\nimport ArrowBackIosNewTwoToneIcon from '@mui/icons-material/ArrowBackIosNewTwoTone';\r\n\r\nfunction TopbarBack(){\r\n const history = useHistory();\r\n\r\n return(\r\n { history.goBack(); e.preventDefault(); }}>\r\n
\r\n
Back \r\n
;\r\nconst MuiNote = \r\nconst MuiAdd = ;\r\n\r\nfunction MemberTopbar(props){\r\n\r\n \r\n return (\r\n \r\n
\r\n
\r\n {/*\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/* \r\n \r\n \r\n \r\n\r\n
\r\n {!containsMember && pathname != addMemberLink &&\r\n
\r\n\r\n \r\n }\r\n\r\n {!containsMember && pathname === addMemberLink &&\r\n
\r\n }\r\n\r\n {containsMember &&\r\n
\r\n\r\n \r\n }\r\n
\r\n
\r\n\r\n )\r\n }\r\n\r\n export default Member;","const externalEnrollmentSharedStyles = {\r\n //render container styles based on agent vs. external enrollment\r\n componentContainer: (isAgentEnroller) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n bgcolor: 'background.default',\r\n color: 'text.primary',\r\n padding: isAgentEnroller ? '30px 20px' : '50px 35px 30px',\r\n height: isAgentEnroller ? 'calc(100vh - 276px)' : '100vh',\r\n margin: isAgentEnroller ? '' : 'auto',\r\n width: isAgentEnroller ? '100%' : 'auto',\r\n maxWidth: isAgentEnroller ? '100%' : '575px',\r\n justifyContent: 'space-between',\r\n }),\r\n\r\n outerComponentContainerWithPossibleStickyProgress: (isAgentEnroller) => ({\r\n height: isAgentEnroller ? 'calc(100vh - 276px)' : 'calc(100vh - 160px)',\r\n overflowY: 'auto',\r\n }),\r\n //render enrollment container styles based on agentEnroll AND sticky progress\r\n //EnrollmentPlans, EnrollmentBeneficiaries, EnrollmentPersonalInfo, EnrollmentUnionInfo, EnrollmentSummary, EnrollmentPayment\r\n componentContainerWithPossibleStickyProgress: (isAgentEnroller) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n bgcolor: 'background.default',\r\n color: 'text.primary',\r\n padding: isAgentEnroller ? '30px 20px' : '50px 35px 30px',\r\n margin: isAgentEnroller ? '' : '0px auto',\r\n width: isAgentEnroller ? '100%' : 'auto',\r\n maxWidth: isAgentEnroller ? '100%' : '575px',\r\n justifyContent: 'flex-start',\r\n minHeight: isAgentEnroller ? 'calc(100vh - 276px)' : 'calc(100vh - 160px)',\r\n // height: isAgentEnroller ? '100%' : '',\r\n // overflowY: isAgentEnroller ? 'auto' : 'none',\r\n // border: isAgentEnroller ? '1px solid yellow' : '1px solid green',\r\n }),\r\n mainBodyContainer: (isAgentEnroller) => ({\r\n paddingBottom: isAgentEnroller ? '0px' : '50px',\r\n marginBottom: '0px',\r\n }),\r\n largeBlueButton: {\r\n height: '50px',\r\n fontSize: '15px',\r\n width: '100%',\r\n maxWidth: '575px',\r\n borderRadius: '100px',\r\n },\r\n divider: {\r\n color: '#989898',\r\n fontWeight: 700,\r\n fontFamily: 'Poppins',\r\n maxWidth: '600px',\r\n margin: '15px auto 25px',\r\n },\r\n externalPreEnrollmentParentContainer: {\r\n display: 'block',\r\n height: '100vh',\r\n overflowY: 'auto',\r\n overflowX: 'hidden',\r\n WebkitOverflowScrolling: 'touch',\r\n },\r\n infinityLoader: {\r\n position: 'absolute',\r\n zIndex: 5,\r\n width: '100%',\r\n height: '100%',\r\n backgroundColor: '#00000050',\r\n backdropFilter: 'blur(10px)',\r\n top: 0,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n },\r\n infinityLoaderSingleEnrollWrapper: {\r\n position: 'absolute',\r\n zIndex: 5,\r\n width: '100%',\r\n height: '100vh',\r\n backgroundColor: '#00000050',\r\n backdropFilter: 'blur(10px)',\r\n },\r\n //info tip - bliue\r\n toolTipIcon: {\r\n // height: \"20px\",\r\n // color: \"#717171\",\r\n color: 'primary.main',\r\n height: '24px',\r\n width: '24px',\r\n marginLeft: '5px',\r\n },\r\n //info tip - gray (not-now tool tip)\r\n grayInfoTip: {\r\n color: 'primary.grayInfoTip',\r\n height: '24px',\r\n width: '24px',\r\n marginLeft: '5px',\r\n },\r\n iconButtonWrapper: {\r\n padding: '0px',\r\n '&:hover': {\r\n backgroundColor: 'transparent', // Removes the background color change on hover\r\n },\r\n },\r\n //AGENT ENROLLMENT HEADER\r\n agentEnrollTitleText: {\r\n fontFamily: 'Poppins',\r\n },\r\n agentEnrollSubtitleContainer: {\r\n margin: '10px 0px 20px',\r\n },\r\n agentEnrollSubtitleText: {\r\n color: 'text.gray',\r\n },\r\n};\r\nexport default externalEnrollmentSharedStyles;\r\n","import React, { useState } from 'react';\r\n\r\n//Services\r\nimport registerService from '../../../services/register-service';\r\n\r\n//MuiComponents\r\nimport Button from '@mui/material/Button';\r\nimport TextField from '@mui/material/TextField';\r\nimport Alert from '@mui/material/Alert';\r\nimport AlertTitle from '@mui/material/AlertTitle';\r\nimport Link from '@mui/material/Link';\r\nimport { Box, Divider, Typography } from '@mui/material';\r\n\r\n//shared styles\r\nimport externalEnrollmentSharedStyles from '../externalEnrollmentSharedStyles';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n componentContainer: {\r\n margin: '20px auto',\r\n },\r\n sectionContainer: {\r\n marginBottom: '25px',\r\n },\r\n};\r\n\r\nfunction ExternalForgot(props) {\r\n // const handleValueChange = (e) => {\r\n // let inputVal = e.target.value;\r\n // let inputProperty = e.target.getAttribute('data-property')\r\n // console.log(inputProperty,inputVal)\r\n // setValues({\r\n // ...values,\r\n // [inputProperty]:inputVal\r\n // })\r\n // }\r\n\r\n const [forgotState, setForgotState] = useState({\r\n verificationCode: (Math.round(Math.random(0) * 1000) + 1000).toString(),\r\n emailSent: false,\r\n });\r\n\r\n const [credentialState, setCredentialState] = useState({\r\n email: '',\r\n code: '',\r\n newPassword: '',\r\n });\r\n\r\n const sendResetLink = async () => {\r\n let emailValue = document.getElementById('email-forgot').value;\r\n\r\n setForgotState({\r\n ...forgotState,\r\n emailSent: true,\r\n });\r\n\r\n setCredentialState({\r\n ...credentialState,\r\n email: emailValue,\r\n code: forgotState.verificationCode,\r\n });\r\n await registerService.forgotPassword(\r\n emailValue,\r\n forgotState.verificationCode\r\n );\r\n };\r\n\r\n const tryOtherEmail = () => {\r\n setForgotState({\r\n ...forgotState,\r\n emailSent: false,\r\n });\r\n };\r\n\r\n const backToLogin = () => {\r\n props.setForgotPassword(false);\r\n };\r\n\r\n const isValidEmail = (email) => {\r\n if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$/.test(email)) {\r\n return false;\r\n } else return true;\r\n };\r\n\r\n return (\r\n <>\r\n {!forgotState.emailSent && (\r\n \r\n \r\n \r\n Please enter the email address associated with your UnionHub\r\n account to receive a password reset link.{' '}\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n Send link\r\n \r\n\r\n \r\n Back to Log in\r\n \r\n \r\n )}\r\n\r\n {forgotState.emailSent && (\r\n <>\r\n \r\n \r\n Email Sent \r\n Check your email and open the link we sent to begin resetting your\r\n password.\r\n \r\n \r\n \r\n Did not receive the email? Check your spam filter or\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nexport default ExternalForgot;\r\n","import React, { useState } from 'react';\r\n\r\n//MUI Components\r\nimport { Box, display } from '@mui/system';\r\n\r\n//MUI Icons\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport NoVisibilityIcon from '@mui/icons-material/VisibilityOff';\r\n\r\n//Component Styles\r\n\r\nconst componentStyles = {\r\n visibilityIconContainer: {\r\n position: 'absolute',\r\n right: '5%',\r\n },\r\n visibilityIcon: {\r\n color: '#7D7987',\r\n cursor: 'pointer',\r\n },\r\n};\r\n\r\nconst PasswordVisibilityIcon = (props) => {\r\n //Password Visibility\r\n const [displayPassword, setDisplayPassword] = useState(false);\r\n\r\n const swapIcon = (e) => {\r\n //e.preventDefault();\r\n let inputElement = e.target.parentNode.children[0];\r\n if (displayPassword) {\r\n inputElement.setAttribute('type', 'password');\r\n setDisplayPassword(false);\r\n } else {\r\n inputElement.setAttribute('type', 'text');\r\n setDisplayPassword(true);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {displayPassword ? (\r\n \r\n \r\n \r\n 0\r\n ? `/api/image/organization/${props?.organization.id}`\r\n : '/api/image/organization'\r\n }\r\n style={componentStyles.image}\r\n onError={handleLogoError}\r\n alt=\"Organization Logo\"\r\n />\r\n \r\n\r\n {/* Title */}\r\n {props?.forgotPassword ? (\r\n \r\n \r\n Forgot your password?\r\n \r\n \r\n ) : (\r\n <>\r\n {props?.organization?.name != 'Teamsters' && (\r\n \r\n \r\n {props?.login ? 'Log in to' : 'Register'} your UnionHub account\r\n \r\n \r\n )}\r\n {props?.organization?.name == 'Teamsters' && (\r\n \r\n \r\n {props?.login ? 'Log in to' : 'Register'} your Teamsters VIP+\r\n \r\n \r\n UnionHub account\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default ExternalRegisterOrLoginEnrollmentHeader;\r\n","import React, { useEffect, useLayoutEffect, useState, useContext } from 'react';\r\nimport { useHistory } from 'react-router';\r\n//Assets\r\nimport PlaceHolderLogo from '../../../assets/images/placeHolder.svg';\r\nimport FullColorBlackText from '../../../assets/images/FullColorBlackText.svg';\r\nimport FallbackLogo from '../../../assets/images/SourceFileonly icon.png';\r\n\r\n//Services\r\nimport authService from '../../../services/auth-service';\r\nimport memberService from '../../../services/member-service';\r\n\r\n//MuiComponents\r\nimport { useTheme, useMediaQuery } from '@mui/material';\r\nimport Button from '@mui/material/Button';\r\nimport { Divider, FormControlLabel, Typography } from '@mui/material';\r\nimport Link from '@mui/material/Link';\r\nimport InputLabel from '@mui/material/InputLabel';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport FormHelperText from '@mui/material/FormHelperText';\r\nimport FormControl from '@mui/material/FormControl';\r\nimport Select from '@mui/material/Select';\r\nimport TextField from '@mui/material/TextField';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport Box from '@mui/material/Box';\r\nimport Alert from '@mui/material/Alert';\r\n\r\n//Our Components\r\nimport ExternalForgot from '../external-forgot/ExternalForgot';\r\nimport PoweredBy from '../external-enrollments/PoweredBy';\r\nimport { ColorModeContext } from '../../../ExternalApp';\r\nimport InfinityLoader from '../../UH-loading-animation/InfinityLoader';\r\nimport PasswordVisibilityIcon from '../../../assets/visibilityIcons/PasswordVisibilityIcon';\r\nimport ExternalRegisterOrLoginEnrollmentHeader from '../external-enrollments/ExternalRegisterOrLoginEnrollmentHeader';\r\n\r\n//shared styles\r\nimport externalEnrollmentSharedStyles from '../externalEnrollmentSharedStyles';\r\nimport CheckBox from '@mui/icons-material/CheckBox';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n input: {\r\n margin: '10px auto 10px ',\r\n },\r\n alert: {\r\n margin: '0px auto 20px',\r\n },\r\n forgotPasswordContainer: {\r\n width: '100%',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-end',\r\n },\r\n keepLoggedInContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n marginBottom: '20px',\r\n height: '38px',\r\n },\r\n checkbox: { padding: '0px', marginRight: '5px' },\r\n};\r\n\r\nfunction ExternalLoginAccount(props) {\r\n const colorMode = useContext(ColorModeContext);\r\n\r\n const [values, setValues] = useState({\r\n userName: '',\r\n password: '',\r\n });\r\n const [stayLoggedIn, setStayLoggedIn] = useState(true);\r\n\r\n const history = useHistory();\r\n const [displayLoginError, setDisplayLoginError] = useState(false);\r\n\r\n //Forgot password\r\n const [forgotPassword, setForgotPassword] = useState(false);\r\n\r\n const forgetClick = () => {\r\n setForgotPassword(true);\r\n };\r\n\r\n //Handlers\r\n const handleValueChange = (e) => {\r\n let inputVal = e.target.value;\r\n let inputProperty = e.target.getAttribute('data-property');\r\n\r\n setValues({\r\n ...values,\r\n [inputProperty]: inputVal,\r\n });\r\n };\r\n const passwordKeyPressHandler = (e) => {\r\n if (e.key === 'Enter') loginAsync();\r\n if (e.key === ' ') e.preventDefault();\r\n };\r\n\r\n const getCookie = (cookieName) => {\r\n let name = `${cookieName}=`;\r\n let cookieArray = document.cookie.split(';');\r\n let value = '';\r\n cookieArray.forEach((cookie) => {\r\n if (cookie.includes(name)) value = cookie.replace(name, '').trim();\r\n });\r\n return value;\r\n };\r\n const removeCookie = (cookieName) => {\r\n let hostArray = window.location.hostname.split('.').reverse();\r\n let domain = `.${hostArray[1]}.${hostArray[0]}`;\r\n\r\n let name = `${cookieName}=`;\r\n let cookieArray = document.cookie.split(';');\r\n\r\n cookieArray.forEach((cookie) => {\r\n if (cookie.includes(name))\r\n document.cookie = `${name};Domain=${domain};expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;\r\n });\r\n };\r\n\r\n const loginAsync = async (e) => {\r\n props.setLoading(true);\r\n //e.preventDefault();\r\n\r\n let isAuthenticated = false;\r\n const credentials = {\r\n username: values.userName,\r\n password: values.password,\r\n };\r\n isAuthenticated = await authService.authenticate(credentials);\r\n // props.checkAuthentication()\r\n\r\n if (isAuthenticated) {\r\n setDisplayLoginError(false);\r\n let domain = getCookie('subdomain');\r\n let prevRoute = history.location?.state?.from;\r\n\r\n if (!domain.includes('cornerstone')) {\r\n if (prevRoute) {\r\n window.location.href = `https://${domain}/${prevRoute}`;\r\n } else window.location.href = `https://${domain}/enrollments`;\r\n } else {\r\n window.location.href = `https://${domain}`;\r\n }\r\n props.setLoading(false);\r\n } else {\r\n props.setLoading(false);\r\n setDisplayLoginError(true);\r\n }\r\n };\r\n\r\n const registerClickFromLogin = () => {\r\n props.setLoading(true);\r\n setTimeout(() => {\r\n history.push('/register');\r\n props.setLoading(false);\r\n }, 250);\r\n };\r\n\r\n const [organization, setOrganization] = useState({});\r\n\r\n const getThisOrganization = async () => {\r\n try {\r\n let thisOrganization = await props.getOrganization();\r\n setOrganization(thisOrganization);\r\n } catch (e) {\r\n setOrganization('');\r\n }\r\n };\r\n\r\n // Check if the user is already logged in, and if the token is still valid, redirect them.\r\n const checkToken = async () => {\r\n let domain = getCookie('subdomain');\r\n let expiration = getCookie('expiration');\r\n let currentDate = new Date();\r\n\r\n if (domain.length > 0 && expiration.length > 0) {\r\n if (new Date(expiration) < currentDate) {\r\n console.log('Token expired.');\r\n } else {\r\n console.log('Valid token');\r\n if (!domain.includes('cornerstone')) {\r\n window.location.href = `https://${domain}/enrollments`;\r\n } else {\r\n window.location.href = `https://${domain}`;\r\n }\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n getThisOrganization();\r\n checkToken();\r\n }, []);\r\n\r\n const getOrganizationLogo = () => {\r\n if (organization.id !== null) {\r\n return `/api/image/organization/${organization.id}`;\r\n } else return FallbackLogo;\r\n };\r\n\r\n let theme = useTheme();\r\n\r\n const debugTheme = () => {\r\n colorMode.ToggleColorMode();\r\n };\r\n\r\n const [imgFetchAttempts, setImgFetchAttempts] = useState(0);\r\n const handleLogoError = (e) => {\r\n setImgFetchAttempts((prev) => prev++);\r\n if (imgFetchAttempts <= 10) e.target.src = FallbackLogo;\r\n };\r\n\r\n return (\r\n \r\n {props.loading && (\r\n <>\r\n \r\n \r\n {/* Header */}\r\n \r\n Forgot Password \r\n \r\n\r\n \r\n setStayLoggedIn((prev) => !prev)}\r\n />\r\n Keep me logged in \r\n \r\n\r\n {displayLoginError && (\r\n \r\n Invalid Email or Password\r\n \r\n )}\r\n \r\n \r\n Log in\r\n \r\n \r\n\r\n Or \r\n\r\n \r\n \r\n Register\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n );\r\n}\r\nexport default PasswordStrength;\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n//Services\r\n\r\n//MuiComponents\r\nimport TextField from '@mui/material/TextField';\r\nimport Button from '@mui/material/Button';\r\nimport Box from '@mui/material/Box';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport Drawer from '@mui/material/Drawer';\r\nimport Divider from '@mui/material/Divider';\r\nimport Typography from '@mui/material/Typography';\r\nimport Modal from '@mui/material/Modal';\r\n\r\n//MuiIcons\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport Paper from '@mui/material/Paper';\r\nimport { border, flexbox, maxWidth } from '@mui/system';\r\n\r\nconst componentStyles = {\r\n //Message styles\r\n messageContainer: {\r\n marginBottom: '20px',\r\n },\r\n headerContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n },\r\n iconButton: {\r\n padding: '0px',\r\n borderRadius: '100%',\r\n },\r\n closeIcon: {\r\n color: '#195ffb',\r\n height: '36px',\r\n width: '36px',\r\n padding: '0px',\r\n },\r\n innerTextStyle: {\r\n width: '80%',\r\n },\r\n userInfoContainer: { margin: '20px 5px 20px 20px' },\r\n buttonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n width: '70%',\r\n maxWidth: '250px',\r\n margin: '0 auto',\r\n },\r\n buttonStyle: {\r\n minWidth: '100px',\r\n },\r\n};\r\nfunction InternalDuplicateEmailMessage(props) {\r\n return (\r\n \r\n \r\n Is this you? \r\n \r\n \r\n\r\n \r\n The email you provided was located on the Teamsters 728 membership\r\n census. Help us confirm some information to connect your accounts.\r\n \r\n\r\n \r\n \r\n Name: John Smith\r\n \r\n \r\n Email: yourEmail@noreply.com\r\n \r\n \r\n \r\n \r\n No\r\n \r\n \r\n Yes\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default function DuplicateEmailDrawer(props) {\r\n //display drawer vs. modal for screen size\r\n if (window.innerWidth < 800) {\r\n return (\r\n \r\n e.preventDefault()}\r\n // keepMounted\r\n sx={{\r\n position: 'absolute',\r\n borderRadius: '12px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n }}\r\n container={props.container || document.body}\r\n hideBackdrop={props.agentEnroller ? true : false}\r\n disableScrollLock={true}\r\n >\r\n \r\n \r\n {/* Email input */}\r\n\r\n \r\n Take me to login \r\n Please create a secure password including the criteria below.\r\n \r\n {/* \r\n Create Password Input */}\r\n \r\n Remember this device \r\n */}\r\n\r\n \r\n Create account\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default ExternalRegisterSetup;\r\n","import React, { useEffect, useState, useMemo } from 'react';\r\nimport { useHistory, useLocation } from 'react-router';\r\n\r\n//MuiX\r\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\r\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\r\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\r\n\r\n//Assets\r\nimport FallbackLogo from '../../../assets/images/SourceFileonly icon.png';\r\n\r\n//Muicons\r\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\r\n\r\n//MuiComponents\r\nimport Button from '@mui/material/Button';\r\nimport { Divider, Typography, useTheme, useMediaQuery } from '@mui/material';\r\nimport TextField from '@mui/material/TextField';\r\nimport Box from '@mui/material/Box';\r\nimport Alert from '@mui/material/Alert';\r\n\r\n//Services\r\nimport memberService from '../../../services/member-service';\r\n\r\n// Our components\r\nimport ExternalRegisterSetup from '../../app-external/external-register-setup/ExternalRegisterSetup';\r\nimport PoweredBy from '../external-enrollments/PoweredBy';\r\nimport InfinityLoader from '../../UH-loading-animation/InfinityLoader';\r\nimport DuplicateEmailDrawer from '../external-register-setup/DuplicateEmailDrawer';\r\nimport ExternalRegisterOrLoginEnrollmentHeader from '../external-enrollments/ExternalRegisterOrLoginEnrollmentHeader';\r\nimport FlexSnackbar from '../../flex-snackbar/FlexSnackbar';\r\n\r\n//shared styles\r\nimport externalEnrollmentSharedStyles from '../externalEnrollmentSharedStyles';\r\n\r\n//component styles\r\nconst componentStyles = {\r\n inputAndSubmitContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n width: '100%',\r\n maxWidth: '575px',\r\n padding: '0px 10px',\r\n },\r\n text: {\r\n textAlign: 'center',\r\n margin: '20px auto',\r\n },\r\n input: {\r\n margin: '0px auto 15px auto ',\r\n },\r\n datePicker: {\r\n margin: '0px auto 15px auto',\r\n width: '100%',\r\n colro: 'primary.main',\r\n },\r\n alert: {\r\n margin: '0px auto 10px',\r\n width: '90%',\r\n },\r\n registerButtonContainer: {\r\n margin: '20px auto ',\r\n width: '100%',\r\n },\r\n alreadyHaveAccountButton: {\r\n maxWidth: '575px',\r\n height: '50px',\r\n fontSize: '15px',\r\n fontWeight: 500,\r\n lineHeight: '25px',\r\n },\r\n};\r\n\r\nfunction ExternalRegister(props) {\r\n let params = useLocation();\r\n\r\n let today = new Date();\r\n let day = today.getDate();\r\n let month = today.getMonth() + 1;\r\n let year = today.getFullYear();\r\n day = day < 10 ? '0' + day : day;\r\n month = month < 10 ? '0' + month : month;\r\n let dateMax = `${year - 18}-${month}-${day}`;\r\n let dateMaxObj = new Date(dateMax);\r\n let dateMin = `${year - 100}-${month}-${day}`;\r\n let dateMinObj = new Date(dateMin);\r\n\r\n const [disabled, setDisabled] = useState(true);\r\n\r\n const history = useHistory();\r\n\r\n const goto = (route) => {\r\n history.push(route);\r\n };\r\n\r\n const [values, setValues] = useState({\r\n enrollmentId: '',\r\n lastName: '',\r\n dob: null,\r\n zipCode: '',\r\n memberObj: {},\r\n memberReturned: false,\r\n });\r\n\r\n const [displayError, setDisplayError] = useState(false);\r\n\r\n const handleDobFocus = (e) => {\r\n e.target.setAttribute('type', 'date');\r\n };\r\n\r\n const handleMobileDobChange = (e) => {\r\n let value = e;\r\n\r\n // value = format(new Date(e), 'yyyy-MM-dd')\r\n setValues({\r\n ...values,\r\n dob: value,\r\n });\r\n };\r\n\r\n const handleValueChange = (e) => {\r\n let inputVal = e.target.value;\r\n let inputProperty = e.target.getAttribute('data-property');\r\n\r\n setValues({\r\n ...values,\r\n [inputProperty]: inputVal,\r\n });\r\n\r\n if (inputProperty === 'zipCode') {\r\n checkZipError(inputVal);\r\n }\r\n };\r\n\r\n const [organization, setOrganization] = useState({});\r\n\r\n const getThisOrganization = async () => {\r\n try {\r\n let thisOrganization = await props.getOrganization();\r\n setOrganization(thisOrganization);\r\n } catch (e) {\r\n setOrganization('');\r\n }\r\n };\r\n\r\n const [message, setMessage] = useState({});\r\n useEffect(() => {\r\n const timeId = setTimeout(() => {\r\n // After 3 seconds set the show value to false\r\n setMessage({\r\n ...message,\r\n messageDisplay: false,\r\n autoHideDuration: '',\r\n severity: '',\r\n backgroundColor: '',\r\n message: '',\r\n });\r\n }, 5000);\r\n\r\n return () => {\r\n clearTimeout(timeId);\r\n };\r\n }, [message.messageDisplay]);\r\n\r\n const handleMessageClose = (event, reason) => {\r\n if (reason === 'clickaway') {\r\n return;\r\n }\r\n setMessage({\r\n ...message,\r\n messageDisplay: false,\r\n autoHideDuration: '',\r\n severity: '',\r\n backgroundColor: '',\r\n message: '',\r\n });\r\n };\r\n\r\n const getEnrollmentIDFromURL = () => {\r\n let variables = window.location.href.split('?')[1].split('&');\r\n let thisVariable = variables.filter((name) => name.includes('id'));\r\n let regex = /id=(.+)/;\r\n\r\n if (thisVariable[0]?.length <= 3) return;\r\n\r\n let thisEnrollmentId = regex.exec(thisVariable)[1];\r\n\r\n if (/.{5,6}/.test(thisEnrollmentId)) {\r\n setValues({\r\n ...values,\r\n enrollmentId: thisEnrollmentId,\r\n });\r\n setMessage({\r\n ...message,\r\n messageDisplay: true,\r\n autoHideDuration: 2500,\r\n backgroundColor: '',\r\n severity: 'success',\r\n message: 'Successfully Populated Enrollment ID',\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n getThisOrganization();\r\n if (params.search.length > 0) {\r\n getEnrollmentIDFromURL();\r\n }\r\n }, []);\r\n\r\n let existingUserError = 'Enrollment ID already registered, please log in';\r\n const continueRegistration = async (e) => {\r\n props.setLoading(true);\r\n e.preventDefault();\r\n // let response = await memberService.searchMemberEnrollment(values)\r\n let enrollmentSearchObj = {};\r\n enrollmentSearchObj.enrollmentId = values.enrollmentId;\r\n if (values.lastName) {\r\n enrollmentSearchObj.lastName = values.lastName;\r\n } else {\r\n enrollmentSearchObj.lastName = '';\r\n }\r\n if (values.dob) {\r\n enrollmentSearchObj.dob =\r\n values.dob.length > 10\r\n ? // format(new Date(values.dob), 'yyyy-MM-dd')\r\n values.dob //already formatted with system timezone\r\n : values.dob;\r\n } else {\r\n enrollmentSearchObj.dob = new Date('1/1/1900');\r\n }\r\n if (values.zipCode) {\r\n enrollmentSearchObj.zipCode = values.zipCode;\r\n } else {\r\n enrollmentSearchObj.zipCode = '';\r\n }\r\n\r\n await memberService.searchMemberEnrollment(enrollmentSearchObj).then(\r\n (succ) => {\r\n //if a member already has registration history\r\n if (succ.isRegistered) {\r\n props.setLoading(false);\r\n setEnrollmentError(existingUserError);\r\n } else {\r\n //if a member does not have registration history\r\n\r\n props.setLoading(false);\r\n setValues((values) => ({\r\n ...values,\r\n memberObj: succ.member,\r\n memberReturned: true,\r\n }));\r\n }\r\n },\r\n (error) => {\r\n //display incorrect id error differently than enrollment id length verificaiton error\r\n if (error.response.status === 400 || error.response.status === 404) {\r\n setEnrollmentIdValidError(\r\n 'Enrollment ID not found. Try again or register with last name, date of birth, and zip code.'\r\n );\r\n }\r\n setDisplayError(true);\r\n props.setLoading(false);\r\n }\r\n );\r\n };\r\n\r\n const backToLogin = () => {\r\n history.push('/login');\r\n };\r\n\r\n //const getOrganizationLogo = () => {\r\n // if (organization) {\r\n // return `/api/image/organization/${organization.id}`\r\n // } else return FallbackLogo\r\n //}\r\n const [imgFetchAttempts, setImgFetchAttempts] = useState(0);\r\n const handleLogoError = (e) => {\r\n setImgFetchAttempts((prev) => prev++);\r\n if (imgFetchAttempts <= 10) e.target.src = FallbackLogo;\r\n };\r\n\r\n // Enrollment ID Erroring\r\n const [showEnrollmentError, setShowEnrollmentError] = useState(false);\r\n // Only show on Blur\r\n const checkEnrollmentError = () => {\r\n if (values.enrollmentId != '' && values.enrollmentId.length <= 4) {\r\n setShowEnrollmentError(true);\r\n setEnrollmentError('Enrollment ID must be 6 digits long');\r\n } else setEnrollmentError(null);\r\n if (values.lastName && values.dob && values.zipCode) {\r\n setEnrollmentError(null);\r\n }\r\n setShowEnrollmentError(true);\r\n };\r\n const [enrollmentError, setEnrollmentError] = useState(null);\r\n const [enrollmentIdValidError, setEnrollmentIdValidError] = useState(false);\r\n\r\n useEffect(() => {\r\n if (\r\n values.enrollmentId &&\r\n (values.enrollmentId.length == 6 || values.enrollmentId.length == 5) &&\r\n showEnrollmentError\r\n ) {\r\n setShowEnrollmentError(false);\r\n setEnrollmentError(null);\r\n setEnrollmentIdValidError(false);\r\n }\r\n }, [values.enrollmentId]);\r\n\r\n //Dob Error handling\r\n const [dobError, setDobError] = useState(null);\r\n\r\n const dobErrorMessage = useMemo(() => {\r\n switch (dobError) {\r\n case 'maxDate': {\r\n return 'Must be older than 18 years old';\r\n }\r\n case 'minDate': {\r\n return 'Must be less than 100 years old';\r\n }\r\n case 'disableFuture': {\r\n return 'Must be greater than 0 years old';\r\n }\r\n case 'invalidDate': {\r\n return 'Your date is not valid';\r\n }\r\n default: {\r\n return '';\r\n }\r\n }\r\n }, [dobError]);\r\n\r\n // Zip Erroring\r\n const [zipError, setZipError] = useState(null);\r\n const [showZipError, setShowZipError] = useState(false);\r\n const checkZipError = (value = values.zipCode) => {\r\n if (!/\\b\\d{5}\\b/.test(value)) {\r\n setShowZipError(true);\r\n setZipError('Zip code must be 5 digits long');\r\n } else {\r\n setShowZipError(false);\r\n setZipError(null);\r\n }\r\n };\r\n\r\n // const error = (field) => {\r\n // if (field == \"enrollmentId\") {\r\n // if (values.enrollmentId && values.enrollmentId.length <= 5) {\r\n // return true\r\n // } else return false\r\n // }\r\n // else if (field == 'registered')\r\n // }\r\n\r\n const handleDisabled = () => {\r\n //they're either using an enrollment id, or newly registering\r\n let disabled = true;\r\n if (values.enrollmentId?.length > 0) {\r\n //they're using an enrollment id, check for validity\r\n if (values.enrollmentId != '' && values.enrollmentId.length > 4)\r\n disabled = false;\r\n } else {\r\n //they're not using an enrollment id, check for validity of other fields\r\n let lastNameValid = false;\r\n let dobValid = false;\r\n let zipCodeValid = false;\r\n if (values.lastName?.length > 0) lastNameValid = true;\r\n if (\r\n values.dob != '' &&\r\n values.dob &&\r\n !(values.dob <= dateMinObj) &&\r\n !(dateMaxObj <= values.dob) &&\r\n !dobError\r\n ) {\r\n dobValid = true;\r\n }\r\n if (values.zipCode?.length > 0 && /\\b\\d{5}\\b/.test(values.zipCode))\r\n zipCodeValid = true;\r\n disabled = !(lastNameValid && dobValid && zipCodeValid);\r\n }\r\n setDisabled(disabled);\r\n };\r\n\r\n useEffect(() => {\r\n handleDisabled();\r\n }, [values, dobError]);\r\n\r\n return (\r\n \r\n {props.loading && (\r\n <>\r\n \r\n \r\n {/* Header */}\r\n \r\n Your Enrollment ID will help you log in{' '}\r\n faster. \r\n \r\n\r\n \r\n \r\n Take me to log in \r\n\r\n {enrollmentIdValidError && (\r\n \r\n {enrollmentIdValidError}\r\n \r\n )}\r\n\r\n Or \r\n\r\n \r\n 4}\r\n label=\"Last Name\"\r\n variant=\"outlined\"\r\n value={values.lastName}\r\n onChange={handleValueChange}\r\n inputProps={{ 'data-property': 'lastName' }}\r\n />\r\n\r\n {/* Date of birth */}\r\n\r\n \r\n 4}\r\n label=\"Date of birth\"\r\n openTo=\"year\"\r\n views={['year', 'month', 'day']}\r\n format=\"MM/dd/yyyy\"\r\n minDate={dateMinObj}\r\n maxDate={dateMaxObj}\r\n value={values.dob || null}\r\n onChange={handleMobileDobChange}\r\n onError={(error) => setDobError(error)}\r\n sx={componentStyles.datePicker}\r\n slotProps={{\r\n textField: {\r\n helperText: dobErrorMessage,\r\n },\r\n openPickerButton: { sx: { visibility: 'hidden' } },\r\n }}\r\n />\r\n \r\n\r\n {/* Zip Code */}\r\n 4}\r\n label=\"Zip Code\"\r\n variant=\"outlined\"\r\n value={values.zipCode}\r\n inputProps={{ 'data-property': 'zipCode' }}\r\n />\r\n\r\n \r\n \r\n Register\r\n \r\n \r\n\r\n \r\n Already have an account? Log in here.\r\n \r\n \r\n \r\n ) : (\r\n \r\n
\r\n const noVisibilityIcon =
\r\n\r\n let PasswordIcon = displayPassword ? noVisibilityIcon : visibilityIcon;\r\n\r\n const [disableButton, setDisableButton] = useState(true)\r\n\r\n //Handlers\r\n const handlePasswordChange = (event) => {\r\n event.persist();\r\n setValues({\r\n ...values,\r\n password: event.target.value,\r\n })\r\n };\r\n\r\n const passwordKeyPressHandler = (e) => {\r\n if (e.key === 'Enter' && !disableButton) resetPassword()\r\n if (e.key === ' ') e.preventDefault()\r\n }\r\n\r\n //Password strength props\r\n const strengthPassed = (e) => {\r\n setDisableButton(false)\r\n }\r\n const strengthNotPassed = (e) => {\r\n setDisableButton(true)\r\n }\r\n\r\n const resetPassword = async () => {\r\n const guid = location.pathname.replace(\"/resetlink/\", \"\");\r\n\r\n setValues({\r\n ...values,\r\n isReset: true,\r\n })\r\n\r\n await registerService.updatePassword(guid, values.password);\r\n }\r\n\r\n const returnToLogin = () => {\r\n history.push(\"/login\")\r\n }\r\n\r\n\r\n return (\r\n\r\n \r\n {!values.isReset &&\r\n \r\n }\r\n {values.isReset &&\r\n \r\n \r\n \r\n
\r\n Password reset \r\n \r\n
\r\n RETURN TO LOGIN \r\n
\r\n
\r\n\r\n }\r\n \r\n\r\n )\r\n\r\n}\r\n\r\nexport default ExternalResetPassword;","export default __webpack_public_path__ + \"static/media/thumbsUp.5963a2ba.png\";","import './ExternalConfirmEmail.css';\r\nimport React, { useEffect } from 'react';\r\nimport { useLocation } from 'react-router-dom';\r\n//Assets\r\nimport Logo from '../../../assets/images/LogoVector.svg';\r\nimport thumbsUp from '../../../assets/images/thumbsUp.png';\r\n\r\n//MuiComponents\r\nimport Alert from '@mui/material/Alert';\r\nimport AlertTitle from '@mui/material/AlertTitle';\r\n\r\n//Services\r\nimport registerService from '../../../services/register-service';\r\nimport Typography from '@mui/material/Typography';\r\n\r\nfunction ExternalConfirmEmail(props) {\r\n const location = useLocation();\r\n useEffect(() => {\r\n const guid = location.pathname.replace('/confirmemail/', '');\r\n const makeCallAsync = async (guid) => {\r\n return await registerService.confirmEmail(guid);\r\n };\r\n\r\n makeCallAsync(guid);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n You are all set!\r\n \r\n
\r\n
\r\n \r\n Thank you for verifying your email with UnionHub, you can\r\n close this window now.\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n}\r\nexport default ExternalConfirmEmail;\r\n","import React, { useEffect, useLayoutEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router';\r\n// import { format, differenceInCalendarYears } from \"date-fns\";\r\n\r\n//Assets\r\n// import PlaceHolderLogo from '../../../assets/images/placeHolder.svg';\r\nimport FullColorBlackText from '../../../assets/images/FullColorBlackText.svg';\r\nimport defaultLogo from '../../../assets/images/FullColorOnlyLogo.png';\r\n\r\n//Muicons\r\nimport KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';\r\nimport PersonIcon from '@mui/icons-material/Person';\r\nimport AssignmentTurnedInOutlinedIcon from '@mui/icons-material/AssignmentTurnedInOutlined';\r\nimport CalendarTodayIcon from '@mui/icons-material/CalendarToday';\r\nimport RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';\r\nimport SecurityIcon from '@mui/icons-material/Security';\r\nimport Home from '@mui/icons-material/Home';\r\n\r\n//MuiComponents\r\nimport Button from '@mui/material/Button';\r\nimport Typography from '@mui/material/Typography';\r\nimport Box from '@mui/material/Box';\r\nimport Alert from '@mui/material/Alert';\r\nimport Fade from '@mui/material/Fade';\r\nimport MobileStepper from '@mui/material/MobileStepper';\r\n\r\n//Services\r\nimport enrollmentService from '../../../services/enrollment-service';\r\nimport attachmentService from '../../../services/attachment-service';\r\nimport authService from '../../../services/auth-service';\r\nimport memberService from '../../../services/member-service';\r\n\r\n//Our Components\r\nimport ExternalEnrollmentHeader from './ExternalEnrollmentHeader';\r\nimport PoweredBy from './PoweredBy';\r\nimport InfinityLoader from '../../UH-loading-animation/InfinityLoader';\r\n\r\n//shared styles\r\nimport externalEnrollmentSharedStyles from '../externalEnrollmentSharedStyles';\r\n\r\n//Azure\r\nimport { appInsights } from '../../../ExternalApp';\r\n\r\n//Component Styles\r\n\r\nconst componentStyles = {\r\n imageContainer: { display: 'flex', justifyContent: 'center' },\r\n imageStyles: {\r\n maxHeight: '100px',\r\n maxWidth: '100%',\r\n objectFit: 'contain',\r\n },\r\n infoContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n // maxWidth: '575px',\r\n margin: '0 auto',\r\n overflowY: 'none',\r\n },\r\n loginButton: {\r\n height: 50,\r\n borderRadius: 100,\r\n width: '152px',\r\n fontWeight: '700!important',\r\n fontSize: '15px',\r\n margin: '20px auto',\r\n },\r\n //'What you will need' section\r\n stepsContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n maxWidth: '270px',\r\n margin: '0px auto',\r\n },\r\n stepsTitle: {\r\n textAlign: 'center',\r\n },\r\n iconListContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n margin: '10px auto',\r\n },\r\n iconRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n margin: '6px 0px',\r\n // maxWidth: \"280px\",\r\n },\r\n iconText: {\r\n fontFamily: 'Archivo',\r\n fontSize: '14px',\r\n fontWeight: 400,\r\n color: 'text.primary',\r\n lineHeight: '20px',\r\n },\r\n icon: { height: '22px', marginRight: '30px', color: 'text.secondary' },\r\n //Large Blue Button\r\n largeButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n width: '100%',\r\n marginBottom: '20px',\r\n },\r\n //Secure Message\r\n secureMessageContainer: {\r\n display: 'flex',\r\n flexDirecton: 'row',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n margin: '25px auto 10px',\r\n flexWrap: 'wrap',\r\n },\r\n secureMessageIcon: {\r\n height: '24px',\r\n color: 'primary.secureDataMsg',\r\n marginRight: '6px',\r\n },\r\n secureMessageText: {\r\n color: 'primary.secureDataMsg',\r\n fontSize: '12px',\r\n lineHeight: '32px',\r\n letterSpacing: '1px',\r\n textAlign: 'center',\r\n },\r\n //Text Description/Paragraph\r\n textDescription: {\r\n textAlign: 'center',\r\n margin: '20px auto',\r\n fontFamily: 'Archivo',\r\n fontWeight: 500,\r\n color: 'text.secondary',\r\n fontSize: '14px',\r\n },\r\n mobileStepper: { padding: '0px', backgroundColor: 'transparent' },\r\n};\r\n\r\nexport default function ExternalEnrollments(props) {\r\n const getCookie = (cookieName) => {\r\n let name = `${cookieName}=`;\r\n let cookieArray = document.cookie.split(';');\r\n let value = '';\r\n cookieArray.forEach((cookie) => {\r\n if (cookie.includes(name)) value = cookie.replace(name, '').trim();\r\n });\r\n return value;\r\n };\r\n const history = useHistory();\r\n const [loading, setLoading] = useState(false);\r\n const [errorGettingPlans, setErrorGettingPlans] = useState(false);\r\n const [availableEnrollments, setAvailableEnrollments] = useState([]);\r\n const [submittedEnrollments, setSubmittedEnrollments] = useState([]); //temp check for not allowing member side re-enroll\r\n const [selectedEnrollment, setSelectedEnrollment] = useState(null);\r\n\r\n const [fullMemberObj, setFullMemberObj] = useState({});\r\n\r\n const [documents, setDocuments] = useState([]);\r\n const [mostRecentDoc, setMostRecentDoc] = useState({});\r\n\r\n const grabMyEnrollments = async () => {\r\n setLoading(true);\r\n let myDomain = getCookie('subdomain').toString();\r\n let thisDomain = window.location.host.toString();\r\n if (myDomain !== thisDomain) {\r\n history.push('/login');\r\n }\r\n let info = false;\r\n try {\r\n info = await enrollmentService.getMe();\r\n } catch (error) {\r\n console.error('error getting enrollments', error);\r\n setErrorGettingPlans(true);\r\n }\r\n\r\n // check if enrollment is submitted - currently only most recent enrollment record is beign sent to front, if inProg or cancelled, member is allowed to enroll, if submitted, no re-enrollment allowed\r\n let submittedEnrollments = [];\r\n let openEnrollments = [];\r\n if (info?.length > 0) {\r\n info.forEach((enrollment) => {\r\n if (enrollment.enrollmentStateId === 2) {\r\n submittedEnrollments.push(enrollment);\r\n } else {\r\n openEnrollments.push(enrollment);\r\n }\r\n });\r\n\r\n setAvailableEnrollments(openEnrollments);\r\n setSubmittedEnrollments(submittedEnrollments); //temp check for not allowing member side re-enroll\r\n setSelectedEnrollment(openEnrollments[0]);\r\n\r\n //no enrollments, get documents\r\n if (openEnrollments?.length < 1 || !info) {\r\n let docs;\r\n try {\r\n docs = await attachmentService.getAttachments();\r\n setDocuments(docs);\r\n } catch (error) {\r\n console.error('error getting attachments', error);\r\n }\r\n }\r\n }\r\n setLoading(false);\r\n };\r\n const getFullMemberObj = async () => {\r\n try {\r\n let _member = await memberService.getMe();\r\n if (_member) {\r\n setFullMemberObj(_member);\r\n }\r\n } catch (error) {\r\n console.error('error getting member', error);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (documents?.length > 0) {\r\n setMostRecentDoc(documents[0]);\r\n }\r\n }, [documents]);\r\n\r\n const downloadEnrollmentPdf = async () => {\r\n const link = document.createElement('a');\r\n let uniqueId = mostRecentDoc?.uniqueId;\r\n\r\n link.download = `/api/attachment/${uniqueId}`;\r\n link.href = `./api/attachment/${uniqueId}`;\r\n\r\n link.click();\r\n link.remove();\r\n };\r\n\r\n useEffect(() => {\r\n grabMyEnrollments();\r\n getFullMemberObj();\r\n }, []);\r\n\r\n const startEnrollment = async (e) => {\r\n setLoading(true);\r\n //temp member-side enrollment bug fix - if enrollment is in cancelled state (enrollmentStateId=3), reopen Enrollment\r\n if (selectedEnrollment?.enrollmentStateId === 3) {\r\n let signatureObj = {\r\n enrollmentId: selectedEnrollment?.enrollmentId,\r\n signatureText: '',\r\n signature: '',\r\n signatureDate: Date.toLocaleString().slice(0, 9),\r\n groupPlanId: selectedEnrollment?.groupPlanId,\r\n isMail: false,\r\n isVerbal: false,\r\n };\r\n try {\r\n await enrollmentService.openEnrollment(signatureObj);\r\n } catch (error) {\r\n console.error('error reopening enrollment', error);\r\n }\r\n }\r\n setTimeout(() => {\r\n history.push(`/enrollments/${e.target.value}/`, {\r\n ...history.location.state,\r\n currentGroupPlanId: e.target.value,\r\n });\r\n setLoading(false);\r\n }, 250);\r\n };\r\n\r\n const [isAuthenticated, setIsAuthenticated] = useState();\r\n useEffect(() => {\r\n let _isAuthenticated = props.checkAuthentication();\r\n setIsAuthenticated(_isAuthenticated);\r\n }, []);\r\n\r\n const [imgFetchAttempts, setImgFetchAttempts] = useState(0);\r\n const handleLogoError = (e) => {\r\n setImgFetchAttempts((prev) => prev++);\r\n if (imgFetchAttempts <= 10) e.target.src = defaultLogo;\r\n };\r\n\r\n const [activeStep, setActiveStep] = useState(0);\r\n const maxSteps = availableEnrollments?.length;\r\n\r\n const handleNext = () => {\r\n setActiveStep((prevActiveStep) => prevActiveStep + 1);\r\n setSelectedEnrollment(availableEnrollments[activeStep + 1]);\r\n };\r\n const handleBack = () => {\r\n setActiveStep((prevActiveStep) => prevActiveStep - 1);\r\n setSelectedEnrollment(availableEnrollments[activeStep - 1]);\r\n };\r\n\r\n const handleLogout = () => {\r\n authService.signout();\r\n history.push('/login');\r\n };\r\n\r\n const handleDashboardClick = () => {\r\n appInsights.trackEvent({\r\n name: 'EnrollmentHome-DashboardClick',\r\n properties: { memberId: fullMemberObj?.id },\r\n });\r\n history.push('/dashboard');\r\n };\r\n\r\n appInsights.trackPageView({\r\n name: 'ExternalEnrollments Page 1',\r\n properties: { memberId: fullMemberObj?.id },\r\n });\r\n\r\n return (\r\n <>\r\n \r\n {/* CAN HAVE MULTIPLE ENROLLMENTS HERE, ONLY SHOWING ONE RIGHT NOW */}\r\n\r\n {loading && (\r\n <>\r\n \r\n \r\n {isAuthenticated && (\r\n <>\r\n {availableEnrollments?.length > 0 ? (\r\n <>\r\n {availableEnrollments?.length > 0 &&\r\n availableEnrollments.map((enrollment, i) => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n What you will need\r\n \r\n\r\n \r\n \r\n \r\n Step 1: Basic Information\r\n \r\n \r\n \r\n \r\n Step 2: Choose Benefit Options\r\n \r\n \r\n \r\n \r\n Step 3: Select Payment Schedule\r\n \r\n \r\n \r\n \r\n Step 4: Review & Submit\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Start Enrollment\r\n \r\n \r\n\r\n \r\n \r\n YOUR DATA IS PRIVATE AND PROTECTED\r\n \r\n \r\n\r\n \r\n \r\n {enrollment?.description\r\n ? enrollment.description\r\n : \"This plan offers financial support for expenses like mortgage, car payments, and other obligations if you're unable to work due to disability or death. Enrollment is quick, your information is secure, and you can cancel anytime.\"}\r\n \r\n \r\n\r\n {errorGettingPlans && (\r\n \r\n Error finding enrollment information.\r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n })}\r\n {/* // Display below if multiple enrollments */}\r\n {availableEnrollments?.length > 1 && (\r\n \r\n \r\n You have additional enrollments available! \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n // Display if no open enrollment\r\n \r\n \r\n 0\r\n ? `api/image/organization/${props.fullMemberObj?.organizationId}`\r\n : '/api/image/organization'\r\n }\r\n style={componentStyles.imageStyles}\r\n onError={handleLogoError}\r\n />\r\n \r\n\r\n \r\n There aren't any open enrollments available for you at\r\n this time.\r\n {mostRecentDoc?.uniqueId &&\r\n `Click below to download your most recent enrollment\r\n pdf.`}\r\n \r\n\r\n {mostRecentDoc?.uniqueId && (\r\n <>\r\n \r\n \r\n Download enrollment pdf\r\n \r\n \r\n \r\n )}\r\n {!props.agentEnroller && (\r\n \r\n \r\n Log Out\r\n \r\n \r\n )}\r\n {!props.agentEnroller && (\r\n \r\n \r\n )}\r\n \r\n )}\r\n \r\n )}\r\n {/* //Display if user not logged in */}\r\n {!isAuthenticated && (\r\n <>\r\n \r\n Not Authenticated, please login.\r\n \r\n history.push('/login')}\r\n >\r\n Login\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n Member has Active Coverage \r\n \r\n {expanded ? (\r\n \r\n\r\n \r\n \r\n {props?.plan?.length > 0 &&\r\n props?.plan?.map((plan, index) => {\r\n return (\r\n \r\n {/* show covered lives if anything other than Member */}\r\n \r\n {determineCoveredLives(plan) === 'Member'\r\n ? ''\r\n : determineCoveredLives(plan)}\r\n \r\n {plan?.benefitAmount > 0 ? (\r\n \r\n Benefit Amount:{' '}\r\n {UsdFormatterDec.format(plan.benefitAmount)}\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n Cost: {UsdFormatterDec.format(plan?.premiumAmount)}\r\n \r\n\r\n \r\n {plan?.eliminationPeriod ? (\r\n \r\n Elimination Period: {plan.eliminationPeriod}{' '}\r\n {plan?.eliminationPeriodTypeFriendly\r\n ? ` ${plan?.eliminationPeriodTypeFriendly}`\r\n : ''}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {/* show separating | if both elim and benifit duration exist */}\r\n {plan?.eliminationPeriod && plan?.benefitDuration ? (\r\n | \r\n ) : (\r\n ''\r\n )}\r\n {plan?.benefitDuration ? (\r\n \r\n {' '}\r\n Benefit Duration: {plan.benefitDuration}{' '}\r\n {plan?.benefitDurationTypeFriendly\r\n ? ` ${plan?.benefitDurationTypeFriendly}`\r\n : ''}\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n {/* need to add in effective date for current enrollment */}\r\n *You can make changes or elect to cancel below. To keep current\r\n coverage, reselect existing options.\r\n {' '}\r\n \r\n \r\n \r\n );\r\n}\r\n","import { keyframes } from '@emotion/react';\r\nimport { fontFamily } from '@mui/system';\r\n\r\n//INPUT BORDER\r\nlet inputFieldBorder = {\r\n borderColor: 'primary.main',\r\n borderWidth: '1.5px',\r\n};\r\nlet inputFieldBorderHover = {\r\n borderColor: 'primary.main !important',\r\n borderWidth: '1.8px !important',\r\n};\r\n\r\nvar fadeIn = keyframes`\r\n 0% {\r\n opacity: 0;\r\n color: #195FFB;\r\n transform: scale(1.9);\r\n }\r\n 100% {\r\n opacity: 1;\r\n color: inherit;\r\n transform: scale(1);\r\n }\r\n`;\r\n\r\nconst enrollmentPlanStyles = {\r\n planContainer: (expanded) => ({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n minHeight: '57px',\r\n fontSize: '20px',\r\n fontWeight: '600',\r\n lineHeight: '30px',\r\n position: 'relative',\r\n alignItems: 'center',\r\n padding: '0px',\r\n fontFamily: 'Poppins',\r\n color: expanded ? 'primary.main' : 'text.lightGray',\r\n }),\r\n expandAndCollapseButton: {\r\n position: 'absolute',\r\n right: '10px',\r\n top: '0%',\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n alignItems: 'center',\r\n width: '50px',\r\n height: '100%',\r\n cursor: 'pointer',\r\n },\r\n planTitle: {\r\n cursor: 'pointer',\r\n position: 'relative',\r\n fontFamily: 'Poppins',\r\n fontSize: '20px!important',\r\n fontWeight: '600',\r\n },\r\n collapseSection: {\r\n marginBottom: '18px',\r\n },\r\n\r\n planExplanationInnerHtmlContainer: {\r\n fontFamily: 'Archivo',\r\n fontWeight: '500',\r\n fontSize: '15px',\r\n lineHeight: '25px',\r\n textAlign: 'left',\r\n },\r\n\r\n /////////// Plan Options //////////////////\r\n optionRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: '20px 0px 0px',\r\n padding: '0px 10px 0px 0px',\r\n textAlign: 'left',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n fontFamily: 'Archivo',\r\n fontSize: '15px',\r\n },\r\n optionAndRequiredInputsContainer: {\r\n //display as column with input fields below radio button option row\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n optionRadioAndTextContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n },\r\n radioButtonIcon: (isDisabled) => ({\r\n height: '19px',\r\n color: !isDisabled ? 'primary.main' : '',\r\n }),\r\n planSelectRadioButton: {\r\n padding: '0px',\r\n marginRight: '8px',\r\n },\r\n singleOptionTextContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n fontSize: '15px',\r\n alignItems: 'center',\r\n },\r\n singleOptionText: (isSelected) => ({\r\n fontSize: '15px',\r\n fontWeight: isSelected ? 700 : 500,\r\n }),\r\n animateOnChanges: (varExists) => ({\r\n animation: !varExists ? `${fadeIn} 0.5s ease 0s` : '',\r\n }),\r\n recommendedText: {\r\n fontSize: '15px',\r\n marginLeft: '5px',\r\n },\r\n blurbTextContainer: {\r\n display: 'block',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n fontSize: '15px',\r\n alignItems: 'center',\r\n marginLeft: '32px',\r\n },\r\n blurbText: {\r\n // Coverage does not apply to.... spouses over the age of 75.\r\n // display: \"block\",\r\n variant: 'body2',\r\n color: '#646464',\r\n fontSize: '14px',\r\n fontFamily: 'Archivo',\r\n fontWeight: '500',\r\n lineHeight: '21.98px',\r\n letterSpacing: '0.10px',\r\n wordWrap: 'break-word',\r\n // for newline\r\n // wordBreak: \"break-word\",\r\n },\r\n optionExplanationOfBenefits: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n paddingLeft: '0rem',\r\n fontFamily: 'Archivo',\r\n fontWeight: '500',\r\n fontSize: '15px',\r\n lineHeight: '25px',\r\n textAlign: 'left',\r\n marginLeft: '15px',\r\n },\r\n\r\n //Incremental Plan and LADD Additional Styles\r\n explanationOfBenefitsTextIncremental: {\r\n fontFamily: 'Archivo',\r\n fontWeight: 500,\r\n fontSize: '15px',\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n margin: '0 15px 20px 25px',\r\n },\r\n\r\n selectInput: {\r\n width: '48%',\r\n marginTop: '10px',\r\n '& fieldset': inputFieldBorder,\r\n '&:hover fieldset': {\r\n borderColor: '#195ffb !important',\r\n borderWidth: '1.8px',\r\n },\r\n },\r\n elimAndDurRowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'space-between',\r\n padding: ' 0px 15px 0px 25px',\r\n textAlign: 'left',\r\n margin: '0px auto 10px',\r\n maxWidth: '500px',\r\n },\r\n elimAndDurSingleStaticContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n elimAndDurArrowIcon: {\r\n position: 'absolute',\r\n right: 7,\r\n color: 'primary.main',\r\n },\r\n elimAndDurInputLabelProps: {\r\n sx: {\r\n '&.Mui-disabled': {\r\n color: 'unset',\r\n },\r\n color: 'primary.main',\r\n },\r\n },\r\n elimAndDurStaticTitle: {\r\n fontSize: '15px',\r\n fontFamily: 'Archivo',\r\n fontWeight: 600,\r\n lineHeight: '25px',\r\n },\r\n elimAndDurationStaticText: {\r\n fontSize: '15px',\r\n fontFamily: 'Archivo',\r\n fontWeight: 400,\r\n lineHeight: '25px',\r\n marginLeft: '3px',\r\n },\r\n incSliderSection: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n padding: '0px 0px',\r\n margin: '0px auto',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n height: '40px',\r\n width: '98%',\r\n // border: '1px solid red',\r\n },\r\n incSliderContainer: {\r\n margin: '0 auto',\r\n width: '100%',\r\n // border: '1px solid red',\r\n },\r\n incSlider: {\r\n width: '90%',\r\n marginLeft: '5%',\r\n marginBottom: '4px',\r\n '& .MuiSlider-markLabel': {\r\n marginTop: '-7px',\r\n },\r\n },\r\n incSliderLowAmount: {\r\n flex: 1,\r\n fontFamily: 'Archivo',\r\n fontWeight: 500,\r\n fontSize: '12px',\r\n position: 'relative',\r\n alignSelf: 'center',\r\n top: '-2px',\r\n textAlign: 'right',\r\n },\r\n incSliderHighAmount: {\r\n flex: 1,\r\n fontFamily: 'Archivo',\r\n fontWeight: 500,\r\n fontSize: '12px',\r\n position: 'relative',\r\n alignSelf: 'center',\r\n textAlign: 'left',\r\n top: '-2px',\r\n },\r\n benefitAmountDropdownContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n margin: '20px auto 10px',\r\n padding: '0px',\r\n fontFamily: 'Archivo',\r\n // border: '1px solid red'\r\n },\r\n activeBlueDropdownField: (isDisabled = false) => ({\r\n '& fieldset': !isDisabled ? inputFieldBorder : '',\r\n '&:hover fieldset': {\r\n borderColor: !isDisabled ? '#195ffb !important' : '',\r\n borderWidth: !isDisabled ? '1.8px' : '',\r\n },\r\n }),\r\n // benefitAmountDropdownLabel: {\r\n // color: 'red'\r\n // },\r\n noOptionsAvailableMsg: {\r\n margin: '25px 0px 10px 0px',\r\n },\r\n notNowToolTip: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n toolTipIcon: {\r\n height: '20px',\r\n color: '#717171',\r\n marginLeft: '5px',\r\n },\r\n\r\n //Spouse and Dependent Info Inputs:\r\n componentContentContainer: {\r\n position: 'relative',\r\n marginBottom: '10px',\r\n },\r\n dependentTitleRowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n width: '100%',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n inputSection: {\r\n width: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-start',\r\n margin: '10px auto 0px',\r\n fontFamily: 'Archivo',\r\n },\r\n inputField: {\r\n width: '100%',\r\n marginBottom: '15px',\r\n '& fieldset': inputFieldBorder,\r\n },\r\n inputLabelProps: { sx: { color: 'primary.main' } },\r\n datePickerInput: { width: '100%', color: 'primary.main' },\r\n addAdditionalButton: {\r\n fontSize: '15px',\r\n height: '24px',\r\n color: 'primary.main',\r\n },\r\n addAdditionalButtonContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: '25px',\r\n justifyContent: 'center',\r\n },\r\n\r\n //Decline Option\r\n declineOptionRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: '20px 0px 0px',\r\n padding: ' 0px',\r\n textAlign: 'left',\r\n },\r\n declineOptionText: (isSelected) => ({\r\n alignSelf: 'center',\r\n fontFamily: 'Archivo',\r\n fontSize: '15px',\r\n fontWeight: isSelected ? 700 : 500,\r\n }),\r\n collapsedPlanSection: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n margin: '0px 0px 18px 0px',\r\n fontSize: '15px',\r\n fontWeight: '500',\r\n padding: '0px',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n fontFamily: 'Archivo',\r\n color: 'text.lightGray',\r\n },\r\n radioButtionIconCollapse: {\r\n marginRight: '8px',\r\n height: '19px',\r\n },\r\n electedOptionCollapsePlusSymbol: {\r\n marginRight: '15px',\r\n fontWeight: '700',\r\n },\r\n notElectedZeroAmount: {\r\n float: 'right',\r\n marginRight: '15px',\r\n },\r\n endSectionDivider: {\r\n position: 'relative',\r\n color: '#D9D9D9',\r\n },\r\n sectionClickFieldForSnackbarDisplay: {\r\n width: '104%',\r\n height: '100%',\r\n position: 'absolute',\r\n marginLeft: '-4%',\r\n zIndex: 5,\r\n opacity: 0,\r\n },\r\n};\r\n\r\nexport default enrollmentPlanStyles;\r\n","import React, { useState, useEffect } from 'react';\r\n\r\n//MuiIcons\r\nimport RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';\r\nimport RadioButtonIcon from '@mui/icons-material/RadioButtonUnchecked';\r\n\r\n//MuiComponents\r\nimport Collapse from '@mui/material/Collapse';\r\nimport Radio from '@mui/material/Radio';\r\nimport RadioGroup from '@mui/material/RadioGroup';\r\nimport Divider from '@mui/material/Divider';\r\nimport Typography from '@mui/material/Typography';\r\nimport { Box, Tooltip } from '@mui/material';\r\n\r\n//Our icons\r\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';\r\n//Our components\r\nimport RecommendedBenefitDisplay from '../../RecommendedBenefitDisplay';\r\nimport ExpandAndCollapseIcon from '../../enrollment-custom-components/ExpandAndCollapseIcon';\r\nimport CurrentAcLineChipDisplay from '../CurrentAcLineChipDisplay';\r\n\r\n//Our Enrollment Plan Styles\r\nimport enrollmentPlanStyles from '../enrollmentPlanStyles';\r\nimport externalEnrollmentSharedStyles from '../../../externalEnrollmentSharedStyles';\r\n\r\nexport default function EnrollmentStd(props) {\r\n let UsdFormatter = new Intl.NumberFormat('en-US', {\r\n style: 'currency',\r\n currency: 'USD',\r\n minimumFractionDigits: 0,\r\n });\r\n let UsdFormatterDec = new Intl.NumberFormat('en-US', {\r\n style: 'currency',\r\n currency: 'USD',\r\n minimumFractionDigits: 2,\r\n });\r\n\r\n let results = props.results;\r\n let stdPlan = results?.stdPlan;\r\n let stdHelpText = stdPlan?.helpText;\r\n // let stdHelpText = stdPlan?.helpText.split(`\\n`);\r\n\r\n const [expanded, setExpanded] = useState(true);\r\n const handleExpandSection = () => {\r\n setExpanded(!expanded);\r\n };\r\n\r\n const [currRec, setCurrRec] = useState(0);\r\n\r\n useEffect(() => {\r\n //if recs exist, check rec\r\n if (props?.results?.stdPlan?.options?.length > 0) {\r\n //check each option against rec w/ the selectionRec function - function returns true if option = rec\r\n let _recValue = results?.stdPlan?.options?.find((option, index) => {\r\n let _rec = props?.selectionRec(props?.results?.stdPlan?.options, index);\r\n if (_rec) return _rec;\r\n });\r\n\r\n //if rec exists, set currRec to rec value\r\n if (_recValue) setCurrRec(_recValue);\r\n }\r\n }, [props?.recommendations, props?.results?.stdPlan?.options]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n Short-Term Disability\r\n {/* bigger clickable area */}\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Current AC Line - display only to agent side if member already has this line type of active coverage */}\r\n {props?.agentEnroller &&\r\n props?.matchingACPlanType &&\r\n props?.matchingACPlanType?.length > 0 && (\r\n \r\n \r\n\r\n \r\n {results &&\r\n stdPlan.options\r\n .sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option, index) => {\r\n let isSelected =\r\n props.selections.std == option.memberOptionId ||\r\n (!props.selections.std &&\r\n currRec?.memberOptionId == option.memberOptionId);\r\n\r\n if (!option.isDecline) {\r\n return (\r\n \r\n \r\n {/* radio button, benefit amount, type */}\r\n \r\n \r\n \r\n {option?.name && (\r\n <>\r\n {option.name}{' '}\r\n {option.name.includes('%') &&\r\n option?.benefitAmount &&\r\n `(Max ${UsdFormatter.format(\r\n option.benefitAmount\r\n )})`}\r\n \r\n )}\r\n {' '}\r\n {option?.memberOptionId ==\r\n currRec?.memberOptionId && (\r\n {`(recommended)`}\r\n )}\r\n \r\n \r\n\r\n {/* premium amount */}\r\n \r\n {isSelected && '+'}\r\n {!props.dummyDisplay &&\r\n UsdFormatterDec.format(option.memberPremiumAmount)}\r\n {props.dummyDisplay && '$0.00'}\r\n \r\n \r\n\r\n {/* explanation of benefits */}\r\n {option.explanationOfBenefits && (\r\n \r\n {option.explanationOfBenefits}\r\n \r\n )}\r\n\r\n {/* benefit offsets */}\r\n {option.benefitOffsets && (\r\n \r\n {option.benefitOffsets}\r\n \r\n )}\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n Not Now\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n {!expanded && (\r\n \r\n {props.selections.std && props.selections.stdVal > 0 && (\r\n <>\r\n \r\n \r\n\r\n \r\n + {UsdFormatterDec.format(props.selections.stdVal)}\r\n \r\n \r\n )}\r\n {props.selections.std && props.selections.stdVal == 0 && (\r\n <>\r\n \r\n not elected \r\n \r\n \r\n $0.00\r\n \r\n \r\n )}\r\n {!props.selections.std && 'No plan selected'}\r\n \r\n )}\r\n\r\n \r\n \r\n Short-Term Disability\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Current AC Line - display only to agent side if member already has this line type of active coverage */}\r\n {props?.agentEnroller &&\r\n props?.matchingACPlanType &&\r\n props?.matchingACPlanType?.length > 0 && (\r\n \r\n \r\n\r\n {/* //////// Benefit amount select and slider - only display if any options besides decline option exist /////////// */}\r\n\r\n {stdOptionsExcludingDecline?.length > 0 ? (\r\n <>\r\n {/* Elimination Period & Benefit Duration select*/}\r\n {stdOptionsExcludingDecline?.length > 0 && (\r\n \r\n {/* Elimination Period */}\r\n\r\n \r\n eliminationPeriodTypes?.length <= 1 ? null : (\r\n \r\n {option.eliminationPeriod} {option.type}\r\n \r\n ))}\r\n \r\n\r\n {/* Benefit Duration */}\r\n\r\n \r\n benefitDurTypes?.length <= 1 ? null : (\r\n \r\n {option.duration} {option.type}\r\n \r\n ))}\r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n \r\n opt?.memberOptionId == stdPlanChosen?.memberOptionId\r\n )\r\n )}\r\n >\r\n {`Member (${UsdFormatter.format(\r\n stdOptionsExcludingDecline[stdSlider]?.benefitAmount || 0\r\n )})`}\r\n \r\n \r\n \r\n\r\n {/* premium amount */}\r\n \r\n opt?.memberOptionId == stdPlanChosen?.memberOptionId\r\n )\r\n )}\r\n >\r\n {stdPlanChosen?.benefitAmount > 0 && '+'}\r\n {!props.dummyDisplay &&\r\n UsdFormatterDec.format(\r\n stdOptionsExcludingDecline[stdSlider]\r\n ?.memberPremiumAmount || 0\r\n )}\r\n {props.dummyDisplay && '$0.00'}\r\n \r\n \r\n\r\n \r\n \r\n {stdOptionsExcludingDecline[stdSlider]?.explanationOfBenefits}{' '}\r\n {stdOptionsExcludingDecline[stdSlider]?.benefitOffsets &&\r\n stdOptionsExcludingDecline[stdSlider]?.benefitOffsets}\r\n \r\n \r\n\r\n {/* Dropdown - display if more than one option*/}\r\n {stdOptionsExcludingDecline?.length > 1 && (\r\n \r\n {\r\n if (stdOptionsExcludingDecline?.length > 1) {\r\n let isLast = i == stdOptionsExcludingDecline.length - 1;\r\n if (\r\n isLast &&\r\n currRec?.benefitAmount !== option?.benefitAmount\r\n ) {\r\n //last but not rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (max)`;\r\n } else if (\r\n isLast &&\r\n currRec?.benefitAmount === option?.benefitAmount\r\n ) {\r\n //last and = rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (recommended)`;\r\n } else if (\r\n !isLast &&\r\n currRec?.benefitAmount === option?.benefitAmount\r\n ) {\r\n //not last and = rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (recommended)`;\r\n } else {\r\n return UsdFormatter.format(option.benefitAmount);\r\n }\r\n } else if (stdOptionsExcludingDecline?.length == 1) {\r\n return UsdFormatter.format(\r\n stdOptionsExcludingDecline[0]?.benefitAmount\r\n );\r\n }\r\n })}\r\n value={benefitSelectionValue() || 0}\r\n onChange={(e) => handleDropdownSelection(e)}\r\n componentsProps={{\r\n popupIndicator: { sx: { color: 'primary.main' } },\r\n }}\r\n renderInput={(params) => (\r\n \r\n )}\r\n\r\n {/* SLIDER - hide if only one option available*/}\r\n {stdOptionsExcludingDecline?.length > 1 && (\r\n \r\n {/* slider min */}\r\n \r\n {/* {`$${stdOptionsExcludingDecline[0]?.benefitAmount}`} */}\r\n {UsdFormatter.format(\r\n stdOptionsExcludingDecline[0]?.benefitAmount || 0\r\n )}\r\n \r\n\r\n {/* slider */}\r\n \r\n handleSliderComplete(stdSlider)}\r\n step={1}\r\n min={0}\r\n max={stdOptionsExcludingDecline.length - 1}\r\n sx={enrollmentPlanStyles.incSlider}\r\n valueLabelDisplay=\"auto\"\r\n valueLabelFormat={UsdFormatter.format(\r\n stdOptionsExcludingDecline[stdSlider]?.benefitAmount\r\n )}\r\n />\r\n \r\n\r\n {/* slider max*/}\r\n \r\n {/* {`$${stdOptionsExcludingDecline[stdOptionsExcludingDecline.length - 1]?.benefitAmount}`} */}\r\n {UsdFormatter.format(\r\n stdOptionsExcludingDecline[\r\n stdOptionsExcludingDecline.length - 1\r\n ]?.benefitAmount || 0\r\n )}\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n nonIncrementalStdOptions?.length == 0 && (\r\n \r\n You do not have any Short-Term Disability options available.\r\n \r\n )\r\n )}\r\n\r\n \r\n {results &&\r\n stdPlan.options\r\n .sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option, index) => {\r\n let isSelected =\r\n props.selections.std == option.memberOptionId ||\r\n (!props.selections.std &&\r\n currRec?.memberOptionId == option.memberOptionId);\r\n\r\n if (!option.isDecline && option.benefitTypeId == 3) {\r\n return (\r\n \r\n \r\n {/* radio button, benefit amount, type */}\r\n \r\n \r\n \r\n {option?.name && (\r\n <>\r\n {option.name}{' '}\r\n {option.name.includes('%') &&\r\n option?.benefitAmount &&\r\n `(Max ${UsdFormatter.format(\r\n option.benefitAmount\r\n )})`}\r\n \r\n )}\r\n \r\n\r\n {option?.memberOptionId ==\r\n currRec?.memberOptionId && (\r\n {` (recommended)`}\r\n )}\r\n \r\n \r\n\r\n {/* premium amount */}\r\n \r\n {isSelected && '+'}\r\n {!props.dummyDisplay &&\r\n UsdFormatterDec.format(option.memberPremiumAmount)}\r\n {props.dummyDisplay && '$0.00'}\r\n \r\n \r\n\r\n {/* explanation of benefits */}\r\n {option.explanationOfBenefits && (\r\n \r\n {option.explanationOfBenefits}\r\n \r\n )}\r\n\r\n {/* benefit offsets */}\r\n {option.benefitOffsets && (\r\n \r\n {option.benefitOffsets}\r\n \r\n )}\r\n \r\n );\r\n }\r\n })}\r\n \r\n\r\n {/* NOT NOW */}\r\n \r\n \r\n Not Now\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Display when not expanded */}\r\n\r\n {!expanded && (\r\n \r\n {props.selections.std && props.selections.stdVal > 0 && (\r\n <>\r\n \r\n \r\n\r\n \r\n + {UsdFormatterDec.format(props.selections.stdVal)}\r\n \r\n \r\n )}\r\n\r\n {props.selections.std && props.selections.stdVal == 0 && (\r\n <>\r\n \r\n not elected \r\n \r\n \r\n $0.00\r\n \r\n \r\n )}\r\n {!props.selections.std && 'No plan selected'}\r\n \r\n )}\r\n\r\n \r\n \r\n Long-Term Disability\r\n {/* bigger clickable area */}\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Current AC Line - display only to agent side if member already has this line type of active coverage */}\r\n {props?.agentEnroller &&\r\n props?.matchingACPlanType &&\r\n props?.matchingACPlanType?.length > 0 && (\r\n \r\n \r\n \r\n\r\n \r\n {results &&\r\n ltdPlan.options\r\n .sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option, index) => {\r\n let isSelected =\r\n props.selections.ltd == option.memberOptionId ||\r\n (!props.selections.ltd &&\r\n currRec?.memberOptionId == option.memberOptionId);\r\n\r\n if (!option.isDecline) {\r\n return (\r\n \r\n \r\n {/* radio button, benefit amount, type */}\r\n \r\n \r\n \r\n {option?.name && (\r\n <>\r\n {option.name}{' '}\r\n {option.name.includes('%') &&\r\n option?.benefitAmount &&\r\n `(Max ${UsdFormatter.format(\r\n option.benefitAmount\r\n )})`}\r\n \r\n )}\r\n \r\n\r\n {option?.memberOptionId ==\r\n currRec?.memberOptionId && (\r\n {` (recommended)`}\r\n )}\r\n \r\n \r\n\r\n {/* premium amount */}\r\n \r\n {isSelected && '+'}\r\n {!props.dummyDisplay &&\r\n UsdFormatterDec.format(option.memberPremiumAmount)}\r\n {props.dummyDisplay && '$0.00'}\r\n \r\n \r\n\r\n {/* explanation of benefits */}\r\n {option.explanationOfBenefits && (\r\n \r\n {option.explanationOfBenefits}\r\n \r\n )}\r\n\r\n {/* benefit offsets */}\r\n {option.benefitOffsets && (\r\n \r\n {option.benefitOffsets}\r\n \r\n )}\r\n \r\n );\r\n } else {\r\n return (\r\n //decline option\r\n \r\n \r\n {props?.results?.name?.includes('SMART-TD') &&\r\n new Date() < new Date('12/31/2023')\r\n ? 'Keep Existing Coverage'\r\n : 'Not Now'}\r\n \r\n {props?.results?.name?.includes('SMART-TD') &&\r\n new Date() > new Date('12/31/2023') && (\r\n \r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n }\r\n })}\r\n \r\n \r\n {!expanded && (\r\n \r\n {props.selections.ltd && props.selections.ltdVal > 0 && (\r\n <>\r\n \r\n \r\n\r\n \r\n + {UsdFormatterDec.format(props.selections.ltdVal)}\r\n \r\n \r\n )}\r\n {props.selections.ltd && props.selections.ltdVal == 0 && (\r\n <>\r\n \r\n \r\n {props.results.name.includes('SMART-TD') &&\r\n new Date() < new Date('12/31/2023')\r\n ? 'Keep Existing Coverage'\r\n : 'not elected'}\r\n \r\n \r\n \r\n $0.00\r\n \r\n \r\n )}\r\n {!props.selections.ltd && 'No plan selected'}\r\n \r\n )}\r\n \r\n \r\n Long-Term Disability\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {props?.agentEnroller &&\r\n props?.matchingACPlanType &&\r\n props?.matchingACPlanType?.length > 0 && (\r\n \r\n \r\n\r\n {ltdOptionsExcludingDecline?.length > 0 ? (\r\n <>\r\n {/* Elimination Period & Benefit Duration select*/}\r\n\r\n {ltdOptionsExcludingDecline?.length > 0 && (\r\n \r\n {/* Elimination Period */}\r\n \r\n eliminationPeriodTypes?.length <= 1 ? null : (\r\n \r\n {option.eliminationPeriod} {option.type}\r\n \r\n ))}\r\n \r\n\r\n {/* Benefit Duration */}\r\n \r\n benefitDurTypes?.length <= 1 ? null : (\r\n \r\n {option.duration} {option.type}\r\n \r\n ))}\r\n \r\n \r\n )}\r\n\r\n {/* //////// Benefit amount select and slider - only show if more than decline option exists /////////// */}\r\n\r\n {/* Radio Button and Option Row */}\r\n \r\n \r\n \r\n \r\n opt?.memberOptionId == ltdPlanChosen?.memberOptionId\r\n )\r\n )}\r\n >\r\n {`Member (${UsdFormatter.format(\r\n ltdOptionsExcludingDecline[ltdSlider]?.benefitAmount || 0\r\n )})`}\r\n \r\n \r\n \r\n\r\n {/* premium amount */}\r\n \r\n opt?.memberOptionId == ltdPlanChosen?.memberOptionId\r\n )\r\n )}\r\n >\r\n {ltdPlanChosen?.benefitAmount > 0 && '+'}\r\n {!props.dummyDisplay &&\r\n UsdFormatterDec.format(\r\n ltdOptionsExcludingDecline[ltdSlider]\r\n ?.memberPremiumAmount || 0\r\n )}\r\n {props.dummyDisplay && '$0.00'}\r\n \r\n \r\n\r\n \r\n \r\n {ltdOptionsExcludingDecline[ltdSlider]?.explanationOfBenefits}{' '}\r\n {ltdOptionsExcludingDecline[ltdSlider]?.benefitOffsets &&\r\n ltdOptionsExcludingDecline[ltdSlider]?.benefitOffsets}\r\n \r\n \r\n\r\n {/* DROPDOWN - display if more than one option */}\r\n {ltdOptionsExcludingDecline?.length > 1 && (\r\n \r\n {\r\n if (ltdOptionsExcludingDecline?.length > 1) {\r\n let isLast = i == ltdOptionsExcludingDecline.length - 1;\r\n // last but not rec amount\r\n if (\r\n isLast &&\r\n currRec?.benefitAmount != option?.benefitAmount\r\n ) {\r\n // last but not rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (max)`;\r\n } else if (\r\n isLast &&\r\n currRec?.benefitAmount === option?.benefitAmount\r\n ) {\r\n //last and = rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (recommended)`;\r\n } else if (\r\n !isLast &&\r\n currRec?.benefitAmount === option?.benefitAmount\r\n ) {\r\n //not last and = rec amount\r\n return `${UsdFormatter.format(\r\n option.benefitAmount\r\n )} (recommended)`;\r\n } else {\r\n return UsdFormatter.format(option.benefitAmount);\r\n }\r\n } else if (ltdOptionsExcludingDecline?.length == 1) {\r\n return UsdFormatter.format(\r\n ltdOptionsExcludingDecline[0].benefitAmount\r\n );\r\n }\r\n })}\r\n value={benefitSelectionValue() || 0}\r\n onChange={handleDropdownSelection}\r\n componentsProps={{\r\n popupIndicator: { sx: { color: 'primary.main' } },\r\n }}\r\n renderInput={(params) => (\r\n \r\n )}\r\n\r\n {/* SLIDER */}\r\n\r\n {ltdOptionsExcludingDecline?.length > 1 && (\r\n \r\n {/* Slider min */}\r\n \r\n {UsdFormatter.format(\r\n ltdOptionsExcludingDecline[0]?.benefitAmount || 0\r\n )}\r\n \r\n\r\n {/* Slider container */}\r\n \r\n handleSliderComplete(ltdSlider)}\r\n step={1}\r\n min={0}\r\n max={ltdOptionsExcludingDecline.length - 1}\r\n sx={enrollmentPlanStyles.incSlider}\r\n valueLabelDisplay=\"auto\"\r\n valueLabelFormat={UsdFormatter.format(\r\n ltdOptionsExcludingDecline[ltdSlider]?.benefitAmount\r\n )}\r\n />\r\n \r\n\r\n {/* Slider max */}\r\n \r\n {UsdFormatter.format(\r\n ltdOptionsExcludingDecline[\r\n ltdOptionsExcludingDecline.length - 1\r\n ]?.benefitAmount || 0\r\n )}\r\n \r\n \r\n )}\r\n \r\n ) : (\r\n nonIncrementalLtdOptions?.length == 0 && (\r\n \r\n You do not have any Long-Term Disability options available.\r\n \r\n )\r\n )}\r\n\r\n \r\n {results &&\r\n ltdPlan.options\r\n .sort((a, b) => a.displayOrder - b.displayOrder)\r\n .map((option, index) => {\r\n let isSelected =\r\n props.selections.ltd == option.memberOptionId ||\r\n (!props.selections.ltd &&\r\n currRec?.memberOptionId == option.memberOptionId);\r\n\r\n if (!option.isDecline && option.benefitTypeId == 2) {\r\n return (\r\n \r\n \r\n {/* radio button, benefit amount, type */}\r\n \r\n \r\n \r\n {option?.name && (\r\n <>\r\n {option.name}{' '}\r\n {option.name.includes('%') &&\r\n option?.benefitAmount &&\r\n `(Max ${UsdFormatter.format(\r\n option.benefitAmount\r\n )})`}\r\n \r\n )}\r\n \r\n\r\n {option?.memberOptionId ==\r\n currRec?.memberOptionId && (\r\n 
\r\n <>\r\n