\n {parseWarningMsg(this.parseCountdown(remainingTimeInMs))}\n
\n \n );\n }\n}","/*\n*\n* PageNotFound Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Icon,\n Button,\n} from '@mui/material';\nimport styles from './styles.module.scss';\n\nexport function PageNotFound({ history, text: { Home, PageNotFound } }) {\n return (\n \n history.push(Home.nav_path)}\n >\n keyboard_arrow_left \n {PageNotFound.btn_back_to_accounts}\n \n
\n );\n}\n\nPageNotFound.propTypes = {\n history: PropTypes.object.isRequired,\n text: PropTypes.object.isRequired\n};\n\nexport default withRouter(LanguageHOC(PageNotFound));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { Route, Redirect } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport LogoutWarning from './LogoutWarning';\nimport PageNotFound from 'components/Features/public/PageNotFound';\n\nimport {\n notificationShow,\n allNotificationsHide,\n} from '@frontend/common';\n\nimport {\n userLogout,\n clearStore,\n twoFaRouteChange,\n} from './actions';\n\nimport { REASONS_BLOCKED } from './constants';\n\nconst select = (state) => ({\n environmentVars: state.static.environmentVars,\n isValid: state.session.isValid,\n userAccess: state.session.userAccess,\n reasonBlocked: state.session.reasonBlocked,\n isNewUser_AccessRole: state.session.isNewUser_AccessRole,\n});\n\nconst windowEvents = [\n 'click', // detects mouse click or finger press on button\n 'keydown', // detects any key being pressed down\n 'mousedown', // detects mouse click\n 'mousemove', // detects any mouse movement\n 'touchstart', // detects touch events for smaller screens\n 'scroll' // detects scrolling on any device\n];\n\nexport class ProtectedRoute extends React.Component {\n\n static propTypes = {\n environmentVars: PropTypes.shape({\n LogoutWarningTimeout: PropTypes.number.isRequired,\n AccountAccessNoFrontEndActivityTimeout: PropTypes.number.isRequired,\n }).isRequired,\n userLogout: PropTypes.func.isRequired,\n clearStore: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n allNotificationsHide: PropTypes.func.isRequired,\n isValid: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n AddBirthdate: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n Login: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n ProtectedRoute: PropTypes.shape({\n msg_logged_out_inactivity: PropTypes.string,\n msg_logged_out_inactivity_warning: PropTypes.func,\n title_logged_out_inactivity_warning: PropTypes.string,\n btn_close: PropTypes.string,\n }),\n Signup: PropTypes.shape({ nav_path: PropTypes.string }),\n Multifactor: PropTypes.shape({ nav_path: PropTypes.string }),\n VerifyEmail: PropTypes.shape({ nav_path: PropTypes.string }),\n }).isRequired,\n component: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.func,\n ]),\n render: PropTypes.func,\n userAccess: PropTypes.string.isRequired,\n requiredAccessRights: PropTypes.array.isRequired,\n reasonBlocked: PropTypes.string,\n isNewUser_AccessRole: PropTypes.bool.isRequired,\n twoFaRouteChange: PropTypes.func.isRequired,\n };\n\n state = {\n inactivityWarningOn: false,\n };\n\n // timers\n inactivityWarningTimer = null;\n\n\n handleAccountBlocks = () => {\n const { reasonBlocked, text: { AddBirthdate, Multifactor, VerifyEmail } } = this.props;\n\n switch (reasonBlocked) {\n case '': return; // no blocks\n case REASONS_BLOCKED.MISSING_EMAIL_REQUIRED: // also push to verify email path\n case REASONS_BLOCKED.EMAIL_VALIDATION_REQUIRED: return \n {'¯\\\\_(ツ)_/¯'}\n
\n \n {PageNotFound.text_oops}\n
\n\n\n {this.handleAccountBlocks()}\n\n {this.handleRequiredAccess()}\n\n
\n :\n \n {message}\n this.props.setBrowserWarning()}\n >\n close \n
\n \n );\n }\n\n componentDidMount() {\n const apiCalls = [];\n\n if (!this.props.staticDocuments.programDescription) {\n apiCalls.push(this.props.getStaticDocuments());\n }\n\n if (!this.props.isValid && this.props.usStates.length === 0) { // Prevents call for environmentVars if already in state. Need this to prevent a race condition where a user lands on /login from the /validate-email link, notifications are hidden\n apiCalls.push(this.props.getEnvironmentVars());\n }\n\n apiCalls.push(this.props.getWebMessages());\n\n this.props.setLoadingPublicVars(true);\n Promise.all(apiCalls)\n .then(() => this.props.setLoadingPublicVars(false))\n .catch(() => this.props.setLoadingPublicVars(false));\n\n this.languageSet();\n }\n\n render() {\n const {\n isValid,\n accountBlocked,\n pageTitle,\n sidenavOpen,\n notificationsOpen,\n numberOfNotViewedNotifications,\n isIpOnly_AccessRole,\n text,\n } = this.props;\n\n if (!accountBlocked && isValid) {\n return (\n \n \n \n {this.warningsCompile()}\n
\n );\n }\n else {\n return (\n \n
\n {!isIpOnly_AccessRole &&\n \n 
\n
\n \n \n this.props.toggleSidenav(!sidenavOpen)}\n title={text.Header.btn_main_menu}\n />\n
\n \n {pageTitle}\n
\n\n
\n }\n \n \n this.props.toggleNotifications(!notificationsOpen)}\n style={{ color: '#000' }}\n >\n \n notifications \n \n \n \n
\n \n \n \n {this.warningsCompile()}\n
\n );\n }\n }\n}\n\nexport default connect(select, {\n getEnvironmentVars,\n getStaticDocuments,\n getWebMessages,\n setLoadingPublicVars,\n changeLanguage,\n setBrowserWarning,\n toggleSidenav,\n toggleNotifications,\n})(LanguageHOC(Header));","import dayjs from 'dayjs';\nimport English from 'utils/translations/en.js';\n\nexport function greetingGenerator() {\n const { Home } = English;\n const hour = dayjs().format('HH'); // military hour of the day\n\n if (hour >= 5 && hour < 12) { // between 5am and 12pm\n return Home.head_greeting_morning;\n }\n else if (hour >= 12 && hour < 17) { // between 12pm and 5pm\n return Home.head_greeting_afternoon;\n }\n else if (hour >= 17 || hour < 5) { // between 5pm and 5am, or is required here since hours start over at 24\n return Home.head_greeting_evening;\n }\n}","/*\n*\n* Google Analytics Events\n*\n*/\n\nimport { sendPageView, sendClickEvent, } from './helpers';\n\nexport function appTourStepper(step) {\n sendPageView(`/app-tour/step_${step}`);\n}\n\nexport function signupStepper(step) {\n sendPageView(`/add-account/step_${step}`);\n}\n\nexport function thirdParyLinkClick(eventLabel) {\n sendClickEvent('Third Party Link Clicks', eventLabel);\n}\n\nexport function externalLinkClick(eventLabel) {\n sendClickEvent('External Link Clicks', eventLabel);\n}","/*\n*\n* SidenavMenuOption\n*\n*/\nimport React, { Component } from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport {\n Icon,\n List,\n ListItem,\n ListItemText,\n ListItemIcon,\n Collapse,\n Tooltip,\n} from '@mui/material';\n\nimport { externalLinkClick, } from 'utils/ga/events';\n\nimport { desktopWidth } from 'utils/config/_sassconfig.scss';\n\nexport class SidenavMenuOption extends Component {\n\n static propTypes = {\n name: PropTypes.string.isRequired,\n link: PropTypes.string,\n onOptionClick: PropTypes.func,\n rootMenuOptionIconName: PropTypes.string,\n externalLink: PropTypes.string,\n sidenavOpen: PropTypes.bool,\n setNestedMenuOpen: PropTypes.func,\n onClick: PropTypes.func,\n visible: PropTypes.bool,\n toggleSidenav: PropTypes.func,\n disabled: PropTypes.bool,\n };\n\n static defaultProps = {\n visible: true,\n disabled: false,\n };\n\n state = {\n showMenuOptions: false,\n };\n\n menuOptionClickHandle(link, onMenuOptionClick, externalLink, name) {\n if (link) {\n this.props.history.push(link);\n }\n else if (externalLink) {\n externalLinkClick(name); // reports click event to google analytics\n window.open(externalLink, '_blank', 'noopener,noreferrer');\n }\n onMenuOptionClick && onMenuOptionClick();\n window.innerWidth < parseInt(desktopWidth) && this.props.toggleSidenav(false); // only close menu on tablet and smaller\n }\n\n setMenuOpen = () => {\n const showMenuOptions = !this.state.showMenuOptions;\n this.setState({ showMenuOptions });\n }\n\n render() {\n const { showMenuOptions } = this.state;\n const {\n sidenavOpen,\n onOptionClick,\n link,\n rootMenuOptionIconName,\n children,\n name,\n visible,\n history: {\n location\n },\n externalLink,\n onClick,\n disabled,\n } = this.props;\n\n const isNested = Boolean(children);\n const isSelected = link === location.pathname;\n\n let customOnClick = onClick; // allows passing custom onClick when declaring the component\n if (!customOnClick)\n customOnClick = isNested\n ? () => this.setMenuOpen()\n : () => this.menuOptionClickHandle(link, onOptionClick, externalLink, name);\n\n return (\n \n {pageTitle}\n
\n {/* TRANSLATIONS uncomment to activate translation menu */}\n {/*- \n
\n {children}\n
\n \n }\n \n
\n \n
\n\n \n toggleSidenav(!sidenavOpen)}\n rootMenuOptionIconName='menu'\n toggleSidenav={toggleSidenav}\n sidenavOpen={sidenavOpen}\n />\n
\n\n \n
\n\n \n
\n {`${greetingGenerator()},`}
\n{userDetails.name}
\n\n this.setState({ languageOptionsShow: !this.state.languageOptionsShow })}\n toggleSidenav={toggleSidenav}\n >\n this.languageChangeHandle('en')}\n sidenavOpen={sidenavOpen}\n />\n this.languageChangeHandle('es')}\n sidenavOpen={sidenavOpen}\n />\n */}\n\n this.setState({ nestedMenuOpen })}\n toggleSidenav={toggleSidenav}\n >\n
\n\n \n
\n\n \n
\n \n
\n \n
\n {Navigation.text_version} {window.appVersion}
\n{Sidenav.head_need_help}
\n\n \n
\n {userDetails.previousLogin &&\n {Sidenav.text_phone} {phoneNumber ? {phoneNumber} : Sidenav.text_loading}
\n{Sidenav.text_fax} {faxNumber ? faxNumber : Sidenav.text_loading}
\n\n
\n }\n {Sidenav.text_previous_login}
\n{userDetails.previousLogin} {Sidenav.text_timezone}
\n\n
\n \n \n
\n Notifications
\n \n this.toggleNotifications(false)}\n />\n
\n \n {notifications.length > 0 ?\n notifications.map(notification => {\n const icon = this.getIconName(notification.Type);\n return [\n this.redirectAndToggle(notification.URL)}\n >\n
,\n \n
\n \n
\n \n {icon} \n
\n \n {notification.Type} . {dayjs(notification.CreatedDate).fromNow()}\n \n {notification.Title}
\n {notification.Status}
\n {Notifications.text_no_notifications}
\n }\n \n 
\n
\n );\n case 1:\n return (\n \n
\n {AppTour.text_welcome}
\n{AppTour.text_welcome2}
\n\n {!isSmallScreen && menu }\n
\n );\n case 2:\n return (\n {AppTour.text_nav}
\n\n {!isSmallScreen && notifications }\n
\n );\n case 3:\n return (\n {AppTour.text_notifications}
\n\n
\n );\n case 4:\n return (\n {AppTour.text_transactions}
\n \n \n
\n\n {AppTour.text_transactions2}
\n\n
\n \n \n
\n {AppTour.text_transactions3}
\n\n search \n
\n );\n case 5:\n return (\n {AppTour.text_table_search}
\n\n more_vert \n
\n );\n case 6:\n return (\n {AppTour.text_table_menu}
\n\n info \n
\n );\n default: return;\n }\n }\n\n neverShowAgainHandle = () => {\n this.setState({ neverShowAgain: !this.state.neverShowAgain });\n }\n\n nextHandle = () => {\n if (this.state.activeStep === this.state.steps.length - 1) {\n appTourStepper('finish'); // Google Analytics url for goal tracking\n this.closeModalHandle();\n }\n else {\n appTourStepper(this.state.activeStep + 1); // Google Analytics url for goal tracking\n this.setState({ activeStep: this.state.activeStep + 1 });\n }\n }\n\n componentDidMount() {\n const { claims, tourPreference, size: { windowWidth } } = this.props;\n const isMobile = windowWidth < parseInt(mobileWidth);\n\n if (claims.AccountBlocked !== 'True' && Object.keys(tourPreference).length === 0) { // does not pop up tour if user is 2fa blocked at login\n this.props.getUserPreferences()\n .then(() => {\n // don't show a tour if mobile\n if (isMobile) {\n this.setState({ showTour: false });\n }\n else {\n this.setState({ showTour: this.props.tourPreference.Value });\n }\n });\n }\n }\n\n render() {\n const { activeStep, isSmallScreen, neverShowAgain, showTour, steps } = this.state;\n const { classes, text: { AppTour } } = this.props;\n\n return (\n <>\n {showTour && (\n <>\n {AppTour.text_more_info}
\n\n {/* circle around navigation icon */}\n menu \n\n {/* circle around notifications icon */}\n notifications \n
\n\n \n \n {activeStep !== 0 && keyboard_arrow_left }\n {activeStep !== 0 && AppTour.btn_back}\n \n }\n classes={{ root: classes.stepperRoot }}\n nextButton={\n \n {activeStep === steps.length - 1 ? AppTour.btn_finish : AppTour.btn_next}\n keyboard_arrow_right \n \n }\n position='static'\n steps={steps.length}\n variant='dots'\n />\n
\n\n \n \n {AppTour.btn_skip}\n \n
\n\n \n
\n );\n}\n\nFormWrapper.propTypes = {\n children: PropTypes.node,\n};\n\nexport default LanguageHOC(FormWrapper);","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './styles.module.scss';\n\nconst createMarkup = (body) => {\n return { __html: body };\n};\n\n// this will have a alternate text input for new api messages and the old way just passing children\n\nexport function Banner(props) {\n if (props.show)\n return (\n \n
\n \n \n
\n \n
\n );\n else\n return null;\n}\n\nBanner.propTypes = {\n show: PropTypes.bool.isRequired,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n body: PropTypes.string,\n};\n\nexport default Banner;\n","export function getRegisteredDevice() {\n const allCookies = document.cookie.split(';');\n const devicePair = allCookies.find(crumb => crumb.includes('device'));\n return devicePair ? devicePair.substr(devicePair.indexOf('=') + 1, devicePair.length) : '';\n}\n\nexport function setRegisteredDevice(GUID, currentDateFromApi, cookieExpirationInDaysFromApi) {\n const newDate = new Date(currentDateFromApi);\n newDate.setDate(newDate.getDate() + cookieExpirationInDaysFromApi);\n const expiration = newDate.toUTCString(); // per w3 cookie rules\n const hostName = document.location.hostname;\n hostName === 'localhost' \n ? document.cookie = `device=${GUID}; expires=${expiration}; path=/; SameSite=Strict;` // local DEV\n : document.cookie = `device=${GUID}; expires=${expiration}; path=/; domain=my529.org; SameSite=Strict;`;\n}","/*\n*\n* Login Component\n*\n*/\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { cloneDeep } from 'lodash';\nimport parse from 'html-react-parser';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n Divider,\n TextField,\n} from '@mui/material';\n\nimport {\n LoadingOverlay,\n StyledLink,\n allNotificationsHide,\n notificationShow,\n PasswordInput,\n} from '@frontend/common';\n\nimport FormWrapper from '../FormWrapper';\nimport Banner from 'components/Features/Banner';\nimport { BANNER_LOCATIONS } from 'components/AppRoot/StaticResources/constants';\n\nimport { GETRecaptchaToken } from 'utils/helpers/api_handler';\nimport { getRegisteredDevice } from 'utils/helpers/registered_device_handler';\nimport { userLogin, verifyRecaptcha } from 'components/AppRoot/Navigation/actions';\nimport { getThreatMetrixVars } from 'components/AppRoot/StaticResources/actions.js';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n recaptchaToken: state.session.userDetails.recaptchaToken,\n recaptchaVerified: state.session.userDetails.recaptchaVerified,\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n threatMetrixVars: state.static.threatMetrixVars,\n loadingPublicVars: state.static.loadingPublicVars,\n webMessages: state.static.webMessages,\n});\n\nexport class Login extends Component {\n\n static propTypes = {\n webMessages: PropTypes.object.isRequired,\n allNotificationsHide: PropTypes.func.isRequired,\n supportNumber: PropTypes.string.isRequired,\n getThreatMetrixVars: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n recaptchaToken: PropTypes.string.isRequired,\n recaptchaVerified: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Login: PropTypes.shape({\n btn_create_account: PropTypes.string,\n btn_fa_login_link: PropTypes.string,\n btn_login: PropTypes.string,\n err_password: PropTypes.string,\n password_length: PropTypes.string,\n err_username: PropTypes.string,\n username_length: PropTypes.string,\n lbl_password: PropTypes.string,\n lbl_username: PropTypes.string,\n msg_recaptcha_language: PropTypes.string,\n nav_password: PropTypes.string,\n nav_username: PropTypes.string,\n nav_path: PropTypes.string,\n nav_title: PropTypes.string,\n }),\n ForgotPassword: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n ForgotUsername: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n Register: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n SetupUser: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n }).isRequired,\n threatMetrixVars: PropTypes.shape({\n SessionId: PropTypes.string,\n ThreatMetrixUrl: PropTypes.string,\n }).isRequired,\n userLogin: PropTypes.func.isRequired,\n verifyRecaptcha: PropTypes.func.isRequired,\n loadingPublicVars: PropTypes.bool.isRequired,\n };\n\n state = {\n username: '',\n password: '',\n formErrors: {},\n loading: false,\n canContinue: false,\n };\n\n /*\n Once this script tag is added, at login the same SessionId\n found in this ThreatMetrixUrl user here is sent with the\n Username and Password at login. Nothing else is needed from\n the client, the rest is managed between our API and TMX API.\n */\n createThreatMetrixTag() {\n // If logging in/out in same browser tab b/w different users, TMX will throw an error about too many calls, but Joel confirmed TMX is logging correctly\n const tmxScript = document.createElement('script');\n tmxScript.setAttribute('type', 'text/javascript');\n tmxScript.setAttribute('src', this.props.threatMetrixVars.ThreatMetrixUrl);\n tmxScript.setAttribute('id', 'tmxScript');\n document.head.appendChild(tmxScript);\n }\n\n threatMetrixPreCheck = (e) => { // gets a TMX session ID before submitting form\n e.preventDefault();\n\n if (!this.props.threatMetrixVars.SessionId) {\n this.setState({ loading: true });\n\n this.props.getThreatMetrixVars()\n .then(() => {\n this.createThreatMetrixTag();\n this.onFormSubmit();\n })\n .catch(() => this.onFormSubmit()); // in the event of a catch, log user in with an empty SessionId, and do not set the script\n }\n else {\n this.onFormSubmit();\n }\n }\n\n formValidate = () => {\n let formErrors = {};\n\n if (!this.state.username) {\n formErrors.username = this.props.text.Login.err_username;\n }\n\n if (!this.state.password) {\n formErrors.password = this.props.text.Login.err_password;\n }\n\n if (this.state.username && this.state.password) {\n formErrors = {};\n }\n\n if (this.state.password.length > 40) {\n formErrors.password = this.props.text.Login.password_length;\n }\n\n if (this.state.username.length > 128) {\n formErrors.username = this.props.text.Login.username_length;\n }\n\n const isValid = Object.keys(formErrors).length === 0;\n\n this.setState({\n formErrors,\n loading: isValid, // this is to stop loading on the TMX api call if there are form errors\n });\n\n return isValid;\n }\n\n onFormSubmit = () => {\n this.props.allNotificationsHide();\n\n if (this.formValidate()) {\n document.getElementById('loginUsername').blur();\n document.getElementById('loginPassword').blur();\n const deviceGUID = getRegisteredDevice();\n\n const params = {\n username: this.state.username,\n password: this.state.password,\n SessionId: this.props.threatMetrixVars.SessionId, // GUID for ThreatMetrix\n devicetoken: deviceGUID\n };\n\n this.setState({ loading: true });\n\n this.props.userLogin(params)\n .then(() => {\n try {\n document.cookie = 'closeAcct=true';\n window.QSI.API.run(); // stimulate Targeting.php\n window.QSI.API.unload();\n window.QSI.API.load();\n window.QSI.API.run(); // stimulate Targeting.php\n }\n catch (error) {\n // return null;\n }\n })\n .catch((response) => {\n let password = '';\n let username = '';\n\n if (response.payload.data.length > 0) {\n response.payload.data.forEach(element => {\n if (element.Field === 'password') {\n password = element.Message;\n }\n if (element.Field === 'username') {\n username = element.Message;\n }\n });\n }\n \n this.setState({ loading: false, formErrors: { password, username } });\n });\n }\n }\n\n onInputChange = (inputName, value) => {\n const clonedErrors = cloneDeep(this.state.formErrors);\n\n if (value.length > 0 && this.state.formErrors[inputName]) {\n clonedErrors[inputName] = '';\n }\n\n this.setState({\n [inputName]: value,\n formErrors: clonedErrors,\n });\n }\n\n recaptchaVerify = () => {\n this.setState({ loading: true });\n GETRecaptchaToken('login')\n .then(token => {\n if (token !== this.props.recaptchaToken) {\n return this.props.verifyRecaptcha(token) // need to return so it is caught in parent's finally\n .then((response) => {\n if (!this.props.recaptchaVerified) {\n const warningMessage = response.payload.data['error-codes'][0];\n this.setState({ canContinue: true });\n this.props.notificationShow(warningMessage, 'warning');\n }\n });\n }\n })\n .finally(() => this.setState({ loading: false }));\n }\n\n componentDidMount() {\n this.recaptchaVerify();\n }\n\n render() {\n const { formErrors, loading, canContinue, } = this.state;\n const {\n loadingPublicVars,\n webMessages,\n text: {\n Login: {\n nav_password, nav_username, lbl_password, btn_create_account, btn_fa_login_link,\n btn_login, nav_title, lbl_username, msg_recaptcha_language,\n },\n },\n } = this.props;\n const forgotUsername = \n {props.body\n ?\n \n :\n props.children\n }\n
\n \n \n \n \n this.onInputChange('username', e.target.value)}\n value={this.state.username}\n variant='filled'\n />\n this.onInputChange('password', e.target.value)}\n value={this.state.password}\n variant='filled'\n />\n \n \n\n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n allNotificationsHide,\n getThreatMetrixVars,\n notificationShow,\n userLogin,\n verifyRecaptcha,\n})(LanguageHOC(Login)));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport parse from 'html-react-parser';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n TextField,\n} from '@mui/material';\nimport FormWrapper from '../FormWrapper';\nimport {\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\n\nimport { GETRecaptchaToken } from 'utils/helpers/api_handler';\nimport { verifyRecaptcha } from 'components/AppRoot/Navigation/actions';\nimport { forgotPassword } from 'components/Features/public/ForgotPassword/actions';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n recaptchaToken: state.session.userDetails.recaptchaToken,\n recaptchaVerified: state.session.userDetails.recaptchaVerified,\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n});\n\nexport class ForgotPassword extends Component {\n\n static propTypes = {\n notificationShow: PropTypes.func.isRequired,\n forgotPassword: PropTypes.func.isRequired,\n verifyRecaptcha: PropTypes.func.isRequired,\n recaptchaToken: PropTypes.string.isRequired,\n recaptchaVerified: PropTypes.bool.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n ForgotPassword: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_submit: PropTypes.string,\n err_username: PropTypes.string,\n msg_recaptcha_language: PropTypes.string,\n msg_success: PropTypes.string,\n nav_title: PropTypes.string,\n text_instructions: PropTypes.func,\n text_username: PropTypes.string,\n }),\n Login: PropTypes.shape({\n nav_path: PropTypes.string,\n })\n }).isRequired,\n };\n\n state = {\n loading: false,\n username: '',\n inputError: '',\n canContinue: false\n };\n\n formValidate = () => {\n let formIsValid = false;\n let inputError = '';\n\n if (this.state.username.length < 1) {\n inputError = this.props.text.ForgotPassword.err_username;\n }\n else {\n formIsValid = true;\n }\n\n this.setState({\n inputError,\n });\n\n return formIsValid;\n };\n\n onFormSubmit = (e) => {\n e.preventDefault();\n\n if (this.formValidate()) {\n this.setState({ loading: true });\n this.props.forgotPassword({ login: this.state.username })\n .then(() => {\n this.props.history.push(this.props.text.Login.nav_path);\n this.props.notificationShow(this.props.text.ForgotPassword.msg_success, 'success');\n })\n .catch(() => this.setState({ loading: false }));\n }\n };\n\n recaptchaVerify = () => {\n GETRecaptchaToken('forgotpassword')\n .then(token => {\n if (token !== this.props.recaptchaToken) {\n this.props.verifyRecaptcha(token)\n .then((response) => {\n if (!this.props.recaptchaVerified) {\n const warningMessage = response.payload.data['error-codes'][0];\n this.setState({ canContinue: true });\n this.props.notificationShow(warningMessage, 'warning');\n }\n });\n }\n });\n }\n\n componentDidMount() {\n this.recaptchaVerify();\n }\n\n render() {\n const { \n btn_cancel, btn_submit, nav_title, text_instructions, \n text_username, msg_recaptcha_language\n } = this.props.text.ForgotPassword;\n const { loading, canContinue, inputError, username } = this.state;\n return (\n \n \n {btn_login}\n \n
\n\n \n I forgot my {forgotUsername} or {forgotPassword}\n
\n\n \n
\n \n or
\n \n this.props.history.push(this.props.text.Register.nav_path)}\n >\n {btn_create_account}\n \n
\n \n \n
\n \n {/* This reCAPTCHA text is required since we are hiding the badge on all pages */}\n
\n {parse(msg_recaptcha_language)}
\n{text_instructions(this.props.supportNumber)}
\n\n this.props.history.goBack()}\n disabled={loading}\n >\n {btn_cancel}\n \n \n \n {btn_submit}\n \n \n
\n \n {/* This reCAPTCHA text is required since we are hiding the badge on all pages */}\n
\n {parse(msg_recaptcha_language)}
\n\n
\n );\n }\n\n}\n\nexport default withRouter(connect(select, {\n setGetRegistrationType\n})(LanguageHOC(FormWrapper)));","import { POSTrequest } from 'utils/helpers/api_handler';\nimport {\n AGENT_SEARCH,\n AGENT_UPDATE,\n REGISTRATION_TYPE,\n} from './constants';\n\n\nexport function agentSearch(params) {\n const payload = POSTrequest('/UserRegistration/AgentExists', params);\n return {\n type: AGENT_SEARCH,\n payload,\n };\n}\n\nexport function agentUpdate(params) {\n const payload = POSTrequest('/UserRegistration/Register', params);\n return {\n type: AGENT_UPDATE,\n payload,\n };\n}\n\nexport function setGetRegistrationType(registrationType) {\n return {\n type: REGISTRATION_TYPE,\n payload: registrationType,\n };\n}","import dayjs from 'dayjs';\nimport * as English from 'utils/translations/common.js';\n\n/* Validations in this file (to prevent duplication)\n accountOwnerBirthdateValidator\n beneficiaryBirthdateValidator\n calendarValidator\n cityValidator\n emailValidator\n firstNameValidator\n lastNameValidator\n middleNameValidator\n phoneNumValidator\n postalCodeValidator\n socialSecurityNumValidator\n stateValidator\n street1Validator\n userNameValidator\n alphaNumericOnlyValidator\n schoolAttnValidator\n*/\n\n// TODO When these move to Common we'll need to add the translations there. This will currently hard code English in.\nexport function firstNameValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n if (value.length > 20) {\n return English.errors.field_max_length_20;\n }\n return '';\n}\n\nexport function middleNameValidator(value) {\n if (value.length > 20) {\n return English.errors.field_max_length_20;\n }\n return '';\n}\n\nexport function lastNameValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n if (value.length > 40) {\n return English.errors.field_max_length_40;\n }\n return '';\n}\n\nexport function socialSecurityNumValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n if (value.length < 9 || value.length > 9) {\n return English.errors.ssn_length;\n }\n return '';\n}\n\nexport function phoneNumValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n if (value.length < 10) {\n return English.errors.phone_number_too_short;\n }\n return '';\n}\n\nexport function street1Validator(value) {\n const street1Regex = /^[A-Za-z0-9 .,':#/-]+$/g; // eslint-disable-line no-useless-escape\n if (!value) {\n return English.errors.required;\n }\n if (!street1Regex.test(value)) {\n return English.errors.alpha_numeric_and_allowable_characters_only(\". , - ' : # /\"); // eslint-disable-line\n }\n if (value.length > 40) {\n return English.errors.field_max_length_40;\n }\n return '';\n}\n\nexport function cityValidator(value) {\n const cityRegex = /^[A-Za-z .,'-]+$/g; // eslint-disable-line no-useless-escape\n if (!value) {\n return English.errors.required;\n }\n if (!cityRegex.test(value)) {\n return English.errors.alphabetic_and_allowable_characters_only(\". , - '\"); // eslint-disable-line\n }\n return '';\n}\n\nexport function stateValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n return '';\n}\n\nexport function postalCodeValidator(value) {\n const postalCodeRegex = /(^\\d{5}$)|(^\\d{5}-\\d{4}$)|(^\\d{9}$)|(^\\d{5} \\d{4}$)/;\n if (!value) {\n return English.errors.required;\n }\n if (!value.match(postalCodeRegex)) {\n return English.errors.postal_code_reqs;\n }\n return '';\n}\n\nexport function accountOwnerBirthdateValidator(value, minAge, maxAge) {\n if (!value) {\n return English.errors.required;\n }\n\n value = dayjs(value); // converts date to momentjs just in case it doesn't come in that way\n\n if (!dayjs(value).isValid()) {\n return English.errors.date_invalid;\n }\n\n else if (dayjs(value).isBefore(dayjs().subtract(maxAge, 'year')) ||\n dayjs(value).isAfter(dayjs().subtract(minAge, 'year'))\n ) {\n return English.errors.age_limits(minAge, maxAge);\n }\n\n return '';\n}\n\nexport function beneficiaryBirthdateValidator(value, maxAge) {\n const minAge = 0;\n\n if (!value) {\n return English.errors.required;\n }\n\n value = dayjs(value); // converts date to momentjs just in case it doesn't come in that way\n\n if (!dayjs(value).isValid()) {\n return English.errors.date_invalid;\n }\n else if (dayjs(value).isBefore(dayjs().subtract(maxAge, 'year')) ||\n dayjs(value).isAfter(dayjs().subtract(minAge, 'year'))\n ) {\n return English.errors.age_limits(minAge, maxAge);\n }\n return '';\n}\n\nexport function beneficiaryRelationshipValidator(value) {\n if (!value) {\n return English.errors.required;\n }\n return '';\n}\n\nexport function calendarValidator(value, minDate, maxDate) {\n if (!value) {\n return English.errors.required;\n }\n\n value = dayjs(value); // converts date to momentjs just in case it doesn't come in that way\n if (!dayjs(value).isValid()) {\n return English.errors.date_invalid;\n }\n else if (minDate && maxDate && (dayjs(value).isAfter(dayjs(maxDate), 'day') || dayjs(value).isBefore(dayjs(minDate), 'day'))) {\n return English.errors.date_limits(dayjs(minDate).format('MM/DD/YYYY'), dayjs(maxDate).format('MM/DD/YYYY'));\n }\n return '';\n}\n\nexport function amountValidator(value, minAmount, maxAmount) {\n if (!value) {\n return English.errors.amount_invalid;\n }\n else if (minAmount && maxAmount && (value > maxAmount || value < minAmount)) {\n return English.errors.amount_invalid;\n }\n return '';\n}\n\nexport function userNameValidator(userName) {\n if (!userName) {\n return English.errors.required;\n }\n if (userName.length > 0 && userName.length < 6) {\n return English.errors.username_min_length;\n }\n if (userName.length > 40) {\n return English.errors.field_max_length_40;\n }\n if (userName.match(/\\d\\d\\d\\d/)) { // username cannot contain more than 3 numbers in a row\n return English.errors.username_with_numbers;\n }\n if (userName.match(/^\\s+|\\s+$/)) {\n return English.errors.no_trailing_leading_spaces; // no leading or trailing spaces\n }\n return '';\n}\n\nexport function emailValidator(email) {\n const emailRegex = /^\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/; // eslint-disable-line no-useless-escape\n if (!email) {\n return English.errors.required;\n }\n if (email.match(/\\s+/)) {\n return English.errors.no_spaces_anywhere; // no spaces anywhere\n }\n if (!emailRegex.test(email)) {\n return English.errors.email_invalid;\n }\n return '';\n}\n\nexport function alphaNumericOnlyValidator(str) {\n const nonAlphanumericCharsRegex = /[^0-9a-zA-Z ]/g;\n\n if (nonAlphanumericCharsRegex.test(str)) {\n return English.errors.alpha_numeric_only;\n }\n return '';\n}\n\nexport function schoolAttnValidator(str) {\n const nonAllowableCharsRegex = /[^0-9a-zA-Z \"\"&.,':#/-]/g;\n\n if (nonAllowableCharsRegex.test(str)) {\n return English.errors.alpha_numeric_and_allowable_characters_only(\". , ' / \\\" : & # -\"); // eslint-disable-line\n }\n else if (str.length > 40) {\n return English.errors.field_max_length_40;\n }\n return '';\n}","/*\n*\n* Register Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n registerUser,\n verifyRecaptcha,\n} from 'components/AppRoot/Navigation/actions';\nimport { passwordRequirementsGet } from 'components/AppRoot/StaticResources/actions';\nimport { GETRecaptchaToken } from 'utils/helpers/api_handler';\nimport FormWrapper from '../FormWrapper';\n\nimport { REGISTRATION_TYPES } from '../constants';\n\nimport {\n allNotificationsHide,\n Checkbox,\n LoadingOverlay,\n Modal,\n notificationShow,\n PasswordInput,\n PasswordRequirements,\n} from '@frontend/common';\n\nimport { emailValidator } from 'utils/helpers/form_validation';\n\nimport {\n Button,\n Accordion,\n FormHelperText,\n TextField,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\n// When the user clicks on the button, scroll to the top of the document\nconst scrollToTop = () => {\n document.body.scrollTop = 0; // For Safari\n document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera\n};\n\nconst select = (state) => ({\n registrationType: state.registrationtype.registrationType,\n passwordRequirements: state.static.passwordRequirements,\n recaptchaToken: state.session.userDetails.recaptchaToken,\n recaptchaVerified: state.session.userDetails.recaptchaVerified,\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n});\n\nexport class Register extends React.Component {\n static propTypes = {\n registrationType: PropTypes.string.isRequired,\n allNotificationsHide: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n passwordRequirements: PropTypes.array.isRequired,\n passwordRequirementsGet: PropTypes.func.isRequired,\n recaptchaToken: PropTypes.string.isRequired,\n recaptchaVerified: PropTypes.bool.isRequired,\n registerUser: PropTypes.func.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n Login: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n Register: PropTypes.shape({\n btn_register: PropTypes.string,\n btn_start_registration: PropTypes.string,\n err_max_length_20: PropTypes.string,\n err_max_length_40: PropTypes.string,\n err_password_criteria: PropTypes.string,\n err_password_match: PropTypes.string,\n err_required_field: PropTypes.string,\n err_terms_agree: PropTypes.string,\n err_username_cannot_match_pass: PropTypes.string,\n err_username_max_length: PropTypes.string,\n err_username_min_length: PropTypes.string,\n err_username_spaces: PropTypes.string,\n err_username_with_numbers: PropTypes.string,\n err_valid_email: PropTypes.string,\n head_individual_account: PropTypes.string,\n head_terms: PropTypes.string,\n lbl_email: PropTypes.string,\n lbl_firstName: PropTypes.string,\n lbl_lastName: PropTypes.string,\n lbl_password1: PropTypes.string,\n lbl_password2: PropTypes.string,\n lbl_username: PropTypes.string,\n nav_path: PropTypes.string,\n text_about_individual_account: PropTypes.string,\n text_about_institutional_account: PropTypes.string,\n text_already_have_account: PropTypes.string,\n text_i_agree: PropTypes.string,\n text_read_terms: PropTypes.string,\n text_setup_online_access: PropTypes.string,\n text_setup_user: PropTypes.string,\n text_terms_bullets: PropTypes.array,\n text_menu_1: PropTypes.string,\n text_menu_2: PropTypes.string,\n text_never_opened_account: PropTypes.string,\n }),\n ResendEmail: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n SetupUser: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n }).isRequired,\n verifyRecaptcha: PropTypes.func.isRequired,\n };\n\n state = {\n apiErrors: [],\n formErrors: {},\n loading: false,\n passwordIsValid: false,\n passwordReqsVisible: false,\n registrationInfo: {\n email: '',\n firstName: '',\n lastName: '',\n password1: '',\n password2: '',\n username: '',\n },\n termsChecked: false,\n termsModalOpen: false,\n };\n\n formValidate = () => {\n const formErrors = {};\n const { apiErrors, passwordIsValid, registrationInfo: { email, firstName, lastName, password1, password2, username }, termsChecked } = this.state;\n const { Register } = this.props.text;\n\n // Username validation\n if (username.match(/^\\s+|\\s+$/)) {\n formErrors.username = Register.err_username_spaces;\n }\n if (username.match(/\\d\\d\\d\\d/)) {\n formErrors.username = Register.err_username_with_numbers;\n }\n if (username === password1) {\n formErrors.username = Register.err_username_cannot_match_pass;\n }\n if (!username) {\n formErrors.username = Register.err_required_field;\n }\n if (username.length > 40) {\n formErrors.username = Register.err_max_length_40;\n }\n if (username.length < 6) {\n formErrors.username = Register.err_username_min_length;\n }\n // First and last name validation\n if (!firstName) {\n formErrors.firstName = Register.err_required_field;\n }\n if (firstName.length >= 20) {\n formErrors.firstName = Register.err_max_length_20;\n }\n if (!lastName) {\n formErrors.lastName = Register.err_required_field;\n }\n if (lastName.length >= 40) {\n formErrors.lastName = Register.err_max_length_40;\n }\n // Email validation\n if (!email) {\n formErrors.email = Register.err_required_field;\n }\n const emailError = emailValidator(email);\n if (email && emailError) {\n formErrors.email = emailError;\n }\n // Password validation\n if (!passwordIsValid) {\n formErrors.password1 = Register.err_password_criteria;\n }\n if (!password1) {\n formErrors.password1 = Register.err_required_field;\n }\n if (!password2) {\n formErrors.password2 = Register.err_required_field;\n }\n if (password1 !== password2) {\n formErrors.password2 = Register.err_password_match;\n }\n // Terms are checked\n if (!termsChecked) {\n formErrors.terms = Register.err_terms_agree;\n }\n // API errors\n if (apiErrors.length > 0) {\n apiErrors.forEach(error => {\n if (error.Field === 'EmailAddress') {\n formErrors.email = error.Message;\n }\n if (error.Field === 'FirstName') {\n formErrors.firstName = error.Message;\n }\n if (error.Field === 'LastName') {\n formErrors.lastName = error.Message;\n }\n if (error.Field === 'PasswordOne') {\n formErrors.password1 = error.Message;\n }\n if (error.Field === 'PasswordTwo') {\n formErrors.password2 = error.Message;\n }\n if (error.Field === 'UserName' || error.Field === 'Username') {\n formErrors.username = error.Message;\n }\n });\n }\n\n this.setState({\n apiErrors: [],\n formErrors\n });\n\n return Object.keys(formErrors).length === 0; // returns True or False whether form is valid\n }\n\n onFormSubmit = e => {\n e.preventDefault();\n\n if (this.formValidate()) {\n this.setState({ loading: true });\n const { registrationInfo } = this.state;\n\n const apiRegistrationInfo = {\n EmailAddress: registrationInfo.email,\n FirstName: registrationInfo.firstName,\n LastName: registrationInfo.lastName,\n PasswordOne: registrationInfo.password1,\n PasswordTwo: registrationInfo.password2,\n UserName: registrationInfo.username,\n };\n\n this.props.registerUser(apiRegistrationInfo)\n .then(() => {\n this.setState({ loading: false });\n this.props.history.push(this.props.text.ResendEmail.nav_path);\n })\n .catch(errors => {\n this.setState({\n apiErrors: errors.payload.data,\n loading: false\n }, () => this.formValidate());\n });\n }\n }\n\n onInputChange = e => {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n [e.target.name]: ''\n },\n registrationInfo: {\n ...this.state.registrationInfo,\n [e.target.name]: e.target.value,\n }\n });\n }\n\n onTermsCheck = () => {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n terms: !this.state.termsChecked ? '' : this.state.formErrors.terms // termsChecked isn't set to true yet, so we need to check that termsChecked is false to clear the error.\n },\n termsChecked: !this.state.termsChecked\n });\n }\n\n recaptchaVerify = () => {\n GETRecaptchaToken('register')\n .then(token => {\n if (token !== this.props.recaptchaToken) {\n this.props.verifyRecaptcha(token)\n .then((response) => {\n if (!this.props.recaptchaVerified) {\n const warningMessage = response.payload.data['error-codes'][0];\n this.props.notificationShow(warningMessage, 'warning');\n }\n });\n }\n });\n }\n\n handleMenuClick = (event) => {\n this.setState({ menuOpen: event.currentTarget });\n };\n\n componentDidMount() {\n scrollToTop();\n if (this.props.passwordRequirements.length === 0) {\n this.props.passwordRequirementsGet();\n }\n this.props.allNotificationsHide();\n this.recaptchaVerify();\n }\n\n render() {\n const { \n passwordRequirements, \n recaptchaVerified, \n registrationType,\n text: { Register } \n } = this.props;\n\n const { \n formErrors, \n loading, \n passwordReqsVisible, \n registrationInfo,\n termsChecked, \n termsModalOpen, \n } = this.state;\n\n return (\n <>\n {loading ?\n \n
\n \n
\n \n \n
\n\n \n
\n {Register.head_other_account}
\n\n{Register.text_about_other_account}
\n\n
\n\n \n {children}\n
\n\n \n
\n\n\n {Register.head_other_account_by_form}
\n\n{Register.text_account_types_requirement}
\n{Register.text_institutional_account} - {Register.text_about_institutional_account}
\n {Register.text_form104}\n\n{Register.text_ugma_utma_account} - {Register.text_about_ugma_utma_account}
\n {Register.text_about_form104}\n\n{Register.text_intl_number}
\n{Register.text_about_intl_number}
\n {Register.text_form500}\n {/* This reCAPTCHA text is required since we are hiding the badge on all pages */}\n
\n {parse(Register.msg_recaptcha_language)}
\n\n {Register.text_never_opened_account}\n
\n \n \n }\n - {Register.text_terms_bullets.map(bull =>
- {bull} )}
\n \n \n
\n );\n }\n}\n\n\nexport default connect(select, {\n notificationShow,\n resendEmail\n})(LanguageHOC(ResendEmail));\n\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport qs from 'qs';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n} from '@mui/material';\nimport FormWrapper from '../FormWrapper';\nimport {\n LoadingOverlay,\n PasswordRequirements,\n notificationShow,\n PasswordInput,\n} from '@frontend/common';\n\nimport { resetPassword } from 'components/Features/public/ResetPassword/actions';\nimport { passwordRequirementsGet } from 'components/AppRoot/StaticResources/actions';\n\nimport styles from './styles.module.scss';\n\n\nconst select = (state) => ({\n passwordRequirements: state.static.passwordRequirements,\n});\n\nexport class ResetPassword extends Component {\n\n static propTypes = {\n notificationShow: PropTypes.func.isRequired,\n resetPassword: PropTypes.func.isRequired,\n passwordRequirementsGet: PropTypes.func.isRequired,\n passwordRequirements: PropTypes.array.isRequired,\n location: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Login: PropTypes.shape({ nav_path: PropTypes.string }),\n ResetPassword: PropTypes.shape({\n btn_submit: PropTypes.string,\n err_confirm_password: PropTypes.string,\n err_password_criteria: PropTypes.string,\n err_password_match: PropTypes.string,\n err_password_required: PropTypes.string,\n head_title: PropTypes.string,\n msg_password_changed: PropTypes.string,\n text_confirm_password: PropTypes.string,\n text_new_password: PropTypes.string,\n })\n }).isRequired,\n };\n\n state = {\n loading: false,\n password: '',\n passwordConfirmation: '',\n formErrors: {},\n apiErrors: [],\n passwordPassesValidation: false,\n };\n\n formValidate() {\n const formErrors = {};\n const { err_confirm_password, err_password_criteria, err_password_match, err_password_required, } = this.props.text.ResetPassword;\n const { apiErrors } = this.state;\n\n if (!this.state.password) {\n formErrors.password = err_password_required;\n }\n\n if (!this.state.passwordConfirmation) {\n formErrors.passwordConfirmation = err_confirm_password;\n }\n\n if (this.state.passwordConfirmation && this.state.password !== this.state.passwordConfirmation) {\n formErrors.passwordConfirmation = err_password_match;\n }\n if (this.state.password && !this.state.passwordPassesValidation) {\n formErrors.password = err_password_criteria;\n }\n\n if (apiErrors.length > 0) {\n // this is assuming that api Field properties would not change!\n apiErrors.forEach(error => {\n if (error.Field === 'password1') {\n formErrors.password = error.Message;\n }\n else if (error.Field === 'password2') {\n formErrors.passwordConfirmation = error.Message;\n }\n });\n }\n\n this.setState({\n formErrors,\n apiErrors: []\n });\n\n return Object.keys(formErrors).length === 0;\n }\n\n onFormSubmit = (e) => {\n e.preventDefault();\n if (this.formValidate()) {\n document.getElementById('password').blur();\n document.getElementById('passwordConfirm').blur();\n\n const postData = {\n id: qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).request,\n password1: this.state.password,\n password2: this.state.passwordConfirmation,\n };\n\n this.setState({ loading: true });\n this.props.resetPassword(postData)\n .then(() => {\n this.props.history.push(this.props.text.Login.nav_path);\n this.props.notificationShow(this.props.text.ResetPassword.msg_password_changed, 'success');\n })\n .catch(response => this.setState({\n apiErrors: response.payload.data,\n loading: false\n }, () => this.formValidate()));\n }\n };\n\n onInputChange = (inputName, value) => {\n this.setState({\n [inputName]: value,\n formErrors: {\n ...this.state.formErrors,\n [inputName]: '',\n }\n });\n };\n\n componentDidMount() {\n if (this.props.passwordRequirements.length === 0) {\n this.setState({ loading: true });\n if (this.props.passwordRequirements.length === 0) {\n this.props.passwordRequirementsGet()\n .finally(() => this.setState({ loading: false }));\n }\n }\n }\n\n render() {\n const { btn_submit, head_title, text_confirm_password, text_new_password, } = this.props.text.ResetPassword;\n\n return (\n {ResendEmail.head_confirm_email}
\n{ResendEmail.text_check_inbox}
\n\n \n {ResendEmail.btn_resend_email}\n \n
\n {ResendEmail.text_support_phone(supportNumber)}
\n\n this.setState({ passwordPassesValidation: isValid })}\n />\n
\n \n this.props.history.push(this.props.text.Login.nav_path)}\n disabled={this.state.loading}\n >\n Cancel\n \n \n {btn_submit}\n \n
\n \n \n \n
\n );\n\n }\n}\n\n\nexport default withRouter(connect(null, {\n allNotificationsHide,\n notificationShow,\n validateEmail,\n})(LanguageHOC(ValidateEmail)));\n","/*\n*\n* ValidateEmail Actions\n*\n*/\nimport { VALIDATE_EMAIL } from './constants';\nimport { POSTrequest } from 'utils/helpers/api_handler';\n\nexport function validateEmail(guid) {\n const response = POSTrequest('/authentication/ValidateEmail', { id: guid });\n\n return {\n type: VALIDATE_EMAIL,\n payload: response\n };\n}","/*\n*\n* ValidateEmail Constants\n*\n*/\nexport const VALIDATE_EMAIL = 'src/components/Features/public/ValidateEmail/VALIDATE_EMAIL';","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { cloneDeep } from 'lodash';\nimport parse from 'html-react-parser';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n TextField,\n} from '@mui/material';\n\nimport {\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\nimport FormWrapper from '../FormWrapper';\n\nimport { emailValidator } from 'utils/helpers/form_validation';\n\nimport { GETRecaptchaToken } from 'utils/helpers/api_handler';\nimport { verifyRecaptcha } from 'components/AppRoot/Navigation/actions';\nimport { sendUsername } from 'components/Features/public/ForgotUsername/actions';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n recaptchaToken: state.session.userDetails.recaptchaToken,\n recaptchaVerified: state.session.userDetails.recaptchaVerified,\n supportNumber: state.static.environmentVars.SupportPhoneNumber\n});\n\nexport class ForgotUsername extends Component {\n\n static propTypes = {\n notificationShow: PropTypes.func.isRequired,\n sendUsername: PropTypes.func.isRequired,\n verifyRecaptcha: PropTypes.func.isRequired,\n recaptchaToken: PropTypes.string.isRequired,\n recaptchaVerified: PropTypes.bool.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n ForgotUsername: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_ok: PropTypes.string,\n btn_submit: PropTypes.string,\n err_email_required: PropTypes.string,\n err_valid_email: PropTypes.string,\n lbl_beneficiary: PropTypes.string, \n lbl_code: PropTypes.string,\n lbl_email: PropTypes.string,\n msg_general: PropTypes.func,\n msg_recaptcha_language: PropTypes.string,\n msg_request_submitted: PropTypes.string,\n nav_title: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n loading: false,\n canContinue: false,\n isMsgSubmitted: false,\n email: '',\n formErrors: {}\n };\n\n handleInput = name => e => {\n const val = e.target.value;\n if (val) {\n const helperText = this.props.text.ForgotUsername.lbl_email;\n this.setState({ \n [name]: val,\n helperText,\n formErrors: {} \n });\n }\n else {\n this.setState({ [name]: val });\n }\n }\n\n sendEmail = e => {\n e.preventDefault();\n const { email } = this.state;\n const emailError = emailValidator(email);\n if (emailError) {\n const formErrors = cloneDeep(this.state.formErrors);\n formErrors.email = emailError;\n this.setState({ formErrors });\n }\n else {\n this.setState({ loading: true });\n this.props.sendUsername({ EmailAddress: email })\n .then(() => {\n this.setState({ loading: false });\n this.props.notificationShow(this.props.text.ForgotUsername.msg_request_submitted, 'success');\n });\n }\n }\n\n recaptchaVerify = () => {\n GETRecaptchaToken('forgotusername')\n .then(token => {\n if (token !== this.props.recaptchaToken) {\n this.props.verifyRecaptcha(token)\n .then((response) => {\n if (!this.props.recaptchaVerified) {\n const warningMessage = response.payload.data['error-codes'][0];\n this.setState({ canContinue: true });\n this.props.notificationShow(warningMessage, 'warning');\n }\n });\n }\n });\n }\n\n componentDidMount() {\n this.recaptchaVerify();\n }\n\n render() {\n const { text: { ForgotUsername } } = this.props;\n const { loading, canContinue, formErrors, email } = this.state;\n const helperText = formErrors.email ? formErrors.email : '';\n return (\n \n
\n Validating email...
,\n{ForgotUsername.msg_general(this.props.supportNumber)}
\n \n \n {/* This reCAPTCHA text is required since we are hiding the badge on all pages */}\n
\n {parse(ForgotUsername.msg_recaptcha_language)}
\n\n ({ display: ageBand.AgeBandName, value: index }))}\n value={selectedAgeBand}\n />\n
}\n\n {fund_allocations_and_fees.select_age_band_title}
\n \n
{title1}
\n \n\n {applicationInfo.lpoaFirmName !== '' && applicationInfo.ageBands[selectedAgeBand].FundInformation.map((fund, index) => {\n return (\n
\n {title2}\n \n
\n \n\n
\n
\n\n \n
\n\n \n
\n {title}
\n {subtitle ? {subtitle}
: }\n
{title}
\n {subtitle ? {subtitle}
: }\n
\n {renderNavigationButton(copyButtonLabel, () => copyAddress(personType, addressType), 'text')}\n
\n\n\n {title}
\n {subtitle ? {subtitle}
: }\n
\n
\n \n
\n {Lpoa.learn_more_title}
\n\n
\n \n
\n\n\n\n {/* make sure the table scrolls horizontally in mobile */}\n \n \n
\n
\n | {Lpoa.edit_level_table.column_titles[0]} | \n{Lpoa.edit_level_table.column_titles[1]} | \n{Lpoa.edit_level_table.span_column_3_4_5_6_title} | \n|||
| {Lpoa.edit_level_table.column_titles[2]} | \n{Lpoa.edit_level_table.column_titles[3]} | \n{Lpoa.edit_level_table.column_titles[4]} | \n{Lpoa.edit_level_table.column_titles[5]} | \n||
| \n {Lpoa.edit_level_table.levels[0]}\n | \n{Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n
| \n {Lpoa.edit_level_table.levels[1]}\n | \n{Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_no} | \n
| \n {Lpoa.edit_level_table.levels[2]}\n | \n{Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n\n {Lpoa.text_yes}\n | \n
{title}
\n \n\n
\n onAccountSummaryInput(value, 'poaLevel')}\n options={[\n {\n display: account_summary.poa_levels[0],\n value: 1,\n },\n {\n display: account_summary.poa_levels[1],\n value: 2,\n },\n {\n display: account_summary.poa_levels[2],\n value: 3,\n },\n ]}\n errorText={applicationInfoErrors.accountSummary.poaLevel}\n value={applicationInfo.accountSummary.poaLevel}\n />\n
\n\n \n {renderNavigationButton(btn_learn_more, () => this.setState({ showLpoaLevelLearnMore: true }), 'text')}\n
\n \n onAccountSummaryInput(!applicationInfo.accountSummary.fedTaxDocs, 'fedTaxDocs')}\n checked={applicationInfo.accountSummary.fedTaxDocs}\n />\n }\n label={account_summary.fed_tax_docs_label}\n />\n
\n\n \n
\n \n onAccountSummaryInput(!applicationInfo.accountSummary.stateTaxDocs, 'stateTaxDocs')}\n checked={applicationInfo.accountSummary.stateTaxDocs}\n />\n }\n label={account_summary.state_tax_docs_label}\n />\n
\n\n \n
\n \n \n \n \n
\n {account_edit.lpoa_review_title}
\n \n \n {choices}\n \n {errors[questionIndex] && Multifactor.err_required} \n
\n );\n }\n else {\n const choices = question.Choices.map(choice => {\n return (\n {question.Text}
\n{question.HelpText}
\n \n \n \n {choices}\n \n {errors[questionIndex] && Multifactor.err_required} \n \n
\n );\n }\n });\n\n return (\n {question.Text}
\n{question.HelpText}
\n \n \n \n {Multifactor.btn_submit_answer}\n \n \n
\n \n \n
\n );\n }\n\n}\n\nexport default LanguageHOC(RSAQuestions);","/*\n*\n* FirstTermsAndConditions Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n FormControlLabel,\n FormHelperText,\n Checkbox,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nexport class FirstTermsAndConditions extends React.Component {\n static propTypes = {\n scrollToTop: PropTypes.func.isRequired,\n renderNavigationButton: PropTypes.func.isRequired,\n onBackHandler: PropTypes.func.isRequired,\n onNextHandler: PropTypes.func.isRequired,\n showRejectModalHandler: PropTypes.func.isRequired,\n text: PropTypes.object.isRequired,\n rejectLoading: PropTypes.bool.isRequired,\n };\n\n state = {\n termsChecked: false,\n termsCheckedError: '',\n }\n\n onTermsCheckboxClicked = () => {\n this.setState({\n termsCheckedError: '',\n termsChecked: !this.state.termsChecked,\n });\n }\n\n onNextHandler = () => {\n if (this.state.termsChecked)\n this.props.onNextHandler();\n else\n this.setState({ termsCheckedError: 'Please agree to terms.' });\n }\n\n componentDidMount() {\n this.props.scrollToTop();\n }\n\n render() {\n const { termsChecked, termsCheckedError } = this.state;\n\n const {\n text: { \n LpoaAccount: {\n first_terms_and_conditions,\n btn_back,\n btn_reject,\n btn_next,\n btn_print,\n } \n },\n renderNavigationButton,\n onBackHandler,\n showRejectModalHandler,\n rejectLoading,\n } = this.props;\n\n return (\n {Multifactor.verify_identity_title}
\n{Multifactor.msg_rsa_select}
\n {this.renderRSAQandA()}\n\n {termsCheckedError} }\n
\n );\n }\n}\n\nexport default LanguageHOC(FirstTermsAndConditions);","/*\n*\n* SecondTermsAndConditions Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n FormControlLabel,\n FormHelperText,\n Checkbox,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\n\nexport class SecondTermsAndConditions extends React.Component {\n\n static propTypes = {\n scrollToTop: PropTypes.func.isRequired,\n renderNavigationButton: PropTypes.func.isRequired,\n onBackHandler: PropTypes.func.isRequired,\n onSubmitHandler: PropTypes.func.isRequired,\n showRejectModalHandler: PropTypes.func.isRequired,\n text: PropTypes.object.isRequired,\n rejectLoading: PropTypes.bool.isRequired,\n approveAccountLoading: PropTypes.bool.isRequired,\n };\n\n state = {\n termsChecked: false,\n termsCheckedError: '',\n }\n\n onTermsCheckboxClicked = () => {\n this.setState({\n termsCheckedError: '',\n termsChecked: !this.state.termsChecked,\n });\n }\n\n onSubmitHandler = () => {\n if (this.state.termsChecked)\n this.props.onSubmitHandler();\n else\n this.setState({ termsCheckedError: 'Please agree to terms.' });\n }\n\n componentDidMount() {\n this.props.scrollToTop();\n }\n\n render() {\n const { termsChecked, termsCheckedError } = this.state;\n\n const {\n text: {\n LpoaAccount:\n {\n second_terms_and_conditions,\n btn_back,\n btn_reject,\n btn_submit,\n btn_print,\n }\n },\n renderNavigationButton,\n onBackHandler,\n showRejectModalHandler,\n rejectLoading,\n approveAccountLoading,\n } = this.props;\n\n return (\n {first_terms_and_conditions.title}
\n\n {first_terms_and_conditions.content()}\n
\n \n {renderNavigationButton(btn_back, onBackHandler, 'text', rejectLoading)}\n {renderNavigationButton(btn_reject, showRejectModalHandler, 'text', rejectLoading, rejectLoading)}\n {renderNavigationButton(btn_print, () => window.print(), 'text', rejectLoading)}\n {renderNavigationButton(btn_next, this.onNextHandler, 'contained', rejectLoading)}\n
\n \n {termsCheckedError} }\n
\n );\n }\n\n}\n\nexport default LanguageHOC(SecondTermsAndConditions);","/*\n*\n* LpoaAccount Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n} from '@mui/material';\n\nimport {\n My529Logo,\n LoadingOverlay,\n ConfirmModal,\n notificationShow,\n allNotificationsHide,\n} from '@frontend/common';\n\nimport {\n getRSA,\n postRSA,\n rejectLpoaAccount,\n getLpoaAccount,\n approveLpoaAccount,\n} from './actions';\n\nimport {\n RSA_STATUS,\n} from './constants';\n\nimport AccountEdit from './AccountEdit';\nimport RSAQuestions from './RSAQuestions';\nimport FirstTermsAndConditions from './FirstTermsAndConditions';\nimport SecondTermsAndConditions from './SecondTermsAndConditions';\n\nimport styles from './styles.module.scss';\n\n// there is only showing one component at a time\nconst COMPONENT_NAMES = {\n ACCOUNT_EDIT: 'AccountEdit',\n RSA_QUESTIONS: 'RSAQuestions',\n RSA_FAILED: 'RSAFailed',\n FIRST_T_AND_C: 'FirstTermsAndConditions',\n SECOND_T_AND_C: 'SecondTermsAndConditions',\n ACCOUNT_CREATED: 'AccountCreated',\n};\n\nconst select = (state) => ({\n applicationInfo: state.lpoaAccount.applicationInfo,\n loginAlreadyExists: state.lpoaAccount.loginAlreadyExists,\n newAccountNumber: state.lpoaAccount.newAccountNumber,\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n});\n\nexport class LpoaAccount extends React.Component {\n static propTypes = {\n getRSA: PropTypes.func.isRequired,\n postRSA: PropTypes.func.isRequired,\n applicationInfo: PropTypes.object.isRequired,\n rejectLpoaAccount: PropTypes.func.isRequired,\n getLpoaAccount: PropTypes.func.isRequired,\n approveLpoaAccount: PropTypes.func.isRequired,\n loginAlreadyExists: PropTypes.bool.isRequired,\n newAccountNumber: PropTypes.number.isRequired,\n notificationShow: PropTypes.func.isRequired,\n allNotificationsHide: PropTypes.func.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n LpoaAccount: PropTypes.object.isRequired,\n }).isRequired,\n };\n\n state = {\n getRSALoading: false,\n postRSALoading: false,\n validateAccountLoading: false,\n approveAccountLoading: false,\n firstAttemptFailed: false,\n rejectLoading: false,\n showRejectModal: false,\n show: {\n [COMPONENT_NAMES.ACCOUNT_EDIT]: false,\n [COMPONENT_NAMES.RSA_QUESTIONS]: false,\n [COMPONENT_NAMES.RSA_FAILED]: false,\n [COMPONENT_NAMES.FIRST_T_AND_C]: false,\n [COMPONENT_NAMES.SECOND_T_AND_C]: false,\n [COMPONENT_NAMES.ACCOUNT_CREATED]: false,\n },\n failedRSAMessage: '',\n guid: '',\n RSA: {},\n };\n\n setStateShowHandler = (componentName) => {\n // first reset all\n const updatedShow = {\n [COMPONENT_NAMES.ACCOUNT_EDIT]: false,\n [COMPONENT_NAMES.RSA_QUESTIONS]: false,\n [COMPONENT_NAMES.RSA_FAILED]: false,\n [COMPONENT_NAMES.FIRST_T_AND_C]: false,\n [COMPONENT_NAMES.SECOND_T_AND_C]: false,\n [COMPONENT_NAMES.ACCOUNT_CREATED]: false,\n };\n // update only one\n updatedShow[componentName] = true;\n this.setState({ show: updatedShow });\n }\n\n scrollToTop = () => {\n document.body.scrollTop = 0;\n document.documentElement.scrollTop = 0;\n }\n\n handlePostRSA = (answerSet) => {\n this.setState({ postRSALoading: true });\n this.props.postRSA(this.state.guid, answerSet)\n .then((response) => {\n const RSA = response.payload.data;\n this.setState({ RSA });\n switch (RSA.Status) {\n case RSA_STATUS.RSA_NOT_PASSED_YET:\n this.setStateShowHandler(COMPONENT_NAMES.RSA_QUESTIONS);\n this.setState({ firstAttemptFailed: true }); // assuming that calling POST is the 2nd attempt\n break;\n case RSA_STATUS.RSA_FAILED:\n this.setStateShowHandler(COMPONENT_NAMES.RSA_FAILED);\n this.setState({\n firstAttemptFailed: false,\n failedRSAMessage: RSA.Message\n });\n break;\n case RSA_STATUS.RSA_PASSED:\n document.cookie = `LPOA_RSA_Passed=${RSA.Message}`;\n this.setStateShowHandler(COMPONENT_NAMES.ACCOUNT_EDIT);\n this.setState({\n firstAttemptFailed: false,\n });\n break;\n default: // this should be caught by the middleware\n }\n })\n .finally(() => {\n this.scrollToTop();\n this.setState({ postRSALoading: false });\n });\n }\n\n handleGetRSA = (guid) => {\n this.setState({ getRSALoading: true });\n this.props.getRSA(guid)\n .then((response) => {\n const RSA = response.payload.data;\n this.setState({ RSA });\n switch (RSA.Status) {\n case RSA_STATUS.RSA_NOT_PASSED_YET:\n this.setStateShowHandler(COMPONENT_NAMES.RSA_QUESTIONS);\n break;\n case RSA_STATUS.RSA_FAILED:\n this.setStateShowHandler(COMPONENT_NAMES.RSA_FAILED);\n this.setState({ failedRSAMessage: RSA.Message });\n break;\n case RSA_STATUS.RSA_PASSED:\n this.setStateShowHandler(COMPONENT_NAMES.ACCOUNT_EDIT);\n break;\n default: // this should be caught by the middleware\n }\n })\n .finally(() => {\n this.setState({ getRSALoading: false });\n });\n }\n\n onPOARejectHandler = (e) => {\n e.preventDefault();\n const { guid } = this.state;\n const { text: { LpoaAccount }, notificationShow } = this.props;\n\n this.setState({ rejectLoading: true });\n this.props.rejectLpoaAccount(guid)\n .then(() => {\n return this.props.getLpoaAccount(guid)\n .then(() => {\n notificationShow(LpoaAccount.success_lpoa_account_rejected, 'success');\n this.setState({\n applicationInfo: this.props.applicationInfo,\n });\n });\n })\n .finally(() => {\n this.scrollToTop();\n this.setStateShowHandler('');\n this.setState({\n showRejectModal: false,\n rejectLoading: false,\n });\n });\n }\n\n showRejectModalHandler = () => {\n this.setState({\n showRejectModal: true,\n });\n }\n\n onRejectModalClose = () => {\n this.setState({\n showRejectModal: false,\n });\n }\n\n onNextHandlerAccountEdit = () => {\n this.setStateShowHandler(COMPONENT_NAMES.FIRST_T_AND_C);\n }\n\n onNextHandlerFirstTermsAndConditions = () => {\n this.setStateShowHandler(COMPONENT_NAMES.SECOND_T_AND_C);\n }\n\n onBackHandlerFirstTermsAndConditions = () => {\n this.setStateShowHandler(COMPONENT_NAMES.ACCOUNT_EDIT);\n }\n\n onBackHandlerSecondTermsAndConditions = () => {\n this.setStateShowHandler(COMPONENT_NAMES.FIRST_T_AND_C);\n }\n\n onSubmitHandler = () => {\n const { \n approveLpoaAccount, \n notificationShow, \n text: { LpoaAccount },\n } = this.props;\n this.setState({ approveAccountLoading: true });\n approveLpoaAccount(this.props.applicationInfo, this.state.guid)\n .then(() => {\n notificationShow(LpoaAccount.success_lpoa_account_approved, 'success');\n this.setStateShowHandler(COMPONENT_NAMES.ACCOUNT_CREATED);\n })\n .finally(() => {\n this.setState({ approveAccountLoading: false });\n });\n }\n\n // Methods to render components\n renderNavigationButton = (label, onClick, variant, disabled = false, loading = false, color = 'primary') => {\n return (\n {second_terms_and_conditions.title}
\n\n {second_terms_and_conditions.content()}\n
\n \n {renderNavigationButton(btn_back, onBackHandler, 'text', approveAccountLoading || rejectLoading)}\n {renderNavigationButton(btn_reject, showRejectModalHandler, 'text', approveAccountLoading || rejectLoading, rejectLoading)}\n {renderNavigationButton(btn_print, () => window.print(), 'text', approveAccountLoading || rejectLoading)}\n {renderNavigationButton(btn_submit, this.onSubmitHandler, 'contained', approveAccountLoading || rejectLoading, approveAccountLoading)}\n
\n \n \n \n {label}\n \n \n
\n );\n }\n\n renderAccountCreated = () => {\n const { \n newAccountNumber, \n loginAlreadyExists, \n supportNumber,\n text: { \n LpoaAccount: {\n btn_setup_login,\n btn_login,\n confirmation_page,\n btn_done,\n btn_print,\n } \n } \n } = this.props;\n\n const onDoneClick = () => (window.location = 'https://my529.org/');\n const onSetupLoginClick = () => this.props.history.push('/setup-user');\n const onLoginClick = () => this.props.history.push('/login');\n let confirmationSecondParagraph = confirmation_page.second_paragraph_setup(btn_setup_login, supportNumber);\n let logInOrSetUpButton = this.renderNavigationButton(btn_setup_login, onSetupLoginClick, 'text');\n if (loginAlreadyExists) { \n logInOrSetUpButton = this.renderNavigationButton(btn_login, onLoginClick, 'text');\n confirmationSecondParagraph = confirmation_page.second_paragraph_login(btn_login, supportNumber);\n }\n\n return (\n \n
\n );\n }\n\n componentDidMount() {\n this.props.allNotificationsHide();\n const guid = new URLSearchParams(window.location.search.toLowerCase()).get('key');\n this.setState({ guid });\n this.handleGetRSA(guid);\n }\n\n render() {\n const {\n show,\n failedRSAMessage,\n getRSALoading,\n postRSALoading,\n approveAccountLoading,\n firstAttemptFailed,\n RSA,\n rejectLoading,\n showRejectModal,\n } = this.state;\n\n const {\n applicationInfo,\n text: { LpoaAccount }\n } = this.props;\n\n return (\n Account Created
\n{confirmation_page.your_account_number}
\n{newAccountNumber}
\n{confirmation_page.first_paragraph}
\n{confirmationSecondParagraph}
\n\n {logInOrSetUpButton}\n {this.renderNavigationButton(btn_print, () => window.print(), 'text')}\n {this.renderNavigationButton(btn_done, onDoneClick, 'contained')}\n
\n \n {getRSALoading ?
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n getRSA,\n postRSA,\n rejectLpoaAccount,\n getLpoaAccount,\n approveLpoaAccount,\n notificationShow,\n allNotificationsHide,\n})(LanguageHOC(LpoaAccount)));\n","/*\n*\n* InterestedParties Actions\n*\n*/\nimport {\n ADD_INTERESTED_PARTY,\n CREATE_INTERESTED_PARTY,\n DELETE_INTERESTED_PARTY,\n EDIT_INTERESTED_PARTY,\n GET_INTERESTED_PARTIES,\n GET_IP_ACTIVATION_INFO,\n RESEND_INTERESTED_PARTY_EMAIL,\n} from './constants';\n\nimport {\n DELETErequest,\n GETrequest,\n POSTrequest,\n PUTrequest,\n} from 'utils/helpers/api_handler';\n\nexport function activateIpAccount(guid, ipInfo) {\n const response = POSTrequest(`/ip/activate/${guid}`, ipInfo);\n\n return {\n type: CREATE_INTERESTED_PARTY,\n payload: response,\n };\n}\n\nexport function addIp(ipInfo) {\n const response = POSTrequest('/ip', ipInfo);\n\n return {\n type: ADD_INTERESTED_PARTY,\n payload: response,\n };\n}\n\nexport function deleteIp(ipId) {\n const response = DELETErequest(`/ip/${ipId}`);\n \n return {\n type: DELETE_INTERESTED_PARTY,\n payload: response,\n meta: { ipId }\n };\n}\n\nexport function editIp(ipInfo) {\n const response = PUTrequest('/ip', ipInfo);\n\n return {\n type: EDIT_INTERESTED_PARTY,\n payload: response,\n meta: { ipId: ipInfo.interestedPartyId }\n };\n}\n\nexport function getActivationInfo(guid) {\n const payload = GETrequest(`/ip/ActivationInfo/${guid}`);\n return {\n type: GET_IP_ACTIVATION_INFO,\n payload\n };\n}\n\nexport function getInterestedParties() {\n const response = GETrequest('/ip');\n \n return {\n type: GET_INTERESTED_PARTIES,\n payload: response,\n };\n}\n\nexport function resendIpEmail(ipId) {\n const response = POSTrequest(`/ip/ResendActivation/${ipId}`);\n\n return {\n type: RESEND_INTERESTED_PARTY_EMAIL,\n payload: response,\n };\n}","/*\n*\n* CreateIpAccount Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Checkbox,\n InfoIcon,\n LoadingOverlay,\n Modal,\n notificationShow,\n PasswordInput,\n PasswordRequirements,\n} from '@frontend/common';\nimport {\n Button,\n Accordion,\n FormHelperText,\n TextField,\n} from '@mui/material';\nimport { passwordRequirementsGet } from 'components/AppRoot/StaticResources/actions';\nimport { activateIpAccount } from 'components/Features/protected/InterestedParties/actions.js';\nimport * as validator from 'utils/helpers/form_validation';\n\nimport styles from './styles.module.scss';\nimport parentStyles from '../styles.module.scss';\n\nconst select = (state) => ({\n emailAddress: state.interestedParties.activationInfo.emailAddress,\n passwordRequirements: state.static.passwordRequirements,\n});\n\n\nexport class CreateIpAccount extends React.Component {\n\n static propTypes = {\n activateIpAccount: PropTypes.func.isRequired,\n csaPin: PropTypes.string, // cannot be required because the API returns it as null\n emailAddress: PropTypes.string.isRequired,\n notificationShow: PropTypes.func.isRequired,\n passwordRequirements: PropTypes.array.isRequired,\n passwordRequirementsGet: PropTypes.func.isRequired,\n redirectToLogin: PropTypes.func.isRequired,\n showCreateAccountForm: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n InterestedPartiesActivation: PropTypes.shape({\n btn_create: PropTypes.string,\n btn_i_agree: PropTypes.string,\n btn_read_terms: PropTypes.string,\n err_password_criteria: PropTypes.string,\n err_password_match: PropTypes.string,\n err_required_field: PropTypes.string,\n err_terms_agree: PropTypes.string,\n head_create_account: PropTypes.string,\n head_terms: PropTypes.string,\n lbl_email: PropTypes.string,\n lbl_firstname: PropTypes.string,\n lbl_lastname: PropTypes.string,\n lbl_password1: PropTypes.string,\n lbl_password2: PropTypes.string,\n lbl_pin: PropTypes.string,\n lbl_username: PropTypes.string,\n msg_change_email_when_logged_in: PropTypes.string,\n msg_ip_activated: PropTypes.string,\n text_terms: PropTypes.string,\n text_toggle_password_vis: PropTypes.string,\n })\n }).isRequired,\n toggleFormVisibility: PropTypes.func.isRequired,\n };\n\n state = {\n apiErrors: [],\n formErrors: {},\n loading: false,\n newIp: {\n firstName: '',\n lastName: '',\n password1: '',\n password2: '',\n pin: '',\n userName: '',\n },\n passwordIsValid: false,\n passwordReqsVisible: false,\n termsChecked: false,\n termsModalOpen: false,\n };\n\n createIpAccount = e => {\n e.preventDefault();\n\n const formIsValid = this.validateForm();\n \n if (formIsValid) {\n this.setState({ loading: true });\n const guid = new URLSearchParams(window.location.search.toLowerCase()).get('request');\n\n this.props.activateIpAccount(guid, this.state.newIp)\n .then(() => {\n this.setState({ loading: false });\n this.props.redirectToLogin();\n this.props.notificationShow(this.props.text.InterestedPartiesActivation.msg_ip_activated, 'success');\n })\n .catch(res => {\n if (res.payload.data && res.payload.data.some(err => err.Field)) {\n this.setState({\n apiErrors: res.payload.data,\n loading: false,\n }, () => this.validateForm());\n }\n else {\n this.props.redirectToLogin();\n }\n });\n }\n }\n\n onInputChange = e => {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n [e.target.name]: '',\n },\n newIp: {\n ...this.state.newIp,\n [e.target.name]: e.target.value,\n },\n });\n }\n\n validateForm = () => {\n const { apiErrors, newIp, passwordIsValid, termsChecked, } = this.state;\n const { InterestedPartiesActivation } = this.props.text;\n const formErrors = {};\n\n formErrors.firstName = validator.firstNameValidator(newIp.firstName);\n formErrors.lastName = validator.lastNameValidator(newIp.lastName);\n formErrors.userName = validator.userNameValidator(newIp.userName);\n formErrors.pin = newIp.pin ? '' : InterestedPartiesActivation.err_required_field;\n formErrors.terms = termsChecked ? '' : InterestedPartiesActivation.err_terms_agree;\n\n // Password validation\n if (!passwordIsValid) {\n formErrors.password1 = InterestedPartiesActivation.err_password_criteria;\n }\n if (!newIp.password1) {\n formErrors.password1 = InterestedPartiesActivation.err_required_field;\n }\n if (!newIp.password2) {\n formErrors.password2 = InterestedPartiesActivation.err_required_field;\n }\n if (newIp.password1 !== newIp.password2) {\n formErrors.password2 = InterestedPartiesActivation.err_password_match;\n }\n\n if (apiErrors.length > 0) {\n apiErrors.map(err => formErrors[err.Field] = err.Message);\n }\n\n this.setState({\n apiErrors: [],\n formErrors\n });\n\n return Object.keys(formErrors).every(error => formErrors[error] === ''); // returns true if no errors\n }\n\n componentDidMount() {\n if (this.props.passwordRequirements.length === 0) {\n this.props.passwordRequirementsGet();\n }\n if (this.props.csaPin) {\n this.setState({\n newIp: {\n ...this.state.newIp,\n pin: this.props.csaPin\n }\n });\n }\n }\n\n render() {\n const { csaPin, emailAddress, passwordRequirements, showCreateAccountForm, text: { InterestedPartiesActivation } } = this.props;\n const { formErrors, loading, newIp, passwordReqsVisible, termsChecked, termsModalOpen, } = this.state;\n return (\n \n\n
\n }\n \n
\n {LpoaAccount.try_again_rsa_txt}
}\n {show[COMPONENT_NAMES.ACCOUNT_EDIT] &&\n \n {
\n }\n {show[COMPONENT_NAMES.FIRST_T_AND_C] &&\n {failedRSAMessage}
}\n {InterestedPartiesActivation.head_create_account}
\n\n\n this.setState({ passwordReqsVisible: false })}\n onChange={this.onInputChange}\n onFocus={() => this.setState({ passwordReqsVisible: true })}\n style={{ boxShadow: 'none' }}\n value={newIp.password1}\n variant='filled'\n />\n\n\n \n
\n\n \n
\n\n \n this.setState({ passwordIsValid })}\n password={newIp.password1}\n passwordRequirements={passwordRequirements}\n />\n
\n \n\n \n this.setState({ formErrors: { ...formErrors, terms: '' }, termsChecked: !termsChecked })}\n />\n {showCreateAccountForm && }\n {formErrors.terms && {formErrors.terms} }\n
\n \n \n showCreateAccountForm ? this.createIpAccount(e) : this.props.toggleFormVisibility()}\n type='submit'\n variant='contained'\n >\n {InterestedPartiesActivation.btn_create}\n \n \n
\n \n\n {showLoginOnly ? InterestedPartiesActivation.head_login : InterestedPartiesActivation.head_already_have_account}
\n\n
\n\n \n {Login.nav_forgot_password} \n {Login.nav_forgot_username} \n
\n \n showCreateAccountForm ? this.props.toggleFormVisibility() : this.ipLogin(e)}\n type='submit'\n variant='contained'\n >\n {Login.btn_login}\n \n
\n\n \n \n {loading ?\n this.setState({ learnMoreOpen: false })} open={learnMoreOpen}>\n \n
\n );\n }\n}\n\n\nexport default connect(select, {\n allNotificationsHide,\n getActivationInfo,\n})(LanguageHOC(InterestedPartiesActivation));\n","/*\n*\n* Accounts Actions\n*\n*/\nimport {\n DELETErequest,\n GETrequest,\n POSTrequest,\n PUTrequest\n} from 'utils/helpers/api_handler';\n\nimport {\n CHANGE_BENE_ADDRESS,\n CHANGE_SUCCESSOR,\n DELETE_BENE_ADDRESS,\n GET_ACCOUNTS,\n GET_ACCOUNTS_SUMMARY,\n GET_BALANCE_HISTORY,\n GET_SUCCESSORS,\n GET_TRANSACTION_DETAILS,\n GET_UPCOMING_TRANSACTIONS,\n GET_ALL_UPCOMING_TRANSACTIONS,\n GET_ALL_TRANSACTIONS,\n GET_TRANSACTIONS_EXPORT,\n GET_ALL_TRANSACTIONS_EXPORT,\n REMOVE_SUCCESSOR,\n ACCOUNT_INVESTMENT_PATH_GET,\n GET_PRR_DATES,\n GET_PRR,\n SUBMIT_PROMO_CODE,\n} from './constants';\n\n\nexport function changeBeneAddress(address, beneficiaryId) {\n const payload = PUTrequest(`/agents/bene/${beneficiaryId}/Address`, address);\n return {\n type: CHANGE_BENE_ADDRESS,\n payload,\n meta: { beneficiaryId }\n };\n}\n\nexport function changeSuccessor(accountId, successor) {\n const response = POSTrequest(`/accounts/${accountId}/Successor`, successor);\n return {\n type: CHANGE_SUCCESSOR,\n payload: response,\n };\n}\n\nexport function deleteBeneAddress(addressId, addressType, beneficiaryId) {\n const payload = DELETErequest(`/agents/bene/${beneficiaryId}/Address/${addressId}`);\n return {\n type: DELETE_BENE_ADDRESS,\n payload,\n meta: { addressType, beneficiaryId }\n };\n}\n\nexport function getAccounts() {\n const response = GETrequest('/accounts');\n return {\n type: GET_ACCOUNTS,\n payload: response\n };\n}\n\nexport function getAccountsSummary() {\n return {\n type: GET_ACCOUNTS_SUMMARY,\n };\n}\n\nexport function getBalanceHistory() {\n const response = GETrequest('/accounts/BalanceHistory');\n return {\n type: GET_BALANCE_HISTORY,\n payload: response\n };\n}\n\nexport function getSuccessors() {\n return {\n type: GET_SUCCESSORS,\n };\n}\n\nexport function getUpcomingTransactions(accountId) {\n const response = GETrequest(`/accounts/${accountId}/schedules`);\n return {\n type: GET_UPCOMING_TRANSACTIONS,\n payload: response\n };\n}\n\nexport function getAllUpcomingTransactions() {\n const response = GETrequest('/accounts/schedules');\n return {\n type: GET_ALL_UPCOMING_TRANSACTIONS,\n payload: response\n };\n}\n\nexport function getAllTransactions() {\n const response = GETrequest('/accounts/transactions');\n return {\n type: GET_ALL_TRANSACTIONS,\n payload: response\n };\n}\n\nexport function getTransactionsExport(accountId, filterDates) {\n const response = POSTrequest(`/accounts/${accountId}/transactions/download`, filterDates, { contentType: 'text/csv' });\n return {\n type: GET_TRANSACTIONS_EXPORT,\n payload: response\n };\n}\n\nexport function getAllTransactionsExport(filterDates) {\n const response = POSTrequest('/accounts/transactions/download', filterDates, { contentType: 'text/csv' });\n return {\n type: GET_ALL_TRANSACTIONS_EXPORT,\n payload: response\n };\n}\n\nexport function getTransactionDetails(accountId, transactionId) {\n const response = GETrequest(`/accounts/${accountId}/transactions/${transactionId}`);\n return {\n type: GET_TRANSACTION_DETAILS,\n payload: response\n };\n}\n\nexport function removeSuccessor(accountId, successorId) {\n const response = DELETErequest(`/accounts/${accountId}/successor/${successorId}`);\n return {\n type: REMOVE_SUCCESSOR,\n payload: response,\n };\n}\n\nexport function accountInvestmentPathGet(accountId, includeZeroAllocations = false) {\n const payload = GETrequest(`/options/account/${accountId}?includeZeroAllocations=${includeZeroAllocations}`);\n return {\n type: ACCOUNT_INVESTMENT_PATH_GET,\n payload,\n };\n}\n\nexport function getPRRDates(accountId) {\n const payload = GETrequest(`/accounts/${accountId}/PRRDates`);\n return {\n type: GET_PRR_DATES,\n payload,\n };\n}\n\nexport function getPRR(accountId, startDate, endDate) {\n const body = { startDate, endDate };\n const payload = POSTrequest(`/accounts/${accountId}/PRR`, body);\n return {\n type: GET_PRR,\n payload,\n };\n}\n\nexport function submitPromoCode(accountId, promoCode) {\n const payload = POSTrequest(`/accounts/${accountId}/${promoCode}`);\n return {\n type: SUBMIT_PROMO_CODE,\n payload,\n };\n}\n\n\n","import { TWO_FACTOR_STATUS, RSA_STATUS } from 'components/AppRoot/Navigation/constants';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\n\n// protected action\nexport const protectAction = claims => {\n \n if (claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.COMPLETED\n || claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.BYPASSED) {\n return MULTIFACTOR_TYPE.AUTH;\n }\n else {\n if (claims.TwoFactorRegistration === TWO_FACTOR_STATUS.COMPLETED) { // REGISTRATION CHECK\n if (claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.UNAVAILABLE) {\n if (claims.RSAVerification === RSA_STATUS.BYPASSED\n || claims.RSAVerification === RSA_STATUS.COMPLETED) {\n return MULTIFACTOR_TYPE.AUTH;\n }\n else {\n return MULTIFACTOR_TYPE.RSA;\n }\n }\n else {\n return MULTIFACTOR_TYPE.TWO_FACTOR;\n }\n }\n else {\n if (claims.RSAVerification === RSA_STATUS.BYPASSED\n || claims.RSAVerification === RSA_STATUS.COMPLETED) {\n return MULTIFACTOR_TYPE.AUTH;\n }\n else {\n return MULTIFACTOR_TYPE.RSA;\n }\n }\n }\n \n};\n\n// Protect Withdrawals\nexport const protectWithdrawal = (transactionType, Transactions, preferredInfo, claims) => {\n \n if (transactionType !== ''\n && (transactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL.type\n || transactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL_REQUEST.type)) {\n \n if (preferredInfo.IsRegistered\n && claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.PENDING) {\n return MULTIFACTOR_TYPE.TWO_FACTOR;\n }\n\n if (preferredInfo.IsRegistered\n && claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.COMPLETED\n && claims.RSAVerification === RSA_STATUS.PENDING) {\n return MULTIFACTOR_TYPE.RSA;\n }\n\n if (claims.RSAVerification === RSA_STATUS.COMPLETED) {\n return MULTIFACTOR_TYPE.AUTH;\n }\n else { \n if (preferredInfo.IsRegistered\n && (claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.BYPASSED\n || claims.TwoFactorAuthentication === TWO_FACTOR_STATUS.UNAVAILABLE)) {\n if (claims.RSAVerification === RSA_STATUS.BYPASSED) {\n return MULTIFACTOR_TYPE.AUTH;\n }\n else {\n return MULTIFACTOR_TYPE.RSA;\n }\n }\n else if (!preferredInfo.IsRegistered\n && claims.RSAVerification === RSA_STATUS.PENDING) {\n return MULTIFACTOR_TYPE.RSA;\n }\n else {\n return MULTIFACTOR_TYPE.AUTH;\n }\n }\n\n } \n\n};","/*\n*\n* Transactions Actions\n*\n*/\nimport {\n GETrequest,\n POSTrequest,\n PUTrequest,\n DELETErequest,\n} from 'utils/helpers/api_handler';\nimport {\n startCase\n} from 'lodash';\nimport {\n GET_GROUP_ACCOUNTS,\n ACCOUNT_TRANSACTION_PREVIEW,\n CLOSE_TRANSACTION_LOADER,\n OPEN_TRANSACTION_LOADER,\n SET_PREFLIGHT_PARAMS,\n GET_TRANSFER_ACCOUNTS,\n GET_SCHEDULED_TRANSACTION,\n TRANSACTION_DELETE,\n TRANSFER_CREATE,\n TRANSFER_UPDATE,\n GET_PRE_TRANSACTION_DETAILS,\n GET_CONTRIBUTION_DETAILS,\n CONTRIBUTION_CREATE,\n CONTRIBUTION_EDIT,\n SCHEDULE_RUN_DATES_GET,\n NEXT_RUN_DATE_GET,\n WITHDRAWAL_CREATE,\n WITHDRAWAL_UPDATE,\n SCHOOLS_GET,\n SET_WITHDRAWAL_SUBMITTED,\n BIRTHDATE_VERIFY,\n REQUEST_WITHDRAWAL,\n GET_ELECTRONICPAYMENT_SCHOOL,\n} from './constants';\n\nexport function getGroupAccounts() {\n const response = GETrequest('/accountgroups');\n return {\n type: GET_GROUP_ACCOUNTS,\n payload: response,\n };\n}\n\nexport function transactionPreview(accountId, transactionType) {\n const payload = GETrequest(`/accounts/${accountId}/preview?type=${transactionType}`);\n return {\n type: ACCOUNT_TRANSACTION_PREVIEW,\n meta: { transactionType },\n payload,\n };\n}\n\nexport function openPreflightModal() {\n return {\n type: OPEN_TRANSACTION_LOADER\n };\n}\n\nexport function closeTransactionLoader() {\n return {\n type: CLOSE_TRANSACTION_LOADER\n };\n}\n\nexport function setPreflightParams(account, transactionType) {\n return {\n type: SET_PREFLIGHT_PARAMS,\n account,\n transactionType\n };\n}\n\nexport function getTransferAccounts(accountId) {\n const payload = GETrequest(`/accounts/${accountId}/transferaccounts`);\n return {\n type: GET_TRANSFER_ACCOUNTS,\n payload\n };\n}\n\nexport function getScheduledTransaction(transaction) {\n //this is a generic get call that will get any full transaction details based on the URL attached to upcoming transaction object\n // for option change type it needs to include zero allocations\n const optionChangeParameter = transaction.TransactionType === 'Option Change' ? '?includeZeroAllocations=true' : '';\n const response = GETrequest(`${transaction.URL}${optionChangeParameter}`);\n return {\n type: GET_SCHEDULED_TRANSACTION,\n payload: response,\n meta: { type: transaction.TransactionType, AccountId: transaction.AccountId }\n };\n}\n\nexport function deleteTransaction(transaction) {\n const response = DELETErequest(transaction.URL);\n return {\n type: TRANSACTION_DELETE,\n payload: response,\n };\n}\n\nexport function createNewTransfer(payload) {\n const response = POSTrequest('/transactions/transfers', payload);\n return {\n type: TRANSFER_CREATE,\n payload: response,\n };\n}\n\nexport function updateTransfer(transfer) {\n const response = PUTrequest(`/transactions/transfers/${transfer.TransferId}`, transfer);\n return {\n type: TRANSFER_UPDATE,\n payload: response,\n };\n}\n\nexport function getPreTransactionDetails(accountId, accountGroupId) {\n const response = GETrequest(`/accountgroups/${accountGroupId}`);\n return {\n type: GET_PRE_TRANSACTION_DETAILS,\n meta: { accountId },\n payload: response,\n };\n}\n\nexport function getContributionDetails(accountId, accountList, agentBankAccounts, isEditing, MaximumBeneficiaryDeposit) {\n return {\n type: GET_CONTRIBUTION_DETAILS,\n accountId,\n accountList,\n agentBankAccounts,\n isEditing,\n MaximumBeneficiaryDeposit,\n };\n}\n\nexport function createContribution(newContribution) {\n const payload = POSTrequest('/transactions/ContributionSchedules', newContribution);\n return {\n type: CONTRIBUTION_CREATE,\n payload,\n };\n}\n\nexport function editContribution(transactionId, editedContribution) {\n const payload = PUTrequest(`/transactions/ContributionSchedules/${transactionId}`, editedContribution);\n return {\n type: CONTRIBUTION_EDIT,\n payload,\n };\n}\n\nexport function getScheduleRunDates(dates, frequency) {\n const datesPath = dates.map(date => `start=${date}`).join('&');\n const payload = GETrequest(`/Transactions/ScheduleRunDates?${datesPath}&frequency=${frequency}`);\n return {\n type: SCHEDULE_RUN_DATES_GET,\n payload,\n meta: dates,\n };\n}\n\nexport function getNextRunDate(dates, day, frequency) {\n let datePath;\n\n function formatDate(date) {\n return new Date(date).toISOString().split('T')[0]; // eslint-disable-line\n }\n\n if (dates instanceof Array) {\n const joinedDates = dates.map(date => `start=${formatDate(date)}`).join('&'); // eslint-disable-line\n datePath = `?${joinedDates}&`;\n }\n else {\n datePath = `/${formatDate(dates)}?`;\n }\n\n const response = GETrequest(`/Transactions/ScheduleRunDates${datePath}frequency=${startCase(frequency)}`);\n\n return {\n type: NEXT_RUN_DATE_GET,\n payload: response,\n meta: { day, frequency }\n };\n}\n\nexport function createNewWithdrawal(data) {\n const response = POSTrequest('/transactions/WithdrawalSchedules', data);\n return {\n type: WITHDRAWAL_CREATE,\n payload: response\n };\n}\n\nexport function updateWithdrawal(scheduleId, data) {\n const response = PUTrequest(`/transactions/WithdrawalSchedules/${scheduleId}`, data);\n return {\n type: WITHDRAWAL_UPDATE,\n payload: response\n };\n}\n\nexport function getSchools() {\n const response = GETrequest('/EducationalInstitutions');\n return {\n type: SCHOOLS_GET,\n payload: response,\n };\n}\n\nexport function getElectronicSchoolPaymentSchool(ElectronicSchoolPaymentSchoolId) {\n const response = GETrequest(`/EducationalInstitutions/ElectronicSchoolPaymentSchool/${ElectronicSchoolPaymentSchoolId}`);\n return {\n type: GET_ELECTRONICPAYMENT_SCHOOL,\n payload: response,\n };\n}\n\nexport function setWithdrawalSubmitted(withdrawalSubmitted) {\n return {\n type: SET_WITHDRAWAL_SUBMITTED,\n payload: withdrawalSubmitted,\n };\n}\n\nexport function requestWithdrawal(info) {\n const response = POSTrequest('/transactions/WithdrawalSchedules/CreateWithdrawalRequest', info);\n return {\n type: REQUEST_WITHDRAWAL,\n payload: response\n };\n}\n\nexport function verifyBirthdate(info) {\n const response = POSTrequest('/Authentication/BirthdayVerification', info);\n return {\n type: BIRTHDATE_VERIFY,\n payload: response\n };\n}","/*\n*\n* BeneContactForm Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { isEqual } from 'lodash';\nimport { GETaddress } from 'utils/helpers/api_handler';\nimport * as validator from 'utils/helpers/form_validation';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n AddressTextFields,\n CardBody,\n CardButtons,\n CardTitle,\n InfoIcon,\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\nimport {\n Button,\n Tab,\n Tabs,\n} from '@mui/material';\nimport {\n changeBeneAddress,\n deleteBeneAddress\n} from '../../../actions';\nimport styles from './styles.module.scss';\n\nconst select = state => ({\n ADDRESS_TYPES: state.static.environmentVars.AddressTypes,\n language: state.static.language,\n usStates: state.static.usStates\n});\n\nexport class BeneContactForm extends React.Component {\n\n static propTypes = {\n accountsGet: PropTypes.func.isRequired,\n addresses: PropTypes.shape({\n Mailing: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n }),\n Physical: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n }),\n Other: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n })\n }).isRequired,\n ADDRESS_TYPES: PropTypes.shape({\n Physical: PropTypes.string,\n Mailing: PropTypes.string,\n Other: PropTypes.string\n }).isRequired,\n addressType: PropTypes.string,\n beneficiaryId: PropTypes.number.isRequired,\n changeBeneAddress: PropTypes.func.isRequired,\n deleteBeneAddress: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n permissions: PropTypes.shape({\n EditAccount: PropTypes.bool\n }).isRequired,\n text: PropTypes.shape({\n BeneContactForm: PropTypes.shape({\n btn_change: PropTypes.string,\n btn_delete: PropTypes.string,\n err_field_required: PropTypes.string,\n err_postal_code: PropTypes.string,\n err_smarty_streets: PropTypes.string,\n err_street1_max_length: PropTypes.string,\n head_title: PropTypes.string,\n head_title_beneficiary_contact: PropTypes.string,\n msg_address_changed: PropTypes.string,\n msg_address_deleted: PropTypes.string,\n msg_unsaved_changes: PropTypes.string,\n text_intl_address: PropTypes.string,\n }),\n AddressCard: PropTypes.object,\n Login: PropTypes.shape({ nav_path: PropTypes.string }),\n }).isRequired,\n usStates: PropTypes.array.isRequired,\n callbackOnAddressChange: PropTypes.func,\n };\n\n static defaultProps = {\n callbackOnAddressChange: null,\n addressType: null,\n };\n\n state = {\n addressSuggestions: [],\n addressType: this.props.addressType || this.props.ADDRESS_TYPES.Mailing,\n apiErrors: {\n Mailing: [],\n Physical: [],\n Other: [],\n },\n autocompleteText: {\n Mailing: this.props.addresses.Mailing.StreetAddress1,\n Physical: this.props.addresses.Physical.StreetAddress1,\n Other: this.props.addresses.Other.StreetAddress1,\n },\n errors: {\n Mailing: [],\n Physical: [],\n Other: [],\n },\n isDeleting: false,\n isSaving: false,\n Mailing: this.props.addresses.Mailing,\n Other: this.props.addresses.Other,\n Physical: this.props.addresses.Physical,\n };\n\n addressDelete = (e) => {\n e.preventDefault();\n const { addressType } = this.state;\n\n this.setState({ isDeleting: true });\n\n this.props.deleteBeneAddress(this.state[addressType].AddressId, addressType, this.props.beneficiaryId)\n .then(() => {\n // on success call callback if passed\n if (this.props.callbackOnAddressChange)\n this.props.callbackOnAddressChange();\n\n this.setState({ isDeleting: false, });\n this.props.notificationShow(this.props.text.BeneContactForm.msg_address_deleted, 'success');\n\n this.props.accountsGet();\n })\n .catch(() => this.setState({ isDeleting: false }));\n }\n\n addressTabChange = (e, value) => {\n this.setState({ addressType: value });\n };\n\n addressChange = (e) => {\n e.preventDefault();\n const { addressType } = this.state;\n const addressIsValid = this.addressValidate();\n this.uppercaseAddress();\n\n if (addressIsValid) {\n this.setState({ isSaving: true });\n this.props.changeBeneAddress({ ...this.state[addressType], Type: addressType }, this.props.beneficiaryId)\n .then(() => {\n // on success call callback if passed\n if (this.props.callbackOnAddressChange)\n this.props.callbackOnAddressChange();\n this.setState({ isSaving: false, });\n this.props.notificationShow(this.props.text.BeneContactForm.msg_address_changed, 'success');\n\n this.props.accountsGet();\n })\n .catch(response => {\n this.setState({\n apiErrors: {\n ...this.state.apiErrors,\n [addressType]: response.payload.data\n },\n isSaving: false\n }, () => this.addressValidate()); // set errors from api to state and then validate form\n });\n }\n }\n\n addressValidate = () => {\n const errors = {\n Mailing: [],\n Other: [],\n Physical: [],\n };\n const { addressType, apiErrors, Mailing } = this.state;\n const { err_field_required, err_postal_code, err_street1_max_length } = this.props.text.BeneContactForm;\n const postalCodeRegex = /(^\\d{5}$)|(^\\d{5}-\\d{4}$)|(^\\d{9}$)|(^\\d{5} \\d{4}$)/;\n\n if (addressType === this.props.ADDRESS_TYPES.Mailing) {\n if (!Mailing.StreetAddress1) {\n errors.Mailing.push({\n input: 'StreetAddress1',\n message: err_field_required,\n });\n }\n if (!Mailing.State) {\n errors.Mailing.push({\n input: 'State',\n message: err_field_required,\n });\n }\n if (!Mailing.PostalCode.match(postalCodeRegex)) {\n errors.Mailing.push({\n input: 'PostalCode',\n message: err_postal_code,\n });\n }\n if (Mailing.StreetAddress1.length > 40) {\n errors.Mailing.push({\n input: 'StreetAddress1',\n message: err_street1_max_length\n });\n }\n if (Mailing.StreetAddress2.length > 40) {\n errors.Mailing.push({\n input: 'StreetAddress2',\n message: err_street1_max_length\n });\n }\n }\n const cityError = validator.cityValidator(this.state[addressType].City);\n if (cityError) {\n errors[addressType].push({\n input: 'City',\n message: cityError,\n });\n }\n if (apiErrors[addressType].length > 0) {\n apiErrors[addressType].forEach(error => {\n errors[addressType].push({\n input: error.Field,\n message: error.Message\n });\n });\n }\n\n this.setState({\n errors: {\n Mailing: errors.Mailing,\n Physical: errors.Physical,\n Other: errors.Other,\n }\n });\n\n return errors[addressType].length === 0;\n }\n\n autocompleteSuggestionsGet = event => {\n const { addressType } = this.state;\n\n this.setState({\n apiErrors: {\n ...this.state.apiErrors,\n [addressType]: []\n },\n autocompleteText: {\n ...this.state.autocompleteText,\n [addressType]: event.target.value\n },\n [addressType]: {\n ...this.state[addressType],\n StreetAddress1: event.target.value\n }\n }, () => this.addressValidate());\n\n // returning promises so it can be used in testing instead of setTimeout\n if (event.target.value.trim()) { // Only make a request if there is text. Trims out leading spaces to avoid a Smarty Streets freakout\n return GETaddress(event.target.value)\n .then(res => {\n if (res.data.suggestions !== null) {\n this.setState({\n addressSuggestions: res.data.suggestions\n });\n }\n })\n .catch(res => {\n if (res !== 'short-criteria') {\n this.props.notificationShow(this.props.text.AddressCard.err_smarty_streets, 'error');\n }\n this.setState({ addressSuggestions: [] });\n });\n }\n\n return;\n }\n\n buttonsCompose = () => {\n const { addressType, isDeleting, isSaving } = this.state;\n const isReadOnlyAddress = !this.props.permissions.EditAccount || (this.state[addressType].Country !== 'US' && this.state[addressType].Country !== '');\n\n if (!isReadOnlyAddress) {\n return [\n addressType !== this.props.ADDRESS_TYPES.Mailing &&\n \n
\n :\n \n
\n }\n\n \n
\n\n \n
\n \n this.setState({ learnMoreOpen: true })}\n >\n {InterestedPartiesActivation.btn_learn_more}\n \n
\n \n this.setState({ learnMoreOpen: false })}\n />\n
\n {InterestedPartiesActivation.btn_learn_more}
\n{InterestedPartiesActivation.text_learn_more()[0]}
\n {!showLoginOnly &&{InterestedPartiesActivation.text_learn_more()[1]}
} {/* do not show user line about creating account since they can only log in */}\n{InterestedPartiesActivation.text_learn_more()[2]}
\n\n \n {loading ?
\n\n );\n }\n\n}\n\nexport default withRouter(connect(select, {\n getAccounts,\n getPreTransactionDetails,\n})(UpdateBeneAddressModal));","/*\n*\n* BeneContact Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { isEqual, } from 'lodash';\nimport {\n Tab,\n Tabs,\n Button,\n Icon,\n} from '@mui/material';\nimport { InfoIcon, LoadingOverlay, IconBtnTooltip } from '@frontend/common';\n\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\nimport { protectAction } from 'utils/helpers/multifactor_handler';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\n\nimport parentStyles from '../styles.module.scss';\nimport styles from './styles.module.scss';\n\nimport UpdateBeneAddressModal from './UpdateBeneAddressModal';\n\nconst select = state => ({\n ADDRESS_TYPES: state.static.environmentVars.AddressTypes,\n claims: state.session.claims,\n});\n\nexport class BeneContact extends React.Component {\n\n static propTypes = {\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n claims: PropTypes.object.isRequired,\n setLastClicked: PropTypes.func.isRequired,\n isLastClicked: PropTypes.bool.isRequired,\n addresses: PropTypes.shape({\n Mailing: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n }),\n Physical: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n }),\n Other: PropTypes.shape({\n City: PropTypes.string,\n Country: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n })\n }).isRequired,\n ADDRESS_TYPES: PropTypes.shape({\n Physical: PropTypes.string,\n Mailing: PropTypes.string,\n Other: PropTypes.string\n }).isRequired,\n canEditAddress: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n BeneContact: PropTypes.shape({\n btn_add_address: PropTypes.string,\n title_update_bene_address: PropTypes.string,\n text_no_address: PropTypes.func,\n }),\n BeneContactForm: PropTypes.shape({\n text_intl_address: PropTypes.string,\n }),\n Login: PropTypes.shape({ nav_path: PropTypes.string }),\n }).isRequired,\n };\n\n state = {\n addressType: this.props.ADDRESS_TYPES.Mailing,\n Mailing: this.props.addresses.Mailing,\n Physical: this.props.addresses.Physical,\n Other: this.props.addresses.Other,\n showChangeAddressModal: false,\n isLoading: false,\n\n // For 2FA/RSA checks\n hasPrecondition: false,\n };\n\n\n addressTabChange = (e, value) => {\n this.setState({ addressType: value });\n };\n\n\n composeAddress = () => {\n const { canEditAddress, text: { BeneContact, BeneContactForm } } = this.props;\n const { StreetAddress1, StreetAddress2, StreetAddress3, City, State, PostalCode, Country, } = this.state[this.state.addressType];\n const isInternationalAddress = (Country !== 'US' && Country !== '');\n const isReadOnlyAddress = !canEditAddress || isInternationalAddress;\n const missingAddressCompose = !isReadOnlyAddress ? (\n {BeneContact.text_no_address(this.state.addressType)}
);\n \n \n\n return (\n this.state[this.state.addressType].AddressId ? (\n \n
\n \n {!isInternationalAddress ? (\n
\n\n {!isReadOnlyAddress &&\n \n {`${StreetAddress1}${StreetAddress2 ? ` ${StreetAddress2}` : ''}, `}\n {`${City}, ${State} ${PostalCode} `}\n
\n ) : (\n \n {StreetAddress1 &&
\n )\n }\n {canEditAddress && {`${StreetAddress1} `}
}\n {StreetAddress2 && {`${StreetAddress2} `}
}\n {StreetAddress3 && {`${StreetAddress3}, `}
}\n {City && {`${City}, `}
}\n {State && {`${State} `}
}\n {PostalCode && {`${PostalCode} `}
}\n {Country && {`${Country} `}
}\n \n this.handleShowChangeAddressModal()}\n title={BeneContact.title_update_bene_address}\n />\n
}\n \n {missingAddressCompose}\n
\n )\n\n );\n };\n\n handleShowChangeAddressModal = () => {\n const multiStatus = protectAction(this.props.claims);\n this.props.setLastClicked();\n this.setState({ isLoading: true });\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState({ hasPrecondition: true });\n this.props.get2FAPrecondition().catch(() => this.setState({ isLoading: false }));\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA) {\n this.setState({ hasPrecondition: true });\n this.props.getRSAPrecondition().catch(() => this.setState({ isLoading: false }));\n }\n else {\n this.setState({ showChangeAddressModal: true, isLoading: false, hasPrecondition: false, });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (!isEqual(prevProps.addresses, this.props.addresses)) {\n const { Mailing, Physical, Other } = this.props.addresses;\n this.setState({ Mailing, Physical, Other });\n }\n\n // handle 2FA auth\n const multiStatus = protectAction(this.props.claims);\n if (this.state.hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH && this.props.isLastClicked) {\n this.handleShowChangeAddressModal();\n }\n }\n\n render() {\n const { addressType, showChangeAddressModal } = this.state;\n const { ADDRESS_TYPES, text: { BeneContact } } = this.props;\n\n return (\n \n this.setState({ showChangeAddressModal: false })}\n modalTitle={BeneContact.title_update_bene_address}\n addressType={addressType}\n />\n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n get2FAPrecondition,\n getRSAPrecondition,\n})(LanguageHOC(BeneContact)));\n","/*\n*\n* AllocationChart Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport * as d3 from 'd3';\nimport * as material_ui_theme from 'utils/config/material_ui_theme';\nimport { lighten } from '@mui/material/styles';\n\nimport { Tooltip } from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nconst agentActiveFill = material_ui_theme.default.palette.secondary.main;\nconst agentFill = lighten(material_ui_theme.default.palette.secondary.main, 0.65);\nconst interestedPartyActiveFill = material_ui_theme.default.palette.primary.main;\nconst interestedPartyFill = lighten(material_ui_theme.default.palette.primary.main, 0.65);\nconst innerRadius = 60;\nconst outerRadius = 100;\nconst activeOuterRadius = 110;\nconst connectorInnerRadius = activeOuterRadius + 25;\nconst connectorOuterRadius = connectorInnerRadius + 5;\n\nexport class AllocationChart extends React.Component {\n\n static propTypes = {\n allocations: PropTypes.array.isRequired,\n isInterestedParty: PropTypes.bool.isRequired,\n activeIndex: PropTypes.number.isRequired,\n pieSelection: PropTypes.func.isRequired,\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const { allocations, activeIndex, isInterestedParty } = nextProps;\n if (!allocations) return {};\n\n const prevActiveIndex = prevState.slices.findIndex(slice => slice.isActive);\n const activeFill = isInterestedParty ? interestedPartyActiveFill : agentActiveFill;\n const fill = isInterestedParty ? interestedPartyFill : agentFill;\n\n const pie = d3.pie()\n .value(data => data.ActualPercentageNum);\n\n const arcs = pie(allocations);\n\n const connectorArcGenerator = d3.arc();\n \n const slices = arcs.map((arc, i) => {\n const isActive = activeIndex === i;\n const isPreviousActive = prevActiveIndex === i;\n const connectorStartAngle = (arc.startAngle + arc.endAngle) / 2;\n\n const arcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)\n .padAngle(arc.value > 0.05 ? 0.02 : 0.005);\n\n const activeArcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(activeOuterRadius)\n .padAngle(arc.value > 0.05 ? 0.02 : 0.005);\n \n const pieConnectorPath = connectorArcGenerator({\n innerRadius: activeOuterRadius,\n outerRadius: connectorInnerRadius + 5,\n startAngle: connectorStartAngle - .02,\n endAngle: connectorStartAngle + .02,\n });\n const connectorPath = connectorArcGenerator({\n innerRadius: connectorInnerRadius,\n outerRadius: connectorOuterRadius,\n startAngle: connectorStartAngle,\n endAngle: Math.PI,\n });\n const dataConnectorPath = connectorArcGenerator({\n innerRadius: connectorInnerRadius,\n outerRadius: connectorOuterRadius + 30,\n startAngle: Math.PI - .02,\n endAngle: Math.PI + .02,\n });\n\n const arcCentroid = arcGenerator.centroid(arc);\n\n\n return {\n ...arc,\n isActive,\n isPreviousActive,\n startAngle: arc.startAngle, // used for main donut section\n slicePath: isActive ? activeArcGenerator(arc) : arcGenerator(arc), // used for main donut sections\n fill: isActive ? activeFill : fill, // will be shaded lighter, if active selection\n activeFill, // activeFill will always be used for connectorPaths from selected slice to data\n textTransform: `translate(${arcCentroid})`, // finds the center point of each pie slice to put the text in\n pieConnectorPath, // connects outerPath to connectorPath\n connectorPath, // a curved path for only the active selection that points down to the data\n dataConnectorPath, // connects connectorPath down to data below chart\n };\n });\n\n\n if (prevActiveIndex !== activeIndex) {\n // new selection transitions, only run on new selection\n const sliceElements = d3.select('.slices');\n \n // main pie slice, only does a color transition\n sliceElements\n .selectAll('.slicePath')\n .data(slices)\n .attr('d', slice => slice.slicePath)\n .transition()\n .duration(1000)\n .attrTween('d', slice => {\n const activeInterpolate = d3.interpolate(outerRadius, activeOuterRadius);\n const prevActiveInterpolate = d3.interpolate(activeOuterRadius, outerRadius);\n return tween => {\n if (slice.isActive) {\n const activeArcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(activeInterpolate(tween)) // causes the outerRadius to increase to larger size on selection\n .padAngle(slice.value > 0.05 ? 0.02 : 0.005);\n return activeArcGenerator(slice);\n }\n else if (slice.isPreviousActive) {\n const prevActiveArcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(prevActiveInterpolate(tween)) // causes the outerRadius to decreases to normal size on new selection\n .padAngle(slice.value > 0.05 ? 0.02 : 0.005);\n return prevActiveArcGenerator(slice);\n }\n else {\n return slice.slicePath;\n }\n };\n })\n .attrTween('fill', slice => {\n if (slice.isActive) {\n return d3.interpolateRgb(fill, activeFill);\n }\n else if (slice.isPreviousActive) {\n return d3.interpolateRgb(activeFill, fill);\n }\n else {\n return d3.interpolateRgb(fill, fill);\n }\n });\n \n // outerpath to connector path connection new selection transition\n sliceElements\n .selectAll('.pieConnectorPath')\n .data(slices)\n .transition()\n .duration(1000)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const connectorStartAngle = (slice.startAngle + slice.endAngle) / 2;\n const interpolate = d3.interpolate(outerRadius, connectorInnerRadius + 5);\n return tween => {\n return connectorArcGenerator({\n innerRadius: outerRadius,\n outerRadius: interpolate(tween), // makes the outerRadius grow larger from donut center over the duration time.\n startAngle: connectorStartAngle - .04,\n endAngle: connectorStartAngle,\n });\n };\n }\n });\n \n // connector path from pie to data new selection transition\n sliceElements\n .selectAll('.connectorPath')\n .data(slices)\n .transition()\n .duration(1500)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const connectorStartAngle = (slice.startAngle + slice.endAngle) / 2;\n const interpolate = d3.interpolate(connectorStartAngle, Math.PI);\n return tween => {\n const endAngle = interpolate(tween);\n return connectorArcGenerator({\n innerRadius: connectorInnerRadius,\n outerRadius: connectorOuterRadius,\n startAngle: connectorStartAngle,\n endAngle,\n });\n };\n }\n });\n \n // connector path going down to data.\n sliceElements\n .selectAll('.dataConnectorPath')\n .data(slices)\n .transition()\n .duration(1500)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const interpolate = d3.interpolate(connectorInnerRadius + 30, connectorInnerRadius);\n return tween => {\n return connectorArcGenerator({\n innerRadius: interpolate(tween), // decreases the innerRadius, causing the path to go up from the data to the connectorPath near the pie chart\n outerRadius: connectorOuterRadius + 30,\n startAngle: Math.PI - .02,\n endAngle: Math.PI + .02,\n });\n };\n }\n });\n }\n\n return { slices, };\n }\n\n state = {\n slices: [], // array of svg path commands, each representing a fund category\n };\n\n componentDidMount() {\n const { isInterestedParty } = this.props;\n const { slices } = this.state;\n const activeFill = isInterestedParty ? interestedPartyActiveFill : agentActiveFill;\n const fill = isInterestedParty ? interestedPartyFill : agentFill;\n\n // main select of svg g with class of .slices.\n const sliceElements = d3.select('.slices');\n\n // selects the pie slice sections, adds transition\n sliceElements\n .selectAll('.slicePath')\n .data(slices)\n .attr('fill', fill)\n .transition()\n .duration(2000)\n .attrTween('d', slice => {\n const interpolateAngle = d3.interpolate(slice.startAngle, slice.endAngle);\n const interpolateRadius = d3.interpolate(outerRadius, activeOuterRadius);\n // chart loading transitions\n const arcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)\n .padAngle(slice.value > 0.05 ? 0.02 : 0.005);\n return tween => {\n slice.endAngle = interpolateAngle(tween); \n const transitionArcGenerator = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(interpolateRadius(tween)) // causes the outerRadius to increase to larger size on selection\n .padAngle(slice.value > 0.05 ? 0.02 : 0.005);\n return slice.isActive ? transitionArcGenerator(slice) : arcGenerator(slice);\n };\n })\n .attrTween('fill', slice => {\n if (slice.isActive) {\n return d3.interpolateRgb(fill, activeFill);\n }\n });\n\n // creates genertic arcGenerator, this allows us to add in unique arguments for all the connectorPaths going from the donut to the data table below the chart.\n const connectorArcGenerator = d3.arc();\n\n // selects the pieConnectorPath (little section from outerPath to connectorPath), adds transition\n sliceElements\n .selectAll('.pieConnectorPath')\n .data(slices)\n .transition()\n .duration(1000)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const connectorStartAngle = (slice.startAngle + slice.endAngle) / 2;\n const interpolate = d3.interpolate(outerRadius, connectorInnerRadius + 5);\n return tween => {\n return connectorArcGenerator({\n innerRadius: outerRadius,\n outerRadius: interpolate(tween), // makes the outerRadius grow larger from donut center over the duration time.\n startAngle: connectorStartAngle - .02,\n endAngle: connectorStartAngle + .02,\n });\n };\n }\n });\n\n // selects the connectorPath, adds transition\n sliceElements\n .selectAll('.connectorPath')\n .data(slices)\n .transition()\n .duration(2000)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const connectorStartAngle = (slice.startAngle + slice.endAngle) / 2;\n const interpolate = d3.interpolate(connectorStartAngle, Math.PI);\n return tween => {\n const endAngle = interpolate(tween); // makes the slice connectorPath grow longer\n return connectorArcGenerator({\n innerRadius: connectorInnerRadius,\n outerRadius: connectorOuterRadius,\n startAngle: connectorStartAngle,\n endAngle,\n });\n };\n }\n });\n\n // selects the pieConnectorPath (little section from connectorPath down to the data table), adds transition\n sliceElements\n .selectAll('.dataConnectorPath')\n .data(slices)\n .attr('d', null)\n .transition()\n .duration(2000)\n .attrTween('d', slice => {\n if (slice.isActive) {\n const interpolate = d3.interpolate(connectorInnerRadius + 30, connectorInnerRadius);\n return tween => {\n return connectorArcGenerator({\n innerRadius: interpolate(tween), // decreases the innerRadius, causing the path to go up from the data to the connectorPath near the pie chart\n outerRadius: connectorOuterRadius + 30,\n startAngle: Math.PI - .02,\n endAngle: Math.PI + .02,\n });\n };\n }\n });\n }\n\n\n render() {\n const { pieSelection, } = this.props;\n\n return (\n \n );\n }\n}\n\n\nexport default (LanguageHOC(AllocationChart));\n","/*\n*\n* TransactionButtons Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Button,\n Icon,\n Menu,\n MenuItem,\n} from '@mui/material';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\nimport { protectAction, protectWithdrawal } from 'utils/helpers/multifactor_handler';\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\nimport { openPreflightModal, setPreflightParams } from 'components/Features/protected/Accounts/Transactions/actions';\nimport { mobileWidth } from 'utils/config/_sassconfig.scss';\n\nconst select = (state) => ({\n claims: state.session.claims,\n preferredInfo: state.multifactor.preferredInfo,\n});\n\n\nexport class TransactionButtons extends React.Component {\n\n static propTypes = {\n account: PropTypes.shape({\n accountId: PropTypes.number,\n permissions: PropTypes.shape({\n Contribute: PropTypes.bool,\n OptionChange: PropTypes.bool,\n Transfer: PropTypes.bool,\n Withdraw: PropTypes.bool,\n WithdrawalRequest: PropTypes.bool,\n })\n }).isRequired,\n callToActionType: PropTypes.string,\n claims: PropTypes.shape({\n TwoFactorAuthentication: PropTypes.string,\n RSAVerification: PropTypes.string,\n }).isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n setLastClicked: PropTypes.func,\n isCallToAction: PropTypes.bool,\n openPreflightModal: PropTypes.func.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n setPreflightParams: PropTypes.func.isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number\n }).isRequired,\n text: PropTypes.shape({\n Transactions: PropTypes.shape({\n btn_transactions: PropTypes.string,\n transaction_title: PropTypes.func,\n TRANSACTION_TYPES: PropTypes.shape({\n CONTRIBUTION: PropTypes.object,\n OPTION_CHANGE: PropTypes.object,\n TRANSFER: PropTypes.object,\n WITHDRAWAL: PropTypes.object,\n WITHDRAWAL_REQUEST: PropTypes.object,\n }),\n })\n }).isRequired,\n };\n\n static defaultProps = {\n isCallToAction: false,\n };\n\n state = {\n hasPrecondition: false,\n moreMenuAnchorPoints: {},\n preflightAccount: {},\n preflightTransactionType: ''\n };\n\n callToActionRender = () => {\n const { account, callToActionType, text: { Transactions } } = this.props;\n\n switch (callToActionType) {\n case Transactions.TRANSACTION_TYPES.CONTRIBUTION.type: {\n return (\n \n \n
\n\n \n {allocation.allocationDetails.map(details => (\n
\n );\n }\n\n chartCompose = () => {\n const { account, size, } = this.props;\n const { activeIndex, isInterestedParty } = this.state;\n\n return (\n <>\n \n
\n ))}\n {details.Category}
\n \n {isCustomOption // custom should be Actual %, non-custom should be Target %\n ?
\n {isCustomOption &&\n {this.props.text.CurrentAllocation.text_actual_percentage}
\n : {this.props.text.CurrentAllocation.text_target_percentage}
\n }\n {details.ActualPercentage}
\n \n
}\n {this.props.text.CurrentAllocation.text_value}
\n {details.Value}
\n \n {accountIsClosed ? (\n
\n );\n }\n\n\n render() {\n const { accountHasFunds } = this.state;\n\n return (\n \n
\n ) : (\n {CurrentAllocation.head_account_closed}
\n \n
\n )}\n {CurrentAllocation.head_no_info}
\n {CurrentAllocation.text_make_contribution}
\n {Contribute &&\n \n {accountHasFunds ? this.chartCompose() : this.noFundsViewCompose()} \n
\n );\n }\n}\n\n\nexport default (LanguageHOC(CurrentAllocation));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { IconBtnTooltip } from '@frontend/common';\nimport {\n Drawer,\n Accordion,\n AccordionDetails,\n AccordionSummary,\n Icon,\n Typography,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nexport function LearnMoreDrawer({ open, onClose, text: { PrrCalculator } }) {\n\n return (\n \n
\n
\n {PrrCalculator.text_faq.map(qa => {\n return (\n \n
\n \n
{PrrCalculator.learn_more_title}
\n\n {PrrCalculator.text_learn_more()}\n
\n \n {PrrCalculator.subtitle}\n
\n \n\n \n
\n {account.beneficiary.name}
\n \n\n {PrrCalculator.rate_of_return_txt}\n
\n\n \n {\n pRR !== -100\n ?\n \n {prrArrowIcon} \n this.setState({ loading: false })}\n onStart={() => null}\n />\n \n :\n
\n \n {PrrCalculator.prr_not_available}\n
\n }\n \n
\n\n \n
\n\n \n \n {this.renderNavigationButton(PrrCalculator.btn_calculate, this.onCalculateHandler, 'contained', true, loading)}\n \n\n
\n\n \n {this.renderNavigationButton(PrrCalculator.btn_learnmore, () => this.setState({ learnMoreOpen: true }), 'outlined', true)}\n
\n \n
\n\n \n
\n \n
\n\n {Details.head_beneficiary}
\n {account.beneficiary.name}
\n {account.ownerEntity && account.accountTypeEnum === 'D' && (\n \n school \n
\n )}\n {account.ownerEntity.Name}
\n\n
\n\n \n {Details.head_account_number}\n
\n {account.accountNumber}
\n {Details.head_date_opened}: {account.agreementDate}
\n \n
\n\n {Details.head_total_value(lastMarketDate)}
\n {account.totalValue}
\n \n
\n {Details.head_ppr}
\n \n \n {account.ytdPRR.includes('%') && (account.ytdPRR.includes('-') ? arrow_drop_down : arrow_drop_up )}\n {account.ytdPRR.includes('%') ? account.ytdPRR.replace(/\\s/g, '') : account.ytdPRR}\n
\n \n this.setState({ prrCalculatorShow: true })}\n title={Details.title_see_PPR}\n />\n
\n \n {!showPromoInput && !showSuccessfullyApplied &&\n }\n \n {showPromoInput &&\n
\n );\n }\n\n}\n\nexport default LanguageHOC(PromoCode);","/*\n*\n* Successors Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\n\nimport {\n changeSuccessor,\n getAccounts,\n getSuccessors,\n removeSuccessor,\n} from '../../actions';\nimport { getNotifications, } from 'components/AppRoot/Navigation/actions';\n\nimport {\n ConfirmModal,\n DatePicker,\n Dropdown,\n IconBtnTooltip,\n InfoIcon,\n Modal,\n notificationShow,\n SsnInput,\n LoadingOverlay,\n} from '@frontend/common';\n\nimport {\n Button,\n Divider,\n Icon,\n TextField,\n} from '@mui/material';\n\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\n\nimport { protectAction } from 'utils/helpers/multifactor_handler';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\nimport * as validator from 'utils/helpers/form_validation';\n\nimport parentStyles from '../styles.module.scss';\nimport styles from './styles.module.scss';\n\nconst select = state => ({\n claims: state.session.claims,\n environmentVars: state.static.environmentVars,\n successors: state.accounts.successors,\n SUCCESSOR_TYPES: state.static.environmentVars.SuccessorTypes,\n});\n\nexport class Successors extends React.Component {\n static propTypes = {\n account: PropTypes.object.isRequired,\n changeSuccessor: PropTypes.func.isRequired,\n environmentVars: PropTypes.object.isRequired,\n getAccounts: PropTypes.func.isRequired,\n getSuccessors: PropTypes.func.isRequired,\n getNotifications: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n setLastClicked: PropTypes.func.isRequired,\n isLastClicked: PropTypes.bool.isRequired,\n claims: PropTypes.object.isRequired,\n removeSuccessor: PropTypes.func.isRequired,\n successors: PropTypes.array.isRequired,\n SUCCESSOR_TYPES: PropTypes.shape({\n Primary: PropTypes.string,\n Secondary: PropTypes.string,\n }).isRequired,\n text: PropTypes.shape({\n Successors: PropTypes.shape({\n btn_add_successor: PropTypes.func,\n btn_change_successor: PropTypes.func,\n btn_close: PropTypes.string,\n err_age_limits: PropTypes.func,\n err_missing_dob: PropTypes.string,\n err_required: PropTypes.string,\n head_remove_successor: PropTypes.func,\n head_title: PropTypes.string,\n head_title_primary_successor: PropTypes.string,\n head_title_secondary_successor: PropTypes.string,\n lbl_birth_date: PropTypes.string,\n lbl_first_name: PropTypes.string,\n lbl_last_name: PropTypes.string,\n lbl_middle_name: PropTypes.string,\n lbl_ssn: PropTypes.string,\n lbl_successor: PropTypes.string,\n menu_new_successor: PropTypes.string,\n msg_successor_added: PropTypes.string,\n msg_successor_changed: PropTypes.string,\n msg_successor_removed: PropTypes.string,\n text_confirm_remove_successor: PropTypes.func,\n text_none: PropTypes.string,\n text_successor_info_hide: PropTypes.string,\n text_successor_to_trust: PropTypes.string,\n })\n }).isRequired\n };\n\n blankSuccessor = {\n birthDate: '',\n firstName: '',\n middleName: '',\n lastName: '',\n ssn: '',\n successorId: 'new',\n };\n\n state = {\n isExistingSuccessor: false,\n formErrors: [],\n newSuccessor: this.blankSuccessor,\n showChangeSuccessor: false,\n showRemoveSuccessor: false,\n successorLoading: false,\n successorType: this.props.SUCCESSOR_TYPES.Primary,\n validationRan: false,\n\n // For 2FA/RSA checks\n hasPrecondition: false,\n rememberIsRemove: null,\n rememberSuccessorType: null,\n };\n\n errorGet = (key) => {\n const error = this.state.formErrors.find(error => error.key === key);\n return error ? error.message : '';\n }\n\n formValidate = () => {\n const formErrors = [];\n const { newSuccessor } = this.state;\n const {\n environmentVars: { MaximumAge, MinimumAccountOwnerAge },\n text: { Successors: { err_age_limits, err_required, err_missing_dob } }\n } = this.props;\n\n const existingSuccessor = this.props.successors.find(successor => successor.successorId === newSuccessor.successorId);\n\n Object.keys(newSuccessor).forEach(field => {\n if (!existingSuccessor && newSuccessor[field] === '' && field !== 'middleName') {\n formErrors.push({\n key: field,\n message: err_required\n });\n }\n else if (field === 'ssn' && newSuccessor.ssn.length !== 9) {\n const message = validator.socialSecurityNumValidator(newSuccessor.ssn);\n message && formErrors.push({\n key: field,\n message,\n });\n }\n else if (field === 'birthDate') {\n if (!existingSuccessor) {\n if (\n !dayjs(newSuccessor[field]).isValid() ||\n dayjs(newSuccessor[field]).isBefore(dayjs().subtract(MaximumAge, 'year')) ||\n dayjs(newSuccessor[field]).isAfter(dayjs().subtract(MinimumAccountOwnerAge, 'year'))\n ) {\n formErrors.push({\n key: field,\n message: err_age_limits(MinimumAccountOwnerAge, MaximumAge)\n });\n }\n }\n else if (!existingSuccessor.birthDate) {\n // missing DOB for existing successor\n formErrors.push({\n key: field,\n message: err_missing_dob\n });\n }\n }\n });\n\n this.setState({ formErrors });\n return formErrors.length === 0;\n }\n\n modifySuccessorModalCompose = () => {\n const { showChangeSuccessor, successorLoading, successorType: type } = this.state;\n const { account: { accountType, primarySuccessor, secondarySuccessor }, text: { Successors } } = this.props;\n const successor = type === this.props.SUCCESSOR_TYPES.Primary ? primarySuccessor : secondarySuccessor;\n\n return (\n \n this.setState({ promoCode: e.target.value, formErrors: { ...formErrors, PromoCode: '' } })}\n error={Boolean(formErrors.PromoCode)}\n helperText={formErrors.PromoCode}\n inputProps={{\n maxLength: 15,\n }}\n style={{ width: '200px' }}\n />\n \n \n \n
}\n\n {showSuccessfullyApplied &&\n \n {PromoCode.text_success} check \n
}\n {Successors.text_successor_to_trust}
}\n {this.successorFormCompose()}\n \n );\n }\n\n onInputChange = (name, event) => {\n this.setState({\n newSuccessor: {\n ...this.state.newSuccessor,\n [name]: event.target.value\n }\n }, () => this.state.validationRan && this.formValidate());\n }\n\n onModalClose = () => {\n this.setState({\n isExistingSuccessor: false,\n formErrors: [],\n newSuccessor: this.blankSuccessor,\n showChangeSuccessor: false,\n showRemoveSuccessor: false,\n validationRan: false,\n });\n }\n\n onSuccessorChange = (e) => {\n e.preventDefault();\n this.setState({ validationRan: true });\n const {\n newSuccessor: {\n birthDate,\n firstName: FirstName,\n middleName: MiddleName,\n lastName: LastName,\n ssn: SSN,\n successorId: SuccessorId,\n },\n successorType\n } = this.state;\n const BirthDate = dayjs(birthDate).format('L'); // format to just date so it is not unintentionally converted due to timezone\n\n if (this.formValidate()) {\n this.setState({ successorLoading: true });\n const existingSuccessor = this.props.successors.find(successor => successor.successorId === this.state.newSuccessor.successorId);\n\n if (existingSuccessor) {\n\n const changedSuccessor = {\n SuccessorId,\n Type: successorType === this.props.SUCCESSOR_TYPES.Primary ? 'S' : 'SS',\n };\n\n if (!existingSuccessor.birthDate) { // if the existing successor is missing a DOB, send it to be updated.\n changedSuccessor.BirthDate = BirthDate;\n }\n\n this.props.changeSuccessor(this.props.account.accountId, changedSuccessor)\n .then(() => {\n this.props.notificationShow(this.props.text.Successors.msg_successor_changed, 'success');\n this.onModalClose();\n this.props.getAccounts().then(() => {\n this.props.getSuccessors();\n this.props.getNotifications(); // refreshes app notifications\n this.setState({ successorLoading: false });\n });\n })\n .catch(() => this.setState({ successorLoading: false }));\n }\n else {\n this.props.changeSuccessor(this.props.account.accountId, {\n BirthDate,\n FirstName,\n MiddleName,\n LastName,\n SSN,\n Type: successorType === this.props.SUCCESSOR_TYPES.Primary ? 'S' : 'SS',\n })\n .then(() => {\n this.props.notificationShow(this.props.text.Successors.msg_successor_added, 'success');\n this.onModalClose();\n this.props.getAccounts().then(() => {\n this.props.getSuccessors();\n this.props.getNotifications(); // refreshes app notifications\n this.setState({ successorLoading: false });\n });\n })\n .catch(() => this.setState({ successorLoading: false }));\n }\n }\n }\n\n onSuccessorRemove = () => {\n this.setState({ successorLoading: true });\n const { accountId, primarySuccessor, secondarySuccessor } = this.props.account;\n const successorId = this.state.successorType === this.props.SUCCESSOR_TYPES.Primary ? primarySuccessor.successorId : secondarySuccessor.successorId;\n\n this.props.removeSuccessor(accountId, successorId)\n .then(() => {\n this.props.notificationShow(this.props.text.Successors.msg_successor_removed, 'success');\n this.onModalClose();\n this.props.getAccounts().then(() => {\n this.props.getSuccessors();\n this.setState({ successorLoading: false });\n });\n })\n .catch(() => this.onModalClose());\n }\n\n onSuccessorSelect = (e) => {\n const successor = this.props.successors.find(successor => successor.successorId === e);\n\n if (!successor) {\n this.setState({\n isExistingSuccessor: false,\n formErrors: [],\n newSuccessor: this.blankSuccessor\n });\n }\n else {\n this.setState({\n isExistingSuccessor: true,\n formErrors: [],\n newSuccessor: {\n ...successor,\n }\n });\n }\n }\n\n removeSuccessorModalCompose = () => {\n const { account: { primarySuccessor, secondarySuccessor }, SUCCESSOR_TYPES, text: { Successors } } = this.props;\n const { showRemoveSuccessor, successorLoading, successorType } = this.state;\n const successor = successorType === SUCCESSOR_TYPES.Primary ? primarySuccessor : secondarySuccessor;\n\n return (showRemoveSuccessor &&\n \n this.handleShowSuccessorModal(successorType, true)}\n title={`Remove ${successorType} Successor`}\n />\n
,\n \n this.handleShowSuccessorModal(successorType)}\n title={`Change ${successorType} Successor`}\n />\n
\n ];\n }\n\n addButtonCompose = successorType => {\n return (\n \n add}\n onClick={() => this.handleShowSuccessorModal(successorType)}\n >\n {this.props.text.Successors.btn_add_successor(successorType)}\n \n
\n );\n }\n\n handleShowSuccessorModal = (successorType, isRemove = false) => {\n const showProperty = isRemove ? 'showRemoveSuccessor' : 'showChangeSuccessor';\n const multiStatus = protectAction(this.props.claims);\n\n this.props.setLastClicked();\n this.setState({ successorLoading: true });\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState({ rememberIsRemove: isRemove, rememberSuccessorType: successorType, hasPrecondition: true });\n this.props.get2FAPrecondition().catch(() => this.setState({ successorLoading: false }));\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA) {\n this.setState({ rememberIsRemove: isRemove, rememberSuccessorType: successorType, hasPrecondition: true });\n this.props.getRSAPrecondition().catch(() => this.setState({ successorLoading: false }));\n }\n else {\n this.setState({\n [showProperty]: true,\n successorType,\n successorLoading: false,\n hasPrecondition: false,\n });\n }\n }\n\n componentDidMount() {\n if (this.props.successors.length === 0) {\n this.props.getSuccessors();\n }\n }\n\n componentDidUpdate() {\n const { rememberSuccessorType, rememberIsRemove, hasPrecondition, } = this.state;\n const multiStatus = protectAction(this.props.claims);\n if (hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH && this.props.isLastClicked) {\n this.handleShowSuccessorModal(rememberSuccessorType, rememberIsRemove);\n }\n }\n\n render() {\n const { account: { permissions, primarySuccessor, secondarySuccessor }, SUCCESSOR_TYPES, text: { Successors } } = this.props;\n // if successor exists AND they have permissions, use the name, if not use 'None'\n const primarySuccessorName = primarySuccessor ? `${primarySuccessor.firstName} ${primarySuccessor.middleName} ${primarySuccessor.lastName}` : Successors.text_none;\n const secondarySuccessorName = secondarySuccessor ? `${secondarySuccessor.firstName} ${secondarySuccessor.middleName} ${secondarySuccessor.lastName}` : Successors.text_none;\n\n return (\n \n \n {(primarySuccessor || !permissions.ChangeSuccessor) ? ( // shows successor name display if successor exists or they do not have edit permissions\n \n
\n\n {this.modifySuccessorModalCompose()}\n {this.removeSuccessorModalCompose()}\n \n
\n ) : (\n this.addButtonCompose(SUCCESSOR_TYPES.Primary)\n )}\n {Successors.head_title_primary_successor}
\n {primarySuccessorName}
\n {permissions.ChangeSuccessor && {this.tooltipsComposeModifySuccessor(SUCCESSOR_TYPES.Primary)}
}\n \n
\n ) : (\n this.addButtonCompose(SUCCESSOR_TYPES.Secondary)\n )}\n {Successors.head_title_secondary_successor}
\n {secondarySuccessorName}
\n {permissions.ChangeSuccessor && {this.tooltipsComposeModifySuccessor(SUCCESSOR_TYPES.Secondary)}
}\n \n
\n );\n }\n}\n\nexport default connect(select, {}, null)(LanguageHOC(ViewOptionChange));\n","/*\n*\n* TransactionDetails Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Drawer,\n} from '@mui/material';\nimport {\n CardTitle,\n IconBtnTooltip,\n} from '@frontend/common';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport styles from './styles.module.scss';\nimport ViewOptionChange from 'components/Features/protected/Accounts/Transactions/OptionChanges/ViewOptionChange';\n\nexport class ViewPendingOptionChange extends React.Component {\n\n static propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n pendingOptionChange: PropTypes.object.isRequired,\n text: PropTypes.shape({\n UpcomingTransactions: PropTypes.shape({\n drawer_title_view_pending_option: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n loading: PropTypes.bool.isRequired,\n };\n\n\n render() {\n const {\n open,\n onClose,\n pendingOptionChange,\n text,\n loading,\n } = this.props;\n \n return (\n \n {accountId && breadcrumbs}\n
\n \n {accountId // if accountId, InvestmentPath is being displayed, otherwise it is a pending option change\n ? (\n
\n \n {optionChangeName}\n
\n ) : ( \n <>\n \n Current Option: \n {pendingOptionChange.CurrentOption}\n
\n \n New Option: \n {optionChangeName}\n
\n )}\n {pendingOptionChange.Schema &&\n \n
\n \n
\n \n \n {text.UpcomingTransactions.drawer_title_view_pending_option}\n \n
\n \n
\n \n
\n\n \n \n );\n }\n}\n\nexport default LanguageHOC(ViewPendingOptionChange);","/*\n*\n* UpcomingTransactions Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport {\n withRouter\n} from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n getAccounts,\n getUpcomingTransactions,\n} from '../actions';\nimport {\n deleteTransaction,\n getScheduledTransaction,\n} from '../Transactions/actions';\nimport {\n getOptionChangeById\n} from '../Transactions/OptionChanges/actions';\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\nimport { getPreferredMethod } from 'components/Features/protected/Multifactor/actions';\nimport { protectAction, protectWithdrawal } from 'utils/helpers/multifactor_handler';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\nimport {\n CardAligned,\n CardBody,\n CardTitle,\n notificationShow,\n ConfirmModal,\n LoadingOverlay,\n\n SmartTable,\n TableContainer,\n TableHeader,\n TablePagination,\n TableRows,\n} from '@frontend/common';\n\nimport accountDetailsStyles from '../AccountDetails/styles.module.scss';\nimport styles from './styles.module.scss';\nimport ViewPendingOptionChange from './ViewPendingOptionChange';\n\nexport const transactionTypes = { // used for API routing below\n transfers: 'transfers',\n optionChanges: 'option-changes',\n withdrawals: 'withdrawals',\n contributions: 'contributions'\n};\n\nconst select = (state) => ({\n upcomingTransactions: state.accounts.upcomingTransactions.map((transaction, index) => ({ ...transaction, id: index })),\n selectedTransaction: state.transactions.selectedTransaction,\n optionChangeById: state.optionChanges.optionChangeById,\n claims: state.session.claims,\n preferredInfo: state.multifactor.preferredInfo,\n});\n\nexport class UpcomingTransactions extends React.Component {\n\n static propTypes = {\n account: PropTypes.object.isRequired,\n getAccounts: PropTypes.func.isRequired,\n getUpcomingTransactions: PropTypes.func.isRequired,\n getScheduledTransaction: PropTypes.func.isRequired,\n getOptionChangeById: PropTypes.func.isRequired,\n deleteTransaction: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n claims: PropTypes.object.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n text: PropTypes.shape({\n UpcomingTransactions: PropTypes.shape({\n head_title: PropTypes.string,\n menu_cancel: PropTypes.string,\n menu_edit: PropTypes.string,\n menu_view: PropTypes.string,\n msg_error_retrieving_transactions: PropTypes.string,\n text_amount: PropTypes.string,\n text_end_date: PropTypes.string,\n text_frequency: PropTypes.string,\n text_no_upcoming_transactions: PropTypes.string,\n text_scheduled_date: PropTypes.string,\n text_status: PropTypes.string,\n text_transaction_type: PropTypes.string,\n }),\n AccountDetails: PropTypes.shape({ nav_path: PropTypes.func }),\n Transactions: PropTypes.shape({\n edit_path: PropTypes.string,\n nav_path: PropTypes.func,\n transactions_path: PropTypes.string,\n withdrawal_path: PropTypes.string,\n cancel_transaction_modal_message: PropTypes.func,\n TRANSACTION_TYPES: PropTypes.shape({\n CONTRIBUTION: PropTypes.object,\n OPTION_CHANGE: PropTypes.object,\n TRANSFER: PropTypes.object,\n WITHDRAWAL: PropTypes.object,\n WITHDRAWAL_REQUEST: PropTypes.object,\n }),\n }),\n }).isRequired,\n upcomingTransactions: PropTypes.array.isRequired,\n selectedTransaction: PropTypes.object.isRequired,\n optionChangeById: PropTypes.object.isRequired,\n };\n\n state = {\n loading: false,\n showCancelConfirmModal: false,\n cancelTransactionLoading: false,\n selectedTransaction: {},\n loadingSelectedTransaction: false,\n showPendingOptionChange: false,\n selectedPendingOptionChange: {\n FundCategories: []\n },\n\n hasPrecondition: false,\n rememberedFunction: '',\n txn: {}\n };\n\n upcomingTransactionsGet = () => {\n this.setState({ loading: true });\n return this.props.getUpcomingTransactions(this.props.account.accountId)\n .then(() => {\n this.setState({ loading: false });\n })\n .catch(() => {\n this.setState({ loading: false });\n });\n }\n\n editTransaction = transaction => {\n const { text: { Transactions }, preferredInfo, claims } = this.props;\n const isWithdrawal = transaction.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL.type || transaction.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL_REQUEST.type;\n const multiStatus = isWithdrawal\n ? protectWithdrawal(transaction.TransactionType, Transactions, preferredInfo, claims)\n : protectAction(claims);\n\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n /* \n need to pass if is a withdrawal or not for new accounts = (oldest AO account < 45 days old)\n if is a new account, is a withdrawal, requires 2FA and RSA\n */\n this.setState(\n {\n hasPrecondition: true,\n txn: transaction, \n rememberedFunction: 'editTransaction'\n },\n () => this.props.get2FAPrecondition(isWithdrawal).catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n txn: transaction, \n rememberedFunction: 'editTransaction'\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n const { text } = this.props;\n this.setState({ hasPrecondition: false, loadingSelectedTransaction: true, rememberedFunction: '' });\n this.props.getScheduledTransaction(transaction)\n .then(() => {\n this.setState({ loadingSelectedTransaction: false });\n const { AccountId, AccountGroupId } = this.props.selectedTransaction;\n switch (this.transactionType(transaction.TransactionType)) {\n case transactionTypes.transfers: {\n return this.props.history.push(`/accounts/${AccountId}/transactions/${transaction.ScheduleId}/transfers/edit`);\n }\n case transactionTypes.optionchanges: {\n return this.props.history.push(`${text.AccountDetails.nav_path(AccountId)}/${text.Transactions.transactions_path}/option-changes/${text.Transactions.edit_path}`);\n }\n case transactionTypes.withdrawals: {\n return this.props.history.push(`${text.AccountDetails.nav_path(AccountId)}/${text.Transactions.transactions_path}/${text.Transactions.withdrawal_path}/groups/${AccountGroupId}/${text.Transactions.edit_path}`);\n }\n case transactionTypes.contributions: {\n return this.props.history.push(text.Transactions.nav_path(AccountId, transaction.TransactionType, 'edit', transaction.ScheduleId));\n }\n default: return;\n }\n });\n }\n }\n\n viewTransaction = (transaction) => {\n // when pending only option changes are viewed\n const { ScheduleId, ActionId, TransactionType } = transaction;\n const { optionChangeById } = this.props;\n if (this.transactionType(TransactionType) === transactionTypes.optionchanges) {\n if (optionChangeById === {} || ScheduleId !== optionChangeById.OptionChangeId || ActionId !== optionChangeById.ActionId) {\n this.setState({ loadingSelectedTransaction: true });\n this.props.getOptionChangeById(ScheduleId, ActionId)\n .then(() => {\n this.togglePendingOptionChangeDrawer();\n this.setState({\n selectedPendingOptionChange: this.props.optionChangeById,\n loadingSelectedTransaction: false,\n });\n });\n }\n else {\n this.togglePendingOptionChangeDrawer();\n this.setState({\n selectedPendingOptionChange: optionChangeById,\n loadingSelectedTransaction: false,\n });\n }\n }\n }\n\n transactionType = (type) => {\n switch (type) {\n case 'Transfer Out':\n case 'Transfer In': return transactionTypes.transfers;\n case 'Option Change': return transactionTypes.optionchanges;\n case 'Withdrawal': return transactionTypes.withdrawals;\n case 'Contribution': return transactionTypes.contributions;\n default: return;\n }\n }\n\n upcomingTransactionCancelHandler = () => {\n const txn = this.state.selectedTransaction;\n this.setState({ cancelTransactionLoading: true });\n this.props.deleteTransaction(txn)\n .then(() => {\n this.props.notificationShow(`${txn.TransactionType} cancelled.`, 'success');\n this.setState({\n cancelTransactionLoading: false,\n showCancelConfirmModal: false,\n selectedTransaction: {},\n });\n this.upcomingTransactionsGet();\n this.props.getAccounts();\n })\n .catch(() => {\n this.setState({ cancelTransactionLoading: false, showCancelConfirmModal: false, });\n this.upcomingTransactionsGet();\n });\n };\n\n togglePendingOptionChangeDrawer = () => {\n this.setState({ showPendingOptionChange: !this.state.showPendingOptionChange });\n }\n\n protectDeleteAction(transaction) {\n const { text: { Transactions }, preferredInfo, claims } = this.props;\n const isWithdrawal = transaction.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL.type || transaction.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL_REQUEST.type;\n const multiStatus = isWithdrawal\n ? protectWithdrawal(transaction.TransactionType, Transactions, preferredInfo, claims)\n : protectAction(claims);\n\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n /* \n need to pass if is a withdrawal or not for new accounts = (oldest AO account < 45 days old)\n if is a new account, is a withdrawal, requires 2FA and RSA\n */\n this.setState(\n {\n hasPrecondition: true,\n txn: transaction, \n rememberedFunction: 'protectDeleteAction'\n },\n () => this.props.get2FAPrecondition(isWithdrawal).catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n txn: transaction, \n rememberedFunction: 'protectDeleteAction'\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setState({\n hasPrecondition: false,\n showCancelConfirmModal: true,\n selectedTransaction: transaction,\n rememberedFunction: ''\n });\n }\n }\n\n componentDidMount() {\n this.upcomingTransactionsGet();\n this.props.getPreferredMethod();\n }\n\n componentDidUpdate() {\n const { text: { Transactions }, preferredInfo, claims } = this.props;\n const isWithdrawal = this.state.txn.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL.type || this.state.txn.TransactionType === Transactions.TRANSACTION_TYPES.WITHDRAWAL_REQUEST.type;\n const multiStatus = isWithdrawal\n ? protectWithdrawal(this.state.txn.TransactionType, Transactions, preferredInfo, claims)\n : protectAction(claims);\n\n if (this.state.hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH) {\n const rememberedFunction = this.state.rememberedFunction;\n this[rememberedFunction](this.state.txn);\n }\n }\n\n render() {\n const { text: { UpcomingTransactions, Transactions } } = this.props;\n const {\n showCancelConfirmModal,\n selectedTransaction,\n cancelTransactionLoading,\n showPendingOptionChange,\n selectedPendingOptionChange,\n loadingSelectedTransaction,\n } = this.state;\n\n return (\n !this.props.upcomingTransactions.length > 0 ? null : ( // if no upcoming transactions, do not display the table\n \n this.setState({\n selectedTransaction: row,\n }, this.editTransaction(row)),\n showIf: row => row.CanEdit,\n },\n {\n displayName: UpcomingTransactions.menu_view,\n type: 'menu',\n onSelect: row => this.setState({\n selectedTransaction: row,\n }, this.viewTransaction(row)),\n showIf: row => !row.CanEdit && row.TransactionType === 'Option Change',\n },\n {\n displayName: UpcomingTransactions.menu_cancel,\n type: 'menu',\n onSelect: row => this.protectDeleteAction(row),\n showIf: row => row.CanDelete,\n }\n ]}\n columns={[\n {\n key: 'TransactionType',\n title: UpcomingTransactions.text_transaction_type,\n type: 'string',\n },\n {\n key: 'ScheduledDate',\n title: UpcomingTransactions.text_scheduled_date,\n type: 'dateString',\n },\n {\n key: 'EndDate',\n title: UpcomingTransactions.text_end_date,\n type: 'dateString',\n },\n {\n key: 'Frequency',\n title: UpcomingTransactions.text_frequency,\n type: 'string',\n },\n {\n key: 'Status',\n title: UpcomingTransactions.text_status,\n type: 'string',\n },\n {\n key: 'Amount',\n title: UpcomingTransactions.text_amount,\n type: 'currency',\n },\n ]}\n rows={this.props.upcomingTransactions}\n emptyMessage={UpcomingTransactions.text_no_upcoming_transactions}\n idKey='id'\n loading={this.state.loading || !this.props.account.accountId}\n >\n \n \n
\n \n
\n \n
\n \n \n {TransactionDetails.head_title}\n \n
\n \n
\n \n \n \n
\n
\n | {TransactionDetails.text_date}: | \n{dayjs(transaction.date).format('MM/DD/YYYY')} | \n
|---|---|
| {TransactionDetails.text_total}: | \n{currencyFormatter(transaction.total)} | \n
| {TransactionDetails.text_transaction_type}: | \n{transaction.type} | \n
| {TransactionDetails.text_type}: | \n{transaction.source ? transaction.source : n_a} | \n
| {TransactionDetails.text_card_number}: | \n{transaction.accessCardNumber ? transaction.accessCardNumber : n_a} | \n
| {TransactionDetails.text_bank_name}: | \n{transaction.bankName ? transaction.bankName : n_a} | \n
| {TransactionDetails.text_bank_account_number}: | \n{transaction.bankAccountNumber ? transaction.bankAccountNumber : n_a} | \n
| {TransactionDetails.text_bank_account_type}: | \n{transaction.bankAccountType ? transaction.bankAccountType : n_a} | \n
| {TransactionDetails.text_payee_name}: | \n{transaction.payeeName ? transaction.payeeName : n_a} | \n
| {TransactionDetails.text_payment_confirmation}: | \n{transaction.ElectronicSchoolPaymentPaymentId} | \n
\n
\n );\n }\n\n componentDidMount() {\n // initialize selectedTransaction even if empty\n this.filterTransactions('startDate');\n this.setState({\n selectedTransaction: this.props.transaction,\n });\n }\n\n render() {\n const {\n accountId,\n isScholarshipAccount,\n text: { TransactionHistory }\n } = this.props;\n const { showTransaction, loadingTransaction, selectedTransaction, transactions } = this.state;\n const columns = [\n {\n key: 'date',\n title: TransactionHistory.text_date,\n type: 'dateString',\n },\n {\n key: 'type',\n title: TransactionHistory.text_transaction_type,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'basis',\n title: TransactionHistory.text_basis,\n type: 'currency',\n hideOn: ['phone', 'tablet'],\n },\n {\n key: 'amount',\n title: TransactionHistory.text_amount,\n type: 'currency',\n },\n {\n key: 'taxYear',\n title: TransactionHistory.text_tax_year,\n type: 'number',\n hideOn: ['phone', 'tablet'],\n customStyle: { width: '125px' }\n },\n ];\n if (isScholarshipAccount) { // add milestone column, if account type is scholarship\n columns.push({\n key: 'milestone',\n title: TransactionHistory.text_milestone,\n type: 'string',\n hideOn: ['phone', 'tablet'],\n });\n }\n\n return (\n\n \n
\n \n this.onInputChange('startDate', e ? e.toDate() : e)}\n value={startDate || null}\n />\n
\n \n this.onInputChange('endDate', e ? e.toDate() : e)}\n value={endDate || null}\n />\n
\n \n \n \n {TransactionHistory.btn_export}\n \n \n
\n \n this.transactionDetailsShow(accountId, row.id),\n iconTitle: TransactionHistory.btn_open,\n },\n ]}\n >\n \n this.transactionDetailsShow(accountId, row.id)}\n />\n \n
\n \n
\n );\n }\n\n}\n\nexport default LanguageHOC(ValueDetails);","/*\n*\n* OptionDetails Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n IconBtnTooltip,\n\n SmartTable,\n TableContainer,\n TableHeader,\n TablePagination,\n TableRows,\n} from '@frontend/common';\n\nimport parentStyles from '../styles.module.scss';\nimport styles from './styles.module.scss';\n\nexport class OptionDetails extends React.Component {\n static propTypes = {\n account: PropTypes.shape({\n fundAllocations: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n fundName: PropTypes.string.isRequired,\n ticker: PropTypes.string.isRequired,\n priceNum: PropTypes.number.isRequired,\n Units: PropTypes.string.isRequired,\n Value: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n option: PropTypes.shape({\n name: PropTypes.string,\n id: PropTypes.number,\n isCustom: PropTypes.bool,\n }),\n optionChangesRemaining: PropTypes.number,\n }),\n isCustomOption: PropTypes.bool.isRequired,\n path: PropTypes.string.isRequired,\n predefinedOptions: PropTypes.array.isRequired,\n text: PropTypes.shape({\n OptionDetails: PropTypes.shape({\n head_investment_option: PropTypes.func,\n head_remaining_option_changes: PropTypes.string,\n nav_path_investment: PropTypes.string,\n text_custom: PropTypes.string,\n text_enrollment_date: PropTypes.string,\n text_static: PropTypes.string,\n title_portfolio: PropTypes.string,\n title_nav: PropTypes.string,\n title_see_more_details: PropTypes.string,\n title_symbol: PropTypes.string,\n title_total: PropTypes.string,\n title_units: PropTypes.string,\n }),\n }),\n };\n\n state = {\n currentOptionLink: '',\n currentOptionType: '',\n }\n\n componentDidMount() {\n const { account, isCustomOption, path, predefinedOptions, text: { OptionDetails } } = this.props;\n\n const currentOption = predefinedOptions.find(option => option.OptionId === account.option.id);\n const currentOptionLink = isCustomOption\n // only Customized options can use the investment path link\n ? `${path}/${OptionDetails.nav_path_investment}`\n : currentOption.OptionOnlineLink;\n const currentOptionType = isCustomOption\n ? OptionDetails.text_custom\n : currentOption.isStatic\n ? OptionDetails.text_static\n : OptionDetails.text_enrollment_date;\n this.setState({ currentOptionLink, currentOptionType });\n }\n\n render() {\n const { account: { fundAllocations, option, optionChangesRemaining }, isCustomOption, history, text: { OptionDetails } } = this.props;\n const { currentOptionLink, currentOptionType } = this.state;\n const handleOptionLink = () => isCustomOption\n ? history.push(currentOptionLink)\n : window.open(currentOptionLink, '_blank', 'noopener noreferrer');\n \n return (\n \n
\n \n
\n {Details.head_netPrincipal}
\n {account.netPrincipal}
\n \n
\n {Details.head_earnings}
\n {account.earnings}
\n \n
\n {Details.head_current_tax_year_contributions}
\n {account.ytdContributions}
\n \n
\n {Details.head_prior_tax_year_contributions}
\n {account.priorContributions}
\n \n \n \n \n
\n );\n }\n\n}\n\nexport default withRouter(LanguageHOC(OptionDetails));","/*\n*\n* AccountDetails Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport BeneContact from './BeneContact';\nimport CurrentAllocation from './CurrentAllocation';\nimport Details from './Details';\nimport PromoCode from './PromoCode';\nimport Successors from './Successors';\nimport UpcomingTransactions from '../UpcomingTransactions';\nimport TransactionHistory from './TransactionHistory';\nimport ValueDetails from './ValueDetails';\nimport OptionDetails from './OptionDetails';\nimport TransactionButtons from '../TransactionButtons';\n\nimport {\n Divider,\n Paper,\n} from '@mui/material';\nimport {\n sizify,\n} from '@frontend/common';\nimport { submitPromoCode, getAccounts, } from '../actions';\n\n\nimport styles from './styles.module.scss';\n\n\nconst select = (state, props) => ({\n account: state.accounts.accountList.find(data => data.accountId === parseInt(props.match.params.accountId)) || state.accounts.emptyAccount,\n lastMarketDate: state.static.environmentVars.LastMarketDate,\n predefinedOptions: state.optionChanges.predefinedOptions,\n});\n\nexport class AccountDetails extends React.Component {\n\n static propTypes = {\n account: PropTypes.shape({\n accountCloseDate: PropTypes.string,\n accountId: PropTypes.number,\n accountIsClosed: PropTypes.bool,\n accountNumber: PropTypes.number,\n accountType: PropTypes.string,\n beneficiary: PropTypes.object,\n hasAvailablePromoCodes: PropTypes.bool,\n interestedPartyId: PropTypes.number,\n moneyAllocations: PropTypes.array,\n option: PropTypes.shape({\n name: PropTypes.string,\n id: PropTypes.number,\n isCustom: PropTypes.bool,\n }),\n permissions: PropTypes.shape({\n Contribute: PropTypes.bool,\n EditAccount: PropTypes.bool,\n OptionChange: PropTypes.bool,\n Transfer: PropTypes.bool,\n Withdraw: PropTypes.bool,\n WithdrawalRequest: PropTypes.bool,\n }),\n transactions: PropTypes.array,\n }).isRequired,\n lastMarketDate: PropTypes.string.isRequired,\n predefinedOptions: PropTypes.array.isRequired,\n getAccounts: PropTypes.func.isRequired,\n submitPromoCode: PropTypes.func.isRequired,\n size: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Accounts: PropTypes.shape({\n text_account_closed: PropTypes.string,\n }),\n AccountsSummary: PropTypes.shape({\n head_account_type: PropTypes.string,\n head_interested_party: PropTypes.string,\n }),\n Documents: PropTypes.shape({\n nav_path: PropTypes.string,\n nav_title: PropTypes.string,\n }),\n }).isRequired,\n location: PropTypes.shape({\n pathname: PropTypes.string.isRequired,\n }).isRequired,\n };\n\n state = {\n lastClicked: null,\n }\n\n render() {\n const { account, size, text, location, lastMarketDate, predefinedOptions, submitPromoCode, } = this.props;\n const { lastClicked } = this.state;\n const isInterestedParty = Boolean(account.interestedPartyId);\n\n return (\n \n
\n\n \n
\n\n \n {OptionDetails.head_investment_option(currentOptionType)}\n
\n \n
\n {option.name}
\n \n
\n \n
\n \n {OptionDetails.head_remaining_option_changes}\n
\n {optionChangesRemaining}
\n \n \n {/* displays warning banner if account is closed */}\n {account.accountIsClosed &&
\n );\n }\n}\n\nexport default connect(select, { submitPromoCode, getAccounts, })(sizify(LanguageHOC(AccountDetails)));\n","/*\n*\n* Search Component\n*\n*/\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { cloneDeep, debounce, isEqual, } from 'lodash';\nimport Fuse from 'fuse.js';\n\nimport { \n MenuItem\n} from '@mui/material';\n\nimport {\n Search\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nexport class ComposableSearch extends Component {\n\n static propTypes = {\n idKey: PropTypes.string.isRequired,\n data: PropTypes.array.isRequired,\n dataColumns: PropTypes.array.isRequired,\n disabled: PropTypes.bool,\n updateData: PropTypes.func.isRequired,\n hasSearchMenu: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n ComposableSearch: PropTypes.shape({\n text_search_suggestion: PropTypes.func,\n }),\n }),\n };\n\n state = {\n showSearchSuggestions: false,\n filterTerm: '',\n selectedSearchMenuIndex: -1,\n };\n\n searchMenuHide = () => {\n this.setState({\n showSearchSuggestions: false,\n selectedSearchMenuIndex: -1,\n });\n };\n \n keyPressHandle = e => {\n const { showSearchSuggestions, selectedSearchMenuIndex, } = this.state;\n const columns = this.props.dataColumns;\n if (e.keyCode === 27) { // ESC Key\n this.searchMenuHide();\n }\n if (showSearchSuggestions) {\n switch (e.keyCode) {\n case 13: { // Enter Key\n if (selectedSearchMenuIndex > -1) {\n this.onSearchSuggestionClick(selectedSearchMenuIndex);\n }\n else {\n this.searchMenuHide();\n }\n break;\n }\n case 40: { // Arrow Down Key\n if (selectedSearchMenuIndex < columns.length - 1) {\n this.setState({\n selectedSearchMenuIndex: selectedSearchMenuIndex + 1,\n });\n }\n break;\n }\n case 38: { // Arrow Up Key\n if (selectedSearchMenuIndex > -1) {\n this.setState({\n selectedSearchMenuIndex: selectedSearchMenuIndex - 1,\n });\n }\n break;\n }\n default: break;\n }\n }\n };\n\n onSearchSuggestionClick = (index) => {\n const column = this.props.dataColumns[index];\n this.setState({ filterTerm: `${column.title}: ${this.state.filterTerm}`, showSearchSuggestions: false, }, this.onFilter);\n };\n\n onFilter = () => {\n const { filterTerm } = this.state;\n const searchIsActive = Boolean(filterTerm);\n const splitTerm = filterTerm.split(':').map(val => val.trim());\n \n\n let sortColumn = '';\n let searchTerm = '';\n \n if (splitTerm.length > 1) {\n const column = this.props.dataColumns.find(column => column.title.toLowerCase() === splitTerm[0].toLowerCase());\n sortColumn = [column.key];\n searchTerm = splitTerm[splitTerm.length - 1];\n }\n else {\n sortColumn = this.props.dataColumns.map(column => column.key);\n searchTerm = filterTerm;\n }\n\n const updatedResults = this.filterData(sortColumn, searchTerm);\n this.props.updateData(updatedResults, searchIsActive);\n }\n\n filterData = (sortColumn, searchTerm) => {\n const fuseConfig = {\n tokenize: true,\n findAllMatches: true,\n shouldSort: true,\n maxPatternLength: 100,\n minMatchCharLength: 1,\n threshold: 0.2,\n location: 0,\n distance: 50,\n keys: sortColumn\n };\n const clonedData = cloneDeep(this.props.data);\n if (searchTerm.length > 0) {\n\n const fuse = new Fuse(clonedData, fuseConfig);\n const results = fuse.search(searchTerm);\n const matchedRows = [];\n \n results.forEach(result => {\n const matchingRow = clonedData.filter(row => row[this.props.idKey] === result.item[this.props.idKey])[0];\n if (matchingRow) matchedRows.push(matchingRow);\n });\n \n return matchedRows;\n }\n else {\n return clonedData;\n }\n };\n\n componentDidMount() {\n document.addEventListener('keyup', this.keyPressHandle);\n }\n \n componentDidUpdate(prevProps) {\n // if data is updated from parent, run through search again to give back searched results\n if (!isEqual(prevProps.data, this.props.data)) { \n this.onFilter();\n }\n }\n \n componentWillUnmount() {\n document.removeEventListener('keyup', this.keyPressHandle);\n }\n\n render() {\n const { filterTerm, showSearchSuggestions, selectedSearchMenuIndex, } = this.state;\n \n return (\n {text.Accounts.text_account_closed} {account.accountCloseDate}
}\n\n \n \n {isInterestedParty ? // displays different header for interested party account\n \n
\n\n {(account.permissions.EditAccount || account.permissions.WithdrawalRequest) && ( // hidden for Interested Parties (but not CSAs that can request withdrawals), and when no transactions exist\n {text.AccountsSummary.head_account_type} {account.accountType} - {text.AccountsSummary.head_interested_party}
\n :\n {text.AccountsSummary.head_account_type} {account.accountType}
\n }\n \n
\n \n this.setState({ lastClicked: 'BeneContact' })}\n isLastClicked={lastClicked === 'BeneContact'}\n />\n\n
\n\n \n this.setState({ lastClicked: 'Transactions' })}\n />\n
\n\n \n this.setState({ lastClicked: 'Successors' })}\n isLastClicked={lastClicked === 'Successors'}\n />\n
\n \n
\n );\n }\n}\n\nexport default withRouter(connect(select, {})((LanguageHOC(AccountsSummary))));","/*\n*\n* Accounts Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport {\n Route,\n Switch,\n withRouter\n} from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { getAccounts, getAccountsSummary } from './actions';\nimport AccountDetails from 'components/Features/protected/Accounts/AccountDetails';\nimport AccountsSummary from 'components/Features/protected/Accounts/AccountsSummary';\nimport {\n Tabs,\n Tab,\n} from '@mui/material';\nimport {\n LoadingOverlay,\n sizify,\n} from '@frontend/common';\n\nimport { mobileWidth } from 'utils/config/_sassconfig.scss';\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n accountList: state.accounts.accountList.map(account => ({\n accountId: account.accountId,\n accountGroupId: account.accountGroupId,\n beneficiaryName: account.beneficiary.name,\n totalValue: account.totalValue,\n accountNumber: account.accountNumber,\n accountType: account.accountType,\n optionName: account.option.name,\n programName: account.programName,\n csaWizardUrl: account.csaWizardUrl,\n })),\n});\n\nexport class Accounts extends React.Component {\n\n static propTypes = {\n accountList: PropTypes.arrayOf(\n PropTypes.shape({\n accountId: PropTypes.number,\n accountGroupId: PropTypes.number,\n beneficiaryName: PropTypes.string,\n totalValue: PropTypes.string,\n accountNumber: PropTypes.number,\n accountType: PropTypes.string,\n optionName: PropTypes.string,\n programName: PropTypes.string,\n csaWizardUrl: PropTypes.string,\n })\n ).isRequired,\n getAccounts: PropTypes.func.isRequired,\n getAccountsSummary: PropTypes.func.isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number,\n }).isRequired,\n text: PropTypes.shape({\n Accounts: PropTypes.shape({\n head_title: PropTypes.string,\n nav_path: PropTypes.string,\n }),\n AccountDetails: PropTypes.shape({ nav_path: PropTypes.func }),\n }).isRequired,\n };\n\n state = {\n isTileView: false,\n loading: false,\n accountList: [],\n };\n\n componentDidMount() {\n if (this.props.accountList.length === 0) {\n this.setState({ loading: true });\n this.props.getAccounts()\n .then(() => this.props.getAccountsSummary())\n .finally(() => this.setState({\n loading: false,\n isTileView: this.props.size.windowWidth < parseInt(mobileWidth),\n }));\n }\n else {\n this.props.getAccountsSummary();\n this.setState({\n isTileView: this.props.size.windowWidth < parseInt(mobileWidth),\n });\n }\n }\n\n componentDidUpdate({ size }) {\n const { size: { windowWidth } } = this.props;\n if (size.windowWidth !== windowWidth) {\n this.setState({\n isTileView: windowWidth < parseInt(mobileWidth),\n });\n }\n }\n\n render() {\n const { accountList, history, size, text } = this.props;\n const { isTileView } = this.state;\n\n return (\n \n
\n \n {\n this.handleShowFilterList();\n }}\n icon='filter_list'\n title={'Filter Accounts'}\n />\n \n {\n this.handleShowFilterList();\n }}\n value={selectedFilters}\n onChange={(event) => {\n this.handleFilterSelect(event);\n }}\n multiple\n input={}\n >\n {filterList.map(filter => filter.listHeader\n ? {filter.listHeader} \n :\n \n {filter.label}\n \n )}\n \n \n
\n\n \n
\n \n
\n\n \n
\n {this.addAccountButtonRender()}\n {text.AccountsSummary.head_total_accts} {lastMarketDate}
\n{grandTotalAllAccounts}
\n\n {readyToRenderGroups && filteredGroupedAccountsList.map(group => {\n const accountGroup = groupedAccountsSummary[group];\n return (\n \n \n );\n })}\n
\n \n {accountGroup[0].interestedPartyId ? // displays different header for interested party account\n
\n {text.AccountsSummary.head_account_type} {accountGroup[0].accountType} - {text.AccountsSummary.head_interested_party}
\n :\n {text.AccountsSummary.head_account_type} {accountGroup[0].accountType}
\n }\n \n
,\n account.accountIsClosed &&
\n \n
\n\n {accountGroup.map(account => [\n \n
\n\n {text.AccountsSummary.head_beneficiary}
\n{accountGroup[0].beneficiaryName}
\n {accountGroup[0].beneficiaryAge && accountGroup[0].beneficiaryAge > 0 &&\nAge: {accountGroup[0].beneficiaryAge}
\n }\n {accountGroup[0].ownerEntity && accountGroup[0].accountTypeEnum === 'D' && (\n\n school \n
\n )}\n {accountGroup[0].ownerEntity.Name}
\n\n
\n {text.AccountsSummary.head_total_value}
\n{this.calculateTotalSum(group)}
\n\n
\n {text.AccountsSummary.head_market_date}
\n{lastMarketDate}
\n,\n account.accountIsClosed &&
{text.Accounts.text_account_closed} {account.accountCloseDate}
,\n \n
\n ])}\n \n\n
\n \n
\n\n {account.optionName}
\n {account.accountNumber}\n {text.AccountsSummary.head_date_opened}: {account.agreementDate}
\n \n
\n\n \n
\n {account.totalValueFormatted}
\n \n
\n {text.AccountsSummary.head_ytd_return}
\n{account.ytdPRR}
{/* eslint-disable-line */} {/**styles negative nums in red, positive in green, and nothing for Not Available */}\n\n {\n\n return (\n \n
\n }\n to={text.AccountDetails.nav_path(account.accountId)} // component defined above will push to this route, which gets defined in Switch below\n value={text.AccountDetails.nav_path(account.accountId)}\n onClick={() => history.push(text.AccountDetails.nav_path(account.accountId))}\n />\n ))}\n \n\n \n \n \n
\n }\n to={text.Accounts.nav_path}\n value={text.Accounts.nav_path}\n onClick={() => history.push(text.Accounts.nav_path)}\n />\n {accountList.length > 0 && accountList.map(account => (\n {text.Accounts.head_title}
\n {account.beneficiaryName}
\n {`(...${account.accountNumber.toString().substring(4)})`}
\n \n this.setState({\n selectedTransaction: row,\n }, this.editTransaction(row)),\n showIf: row => row.CanEdit,\n },\n {\n displayName: UpcomingTransactions.menu_view,\n type: 'menu',\n onSelect: row => this.setState({\n selectedTransaction: row,\n }, this.viewTransaction(row)),\n showIf: row => !row.CanEdit && row.TransactionType === 'Option Change',\n },\n {\n displayName: UpcomingTransactions.menu_cancel,\n type: 'menu',\n onSelect: row => this.protectDeleteAction(row),\n showIf: row => row.CanDelete,\n }\n ]}\n columns={[\n {\n key: 'AccountNumber',\n title: UpcomingTransactions.text_acct_number,\n type: 'number',\n },\n {\n key: 'BeneficiaryName',\n title: UpcomingTransactions.text_bene_name,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'Option',\n title: UpcomingTransactions.text_option,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'Frequency',\n title: UpcomingTransactions.text_frequency,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'TransactionType',\n title: UpcomingTransactions.text_transaction_type,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'Amount',\n title: UpcomingTransactions.text_amount,\n type: 'currency',\n },\n {\n key: 'Status',\n title: UpcomingTransactions.text_status,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'ScheduledDate',\n title: UpcomingTransactions.text_scheduled_date,\n type: 'dateString',\n hideOn: ['phone'],\n },\n {\n key: 'EndDate',\n title: UpcomingTransactions.text_end_date,\n type: 'dateString',\n hideOn: ['phone'],\n },\n ]}\n >\n \n \n
\n \n
\n \n
\n \n \n {TransactionDetails.head_title}\n \n
\n \n
\n \n \n \n
\n
\n | {TransactionDetails.text_acct_number}: | \n{transaction.accountNumber} | \n
|---|---|
| {TransactionDetails.text_bene_name}: | \n{transaction.beneficiaryName} | \n
| {TransactionDetails.text_option}: | \n{transaction.option} | \n
| {TransactionDetails.text_date}: | \n{dayjs(transaction.date).format('MM/DD/YYYY')} | \n
| {TransactionDetails.text_total}: | \n{currencyFormatter(transaction.total)} | \n
| {TransactionDetails.text_transaction_type}: | \n{transaction.type} | \n
| {TransactionDetails.text_type}: | \n{transaction.source ? transaction.source : n_a} | \n
| {TransactionDetails.text_card_number}: | \n{transaction.accessCardNumber ? transaction.accessCardNumber : n_a} | \n
| {TransactionDetails.text_payee_name}: | \n{transaction.payeeName ? transaction.payeeName : n_a} | \n
| {TransactionDetails.text_payment_confirmation}: | \n{transaction.ElectronicSchoolPaymentPaymentId} | \n
\n
\n );\n }\n\n componentDidMount() {\n // initialize selectedTransaction even if empty \n this.setState({\n selectedTransaction: this.props.transaction,\n });\n this.allTransactionsGet()\n .then(() => {\n // make sure the data filtering happens after the data is available\n this.filterTransactions('startDate');\n });\n }\n\n render() {\n const {\n hasScholarshipAccount,\n text: { TransactionHistory }\n } = this.props;\n\n const {\n showTransaction,\n loadingTransaction,\n selectedTransaction,\n transactionsAll,\n loading\n } = this.state;\n const columns = [\n {\n key: 'accountNumber',\n title: TransactionHistory.text_acct_number,\n type: 'number',\n },\n {\n key: 'beneficiaryName',\n title: TransactionHistory.text_bene_name,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'option',\n title: TransactionHistory.text_option,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'type',\n title: TransactionHistory.text_transaction_type,\n type: 'string',\n hideOn: ['phone'],\n },\n {\n key: 'basis',\n title: TransactionHistory.text_basis,\n type: 'currency',\n hideOn: ['phone'],\n },\n {\n key: 'amount',\n title: TransactionHistory.text_amount,\n type: 'currency',\n },\n {\n key: 'date',\n title: TransactionHistory.text_date,\n type: 'dateString',\n hideOn: ['phone'],\n },\n {\n key: 'taxYear',\n title: TransactionHistory.text_tax_year,\n type: 'string',\n hideOn: ['phone'],\n },\n ];\n if (hasScholarshipAccount) { // add milestone column, if account type is scholarship\n columns.push({\n key: 'milestone',\n title: TransactionHistory.text_milestone,\n type: 'string',\n hideOn: ['phone', 'tablet'],\n });\n }\n\n return (\n\n \n
\n \n this.onInputChange('startDate', e ? e.toDate() : e)}\n value={startDate || null}\n disabled={loading}\n />\n
\n \n this.onInputChange('endDate', e ? e.toDate() : e)}\n value={endDate || null}\n disabled={loading}\n />\n
\n \n \n \n {TransactionHistory.btn_export}\n \n \n
\n \n this.transactionDetailsShow(row.accountId, row.id),\n iconTitle: TransactionHistory.btn_open,\n },\n ]}\n columns={columns}\n >\n \n this.transactionDetailsShow(row.accountId, row.id)}\n />\n \n
\n\n - \n
\n
\n {account.beneficiary.name}
\n {account.accountNumber}
\n {account.option.name}
\n \n
\n\n \n
\n\n \n swap_horiz}\n fullWidth\n size='large'\n style={{ height: '3em', whiteSpace: 'nowrap' }}\n onClick={() => this.handleOpen(Transactions.TRANSACTION_TYPES.TRANSFER.type)}\n >\n {Transactions.TRANSACTION_TYPES.TRANSFER.title}\n \n
\n\n \n
\n\n \n
\n \n
\n );\n }\n}\n\n\nexport default connect(select, {})(LanguageHOC(TransactionsHub));\n","/*\n*\n* MyInfo Actions\n*\n*/\nimport { DELETErequest, GETrequest, POSTrequest, PUTrequest } from 'utils/helpers/api_handler';\nimport {\n AGENT_GET,\n CHANGE_ADDRESS,\n GET_DELIVERY_METHODS,\n CHANGE_DELIVERY_METHODS,\n CHANGE_EMAIL,\n CHANGE_PHONE_NUMBERS,\n DELETE_ADDRESS,\n PASSWORD_CHANGE,\n\n OFFICIAL_NOTIFICATION,\n TAXFORMS_NOTIFICATION,\n NEWSLETTER_NOTIFICATION,\n PROMO_NOTIFICATION,\n BDAY_NOTIFICATION,\n UTAH_RESIDENT_CHANGE,\n} from './constants';\n\nexport function agentGet() {\n const payload = GETrequest('/agents');\n\n return {\n type: AGENT_GET,\n payload,\n };\n}\n\nexport function changeAddress(address) {\n const payload = PUTrequest('/agents/Address', address);\n\n return {\n type: CHANGE_ADDRESS,\n payload\n };\n}\n\nexport function changeEmail(email) {\n const payload = PUTrequest('/agents/email', {\n email\n });\n\n return {\n type: CHANGE_EMAIL,\n payload,\n };\n}\n\nexport function changePhoneNumbers(phoneNumbers) {\n const payload = PUTrequest('/agents/phones', phoneNumbers);\n\n return {\n type: CHANGE_PHONE_NUMBERS,\n payload\n };\n}\n\nexport function deleteAddress(addressId, addressType) {\n const payload = DELETErequest(`/agents/Address/${addressId}`);\n\n return {\n type: DELETE_ADDRESS,\n payload,\n meta: { addressType }\n };\n}\n\nexport function passwordChange(oldpassword, newpassword1, newpassword2) {\n const payload = POSTrequest('/authentication/changepassword', {\n oldpassword,\n newpassword1,\n newpassword2\n });\n\n return {\n type: PASSWORD_CHANGE,\n payload,\n };\n}\n\nexport function getStatementDeliveryMethods() {\n const payload = GETrequest('/agents/StatementDelivery');\n\n return {\n type: GET_DELIVERY_METHODS,\n payload,\n };\n}\n\nexport function changeStatementDeliveryMethods(deliveryMethods) {\n const payload = PUTrequest('/agents/StatementDelivery', deliveryMethods);\n\n return {\n type: CHANGE_DELIVERY_METHODS,\n payload,\n };\n}\n\nexport function officialNotificationUpdate(Value) {\n const payload = PUTrequest('/agents/OfficialCommunications', { Value });\n return {\n type: OFFICIAL_NOTIFICATION,\n payload,\n };\n}\n\nexport function taxFormsNotificationUpdate(Value) {\n const payload = PUTrequest('/agents/TaxForms', { Value });\n\n return {\n type: TAXFORMS_NOTIFICATION,\n payload,\n };\n}\n\nexport function newsletterNotificationUpdate(Value) {\n const payload = PUTrequest('/agents/Newsletter', { Value });\n\n return {\n type: NEWSLETTER_NOTIFICATION,\n payload,\n };\n}\n\nexport function promoNotificationUpdate(Value) {\n const payload = PUTrequest('/agents/Promotional', { Value });\n\n return {\n type: PROMO_NOTIFICATION,\n payload,\n };\n}\n\nexport function bdayNotificationUpdate(Value) {\n const payload = PUTrequest('/agents/BirthdayNotifications', { Value });\n\n return {\n type: BDAY_NOTIFICATION,\n payload,\n };\n}\n\nexport function utahResidentSave(utahResident) {\n const payload = PUTrequest('/agents/UtahResident', { IsOn: utahResident });\n return {\n type: UTAH_RESIDENT_CHANGE,\n payload,\n };\n}\n","/* eslint-disable newline-per-chained-call */\n/* eslint-disable prefer-arrow-callback */\n/* eslint-disable id-length */\n/*\n*\n* BalanceGraph Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport * as d3 from 'd3';\nimport { cloneDeep, isEqual, } from 'lodash';\nimport dayjs from 'dayjs';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n currencyFormatter,\n sizify,\n} from '@frontend/common';\nimport styles from './styles.module.scss';\n\nconst margin = { top: 20, right: 0, bottom: 20, left: 40 };\n\n\nexport class BalanceGraph extends React.Component {\n\n static propTypes = {\n graphData: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n accountBalanceHistory: PropTypes.arrayOf(\n PropTypes.shape({\n balance: PropTypes.number,\n date: PropTypes.object,\n }),\n )\n })\n ).isRequired,\n isGraphFullscreen: PropTypes.bool.isRequired,\n activeDateFilter: PropTypes.string.isRequired,\n size: PropTypes.shape({\n componentHeight: PropTypes.number,\n componentWidth: PropTypes.number,\n windowWidth: PropTypes.number,\n }).isRequired,\n text: PropTypes.shape({\n Overview: PropTypes.shape({\n lbl_filter_1month: PropTypes.string,\n lbl_filter_3month: PropTypes.string,\n lbl_filter_6month: PropTypes.string,\n lbl_filter_YTD: PropTypes.string,\n lbl_filter_1year: PropTypes.string,\n lbl_filter_all: PropTypes.string,\n lbl_filter_custom: PropTypes.string,\n lbl_total: PropTypes.string,\n text_NA: PropTypes.string,\n })\n }),\n };\n\n state = {\n componentHeight: this.props.size.componentHeight,\n componentWidth: this.props.size.componentWidth,\n }\n\n drawChart = (useTransition = false) => {\n const { graphData, activeDateFilter, size: { windowWidth }, text: { Overview }, } = this.props;\n const {\n componentHeight,\n componentWidth,\n } = this.state;\n\n const width = componentWidth - margin.left - margin.right;\n const height = componentHeight - margin.top - margin.bottom;\n\n const accountBeneNames = graphData.map(data => data.accountId);\n const selectedAccountsCount = accountBeneNames.length;\n\n // find max value from all balance histories, used for figuring out the yAxis domain and formatting\n const maxBalances = cloneDeep(graphData).map(data => {\n const sortedBalances = data.accountBalanceHistory.sort((a, b) => b.balance - a.balance);\n return sortedBalances[0].balance;\n });\n const maxAmount = Math.max(...maxBalances);\n // find the account with the longest balance history in order to make the proper domain for the x axis\n const longestDateRangeIndex = graphData.reduce((p, c, i, a) => a[p].accountBalanceHistory.length > c.accountBalanceHistory.length ? p : i, 0);\n\n const xScale = d3.scaleTime()\n .range([0, width])\n .clamp(true);\n\n const yScale = d3.scaleLinear()\n .range([height, 0]);\n\n // time formats\n const formatDay = d3.timeFormat('%d');\n const formatWeek = d3.timeFormat('%b %d');\n const formatMonth = d3.timeFormat('%b');\n const formatYearBeg = d3.timeFormat('%b %Y');\n const formatYear = d3.timeFormat('%Y');\n\n const is1YearFilter = activeDateFilter === Overview.lbl_filter_1year || activeDateFilter === Overview.lbl_filter_YTD;\n // time formatter for x axis \n const multiFormat = (date) => {\n return (\n d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)\n : isEqual(d3.timeYear(date), date) && is1YearFilter ? formatYearBeg\n : d3.timeYear(date) < date ? formatMonth\n : formatYear)(date);\n };\n\n let xTickCount = componentWidth <= 600 ? 3 : componentWidth <= 1000 ? 9 : 12; // determine x axis tick count based on width\n xTickCount = graphData[longestDateRangeIndex].accountBalanceHistory.length < xTickCount ? graphData[longestDateRangeIndex].accountBalanceHistory.length : xTickCount;\n\n // create color range by first using set default colors then d3's rainbow scale\n const colorRange = [];\n const defaultColors = ['#ED12FF', '#12FFB6', '#12ADFF', '#5B12FF', '#FFA412', '#FF1224', '#FFFF12', '#8271A7']; // default starting colors\n if (selectedAccountsCount > defaultColors.length) { // if there are more selected accounts then the default colors, use d3's rainbow scale\n accountBeneNames.forEach((key, index) => colorRange.push(d3.interpolateRainbow(index / accountBeneNames.length)));\n }\n else {\n accountBeneNames.forEach((key, index) => colorRange.push(defaultColors[index]));\n }\n\n const color = d3.scaleOrdinal()\n .range(colorRange)\n .domain(accountBeneNames); // Set the color domain equal to the account list keys\n const xAxis = d3.axisBottom().scale(xScale)\n .ticks(xTickCount)\n .tickFormat(date => multiFormat(date)); // Create an x axis component with d3.axisBottom\n const yAxis = d3.axisLeft().scale(yScale) // Create an y axis component with d3.axisLeft, formats to a thousands place\n .ticks(10)\n .tickFormat(value => maxAmount > 5000 ? `$${value / 1000}k` : `$${value}`); // if maxAmount is more than $5,000, format in 1,000s.\n\n\n const line = d3.line()\n .curve(d3.curveLinear) // apply smoothing to the line\n .x(data => xScale(data.date)) // set the x values for the line generator\n .y(data => yScale(data.balance)); // set the y values for the line generator \n\n // remove whatever was previously in the .graph container so it can be redrawn on resizing\n d3.select('.graph')\n .selectAll('*')\n .remove();\n\n // set the width/height on the SVG\n const svg = d3.select('.graph')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n .attr('transform', `translate( ${margin.left} ${margin.top} )`)\n .attr('class', 'line-graph');\n\n\n // Set the domain (min/max) of the axes\n const xDomain = d3.extent(graphData[longestDateRangeIndex].accountBalanceHistory, d => d.date);\n xScale.domain(xDomain);\n\n yScale.domain([0, maxAmount > 0 ? maxAmount * 1.1 : 1000]); // sets yAxis domain (how high the axis will go). giving a 10% buffer. If maxAmount is 0, default to 1000.\n\n // call the x axis in a group tag\n svg.append('g')\n .attr('class', styles.xAxis)\n .attr('transform', `translate(0, ${height} )`)\n .attr('stroke', 'none')\n .transition()\n .duration(750)\n .call(xAxis)\n .call(g => {\n g.selectAll('text')\n .style('text-anchor', 'end')\n .attr('y', 10);\n });\n\n\n // call the y axis in a group tag\n svg.append('g')\n .attr('class', styles.yAxis)\n .style('text-anchor', 'end')\n .transition()\n .duration(750)\n .call(yAxis);\n\n // APPEND MULTIPLE LINES //\n const lines = svg.append('g')\n .attr('class', 'lines');\n\n const glines = lines.selectAll('.line-group')\n .data(graphData)\n .enter()\n .append('g')\n .attr('class', 'line-group');\n\n // determine if the line should be smaller, if there are more than 6 selected accounts over the time frame is over 1 year\n const overOneYearTimeframe = dayjs(xDomain[1]).subtract(1, 'year')\n .isAfter(xDomain[0]); // checks that latest date, minus 1 year, is still after the earliest date\n const useSmallerLine = selectedAccountsCount > 6 || overOneYearTimeframe;\n\n glines\n .append('path')\n .attr('class', 'line')\n .attr('id', (d, i) => `line_${i}`)\n .attr('d', d => line(d.accountBalanceHistory)) // calls the line generator \n .style('stroke', (d, i) => color(i))\n .style('fill', 'none')\n .style('opacity', 1)\n .style('stroke-width', useSmallerLine ? '4px' : '6px'); // set the line size\n\n\n // LINE TRANSITIONS //\n if (useTransition) {\n glines.each((d, i) => {\n const selectedLine = d3.select(`#line_${i}`);\n const totalLength = selectedLine.node().getTotalLength();\n\n selectedLine\n .attr('stroke-dasharray', `${totalLength} ${totalLength}`)\n .attr('stroke-dashoffset', totalLength)\n .transition()\n .duration(1500)\n .delay(200 * i)\n .ease(d3.easeQuadInOut)\n .attr('stroke-dashoffset', 0);\n });\n }\n // CREATE HOVER TOOLTIP WITH VERTICAL LINE //\n\n // remove everything under the tooltip so it does not create additional elements\n d3.select('#tooltip')\n .remove();\n\n // create tooltip container\n const tooltip = d3.select('#chart')\n .append('div')\n .attr('id', 'tooltip')\n .attr('class', styles.tooltip)\n .style('position', 'absolute')\n .style('display', 'none');\n\n const mouseG = svg.append('g')\n .attr('class', 'mouse-over-effects');\n\n mouseG.append('path') // create vertical line to follow mouse\n .attr('class', 'mouse-line')\n .style('stroke', '#A9A9A9')\n .style('stroke-width', '2px')\n .style('stroke-dasharray', 6)\n .style('opacity', '0');\n\n const mousePerLine = mouseG.selectAll('.mouse-per-line')\n .data(graphData)\n .enter()\n .append('g')\n .attr('class', 'mouse-per-line');\n\n mousePerLine.append('circle') // creates the circle that goes over each line based on mouse position\n .attr('r', 8)\n .style('stroke', (d, i) => color(i))\n .style('fill', '#FFF')\n .style('stroke-width', '4px')\n .style('opacity', '0');\n\n mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas\n .attr('width', width)\n .attr('height', height)\n .attr('fill', 'none')\n .attr('pointer-events', 'all')\n .on('mouseout', function() { // on mouse out hide line, circles and text\n d3.select('.mouse-line')\n .style('opacity', '0');\n d3.selectAll('.mouse-per-line circle')\n .style('opacity', '0');\n d3.selectAll('.mouse-per-line text')\n .style('opacity', '0');\n d3.selectAll('#tooltip')\n .style('display', 'none');\n })\n .on('mouseover touchstart', function() { // on mouse in show line, circles and text\n d3.select('.mouse-line')\n .style('opacity', '1');\n d3.selectAll('.mouse-per-line circle')\n .style('opacity', '1');\n d3.selectAll('#tooltip')\n .style('display', 'block');\n })\n .on('mousemove', function() { // update tooltip content, line, circles and text when mouse moves\n const [mouseX, mouseY] = d3.mouse(this); // gets the x, y position of where the mouse is at in the line graph area\n const date = xScale.invert(mouseX + 0.14); // use 'invert' to get date corresponding to distance from mouse position relative to svg; have to add 0.14 to x position due to the position being just slightly off\n const roundedDate = dayjs(date).format('HH') > 1 ? dayjs(date).add(1, 'day').startOf('day') : dayjs(date).startOf('day'); // rounds date for tooltip display. needed due to day being off by 1 day\n const bisectDate = d3.bisector(d => d.date).left; // create bisector function\n const moveTooltipToCenter = windowWidth < 450 && Math.abs((windowWidth / 2) - d3.event.pageX) < 50;\n const moveTooltipToLeft = windowWidth - d3.event.pageX < 240; // checks if there is still space for the tooltip to be viewed on the screen\n let longestHistoryLength = 0;\n\n // finds the cordinates for each line and mouse X position and places the line and circles there\n d3.selectAll('.mouse-per-line')\n .attr('transform', d => {\n const dateIndex = bisectDate(d.accountBalanceHistory, roundedDate);\n if (d.accountBalanceHistory.length > longestHistoryLength) { // only set the mouse line position based on the longest data history\n longestHistoryLength = d.accountBalanceHistory.length;\n d3.select('.mouse-line')\n .attr('d', () => {\n let data = `M${xScale(d.accountBalanceHistory[dateIndex].date)},${height}`;\n data += ` ${xScale(d.accountBalanceHistory[dateIndex].date)},0`;\n return data;\n });\n }\n return `translate( ${xScale(d.accountBalanceHistory[dateIndex].date)},${yScale(d.accountBalanceHistory[dateIndex].balance)} )`;\n });\n\n // finds data for each line and total balance, based on the X position of the mouse\n let totalBalance = 0;\n\n const selectedBalances = graphData.map(data => {\n const beneFirstName = data.beneficiaryName.split(' ')[0].toUpperCase();\n let balance = Overview.text_NA; // default balance to N/A.\n if (!dayjs(roundedDate).isBefore(data.accountBalanceHistory[0].date, 'day')) { // if date selected is before earliest account history date, leave balance as N/A.\n const accountBalanceHistory = cloneDeep(data.accountBalanceHistory);\n const balanceObject = accountBalanceHistory.reverse().find(balance => dayjs(roundedDate).isSameOrAfter(balance.date)); // finds balance object for the selected date or previous buisness date, if selected date doesn't exist\n balance = balanceObject ? currencyFormatter(balanceObject.balance) : balance; // if account history ends before other selected accounts, set balance as N/A.\n\n // adds up total balance at bottom of tooltip\n if (balance !== Overview.text_NA && balanceObject) {\n totalBalance += balanceObject.balance;\n }\n }\n\n return {\n displayName: `${beneFirstName} ${data.accountNumber}`,\n balance,\n };\n });\n\n // adds formatted total balance to bottom of tooltip\n selectedBalances.push({ displayName: Overview.lbl_total, balance: currencyFormatter(totalBalance) });\n\n const tooltipLeftPosition = moveTooltipToCenter ? mouseX - 50 : (moveTooltipToLeft ? mouseX - 200 : mouseX + 70);\n // on the tooltip, sets date on top, position of tooltip container\n // eslint-disable-next-line newline-per-chained-call\n const tooltipLine = tooltip.html(dayjs(roundedDate).format('LL')) // add 1 day is necessary, fixes the date coming back off by 1 day from xScale.invert call.\n .style('display', 'block')\n .style('left', `${tooltipLeftPosition}px`)\n .style('top', `${moveTooltipToCenter ? mouseY - 55 : mouseY - (10 + (10 * graphData.length))}px`) // updates the tooltip to go above mouse/finger touch, mainly to prevent issues if mouse is being used on a small screen\n .style('font-size', 8)\n .selectAll()\n .data(selectedBalances)\n .enter() // for each account, list out name, acct #, and balance for that date\n .append('div') // creates the tooltipLine container where each line data will be listed\n .attr('class', styles.tooltipLine);\n\n // adds legend circle\n tooltipLine.append('div').attr('class', styles.tooltipLegend)\n .append('svg')\n .style('width', '20px')\n .style('height', '20px')\n .append('circle')\n .attr('transform', 'translate( 10 10 )')\n .attr('r', 6)\n .style('fill', (d, i) => color(i))\n .style('display', (d, i) => i === selectedBalances.length - 1 ? 'none' : 'inline');\n\n // adds name and account number to tooltipLine\n tooltipLine.append('div').attr('class', styles.tooltipName)\n .html(d => d.displayName);\n // adds balance to tooltipLine\n tooltipLine.append('div').attr('class', styles.tooltipBalance)\n .html(d => d.balance);\n });\n }\n\n componentDidMount() {\n const useTransition = true;\n this.drawChart(useTransition);\n }\n\n componentDidUpdate({ size, graphData }) {\n const { size: { componentWidth, componentHeight }, } = this.props;\n if (size.componentWidth !== componentWidth || size.componentHeight !== componentHeight || !isEqual(graphData, this.props.graphData)) {\n this.setState({\n componentHeight,\n componentWidth,\n }, () => this.drawChart()); // redraws chart on resize or data change\n }\n }\n\n render() {\n const { isGraphFullscreen } = this.props;\n\n return (\n
\n \n
\n );\n }\n}\n\n\nexport default connect(null, {})(sizify(LanguageHOC(BalanceGraph)));\n","/*\n*\n* SkeletonLoader Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Skeleton } from '@mui/material';\nimport { Typography } from '@mui/material';\n\nexport class SkeletonLoader extends React.Component {\n\n static propTypes = {\n isLoading: PropTypes.bool,\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n variant: PropTypes.string,\n textVariant: PropTypes.string,\n skeletonProps: PropTypes.object,\n typographyProps: PropTypes.object,\n };\n\n render() {\n const { children, isLoading = true, height, width, textVariant, variant, skeletonProps, typographyProps, } = this.props;\n\n const skeleton = (\n \n
\n \n this.handleShowFilterList()}\n icon='filter_list'\n title={BalanceByDate.btn_filter}\n />\n \n this.handleShowFilterList()}\n value={selectedFilters}\n onChange={this.handleFilterSelect}\n multiple\n input={}\n >\n {filterList.map(filter => filter.listHeader\n ? {filter.listHeader} \n :\n \n {filter.label}\n \n )}\n \n \n
\n \n {\n this.setState({\n searchedAccountList,\n filteredAccountList: accountsByFilter(searchedAccountList, selectedFilters),\n searchIsActive,\n });\n }}\n hasSearchMenu={true}\n />\n
\n \n {filteredAccountList.map((account, index) => {\n const { balanceAsOfGivenDate, accountId, beneficiaryName, optionName, accountNumber, isInterestedParty } = account;\n const isLastAccount = index === filteredAccountList.length - 1;\n const displayedOptionName = isInterestedParty ? `${optionName} - ${AccountsSummary.head_interested_party}` : optionName;\n const balanceIsNA = balanceAsOfGivenDate === this.props.text.BalanceByDate.text_NA;\n\n return (\n \n \n \n \n
\n {!isLastAccount && \n
\n {beneficiaryName.toUpperCase()}
\n {displayedOptionName}
\n \n {accountNumber}\n
\n {balanceAsOfGivenDate}
\n \n
\n \n );\n }\n}\n\n\nexport default (LanguageHOC(BalanceByDate));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Modal,\n} from '@frontend/common';\n\nimport { thirdParyLinkClick, } from 'utils/ga/events';\n\nimport styles from './styles.module.scss';\n\nconst onThirdPartyURLClickHandler = (onClose, eventLabel, thirdPartyURL) => {\n thirdParyLinkClick(eventLabel);\n onClose();\n window.open(thirdPartyURL, '_blank', 'noopener,noreferrer');\n};\n\nexport function ThirdPartyWarningModal({\n open,\n onClose,\n thirdPartyURL,\n eventLabel,\n imageSrc,\n warningLanguage,\n footer,\n text: { Sidenav },\n isLoading,\n maxWidth\n}) {\n return (\n \n onThirdPartyURLClickHandler(onClose, eventLabel, thirdPartyURL),\n label: Sidenav.resources.btn_proceed,\n buttonType: 'contained'\n },\n ]}\n onCloseModal={onClose}\n show={open}\n title={Sidenav.resources.title_third_party_warning}\n maxWidth={maxWidth ? maxWidth : 'md'}\n includeLeftCancelBtn\n isLoading={isLoading}\n >\n {warningLanguage}\n {imageSrc && 
}\n {footer}\n \n
\n );\n}\n\nThirdPartyWarningModal.propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n eventLabel: PropTypes.string.isRequired,\n thirdPartyURL: PropTypes.string.isRequired,\n imageSrc: PropTypes.string,\n warningLanguage: PropTypes.string.isRequired,\n footer: PropTypes.string,\n text: PropTypes.shape({\n Sidenav: PropTypes.shape({\n btn_cancel: PropTypes.string,\n resources: PropTypes.shape({\n btn_proceed: PropTypes.string,\n title_third_party_warning: PropTypes.string,\n txt_third_party_warning_access_cards: PropTypes.string,\n }),\n text_timezone: PropTypes.string,\n }),\n }).isRequired,\n isLoading: PropTypes.bool,\n maxWidth: PropTypes.string,\n};\n\nexport default LanguageHOC(ThirdPartyWarningModal);\n","/*\n*\n* Overview Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { cloneDeep, debounce, } from 'lodash';\nimport dayjs from 'dayjs';\nimport * as validator from 'utils/helpers/form_validation';\n\nimport {\n Button,\n Chip,\n Icon,\n} from '@mui/material';\n\nimport {\n currencyFormatter,\n DatePicker,\n Dropdown,\n IconBtnTooltip,\n Modal,\n} from '@frontend/common';\n\nimport { getBalanceHistory, } from 'components/Features/protected/Accounts/actions';\nimport { TWO_FACTOR_STATUS } from 'components/AppRoot/Navigation/constants';\n\nimport BalanceGraph from './BalanceGraph';\nimport BalanceByDate from './BalanceByDate';\nimport ThirdPartyWarningModal from 'components/AppRoot/Navigation/Sidenav/ThirtPartyWarningModal';\nimport butterfly from './image/butterfly.svg';\n\nimport styles from './styles.module.scss';\nimport { mobileWidth } from 'utils/config/_sassconfig.scss';\nimport SkeletonLoader from 'utils/components/SkeletonLoader';\n\nconst selectAll = 'selectAll';\nconst warningTypes = {\n noActiveAccounts: 'noActiveAccounts',\n dataUnavailable: 'dataUnavailable',\n newAccount: 'newAccount',\n};\n\nexport class Overview extends React.Component {\n\n static propTypes = {\n accountList: PropTypes.array.isRequired,\n balanceHistory: PropTypes.array.isRequired,\n claims: PropTypes.object.isRequired,\n getBalanceHistory: PropTypes.func.isRequired,\n homeIsLoading: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n AccountsSummary: PropTypes.shape({\n head_interested_party: PropTypes.string,\n }),\n Overview: PropTypes.shape({\n err_date_past_today: PropTypes.string,\n err_end_before_start: PropTypes.string,\n err_start_after_end: PropTypes.string,\n lbl_bene_account: PropTypes.func,\n lbl_end_date: PropTypes.string,\n lbl_filter_1month: PropTypes.string,\n lbl_filter_3month: PropTypes.string,\n lbl_filter_6month: PropTypes.string,\n lbl_filter_YTD: PropTypes.string,\n lbl_filter_1year: PropTypes.string,\n lbl_filter_all: PropTypes.string,\n lbl_filter_custom: PropTypes.string,\n lbl_start_date: PropTypes.string,\n lbl_savings_calculator: PropTypes.string,\n text_all_selected: PropTypes.string,\n text_NA: PropTypes.string,\n text_no_open_accounts: PropTypes.string,\n text_oops: PropTypes.string,\n text_see_more: PropTypes.string,\n text_select_all: PropTypes.string,\n text_something_wrong: PropTypes.string,\n title_close_fullscreen: PropTypes.string,\n title_open_fullscreen: PropTypes.string,\n }),\n Sidenav: PropTypes.shape({\n resources: PropTypes.shape({\n txt_third_party_warning_for_info: PropTypes.string,\n }),\n }),\n }),\n }\n\n state = {\n dateFilters: [\n { label: this.props.text.Overview.lbl_filter_1month, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_3month, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_6month, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_YTD, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_1year, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_all, filterDate: '' },\n { label: this.props.text.Overview.lbl_filter_custom, filterDate: '' },\n ],\n activeGraphDateFilter: { label: this.props.text.Overview.lbl_filter_1year, filterDate: dayjs().subtract(1, 'year') },\n dashboardAccountList: [], // main balance history data\n dateFilteredDashboardAccountList: [], // all accounts balance history with filtered dates\n graphData: [{ name: '', accountBalanceHistory: [{ balance: 0, date: dayjs() }] }], // fully filtered data for graph\n isBalanceHistoryLoading: true,\n selectedAccounts: [],\n showCustomDatePickers: false,\n customFilterDates: { startDate: '', endDate: '' },\n formErrors: {},\n minMaxDates: { minDate: '', maxDate: '' },\n showBeneDropdown: false,\n isGraphFullscreen: false,\n hasPrecondition: false,\n warningType: '',\n thirdPartyWarningOn: false,\n }\n\n customDateHandle = e => {\n const { minDate, maxDate } = this.state.minMaxDates;\n const fieldName = e.target.name;\n let date = e.target.value;\n\n if (fieldName === 'startDate' && dayjs(date).isBefore(minDate, 'day')) {\n date = minDate;\n }\n if (fieldName === 'endDate' && dayjs(date).isAfter(maxDate, 'day')) {\n date = maxDate;\n }\n\n this.setState({\n customFilterDates: {\n ...this.state.customFilterDates,\n [fieldName]: date\n },\n formErrors: {\n ...this.state.formErrors,\n [fieldName]: '',\n }\n }, () => this.filterByCustomDates(fieldName));\n }\n\n accountSelect = (selections) => {\n const { dateFilteredDashboardAccountList, selectedAccounts } = this.state;\n let newSelections = [];\n let newGraphData = [];\n\n if (selections.length !== 0 || selectedAccounts.includes(selectAll)) { // only run, if selections exist or if selectAll was previously selected\n if (selections.includes(selectAll) && !selectedAccounts.includes(selectAll)) { // if select all is newly selected and currently not in selection, shows all accounts\n newSelections = [selectAll];\n newGraphData = dateFilteredDashboardAccountList; // sets the full list as graphData\n this.getMinMaxDates(newSelections);\n this.setState({ showBeneDropdown: false });\n }\n else if (selectedAccounts.includes(selectAll) && selections.length > 1) { // if select all is already selected and an account is selected, turns off select all and goes to single account\n const selectAllIndex = selections.indexOf(selectAll);\n selections.splice(selectAllIndex, 1);\n newSelections = selections;\n newGraphData = this.filterGraphData(newSelections);\n }\n else if (!selections.includes(selectAll) && selectedAccounts.includes(selectAll)) { // if select all is newly selected and currently in selection, defaults back to first account\n newSelections = [dateFilteredDashboardAccountList[0].accountNumber];\n newGraphData = this.filterGraphData(newSelections);\n }\n else { // normal, multiple selection\n newSelections = selections;\n newGraphData = this.filterGraphData(newSelections);\n }\n\n this.setState({ selectedAccounts: newSelections, graphData: newGraphData, });\n }\n }\n\n getMinMaxDates = selectedAccounts => {\n const { dashboardAccountList, } = this.state;\n const filteredDashboardAccountList = selectedAccounts.includes(selectAll) ? dashboardAccountList : dashboardAccountList.filter(account => selectedAccounts.includes(account.accountNumber));\n const minMaxDates = { minDate: '', maxDate: dayjs() };\n filteredDashboardAccountList.forEach(account => { // find max earliest and latest dates from selected accounts\n const earliestBalanceDate = account.accountBalanceHistory[0].date;\n const latestBalanceDate = account.accountBalanceHistory[account.accountBalanceHistory.length - 1].date;\n minMaxDates.minDate = !minMaxDates.minDate || dayjs(earliestBalanceDate).isBefore(minMaxDates.minDate, 'day') ? earliestBalanceDate : minMaxDates.minDate;\n minMaxDates.maxDate = latestBalanceDate;\n });\n const hasLimitedData = !filteredDashboardAccountList.some(account => account.accountBalanceHistory.length > 3);\n\n this.setState({ minMaxDates, warningType: hasLimitedData ? warningTypes.newAccount : '' });\n }\n\n filterGraphData = selectedAccounts => {\n if (selectedAccounts[0] !== selectAll) { // don't filter, if all accounts are selected\n this.getMinMaxDates(selectedAccounts);\n return this.state.dateFilteredDashboardAccountList.filter(account => selectedAccounts.includes(account.accountNumber));\n }\n else {\n return this.state.dateFilteredDashboardAccountList;\n }\n }\n\n filterByDateRange = dateFilter => {\n const { Overview } = this.props.text;\n const { dashboardAccountList, selectedAccounts, minMaxDates, } = this.state;\n let dateFilteredDashboardAccountList = this.state.dateFilteredDashboardAccountList;\n const customFilterDates = this.state.customFilterDates;\n const formErrors = this.state.formErrors;\n let runFilter = true;\n let showCustomDatePickers = false;\n\n if (dateFilter.label === Overview.lbl_filter_all) {\n dateFilteredDashboardAccountList = dashboardAccountList;\n customFilterDates.startDate = minMaxDates.minDate;\n customFilterDates.endDate = minMaxDates.maxDate;\n }\n else if (dateFilter.label === Overview.lbl_filter_custom) {\n formErrors.startDate = ''; // clear form errors\n formErrors.endDate = '';\n showCustomDatePickers = true; // show date pickers for custom range\n runFilter = false; // Custom filter will run when two valid dates are entered\n }\n else { // uses one of the set date ranges\n dateFilteredDashboardAccountList = dashboardAccountList.map(account => ({\n ...account,\n accountBalanceHistory: account.accountBalanceHistory.filter(balance => dayjs(balance.date).isSameOrAfter(dateFilter.filterDate, 'day')),\n }));\n customFilterDates.startDate = dateFilter.filterDate;\n customFilterDates.endDate = minMaxDates.maxDate;\n }\n\n this.setState({\n activeGraphDateFilter: dateFilter,\n customFilterDates,\n dateFilteredDashboardAccountList,\n showCustomDatePickers,\n formErrors,\n }, () => (\n runFilter && this.setState({ graphData: this.filterGraphData(selectedAccounts) }))\n );\n }\n\n filterByCustomDates = fieldName => {\n const { dashboardAccountList, customFilterDates, selectedAccounts, } = this.state;\n\n if (this.formValidate(fieldName)) {\n let dateFilteredDashboardAccountList = this.state.dateFilteredDashboardAccountList; // default to main dashboard list, if dates are removed\n if (customFilterDates.startDate && customFilterDates.endDate) { // if both dates are provided, then get filtered transactions\n dateFilteredDashboardAccountList = dashboardAccountList.map(account => ({\n ...account,\n accountBalanceHistory: account.accountBalanceHistory.filter(balance => (\n dayjs(balance.date).isSameOrAfter(customFilterDates.startDate, 'day') && dayjs(balance.date).isSameOrBefore(customFilterDates.endDate, 'day'))\n ),\n }));\n }\n this.setState({ dateFilteredDashboardAccountList, }, () => this.setState({ graphData: this.filterGraphData(selectedAccounts) }));\n }\n }\n\n formValidate = (fieldName) => {\n const { Overview } = this.props.text;\n const { startDate, endDate } = this.state.customFilterDates;\n const formErrors = {};\n\n // startDate validation\n formErrors.startDate = validator.calendarValidator(startDate);\n if (dayjs(startDate).isAfter(dayjs(), 'day')) {\n formErrors.startDate = Overview.err_date_past_today;\n }\n if (dayjs(startDate).isAfter(dayjs(endDate), 'day') && fieldName === 'startDate') {\n formErrors.startDate = Overview.err_start_after_end;\n }\n\n // endDate validation\n formErrors.endDate = validator.calendarValidator(endDate);\n if (dayjs(endDate).isBefore(dayjs(startDate), 'day') && fieldName === 'endDate') {\n formErrors.endDate = Overview.err_end_before_start;\n }\n\n // if both dates are blank, empty out errors\n if (!startDate && !endDate) {\n formErrors.startDate = '';\n formErrors.endDate = '';\n }\n\n this.setState({ formErrors });\n const hasErrors = Object.keys(formErrors).some(field => formErrors[field] !== '');\n\n return !hasErrors;\n }\n\n renderWarningDisplay = () => {\n const { Overview, } = this.props.text;\n const { warningType } = this.state;\n let message;\n\n switch (warningType) {\n case warningTypes.noActiveAccounts:\n message = [\n {Overview.text_no_open_accounts}
,\n ];\n break;\n\n case warningTypes.dataUnavailable:\n message = [\n{Overview.text_oops}
,\n {Overview.text_something_wrong}
\n ];\n break;\n\n case warningTypes.newAccount:\n message = [\n{Overview.text_see_more}
,\n ];\n break;\n\n default: break;\n }\n\n return (\n\n 
\n {message}\n
\n );\n }\n\n renderSelectionAccount = account => {\n const displayedOptionName = account.isInterestedParty ? `${account.optionName} - ${this.props.text.AccountsSummary.head_interested_party}` : account.optionName;\n\n return (\n \n
\n );\n }\n\n renderDateFilterChips = () => {\n const { Overview } = this.props.text;\n const { dateFilters, activeGraphDateFilter, showCustomDatePickers, customFilterDates, formErrors, minMaxDates } = this.state;\n\n return (\n {account.beneficiaryName.toUpperCase()}
\n {displayedOptionName}
\n {account.accountNumber}
\n \n
\n );\n }\n\n renderBalanceOverTime = () => {\n const { Overview } = this.props.text;\n const { selectedAccounts, dashboardAccountList, graphData, showBeneDropdown, isGraphFullscreen, activeGraphDateFilter, warningType, isBalanceHistoryLoading, } = this.state;\n const isNotMobileView = window.innerWidth > parseInt(mobileWidth);\n const multipleSelected = selectedAccounts.length > 1 || selectedAccounts.includes(selectAll);\n\n const selectedProps = {\n renderValue: (selected) => {\n const isSelectAll = selected.includes(selectAll);\n const selectedAccount = dashboardAccountList.find(account => account.accountNumber === selected[0]);\n const selections = isSelectAll ? [Overview.text_all_selected.toUpperCase()] : selected; // if select all, render Selected All text, otherwise use list of accountNumbers\n\n return selections.length !== 1 || isSelectAll\n ? {selections.join(', ')}\n : (\n this.renderSelectionAccount(selectedAccount)\n );\n },\n open: showBeneDropdown,\n onClose: () => this.setState({ showBeneDropdown: false }),\n SelectDisplayProps: { onClick: () => this.setState({ showBeneDropdown: !showBeneDropdown }) },\n disabled: isBalanceHistoryLoading,\n };\n\n return (\n <>\n \n {dateFilters.map(dateFilter => {\n const isActiveChip = activeGraphDateFilter.label === dateFilter.label;\n const isSpecialFilter = dateFilter.label === Overview.lbl_filter_custom || dateFilter.label === Overview.lbl_filter_all; // checks if it is custom or all filter\n const isDisabled = !isSpecialFilter ? !dayjs(minMaxDates.minDate).isSameOrBefore(dateFilter.filterDate, 'day') : false; // if not a special filter, check if oldest balance date is past the set filter date\n\n return (\n this.filterByDateRange(dateFilter)}\n style={{ margin: '2px 5px 2px 0', }}\n variant='filled'\n />\n );\n })}\n
\n {showCustomDatePickers &&\n \n
}\n \n this.customDateHandle({ target: { name: 'startDate', value, } }), 500)}\n openTo='year'\n value={customFilterDates.startDate || null}\n />\n
\n \n this.customDateHandle({ target: { name: 'endDate', value, } }), 500)}\n openTo='year'\n value={customFilterDates.endDate || null}\n />\n
\n \n
\n \n
\n\n \n \n this.accountSelect(value)}\n options={[\n {\n value: selectAll,\n display: Overview.text_select_all.toUpperCase(),\n props: { style: selectedAccounts.includes(selectAll) ? { color: 'var(--primary)', fontWeight: 'bold', } : {} }\n },\n ...dashboardAccountList.map(account => ({\n value: account.accountNumber,\n display: this.renderSelectionAccount(account),\n props: { style: selectedAccounts.includes(account.accountNumber) ? { color: 'var(--primary)', fontWeight: 'bold', } : {} }\n }))\n ]}\n multiple={true}\n SelectProps={selectedProps}\n FormControlProps={{ variant: 'filled', disabled: isBalanceHistoryLoading, }}\n />\n \n
\n \n calculate}\n onClick={() => this.setState({ thirdPartyWarningOn: true })}\n >\n {Overview.lbl_savings_calculator}\n \n
\n \n {(!isGraphFullscreen && isNotMobileView && !warningType && !isBalanceHistoryLoading) &&\n this.setState({ isGraphFullscreen: true })}\n title={Overview.title_open_fullscreen}\n />}\n
\n \n
\n {this.renderDateFilterChips()}\n \n }\n \n
\n )}\n\n {!warningType && isGraphFullscreen &&\n \n {warningType === warningTypes.dataUnavailable ? this.renderWarningDisplay() : !isGraphFullscreen && this.renderBalanceOverTime()}\n
\n \n
\n \n {this.renderBalanceOverTime()}\n
\n }\n\n \n
\n );\n }\n}\n\n\nexport default withRouter(LanguageHOC(AccessCardBanner));","import React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport { IconBtnTooltip, } from '@frontend/common';\n\nimport {\n Button,\n Icon\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nexport const PaperlessBanner = ({ show, history, text: { MyInfo }, onCloseBanner }) => {\n return (\n show &&\n \n history.push(Payments.nav_path)}\n />\n
\n \n {\n event.stopPropagation();\n onCloseBanner();\n }}\n onFocus={event => event.stopPropagation()}\n />\n
\n \n
\n );\n};\n\nPaperlessBanner.propTypes = {\n show: PropTypes.bool,\n history: PropTypes.object.isRequired,\n text: PropTypes.shape({\n MyInfo: PropTypes.object.isRequired\n }).isRequired,\n onCloseBanner: PropTypes.func.isRequired,\n};\n\nexport default withRouter(LanguageHOC(PaperlessBanner));","/*\n*\n* Home Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { isEmpty } from 'lodash';\nimport { greetingGenerator } from 'utils/helpers/greeting_generator';\nimport {\n getAccounts,\n getAccountsSummary,\n} from 'components/Features/protected/Accounts/actions';\nimport {\n get2FAPrecondition,\n getRSAPrecondition,\n getNotifications,\n saveUserPreferences,\n} from 'components/AppRoot/Navigation/actions';\nimport { agentGet, getStatementDeliveryMethods } from 'components/Features/protected/MyInfo/actions';\nimport { getPreferredMethod } from 'components/Features/protected/Multifactor/actions';\nimport { getPredefinedOptions } from 'components/Features/protected/Accounts/Transactions/OptionChanges/actions';\nimport {\n Accordion,\n AccordionSummary,\n AccordionDetails,\n Icon,\n} from '@mui/material';\nimport { withStyles, } from '@mui/styles';\nimport {\n IconBtnTooltip,\n LoadingOverlay,\n sizify,\n} from '@frontend/common';\nimport { TWO_FACTOR_STATUS } from 'components/AppRoot/Navigation/constants';\nimport { MAIL } from 'components/Features/protected/MyInfo/constants';\nimport Overview from './Overview';\nimport AccessCardBanner from './AccessCardBanner';\nimport PaperlessBanner from './PaperlessBanner';\nimport AccountsSummary from 'components/Features/protected/Accounts/AccountsSummary';\nimport Banner from 'components/Features/Banner';\n\nimport UpcomingSchedules from 'components/Features/protected/TransactionsHub/UpcomingSchedules';\nimport TransactionHistory from 'components/Features/protected/TransactionsHub/TransactionHistory';\n\nimport { BANNER_LOCATIONS } from 'components/AppRoot/StaticResources/constants';\nimport { mobileWidth } from 'utils/config/_sassconfig.scss';\nimport styles from './styles.module.scss';\n\nconst expansionPanelBar = {\n background: '#F5F5F5',\n borderRadius: 3,\n border: 0,\n color: 'white',\n height: 48,\n padding: '0 30px',\n boxShadow: 'none',\n};\n\nconst muiStyles = () => ({\n expansionPanelBody: {\n background: '#F5F5F5',\n boxShadow: 'none',\n },\n expansionPanelBar,\n expansionPanelBarSmallScreen: {\n ...expansionPanelBar,\n height: 125\n }\n});\n\nconst select = (state) => ({\n accountList: state.accounts.accountList.map(account => ({\n ...account,\n accountId: account.accountId,\n accountGroupId: account.accountGroupId,\n beneficiaryName: account.beneficiary.name,\n totalValue: account.totalValue,\n accountNumber: account.accountNumber,\n accountType: account.accountType,\n optionName: account.option.name,\n accountBalanceHistory: [\n { // only added for loading purposes of balance history\n balance: 0,\n date: new Date(),\n }\n ],\n })),\n balanceHistory: state.accounts.balanceHistory,\n userDetails: state.session.userDetails,\n is2FADialogOpen: state.session.is2FADialogOpen,\n claims: state.session.claims,\n isAgent_AccessRole: state.session.isAgent_AccessRole,\n preferredInfo: state.multifactor.preferredInfo,\n accessCardBannerPreference: state.session.userPreferences.find(pref => pref.Identifier === 'ShowAccessCardBanner') || {},\n paperlessBannerPreference: state.session.userPreferences.find(pref => pref.Identifier === 'ShowPaperlessBanner') || {},\n webMessages: state.static.webMessages,\n agent: state.myInfo.agent,\n DeliveryMethods: state.myInfo.DeliveryMethods,\n});\n\nexport class Home extends React.Component {\n\n static propTypes = {\n accountList: PropTypes.arrayOf(\n PropTypes.shape({\n accountId: PropTypes.number,\n accountGroupId: PropTypes.number,\n accountIsClosed: PropTypes.bool,\n beneficiaryName: PropTypes.string,\n totalValue: PropTypes.string,\n accountNumber: PropTypes.number,\n accountType: PropTypes.string,\n optionName: PropTypes.string,\n taxableEntityProgramAccountId: PropTypes.number,\n })\n ).isRequired,\n balanceHistory: PropTypes.array,\n classes: PropTypes.object.isRequired,\n getAccounts: PropTypes.func.isRequired,\n getAccountsSummary: PropTypes.func.isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n getNotifications: PropTypes.func.isRequired,\n saveUserPreferences: PropTypes.func.isRequired,\n agentGet: PropTypes.func.isRequired,\n getPredefinedOptions: PropTypes.func.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n isAgent_AccessRole: PropTypes.bool.isRequired,\n claims: PropTypes.object.isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number,\n }).isRequired,\n text: PropTypes.shape({\n AccountDetails: PropTypes.shape({ nav_path: PropTypes.func }),\n Home: PropTypes.shape({\n btn_list_view: PropTypes.string,\n btn_tile_view: PropTypes.string,\n head_account_agent: PropTypes.string,\n head_accounts: PropTypes.string,\n head_email: PropTypes.string,\n head_overview: PropTypes.string,\n }),\n }).isRequired,\n userDetails: PropTypes.shape({\n name: PropTypes.string,\n email: PropTypes.string,\n }).isRequired,\n is2FADialogOpen: PropTypes.bool.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n accessCardBannerPreference: PropTypes.shape({ UserId: PropTypes.number, Identifier: PropTypes.string, Value: PropTypes.bool }).isRequired,\n paperlessBannerPreference: PropTypes.shape({ UserId: PropTypes.number, Identifier: PropTypes.string, Value: PropTypes.bool }).isRequired,\n webMessages: PropTypes.object.isRequired,\n agent: PropTypes.shape({\n OfficialCommunications: PropTypes.string,\n Newsletter: PropTypes.string,\n TaxForms: PropTypes.string,\n }).isRequired,\n DeliveryMethods: PropTypes.array,\n getStatementDeliveryMethods: PropTypes.func.isRequired,\n };\n\n state = {\n isTileView: false,\n loading: false,\n overviewIsExpanded: true,\n transactionsIsExpanded: true,\n greeting: '',\n hasCalledAccounts: false,\n userCookieIsSet: false,\n };\n\n isNotPaperless = (officialCommunications, newsletter, taxForms, deliveryMethods) => {\n // required data were not received\n if (!officialCommunications || !newsletter || !taxForms || !deliveryMethods) {\n return false;\n }\n // some of the agent's setting are not online only\n if (officialCommunications === MAIL || newsletter === MAIL || taxForms === MAIL) {\n return true;\n }\n // some of the bene's delivery method is not online only\n return Boolean(deliveryMethods.find(method => method.DeliveryMethod === MAIL));\n }\n\n accountsGet = () => {\n this.props.accountList.length === 0 && this.setState({ loading: true });\n // to find out if it was resolved in componentDidMount\n return this.props.getAccounts()\n .then(() => {\n const promises = [\n this.props.getAccountsSummary(),\n this.props.getNotifications(),\n this.props.getPredefinedOptions(),\n ];\n this.props.claims.AgentId && promises.push(this.props.agentGet());\n // returning all promises in order to chain it\n return Promise.all(promises);\n })\n .finally(() => this.setState({ loading: false }));\n }\n\n componentDidMount() {\n const isMobile = this.props.size.windowWidth < parseInt(mobileWidth);\n const setStateOnMount = () => this.setState({\n isTileView: isMobile,\n overviewIsExpanded: !isMobile, // collapse overview section when on mobile phone\n transactionsIsExpanded: !isMobile,\n greeting: `${greetingGenerator()}, ${this.props.userDetails.name}`,\n });\n\n if (this.props.claims.AccountBlocked !== 'True' && this.props.accountList.length === 0) {\n this.setState(\n { hasCalledAccounts: true },\n () => {\n this.accountsGet().then(() => setStateOnMount());\n // data for paperless banner\n if (this.props.DeliveryMethods.length === 0) {\n this.props.getStatementDeliveryMethods();\n }\n }\n );\n }\n else {\n setStateOnMount();\n }\n\n if (isEmpty(this.props.preferredInfo)) {\n this.props.getPreferredMethod();\n }\n\n // default isActiveAgent cookie to false\n document.cookie = 'isActiveAgent=false';\n }\n\n componentDidUpdate({ size }) {\n const { size: { windowWidth }, accountList, isAgent_AccessRole } = this.props;\n const { userCookieIsSet } = this.state;\n\n if (size.windowWidth !== windowWidth) {\n this.setState({\n isTileView: windowWidth < parseInt(mobileWidth) ? true : this.state.isTileView,\n });\n }\n\n const { TwoFactorAuthentication, AccountBlocked } = this.props.claims;\n if (AccountBlocked === 'False'\n && TwoFactorAuthentication !== TWO_FACTOR_STATUS.PENDING\n && !this.state.hasCalledAccounts\n && this.props.accountList.length === 0) {\n this.setState({ hasCalledAccounts: true }, () => {\n // 2FA should be finished here\n this.accountsGet();\n // data for paperless banner\n if (this.props.DeliveryMethods.length === 0) {\n this.props.getStatementDeliveryMethods();\n }\n });\n }\n\n // if user is both an agent and has an open Individual account, set isActiveAgent cookie to true\n // should exclude all CSA accounts\n // this cookie is used in the Qualtrics logic to display a survey to specific users\n if (isAgent_AccessRole && !userCookieIsSet && accountList.length > 0) {\n const hasActiveIndividualAccount = accountList.some(account => !account.accountIsClosed && account.accountType === 'Individual' && account.taxableEntityProgramAccountId === 0);\n this.setState({ userCookieIsSet: true });\n if (hasActiveIndividualAccount) document.cookie = 'isActiveAgent=true';\n }\n }\n\n render() {\n const {\n classes, size: { windowWidth }, text: { Home }, userDetails, accountList,\n balanceHistory, claims, accessCardBannerPreference, saveUserPreferences,\n webMessages,\n paperlessBannerPreference,\n agent: {\n OfficialCommunications,\n Newsletter,\n TaxForms,\n },\n DeliveryMethods\n } = this.props;\n\n const { isTileView, loading, overviewIsExpanded, transactionsIsExpanded, greeting } = this.state;\n\n return (\n \n
\n \n settings \n {MyInfo.label_paperless}|{MyInfo.msg_paperless}\n
\n \n history.push(MyInfo.nav_path)}\n >\n {MyInfo.nav_title}\n \n
\n \n {\n event.stopPropagation();\n onCloseBanner();\n }}\n onFocus={event => event.stopPropagation()}\n />\n
\n \n saveUserPreferences({\n Identifier: paperlessBannerPreference.Identifier,\n UserId: paperlessBannerPreference.UserId,\n Value: false\n })}\n />\n \n \n
\n );\n }\n}\n\n\nexport default withStyles(muiStyles)(connect(select, {\n get2FAPrecondition,\n getAccounts,\n agentGet,\n getAccountsSummary,\n getNotifications,\n getPredefinedOptions,\n getPreferredMethod,\n getRSAPrecondition,\n saveUserPreferences,\n getStatementDeliveryMethods\n})(sizify(LanguageHOC(Home))));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { IconBtnTooltip } from '@frontend/common';\nimport {\n Drawer,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nexport function LearnMoreDrawer({ open, onClose, text: { Lpoa } }) {\n\n return (\n \n this.setState({ overviewIsExpanded: !overviewIsExpanded })}\n >\n expand_less}\n id='account-agent-header'\n >\n \n \n \n\n saveUserPreferences({\n Identifier: accessCardBannerPreference.Identifier,\n UserId: accessCardBannerPreference.UserId,\n Value: false\n })}\n size={this.props.size}\n />\n\n
\n \n
\n \n {greeting}
\n {Home.head_overview}
\n {userDetails.email}
\n \n
\n\n \n
\n {Home.head_accounts}
\n\n {\n this.setState({ isTileView: !isTileView });\n event.stopPropagation();\n }}\n onFocus={event => event.stopPropagation()}\n title={isTileView ? Home.btn_list_view : Home.btn_tile_view}\n />\n
\n \n
\n\n \n this.setState({ transactionsIsExpanded: !transactionsIsExpanded })}\n >\n expand_less}\n id='transaction-agent-header'\n >\n Transactions\n \n\n {accountList && accountList.length > 0 &&\n \n \n }\n\n \n
\n\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
{Lpoa.learn_more_title}
\n\n {Lpoa.text_learn_more}\n
\n \n
\n );\n });\n\n return (\n \n
\n \n
\n \n
\n {bene.BeneficiaryName}
\n\n \n
\n {bene.PoaLevel === 0 ? text_disabled : bene.PoaLevel}
\n\n \n
\n {bene.FederalTaxDocs ? text_yes : text_no}
\n\n \n
\n {bene.StateTaxDocs ? text_yes : text_no}
\n\n
\n );\n }\n}\n\n\nexport default LanguageHOC(BeneTable);\n","/*\n *\n * LpoaStepper Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Stepper,\n Step,\n StepLabel,\n StepButton,\n Button,\n} from '@mui/material';\nimport {\n LoadingOverlay,\n Card,\n} from '@frontend/common';\n\nimport { sizify } from '@frontend/common';\n\nimport styles from './styles.module.scss';\nimport { desktopWidth } from 'utils/config/_sassconfig.scss';\n\nexport class LpoaStepper extends React.Component {\n static propTypes = {\n loading: PropTypes.bool.isRequired,\n onCancel: PropTypes.func.isRequired,\n clearStepError: PropTypes.bool.isRequired,\n verifyStep: PropTypes.func.isRequired,\n renderStepComponent: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n stepLabels: PropTypes.arrayOf(PropTypes.string).isRequired,\n submitStep: PropTypes.number.isRequired,\n clearStepErrors: PropTypes.func.isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number.isRequired,\n }).isRequired,\n history: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Lpoa: PropTypes.shape({\n btn_agree: PropTypes.string,\n btn_back: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_finish: PropTypes.string,\n btn_next: PropTypes.string,\n btn_print: PropTypes.string,\n }),\n })\n };\n\n state = {\n step: 0,\n stepHasError: false,\n completed: {},\n stepsDisabled: false,\n };\n\n isFirstStep = () => {\n return this.state.step === 0;\n };\n\n isLastStep = () => {\n return this.state.step === this.props.stepLabels.length - 1;\n };\n\n completedSteps = () => {\n return Object.keys(this.state.completed).length;\n };\n\n setStep = step => () => {\n if (this.state.completed[step]) this.setState({ step });\n };\n\n handleBack = () => {\n this.props.clearStepErrors();\n if (!this.isFirstStep()) this.setState(({ step }) => ({ step: step - 1 }));\n };\n\n handleNext = () => {\n const { verifyStep } = this.props;\n\n const stepHasError = verifyStep(this.state.step);\n this.setState({ stepHasError });\n\n if (!stepHasError) {\n if (!this.isLastStep()) {\n const newCompleted = this.state.completed;\n newCompleted[this.state.step] = true;\n this.setState(({ step }) => ({\n step: step + 1,\n completed: newCompleted\n }));\n }\n }\n };\n\n getCompletedStepsToThisStep(step, completed, isCompleted) {\n for (let i = 0; i <= step; i++) {\n completed[i] = isCompleted;\n }\n return completed;\n }\n\n handleSubmit = () => {\n const { verifyStep, handleSubmit } = this.props;\n\n const stepHasError = verifyStep(this.state.step);\n this.setState({ stepHasError });\n\n if (!stepHasError) {\n handleSubmit();\n }\n }\n\n renderButtons = () => {\n const {\n submitStep,\n text: {\n Lpoa: {\n btn_agree,\n btn_back,\n btn_cancel,\n btn_next,\n }\n },\n loading,\n onCancel,\n } = this.props; //terms checked left as true, unless passed in props.\n const { step } = this.state;\n const cancelButton = (\n \n
\n\n \n \n
\n {renderNavigationButton(btn_unlink, setOpenConfirmModalUnlinkLpoa, 'contained')}\n {PoaName}
\n\n \n \n \n \n
\n {table_title}
\n \n
\n\n {results}\n {btn_add_edit_help_txt}
\n \n
\n \n 0 && numSelected < rowCount}\n checked={rowCount > 0 && numSelected === rowCount}\n />\n
\n {renderNavigationButton(btn_add_edit, editSelectedBenesHandler, 'contained', noSelection)}\n {renderNavigationButton(btn_revoke, setOpenConfirmModalRevokeBene, 'text', disableRevoke || noSelection)}\n \n
\n );\n }\n}\n\nexport default withRouter(sizify(LanguageHOC(LpoaStepper)));\n","/*\n*\n* Lpoa Constants\n*\n*/\nexport const CHECK_AUTH_CODE = 'src/components/Features/protected/Lpoa/CHECK_AUTH_CODE';\nexport const GET_LPOA = 'src/components/Features/protected/Lpoa/GET_LPOA';\nexport const POST_LPOA = 'src/components/Features/protected/Lpoa/POST_LPOA';\nexport const DELETE_LPOA = 'src/components/Features/protected/Lpoa/DELETE_LPOA';\n\nexport const INVALID_AUTH_CODE = 'Code is invalid';\n","/*\n*\n* EditLpoa Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n IconBtnTooltip,\n InfoIcon,\n notificationShow\n} from '@frontend/common';\n\nimport {\n Checkbox,\n FormControlLabel,\n FormHelperText,\n Radio,\n} from '@mui/material';\n\nimport LpoaStepper from './LpoaStepper';\n\nimport { postLpoa } from '../actions';\n\nimport styles from './styles.module.scss';\n\nconst select = () => ({});\n\nexport class EditLpoa extends React.Component {\n\n static propTypes = {\n selectedBeneIds: PropTypes.arrayOf(PropTypes.number).isRequired,\n lpoa: PropTypes.shape({\n PoaCode: PropTypes.string.isRequired,\n PoaName: PropTypes.string.isRequired,\n AgentId: PropTypes.number.isRequired,\n BeneficiaryInfo: PropTypes.arrayOf(PropTypes.shape({\n BeneficiaryId: PropTypes.number.isRequired,\n BeneficiaryName: PropTypes.string.isRequired,\n PoaLevel: PropTypes.number.isRequired,\n FederalTaxDocs: PropTypes.bool.isRequired,\n StateTaxDocs: PropTypes.bool.isRequired,\n }).isRequired),\n }).isRequired,\n text: PropTypes.shape({\n Lpoa: PropTypes.object.isRequired,\n }).isRequired,\n postLpoa: PropTypes.func.isRequired,\n goBackToLpoaTableAndRefreshLpoa: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n }\n\n state = {\n loading: false,\n selectedPoaLevel: '',\n selectedPoaLevelError: '',\n selectedFedTaxDocs: false,\n selectedStateTaxDocs: false,\n termsChecked: false,\n termsCheckedError: '',\n clearStepError: false,\n }\n\n clearStepErrors = () => {\n this.setState({\n selectedPoaLevelError: '',\n termsCheckedError: '',\n clearStepError: true,\n });\n }\n\n formValidate = (step) => {\n const {\n text: {\n Lpoa: {\n errors: {\n missing_lpoa_level,\n missing_terms_checked,\n },\n }\n }\n } = this.props;\n\n const { selectedPoaLevel, termsChecked } = this.state;\n\n let selectedPoaLevelError = '';\n let termsCheckedError = '';\n\n switch (step) {\n case 0:\n if (selectedPoaLevel === '')\n selectedPoaLevelError = missing_lpoa_level;\n break;\n case 1:\n if (!termsChecked)\n termsCheckedError = missing_terms_checked;\n break;\n default:\n // something wrong do nothing\n }\n\n const stepHasError = Boolean(selectedPoaLevelError) || Boolean(termsCheckedError);\n\n this.setState({\n selectedPoaLevelError,\n termsCheckedError,\n clearStepError: !stepHasError,\n });\n\n return stepHasError;\n }\n\n levelSelectionHandler = (e) => {\n this.setState({\n selectedPoaLevel: parseInt(e.target.value),\n });\n this.clearStepErrors();\n }\n\n onFedTaxDocsClickHandler = () => {\n const selectedFedTaxDocs = !this.state.selectedFedTaxDocs;\n this.setState({ selectedFedTaxDocs });\n }\n\n onStateTaxDocsClickHandler = () => {\n const selectedStateTaxDocs = !this.state.selectedStateTaxDocs;\n this.setState({ selectedStateTaxDocs });\n }\n\n onTermsCheckHandler = () => {\n const termsChecked = !this.state.termsChecked;\n this.setState({ termsChecked });\n this.clearStepErrors();\n }\n\n onSubmitHandler = () => {\n const { selectedBeneIds, lpoa, postLpoa, goBackToLpoaTableAndRefreshLpoa, text: { Lpoa } } = this.props;\n const { selectedPoaLevel, selectedFedTaxDocs, selectedStateTaxDocs } = this.state;\n\n const updatedBeneficiaryInfo = lpoa.BeneficiaryInfo\n .filter(bene => selectedBeneIds.includes(bene.BeneficiaryId))\n .map(bene => ({\n BeneficiaryId: bene.BeneficiaryId,\n BeneficiaryName: bene.BeneficiaryName,\n PoaLevel: selectedPoaLevel,\n FederalTaxDocs: !selectedFedTaxDocs, // we want reversed for disallowing\n StateTaxDocs: !selectedStateTaxDocs, // we want reversed for disallowing\n }));\n\n const updatedLpoaBody = {\n PoaCode: lpoa.PoaCode,\n AgentId: lpoa.AgentId,\n BeneficiaryInfo: updatedBeneficiaryInfo,\n };\n\n this.setState({ loading: true });\n return postLpoa(updatedLpoaBody)\n .finally(() => {\n this.setState({ loading: false });\n this.props.notificationShow(Lpoa.success_lpoa_updated, 'success');\n goBackToLpoaTableAndRefreshLpoa();\n });\n }\n\n renderStepComponent = step => {\n const { lpoa, text: { Lpoa }, selectedBeneIds } = this.props;\n const {\n selectedPoaLevelError,\n termsCheckedError,\n selectedPoaLevel,\n selectedFedTaxDocs,\n selectedStateTaxDocs,\n termsChecked,\n } = this.state;\n\n let stepComponent;\n switch (step) {\n case 0:\n stepComponent = () => (\n \n \n \n
\n\n \n \n {stepLabels.map((label, index) => (\n \n \n \n {label}\n \n \n \n ))}\n \n
\n \n {renderStepComponent(step)}\n
\n\n \n {this.renderButtons()}\n
\n \n \n {selectedPoaLevelError}\n \n\n
\n
\n );\n break;\n\n case 1: {\n const beneListFormatted = selectedBeneIds\n .map(beneId => {\n const bene = lpoa.BeneficiaryInfo.find(bene => bene.BeneficiaryId === beneId);\n return (\n \n
\n {Lpoa.edit_level_table.title}
\n{Lpoa.edit_level_table.lpoa_name_label}
\n{lpoa.PoaName}
\n {/* make sure the table scrolls horizontally in mobile */}\n \n \n
\n
\n\n | {Lpoa.edit_level_table.column_titles[0]} | \n{Lpoa.edit_level_table.column_titles[1]} | \n{Lpoa.edit_level_table.span_column_3_4_5_6_title} | \n|||
| {Lpoa.edit_level_table.column_titles[2]} | \n{Lpoa.edit_level_table.column_titles[3]} | \n{Lpoa.edit_level_table.column_titles[4]} | \n{Lpoa.edit_level_table.column_titles[5]} | \n||
| \n | \n {Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n{Lpoa.text_no} | \n
| \n | \n {Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_no} | \n
| \n | \n {Lpoa.edit_level_table.online_phone_text} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n{Lpoa.text_yes} | \n\n {Lpoa.text_yes}\n | \n
\n {Lpoa.edit_tax_docs.label}\n
\n \n
\n \n
\n \n {Lpoa.fed_tax_docs_body()}\n
\n \n
\n
\n \n
\n \n {Lpoa.state_tax_docs_body()}\n
\n \n
\n );\n break;\n }\n\n\n default:\n stepComponent = () => \n window.print()}\n />\n
\n \n
\n {Lpoa.review_title}
\n {Lpoa.review_details(lpoa.PoaName, selectedPoaLevel, beneListFormatted, allowFedTax, allowStateTax)}\n{Lpoa.terms_and_conditions_title}
\n {Lpoa.terms_and_conditions_body(lpoa.PoaName)}\n\n \n {termsCheckedError}\n \n
\n Step does not exist
;\n }\n\n return stepComponent();\n }\n\n render() {\n const { goBackToLpoaTableAndRefreshLpoa, text: { Lpoa } } = this.props; // no need to refresh the lpoa\n const { loading, clearStepError } = this.state;\n\n return (\n \n this.formValidate(step)}\n renderStepComponent={(step) => this.renderStepComponent(step)}\n handleSubmit={this.onSubmitHandler}\n stepLabels={Lpoa.edit_lpoa_step_labels}\n loading={loading}\n submitStep={1}\n onCancel={() => goBackToLpoaTableAndRefreshLpoa(false)}\n />\n
\n );\n }\n}\n\n\nexport default connect(select, {\n postLpoa,\n notificationShow,\n})(LanguageHOC(EditLpoa));\n","/*\n*\n* Lpoa Actions\n*\n*/\nimport {\n DELETErequest,\n GETrequest,\n POSTrequest,\n} from 'utils/helpers/api_handler';\n\nimport {\n CHECK_AUTH_CODE,\n GET_LPOA,\n POST_LPOA,\n DELETE_LPOA,\n} from './constants';\n\n\nexport function checkAuthCode(authCode) {\n const response = GETrequest(`/lpoa/CheckAuthCode?code=${authCode}`);\n // if success returns LPOA name otherwise text \"Code is invalid\"\n return {\n type: CHECK_AUTH_CODE,\n payload: response,\n };\n}\n\nexport function getLpoa(includeUnassigned = true) {\n const response = GETrequest(`/lpoa?includeUnassigned=${includeUnassigned}`);\n return {\n type: GET_LPOA,\n payload: response,\n };\n}\n\nexport function postLpoa(body) {\n // this will be used for both add and update lpoa\n const response = POSTrequest('/lpoa', body);\n return {\n type: POST_LPOA,\n payload: response,\n };\n}\n\nexport function deleteLpoa(beneIds) {\n const config = { data: { BeneficiaryIds: beneIds } }; // this is the required config syntaxt for passing json body\n const response = DELETErequest('/lpoa', config);\n return {\n type: DELETE_LPOA,\n payload: response,\n };\n}\n\n","/*\n*\n* Lpoa Component\n*\n*/\nimport React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport LearnMore from './LearnMore';\nimport BeneTable from './BeneTable';\nimport EditLpoa from './EditLpoa';\n\nimport {\n CardAligned,\n LoadingOverlay,\n} from '@frontend/common';\n\nimport {\n Button,\n TextField,\n} from '@mui/material';\n\nimport {\n checkAuthCode,\n getLpoa,\n deleteLpoa,\n} from './actions';\n\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\nimport { protectAction } from 'utils/helpers/multifactor_handler';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\n\nimport {\n INVALID_AUTH_CODE,\n} from './constants';\n\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n claims: state.session.claims\n});\n\nexport class Lpoa extends React.Component {\n static propTypes = {\n checkAuthCode: PropTypes.func.isRequired,\n getLpoa: PropTypes.func.isRequired,\n deleteLpoa: PropTypes.func.isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n claims: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Lpoa: PropTypes.shape({\n btn_learn_more: PropTypes.string.isRequired,\n error_auth_code_empty: PropTypes.string.isRequired,\n authorization_code_label: PropTypes.string.isRequired,\n authorization_code_title: PropTypes.string.isRequired,\n btn_back: PropTypes.string.isRequired,\n btn_cancel: PropTypes.string.isRequired,\n btn_confirm: PropTypes.string.isRequired,\n btn_next: PropTypes.string.isRequired,\n confirm_correct_lpoa_txt: PropTypes.string.isRequired,\n enter_auth_code_txt: PropTypes.string.isRequired,\n }).isRequired,\n\n }).isRequired,\n };\n\n state = {\n loading: false,\n learnMoreOpen: false,\n lpoaIsNoLinked: false,\n errorAuthCode: '',\n lpoa: {\n PoaCode: null,\n PoaName: null,\n BeneficiaryInfo: [],\n },\n selectedBeneIds: [],\n show: {\n authCodeEntryComponent: true,\n lpoaListComponent: false,\n editLpoaComponent: false,\n confirmLpoaNameComponent: false,\n },\n openConfirmModalRevokeBene: false,\n openConfirmModalUnlinkLpoa: false,\n\n hasPrecondition: false,\n post2FAAuthFunction: '',\n rememberedEvent: {}\n }\n\n validateForm = () => {\n const { text: { Lpoa } } = this.props;\n const { lpoa: { PoaCode } } = this.state;\n\n let errorAuthCode = '';\n if (PoaCode === '' || PoaCode === null)\n errorAuthCode = Lpoa.error_auth_code_empty;\n\n this.setState({ errorAuthCode });\n\n const isErrored = Boolean(errorAuthCode);\n return !isErrored;\n }\n\n onInputChange = (e) => {\n this.setState({\n lpoa: { ...this.state.lpoa, PoaCode: e.target.value },\n errorAuthCode: '',\n });\n }\n\n selectAllClickHandler = (e) => {\n if (e.target.checked) {\n const newSelectedBeneIds = this.state.lpoa.BeneficiaryInfo.map(bene => bene.BeneficiaryId);\n this.setState({ selectedBeneIds: newSelectedBeneIds });\n return;\n }\n this.setState({ selectedBeneIds: [] });\n };\n\n onCheckboxClickHandler = (e, beneId) => {\n const selectedBeneIds = this.state.selectedBeneIds;\n const selectedIndex = selectedBeneIds.indexOf(beneId);\n let newSelectedBeneIds = [];\n\n if (selectedIndex === -1) {\n newSelectedBeneIds = newSelectedBeneIds.concat(selectedBeneIds, beneId);\n }\n else if (selectedIndex === 0) {\n newSelectedBeneIds = newSelectedBeneIds.concat(selectedBeneIds.slice(1));\n }\n else if (selectedIndex === selectedBeneIds.length - 1) {\n newSelectedBeneIds = newSelectedBeneIds.concat(selectedBeneIds.slice(0, -1));\n }\n else if (selectedIndex > 0) {\n newSelectedBeneIds = newSelectedBeneIds.concat(\n selectedBeneIds.slice(0, selectedIndex),\n selectedBeneIds.slice(selectedIndex + 1)\n );\n }\n\n this.setState({ selectedBeneIds: newSelectedBeneIds });\n };\n\n setStateShowHandler = (componentName) => {\n // first reset all\n const updatedShow = {\n authCodeEntryComponent: false,\n lpoaListComponent: false,\n editLpoaComponent: false,\n confirmLpoaNameComponent: false,\n };\n // update only one\n updatedShow[componentName] = true;\n this.setState({ show: updatedShow });\n }\n\n goBackToLpoaTableHandler = (refreshLpoa = true) => {\n this.setStateShowHandler('lpoaListComponent');\n // also reset all selected benes to none\n this.setState({ selectedBeneIds: [] });\n // refresh lpoa\n if (refreshLpoa) {\n this.setState({ loading: true });\n this.getLpoaHandler()\n .finally(() => this.setState({ loading: false }));\n }\n\n window.scrollTo(0, 0);\n }\n\n onAuthCodeCheckHandler = e => {\n e.preventDefault();\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n { \n hasPrecondition: true,\n post2FAAuthFunction: 'onAuthCodeCheckHandler',\n rememberedEvent: e\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n { \n hasPrecondition: true,\n post2FAAuthFunction: 'onAuthCodeCheckHandler',\n rememberedEvent: e\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n if (this.validateForm()) {\n this.setState({ \n loading: true,\n hasPrecondition: false,\n rememberedEvent: {}\n });\n this.props.checkAuthCode(this.state.lpoa.PoaCode)\n .then((response) => {\n const PoaName = response.payload.data;\n // check if invalid code\n if (PoaName === INVALID_AUTH_CODE) {\n this.setStateShowHandler('authCodeEntryComponent');\n this.setState({\n errorAuthCode: INVALID_AUTH_CODE\n });\n }\n else {\n this.setStateShowHandler('confirmLpoaNameComponent');\n this.setState({ lpoa: { ...this.state.lpoa, PoaName, } });\n }\n })\n .finally(() => this.setState({ loading: false }));\n }\n }\n }\n\n onBackToCodeEntryHandler = () => {\n this.setStateShowHandler('authCodeEntryComponent');\n this.setState({\n errorAuthCode: '',\n poa: { ...this.state.lpoa, PoaName: '' }\n });\n }\n\n onLPOACancelHandler = () => {\n this.props.history.goBack();\n }\n\n onLPOAConfirmHandler = () => {\n this.setStateShowHandler('lpoaListComponent');\n }\n\n getLpoaHandler = () => {\n return this.props.getLpoa()\n .then((response) => {\n const lpoa = response.payload.data;\n this.setState({ lpoa }, () => {\n if (lpoa.PoaCode === null) {\n this.setState({ lpoaIsNoLinked: true });\n this.setStateShowHandler('authCodeEntryComponent');\n }\n else {\n this.setState({ lpoaIsNoLinked: false });\n this.setStateShowHandler('lpoaListComponent');\n }\n });\n });\n }\n\n setOpenConfirmModalRevokeBene = functionName => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: functionName\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: functionName\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setState({ \n hasPrecondition: false,\n openConfirmModalRevokeBene: true,\n post2FAAuthFunction: ''\n });\n }\n }\n\n setOpenConfirmModalUnlinkLpoa = functionName => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n { \n hasPrecondition: true,\n post2FAAuthFunction: functionName\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: functionName,\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setState({ \n hasPrecondition: false,\n openConfirmModalUnlinkLpoa: true,\n post2FAAuthFunction: ''\n });\n }\n }\n\n revokeAllHandler = () => {\n const allBeneIds = this.state.lpoa.BeneficiaryInfo.map(bene => bene.BeneficiaryId);\n this.setState({\n loading: true,\n openConfirmModalUnlinkLpoa: true,\n });\n this.props.deleteLpoa(allBeneIds)\n .then(() => {\n this.setState({ selectedBeneIds: [] });\n return this.getLpoaHandler();\n })\n .finally(() => this.setState({\n loading: false,\n openConfirmModalUnlinkLpoa: false,\n }));\n };\n\n revokeSelectedBenesHandler = () => {\n this.setState({\n loading: true,\n openConfirmModalRevokeBene: true,\n });\n this.props.deleteLpoa(this.state.selectedBeneIds)\n .then(() => {\n this.setState({ selectedBeneIds: [] });\n return this.getLpoaHandler();\n })\n .finally(() => this.setState({\n loading: false,\n openConfirmModalRevokeBene: false,\n }));\n };\n\n editSelectedBenesHandler = functionName => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: functionName\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: functionName\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setStateShowHandler('editLpoaComponent', true);\n this.setState({ hasPrecondition: false });\n }\n };\n\n // Methods to render components\n renderNavigationButton = (label, onClick, variant, disabled = false, color = 'primary') => {\n return (\n \n \n {label}\n \n
\n );\n }\n\n authCodeEntryComponent = () => {\n const { text: { Lpoa } } = this.props;\n const { errorAuthCode, lpoa: { PoaCode }, learnMoreOpen } = this.state;\n\n return (\n \n \n \n this.setState({ learnMoreOpen: false })}\n open={learnMoreOpen}\n />\n
\n\n );\n }\n\n confirmLpoaNameComponent = () => {\n const { text: { Lpoa } } = this.props;\n const { lpoa: { PoaName } } = this.state;\n return (\n \n \n {Lpoa.enter_auth_code_txt}\n \n
\n \n
\n \n {this.renderNavigationButton(Lpoa.btn_cancel, this.onLPOACancelHandler, 'text')}\n {this.renderNavigationButton(Lpoa.btn_next, this.onAuthCodeCheckHandler, 'contained')}\n
\n \n {this.renderNavigationButton(Lpoa.btn_learn_more, () => this.setState({ learnMoreOpen: true }), 'outlined')}\n
\n \n {Lpoa.confirm_correct_lpoa_txt}\n
\n \n {PoaName}\n
\n \n {this.renderNavigationButton(Lpoa.btn_back, this.onBackToCodeEntryHandler, 'text')}\n {this.renderNavigationButton(Lpoa.btn_cancel, this.onLPOACancelHandler, 'text')}\n {this.renderNavigationButton(Lpoa.btn_confirm, this.onLPOAConfirmHandler, 'contained')}\n
\n \n {show.authCodeEntryComponent && this.authCodeEntryComponent()}\n {show.lpoaListComponent &&\n this.editSelectedBenesHandler('editSelectedBenesHandler')}\n disableRevoke={lpoaIsNoLinked}\n openConfirmModalRevokeBene={openConfirmModalRevokeBene}\n openConfirmModalUnlinkLpoa={openConfirmModalUnlinkLpoa}\n setOpenConfirmModalRevokeBene={() => this.setOpenConfirmModalRevokeBene('setOpenConfirmModalRevokeBene')}\n setOpenConfirmModalUnlinkLpoa={() => this.setOpenConfirmModalUnlinkLpoa('setOpenConfirmModalUnlinkLpoa')}\n cancelConfirmModalRevokeBene={() => this.setState({ openConfirmModalRevokeBene: false })}\n cancelConfirmModalUnlinkLpoa={() => this.setState({ openConfirmModalUnlinkLpoa: false })}\n />\n }\n {show.editLpoaComponent &&\n
\n\n );\n }\n}\n\nexport default withRouter(connect(select, {\n checkAuthCode,\n getLpoa,\n deleteLpoa,\n get2FAPrecondition,\n getRSAPrecondition\n})(LanguageHOC(Lpoa)));\n","import { GETrequest, PUTrequest } from 'utils/helpers/api_handler';\nimport {\n GIFTING_LIST_GET,\n GIFTING_CHANGE_NAME_VISIBILITY,\n GIFTING_CHANGE_STATUS,\n GET_GIFT_IMAGE,\n UPDATE_GIFT,\n} from './constants';\n\nexport function getGiftingList() {\n const payload = GETrequest('/gift?includeImage=false');\n return {\n type: GIFTING_LIST_GET,\n payload,\n };\n}\n\nexport function changeStatus(AccountId, IsActive) {\n const payload = PUTrequest('/gift/activation', { AccountId, IsActive });\n return {\n type: GIFTING_CHANGE_STATUS,\n payload,\n };\n}\n\nexport function getGiftImage(AccountId) {\n const payload = GETrequest(`/gift/image/${AccountId}`, { responseType: 'blob' });\n return {\n type: GET_GIFT_IMAGE,\n payload,\n };\n}\n\nexport function updateGift(gift, uploadPercentageCb = null) {\n const config = uploadPercentageCb\n ? {\n onUploadProgress: (progressEvent) => {\n uploadPercentageCb(Math.round((progressEvent.loaded * 100) / progressEvent.total));\n }\n }\n : {};\n const payload = PUTrequest('/gift', gift, config);\n return {\n type: UPDATE_GIFT,\n payload,\n };\n}\n\nexport function changeNameVisibility(AccountId, HideLastName) {\n const payload = PUTrequest('/gift/hideLastName', { AccountId, HideLastName });\n return {\n type: GIFTING_CHANGE_NAME_VISIBILITY,\n payload,\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Drawer,\n Accordion,\n AccordionDetails,\n AccordionSummary,\n Icon,\n Typography,\n} from '@mui/material';\nimport { IconBtnTooltip } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nexport function LearnMoreDrawer({ open, onClose, text: { Gifting }, currentYear, annualGiftExclusionAmount, maximumBeneficiaryDeposit, maximumBenficiaryAccountValueForGift }) {\n\n const learnMore = () => (\n \n
\n\n keyboard_arrow_down}\n aria-controls='learn-more'\n id='learn-more'\n >\n {qa.question} \n \n \n {qa.answer} \n \n \n );\n })}\n
\n );\n\n return (\n \n
\n \n
{Gifting.learn_more_title}
\n\n {Gifting.text_learn_more}\n
\n {Gifting.text_faq(currentYear, annualGiftExclusionAmount, maximumBeneficiaryDeposit, maximumBenficiaryAccountValueForGift).map(qa => {\n return (\n \n
\n );\n });\n\n return (\n results\n );\n }\n\n renderSkeletonRows() {\n const { accountList, text: { Gifting, } } = this.props;\n \n return (\n accountList.map(account => ( \n \n
\n {Gifting.lbl_beneficiary}
\n{`${bene.FirstName} ${bene.LastName}`}
\n\n
\n {Gifting.lbl_code}
\n{giftCode}
\n\n
\n {Gifting.lbl_account}
\n{bene.OptionName}
\n\n {bene.AccountNumber}\n
\n\n this.statusChange(bene)}\n value={isActive}\n inputProps={{ 'aria-label': 'secondary checkbox' }}\n />\n
\n {Gifting.lbl_status}
\n{statusText}
\n\n
\n {Gifting.lbl_hide_last_name}
\n{nameStatusText}
\n this.props.history.push(`${Gifting.nav_path}/${bene.AccountId}`)}>\n {Gifting.btn_manage}\n
\n \n
\n ))\n );\n }\n\n componentDidMount() {\n if (this.props.beneficiaryList.length === 0) {\n this.setState({ loading: true });\n this.props.getGiftingList()\n .then(() => {\n this.setState({ loading: false });\n });\n }\n }\n\n render() {\n const {\n loading,\n loadingStatusChange,\n learnMoreOpen,\n isAggregate,\n } = this.state;\n const { \n currentYear,\n annualGiftExclusionAmount,\n maximumBeneficiaryDeposit,\n maximumBenficiaryAccountValueForGift,\n text: { Gifting } \n } = this.props;\n\n return (\n \n
\n {Gifting.lbl_beneficiary}
\n\n
\n {Gifting.lbl_code}
\n\n
\n {Gifting.lbl_account}
\n\n
\n {Gifting.lbl_status}
\n\n
\n {Gifting.lbl_hide_last_name}
\n\n
\n \n \n\n {loading\n ? (\n this.renderSkeletonRows()\n ) : (\n \n {this.renderBeneficiaryRows()}\n \n )}\n\n \n this.setState({ learnMoreOpen: false })}\n open={learnMoreOpen}\n currentYear={currentYear}\n annualGiftExclusionAmount={annualGiftExclusionAmount}\n maximumBeneficiaryDeposit={maximumBeneficiaryDeposit}\n maximumBenficiaryAccountValueForGift={maximumBenficiaryAccountValueForGift}\n />\n\n this.shouldNavAway()}\n actionButtons={[\n {\n action: () => this.setState({ isAggregate: false }),\n label: Gifting.btn_ok,\n }\n ]}\n DialogProps={{ 'TransitionComponent': Transition }}\n \n >\n
\n );\n }\n}\n\nconst Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line\n return {Gifting.head_title}
\n \n this.setState({ learnMoreOpen: true })}\n >\n {Gifting.btn_learn_more}\n \n
\n\n {Gifting.text_max_aggregate(maximumBeneficiaryDeposit)}
\n \n\n \n \n {children}\n
\n \n \n );\n else \n return (\n <>\n {children}\n \n );\n}\n\nCircularStatic.propTypes = {\n /**\n * The value of the progress indicator for the determinate variant.\n * Value between 0 and 100.\n */\n progress: PropTypes.number,\n show: PropTypes.bool,\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { cloneDeep } from 'lodash';\n\nimport CircularProgress from '../CircularProgress';\n\nimport DropZone from 'react-dropzone';\n\nimport {\n Avatar,\n Button,\n TextField,\n Slide,\n Switch,\n} from '@mui/material';\n\nimport { Person, } from '@mui/icons-material';\n\nimport {\n InfoIcon,\n Modal,\n notificationShow,\n LoadingOverlay,\n\n SmartTable,\n TableContainer,\n TableHeader,\n TablePagination,\n TableRows,\n TableToolbar,\n} from '@frontend/common';\n\nimport {\n changeNameVisibility,\n getGiftingList,\n getGiftImage,\n updateGift,\n} from '../actions';\n\nimport styles from './styles.module.scss';\n\nconst IMAGE_SIZE_LIMIT = 8000000; // 8MBs\n\nconst select = (state) => ({\n user: state.session.userDetails,\n giftingSiteUrl: state.static.environmentVars.GiftingSiteUrl,\n beneficiaryList: state.gifting.beneficiaryList,\n});\n\nexport class ManageGifting extends Component {\n\n static propTypes = {\n beneficiaryList: PropTypes.array.isRequired,\n changeNameVisibility: PropTypes.func.isRequired,\n getGiftingList: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n getGiftImage: PropTypes.func.isRequired,\n updateGift: PropTypes.func.isRequired,\n giftingSiteUrl: PropTypes.string.isRequired,\n user: PropTypes.object.isRequired,\n giftCodeId: PropTypes.number,\n text: PropTypes.shape({\n Gifting: PropTypes.shape({\n nav_path: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_done: PropTypes.string,\n btn_email: PropTypes.string,\n btn_facebook: PropTypes.string,\n btn_manage_gift: PropTypes.string,\n btn_ok: PropTypes.string,\n btn_remove: PropTypes.string,\n btn_twitter: PropTypes.string,\n lbl_account: PropTypes.string,\n lbl_account_owner: PropTypes.string,\n lbl_beneficiary: PropTypes.string,\n lbl_code: PropTypes.string,\n lbl_hidden: PropTypes.string,\n lbl_hide_last_name: PropTypes.string,\n lbl_manage_gift: PropTypes.string,\n lbl_message: PropTypes.string,\n lbl_no_history: PropTypes.string,\n lbl_history: PropTypes.string,\n lbl_page_views: PropTypes.string,\n lbl_shown: PropTypes.string,\n lbl_social: PropTypes.string,\n lbl_url: PropTypes.string,\n message: PropTypes.string,\n msg_email_subject: PropTypes.func,\n text_copy_link: PropTypes.string,\n text_default_email: PropTypes.func,\n text_enable_gifting: PropTypes.string,\n text_hide_last_name: PropTypes.string,\n msg_save: PropTypes.string,\n error_message_empty: PropTypes.string,\n error_message_allowed_chars: PropTypes.string,\n text_input_placeholder: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n giftUploading: false,\n imageDownloading: false,\n benesLoading: false,\n giftMessage: '',\n giftMessageError: '',\n originalGiftMessage: '',\n historyLoading: false,\n showSaveDialog: false,\n isValidateImage: false,\n validateImageMsg: '',\n beneficiary: {},\n imageChanged: false,\n progress: 0,\n hideLastName: false,\n };\n\n handleInput = name => e => {\n if (name === 'giftMessage') {\n this.setState({\n [name]: e.target.value\n }, () => this.validateGiftMessage()); // validate message when typing\n }\n else {\n this.setState({ [name]: e.target.value });\n }\n }\n\n hideLastNameChange = e => {\n const { changeNameVisibility, notificationShow, text: { Gifting } } = this.props;\n const { beneficiary } = this.state;\n const hideLastName = e.target.checked;\n\n changeNameVisibility(beneficiary.AccountId, hideLastName)\n .then(() => {\n this.setState({ hideLastName }, () => notificationShow(Gifting.msg_save, 'success'));\n });\n }\n\n renderHistory() {\n const { text: { Gifting } } = this.props;\n const { beneficiary: { Transactions } } = this.state;\n let results = [];\n if (Transactions === undefined || Transactions.length === 0) {\n results = {Gifting.lbl_no_history}
;\n }\n else {\n const trans = Transactions.map(trans => ({\n GiftId: trans.GiftId,\n GiftCodeId: trans.GiftCodeId,\n GifterId: trans.GifterId,\n PostDate: trans.PostDate,\n Name: `${trans.FirstName} ${trans.LastName}`,\n Amount: trans.Amount,\n Memo: trans.Memo,\n Status: trans.Status,\n }));\n results = (\n <>\n {Gifting.lbl_history}
\n {Gifting.text_enable_gifting}
);\n }\n\n return displayURL;\n }\n\n dropFile(files) {\n const { beneficiary } = this.state;\n const file = files[0];\n\n if (file && (!file.type.includes('jpeg') && !file.type.includes('gif') && !file.type.includes('png'))) {\n this.setState({\n isValidateImage: true,\n validateImageMsg: 'Invalid image type. JPG/JPEG, GIF, and PNG are valid image types.'\n });\n }\n else if (file && file.size > IMAGE_SIZE_LIMIT) {\n this.setState({\n isValidateImage: true,\n validateImageMsg: 'Image cannot be larger than 8 megabytes.'\n });\n }\n else {\n const reader = new FileReader();\n reader.readAsArrayBuffer(files[0]);\n reader.onload = () => {\n const arrayBuffer = reader.result;\n this.setState({\n imageChanged: true,\n beneficiary: { ...beneficiary, Image: [...new Uint8Array(arrayBuffer)], HasImage: true },\n });\n };\n }\n }\n\n removeFile = () => {\n this.setState({\n beneficiary: {\n ...this.state.beneficiary,\n Image: null,\n HasImage: false,\n },\n imageChanged: true,\n });\n }\n\n convertByteArrayToImage(data) {\n const arrayBuffer = new Uint8Array(data);\n const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });\n const urlCreator = window.URL || window.webkitURL;\n return urlCreator.createObjectURL(blob);\n }\n\n renderDropZone() {\n const { text: { Gifting } } = this.props;\n const { beneficiary, imageChanged } = this.state;\n let entireImage = '';\n if (beneficiary.Image) {\n const constructedImage = imageChanged ? this.convertByteArrayToImage(beneficiary.Image) : URL.createObjectURL(beneficiary.Image);\n entireImage = (\n this.dropFile(incomingFile)}>\n {({ getRootProps, getInputProps }) => (\n \n \n )}\n \n {beneficiary.HasImage &&\n
\n );\n }\n\n formChanged = () => {\n return this.state.imageChanged ||\n this.state.originalGiftMessage !== this.state.giftMessage;\n }\n\n shouldCancel = () => {\n const { text: { Gifting } } = this.props;\n if (this.formChanged() && this.validateGiftMessage()) {\n this.setState({ showSaveDialog: true });\n }\n else {\n // redirect to the gift dashboard\n this.props.history.push(Gifting.nav_path);\n }\n }\n\n showPercentageUploadProgress = (percentage) => {\n this.setState({ progress: percentage });\n }\n\n validateGiftMessage = () => {\n const { text: { Gifting } } = this.props;\n const { giftMessage } = this.state;\n const allowedCharsRegex = /^[a-zA-Z0-9 !?()$.,:;\\-='\\\\\\n\\r]+$/g;\n\n let giftMessageError = ''; // clear message error\n if (!giftMessage) {\n giftMessageError = Gifting.error_message_empty;\n }\n else if (!allowedCharsRegex.test(giftMessage)) {\n giftMessageError = Gifting.error_message_allowed_chars;\n }\n\n this.setState({ giftMessageError });\n return !giftMessageError;\n }\n\n saveChanges = () => {\n if (this.formChanged() && this.validateGiftMessage()) {\n const { imageChanged, beneficiary, giftMessage } = this.state;\n const { updateGift, notificationShow, text: { Gifting } } = this.props;\n\n beneficiary.IsActive = beneficiary.IsActive ? 1 : 0;\n beneficiary.GiftMessage = giftMessage;\n if (!imageChanged && beneficiary.HasImage) {\n // To not update unchanged image set it to null and leave HasImage true (per API rules)\n beneficiary.Image = null;\n }\n\n this.setState({ giftUploading: true });\n updateGift(beneficiary, this.showPercentageUploadProgress)\n .then(() => {\n notificationShow(Gifting.msg_save, 'success');\n // redirect to the gift dashboard\n this.props.history.push(Gifting.nav_path);\n })\n .catch(() => {\n this.setState({ giftUploading: false });\n });\n }\n }\n\n setBeneficiary = (beneficiary) => {\n this.setState({\n giftMessage: beneficiary.GiftMessage,\n imageChanged: false,\n beneficiary\n }, () => this.validateGiftMessage()); // in case there is an empty message from DB show error\n }\n\n getImageSetBene = (beneficiary) => {\n const { getGiftImage } = this.props;\n // load gift image if exists, we don't include images in the gift list\n const updatedBeneficiary = cloneDeep(beneficiary);\n if (beneficiary.HasImage) {\n this.setState({ imageDownloading: true });\n getGiftImage(beneficiary.AccountId)\n .then((response) => {\n updatedBeneficiary.Image = response.payload.data;\n this.setBeneficiary(updatedBeneficiary);\n })\n .finally(() => this.setState({ imageDownloading: false }));\n }\n else {\n this.setBeneficiary(updatedBeneficiary);\n }\n }\n\n initializeBeneDetails = (accountId) => {\n if (this.props.beneficiaryList.length === 0) {\n this.setState({ benesLoading: true });\n this.props.getGiftingList()\n .then(() => {\n const beneficiary = this.props.beneficiaryList.find(beneficiary => beneficiary.AccountId === accountId);\n this.getImageSetBene(beneficiary);\n this.setState({\n benesLoading: false,\n originalGiftMessage: beneficiary.GiftMessage,\n hideLastName: Boolean(beneficiary.HideLastName),\n });\n });\n }\n else {\n const beneficiary = this.props.beneficiaryList.find(beneficiary => beneficiary.AccountId === accountId);\n this.setState({\n originalGiftMessage: beneficiary.GiftMessage,\n hideLastName: Boolean(beneficiary.HideLastName),\n });\n this.getImageSetBene(beneficiary);\n }\n }\n\n componentDidMount() {\n const accountId = parseInt(this.props.match.params.accountId);\n this.initializeBeneDetails(accountId);\n }\n\n componentDidUpdate(prevProps) {\n const accountId = parseInt(this.props.match.params.accountId);\n if (parseInt(prevProps.match.params.accountId) !== accountId) {\n // account id got updated\n this.initializeBeneDetails(accountId);\n }\n }\n\n render() {\n const {\n text: {\n Gifting\n }\n } = this.props;\n const {\n giftUploading,\n imageDownloading,\n beneficiary,\n giftMessage,\n giftMessageError,\n showSaveDialog,\n isValidateImage,\n validateImageMsg,\n progress,\n hideLastName\n } = this.state;\n\n const beneName = `${beneficiary.FirstName} ${beneficiary.LastName}`;\n const giftCode = beneficiary.IsActive ? beneficiary.GiftCode : 'Inactive';\n const encodedURL = encodeURI(`${this.props.giftingSiteUrl}/${giftCode}`); //giftingSiteUrl does not include '/' at the end\n const nameStatusText = hideLastName ? Gifting.lbl_hidden : Gifting.lbl_shown;\n\n return (\n <>\n \n \n {entireImage}\n {!beneficiary.HasImage &&
\n \n
}\n add_circle_outline
\n ADD IMAGE
\n \n \n {Gifting.btn_remove}\n \n
\n }\n \n \n
\n \n \n {Gifting.btn_cancel}\n \n \n {Gifting.btn_done}\n \n
\n \n\n \n \n \n {this.renderDropZone()}\n \n
\n \n
\n \n\n \n {Gifting.message}
\n{giftMessage.length}/2000
\n\n
\n {Gifting.lbl_beneficiary}
\n{beneName}
\n\n
\n \n\n \n {Gifting.lbl_url}
\n {this.buildURL()}\n\n
\n {Gifting.lbl_account_owner}
\n{this.props.user.name}
\n\n
\n \n
\n {Gifting.lbl_hide_last_name}
\n\n
{nameStatusText}
\n\n
\n \n\n \n {Gifting.lbl_page_views}
\n{beneficiary.PageViews || 0}
\n{Gifting.lbl_code}
\n{giftCode}
\n\n
\n {Gifting.lbl_account}
\n{beneficiary.OptionName}
\n{beneficiary.AccountNumber}
\n\n
\n \n\n \n {Gifting.lbl_social}
\n\n
\n
\n {this.renderHistory()}\n
\n \n \n {this.renderHistory()}\n
\n You have unsaved changes. Would you like to save your changes first?\n
\n \n\n {validateImageMsg}
\n \n \n );\n }\n}\n\nconst Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line\n return \n \n
\n );\n }\n}\n\nexport default sizify(PersistentDrawers);","/*\n*\n* AddressCard Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { isEqual } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { CHANGE_ADDRESS } from '../constants';\nimport { GETaddress } from 'utils/helpers/api_handler';\nimport * as validator from 'utils/helpers/form_validation';\n\nimport {\n AddressTextFields,\n CardButtons,\n CardTitle,\n InfoIcon,\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\nimport {\n Button,\n Tab,\n Tabs,\n} from '@mui/material';\nimport { withStyles, } from '@mui/styles';\n\nimport { changeAddress, deleteAddress } from '../actions';\n\nimport styles from './styles.module.scss';\n\nconst muiStyles = {\n tab: {\n minWidth: '20px', // a number of your choice\n }\n};\n\nconst select = state => ({\n ADDRESS_TYPES: state.static.environmentVars.AddressTypes,\n US_STATES: state.static.usStates\n});\n\nexport class AddressCard extends React.Component {\n static propTypes = {\n addresses: PropTypes.shape({\n Physical: PropTypes.object,\n Mailing: PropTypes.object,\n Other: PropTypes.object,\n }).isRequired,\n hasTitle: PropTypes.bool,\n ADDRESS_TYPES: PropTypes.shape({\n Physical: PropTypes.string,\n Mailing: PropTypes.string,\n Other: PropTypes.string\n }).isRequired,\n changeAddress: PropTypes.func.isRequired,\n deleteAddress: PropTypes.func.isRequired,\n displayUnsavedChangesPrompt: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n text: PropTypes.shape({\n AddressCard: PropTypes.shape({\n btn_delete: PropTypes.func,\n btn_update: PropTypes.func,\n err_postal_code_length: PropTypes.string,\n err_required: PropTypes.string,\n err_smarty_streets: PropTypes.string,\n err_street1_max_length: PropTypes.string,\n head_title: PropTypes.string,\n msg_address_deleted: PropTypes.string,\n msg_address_updated: PropTypes.string,\n text_intl_address: PropTypes.string,\n }),\n }).isRequired,\n residentCheck: PropTypes.func.isRequired,\n US_STATES: PropTypes.array.isRequired,\n callbackOnAddressChange: PropTypes.func,\n classes: PropTypes.object,\n };\n\n static defaultProps = {\n callbackOnAddressChange: null,\n hasTitle: true,\n };\n\n state = {\n addressType: this.props.ADDRESS_TYPES.Mailing,\n isDeleting: false,\n isSaving: false,\n errors: {\n Mailing: {},\n Physical: {},\n Other: {},\n },\n addresses: {\n Mailing: this.props.addresses.Mailing,\n Physical: this.props.addresses.Physical,\n Other: this.props.addresses.Other,\n },\n addressSuggestions: [],\n autocompleteText: {\n Mailing: this.props.addresses.Mailing.StreetAddress1,\n Physical: this.props.addresses.Physical.StreetAddress1,\n Other: this.props.addresses.Other.StreetAddress1,\n },\n };\n\n areErrors(addressType, errors) {\n // we need to include inner loop for input fields\n const anyErrors = Object.values(errors[addressType]).filter(err => err && Object.values(err).filter(val => val).length !== 0);\n return anyErrors.length === 0;\n }\n\n errorGet = (input) => {\n const error = this.state.errors[this.state.addressType] && this.state.errors[this.state.addressType][input];\n return error ? error : '';\n }\n\n verifyAddress = () => {\n const { addressType, addresses, errors } = this.state;\n const { ADDRESS_TYPES } = this.props;\n const { err_postal_code_length, err_required, err_street1_max_length } = this.props.text.AddressCard;\n const postalCodeRegex = /(^\\d{5}$)|(^\\d{5}-\\d{4}$)|(^\\d{9}$)|(^\\d{5} \\d{4}$)/;\n\n // reset only this address type error\n const updatedErrors = { ...errors, [addressType]: {} };\n\n // verify only mailing address at this time\n if (addressType === ADDRESS_TYPES.Mailing) {\n if (!addresses[addressType].StreetAddress1) {\n updatedErrors[addressType].StreetAddress1 = err_required;\n }\n if (!addresses[addressType].State) {\n updatedErrors[addressType].State = err_required;\n }\n if (!addresses[addressType].PostalCode.match(postalCodeRegex)) {\n updatedErrors[addressType].PostalCode = err_postal_code_length;\n }\n if (addresses[addressType].StreetAddress1.length > 40) {\n updatedErrors[addressType].StreetAddress1 = err_street1_max_length;\n }\n if (addresses[addressType].StreetAddress2.length > 40) {\n updatedErrors[addressType].StreetAddress2 = err_street1_max_length;\n }\n updatedErrors[addressType].City = validator.cityValidator(addresses[addressType].City);\n }\n\n this.setState({ errors: updatedErrors });\n\n return this.areErrors(addressType, updatedErrors);\n }\n\n addressTabChange = (e, value) => {\n this.setState({ addressType: value });\n };\n\n onInputChange = (inputName, event) => {\n const { addressType } = this.state;\n this.setState({\n errors: {\n ...this.state.errors,\n [addressType]: {}\n },\n addresses: { // update only this address type and its specific field\n ...this.state.addresses,\n [addressType]: {\n ...this.state.addresses[addressType],\n [inputName]: event.target.value\n }\n },\n }, () => this.onBlur(inputName));\n\n }\n\n uppercaseInput = (inputName) => {\n const { addresses, addressType } = this.state;\n const uppercasedAddresses = { ...addresses };\n uppercasedAddresses[addressType][inputName] = uppercasedAddresses[addressType]\n && uppercasedAddresses[addressType][inputName]\n && uppercasedAddresses[addressType][inputName].toUpperCase();\n this.setState({ addresses: uppercasedAddresses });\n }\n\n onBlur = (inputName) => {\n if (inputName) {\n this.uppercaseInput(inputName);\n this.verifyAddress();\n }\n }\n\n mapApiErrorsToFormErrors = (apiErrors) => {\n const { addressType, errors } = this.state;\n const updatedErrors = { ...errors };\n\n if (apiErrors.length > 0) {\n // this is assuming that api Field properties would not change!\n apiErrors.forEach(apiError => updatedErrors[addressType][apiError.Field] = apiError.Message);\n }\n\n this.setState({ errors: updatedErrors });\n }\n\n addressDelete = (e) => {\n e.preventDefault();\n const { addressType, addresses } = this.state;\n this.setState({ isDeleting: true });\n\n this.props.deleteAddress(addresses[addressType].AddressId, addressType)\n .then(() => {\n // on success call callback if passed\n if (this.props.callbackOnAddressChange)\n this.props.callbackOnAddressChange();\n\n this.setState({\n isDeleting: false,\n addresses: {\n Mailing: this.props.addresses.Mailing,\n Physical: this.props.addresses.Physical,\n Other: this.props.addresses.Other,\n },\n autocompleteText: {\n Mailing: this.props.addresses.Mailing.StreetAddress1,\n Other: this.props.addresses.Other.StreetAddress1,\n Physical: this.props.addresses.Physical.StreetAddress1,\n },\n });\n this.props.notificationShow(this.props.text.AddressCard.msg_address_deleted, 'success');\n })\n .catch((response) => this.setState({ isDeleting: false }, () => this.mapApiErrorsToFormErrors(response.payload.data)));\n }\n\n addressUpdate = (e) => {\n e.preventDefault();\n const { addressType, addresses } = this.state;\n if (this.verifyAddress()) {\n this.setState({ isSaving: true });\n this.props.changeAddress({ ...addresses[addressType], Type: addressType })\n .then(() => {\n // on success call callback if passed\n if (this.props.callbackOnAddressChange)\n this.props.callbackOnAddressChange();\n\n this.setState({\n isSaving: false,\n addresses: {\n Mailing: this.props.addresses.Mailing,\n Physical: this.props.addresses.Physical,\n Other: this.props.addresses.Other,\n },\n autocompleteText: {\n Mailing: this.props.addresses.Mailing.StreetAddress1,\n Physical: this.props.addresses.Physical.StreetAddress1,\n Other: this.props.addresses.Other.StreetAddress1,\n }\n });\n this.props.notificationShow(this.props.text.AddressCard.msg_address_updated, 'success');\n })\n .then(() => this.props.residentCheck())\n .catch((response) => this.setState({ isSaving: false }, () => this.mapApiErrorsToFormErrors(response.payload.data)));\n }\n }\n\n updateButtonIsDisabled = () => {\n const { addressType, isDeleting, isSaving, addresses, errors } = this.state;\n\n return isDeleting\n || isSaving\n || isEqual(addresses[addressType], this.props.addresses[addressType])\n || !this.areErrors(addressType, errors);\n }\n\n deleteButtonDisabled = () => {\n const { addressType, isDeleting, isSaving, addresses } = this.state;\n return isDeleting\n || isSaving\n || Object.keys(addresses[addressType]).every(key => addresses[addressType][key] === '')\n || Object.keys(this.props.addresses[addressType]).every(key => this.props.addresses[addressType][key] === '');\n }\n\n buttonsCompose = () => {\n const { addressType, isDeleting, isSaving, addresses } = this.state;\n const isReadOnlyAddress = addresses[addressType].Country !== 'US' && addresses[addressType].Country !== '';\n\n if (!isReadOnlyAddress) {\n return [\n addressType !== this.props.ADDRESS_TYPES.Mailing &&\n - \n {\n leftMenuItems.map((items, itemsIndex) => {\n return (\n
\n {items.props.children\n .filter(child => child.type.displayName === 'LeftMenuItem')\n .map((leftMenuItem, itemIndex) => {\n const firstColStyle = itemIndex === 0 ? styles.title : '';\n return (\n
\n\n {\n {leftMenuItem.props.children}\n
\n );\n })\n }\n \n {this.state.rowsOpen[itemsIndex] ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
}\n \n \n
\n \n {\n drawers.map((rightDrawer, index) => (\n \n \n \n ))}\n
\n \n {isDrawerFullWidth &&\n
\n \n this.handleDrawerToggle(index)}\n title='Close'\n />\n
\n }\n \n {rightDrawer.props.title}\n
\n \n this.handleDrawerToggle(index)}\n icon='close'\n />\n
\n \n {rightDrawer}\n
\n \n \n
\n \n {EmailCard.text_verify_email1}
\n{newEmail}
\n{EmailCard.text_verify_email2}
\n{EmailCard.text_verify_email3}
\n{method.BeneficiaryName}
\n \n \n
\n\n \n \n \n {Preferences.btn_change_delivery_prefs}\n \n \n \n
\n );\n }\n}\n\n\nexport default connect(select, {\n changeStatementDeliveryMethods,\n notificationShow,\n getNotifications,\n})(LanguageHOC(DeliveryMethodsComp));\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n TextField\n} from '@mui/material';\n\nimport {\n notificationShow,\n LoadingOverlay,\n} from '@frontend/common';\n\nimport {\n twoFactorTokenVerification,\n getPreferredMethod,\n savePreferredMethod,\n getTwoFactorToken\n} from '../../actions';\n\nimport { userLogout } from 'components/AppRoot/Navigation/actions';\nimport { regMethodTypes } from '../../constants.js';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n RegistrationInfo: state.multifactor.RegistrationInfo,\n VerificationInfo: state.multifactor.VerificationInfo,\n preferredInfo: state.multifactor.preferredInfo,\n is2FARegistered: state.session.is2FARegistered,\n});\n\nexport class RegisterPhone extends Component {\n\n static propTypes = {\n twoFactorTokenVerification: PropTypes.func.isRequired,\n getTwoFactorToken: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n userLogout: PropTypes.func.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n savePreferredMethod: PropTypes.func.isRequired,\n RegistrationInfo: PropTypes.object.isRequired,\n VerificationInfo: PropTypes.object.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n closeWindow: PropTypes.func,\n is2FARegistered: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_another_method: PropTypes.string,\n btn_calling: PropTypes.string,\n btn_call_again: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_learn_more: PropTypes.string,\n btn_resend_code: PropTypes.string,\n btn_sending: PropTypes.string,\n btn_submit_code: PropTypes.string,\n confirmation_path: PropTypes.string,\n err_verification_code_required: PropTypes.string,\n lbl_invalid_code: PropTypes.string,\n lbl_verification_code: PropTypes.string,\n msg_attempts_remaining: PropTypes.string,\n msg_we_called: PropTypes.func,\n msg_we_sent: PropTypes.func,\n msg_resend_successful: PropTypes.string,\n register_path: PropTypes.string,\n learn_more_url: PropTypes.string,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n isLoading: false,\n hasVerificationCode: false,\n verificationCode: '',\n verificationCodeError: '',\n actionButton: false,\n attemptWarning: '',\n sendCodeBtn: this.props.text.Multifactor.btn_resend_code,\n callAgainBtn: this.props.text.Multifactor.btn_call_again\n };\n\n handleInput = name => e => {\n if (this.state.hasVerificationCode) {\n this.setState({\n hasVerificationCode: false,\n verificationCodeError: '',\n [name]: e.target.value\n });\n }\n else {\n this.setState({ [name]: e.target.value });\n }\n }\n\n doAgain = () => {\n const { RegistrationInfo, text: { Multifactor } } = this.props;\n\n if (RegistrationInfo.regMethod === regMethodTypes.CALL) {\n this.setState({\n callAgainBtn: Multifactor.btn_calling,\n actionButton: true,\n attemptWarning: ''\n });\n }\n else {\n this.setState({\n sendCodeBtn: Multifactor.btn_sending,\n actionButton: true,\n attemptWarning: ''\n });\n }\n\n setTimeout(() => {\n if (RegistrationInfo.regMethod === regMethodTypes.CALL) {\n this.setState({ callAgainBtn: Multifactor.btn_call_again, actionButton: false });\n }\n else {\n this.setState({ sendCodeBtn: Multifactor.btn_resend_code, actionButton: false });\n }\n }, 5000);\n\n this.props.getTwoFactorToken(RegistrationInfo.regMethod);\n }\n\n verifyCode = (e) => {\n e.preventDefault();\n const { text: { Multifactor }, RegistrationInfo } = this.props;\n const { verificationCode } = this.state;\n if (verificationCode) {\n this.setState({ isLoading: true });\n const regMethod = RegistrationInfo.regMethod === regMethodTypes.CALL\n ? regMethodTypes.CALL\n : regMethodTypes.SMS;\n Promise.all([\n this.props.twoFactorTokenVerification(verificationCode, regMethod),\n this.props.getPreferredMethod()\n ]).then(() => {\n const { VerificationInfo, preferredInfo } = this.props;\n if (VerificationInfo.Verified) {\n const params = {\n AlwaysRequired: preferredInfo.AlwaysRequired,\n PreferredMethod: regMethod\n };\n this.props.savePreferredMethod(params)\n .then(() => {\n this.props.history.push(Multifactor.confirmation_path);\n });\n }\n else {\n if (VerificationInfo.AttemptsRemaining === 0) {\n this.logout();\n }\n else if (VerificationInfo.AttemptsRemaining === 1) {\n this.setState({\n isLoading: false,\n attemptWarning: Multifactor.msg_attempts_remaining\n });\n }\n else {\n this.setState({\n isLoading: false,\n verificationCodeError: Multifactor.lbl_invalid_code\n });\n }\n }\n });\n }\n else {\n this.setState({\n hasVerificationCode: true,\n verificationCodeError: Multifactor.err_verification_code_required\n });\n }\n }\n\n logout = () => {\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .then(() => {\n this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success');\n });\n }\n\n render() {\n const { RegistrationInfo, text: { Multifactor }, closeWindow, is2FARegistered } = this.props;\n const {\n isLoading, hasVerificationCode, verificationCode, verificationCodeError,\n attemptWarning, callAgainBtn, sendCodeBtn, actionButton,\n } = this.state;\n\n const lastFour = RegistrationInfo.PhoneNumber\n ? RegistrationInfo.PhoneNumber.substr(RegistrationInfo.PhoneNumber.length - 4, RegistrationInfo.PhoneNumber.length)\n : '';\n const sendConfirmMsg = RegistrationInfo.regMethod === regMethodTypes.CALL ? Multifactor.msg_we_called(lastFour) : Multifactor.msg_we_sent(lastFour);\n const actionType = RegistrationInfo.regMethod === regMethodTypes.CALL ? callAgainBtn : sendCodeBtn;\n\n return (\n | {Preferences.head_account} {Preferences.head_beneficiary} | \n{Preferences.head_delivery_method} | \n
|---|
\n \n this.verifyCode(e)}\n >\n \n {Multifactor.btn_submit_code}\n \n \n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n
\n \n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n twoFactorTokenVerification,\n getTwoFactorToken,\n getPreferredMethod,\n savePreferredMethod,\n userLogout,\n notificationShow\n})(LanguageHOC(RegisterPhone)));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport QRCode from 'react-qr-code';\n\nimport {\n Button,\n TextField\n} from '@mui/material';\n\nimport {\n notificationShow,\n LoadingOverlay,\n} from '@frontend/common';\n\nimport {\n getInitialTwoFactorQRCode,\n getTwoFactorQRCode,\n twoFactorTokenVerification,\n getPreferredMethod,\n savePreferredMethod\n} from '../../actions';\n\nimport { userLogout } from 'components/AppRoot/Navigation/actions';\nimport { regMethodTypes } from '../../constants.js';\nimport { TWO_FACTOR_TYPES } from 'components/AppRoot/Navigation/constants';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n QRCodeInfo: state.multifactor.QRCodeInfo,\n VerificationInfo: state.multifactor.VerificationInfo,\n preferredInfo: state.multifactor.preferredInfo,\n is2FARegistered: state.session.is2FARegistered,\n});\n\nexport class RegisterAuthenticator extends Component {\n\n static propTypes = {\n hideAnotherMethodButton: PropTypes.bool, // defaults to always show\n getInitialTwoFactorQRCode: PropTypes.func.isRequired,\n getTwoFactorQRCode: PropTypes.func.isRequired,\n twoFactorTokenVerification: PropTypes.func.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n savePreferredMethod: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n userLogout: PropTypes.func.isRequired,\n QRCodeInfo: PropTypes.object.isRequired,\n VerificationInfo: PropTypes.object.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n registerType: PropTypes.string,\n closeWindow: PropTypes.func,\n is2FARegistered: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_another_method: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_learn_more: PropTypes.string,\n btn_submit_token: PropTypes.string,\n confirmation_path: PropTypes.string,\n lbl_invalid_code: PropTypes.string,\n err_invalid_token: PropTypes.string,\n err_token_required: PropTypes.string,\n lbl_my529_token: PropTypes.string,\n lbl_step1: PropTypes.string,\n lbl_step2: PropTypes.string,\n lbl_step3: PropTypes.string,\n msg_token_attempts_remaining: PropTypes.string,\n msg_download_authenticator: PropTypes.string,\n msg_get_codes: PropTypes.string,\n msg_scan_qrcode: PropTypes.string,\n msg_enter_seccode: PropTypes.string,\n register_path: PropTypes.string,\n learn_more_url: PropTypes.string,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n isLoading: false,\n hasSecurityCode: false,\n securityCode: '',\n securityCodeError: '',\n attemptWarning: '',\n };\n\n logout = () => {\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .then(() => {\n this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success');\n });\n }\n\n handleInput = name => e => {\n if (this.state.securityCode) {\n this.setState({\n securityCode: false,\n securityCodeError: '',\n [name]: e.target.value\n });\n }\n else {\n this.setState({ [name]: e.target.value });\n }\n }\n\n verifyCode = (e) => {\n e.preventDefault();\n const { text: { Multifactor } } = this.props;\n const { securityCode } = this.state;\n if (securityCode) {\n this.setState({ isLoading: true });\n Promise.all([\n this.props.twoFactorTokenVerification(securityCode, regMethodTypes.INAPPTOKEN),\n this.props.getPreferredMethod()\n ]).then(() => {\n const { VerificationInfo, preferredInfo } = this.props;\n if (VerificationInfo.Verified) {\n const params = {\n AlwaysRequired: preferredInfo.AlwaysRequired,\n PreferredMethod: regMethodTypes.INAPPTOKEN\n };\n this.props.savePreferredMethod(params)\n .then(() => {\n this.props.history.push(Multifactor.confirmation_path);\n });\n }\n else {\n if (VerificationInfo.AttemptsRemaining === 0) {\n this.logout();\n }\n else if (VerificationInfo.AttemptsRemaining === 1) {\n this.setState({\n isLoading: false,\n attemptWarning: Multifactor.msg_token_attempts_remaining\n });\n }\n else {\n this.setState({\n isLoading: false,\n securityCodeError: Multifactor.err_invalid_token\n });\n }\n }\n });\n }\n else {\n this.setState({\n hasSecurityCode: true,\n securityCodeError: Multifactor.err_token_required\n });\n }\n }\n\n componentDidMount() {\n const { getInitialTwoFactorQRCode, getTwoFactorQRCode, registerType } = this.props;\n // If initial 2FA registration, the endpoint does not need to validate token. Update is done on MyInfo page and requires token validation.\n const getQRCode = registerType === TWO_FACTOR_TYPES.UPDATE ? getTwoFactorQRCode : getInitialTwoFactorQRCode;\n\n this.setState({ isLoading: true });\n getQRCode()\n .finally(() => {\n this.setState({ isLoading: false });\n });\n }\n\n render() {\n const { QRCodeInfo, text: { Multifactor }, closeWindow, is2FARegistered, hideAnotherMethodButton } = this.props;\n const {\n isLoading, hasSecurityCode, securityCode,\n securityCodeError, attemptWarning,\n } = this.state;\n return (\n {Multifactor.lbl_verification_code}
\n{sendConfirmMsg}
\n \n
\n \n this.doAgain()}\n >\n {actionType}\n \n
\n \n this.props.history.push(Multifactor.register_path)}\n >\n {Multifactor.btn_another_method}\n \n
\n \n \n {Multifactor.btn_cancel}\n \n
\n {attemptWarning}
\n \n
\n \n this.verifyCode(e)}\n >\n \n {Multifactor.btn_submit_token}\n \n \n {Multifactor.btn_cancel}\n \n }\n\n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n \n \n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n getInitialTwoFactorQRCode,\n getTwoFactorQRCode,\n twoFactorTokenVerification,\n getPreferredMethod,\n savePreferredMethod,\n userLogout,\n notificationShow\n})(LanguageHOC(RegisterAuthenticator)));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { cloneDeep, isEmpty } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n FormControlLabel,\n FormHelperText,\n Radio,\n RadioGroup,\n} from '@mui/material';\n\nimport {\n LoadingOverlay,\n notificationShow,\n InfoIcon,\n PhoneNumberInput\n} from '@frontend/common';\n\nimport {\n twoFactorRegistration,\n twoFactorRegistrationUpdate,\n getTwoFactorToken\n} from '../../actions';\n\nimport RegisterPhone from 'components/Features/protected/Multifactor/Registration/RegisterPhone';\nimport RegisterAuthenticator from 'components/Features/protected/Multifactor/Registration/RegisterAuthenticator';\n\nimport { userLogout, refreshClaims } from 'components/AppRoot/Navigation/actions';\nimport { TWO_FACTOR_STATUS, TWO_FACTOR_TYPES } from 'components/AppRoot/Navigation/constants';\nimport { regMethodTypes } from '../../constants.js';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n userDetails: state.session.userDetails,\n claims: state.session.claims,\n is2FARegistered: state.session.is2FARegistered,\n});\n\nexport class Register extends Component {\n\n static propTypes = {\n hideAuthenticatorButton: PropTypes.bool, // defaults to show the authenticator option\n twoFactorRegistration: PropTypes.func.isRequired,\n twoFactorRegistrationUpdate: PropTypes.func.isRequired,\n getTwoFactorToken: PropTypes.func.isRequired,\n userLogout: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n refreshClaims: PropTypes.func.isRequired,\n userDetails: PropTypes.object.isRequired,\n claims: PropTypes.object.isRequired,\n closeWindow: PropTypes.func,\n registerType: PropTypes.string,\n is2FARegistered: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_learn_more: PropTypes.string,\n btn_register: PropTypes.string,\n err_options: PropTypes.string,\n err_required: PropTypes.string,\n err_phone_number_too_short: PropTypes.string,\n register_title: PropTypes.string,\n register_phonenumber_label: PropTypes.string,\n lbl_call: PropTypes.string,\n lbl_other: PropTypes.string,\n lbl_step1: PropTypes.string,\n lbl_step2: PropTypes.string,\n lbl_text: PropTypes.string,\n msg_authenticator_download: PropTypes.string,\n msg_2FA_phone: PropTypes.string,\n msg_2FA_reg_method: PropTypes.string,\n phone_path: PropTypes.string,\n authenticator_path: PropTypes.string,\n learn_more_url: PropTypes.string,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n }),\n Home: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n }).isRequired,\n };\n\n state = {\n isLoading: false,\n learnMoreOpen: false,\n phone: '',\n regMethod: '',\n formErrors: {\n phone: '',\n regMethod: ''\n },\n isRegisterPhone: false,\n isRegisterAuthenticator: false\n };\n\n handleOptions = e => {\n this.setState({ regMethod: e.target.value });\n };\n\n handlePhone = (phone) => {\n this.setState({\n phone: phone.replace(/\\D/g, ''),\n formErrors: { ...this.state.formErrors, phone: '' }\n });\n }\n\n registerPhone() {\n const { text: { Multifactor }, claims } = this.props;\n const { phone, regMethod } = cloneDeep(this.state);\n const formErrors = {};\n\n if (regMethod === regMethodTypes.SMS || regMethod === regMethodTypes.CALL) {\n if (phone === '') {\n formErrors.phone = Multifactor.err_required;\n }\n else if (phone.length < 10) {\n formErrors.phone = Multifactor.err_phone_number_too_short;\n }\n }\n\n if (regMethod === '') {\n formErrors.regMethod = Multifactor.err_options;\n }\n\n if (isEmpty(formErrors)) {\n const { phone, regMethod } = this.state;\n const { registerType } = this.props;\n\n const regParams = {\n countryCode: '+1', // only domestic\n phoneNumber: phone, // this should be 10 digit US number stripped off of all non numerics\n emailAddress: this.props.userDetails.email,\n verificationMethod: regMethod\n };\n\n const apiCall = claims.TwoFactorRegistration === TWO_FACTOR_STATUS.COMPLETED\n ? 'twoFactorRegistrationUpdate'\n : 'twoFactorRegistration';\n\n this.setState({ isLoading: true });\n this.props[apiCall](regParams)\n .then(() => {\n switch (regMethod) {\n case regMethodTypes.SMS:\n case regMethodTypes.CALL: {\n this.props.getTwoFactorToken(regMethod)\n .then(() => {\n registerType === TWO_FACTOR_TYPES.UPDATE\n ? this.setState({ isRegisterPhone: true })\n : this.props.history.push(Multifactor.phone_path);\n });\n break;\n }\n case regMethodTypes.INAPPTOKEN: {\n registerType === TWO_FACTOR_TYPES.UPDATE\n ? this.setState({ isRegisterAuthenticator: true })\n : this.props.history.push(Multifactor.authenticator_path);\n break;\n }\n default: break;\n }\n })\n .catch(() => {\n this.setState({ isLoading: false });\n });\n }\n else {\n this.setState({ formErrors });\n }\n }\n\n logout = () => {\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .then(() => {\n this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success');\n });\n }\n\n componentDidUpdate() {\n window.onpopstate = () => {\n if (this.props.registerType === TWO_FACTOR_TYPES.UPDATE) {\n this.props.refreshClaims();\n }\n };\n }\n\n render() {\n const { text: { Multifactor }, registerType, closeWindow, is2FARegistered, hideAuthenticatorButton } = this.props;\n const {\n isLoading, regMethod, formErrors,\n isRegisterPhone, isRegisterAuthenticator\n } = this.state;\n\n let renderComponent = '';\n if (isRegisterPhone) {\n renderComponent = {Multifactor.msg_get_codes}
\n\n
\n {Multifactor.lbl_step1}
\n {Multifactor.msg_download_authenticator}
\n {Multifactor.lbl_step2}
\n {Multifactor.msg_scan_qrcode}
\n \n {QRCodeInfo.ImageUrl &&
\n {QRCodeInfo.Code && QRCodeInfo.Code}\n
\n \n {QRCodeInfo.Code && QRCodeInfo.Code}\n
{Multifactor.lbl_step3}
\n {Multifactor.msg_enter_seccode}
\n \n
\n \n {!hideAnotherMethodButton &&\n this.props.history.push(Multifactor.register_path)}\n >\n {Multifactor.btn_another_method}\n \n }\n
\n \n \n {Multifactor.btn_cancel}\n \n
\n \n {attemptWarning}
\n\n {closeWindow && !is2FARegistered &&\n \n \n this.registerPhone()}\n >\n {Multifactor.btn_register}\n \n \n {Multifactor.btn_cancel}\n \n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n
\n \n
\n\n );\n }\n\n return (\n {Multifactor.register_title}
\n\n\n
\n {Multifactor.lbl_step1}
\n {Multifactor.msg_2FA_reg_method}
\n \n \n\n \n \n\n {!hideAuthenticatorButton &&\n \n {formErrors.regMethod} \n
\n\n {(regMethod === regMethodTypes.SMS || regMethod === regMethodTypes.CALL) &&\n <>\n \n
\n }\n\n \n
\n \n
\n {Multifactor.lbl_step2}
\n {Multifactor.msg_2FA_phone}
\n \n this.handlePhone(formattedValue)}\n errorText={formErrors.phone}\n variant='outlined'\n />\n
\n \n }\n\n\n \n
\n {renderComponent}\n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n twoFactorRegistration,\n twoFactorRegistrationUpdate,\n getTwoFactorToken,\n refreshClaims,\n userLogout,\n notificationShow\n})(LanguageHOC(Register)));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n IconBtnTooltip,\n notificationShow,\n LoadingOverlay\n} from '@frontend/common';\nimport {\n Button,\n TextField,\n InputAdornment,\n Switch,\n Dialog,\n Slide\n} from '@mui/material';\n\nimport { savePreferredMethod } from 'components/Features/protected/Multifactor/actions';\nimport { twoFaRouteChange } from 'components/AppRoot/Navigation/actions';\n\nimport Register from 'components/Features/protected/Multifactor/Registration/Register';\nimport RegisterAuthenticator from 'components/Features/protected/Multifactor/Registration/RegisterAuthenticator';\n\nimport { TWO_FACTOR_TYPES } from 'components/AppRoot/Navigation/constants';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n userDetails: state.session.userDetails,\n claims: state.session.claims,\n});\n\nexport class MultifactorCard extends React.Component {\n static propTypes = {\n notificationShow: PropTypes.func.isRequired,\n savePreferredMethod: PropTypes.func.isRequired,\n twoFaRouteChange: PropTypes.func.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n claims: PropTypes.object.isRequired,\n userDetails: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_done: PropTypes.string,\n btn_edit: PropTypes.string,\n err_required: PropTypes.string,\n lbl_other: PropTypes.string,\n lbl_other_options: PropTypes.string,\n lbl_phone_number: PropTypes.string,\n lbl_present_2FA: PropTypes.string,\n nav_title: PropTypes.string,\n })\n }).isRequired,\n };\n\n static defaultProps = {\n hasTitle: true,\n };\n\n state = {\n isLoading: false,\n isAlwaysRequired: false,\n isPhoneDisabled: true,\n hasPhoneNumberChanged: false,\n originalPhoneNumber: '',\n phoneNumber: '',\n phoneNumberError: '',\n\n isRegisterOpen: false,\n isRegisterAuthenticatorOpen: false,\n\n hasPrecondition: false,\n savedFunctionName: ''\n };\n\n toggleRegisteredDevice() {\n this.setState({ isLoading: true });\n const params = {\n preferredMethod: this.props.preferredInfo.PreferredMethod,\n alwaysRequired: !this.state.isAlwaysRequired\n };\n this.props.savePreferredMethod(params)\n .then(() => {\n this.setState({\n isLoading: false,\n isAlwaysRequired: !this.state.isAlwaysRequired\n });\n });\n }\n\n componentDidMount() {\n const { PhoneNumber, AlwaysRequired } = this.props.preferredInfo;\n this.setState({\n originalPhoneNumber: PhoneNumber,\n phoneNumber: PhoneNumber,\n isAlwaysRequired: AlwaysRequired\n });\n this.props.twoFaRouteChange(window.location.pathname); // sets user's current route so they can return once 2fa is complete - important for SSup\n\n }\n\n render() {\n const {\n isAlwaysRequired, isPhoneDisabled, phoneNumber, isLoading,\n isRegisterOpen, isRegisterAuthenticatorOpen\n } = this.state;\n const { text: { Multifactor } } = this.props;\n const phone = `(***) ***-${phoneNumber.substr(phoneNumber.length - 4, phoneNumber.length)}`;\n\n return (\n \n\n
\n \n \n this.setState({ isRegisterOpen: true })}\n title={Multifactor.btn_edit}\n />\n ,\n }}\n />\n
\n\n {Multifactor.lbl_present_2FA}
\n \n this.toggleRegisteredDevice()}\n value={isAlwaysRequired}\n inputProps={{ 'aria-label': 'secondary checkbox' }}\n style={{ marginBottom: '15px' }}\n />\n
\n {Multifactor.lbl_other_options}
\n \n this.setState({ isRegisterAuthenticatorOpen: true })}\n >\n {Multifactor.lbl_other}\n \n
\n \n\n
\n\n
\n\n \n }\n \n
\n\n \n
\n {head_official_communications}
\n {lbl_official_communications}
\n \n \n \n this.protectHandleNotificationUpdates(value, notificationTypes.OfficialCommunications.title)}\n options={notificationTypes.OfficialCommunications.options}\n value={OfficialCommunications}\n />\n \n \n
\n \n
\n\n \n
\n {head_tax_forms}
\n {lbl_tax_forms}
\n \n \n \n this.protectHandleNotificationUpdates(value, notificationTypes.TaxForms.title)}\n options={notificationTypes.TaxForms.options}\n value={TaxForms}\n />\n \n \n
\n \n\n
\n
\n\n \n
\n {head_newsletter}
\n \n \n \n \n this.protectHandleNotificationUpdates(value, notificationTypes.Newsletter.title)}\n options={notificationTypes.Newsletter.options}\n value={Newsletter}\n />\n \n \n
\n \n
\n\n \n
\n {head_promotional}
\n {lbl_promotional_info}
\n \n \n \n this.protectHandleNotificationUpdates(value, notificationTypes.Promotional.title)}\n options={notificationTypes.Promotional.options}\n value={Promotional}\n />\n \n \n
\n \n
\n\n \n
\n {head_birthday}
\n \n \n \n \n this.protectHandleNotificationUpdates(value, notificationTypes.BirthdayNotifications.title)}\n options={notificationTypes.BirthdayNotifications.options}\n value={BirthdayNotifications}\n />\n \n \n
\n \n this.protectHandleNotificationUpdates(value, notificationTypes.UTRESIDENT.title)}\n >\n \n \n \n \n
\n \n
\n {lbl_utah_resident}
\n \n
\n );\n }\n else\n return null;\n};","/*\n*\n* MyInfo Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { Prompt } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport SkeletonLoader from 'src/utils/components/SkeletonLoader';\n\nimport {\n InfoIcon,\n My529Logo,\n} from '@frontend/common';\n\nimport PersistentDrawers, { Row, LeftMenuItems, LeftMenuItem, RightDrawer } from './PersistentDrawers';\n\nimport AddressCard from './AddressCard';\nimport EmailCard from './EmailCard';\nimport PasswordCard from './PasswordCard';\nimport PhoneNumbersCard from './PhoneNumbersCard';\nimport UsernameCard from './UsernameCard';\nimport DeliveryMethodsComp from './DeliveryMethodsComp';\nimport MultifactorCard from './MultifactorCard';\n\nimport MyInfoToggles from './MyInfoToggles';\n\nimport {\n agentGet,\n getStatementDeliveryMethods,\n} from './actions';\n\nimport { getPreferredMethod } from 'components/Features/protected/Multifactor/actions';\n\nimport { get2FAPrecondition, getRSAPrecondition } from 'components/AppRoot/Navigation/actions';\nimport { protectAction } from 'utils/helpers/multifactor_handler';\nimport { MULTIFACTOR_TYPE } from 'components/AppRoot/Navigation/constants';\n\nimport { addressToString, statementDeliveryMethodToString } from './helpers';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n agent: state.myInfo.agent,\n isIpOnly_AccessRole: state.session.isIpOnly_AccessRole,\n DeliveryMethods: state.myInfo.DeliveryMethods,\n UserName: state.session.claims.UserName,\n EmailAddress: state.session.claims.EmailAddress,\n isAgent_AccessRole: state.session.isAgent_AccessRole,\n preferredInfo: state.multifactor.preferredInfo,\n claims: state.session.claims,\n is2FABypassed: state.session.is2FABypassed,\n});\n\nconst drawerWidth = '390px';\nconst marginTop = '60px';\n\nexport class MyInfo extends React.Component {\n\n static propTypes = {\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n UserName: PropTypes.string.isRequired,\n DeliveryMethods: PropTypes.array.isRequired,\n getStatementDeliveryMethods: PropTypes.func.isRequired,\n agentGet: PropTypes.func.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n is2FABypassed: PropTypes.bool.isRequired,\n claims: PropTypes.object.isRequired,\n agent: PropTypes.shape({\n AgentId: PropTypes.number,\n FirstName: PropTypes.string,\n LastName: PropTypes.string,\n UtahResident: PropTypes.bool,\n PhoneNumbers: PropTypes.shape({\n Cell: PropTypes.object,\n Fax: PropTypes.object,\n Home: PropTypes.object,\n Other: PropTypes.object,\n Work: PropTypes.object,\n }),\n Addresses: PropTypes.shape({\n Physical: PropTypes.object,\n Mailing: PropTypes.object,\n Other: PropTypes.object,\n }),\n OfficialCommunications: PropTypes.string,\n TaxForms: PropTypes.string,\n Newsletter: PropTypes.string,\n Promotional: PropTypes.string,\n BirthdayNotifications: PropTypes.string,\n MiddleName: PropTypes.string,\n }).isRequired,\n text: PropTypes.shape({\n MyInfo: PropTypes.shape({\n msg_unsaved_changes: PropTypes.string,\n nav_path: PropTypes.string,\n }),\n Login: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n AccountOwnerCard: PropTypes.shape({\n head_title: PropTypes.string,\n text_name_change_form: PropTypes.string,\n }),\n AddressCard: PropTypes.shape({\n text_intl_address: PropTypes.string,\n head_title: PropTypes.string,\n }),\n EmailCard: PropTypes.shape({\n head_title: PropTypes.string,\n text_ip_email_visible_to_ao: PropTypes.string,\n }),\n UsernameCard: PropTypes.shape({\n head_title: PropTypes.string,\n }),\n PasswordCard: PropTypes.shape({\n head_title: PropTypes.string,\n }),\n PhoneNumbersCard: PropTypes.shape({\n head_title: PropTypes.string,\n text_intl_phone: PropTypes.string,\n }),\n Preferences: PropTypes.shape({\n head_title_statement_delivery: PropTypes.string,\n head_notification_preferences: PropTypes.string,\n }),\n Multifactor: PropTypes.shape({\n nav_title: PropTypes.string,\n lbl_registered: PropTypes.string,\n }),\n }).isRequired,\n EmailAddress: PropTypes.string.isRequired,\n isAgent_AccessRole: PropTypes.bool.isRequired,\n isIpOnly_AccessRole: PropTypes.bool.isRequired,\n };\n\n state = {\n isLoading: false,\n displayPrompt: false,\n residentModalOpen: false,\n is2FARegisteredAO: false,\n hasPrecondition: true,\n rememberedDrawerIndex: -1,\n tentativeRememberedDrawerIndex: -1\n };\n\n residentCheck = () => {\n if (\n (this.props.agent.UtahResident && this.props.agent.Addresses.Mailing.State !== 'UT') ||\n (!this.props.agent.UtahResident && this.props.agent.Addresses.Mailing.State === 'UT')\n ) {\n this.setState({ residentModalOpen: true });\n }\n }\n\n onResidentModalClose = () => this.setState({ residentModalOpen: false });\n\n displayUnsavedChangesPrompt = (name, formNotFinished) => {\n this.setState({ displayPrompt: { [name]: formNotFinished } });\n }\n\n onDrawerToggle = (drawerIndex) => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n { hasPrecondition: true, tentativeRememberedDrawerIndex: drawerIndex },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA) {\n this.setState(\n { hasPrecondition: true, tentativeRememberedDrawerIndex: drawerIndex },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n }\n else {\n this.setState({ hasPrecondition: false, rememberedDrawerIndex: -1, tentativeRememberedDrawerIndex: -1 });\n }\n };\n\n componentDidMount() {\n const {\n agent: { AgentId },\n isAgent_AccessRole,\n agentGet,\n } = this.props;\n\n const promises = [];\n if (this.props.DeliveryMethods.length === 0)\n promises.push(this.props.getStatementDeliveryMethods());\n\n if (!AgentId && isAgent_AccessRole)\n promises.push(agentGet());\n\n if (isAgent_AccessRole) {\n promises.push(this.props.getPreferredMethod());\n }\n\n this.setState({ isLoading: true });\n Promise.all(promises)\n .then(() => {\n isAgent_AccessRole && this.props.preferredInfo.IsRegistered\n ? this.setState({ isLoading: false, is2FARegisteredAO: true })\n : this.setState({ isLoading: false });\n })\n .finally(() => {\n this.setState({ isLoading: false });\n });\n }\n\n componentDidUpdate() {\n const multiStatus = protectAction(this.props.claims);\n if (this.state.hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH) {\n this.setState({ hasPrecondition: false, rememberedDrawerIndex: this.state.tentativeRememberedDrawerIndex });\n }\n }\n\n render() {\n const { displayPrompt, isLoading, residentModalOpen, is2FARegisteredAO, rememberedDrawerIndex, hasPrecondition } = this.state;\n\n const {\n text: { Multifactor },\n agent: {\n AgentId,\n Addresses,\n FirstName,\n LastName,\n MiddleName,\n PhoneNumbers,\n },\n isAgent_AccessRole,\n isIpOnly_AccessRole,\n EmailAddress,\n UserName,\n DeliveryMethods,\n preferredInfo,\n is2FABypassed,\n text,\n } = this.props;\n const allFormsNotFinished = Boolean(Object.keys(displayPrompt).find(key => displayPrompt[key])) && !isLoading;\n const showAgentDetail = (detail) => {type}
\n |
\n {address.StreetAddress1 && {address.StreetAddress1},
}\n {address.StreetAddress2 && {address.StreetAddress2},
}\n {address.StreetAddress3 && {address.StreetAddress3},
}\n {address.City && {address.City},
}\n {(address.PostalCode || address.State) && {address.State && address.State} {address.PostalCode && address.PostalCode}{isReadOnlyAddress && ,}
}\n {isReadOnlyAddress && {address.CountryName}
}\n \n \n \n \n \n \n \n \n \n {text.AddressCard.head_title}
\n )}\n >\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n {is2FARegisteredAO && !is2FABypassed && (\n \n \n \n \n \n \n \n
\n )}\n \n \n \n \n \n \n \n \n {text.EmailCard.head_title}\n {isIpOnly_AccessRole &&
\n )}\n >\n \n
\n\n \n {accountOwnerName ||
\n
\n Account Owner
\n {accountOwnerName ||
\n \n {text.UsernameCard.head_title}\n
\n \n {showAgentDetail(UserName)}\n
\n \n {text.PasswordCard.head_title}\n
\n \n {showAgentDetail('.........')}\n
\n \n {Multifactor.nav_title}\n
\n \n {showAgentDetail(Multifactor.lbl_registered)}\n
\n \n {text.EmailCard.head_title}\n
\n \n {showAgentDetail(EmailAddress)}\n
\n \n {text.AddressCard.head_title}\n
\n \n {showAgentDetail(addressToString(Addresses.Mailing, 'Mailing'))} {/* only show 1 Skeleton loader line here */}\n {!isLoading && addressToString(Addresses.Physical, 'Physical')}\n {!isLoading && addressToString(Addresses.Other, 'Other')}\n
\n \n {text.PhoneNumbersCard.head_title}\n
\n \n\n {showAgentDetail(Object.values(PhoneNumbers).map(phone => phone.Number && (\n
\n \n
\n )))}\n {phone.Type}
\n |
\n {phone.Number}
\n {text.Preferences.head_notification_preferences}
\n \n {text.Preferences.head_title_statement_delivery}\n
\n \n {showAgentDetail(statementDeliveryMethodToString(DeliveryMethods))}\n
\n Current Option
\n {currentOptionName}\n Option Changes Remaining for Calendar Year
\n {remainingOptionChanges}
\n \n \n
\n );\n }\n}\n\nexport default AccountsInGroupNotice;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n Dropdown,\n} from '@frontend/common';\n\n\nexport default class Step1OptionCategory extends React.Component {\n static propTypes = {\n formInputs: PropTypes.shape({\n optionCategorySelection: PropTypes.string,\n }),\n formErrors: PropTypes.shape({\n optionCategorySelection: PropTypes.string,\n }),\n onChangeHandle: PropTypes.func.isRequired,\n dropdownOptions: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.string.isRequired,\n display: PropTypes.string.isRequired,\n }))\n };\n\n render() {\n return (\n \n \n \n \n
\n \n This account is 1 of {groupAccounts.length} accounts for the same account owner/beneficiary combination. This option change will count as one of the two investment option changes allowed per beneficiary for this calendar year.
\nIf you want to change the investment option for another account for the same beneficiary without incurring a second option change, you must make the change on the same day before the close of trading on the New York Stock Exchange, normally 2 p.m. MT. You also must make any modifications or cancellations before the close of trading.
\nIf you make an investment option request after the close of trading, or on a weekend or holiday, any modifications or cancellations must be received by 2 p.m. MT, the following business day.
\n\n
\n );\n }\n}\n\n","/*\n*\n* Step2CreateCustomizedOption Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nimport {\n CalculatorForm,\n} from '@frontend/common';\n\nimport styles from '../styles.module.scss';\n\nconst select = (state) => ({\n ServerDateTime: state.static.ServerDateTime,\n});\n\nexport class Step2CreateCustomizedOption extends React.Component {\n\n static propTypes = {\n onAllocationChange: PropTypes.func.isRequired,\n currentSchema: PropTypes.object.isRequired,\n selectedCategory: PropTypes.string.isRequired,\n ServerDateTime: PropTypes.string,\n };\n\n render() {\n const {\n currentSchema,\n selectedCategory,\n onAllocationChange,\n ServerDateTime\n } = this.props;\n\n return (\n Selected Category
\n {selectedCategory}
\n \n
\n \n
\n );\n }\n}\n\nexport default connect(select, {}, null)(Step2CreateCustomizedOption);","/*\n*\n* TermsAndConditions Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './styles.module.scss';\n\nexport function TermsAndConditions({ documents }) {\n return (\n Selected Category
\n {selectedCategory}
\n \n
\n );\n}\n\nTermsAndConditions.propTypes = {\n documents: PropTypes.shape({\n form400: PropTypes.string,\n programDescription: PropTypes.string.isRequired,\n })\n};\n\nexport default TermsAndConditions;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nimport {\n Checkbox,\n FormHelperText,\n FormControl,\n FormControlLabel,\n} from '@mui/material';\n\nimport {\n ExpandMore as ExpandMoreIcon,\n ExpandLess as ExpandLessIcon,\n} from '@mui/icons-material';\n\nimport {\n CalculatorForm,\n} from '@frontend/common';\n\nimport TermsAndConditions from '../TermsAndConditions';\n\nimport styles from '../styles.module.scss';\n\nconst select = (state) => ({\n ServerDateTime: state.static.ServerDateTime,\n documents: state.static.documents ? state.static.documents : {},\n});\n\nexport class Step3Submit extends React.Component {\n static propTypes = {\n selectedOptionName: PropTypes.string.isRequired,\n selectedCategory: PropTypes.string.isRequired,\n formInputs: PropTypes.shape({\n checked: PropTypes.bool,\n }),\n formErrors: PropTypes.shape({\n checked: PropTypes.string,\n }),\n onChangeHandle: PropTypes.func.isRequired,\n currentSchema: PropTypes.object.isRequired,\n matrixAllocations: PropTypes.array.isRequired,\n isCustomized: PropTypes.bool.isRequired,\n ServerDateTime: PropTypes.string,\n documents: PropTypes.object,\n };\n\n state = { \n showCustomized: false,\n };\n\n render() {\n const { \n formInputs, formErrors, onChangeHandle, selectedOptionName, isCustomized,\n ServerDateTime, selectedCategory, currentSchema, documents,\n } = this.props;\n\n const {\n showCustomized\n } = this.state;\n\n return (\n Terms and Conditions
\nPlease review the following Terms and Conditions regarding investment option changes
\nGeneral Information
\n- \n
- For important information about each investment option, please read my529's Program Description. {/*eslint-disable-line react/no-unescaped-entities*/}\n
- For information regarding the various investment options, see investment information at my529.org. \n
- Changing the investment option for this account will count as one investment option change. You may change your investment option for this account owner/beneficiary combination only twice per calendar year. \n
- No more than one of these accounts may be invested in the same investment option at the same time. \n
- Changing the investment option below will change the investment option for the entire balance. To transfer funds between accounts with the same beneficiary, account type, and account owner/agent, you can submit my529’s Internal Transfer Form 400 or select Transfers in Account Access. {/*eslint-disable-line react/no-unescaped-entities*/}\n
Customized Options
\n- \n
- Changing the allocation of the underlying funds within a Customized Static account is considered an investment option change. \n
- Changing the allocation of the underlying funds within a Customized Age-Based account after the initial allocation is finalized, even if the change applies to an age bracket other than the one the beneficiary is currently in, is considered an investment option change. \n
Timing
\n- \n
- The investment option change will usually take effect within three business days following the day you make the investment option change. \n
Cancellation
\n- \n
- To cancel or modify your investment option change request, you must do so on the same day the request was submitted, before the close of trading on the New York Stock Exchange (NYSE), usually 2 p.m. MT. If you submitted your request after the close of trading, or on a weekend or holiday, you must submit your modification or cancellation request before the close of trading on the next day the NYSE is open. Your investment option change request may not be cancelled or modified after these deadlines. \n
\n this.setState({ showCustomized: !showCustomized })}\n >\n \n
\n :\n Selected Option
\n {isCustomized ?\n {selectedCategory}
\n \n {showCustomized ? (\n
\n {selectedOptionName}
\n }\n {isCustomized && showCustomized &&\n \n
\n );\n }\n}\n","/*\n *\n * TransactionStepper Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Stepper,\n Step,\n StepLabel,\n StepButton,\n Button,\n} from '@mui/material';\nimport {\n LoadingOverlay,\n} from '@frontend/common';\n\nimport { sizify } from '@frontend/common';\n\nimport styles from './styles.module.scss';\nimport { desktopWidth } from 'utils/config/_sassconfig.scss';\n\nexport class TransactionStepper extends React.Component {\n static propTypes = {\n verifyStep: PropTypes.func.isRequired,\n renderStepComponent: PropTypes.func.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n stepLabels: PropTypes.arrayOf(PropTypes.string).isRequired,\n submitStep: PropTypes.number.isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number.isRequired,\n }).isRequired,\n history: PropTypes.object.isRequired,\n stepHasError: PropTypes.bool.isRequired,\n clearStepErrors: PropTypes.func.isRequired,\n termsChecked: PropTypes.bool,\n renderConfirmModal: PropTypes.func, // can pass in a ConfirmModal that can use this stepper's this.handleSubmit.\n text: PropTypes.shape({\n TransactionStepper: PropTypes.shape({\n btn_agree: PropTypes.string,\n btn_back: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_finish: PropTypes.string,\n btn_next: PropTypes.string,\n btn_print: PropTypes.string,\n })\n })\n };\n\n state = {\n step: 0,\n completed: {},\n buttonsDisabled: false,\n submitLoading: false,\n stepsDisabled: false,\n };\n\n isFirstStep = () => {\n return this.state.step === 0;\n };\n\n isLastStep = () => {\n return this.state.step === this.props.stepLabels.length - 1;\n };\n\n completedSteps = () => {\n return Object.keys(this.state.completed).length;\n };\n\n setStep = step => () => {\n if (this.state.completed[step]) this.setState({ step });\n };\n\n handleBack = () => {\n this.props.clearStepErrors();\n if (!this.isFirstStep()) this.setState(({ step }) => ({ step: step - 1 }));\n };\n\n handleNext = () => {\n const { clearStepErrors, verifyStep } = this.props;\n clearStepErrors();\n if (verifyStep(this.state.step)) {\n if (!this.isLastStep()) {\n const newCompleted = this.state.completed;\n newCompleted[this.state.step] = true;\n this.setState(({ step }) => ({\n step: step + 1,\n completed: newCompleted\n }));\n }\n }\n };\n\n getCompletedStepsToThisStep(step, completed, isCompleted) {\n for (let i = 0; i <= step; i++) {\n completed[i] = isCompleted;\n }\n return completed;\n }\n\n handleSubmit = () => {\n const { step, completed } = this.state;\n const { clearStepErrors, verifyStep, handleSubmit } = this.props;\n clearStepErrors();\n if (verifyStep(step)) {\n this.setState({ submitLoading: true });\n handleSubmit()\n .then(() => {\n // disable all previous completed steps and buttons\n this.setState(({ step, completed }) => ({\n step: step + 1,\n buttonsDisabled: true,\n completed: this.getCompletedStepsToThisStep(step, completed, true),\n stepsDisabled: true,\n submitLoading: false,\n }));\n // after any submit scroll to top\n window.scrollTo(0, 0);\n })\n .catch(() => {\n // re-enable previous step buttons also\n this.setState({\n buttonsDisabled: false,\n completed: this.getCompletedStepsToThisStep(step, completed, true),\n submitLoading: false,\n });\n });\n }\n };\n\n handleFinish = () => {\n this.props.history.goBack();\n }\n\n renderButtons = () => {\n const { submitStep, termsChecked = true, text: { TransactionStepper } } = this.props; //terms checked left as true, unless passed in props.\n const { step, buttonsDisabled } = this.state;\n const cancelButton = (\n Pending Option Change
\n {this.props.pendingOptionName}
\n {dayjs(createdDate)\n .format('MM/DD/YYYY h:mm A')} MT
\n {isCustomized &&\n \n Please print a copy of this page for your records.\n
\n \n
\n );\n }\n}\n\nexport default withRouter(sizify(LanguageHOC(TransactionStepper)));\n","export const NEW_OPTIONS = {\n PREDEFINED_STATIC: 'Static',\n PREDEFINED_ENROLLMENTDATE: 'Target Enrollment Date',\n CUSTOMIZED_AGEBASED: 'Create Customized Age-Based',\n CUSTOMIZED_STATIC: 'Create Customized Static',\n};","/*\n *\n * NewOptions Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter, Prompt } from 'react-router-dom';\nimport { cloneDeep, isEqual } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n LoadingOverlay,\n notificationShow,\n allNotificationsHide,\n CardAligned,\n CardBody,\n populate3DCalculatorSchema,\n sizify,\n Modal\n} from '@frontend/common';\n\nimport Step1OptionCategory from './StepComponents/Step1OptionCategory';\nimport Step2SelectPredefinedOption from './StepComponents/Step2SelectPredefinedOption';\nimport Step2CreateCustomizedOption from './StepComponents/Step2CreateCustomizedOption';\nimport Step3Submit from './StepComponents/Step3Submit';\nimport Step4PrintReview from './StepComponents/Step4PrintReview';\nimport TransactionStepper from 'components/Features/protected/Accounts/Transactions/TransactionStepper';\n\nimport { getNotifications, } from 'components/AppRoot/Navigation/actions';\n\nimport {\n postNewOptions,\n getNewAgeBasedSchema,\n getNewStaticSchema,\n} from 'components/Features/protected/Accounts/Transactions/OptionChanges/actions';\n\nimport { accountInvestmentPathGet } from 'components/Features/protected/Accounts/actions';\n\nimport { NEW_OPTIONS } from './constants';\n\nimport { mobileWidth } from 'utils/config/_sassconfig.scss';\n\nimport styles from './styles.module.scss';\n\nconst select = state => ({\n getNotifications: PropTypes.func.isRequired,\n selectedTransaction: state.transactions.selectedTransaction,\n predefinedOptions: state.optionChanges.predefinedOptions,\n newAgeBasedSchema: state.optionChanges.newAgeBasedSchema,\n newStaticSchema: state.optionChanges.newStaticSchema,\n investmentPath: state.accounts.investmentPath,\n});\n\nexport class NewOptions extends React.Component {\n static propTypes = {\n size: PropTypes.shape({\n windowWidth: PropTypes.number,\n }).isRequired,\n getNotifications: PropTypes.func.isRequired,\n postNewOptions: PropTypes.func.isRequired,\n predefinedOptions: PropTypes.arrayOf(PropTypes.shape({\n OptionId: PropTypes.number.isRequired,\n Name: PropTypes.string.isRequired,\n isStatic: PropTypes.bool.isRequired,\n isEnrollmentDate: PropTypes.bool.isRequired,\n })),\n notificationShow: PropTypes.func.isRequired,\n allNotificationsHide: PropTypes.func.isRequired,\n currentOptionId: PropTypes.number.isRequired,\n currentOptionName: PropTypes.string.isRequired,\n selectedTransaction: PropTypes.object.isRequired,\n isEditing: PropTypes.bool.isRequired,\n newAgeBasedSchema: PropTypes.object.isRequired,\n newStaticSchema: PropTypes.object.isRequired,\n getNewAgeBasedSchema: PropTypes.func.isRequired,\n getNewStaticSchema: PropTypes.func.isRequired,\n accountInvestmentPathGet: PropTypes.func.isRequired,\n investmentPath: PropTypes.object.isRequired,\n text: PropTypes.shape({\n OptionChanges: PropTypes.shape({\n NewOptions: PropTypes.shape({\n msg_unsaved_changes: PropTypes.string,\n step_labels: PropTypes.arrayOf(PropTypes.string).isRequired,\n customized_agebased_option_selection_name: PropTypes.string.isRequired,\n customized_static_option_selection_name: PropTypes.string.isRequired,\n errors: PropTypes.shape({\n empty_category_selection: PropTypes.string.isRequired,\n empty_option_selection: PropTypes.string.isRequired,\n duplicate_option_selection: PropTypes.string.isRequired,\n agree_to_terms: PropTypes.string.isRequired,\n total_allocations_for_each_bracket_100_percent: PropTypes.string.isRequired,\n total_allocations_100_percent: PropTypes.string.isRequired,\n }).isRequired,\n success_message: PropTypes.string.isRequired,\n btn_ok: PropTypes.string.isRequired,\n title_options_on_mobile: PropTypes.string.isRequired,\n text_options_on_mobile: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n }).isRequired,\n }\n\n state = {\n isInitialLoad: true,\n loading: false,\n stepHasError: false,\n selectedOptionName: '',\n selectedCategory: '',\n currentSchema: { FundCategories: [] },\n isCustomized: false,\n stepData: [\n // 0\n {\n formInputs: { optionCategorySelection: '' },\n formErrors: { optionCategorySelection: '' }\n },\n // 1\n {\n formInputs: { selectedOptionId: -1, matrixAllocations: [] },\n formErrors: { selectedOptionId: '', calculatorErrors: {} }\n },\n // 2\n {\n formInputs: { checked: false },\n formErrors: { checked: '' }\n }\n ],\n stepDataScreenshot: [\n // 0\n {\n formInputs: { optionCategorySelection: '' },\n formErrors: { optionCategorySelection: '' }\n },\n // 1\n {\n formInputs: { selectedOptionId: -1, matrixAllocations: [] },\n formErrors: { selectedOptionId: '', calculatorErrors: {} }\n },\n // 2\n {\n formInputs: { checked: false },\n formErrors: { checked: '' }\n }\n ],\n calculatorErrors: {},\n createdDate: '',\n showModalWhenMobileAndCustomized: false,\n };\n\n stepLabels = this.props.text.OptionChanges.NewOptions.step_labels; // length will also decide number of steps\n\n displayUnsavedChangesPrompt = () => {\n // we need to only know if any form inputs changed\n const { loading, stepData, stepDataScreenshot } = this.state;\n return !loading && stepData.findIndex((stepDataItem, step) => !isEqual(stepDataItem.formInputs, stepDataScreenshot[step].formInputs)) !== -1;\n }\n\n clearStepErrors = () => {\n const updatedStepData = this.state.stepData;\n updatedStepData.forEach(stepData => {\n const clearedFormErrors = stepData.formErrors;\n // should update updatedStepData by reference\n Object.keys(clearedFormErrors).forEach(key => clearedFormErrors[key] = '');\n });\n\n this.setState({\n stepHasError: false,\n stepData: updatedStepData,\n });\n }\n\n getSetInvestmentPath(selectedCategory) {\n this.setState({ loading: true });\n this.props.accountInvestmentPathGet(this.props.match.params.accountId, true)\n .then(() => {\n this.setState({\n isCustomized: true,\n selectedCategory,\n currentSchema: this.props.investmentPath,\n });\n })\n .finally(() => {\n this.setState({ loading: false });\n });\n }\n\n saveCategoryNameStep0 = (selectedCategory, isInitialized = false) => {\n const {\n isEditing, selectedTransaction, newAgeBasedSchema, newStaticSchema,\n currentOptionName\n } = this.props;\n\n // if existing investment path is customized use it when starting new customized option change \n const useInvestmentPathSchema = selectedCategory.includes(currentOptionName) && !isEditing;\n const useExistingCustomAllocation = selectedCategory.includes(selectedTransaction.scheduledOptionName) && isEditing;\n\n switch (selectedCategory) {\n case NEW_OPTIONS.CUSTOMIZED_AGEBASED: {\n if (useInvestmentPathSchema) {\n this.getSetInvestmentPath(selectedCategory);\n }\n else {\n this.setState({\n isCustomized: true,\n selectedCategory,\n currentSchema: useExistingCustomAllocation ? selectedTransaction.customAllocation : newAgeBasedSchema,\n });\n }\n\n break;\n }\n case NEW_OPTIONS.CUSTOMIZED_STATIC: {\n if (useInvestmentPathSchema) {\n this.getSetInvestmentPath(selectedCategory);\n }\n else {\n this.setState({\n isCustomized: true,\n selectedCategory,\n currentSchema: useExistingCustomAllocation ? selectedTransaction.customAllocation : newStaticSchema,\n });\n }\n\n break;\n }\n\n default:\n this.setState({\n isCustomized: false,\n selectedCategory\n });\n }\n\n // When category changed reset step 2 and 3 inputs also\n if (this.state.selectedCategory !== selectedCategory && !isInitialized) {\n const updatedStepData = this.state.stepData;\n const matrixAllocations = this.state.stepData[1].formInputs.matrixAllocations;\n updatedStepData[1] = {\n formInputs: { selectedOptionId: -1, matrixAllocations },\n formErrors: { selectedOptionId: '' }\n };\n updatedStepData[2] = {\n formInputs: { checked: false },\n formErrors: { checked: '' }\n };\n this.setState({\n stepData: updatedStepData\n });\n }\n }\n\n saveOptionNameStep1 = (selectedOptionId, selectedCategory) => {\n const {\n OptionChanges: {\n NewOptions: {\n customized_agebased_option_selection_name,\n customized_static_option_selection_name,\n }\n }\n } = this.props.text;\n\n switch (selectedCategory) {\n case NEW_OPTIONS.CUSTOMIZED_AGEBASED:\n this.setState({\n isCustomized: true,\n selectedOptionName: customized_agebased_option_selection_name,\n });\n break;\n case NEW_OPTIONS.CUSTOMIZED_STATIC:\n this.setState({\n isCustomized: true,\n selectedOptionName: customized_static_option_selection_name,\n });\n break;\n case NEW_OPTIONS.PREDEFINED_ENROLLMENTDATE:\n case NEW_OPTIONS.PREDEFINED_STATIC: {\n const selectedOptionName = this.props.predefinedOptions.find(option => option.OptionId === selectedOptionId).Name;\n this.setState({\n isCustomized: false,\n selectedOptionName,\n });\n break;\n }\n default:\n // do nothing\n }\n }\n\n onChangeHandle = (step, formInputs) => {\n if (step === 0) {\n const { size: { windowWidth } } = this.props;\n const isMobile = windowWidth < parseInt(mobileWidth);\n const isCustomized = formInputs.optionCategorySelection === NEW_OPTIONS.CUSTOMIZED_AGEBASED || formInputs.optionCategorySelection === NEW_OPTIONS.CUSTOMIZED_STATIC;\n // catching if user is doing customized on mobile device\n if (isMobile && isCustomized) {\n // show a popup and clear the category\n this.setState({ showModalWhenMobileAndCustomized: true });\n formInputs.optionCategorySelection = '';\n }\n else {\n // proceed as usual\n this.saveCategoryNameStep0(formInputs.optionCategorySelection);\n }\n }\n else if (step === 1) {\n this.saveOptionNameStep1(formInputs.selectedOptionId, this.state.stepData[0].formInputs.optionCategorySelection);\n }\n\n if (this.state.stepHasError)\n this.clearStepErrors(); // run just once when user starts typing\n\n const newStepData = this.state.stepData;\n newStepData[step].formErrors = {}; // always reset errors\n newStepData[step].formInputs = { ...newStepData[step].formInputs, ...formInputs }; // otherwise it would nuke other fields\n this.setState({ stepData: newStepData });\n };\n\n verifyStep = step => {\n const {\n OptionChanges: {\n NewOptions: {\n errors: {\n empty_category_selection,\n empty_option_selection,\n duplicate_option_selection,\n agree_to_terms,\n },\n }\n }\n } = this.props.text;\n\n // call only on clicking next button\n const formErrors = {}; // always reset errors\n switch (step) {\n case 0:\n if (this.state.stepData[0].formInputs.optionCategorySelection.trim() === '') {\n formErrors.optionCategorySelection = empty_category_selection;\n }\n break;\n\n case 1:\n // depends on the previous step 0 selection\n switch (this.state.stepData[0].formInputs.optionCategorySelection) {\n case NEW_OPTIONS.PREDEFINED_ENROLLMENTDATE:\n case NEW_OPTIONS.PREDEFINED_STATIC: {\n const selectedOptionId = this.state.stepData[1].formInputs.selectedOptionId;\n if (selectedOptionId.toString().trim() === '' || selectedOptionId === -1) {\n formErrors.selectedOptionId = empty_option_selection;\n }\n if (selectedOptionId === this.props.selectedTransaction.sheduledOptionId && this.props.isEditing) {\n formErrors.selectedOptionId = duplicate_option_selection;\n }\n break;\n }\n case NEW_OPTIONS.CUSTOMIZED_AGEBASED:\n case NEW_OPTIONS.CUSTOMIZED_STATIC: {\n const {\n hasAnyBracketTotalNot100Error,\n hasAllocationAmountError,\n hasBracketTotalSumOver100Error\n } = this.state.calculatorErrors;\n const matrixAllocations = this.state.stepData[1].formInputs.matrixAllocations;\n\n // This should forward all calculator errors\n formErrors.hasAnyBracketTotalNot100Error = hasAnyBracketTotalNot100Error;\n formErrors.hasAllocationAmountError = hasAllocationAmountError;\n formErrors.hasBracketTotalSumOver100Error = hasBracketTotalSumOver100Error;\n // show error toasts if any\n hasAnyBracketTotalNot100Error && this.props.notificationShow(hasAnyBracketTotalNot100Error, 'error');\n hasBracketTotalSumOver100Error && this.props.notificationShow(hasBracketTotalSumOver100Error, 'error');\n hasAllocationAmountError \n ? this.props.notificationShow(hasAllocationAmountError, 'error')\n : formErrors.hasAllocationAmountError = this.validateAllocations(matrixAllocations); // if allocation error doesn't already exist, run validation to see if any other errors exist; would only be on an existing schema where value is over a new Max Allocation amount\n // populate the schema with values to be used in view only\n this.setState({ currentSchema: populate3DCalculatorSchema(matrixAllocations, this.state.currentSchema) });\n break;\n }\n default:\n formErrors.selectedOptionId = `Could not choose selection based on option category: ${this.state.stepData[0].formInputs.optionCategorySelection}`;\n }\n break;\n\n case 2:\n if (this.state.stepData[2].formInputs.checked === false) {\n formErrors.checked = agree_to_terms;\n }\n break;\n\n default:\n this.props.notificationShow(`Could not verify the step: ${step}`, 'error');\n }\n\n const newStepData = this.state.stepData;\n newStepData[step].formErrors = formErrors;\n this.setState({\n stepData: newStepData\n });\n const hasNoErrors = Object.values(formErrors).filter(err => err !== '').length === 0;\n this.setState({ stepHasError: !hasNoErrors });\n\n // return hasNoErrors && this.state.hasNoCustomAllocationOnBlurErrors && hasNoNewCustomAllocationError;\n return hasNoErrors;\n\n };\n\n validateAllocations = matrixAllocations => {\n const fundCategories = this.state.currentSchema.FundCategories;\n let hasAllocationAmountError = '';\n\n matrixAllocations.forEach((categories, categoryIndex) => {\n categories.forEach((fund, fundIndex) => {\n fund.forEach(amount => {\n const { FundName, MaximumAllocation } = fundCategories[categoryIndex].Funds[fundIndex];\n if (Number(amount || 0) > MaximumAllocation) {\n hasAllocationAmountError = `The percentage for ${FundName} cannot exceed ${MaximumAllocation}%`;\n this.props.notificationShow(hasAllocationAmountError, 'error');\n }\n });\n });\n });\n\n return hasAllocationAmountError;\n }\n\n onAllocationChange = (matrixAllocations, calculatorErrors) => {\n const { stepData, isInitialLoad, } = this.state;\n const updatedStepData = stepData;\n updatedStepData[1].formInputs = { selectedOptionId: -1, matrixAllocations };\n\n // only on the initial load of the Calculator form, it will run through all the funds and provide an error toast for any existing values that are over the current max allocation allowed\n if (isInitialLoad) {\n this.validateAllocations(matrixAllocations);\n this.setState({ isInitialLoad: false, });\n }\n\n this.setState({ stepData: updatedStepData, calculatorErrors });\n // throw a toast on specific form errors\n const { hasAllocationAmountError, hasBracketTotalSumOver100Error } = calculatorErrors;\n if (hasAllocationAmountError || hasBracketTotalSumOver100Error) {\n hasBracketTotalSumOver100Error && this.props.notificationShow(hasBracketTotalSumOver100Error, 'error');\n hasAllocationAmountError && this.props.notificationShow(hasAllocationAmountError, 'error');\n }\n else if (!isInitialLoad) { // ignore on initial loading\n this.props.allNotificationsHide();\n }\n }\n\n handleSubmit = () => {\n const {\n OptionChanges: {\n NewOptions: {\n success_message,\n }\n }\n } = this.props.text;\n\n const accountId = this.props.match.params.accountId;\n // when submitting values below should be available\n const selectedCategory = this.state.stepData[0].formInputs.optionCategorySelection;\n const selectedOptionId = this.state.stepData[1].formInputs.selectedOptionId;\n const matrixAllocations = this.state.stepData[1].formInputs.matrixAllocations;\n this.setState({ loading: true });\n\n let postBody;\n switch (selectedCategory) {\n case NEW_OPTIONS.PREDEFINED_ENROLLMENTDATE:\n case NEW_OPTIONS.PREDEFINED_STATIC:\n postBody = [{\n AccountId: parseInt(accountId),\n OptionId: parseInt(selectedOptionId)\n }];\n break;\n case NEW_OPTIONS.CUSTOMIZED_AGEBASED:\n case NEW_OPTIONS.CUSTOMIZED_STATIC:\n postBody = [{\n AccountId: parseInt(accountId),\n matrixAllocations,\n CustomSchema: this.state.currentSchema,\n }];\n break;\n default:\n postBody = [];\n }\n\n return this.props.postNewOptions(postBody)\n .then(response => {\n const createdDate = response.payload.data; // gets created datetime from server to display on print page\n this.setState({\n createdDate,\n stepDataScreenshot: cloneDeep(this.state.stepData)\n });\n this.props.notificationShow(success_message, 'success');\n this.props.getNotifications(); // refreshes app notifications\n })\n .finally(() => this.setState({ loading: false }));\n };\n\n renderStepComponent = step => {\n const {\n predefinedOptions,\n currentOptionId,\n } = this.props;\n // remove current option from dropdown menu\n const availablePredefinedOptions = predefinedOptions.filter(option => option.OptionId !== currentOptionId);\n let stepComponent;\n switch (step) {\n case 0: {\n const Step1OptionCategoryOptions = Object.values(NEW_OPTIONS).map(value => ({ value, display: value }));\n stepComponent = (\n \n
\n\n \n \n {stepLabels.map((label, index) => (\n \n \n \n {label}\n \n \n \n ))}\n \n
\n \n {renderStepComponent(step)}\n
\n\n \n {this.renderButtons()}\n
\n\n {this.props.renderConfirmModal && this.props.renderConfirmModal(this.handleSubmit) /* if the renderConfirmModal exists, then render it. */}\n Oops! No new option selection found.
;\n }\n stepComponent = Step2SelectOptionComponent;\n break;\n }\n\n case 2: {\n stepComponent = (\n Step does not exist!
;\n }\n return stepComponent;\n };\n\n findCategoryByOptionId(optionId) {\n const category = this.props.predefinedOptions.find(option => option.OptionId === optionId);\n let optionCategorySelection = '';\n // this reflects how api/transactions/optionchanges/:OptionChangeId/actions/:ActionId works\n if (category === undefined) {\n // OptionId not found, it must be customized age-based (OptionId=0?)\n optionCategorySelection = NEW_OPTIONS.CUSTOMIZED_AGEBASED;\n }\n else if (category.isEnrollmentDate) {\n optionCategorySelection = NEW_OPTIONS.PREDEFINED_ENROLLMENTDATE;\n }\n else if (category.isStatic) {\n optionCategorySelection = NEW_OPTIONS.PREDEFINED_STATIC;\n }\n else {\n // OptionId=12, it must be customized static\n optionCategorySelection = NEW_OPTIONS.CUSTOMIZED_STATIC;\n }\n return optionCategorySelection;\n }\n\n initializeFormInputs() {\n const { selectedTransaction, isEditing, size: { windowWidth } } = this.props;\n if (isEditing) {\n // set dropdown options when editing\n const isEditingStepData = this.state.stepData;\n const optionCategorySelection = this.findCategoryByOptionId(selectedTransaction.sheduledOptionId);\n\n // catching if user is doing customized on mobile device\n const isMobile = windowWidth < parseInt(mobileWidth);\n const isCustomized = optionCategorySelection === NEW_OPTIONS.CUSTOMIZED_AGEBASED || optionCategorySelection === NEW_OPTIONS.CUSTOMIZED_STATIC;\n if (isMobile && isCustomized) {\n // show a popup and clear the category\n this.setState({ showModalWhenMobileAndCustomized: true });\n isEditingStepData[0].formInputs.optionCategorySelection = '';\n isEditingStepData[1].formInputs.selectedOptionId = '';\n isEditingStepData[1].formInputs.matrixAllocations = [];\n }\n else {\n isEditingStepData[0].formInputs.optionCategorySelection = optionCategorySelection;\n isEditingStepData[1].formInputs.selectedOptionId = selectedTransaction.sheduledOptionId;\n isEditingStepData[1].formInputs.matrixAllocations = selectedTransaction.matrixAllocations;\n }\n\n this.setState({\n stepData: isEditingStepData,\n stepDataScreenshot: cloneDeep(isEditingStepData),\n });\n this.saveCategoryNameStep0(isEditingStepData[0].formInputs.optionCategorySelection, true);\n this.saveOptionNameStep1(isEditingStepData[1].formInputs.selectedOptionId, isEditingStepData[0].formInputs.optionCategorySelection);\n }\n else {\n this.setState({ stepDataScreenshot: cloneDeep(this.state.stepData) });\n }\n }\n\n componentDidMount() {\n if (this.props.predefinedOptions.length > 0) {\n this.initializeFormInputs();\n }\n else {\n this.setState({ stepDataScreenshot: cloneDeep(this.state.stepData) });\n }\n\n // for simplicity load customized age-based or static templates if missing\n const promises = [];\n if (this.props.newAgeBasedSchema.FundCategories.length === 0) {\n promises.push(this.props.getNewAgeBasedSchema());\n }\n\n if (this.props.newStaticSchema.FundCategories.length === 0) {\n promises.push(this.props.getNewStaticSchema());\n }\n\n if (promises.length > 0) {\n this.setState({ loading: true });\n Promise.all(promises)\n .then(() => this.setState({ stepDataScreenshot: cloneDeep(this.state.stepData) }))\n .finally(() => this.setState({ loading: false }));\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.predefinedOptions.length !== this.props.predefinedOptions.length && this.props.predefinedOptions.length > 0) {\n this.initializeFormInputs();\n }\n }\n\n render() {\n const {\n OptionChanges: {\n NewOptions: {\n btn_ok, title_options_on_mobile, text_options_on_mobile\n }\n }\n } = this.props.text;\n\n return (\n \n
\n \n
\n\n \n
\n\n Account Owner
\n {agentName}\n \n
\n Beneficiary
\n {beneficiaryName}\n \n
\n\n \n
\n Account Number
\n {accountNumber}\n \n
\n Total Value
\n {totalMarketValue}\n \n
\n\n \n
\n {accountsInGroup > 1 && (\n Account Type
\n {accountType}\n \n
\n )}\n\n \n \n help_outline\n \n
\n {accountsInGroup}\n Accounts in Group
\n \n \n \n
\n );\n }\n\n}\n\nexport default connect(select, {\n getPreTransactionDetails,\n getPredefinedOptions,\n})(LanguageHOC(OptionChanges));\n","/*\n*\n* AccountDetailsCard Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Card,\n InfoIcon,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nAccountDetailsCard.propTypes = {\n sourceAccount: PropTypes.object,\n text: PropTypes.shape({\n Transfers: PropTypes.shape({\n head_account_number: PropTypes.string,\n head_account_owner: PropTypes.string,\n head_account_type: PropTypes.string,\n head_available_balance: PropTypes.string,\n head_bene: PropTypes.string,\n head_total_value: PropTypes.string,\n msg_balance_info: PropTypes.func,\n })\n })\n};\n\nAccountDetailsCard.defaultProps = {\n sourceAccount: {\n agent: {\n name: ''\n },\n beneficiary: {\n name: ''\n },\n accountNumber: '',\n totalValue: '',\n accountType: '',\n // netAvailable: 0, this field does not seem to be available in the data\n \n }\n};\n\nexport function AccountDetailsCard({ sourceAccount, text: { Transfers } }) {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n );\n}\n\nexport default LanguageHOC(AccountDetailsCard);\n","/*\n*\n* DualPushButtonSwitch Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Button,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\n// eslint-disable-next-line react/prop-types\nfunction OptionButton({ label, value, active, disabled, onChange, style }) {\n return (\n \n
\n \n \n
\n {Transfers.head_account_owner}
\n {sourceAccount.agent.name}\n \n
\n {Transfers.head_bene}
\n {sourceAccount.beneficiary.name}\n \n
\n {Transfers.head_account_number}
\n {sourceAccount.accountNumber}\n \n
\n {Transfers.head_total_value}
\n {sourceAccount.totalValue}\n \n
\n {Transfers.head_account_type}
\n {sourceAccount.accountType}\n \n
\n \n {Transfers.head_available_balance}\n
\n {sourceAccount.netAvailable}\n \n
\n );\n}\n\nexport default DualPushButtonSwitch;\n","export const TransferTypes = {\n full: 'full',\n partial: 'partial',\n};\n\nexport const TransferInputTypes = {\n Amount: 'Amount',\n Percentage: 'Percentage'\n};\n","import { get } from 'lodash';\r\n\r\nexport function formatAccountDisplayText(account) { //destination accounts data is labeled with capitals slightly differently from original accounts list data labels. Need to make the same.\r\n const accountNumber = get(account, 'accountNumber', '').toString();\r\n return `${get(account, 'beneficiary.name', '').toUpperCase()} ...${accountNumber.substring(accountNumber.length - 5)}`;\r\n}\r\n","/*\n*\n* TargetAccount Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { TransferInputTypes } from '../typeConstants';\nimport { formatAccountDisplayText } from '../formatAccountDisplayText';\nimport {\n BaseNumberInput,\n CurrencyInput,\n Dropdown,\n IconBtnTooltip,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nexport function parseFloatWrapper(callback) {\n return ({ floatValue, ...etc }) => {\n callback({\n ...etc,\n value: floatValue,\n });\n };\n}\n\nconst noop = () => null;\n\nTargetAccount.propTypes = {\n accountOptions: PropTypes.array,\n index: PropTypes.number,\n target: PropTypes.object,\n onAccountChange: PropTypes.func,\n canRemove: PropTypes.bool,\n onRemove: PropTypes.func,\n accountError: PropTypes.string,\n inputError: PropTypes.string,\n inputFieldType: PropTypes.oneOf([TransferInputTypes.Amount, TransferInputTypes.Percentage]),\n text: PropTypes.shape({\n Transfers: PropTypes.shape({\n lbl_destination_account: PropTypes.string,\n })\n }),\n};\n\nTargetAccount.defaultProps = {\n accountOptions: [],\n index: 0,\n target: { AccountId: '', Amount: 0, Percentage: 0 },\n canRemove: false,\n inputFieldType: TransferInputTypes.Amount,\n onAccountChange: noop,\n onRemove: noop,\n accountError: '',\n inputError: '',\n};\n\nexport function TargetAccount({\n index,\n accountOptions,\n target,\n inputFieldType,\n onAccountChange,\n canRemove,\n onRemove,\n accountError,\n inputError,\n text: { Transfers },\n}) {\n return (\n \n
\n \n
\n \n onAccountChange({ ...target, AccountId: value })}\n options={accountOptions.map(account => ({\n value: account.accountId,\n display: formatAccountDisplayText(account),\n props: {\n disabled: account.disabled,\n },\n }))}\n FormControlProps={{ style: { width: '200px' } }}\n InputLabelProps={{ htmlFor: `destinationSelect-${index}` }}\n SelectProps={{\n inputProps: {\n id: `destinationSelect-${index}`,\n name: 'destinationSelect',\n },\n }}\n />\n {inputFieldType === TransferInputTypes.Amount ?\n onAccountChange({\n ...target,\n Amount: value,\n }))}\n errorText={inputError}\n />\n :\n onAccountChange({\n ...target,\n Percentage: parseInt(value.replace('.', '')),\n })}\n inputProps={{\n suffix: '%',\n allowNegative: false,\n }}\n errorText={inputError}\n />\n }\n
\n );\n}\n\nexport default LanguageHOC(TargetAccount);\n","/*\n*\n* TransferStepOneContent Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n reduce,\n some,\n} from 'lodash';\n\nimport {\n currencyFormatter,\n} from '@frontend/common';\n\nimport {\n Checkbox,\n TextField,\n RadioGroup,\n Radio,\n FormControl,\n FormControlLabel,\n FormHelperText,\n Icon,\n Button,\n} from '@mui/material';\n\nimport DualPushButtonSwitch from './DualPushButtonSwitch';\nimport { TransferTypes, TransferInputTypes } from '../typeConstants';\nimport TargetAccount from '../TargetAccount';\nimport { formatAccountDisplayText } from '../formatAccountDisplayText';\n\nimport transactionsStyles from 'components/Features/protected/Accounts/Transactions/styles.module.scss';\nimport styles from './styles.module.scss';\n\nexport function onKeyUp(showFullBalanceDialog) {\n return (e) => {\n // enabling keyboard accessibility\n if (e.key === 'Enter' || e.key === 'Space') {\n showFullBalanceDialog();\n }\n };\n}\n\nTransferStepOneContent.propTypes = {\n sourceAccount: PropTypes.object.isRequired,\n destinationAccounts: PropTypes.array.isRequired,\n transfer: PropTypes.object.isRequired,\n onTransferChange: PropTypes.func.isRequired,\n onTargetChange: PropTypes.func.isRequired,\n addTargetAccount: PropTypes.func.isRequired,\n removeTargetAccount: PropTypes.func.isRequired,\n showFullBalanceDialog: PropTypes.func.isRequired,\n getErrorForInput: PropTypes.func.isRequired,\n text: PropTypes.shape({\n Transfers: PropTypes.shape({\n lbl_transfer_type: PropTypes.string,\n lbl_partial_transfer: PropTypes.string,\n lbl_source_account: PropTypes.string,\n lbl_leave_open: PropTypes.string,\n lbl_transfer_types: PropTypes.string,\n lbl_radio_amount: PropTypes.string,\n lbl_radio_percentage: PropTypes.string,\n lbl_total: PropTypes.string,\n lbl_add_account: PropTypes.string,\n }),\n })\n};\n\nexport function TransferStepOneContent(props) {\n const {\n sourceAccount,\n destinationAccounts,\n transfer,\n onTransferChange,\n onTargetChange,\n addTargetAccount,\n removeTargetAccount,\n showFullBalanceDialog,\n getErrorForInput,\n text: { Transfers },\n } = props;\n\n const amountTotalError = getErrorForInput('Transfer_amountTotal');\n\n return (\n \n
\n \n
\n \n
\n \n onTransferChange('transferType')}\n style={{\n display: 'flex'\n }}\n >\n \n Full Balance Transfer\n \n \n \n
\n \n }\n control={\n help_outline\n
\n \n
\n \n );\n}\n\nexport default LanguageHOC(TransferStepOneContent);\n","/*\n*\n* TransferTermsAndConditions Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Checkbox,\n FormControlLabel,\n Icon,\n} from '@mui/material';\nimport {\n currencyFormatter,\n} from '@frontend/common';\nimport { TransferInputTypes, TransferTypes } from '../typeConstants';\n\nimport styles from './styles.module.scss';\n\nTransferFromReview.propTypes = {\n transfer: PropTypes.object.isRequired,\n destinationAccounts: PropTypes.array.isRequired,\n sourceAccount: PropTypes.object.isRequired,\n Transfers: PropTypes.shape({\n title_source_account: PropTypes.string,\n head_source_status: PropTypes.string,\n head_account_number: PropTypes.string,\n head_account_hash: PropTypes.string,\n head_bene_name: PropTypes.string,\n head_account_type: PropTypes.string,\n head_account_option: PropTypes.string,\n head_option_change: PropTypes.string,\n head_opt_change: PropTypes.string,\n text_close_status: PropTypes.func,\n })\n};\n\nexport function TransferFromReview({ transfer, destinationAccounts, sourceAccount, Transfers }) {\n const compactedTargets = transfer.TargetAccounts.filter(account => account.AccountId !== '' &&\n ((transfer.transferType === TransferTypes.partial && account[transfer.transferInputType] !== 0) || (transfer.transferType === TransferTypes.full && account.Percentage > 0))\n ).map(target => ({\n ...destinationAccounts.find(account => account.accountId === target.AccountId),\n ...target,\n }));\n const optionChanges = compactedTargets.some(target => target.accountGroupId === sourceAccount.accountGroupId);\n const total = transfer.transferInputType === TransferInputTypes.Amount ?\n currencyFormatter(compactedTargets.reduce((sum, target) => sum + target.Amount, 0)) :\n `${compactedTargets.reduce((sum, target) => sum + target.Percentage, 0)}%`;\n\n return (\n \n
\n \n
\n \n {Transfers.lbl_source_account}\n
\n \n {formatAccountDisplayText(sourceAccount)}\n
\n \n {getErrorForInput('Transfer_sourceContainer')}\n
\n \n {transfer.transferType === TransferTypes.full ?\n onTransferChange('CloseAccount')}\n />\n }\n label={Transfers.lbl_leave_open}\n /> : null\n }\n
\n \n \n arrow_forward\n \n
\n \n onTransferChange('transferInputType')}\n options={[\n {\n active: transfer.transferInputType === TransferInputTypes.Amount,\n disabled: transfer.transferType === TransferTypes.full,\n label: '$',\n radioLabel: Transfers.lbl_radio_amount,\n value: TransferInputTypes.Amount,\n },\n {\n active: transfer.transferInputType === TransferInputTypes.Percentage,\n disabled: transfer.transferType === TransferTypes.full,\n label: '%',\n radioLabel: Transfers.lbl_radio_percentage,\n value: TransferInputTypes.Percentage,\n }\n ]}\n />\n {transfer.TargetAccounts.map((targetAccount, rowIndex) => {\n const accountErrorText = getErrorForInput(`Transfer_destinationContainer-${rowIndex}`);\n return (\n ({\n ...account,\n disabled: some(transfer.TargetAccounts, (dest, destIndex) => {\n return destIndex !== rowIndex && dest.AccountId === account.accountId;\n }),\n })\n )}\n canRemove={rowIndex !== 0}\n accountError={accountErrorText}\n inputError={getErrorForInput(`Transfer_inputContainer-${rowIndex}`)}\n inputFieldType={transfer.transferInputType}\n onAccountChange={onTargetChange(rowIndex)}\n onRemove={() => removeTargetAccount(rowIndex)}\n />\n );\n })}\n
\n \n \n sum + (account[transfer.transferInputType] || 0), 0)) :\n `${reduce(transfer.TargetAccounts, (sum, account) => sum + (account[transfer.transferInputType] || 0), 0)}%`\n }\n InputProps={{\n readOnly: true,\n disableUnderline: true,\n }}\n />\n {amountTotalError && {amountTotalError} }\n \n
\n\n \n
\n \n add}\n onClick={addTargetAccount}\n >\n {Transfers.lbl_add_account}\n \n
\n {Transfers.title_source_account}
\n\n {transfer.transferType === TransferTypes.full &&\n
\n \n
\n }\n {Transfers.head_source_status}
\n {Transfers.text_close_status(transfer.CloseAccount)}
\n \n
\n \n {Transfers.head_account_number}\n
\n \n {Transfers.head_account_hash}\n
\n \n {sourceAccount.accountNumber}\n
\n \n
\n \n {Transfers.head_bene_name}\n
\n \n {sourceAccount.beneficiary.name}\n
\n \n
\n \n {Transfers.head_account_type}\n
\n \n {sourceAccount.accountType}\n
\n \n
\n {optionChanges &&\n \n {Transfers.head_account_option}\n
\n \n {sourceAccount.option.name}\n
\n \n
\n }\n \n {Transfers.head_option_change}\n
\n \n {Transfers.head_opt_change}\n
\n \n \n {'check'}\n \n
\n \n
\n \n {transfer.transferInputType}\n
\n \n {total}\n
\n {Transfers.title_destination_account}{pluralize}
\n\n
\n \n
\n \n {Transfers.head_account_number}\n
\n \n {Transfers.head_account_hash}\n
\n {compactedTargets.map(target => (\n \n {target.accountNumber}\n
\n ))}\n \n
\n \n {Transfers.head_bene_name}{pluralize}\n
\n {compactedTargets.map(target => (\n \n {target.beneficiary.name}\n
\n ))}\n \n
\n \n {Transfers.head_account_type}\n
\n {compactedTargets.map(target => (\n \n {target.accountType}\n
\n ))}\n \n
\n {optionChanges &&\n \n {Transfers.head_account_option}\n
\n {compactedTargets.map(target => (\n \n {target.option.Name}\n
\n ))}\n \n
\n }\n \n {Transfers.head_option_change}\n
\n \n {Transfers.head_opt_change}\n
\n {compactedTargets.map(target => (\n \n \n {target.accountGroupId === sourceAccount.accountGroupId ? 'check' : 'close'}\n \n
\n ))}\n \n
\n {transfer.transferInputType === TransferInputTypes.Amount &&\n \n {transfer.transferInputType}{pluralize}\n
\n {compactedTargets.map(target => (\n \n {transfer.transferInputType === TransferInputTypes.Amount ? currencyFormatter(target.Amount) : `${target.Percentage}%`}\n
\n ))}\n \n
}\n {Transfers.lbl_total}:
\n {currencyFormatter(compactedTargets.reduce((sum, target) => sum + target.Amount, 0))}
\n \n {Transfers.text_terms_conditions()}\n
\n );\n}\n\nexport default TransferTermsAndConditions;\n","/*\n*\n* Transfer Component\n*\n*/\nimport React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport { Card, LoadingOverlay } from '@frontend/common';\nimport {\n Step,\n StepButton,\n Stepper,\n Button,\n} from '@mui/material';\nimport TransferSetup from './TransferStepOneContent';\nimport {\n TransferFromReview,\n TransferToReview,\n TransferTermsAndConditions,\n} from './TransferTermsAndConditions';\n\nimport styles from './styles.module.scss';\n\nexport class Transfer extends React.Component {\n static propTypes = {\n cardTitle: PropTypes.string.isRequired,\n sourceAccount: PropTypes.object,\n destinationAccounts: PropTypes.array,\n save: PropTypes.func.isRequired,\n transfer: PropTypes.object.isRequired,\n canContinue: PropTypes.func.isRequired,\n errors: PropTypes.array.isRequired,\n onTransferChange: PropTypes.func.isRequired,\n onTargetChange: PropTypes.func.isRequired,\n addTargetAccount: PropTypes.func.isRequired,\n removeTargetAccount: PropTypes.func.isRequired,\n createdDate: PropTypes.string.isRequired,\n text: PropTypes.shape({\n Transfers: PropTypes.shape({\n btn_back: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_finish: PropTypes.string,\n btn_next: PropTypes.string,\n btn_print: PropTypes.string,\n btn_submit: PropTypes.string,\n lbl_step_select: PropTypes.string,\n lbl_step_terms: PropTypes.string,\n lbl_step_confirm: PropTypes.string,\n text_print_copy: PropTypes.string,\n text_timezone: PropTypes.string,\n })\n })\n };\n\n static defaultProps = {\n sourceAccount: {},\n destinationAccounts: [],\n };\n\n state = {\n stepIndex: 0,\n termsChecked: false,\n isLoadingSubmit: false,\n transferSubmitted: false,\n };\n\n isSmallWindow = () => window.innerWidth < 600;\n\n onTermsToggled = () => {\n this.setState({\n termsChecked: !this.state.termsChecked\n });\n };\n\n getErrorForInput = (inputKey) => {\n const { errors } = this.props;\n const error = errors.find(err => err.key === inputKey);\n return error !== undefined ? error.message : '';\n };\n\n handlePrevStep = () => {\n this.setState({\n stepIndex: this.state.stepIndex - 1,\n });\n\n window.scrollTo(0, 0);\n };\n\n handleNextStep = () => {\n const { canContinue, transfer } = this.props;\n const { stepIndex, termsChecked, } = this.state;\n\n switch (stepIndex) {\n case 0: {\n canContinue(() => {\n this.setState({\n stepIndex: stepIndex + 1,\n });\n window.scrollTo(0, 0);\n });\n break;\n }\n case 1: {\n if (!termsChecked) {\n return;\n }\n canContinue(() => {\n this.setState({ isLoadingSubmit: true });\n this.props.save()\n .then(() => {\n this.setState({\n isLoadingSubmit: false,\n stepIndex: stepIndex + 1,\n transferSubmitted: true,\n });\n\n // Qualtrics Intercept for full balance transfer / account closure. Launches survey \n if (transfer.CloseAccount) {\n try {\n document.cookie = 'closeAcct=true';\n window.QSI.API.run(); // stimulate Targeting.php\n window.QSI.API.unload();\n window.QSI.API.load();\n window.QSI.API.run(); // stimulate Targeting.php\n }\n catch (error) {\n // return null;\n }\n }\n\n window.scrollTo(0, 0);\n })\n .catch(() => {\n this.setState({\n isLoadingSubmit: false,\n stepIndex: this.state.stepIndex - 1\n }, this.goToPreviousPage());\n window.scrollTo(0, 0);\n });\n });\n break;\n }\n case 2: {\n if (!termsChecked) {\n return;\n }\n canContinue(() => {\n this.setState({ isLoadingSubmit: true });\n this.props.save()\n .catch(() => {\n this.setState({\n isLoadingSubmit: false,\n stepIndex: this.state.stepIndex - 1\n });\n });\n });\n break;\n }\n default: break;\n }\n };\n\n stepperCompose = () => {\n const { Transfers } = this.props.text;\n const { transferSubmitted } = this.state;\n const stepperStyle = {\n width: this.isSmallWindow() ? '' : '650px'\n };\n return (\n \n
\n {dayjs(this.props.createdDate)\n .format('MM/DD/YYYY h:mm A')} {this.props.text.Transfers.text_timezone}
,\n \n {this.props.text.Transfers.text_print_copy}\n
\n ];\n default: break;\n }\n };\n\n goToPreviousPage = () => {\n this.props.history.goBack();\n }\n\n stepperButtonsCompose = () => {\n const { Transfers } = this.props.text;\n const { stepIndex, termsChecked, isLoadingSubmit, transferSubmitted } = this.state;\n const cancelButton = (\n \n \n \n
\n );\n }\n}\n\nexport default withRouter(LanguageHOC(Transfer));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { Modal } from '@frontend/common';\n\nexport const FullBalanceDialog = ({ show, onClose, text: { Transfers } }) => (\n \n
\n \n {this.stepperCompose()}\n
\n \n {this.stepperContentCompose()}\n
\n \n {this.stepperButtonsCompose()}\n
\n \n
\n );\n\n return (\n \n
\n \n {Transfers.text_learn_more(form400, form300)}\n
\n \n {\n this.setState({\n showFullBalanceDialog: false,\n hasSeenFullBalanceDialog: true,\n });\n }}\n />\n {\n this.setState({ showOptionChangeModal: false });\n }}\n />\n this.setState({\n showDeferredEarningsConfirmModal: false,\n transfer: { ...transfer, transferType: TransferTypes.partial }\n })}\n onConfirm={() => this.setState({\n hasConfirmedDeferredEarnings: true,\n showDeferredEarningsConfirmModal: false,\n showFullBalanceDialog: true,\n })}\n />\n this.setState({ showLearnMore: false })}\n form400={form400}\n form300={form300}\n />\n\n
\n\n \n {(location.pathname.indexOf(Transfers.nav_path_new) > -1 || location.pathname.indexOf(Transfers.nav_path_edit) > -1) &&\n -1) },\n ]}\n />}\n
\n \n
\n \n this.setState({ showFullBalanceDialog: true })}\n sourceAccount={sourceAccount}\n destinationAccounts={destinationAccounts}\n save={editing ? this.editTransfer : this.createNewTransfer}\n createdDate={createdDate}\n />\n
\n\n \n this.setState({ showLearnMore: true })}\n >\n Learn More\n \n
\n\n \n
\n );\n })}\n\n {contributionDetails.canContributeAccountList.length !== selectedAccounts.length && !isEditing &&\n \n accountSelect(value, rowIndex)}\n options={(isEditing ? selectedAccounts : contributionDetails.canContributeAccountList).map(account => ({\n value: account.accountId,\n display: `${account.beneficiary.name.toUpperCase()} ...${account.accountNumber.toString().slice(account.accountNumber.toString().length - 5)}`,\n props: {\n disabled: (selectedAccounts.some(selAccount => selAccount.accountId === account.accountId)\n && selectedAccounts[rowIndex].accountId !== account.accountId)\n || account.overMaxBalance,\n },\n }))}\n FormControlProps={{ style: { width: '100%', minWidth: '256px', textAlign: 'left' } }}\n MenuItemProps={{\n classes: { root: classes.root }\n }}\n />\n
\n\n \n amountHandle(vals, rowIndex)}\n value={selectedAccount.contributionAmount}\n style={{ width: '100%' }}\n />\n
\n\n {rowIndex !== 0 &&\n \n removeAccount(rowIndex)}\n title={ContributionOneTimeStep0.lbl_remove_account}\n iconProps={{ color: 'secondary' }}\n />\n
\n }\n \n add}\n onClick={addAccount}\n >\n {ContributionOneTimeStep0.lbl_add_account}\n \n
\n }\n\n \n {errors.some(error => error.key === 'amount') &&\n
\n \n \n {ContributionOneTimeStep0.err_amount_min_max(currencyFormatter(contributionEnvironmentVars.MinimumOneTimeOnlineContribution), currencyFormatter(contributionEnvironmentVars.MaximumOneTimeOnlineContribution))}\n \n
}\n \n
\n {ContributionOneTimeStep0.text_total}
\n {currencyFormatter(selectedAccounts.map(account => account.contributionAmount).reduce((val1, val2) => val1 + val2, 0))}
\n \n error.key === 'day1')}\n helperText={errorGet('day1')}\n sx={{ minWidth: '256px', width: '100%' }}\n />\n
\n\n {agentBankAccounts.length > 0 ?\n \n \n \n\n
\n :\n \n \n add}\n onClick={toggleShowAddBank}\n >\n {ContributionOneTimeStep1.btn_add_bank}\n \n \n
\n \n \n \n {ContributionOneTimeStep1.btn_add_bank}\n \n \n
\n }\n \n\n
\n\n \n
\n\n {ContributionOneTimeReview.title_account_number}
\n {populatedAccounts.map(account => ({account.accountNumber}
))}\n \n
\n\n {ContributionOneTimeReview.title_bene_name}
\n {populatedAccounts.map(account => ({account.beneficiary.name.toUpperCase()}
))}\n \n
\n\n {ContributionOneTimeReview.title_bank_account}
\n {bankAccount.BankName} {bankAccount.BankAccountType}, {bankAccount.MaskedBankAccountNumber}
\n \n
\n\n {ContributionOneTimeReview.title_date}
\n {populatedAccounts.map(account => ({dayjs(day1).format('L')}
))}\n \n
\n {ContributionOneTimeReview.title_amount}
\n {populatedAccounts.map(account => ({currencyFormatter(account.contributionAmount)}
))}\n \n
\n {ContributionOneTimeReview.title_total}
\n {currencyFormatter(populatedAccounts.map(account => account.contributionAmount).reduce((val1, val2) => val1 + val2, 0))}
\n \n
\n );\n }\n}\n\nexport default connect(select, {})(LanguageHOC(TermsConditions));\n","/*\n *\n * Step2Terms Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Checkbox,\n} from '@frontend/common';\nimport ReviewDetails from './ReviewDetails';\nimport TermsConditions from 'components/Features/protected/Accounts/Transactions/Contributions/TermsCondition';\nimport styles from '../styles.module.scss';\n\nStep2Terms.propTypes = {\n contribution: PropTypes.object.isRequired,\n termsChecked: PropTypes.bool.isRequired,\n toggleTermsChecked: PropTypes.func.isRequired,\n phoneEnvironmentVars: PropTypes.object.isRequired,\n text: PropTypes.shape({\n ContributionOneTimeStep2: PropTypes.shape({\n lbl_read_terms: PropTypes.string,\n }),\n })\n};\n\nexport function Step2Terms({\n contribution,\n termsChecked,\n toggleTermsChecked,\n phoneEnvironmentVars,\n text,\n}) {\n return (\n {ContributionTermsConditions.head_title}
\n{ContributionTermsConditions.head_review_terms}
\n {isSpecialContribution && (\n\n
\n )}\n {ContributionTermsConditions.text_about_special_occasion}
\n- \n {ContributionTermsConditions.text_about_special.map(line =>
- {line} )}\n
{ContributionTermsConditions.text_bad_accounts_warning}
\n- \n {ContributionTermsConditions.text_bad_accounts.map(line =>
- {line} )}\n
{ContributionTermsConditions.text_check}
\n- \n {ContributionTermsConditions.text_check_requirements.map(line =>
- {line} )}\n
{ContributionTermsConditions.text_notes}
\n- \n {ContributionTermsConditions.text_notes_list1.map(line =>
- {line} )}\n
- {ContributionTermsConditions.text_notes_list2}{ContributionTermsConditions.text_notes_list3} \n
- {subLine} )}\n
- {line} ;\n }\n })}\n
- {ContributionTermsConditions.text_notes_list5} \n
- {Payments.text_bank_hold_language(ACHBankWithdrawalLanguage)} \n
- \n {text_notes_list4_sublists(phoneEnvironmentVars, isSpecialContribution).map(line => {\n if (Array.isArray(line)) {\n return (\n
- \n {line.map(subLine =>
\n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default (LanguageHOC(Step3PrintReview));","/* eslint-disable newline-per-chained-call */\n/*\n*\n* OneTime Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Prompt } from 'react-router-dom';\nimport { isEqual, cloneDeep } from 'lodash';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport * as validator from 'utils/helpers/form_validation';\nimport {\n Card,\n notificationShow,\n} from '@frontend/common';\nimport {\n ONE_TIME\n} from '../constants';\nimport TransactionStepper from 'components/Features/protected/Accounts/Transactions/TransactionStepper';\nimport { Step0Amount, Step1DateAndBank, Step2Terms, Step3PrintReview, } from 'components/Features/protected/Accounts/Transactions/Contributions/OneTime/StepComponents/';\n\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n contributionEnvironmentVars: state.static.environmentVars,\n contributionDetails: state.transactions.contributionDetails,\n agentBankAccounts: state.payments.agentBankAccounts,\n});\n\nexport class OneTime extends React.Component {\n static propTypes = {\n agentBankAccounts: PropTypes.array.isRequired,\n accountId: PropTypes.number.isRequired,\n bankAccountsLoading: PropTypes.bool.isRequired,\n notificationShow: PropTypes.func.isRequired,\n contributionCreate: PropTypes.func.isRequired,\n contributionEdit: PropTypes.func.isRequired,\n toggleShowAddBank: PropTypes.func.isRequired,\n renderDuplicateConfirmModal: PropTypes.func.isRequired,\n duplicateContributionModalOpen: PropTypes.bool.isRequired,\n createdDate: PropTypes.string.isRequired,\n contributionEnvironmentVars: PropTypes.shape({\n FaxNumber: PropTypes.string,\n CurrentTradeDate: PropTypes.string,\n ValidOneTimeContributionDates: PropTypes.array,\n MaximumOneTimeOnlineContribution: PropTypes.number,\n MinimumOneTimeOnlineContribution: PropTypes.number,\n MaximumOnlineContributionAmount: PropTypes.number,\n MaximumOnlineContributionDays: PropTypes.number,\n SupportPhoneNumber: PropTypes.string,\n }).isRequired,\n contributionDetails: PropTypes.shape({\n canContributeAccountList: PropTypes.array.isRequired,\n contribution: PropTypes.object.isRequired,\n }),\n isEditing: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n ContributionOneTime: PropTypes.shape({\n err_account_select: PropTypes.string,\n err_bankAccount_select: PropTypes.string,\n err_step_does_not_exist: PropTypes.string,\n err_valid_amount: PropTypes.string,\n lbl_step_labels: PropTypes.array,\n msg_unsaved_changes: PropTypes.string,\n })\n }),\n }\n\n state = {\n contribution: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: this.props.contributionEnvironmentVars.CurrentTradeDate,\n selectedAccounts: [],\n type: ONE_TIME\n },\n contributionScreenshot: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: this.props.contributionEnvironmentVars.CurrentTradeDate,\n selectedAccounts: [],\n type: ONE_TIME\n },\n errors: [],\n step0ValidationHasRun: false,\n step1ValidationHasRun: false,\n termsChecked: false,\n stepHasError: false,\n }\n\n displayUnsavedChangesPrompt = () => {\n return !this.state.bankAccountsLoading && !isEqual(this.state.contribution, this.state.contributionScreenshot);\n }\n\n clearStepErrors = () => {\n this.setState({\n errors: [],\n stepHasError: false,\n });\n }\n\n formValidate = (step) => {\n const { ContributionOneTime } = this.props.text;\n const { MaximumOneTimeOnlineContribution, MinimumOneTimeOnlineContribution, ValidOneTimeContributionDates, } = this.props.contributionEnvironmentVars;\n const { selectedAccounts, bankAccount, day1 } = this.state.contribution;\n const errors = [];\n\n switch (step) {\n case 0: {\n selectedAccounts.forEach(({ accountId, contributionAmount }, index) => {\n const message = validator.amountValidator(contributionAmount, MinimumOneTimeOnlineContribution, MaximumOneTimeOnlineContribution); // validates amounts against min and max parameters\n if (accountId && message) {\n errors.push({\n key: 'amount',\n message,\n row: index\n });\n }\n if (!accountId && contributionAmount) { // validates all accounts that also have amounts entered have a beneficiary selected\n errors.push({\n key: 'account',\n message: ContributionOneTime.err_account_select,\n row: index\n });\n }\n });\n this.setState({ errors, step0ValidationHasRun: true, stepHasError: errors.length > 0 });\n break;\n }\n\n case 1: {\n if (!bankAccount.BankAccountId) {\n errors.push({\n key: 'bankAccount',\n message: ContributionOneTime.err_bankAccount_select,\n });\n }\n const message = validator.calendarValidator(dayjs(day1), dayjs(ValidOneTimeContributionDates[0]),\n dayjs(ValidOneTimeContributionDates[ValidOneTimeContributionDates.length - 1]));\n if (message) {\n errors.push({\n key: 'day1',\n message,\n });\n }\n this.setState({ errors, step1ValidationHasRun: true, stepHasError: errors.length > 0 });\n break;\n }\n default: break;\n }\n return errors.length === 0;\n }\n\n errorGet = (key, row) => {\n const error = this.state.errors.find(error => error.key === key && error.row === row);\n return error ? error.message : '';\n }\n\n contributionSet = (step, key, value) => {\n this.setState(({ contribution }) => {\n return { contribution: { ...contribution, [key]: value } };\n }, () => {\n if (\n (step === 0 && this.state.step0ValidationHasRun) ||\n (step === 1 && this.state.step1ValidationHasRun)\n ) {\n this.formValidate(step);\n }\n });\n }\n\n accountSelect = (value, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n const selectedAccount = this.props.contributionDetails.canContributeAccountList.find(account => account.accountId === value);\n const accountUpdatedWithAmount = { ...selectedAccount, contributionAmount: selectedAccounts[rowIndex].contributionAmount };\n\n selectedAccounts.splice(rowIndex, 1, accountUpdatedWithAmount);\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n amountHandle = ({ floatValue = 0 }, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n selectedAccounts[rowIndex].contributionAmount = floatValue;\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n addAccount = () => {\n const { contribution: { selectedAccounts } } = this.state;\n const newSelectedAccounts = [...selectedAccounts, { accountId: '', contributionAmount: 0 }];\n this.contributionSet(0, 'selectedAccounts', newSelectedAccounts);\n }\n\n removeAccount = (rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n selectedAccounts.splice(rowIndex, 1);\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n contributionDateHandle = (e) => {\n this.contributionSet(1, 'day1', e);\n }\n\n contributionDatesDisable = (date) => {\n return this.props.contributionEnvironmentVars.ValidOneTimeContributionDates.every(validContributionDate => {\n return !dayjs(validContributionDate).isSame(dayjs(date), 'day') ||\n dayjs(this.props.contributionEnvironmentVars.CurrentTradeDate).isAfter(dayjs(date), 'day');\n });\n }\n\n bankAccountSelectHandle = (value) => {\n this.contributionSet(1, 'bankAccount', this.props.agentBankAccounts.find(bankAccount => bankAccount.BankAccountId === value));\n }\n\n contributionCreateHandler = () => {\n return this.props.contributionCreate(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n contributionEditHandler = () => {\n return this.props.contributionEdit(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n renderStepComponent = step => {\n const { agentBankAccounts, bankAccountsLoading, contributionDetails, contributionEnvironmentVars, isEditing, toggleShowAddBank, createdDate, text: { ContributionOneTime } } = this.props;\n const { contribution, errors, termsChecked, } = this.state;\n let stepComponent;\n\n switch (step) {\n case 0: {\n stepComponent = (\n {dayjs(createdDate)\n .format('MM/DD/YYYY h:mm A')} {text.ContributionOneTimeStep3.text_timezone}
\n \n {text.ContributionOneTimeStep3.text_print_copy}\n
\n \n this.accountSelect(value, rowIndex)}\n amountHandle={(vals, rowIndex) => this.amountHandle(vals, rowIndex)}\n removeAccount={(rowIndex) => this.removeAccount(rowIndex)}\n addAccount={this.addAccount}\n />\n
\n );\n break;\n }\n\n case 1: {\n stepComponent = (\n \n this.bankAccountSelectHandle(value)}\n toggleShowAddBank={() => toggleShowAddBank()}\n contributionDateHandle={this.contributionDateHandle}\n contributionDatesDisable={this.contributionDatesDisable}\n errorGet={(key) => this.errorGet(key)}\n />\n
\n );\n break;\n }\n\n case 2: {\n stepComponent = (\n {ContributionOneTime.err_step_does_not_exist}
;\n }\n return stepComponent;\n }\n\n componentDidMount() {\n const { canContributeAccountList, contribution, } = this.props.contributionDetails;\n if (canContributeAccountList.length > 0) {\n if (this.props.isEditing) {\n this.setState({ contribution, contributionScreenshot: cloneDeep(contribution) });\n }\n else {\n const defaultAccount = canContributeAccountList.find(account => account.accountId === this.props.accountId);\n this.setState(({ contribution }) => {\n const contributionUpdated = {\n ...contribution,\n selectedAccounts: [defaultAccount],\n };\n\n return ({\n contribution: contributionUpdated,\n contributionScreenshot: cloneDeep(contributionUpdated)\n });\n });\n }\n }\n\n }\n\n render() {\n const { isEditing, text, renderDuplicateConfirmModal, } = this.props;\n return (\n \n \n this.formValidate(step)}\n renderStepComponent={(step) => this.renderStepComponent(step)}\n handleSubmit={() => isEditing ? this.contributionEditHandler(this.state.contribution) : this.contributionCreateHandler(this.state.contribution)}\n stepLabels={text.ContributionOneTime.lbl_step_labels}\n submitStep={2}\n termsChecked={this.state.termsChecked}\n renderConfirmModal={renderDuplicateConfirmModal}\n />\n \n\n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n notificationShow,\n})(LanguageHOC(OneTime)));\n","/*\n *\n * Step0AmountAndBank Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Button,\n Icon,\n FormHelperText\n} from '@mui/material';\nimport { withStyles } from '@mui/styles';\nimport {\n CurrencyInput,\n currencyFormatter,\n Dropdown,\n LoadingOverlay,\n} from '@frontend/common';\n\nimport styles from '../styles.module.scss';\n\nconst muiStyles = () => ({\n root: {\n whiteSpace: 'normal',\n wordBreak: 'normal',\n overflowWrap: 'anywhere'\n }\n});\n\nStep0AmountAndBank.propTypes = {\n classes: PropTypes.object.isRequired,\n isEditing: PropTypes.bool.isRequired,\n agentBankAccounts: PropTypes.array.isRequired,\n bankAccountsLoading: PropTypes.bool.isRequired,\n errors: PropTypes.array.isRequired,\n toggleShowAddBank: PropTypes.func.isRequired,\n contribution: PropTypes.object.isRequired,\n contributionDetails: PropTypes.object.isRequired, \n contributionEnvironmentVars: PropTypes.object.isRequired,\n errorGet: PropTypes.func.isRequired,\n accountSelect: PropTypes.func.isRequired,\n amountHandle: PropTypes.func.isRequired,\n bankAccountSelectHandle: PropTypes.func.isRequired,\n text: PropTypes.shape({\n ContributionRecurringStep0: PropTypes.shape({\n btn_add_bank: PropTypes.string,\n err_amount_between: PropTypes.func,\n lbl_amount: PropTypes.string,\n lbl_bank_account: PropTypes.string,\n lbl_selected_account: PropTypes.string,\n text_add_new_bank: PropTypes.string,\n })\n })\n};\n\nexport function Step0AmountAndBank({\n classes,\n isEditing,\n agentBankAccounts,\n bankAccountsLoading,\n toggleShowAddBank,\n contribution,\n contributionDetails, \n contributionEnvironmentVars: { MinimumRecurringOnlineContribution, MaximumRecurringOnlineContribution, },\n errorGet,\n accountSelect,\n amountHandle,\n bankAccountSelectHandle,\n text: { ContributionRecurringStep0 },\n}) {\n const rowIndex = 0; //hard coding rowIndex as 0 since only one account can be selected in Recurring\n const agentAccountsFormatted = agentBankAccounts.map(account => {\n if (account.Nickname && account.Nickname.length > 0) {\n return {\n value: account.BankAccountId,\n display: `${account.Nickname}, ${account.MaskedBankAccountNumber}`\n };\n }\n else {\n return {\n value: account.BankAccountId,\n display: account.BankAccountId === 0 ? account.BankName : `${account.BankName}, ${account.MaskedBankAccountNumber}`\n };\n }\n });\n return (\n \n
\n\n \n accountSelect(value, rowIndex)}\n options={(isEditing ? contribution.selectedAccounts : contributionDetails.canContributeAccountList).map(account => ({\n value: account.accountId,\n display: `${account.beneficiary.name.toUpperCase()} ...${account.accountNumber.toString().slice(account.accountNumber.toString().length - 5)}`,\n props: {\n disabled: (contribution.selectedAccounts.some(selAccount => selAccount.accountId === account.accountId) \n && contribution.selectedAccounts[rowIndex].accountId !== account.accountId)\n || account.overMaxBalance,\n },\n }))}\n FormControlProps={{ style: { width: '100%', minWidth: '256px', textAlign: 'left' } }}\n MenuItemProps={{\n classes: { root: classes.root }\n }}\n />\n
\n \n
\n\n {agentBankAccounts.length > 0 ?\n \n \n \n\n
\n :\n \n \n add}\n onClick={toggleShowAddBank}\n >\n {ContributionRecurringStep0.btn_add_bank}\n \n \n
\n \n
\n }\n \n \n {ContributionRecurringStep0.btn_add_bank}\n \n
\n \n {errorGet('bankAccount') &&\n \n {ContributionRecurringStep0.text_add_new_bank}\n \n }\n
\n \n {errorGet('amount') &&\n \n {ContributionRecurringStep0.err_amount_between(currencyFormatter(MinimumRecurringOnlineContribution), currencyFormatter(MaximumRecurringOnlineContribution), currencyFormatter(MaximumRecurringOnlineContribution / 2))}\n \n }\n
\n \n contributionSet(1, 'type', e.target.value)} // eslint-disable-line\n value={type}\n >\n
\n );\n}\n\nexport default (LanguageHOC(Step1Frequency));","/*\n *\n * ReviewDetails Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport {\n currencyFormatter,\n} from '@frontend/common';\nimport { MONTHLY } from '../../constants';\n\nimport styles from '../styles.module.scss';\n\nReviewDetails.propTypes = {\n contribution: PropTypes.object.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n text: PropTypes.shape({\n ContributionRecurringReview: PropTypes.shape({\n text_scheduled_days: PropTypes.func,\n title_account_number: PropTypes.string,\n title_amount: PropTypes.string,\n title_bank_account: PropTypes.string,\n title_bene_name: PropTypes.string,\n title_end_date: PropTypes.string,\n title_next_date: PropTypes.string,\n title_scheduled_day: PropTypes.func,\n })\n })\n};\n\nexport function ReviewDetails({\n contribution: { bankAccount, day1, day2, selectedAccounts, type },\n nextRunDates,\n text: { ContributionRecurringReview },\n}) {\n let nextRunDate = '';\n if (type === MONTHLY) {\n nextRunDate = dayjs(nextRunDates.day1);\n }\n else {\n nextRunDate = dayjs(nextRunDates.day1).isBefore(dayjs(nextRunDates.day2), 'day') ? dayjs(nextRunDates.day1) : dayjs(nextRunDates.day2);\n }\n\n return (\n \n {errorGet('amount') &&\n \n {ContributionRecurringStep1.err_amount_between(currencyFormatter(MinimumRecurringOnlineContribution), currencyFormatter(MaximumRecurringOnlineContribution), currencyFormatter(MaximumRecurringOnlineContribution / 2))}\n \n }\n
\n\n \n contributionDateHandle(date, 'day1')}\n shouldDisableDate={contributionDatesDisable}\n value={day1}\n />\n {Boolean(!errorGet('day1')) && nextRunDateCompose('start1')}\n
\n\n {type === TWICE_MONTHLY &&\n \n contributionDateHandle(date, 'day2')}\n shouldDisableDate={(date) => DISABLED_DATES.includes(dayjs(date).date())}\n value={day2 ? day2 : null}\n />\n {Boolean(!errorGet('day2')) && dayjs(day2).isValid() && nextRunDateCompose('start2')}\n
\n }\n\n \n contributionDateHandle(date, 'endDate')}\n value={selectedAccounts[0].endDate ? selectedAccounts[0].endDate : null}\n fullWidth\n />\n
\n \n \n
\n );\n}\n\nexport default (LanguageHOC(ReviewDetails));","/*\n *\n * Step2Terms Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Checkbox,\n} from '@frontend/common';\nimport ReviewDetails from './ReviewDetails';\nimport TermsConditions from 'components/Features/protected/Accounts/Transactions/Contributions/TermsCondition';\nimport styles from '../styles.module.scss';\n\nStep2Terms.propTypes = {\n contribution: PropTypes.object.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n termsChecked: PropTypes.bool.isRequired,\n toggleTermsChecked: PropTypes.func.isRequired,\n phoneEnvironmentVars: PropTypes.object.isRequired,\n text: PropTypes.shape({\n ContributionRecurringStep2: PropTypes.shape({\n lbl_read_terms: PropTypes.string,\n })\n })\n};\n\nexport function Step2Terms({\n contribution,\n nextRunDates,\n termsChecked,\n toggleTermsChecked,\n phoneEnvironmentVars,\n text,\n}) {\n return (\n {ContributionRecurringReview.title_account_number}
\n {selectedAccounts.map(account => ({account.accountNumber}
))}\n \n\n \n {ContributionRecurringReview.title_bene_name}
\n {selectedAccounts.map(account => ({account.beneficiary.name.toUpperCase()}
))}\n \n\n \n {ContributionRecurringReview.title_scheduled_day(type === MONTHLY)}
\n {ContributionRecurringReview.text_scheduled_days(type === MONTHLY, dayjs(day1).format('Do'), dayjs(day2).format('Do'))}
\n \n\n \n {ContributionRecurringReview.title_next_date}
\n {nextRunDate.format('L')}
\n \n\n {selectedAccounts[0].endDate && (\n \n
\n )}\n\n \n {ContributionRecurringReview.title_end_date}
\n {dayjs(selectedAccounts[0].endDate).format('L')}
\n {ContributionRecurringReview.title_amount}
\n {selectedAccounts.map(account => ({currencyFormatter(account.contributionAmount)}
))}\n \n\n \n {ContributionRecurringReview.title_bank_account}
\n {bankAccount.BankName} {bankAccount.BankAccountType}, {bankAccount.MaskedBankAccountNumber}
\n \n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default (LanguageHOC(Step3PrintReview));","/* eslint-disable newline-per-chained-call */\n/*\n*\n* Recurring Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Prompt } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport { clone, isEqual, cloneDeep } from 'lodash';\nimport * as validator from 'utils/helpers/form_validation';\nimport {\n Card,\n notificationShow,\n} from '@frontend/common';\nimport { getNextRunDate, } from 'components/Features/protected/Accounts/Transactions/actions';\nimport {\n MONTHLY,\n TWICE_MONTHLY,\n DISABLED_DATES,\n} from '../constants';\nimport TransactionStepper from 'components/Features/protected/Accounts/Transactions/TransactionStepper';\nimport { Step0AmountAndBank, Step1Frequency, Step2Terms, Step3PrintReview } from 'components/Features/protected/Accounts/Transactions/Contributions/Recurring/StepComponents/';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n contributionEnvironmentVars: state.static.environmentVars,\n contributionDetails: state.transactions.contributionDetails,\n agentBankAccounts: state.payments.agentBankAccounts,\n nextRunDates: state.transactions.nextRunDates.monthly,\n});\n\nexport class Recurring extends React.Component {\n static propTypes = {\n agentBankAccounts: PropTypes.array.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n accountId: PropTypes.number.isRequired,\n isEditing: PropTypes.bool.isRequired,\n bankAccountsLoading: PropTypes.bool.isRequired,\n notificationShow: PropTypes.func.isRequired,\n getNextRunDate: PropTypes.func.isRequired,\n contributionCreate: PropTypes.func.isRequired,\n contributionEdit: PropTypes.func.isRequired,\n toggleShowAddBank: PropTypes.func.isRequired,\n renderDuplicateConfirmModal: PropTypes.func.isRequired,\n duplicateContributionModalOpen: PropTypes.bool.isRequired,\n createdDate: PropTypes.string.isRequired,\n contributionEnvironmentVars: PropTypes.shape({\n CurrentTradeDate: PropTypes.string.isRequired,\n MaximumRecurringOnlineContribution: PropTypes.number.isRequired,\n MinimumRecurringOnlineContribution: PropTypes.number.isRequired,\n MaximumOnlineContributionAmount: PropTypes.number.isRequired,\n MaximumRecurringContributionLeadDays: PropTypes.number.isRequired,\n ValidRecurringContributionDates: PropTypes.array.isRequired,\n SupportPhoneNumber: PropTypes.string.isRequired,\n FaxNumber: PropTypes.string.isRequired,\n }),\n contributionDetails: PropTypes.shape({\n canContributeAccountList: PropTypes.array,\n contribution: PropTypes.shape({\n day1: PropTypes.string,\n day2: PropTypes.string,\n endDate: PropTypes.string,\n }),\n selectedAccountId: PropTypes.number,\n // contribution: PropTypes.bool, TODO: Update this during edit story\n }).isRequired,\n text: PropTypes.shape({\n ContributionRecurring: PropTypes.shape({\n msg_unsaved_changes: PropTypes.string,\n err_bankAccount_select: PropTypes.string,\n err_end_date_after_start: PropTypes.string,\n err_end_date_after_both: PropTypes.string,\n err_second_date_required: PropTypes.string,\n err_second_date_within_month: PropTypes.string,\n err_step_does_not_exist: PropTypes.string,\n lbl_step_labels: PropTypes.array,\n text_end_before_next_run: PropTypes.string,\n text_next_run: PropTypes.string,\n })\n }),\n }\n\n state = {\n contribution: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: '',\n day2: '',\n selectedAccounts: [],\n type: MONTHLY,\n },\n contributionScreenshot: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: '',\n day2: '',\n selectedAccounts: [],\n type: MONTHLY,\n },\n errors: [],\n step0ValidationHasRun: false,\n step1ValidationHasRun: false,\n termsChecked: false,\n stepHasError: false,\n };\n\n displayUnsavedChangesPrompt = () => {\n return !this.state.bankAccountsLoading && !isEqual(this.state.contribution, this.state.contributionScreenshot);\n }\n\n clearStepErrors = () => {\n this.setState({\n errors: [],\n });\n }\n\n accountSelect = (value, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n const selectedAccount = this.props.contributionDetails.canContributeAccountList.find(account => account.accountId === value);\n const accountUpdatedWithAmount = { ...selectedAccount, contributionAmount: selectedAccounts[rowIndex].contributionAmount };\n\n selectedAccounts.splice(rowIndex, 1, accountUpdatedWithAmount);\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n amountHandle = ({ floatValue = 0 }) => {\n const { selectedAccounts } = this.state.contribution;\n selectedAccounts[0].contributionAmount = floatValue;\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n bankAccountSelectHandle = (value) => {\n this.contributionSet(0, 'bankAccount', this.props.agentBankAccounts.find(bankAccount => bankAccount.BankAccountId === value));\n }\n\n contributionDateHandle = (date, day) => {\n const { selectedAccounts } = this.state.contribution;\n if (day === 'endDate') {\n selectedAccounts[0].endDate = date;\n this.contributionSet(1, 'selectedAccounts', selectedAccounts);\n }\n else {\n this.contributionSet(1, day, date);\n // if day1 is now showing after day2, update day2 to be 1 day past day1.\n if (day === 'day1' && dayjs(date).isSameOrAfter(this.state.contribution.day2)) {\n this.contributionSet(1, 'day2', dayjs(date).add(1, 'd'));\n this.nextRunDateGet(dayjs(date).add(1, 'd'), 'day2');\n }\n }\n\n this.nextRunDateGet(date, day);\n }\n\n contributionFormat = () => {\n const { contribution } = this.state;\n if (contribution.type === MONTHLY) {\n contribution.day2 = null;\n }\n if (this.props.isEditing) {\n return this.contributionEditHandler(contribution);\n }\n else {\n return this.contributionCreateHandler(contribution);\n }\n }\n\n contributionSet = (step, key, value) => {\n this.setState(({ contribution }) => {\n return { contribution: { ...contribution, [key]: value } };\n }, () => {\n if (\n (step === 0 && this.state.step0ValidationHasRun) ||\n (step === 1 && this.state.step1ValidationHasRun)\n ) {\n this.formValidate(step);\n }\n });\n }\n\n contributionDatesDisable = (date) => {\n return this.props.contributionEnvironmentVars.ValidRecurringContributionDates.every(validContributionDate => {\n return !dayjs(validContributionDate).isSame(dayjs(date), 'day') ||\n dayjs(this.props.contributionEnvironmentVars.CurrentTradeDate).isAfter(dayjs(date), 'day');\n });\n }\n\n nextMinDateGet = (startDate = this.state.contribution.day1) => {\n let momentDate = dayjs(startDate).add(1, 'd');\n\n if (DISABLED_DATES.includes(momentDate.date())) {\n do {\n momentDate = dayjs(momentDate).add(1, 'd');\n }\n while (DISABLED_DATES.includes(momentDate.date()));\n }\n\n return momentDate;\n }\n\n nextRunDateCompose = (start) => {\n const {\n contributionDetails: { contribution: { day1, day2, endDate } },\n nextRunDates,\n text: { ContributionRecurring },\n } = this.props;\n\n if (\n endDate &&\n (dayjs(day1).isSameOrAfter(endDate) || dayjs(day2).isSameOrAfter(endDate))\n ) {\n return {ContributionRecurring.text_end_before_next_run};\n }\n\n return {ContributionRecurring.text_next_run} {dayjs(start === 'start1' ? nextRunDates.day1 : nextRunDates.day2).format('L')};\n }\n\n nextRunDateGet = (date, day) => {\n if (dayjs(date).isValid()) {\n this.props.getNextRunDate(date, day, MONTHLY);\n }\n }\n\n errorGet = (key) => {\n const error = this.state.errors.find(error => error.key === key);\n return error ? error.message : '';\n }\n\n formValidate = (step) => {\n const { ContributionRecurring } = this.props.text;\n const { MaximumRecurringOnlineContribution, MinimumRecurringOnlineContribution, CurrentTradeDate, MaximumRecurringContributionLeadDays } = this.props.contributionEnvironmentVars;\n const { selectedAccounts, bankAccount, day1, day2, type } = this.state.contribution;\n const { contributionAmount, endDate } = selectedAccounts[0];\n const errors = [];\n\n const maxContributionAmount = type === TWICE_MONTHLY ? MaximumRecurringOnlineContribution / 2 : MaximumRecurringOnlineContribution;\n const amountMessage = validator.amountValidator(contributionAmount, MinimumRecurringOnlineContribution, maxContributionAmount);\n if (amountMessage) {\n errors.push({\n key: 'amount',\n message: amountMessage\n });\n }\n\n switch (step) {\n case 0: {\n if (!bankAccount.BankAccountId) {\n errors.push({\n key: 'bankAccount',\n message: ContributionRecurring.err_bankAccount_select,\n });\n }\n\n this.setState({ errors, step0ValidationHasRun: true, stepHasError: errors.length > 0 });\n break;\n }\n case 1: {\n const day1Message = validator.calendarValidator(day1, CurrentTradeDate, dayjs(CurrentTradeDate).add(MaximumRecurringContributionLeadDays, 'd'));\n if (day1Message) {\n errors.push({\n key: 'day1',\n message: day1Message,\n });\n }\n\n if (type === TWICE_MONTHLY) {\n if (!dayjs(day2).isValid()) { // validates that day2 is populated while editing\n errors.push({\n key: 'day2',\n message: ContributionRecurring.err_second_date_required\n });\n }\n if (\n (dayjs(day2).isSameOrBefore(day1, 'day') || // validates that day2 occurs after day1\n dayjs(day2).isSameOrAfter(dayjs(day1).add(1, 'month'), 'day')) // validates that day2 is within a month of day1\n ) {\n errors.push({\n key: 'day2',\n message: ContributionRecurring.err_second_date_within_month\n });\n }\n }\n\n const endDateMessage = validator.calendarValidator(endDate);\n if (endDate && endDateMessage) {\n errors.push({\n key: 'endDate',\n message: endDateMessage\n });\n }\n else if (\n ((type === TWICE_MONTHLY && (dayjs(endDate).isSameOrBefore(day1, 'day') || dayjs(endDate).isSameOrBefore(day2, 'day'))) || // validates that end date occurs after day1 and day2\n (type === MONTHLY && dayjs(endDate).isSameOrBefore(day1, 'day'))) // validates that end date occurs after day1\n ) {\n errors.push({\n key: 'endDate',\n message: type === MONTHLY ? ContributionRecurring.err_end_date_after_start : ContributionRecurring.err_end_date_after_both\n });\n }\n this.setState({ errors, step1ValidationHasRun: true, stepHasError: errors.length > 0 });\n break;\n }\n default: break;\n }\n\n return errors.length === 0;\n }\n\n contributionCreateHandler = () => {\n return this.props.contributionCreate(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n contributionEditHandler = () => {\n return this.props.contributionEdit(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n renderStepComponent = step => {\n const { agentBankAccounts, bankAccountsLoading, contributionDetails, contributionEnvironmentVars, isEditing, toggleShowAddBank, nextRunDates, createdDate, text: { ContributionRecurring } } = this.props;\n const { contribution, errors, termsChecked, } = this.state;\n let stepComponent;\n\n switch (step) {\n case 0: {\n stepComponent = (\n {dayjs(createdDate)\n .format('MM/DD/YYYY h:mm A')} {text.ContributionRecurringStep3.text_timezone}
\n \n {text.ContributionRecurringStep3.text_print_copy}\n
\n {ContributionRecurring.err_step_does_not_exist}
;\n }\n return stepComponent;\n }\n\n componentDidMount() {\n const { contributionDetails: { canContributeAccountList, contribution, selectedAccountId }, contributionEnvironmentVars: { CurrentTradeDate }, isEditing } = this.props;\n\n if (Object.keys(canContributeAccountList).length > 0) {\n if (isEditing) {\n this.setState({ contribution, contributionScreenshot: cloneDeep(contribution) });\n this.nextRunDateGet(contribution.day1, 'day1');\n this.nextRunDateGet(contribution.day2, 'day2');\n }\n else {\n const firstNonDisabledDate = DISABLED_DATES.includes(dayjs(CurrentTradeDate).date()) ? this.nextMinDateGet(CurrentTradeDate) : dayjs(CurrentTradeDate);\n const secondNonDisabledDate = DISABLED_DATES.includes(dayjs(CurrentTradeDate).add(1, 'd').date()) ? this.nextMinDateGet(dayjs(CurrentTradeDate).add(1, 'd')) : dayjs(CurrentTradeDate).add(1, 'd'); // eslint-disable-line\n this.contributionDateHandle(firstNonDisabledDate, 'day1');\n this.contributionDateHandle(secondNonDisabledDate, 'day2');\n this.contributionSet(0, 'selectedAccounts', [clone(canContributeAccountList.find(account => account.accountId === selectedAccountId))]);\n }\n }\n }\n\n render() {\n return (\n \n \n this.formValidate(step)}\n renderStepComponent={(step) => this.renderStepComponent(step)}\n handleSubmit={() => this.contributionFormat()}\n stepLabels={this.props.text.ContributionRecurring.lbl_step_labels}\n submitStep={2}\n termsChecked={this.state.termsChecked}\n renderConfirmModal={this.props.renderDuplicateConfirmModal}\n />\n \n\n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n notificationShow,\n getNextRunDate,\n})(LanguageHOC(Recurring)));\n","/*\n *\n * Step0AmountAndDate Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\n\nimport {\n Icon,\n FormHelperText,\n RadioGroup,\n FormControlLabel,\n Radio,\n Collapse,\n Button\n} from '@mui/material';\n\nimport { withStyles } from '@mui/styles';\n\nimport {\n CurrencyInput,\n currencyFormatter,\n Dropdown,\n DatePicker,\n InfoIcon,\n IconBtnTooltip\n} from '@frontend/common';\n\nimport {\n ANNUAL_EVENT,\n BIRTHDAY,\n} from '../../constants';\n\nimport transactionsStyles from 'components/Features/protected/Accounts/Transactions/styles.module.scss';\nimport styles from '../styles.module.scss';\n\nconst muiStyles = () => ({\n root: {\n whiteSpace: 'normal',\n wordBreak: 'normal',\n overflowWrap: 'anywhere'\n }\n});\n\nStep0AmountAndDate.propTypes = {\n classes: PropTypes.object.isRequired,\n isEditing: PropTypes.bool.isRequired,\n errors: PropTypes.array.isRequired,\n contributionSet: PropTypes.func.isRequired,\n contributionDateHandle: PropTypes.func.isRequired,\n contribution: PropTypes.object.isRequired,\n contributionDetails: PropTypes.object.isRequired,\n contributionEnvironmentVars: PropTypes.object.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n errorGet: PropTypes.func.isRequired,\n accountSelect: PropTypes.func.isRequired,\n amountHandle: PropTypes.func.isRequired,\n addAccount: PropTypes.func.isRequired,\n removeAccount: PropTypes.func.isRequired,\n text: PropTypes.shape({\n ContributionSpecialStep0: PropTypes.shape({\n err_amount_min_max: PropTypes.func,\n lbl_add_account: PropTypes.string,\n lbl_amount: PropTypes.string,\n lbl_birthday: PropTypes.string,\n lbl_occasion: PropTypes.string,\n lbl_optional_end_date: PropTypes.string,\n lbl_remove_account: PropTypes.string,\n lbl_start_date: PropTypes.string,\n lbl_selected_account: PropTypes.string,\n text_multiple_annual_events: PropTypes.string,\n text_next_run: PropTypes.string,\n text_total: PropTypes.string,\n })\n })\n};\n\nexport function Step0AmountAndDate({\n classes,\n isEditing,\n errors,\n contribution: { day1, occasion, selectedAccounts, },\n contributionDetails: { canContributeAccountList, },\n contributionEnvironmentVars: { CurrentTradeDate, MaximumOneTimeOnlineContribution, MinimumOneTimeOnlineContribution, },\n errorGet,\n contributionSet,\n contributionDateHandle,\n accountSelect,\n amountHandle,\n addAccount,\n removeAccount,\n nextRunDates,\n text: { ContributionSpecialStep0 },\n}) {\n\n return (\n \n contributionSet(0, 'occasion', e.target.value)}\n value={occasion}\n >\n \n contributionDateHandle(date, 'day1')}\n value={day1 ? day1 : null}\n />\n {dayjs(nextRunDates.day1).isValid() && dayjs(day1).isValid() && {ContributionSpecialStep0.text_next_run} {dayjs(nextRunDates.day1).format('L')}}\n \n
\n\n {ANNUAL_EVENT.display}
\n \n
\n \n }\n value={ANNUAL_EVENT.id}\n />\n \n\n \n {selectedAccounts.map((selectedAccount, rowIndex) => {\n return (\n
\n \n
\n );\n })}\n\n {canContributeAccountList.length !== selectedAccounts.length && !isEditing && (\n \n accountSelect(value, rowIndex)}\n options={(isEditing ? selectedAccounts : canContributeAccountList).map(account => ({\n value: account.accountId,\n display: `${account.beneficiary.name.toUpperCase()} ...${account.accountNumber.toString().slice(account.accountNumber.toString().length - 5)}`,\n props: isEditing\n ? {}\n : {\n disabled: (selectedAccounts.some(selAccount => selAccount.accountId === account.accountId)\n && selectedAccounts[rowIndex].accountId !== account.accountId)\n || account.overMaxBalance,\n },\n }))}\n FormControlProps={{ style: { width: '100%', minWidth: '256px', margin: '0px', textAlign: 'left', } }}\n MenuItemProps={{\n classes: { root: classes.root }\n }}\n />\n
\n\n \n amountHandle(vals, rowIndex)}\n style={{ margin: '0px' }}\n value={selectedAccounts[rowIndex].contributionAmount}\n />\n
\n\n {occasion === BIRTHDAY.id &&\n \n
\n }\n\n \n {selectedAccount.beneficiary.birthday && dayjs(selectedAccount.beneficiary.birthday).format('MMM D')}\n
\n \n {selectedAccount.nextBdayRunDate && dayjs(selectedAccount.nextBdayRunDate).isValid() && {ContributionSpecialStep0.text_next_run} {dayjs(selectedAccount.nextBdayRunDate).format('L')}}\n \n contributionDateHandle(date, 'endDate', rowIndex)}\n value={selectedAccount.endDate || null}\n sx={{ margin: '0px', width: '100%' }}\n slotProps={{ field: { clearable: true } }}\n />\n
\n\n {rowIndex !== 0 &&\n \n removeAccount(rowIndex)}\n title={ContributionSpecialStep0.lbl_remove_account}\n iconProps={{ color: 'secondary' }}\n />\n
\n }\n \n add}\n onClick={addAccount}\n >\n {ContributionSpecialStep0.lbl_add_account}\n \n
\n )}\n\n \n {errors.some(error => error.key === 'amount') &&\n
\n \n \n {ContributionSpecialStep0.err_amount_min_max(currencyFormatter(MinimumOneTimeOnlineContribution), currencyFormatter(MaximumOneTimeOnlineContribution))}\n \n
}\n \n
\n {ContributionSpecialStep0.text_total}
\n {currencyFormatter(selectedAccounts.map(account => account.contributionAmount).reduce((val1, val2) => val1 + val2, 0))}
\n \n {agentBankAccounts.length > 0 ?\n
\n );\n}\n\nexport default (LanguageHOC(withStyles(muiStyles)(Step1Bank)));","/*\n *\n * ReviewDetails Component\n *\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport {\n currencyFormatter,\n} from '@frontend/common';\nimport { BIRTHDAY, } from '../../constants';\nimport styles from '../styles.module.scss';\n\nReviewDetails.propTypes = {\n contribution: PropTypes.object.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n text: PropTypes.shape({\n ContrubutionOneTimeReview: PropTypes.shape({\n title_account_number: PropTypes.string,\n title_amount: PropTypes.string,\n title_bank_account: PropTypes.string,\n title_bene_name: PropTypes.string,\n title_end_date: PropTypes.string,\n title_next_run_date: PropTypes.string,\n title_total: PropTypes.string,\n text_none: PropTypes.string,\n }),\n ContributionSpecialReview: PropTypes.shape({\n text_none: PropTypes.string,\n title_account_number: PropTypes.string,\n title_amount: PropTypes.string,\n title_bank_account: PropTypes.string,\n title_bene_name: PropTypes.string,\n title_end_date: PropTypes.string,\n title_next_run_date: PropTypes.string,\n title_total: PropTypes.string,\n }),\n }).isRequired,\n};\n\nexport function ReviewDetails({\n contribution: { bankAccount, occasion, selectedAccounts, },\n nextRunDates,\n text: { ContributionSpecialReview },\n}) {\n const populatedAccounts = selectedAccounts.filter(account => account.accountId);\n return (\n \n \n \n
\n :\n \n \n add}\n onClick={toggleShowAddBank}\n >\n {ContributionSpecialStep1.btn_add_bank}\n \n \n
\n \n \n
\n }\n \n
\n\n \n
\n\n {ContributionSpecialReview.title_bene_name}
\n {populatedAccounts.map(account => ({account.beneficiary.name.toUpperCase()}
))}\n \n
\n\n {ContributionSpecialReview.title_account_number}
\n {populatedAccounts.map(account => ({account.accountNumber}
))}\n \n
\n\n {ContributionSpecialReview.title_bank_account}
\n {bankAccount.BankName} {bankAccount.BankAccountType}, {bankAccount.MaskedBankAccountNumber}
\n \n
\n\n {populatedAccounts.some(account => account.endDate) && (\n {ContributionSpecialReview.title_next_run_date}
\n {occasion === BIRTHDAY.id ?\n populatedAccounts.map(account => {dayjs(account.nextBdayRunDate).format('L')}
)\n :\n populatedAccounts.map(account => {dayjs(nextRunDates.day1).format('L')}
)\n }\n \n
\n )}\n\n {ContributionSpecialReview.title_end_date}
\n {populatedAccounts.map(account => ({dayjs(account.endDate).isValid() ?
))}\n {dayjs(account.endDate).format('L')}
: {ContributionSpecialReview.text_none}
}\n
\n {ContributionSpecialReview.title_amount}
\n {populatedAccounts.map(account => ({currencyFormatter(account.contributionAmount)}
))}\n \n
\n {ContributionSpecialReview.title_total}
\n {currencyFormatter(populatedAccounts.map(account => account.contributionAmount).reduce((val1, val2) => val1 + val2, 0))}
\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n\nexport default (LanguageHOC(Step3PrintReview));","/*\n*\n* Special Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Prompt } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport { clone, isEqual, cloneDeep } from 'lodash';\nimport * as validator from 'utils/helpers/form_validation';\nimport {\n Card,\n} from '@frontend/common';\nimport { getNextRunDate, } from 'components/Features/protected/Accounts/Transactions/actions';\nimport {\n ANNUAL_EVENT,\n BIRTHDAY,\n YEARLY,\n} from '../constants';\nimport TransactionStepper from 'components/Features/protected/Accounts/Transactions/TransactionStepper';\nimport { Step0AmountAndDate, Step1Bank, Step2Terms, Step3PrintReview, } from 'components/Features/protected/Accounts/Transactions/Contributions/Special/StepComponents/';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n contributionEnvironmentVars: state.static.environmentVars,\n contributionDetails: state.transactions.contributionDetails,\n agentBankAccounts: state.payments.agentBankAccounts,\n nextRunDates: state.transactions.nextRunDates.yearly,\n});\n\nexport class Special extends React.Component {\n static propTypes = {\n agentBankAccounts: PropTypes.array.isRequired,\n nextRunDates: PropTypes.object.isRequired,\n accountId: PropTypes.number.isRequired,\n isEditing: PropTypes.bool.isRequired,\n bankAccountsLoading: PropTypes.bool.isRequired,\n getNextRunDate: PropTypes.func.isRequired,\n contributionCreate: PropTypes.func.isRequired,\n contributionEdit: PropTypes.func.isRequired,\n toggleShowAddBank: PropTypes.func.isRequired,\n renderDuplicateConfirmModal: PropTypes.func.isRequired,\n duplicateContributionModalOpen: PropTypes.bool.isRequired,\n createdDate: PropTypes.string.isRequired,\n contributionEnvironmentVars: PropTypes.shape({\n CurrentTradeDate: PropTypes.string.isRequired,\n MaximumOneTimeOnlineContribution: PropTypes.number.isRequired,\n MinimumOneTimeOnlineContribution: PropTypes.number.isRequired,\n MaximumOnlineContributionAmount: PropTypes.number.isRequired,\n SupportPhoneNumber: PropTypes.string.isRequired,\n FaxNumber: PropTypes.string.isRequired,\n }),\n contributionDetails: PropTypes.shape({\n canContributeAccountList: PropTypes.array,\n contribution: PropTypes.shape({\n day1: PropTypes.string,\n occasion: PropTypes.string,\n }),\n selectedAccountId: PropTypes.number,\n // contribution: PropTypes.bool, TODO: Update this during edit story\n }).isRequired,\n text: PropTypes.shape({\n ContributionSpecial: PropTypes.shape({\n err_account_select: PropTypes.string,\n err_bankAccount_select: PropTypes.string,\n err_end_date_after_start: PropTypes.string,\n err_step_does_not_exist: PropTypes.string,\n lbl_step_labels: PropTypes.array,\n msg_unsaved_changes: PropTypes.string,\n })\n }),\n }\n\n state = {\n contribution: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: '',\n occasion: BIRTHDAY.id,\n selectedAccounts: [],\n type: YEARLY\n },\n contributionScreenshot: {\n bankAccount: {\n BankAccountId: '',\n BankName: '',\n MaskedBankAccountNumber: '',\n },\n day1: '',\n occasion: BIRTHDAY.id,\n selectedAccounts: [],\n type: YEARLY\n },\n errors: [],\n stepIndex: 0,\n step0ValidationHasRun: false,\n step1ValidationHasRun: false,\n termsChecked: false,\n stepHasError: false,\n };\n\n displayUnsavedChangesPrompt = () => {\n return !this.state.bankAccountsLoading && !isEqual(this.state.contribution, this.state.contributionScreenshot);\n }\n\n clearStepErrors = () => {\n this.setState({\n errors: [],\n });\n }\n\n accountSelect = (value, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n const matchingAccount = this.props.contributionDetails.canContributeAccountList.find(agentAccount => agentAccount.accountId === value);\n\n const accountUpdatedWithInputData = {\n ...matchingAccount,\n contributionAmount: selectedAccounts[rowIndex].contributionAmount,\n endDate: selectedAccounts[rowIndex].endDate\n };\n\n selectedAccounts.splice(rowIndex, 1, accountUpdatedWithInputData);\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n this.nextRunDateGet({}, BIRTHDAY.id);\n }\n\n addAccount = () => {\n const { contribution: { selectedAccounts } } = this.state;\n const newSelectedAccounts = [...selectedAccounts, { accountId: '', contributionAmount: 0, endDate: '', beneficiary: { birthday: '' } }];\n this.contributionSet(0, 'selectedAccounts', newSelectedAccounts);\n }\n\n removeAccount = (rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n selectedAccounts.splice(rowIndex, 1);\n this.contributionSet('selectedAccounts', selectedAccounts);\n }\n\n amountHandle = ({ floatValue = 0 }, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n\n selectedAccounts[rowIndex].contributionAmount = floatValue;\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n }\n\n bankAccountSelectHandle = (value) => {\n this.contributionSet(1, 'bankAccount', this.props.agentBankAccounts.find(bankAccount => bankAccount.BankAccountId === value));\n }\n\n contributionDateHandle = (date, day, rowIndex) => {\n const { contribution: { selectedAccounts } } = this.state;\n const account = selectedAccounts[rowIndex];\n const formattedDate = date ? dayjs(date).format('L') : null; // formatted to prevent unintentially timezone conversion\n\n switch (day) {\n case 'endDate':\n account.endDate = formattedDate;\n this.contributionSet(0, 'selectedAccounts', selectedAccounts);\n break;\n case 'day1':\n // wait till user finishes typing the date\n this.contributionSet(0, day, formattedDate);\n if (dayjs(formattedDate).isValid()) {\n this.nextRunDateGet(formattedDate, day);\n }\n break;\n default: // do nothing\n }\n }\n\n contributionSet = (step, key, value) => {\n this.setState(({ contribution }) => {\n return { contribution: { ...contribution, [key]: value } };\n }, () => {\n if ((step === 0) || (step === 1)) {\n this.formValidate(step);\n }\n });\n }\n\n errorGet = (key, row) => {\n const error = this.state.errors.find(error => error.key === key && error.row === row);\n return error ? error.message : '';\n }\n\n formValidate = step => {\n const { contributionEnvironmentVars: { MaximumOneTimeOnlineContribution, MinimumOneTimeOnlineContribution, CurrentTradeDate }, nextRunDates, text: { ContributionSpecial } } = this.props;\n const { day1, occasion, selectedAccounts, bankAccount } = this.state.contribution;\n const errors = [];\n\n switch (step) {\n case 0: {\n selectedAccounts.forEach(({ accountId, contributionAmount, endDate, nextBdayRunDate }, index) => {\n\n const amountMessage = validator.amountValidator(contributionAmount, MinimumOneTimeOnlineContribution, MaximumOneTimeOnlineContribution); // validates amounts against min and max parameters\n if (accountId && amountMessage) {\n errors.push({\n key: 'amount',\n message: amountMessage,\n row: index\n });\n }\n if (!accountId && contributionAmount) { // validates all accounts that also have amounts entered have a beneficiary selected\n errors.push({\n key: 'account',\n message: ContributionSpecial.err_account_select,\n row: index\n });\n }\n\n if (occasion === ANNUAL_EVENT.id) { // validates day1 is selected\n const day1Message = validator.calendarValidator(day1, CurrentTradeDate, dayjs(CurrentTradeDate).add(1, 'y'));\n if (day1Message) { // validate date format\n errors.push({\n key: 'day1',\n message: day1Message,\n });\n }\n }\n\n const endDateMessage = validator.calendarValidator(endDate);\n if (endDate && endDateMessage) { // validate date format\n errors.push({\n key: 'endDate',\n message: endDateMessage,\n row: index\n });\n }\n else if ( // validates end date\n (occasion === ANNUAL_EVENT.id && dayjs(endDate).isSameOrBefore(nextRunDates.day1, 'day')) ||\n (occasion === BIRTHDAY.id && dayjs(endDate).isSameOrBefore(nextBdayRunDate, 'day'))\n ) {\n errors.push({\n key: 'endDate',\n message: ContributionSpecial.err_end_date_after_start,\n row: index\n });\n }\n\n });\n this.setState({ errors, step0ValidationHasRun: true, stepHasError: errors.length > 0, });\n break;\n }\n\n case 1: {\n if (!bankAccount.BankAccountId) {\n errors.push({\n key: 'bankAccount',\n message: ContributionSpecial.err_bankAccount_select,\n });\n }\n this.setState({ errors, step1ValidationHasRun: true, stepHasError: errors.length > 0, });\n break;\n }\n default: break;\n }\n return errors.length === 0;\n }\n\n nextRunDateGet = (date, day) => {\n\n if (day === BIRTHDAY.id) {\n const { selectedAccounts } = this.state.contribution;\n const selectedAccountsWithBirthdays = selectedAccounts.filter(account => account.beneficiary.birthday);\n const birthdays = selectedAccountsWithBirthdays.map(account => account.beneficiary.birthday);\n\n this.props.getNextRunDate(birthdays, day, YEARLY)\n .then(() => {\n this.props.nextRunDates.birthday.forEach((bday, index) => {\n selectedAccountsWithBirthdays[index].nextBdayRunDate = bday;\n });\n this.contributionSet('selectedAccounts', selectedAccounts);\n });\n }\n else {\n this.props.getNextRunDate(date, day, YEARLY);\n }\n }\n\n contributionCreateHandler = () => {\n return this.props.contributionCreate(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n contributionEditHandler = () => {\n return this.props.contributionEdit(this.state.contribution)\n .then(() => this.setState({ contributionScreenshot: cloneDeep(this.state.contribution) }));\n }\n\n renderStepComponent = step => {\n const { agentBankAccounts, bankAccountsLoading, contributionDetails, contributionEnvironmentVars, isEditing, toggleShowAddBank, nextRunDates, createdDate, text: { ContributionSpecial } } = this.props;\n const { contribution, errors, termsChecked, } = this.state;\n let stepComponent;\n\n switch (step) {\n case 0: {\n stepComponent = (\n {dayjs(createdDate)\n .format('MM/DD/YYYY h:mm A')} {text.ContributionOneTimeStep3.text_timezone}
\n \n {text.ContributionOneTimeStep3.text_print_copy}\n
\n {ContributionSpecial.err_step_does_not_exist}
;\n }\n return stepComponent;\n }\n\n componentDidMount() {\n const { contributionDetails: { canContributeAccountList, contribution, selectedAccountId }, isEditing } = this.props;\n\n if (Object.keys(canContributeAccountList).length > 0) {\n if (isEditing) {\n this.setState({ contribution, contributionScreenshot: cloneDeep(contribution) },\n () => {\n this.nextRunDateGet(contribution.day1, contribution.occasion === BIRTHDAY.id ? BIRTHDAY.id : 'day1');\n });\n }\n else {\n // Need to go around contributionSet() helper so that nextRunDateGet() has account set to state. This can be replaced with the helper on future versions of React that do not batch state.\n this.setState(\n ({ contribution }) => {\n const contributionUpdated = {\n ...contribution,\n selectedAccounts: [clone(canContributeAccountList.find(agentAccount => agentAccount.accountId === selectedAccountId))]\n };\n return { contribution: contributionUpdated, contributionScreenshot: cloneDeep(contributionUpdated) };\n },\n () => this.nextRunDateGet('', BIRTHDAY.id)\n );\n }\n }\n }\n\n render() {\n const { isEditing, renderDuplicateConfirmModal, text: { ContributionSpecial } } = this.props;\n const { contribution, termsChecked, stepHasError, } = this.state;\n\n return (\n \n \n this.formValidate(step)}\n renderStepComponent={(step) => this.renderStepComponent(step)}\n handleSubmit={() => isEditing ? this.contributionEditHandler(contribution) : this.contributionCreateHandler(contribution)}\n stepLabels={ContributionSpecial.lbl_step_labels}\n submitStep={2}\n termsChecked={termsChecked}\n renderConfirmModal={renderDuplicateConfirmModal}\n />\n \n\n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n getNextRunDate,\n})(LanguageHOC(Special)));\n","/*\n*\n* GiactRejection Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n FormHelperText,\n} from '@mui/material';\nimport {\n Modal,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nGiactRejectionModal.propTypes = {\n open: PropTypes.bool.isRequired,\n handleCloseGiactRejectionModal: PropTypes.func.isRequired,\n text: PropTypes.shape({\n GiactRejectionModal: PropTypes.shape({\n btn_close: PropTypes.string,\n head_title: PropTypes.string,\n text_not_authenticated: PropTypes.string,\n text_rejection_language_1: PropTypes.string,\n text_rejection_language_2: PropTypes.string,\n text_rejection_language_3: PropTypes.string,\n text_rejection_language_4: PropTypes.func,\n text_giact_address_1: PropTypes.string,\n text_giact_address_2: PropTypes.string,\n text_giact_address_3: PropTypes.string,\n text_giact_address_4: PropTypes.string,\n text_rejection_language_5: PropTypes.string,\n text_rejection_language_6: PropTypes.string,\n text_rejection_language_7: PropTypes.string,\n text_rejection_language_8: PropTypes.string,\n })\n })\n};\n\nexport function GiactRejectionModal({ open, handleCloseGiactRejectionModal, text: { GiactRejectionModal }, }) {\n \n return (\n \n \n {GiactRejectionModal.text_not_authenticated}\n \n
\n \n );\n}\n\nexport default LanguageHOC(GiactRejectionModal);","/*\n*\n* AddBankModal Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n TextField,\n MenuItem,\n FormControl,\n FormControlLabel,\n FormHelperText,\n RadioGroup,\n Radio,\n} from '@mui/material';\nimport {\n Modal,\n notificationShow,\n} from '@frontend/common';\nimport {\n checkRoutingNumber,\n createAgentBankAccount,\n createBeneficiaryBankAccount,\n} from 'components/Features/protected/Payments/actions';\n\nimport GiactRejectionModal from '../GiactRejectionModal';\nimport checkImage from './image/BankCheck.svg';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n allowedBankHolders: state.payments.allowedBankHolders,\n routingNumberBank: state.payments.routingNumberBank,\n GiactResultTypes: state.static.environmentVars.GiactResultTypes,\n ACHBankWithdrawalLanguage: state.static.environmentVars.ACHBankWithdrawalLanguage,\n});\n\nexport class AddBankModal extends React.Component {\n static propTypes = {\n agentOnly: PropTypes.bool, //used for transactions only\n routingNumberBank: PropTypes.string.isRequired,\n allowedBankHolders: PropTypes.array.isRequired,\n GiactResultTypes: PropTypes.object.isRequired,\n ACHBankWithdrawalLanguage: PropTypes.string.isRequired,\n notificationShow: PropTypes.func.isRequired,\n checkRoutingNumber: PropTypes.func.isRequired,\n createAgentBankAccount: PropTypes.func.isRequired,\n createBeneficiaryBankAccount: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n close: PropTypes.func.isRequired,\n isMobileView: PropTypes.bool.isRequired,\n handleGetBankAccounts: PropTypes.func.isRequired,\n handleShowValidationStart: PropTypes.func,\n text: PropTypes.shape({\n AddBankModal: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_agree: PropTypes.string,\n err_invalid_routing: PropTypes.string,\n err_copy: PropTypes.string,\n err_required: PropTypes.string,\n err_routing_length: PropTypes.string,\n err_accounts_match: PropTypes.string,\n err_allowable_chars: PropTypes.string,\n head_modal_title: PropTypes.string,\n lbl_account_holder: PropTypes.string,\n lbl_account_number: PropTypes.string,\n lbl_nickname: PropTypes.string,\n lbl_confirm_account_number: PropTypes.string,\n lbl_checking: PropTypes.string,\n lbl_routing: PropTypes.string,\n lbl_savings: PropTypes.string,\n msg_account_added: PropTypes.string,\n text_required_language_1: PropTypes.string,\n text_required_language_2: PropTypes.string,\n text_required_language_3: PropTypes.string,\n text_required_language_4: PropTypes.string,\n text_required_language_5: PropTypes.string,\n text_permission_bank_account_holder: PropTypes.string,\n }),\n Payments: PropTypes.shape({\n text_bank_hold_language: PropTypes.func,\n }),\n })\n }\n\n state = {\n newBankAccount: {\n accountHolder: '',\n accountType: '',\n routingNumber: '',\n accountNumber1: '',\n accountNumber2: '',\n nickname: '',\n },\n routingNumberBank: '',\n formErrors: {},\n apiErrors: [],\n isSaving: false,\n showGiactRejectionModal: false,\n permissionBankAccountHolderText: ''\n }\n\n inputFormat = (value) => {\n return value.replace(/[^0-9.]/g, '').replace(/(\\.*)\\./g, '');\n }\n\n onInputChange = e => {\n const { name, value } = e.target;\n\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n [name]: ''\n },\n newBankAccount: {\n ...this.state.newBankAccount,\n [name]: value,\n },\n apiErrors: []\n });\n\n // checking routing number is valid\n if (name === 'routingNumber') {\n if (value.length !== 9 && this.props.routingNumberBank) {\n this.setState({ routingNumberBank: '' });\n }\n if (value.length === 9) {\n this.props.checkRoutingNumber(value)\n .then(() => this.setState({ routingNumberBank: this.props.routingNumberBank, apiErrors: [] }))\n .catch((errors) => this.setState({\n routingNumberBank: '',\n apiErrors: errors.payload.data,\n formErrors: { ...this.state.formErrors, routingNumber: errors.payload.data[0].Message }\n }));\n }\n }\n\n // getting language after acct holder selection\n if (name === 'accountHolder') {\n const isBeneficiary = this.props.allowedBankHolders.find(bene => bene.id === value).isBeneficiary;\n this.setState({ permissionBankAccountHolderText: isBeneficiary ? this.props.text.AddBankModal.text_permission_bank_account_holder : '' });\n }\n }\n\n copyPrevent = (e) => {\n const confirmField = e.target;\n\n confirmField.onpaste = e => {\n const { formErrors } = this.state;\n e.preventDefault();\n formErrors.accountNumber2 = this.props.text.AddBankModal.err_copy;\n this.setState({ formErrors });\n };\n }\n\n formValidate = () => {\n const { err_required, err_routing_length, err_accounts_match, err_allowable_chars } = this.props.text.AddBankModal;\n const { newBankAccount: { accountHolder, accountType, routingNumber, accountNumber1, accountNumber2, nickname }, apiErrors } = this.state;\n const formErrors = {};\n\n // Account holder validation\n if (!accountHolder) {\n formErrors.accountHolder = err_required;\n }\n // Account type validation\n if (!accountType) {\n formErrors.accountType = err_required;\n }\n // Routing number validation\n if (!routingNumber) {\n formErrors.routingNumber = err_required;\n }\n if (routingNumber.length !== 9 && routingNumber.length > 0) {\n formErrors.routingNumber = err_routing_length;\n }\n // Account number validation\n if (!accountNumber1) {\n formErrors.accountNumber1 = err_required;\n }\n if (!accountNumber2) {\n formErrors.accountNumber2 = err_required;\n }\n if (accountNumber1 !== accountNumber2) {\n formErrors.accountNumber2 = err_accounts_match;\n }\n\n const regex = /^[A-Za-z0-9.\\s.,':#/-]+$/; // case insensitive, space, period, comma, single quote and hyphen.\n if (nickname && !regex.test(nickname)) {\n formErrors.nickname = err_allowable_chars;\n }\n\n // API errors\n if (apiErrors.length > 0) {\n apiErrors.forEach(error => {\n if (error.Field === 'BankAccountNumber') {\n formErrors.accountNumber1 = error.Message;\n }\n\n if (error.Field === 'routingNumber') {\n formErrors.routingNumber = error.Message;\n }\n });\n }\n\n this.setState({ formErrors });\n\n return Object.keys(formErrors).length === 0; // returns True or False whether form is valid\n }\n\n onFormSubmit = e => {\n e.preventDefault();\n\n if (this.formValidate()) {\n this.setState({ isSaving: true, apiErrors: [] });\n const { allowedBankHolders, GiactResultTypes, text: { AddBankModal } } = this.props;\n const { newBankAccount } = this.state;\n\n const apiNewBankAccountInfo = {\n RoutingNumber: newBankAccount.routingNumber,\n BankAccountNumber: newBankAccount.accountNumber1,\n BankAccountType: newBankAccount.accountType,\n Nickname: newBankAccount.nickname,\n };\n\n // Check if accountHolder (id) matches the first id of the allowedBankHolders to see if it is the Agent or not.\n const isAgent = newBankAccount.accountHolder === allowedBankHolders[0].id;\n const createNewBankAccount = isAgent ?\n this.props.createAgentBankAccount :\n this.props.createBeneficiaryBankAccount;\n\n createNewBankAccount(apiNewBankAccountInfo, newBankAccount.accountHolder)\n .then(response => {\n const newBankAccount = response.payload.data;\n const GiactResult = newBankAccount.GiactResult;\n this.props.handleGetBankAccounts();\n this.closeModal();\n if (GiactResult === GiactResultTypes.Fail) {\n this.setState({ showGiactRejectionModal: true });\n return;\n }\n else if (GiactResult === GiactResultTypes.NA && this.props.handleShowValidationStart) { // check for ValidationStart function, since this is only handled on Payments page.\n this.props.handleShowValidationStart(newBankAccount);\n }\n this.props.notificationShow(AddBankModal.msg_account_added, 'success');\n })\n .catch(errors => {\n this.setState({\n apiErrors: errors.payload.data,\n isSaving: false\n }, () => this.formValidate());\n });\n }\n }\n\n closeModal = () => {\n const accountHolder = this.props.agentOnly ? this.props.allowedBankHolders[0].id : '';\n this.props.close();\n this.setState({\n newBankAccount: {\n accountHolder,\n accountType: '',\n routingNumber: '',\n accountNumber1: '',\n accountNumber2: '',\n },\n routingNumberBank: '',\n formErrors: {},\n isSaving: false,\n });\n }\n\n renderRequiredLanguage = () => {\n const { ACHBankWithdrawalLanguage, text: { AddBankModal, Payments, }, } = this.props;\n\n return (\n - \n
- {GiactRejectionModal.text_rejection_language_1} \n
- {GiactRejectionModal.text_rejection_language_2} \n
{GiactRejectionModal.text_rejection_language_3}
\n {GiactRejectionModal.text_rejection_language_4()}\n- \n
- {GiactRejectionModal.text_giact_address_1} \n
- {GiactRejectionModal.text_giact_address_2} \n
- {GiactRejectionModal.text_giact_address_3} \n
- {GiactRejectionModal.text_giact_address_4} \n
{GiactRejectionModal.text_rejection_language_5}https://www.giact.com/consumer-inquiries/
\n{GiactRejectionModal.text_rejection_language_6}
\n{GiactRejectionModal.text_rejection_language_7}info@my529.org{GiactRejectionModal.text_rejection_language_8}
\n\n
\n );\n }\n\n componentDidMount() {\n if (this.props.agentOnly) {\n this.setState({ newBankAccount: { ...this.state.newBankAccount, accountHolder: this.props.allowedBankHolders[0].id } });\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.open !== this.props.open && this.props.open) {\n this.setState({ permissionBankAccountHolderText: '' });\n }\n }\n\n render() {\n const { newBankAccount, formErrors, isSaving, permissionBankAccountHolderText } = this.state;\n const { agentOnly, open, isMobileView, allowedBankHolders, text: { AddBankModal } } = this.props;\n\n return (\n - \n
- {AddBankModal.text_required_language_1} \n
- {AddBankModal.text_required_language_2} \n
- {AddBankModal.text_required_language_3} \n
- {AddBankModal.text_required_language_4} \n
- {Payments.text_bank_hold_language(ACHBankWithdrawalLanguage)} \n
{AddBankModal.text_required_language_5}
\n\n
\n \n\n \n 
\n
\n\n {this.renderRequiredLanguage()}\n\n \n \n {allowedBankHolders.map(accountHolder => (\n \n ))}\n \n {Boolean(permissionBankAccountHolderText) &&\n \n \n {formErrors.accountType} }\n \n e.target.value = this.inputFormat(e.target.value)}\n onChange={this.onInputChange}\n value={newBankAccount.routingNumber}\n inputProps={{ maxLength: '9' }}\n />\n e.target.value = this.inputFormat(e.target.value)}\n onChange={this.onInputChange}\n value={newBankAccount.accountNumber1}\n inputProps={{ maxLength: '17' }}\n />\n e.target.value = this.inputFormat(e.target.value)}\n onChange={this.onInputChange}\n onFocus={(e) => this.copyPrevent(e)}\n value={newBankAccount.accountNumber2}\n inputProps={{ maxLength: '17' }}\n />\n
\n\n \n {permissionBankAccountHolderText}\n
\n }\n\n \n \n this.toggleShowAddBank()}\n isMobileView={isMobileView}\n handleGetBankAccounts={this.handleGetBankAccounts}\n />\n\n \n
\n );\n }\n}\n\n\nexport default connect(select, {\n getContributionDetails,\n getScheduledTransaction,\n getAgentBankAccounts,\n getAllowedBankHolders,\n createContribution,\n editContribution,\n notificationShow,\n getNotifications,\n})(sizify(LanguageHOC(Contributions)));\n","/*\r\n*\r\n* AccountsInGroup Component\r\n*\r\n*/\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Modal,\r\n\r\n SmartTable,\r\n TableContainer,\r\n TableHeader,\r\n TablePagination,\r\n TableRows,\r\n} from '@frontend/common';\r\nimport LanguageHOC from 'utils/translations/LanguageHOC';\r\n\r\nAccountsInGroup.propTypes = {\r\n groupAccounts: PropTypes.array.isRequired,\r\n loading: PropTypes.bool.isRequired,\r\n open: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onProportionalSelect: PropTypes.func.isRequired,\r\n proportionalDisabled: PropTypes.bool.isRequired,\r\n text: PropTypes.shape({\r\n Withdrawals: PropTypes.shape({\r\n withdraw_funds_modal: PropTypes.shape({\r\n btn_all_accts_label_long: PropTypes.string,\r\n btn_all_accts_label_short: PropTypes.string,\r\n btn_one_acct_label: PropTypes.string,\r\n listItem1: PropTypes.string,\r\n listItem2: PropTypes.string,\r\n modal_title: PropTypes.string,\r\n p1: PropTypes.string,\r\n p_all_accts_disabled: PropTypes.string,\r\n table_column1_title: PropTypes.string,\r\n table_column2_title: PropTypes.string,\r\n table_column3_title: PropTypes.string,\r\n title: PropTypes.string,\r\n })\r\n })\r\n }).isRequired\r\n};\r\n\r\nexport function AccountsInGroup({\r\n groupAccounts,\r\n loading,\r\n onClose,\r\n onProportionalSelect,\r\n open,\r\n proportionalDisabled,\r\n text\r\n}) {\r\n const tableData = groupAccounts.map(account => ({\r\n accountId: account.AccountId,\r\n accountNumber: account.AccountNumber,\r\n availableBalanceNumber: account.availableForWithdrawalNum,\r\n optionDescription: account.OptionName,\r\n }));\r\n\r\n const { Withdrawals: { withdraw_funds_modal } } = text;\r\n\r\n return (\r\n \n
\n\n \n
\n\n\n \n \n {userDetails.name}\n \n
\n\n \n this.onTabChange(e, val)}\n value={tabIndex}\n centered\n >\n
\n\n {withdraw_funds_modal.title}
\r\n{withdraw_funds_modal.p1}
\r\n- \r\n
- {withdraw_funds_modal.listItem1} \r\n
- {withdraw_funds_modal.listItem2} \r\n
{withdraw_funds_modal.p_all_accts_disabled}
}\r\n\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default LanguageHOC(AccountsInGroup);","export const cleanDigits = (str) => str.replace(/[^\\d]+/g, ''); // remove all non-digit characters\n\nexport const sanitizeHTML = (str) => (str ? str.replace(/[&\"'<>\\\\`:]/g, '') : str); // remove all dangerous tags\n\nexport const alphaNumericOnly = (str) => str.replace(/[^0-9a-zA-Z]/g, '');","/*\n*\n* Step0WithdrawalType Component\n* Withdrawal Type\n*\n*/\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n RECURRING,\n NONQUALIFIED,\n} from '../../../constants';\n\nimport {\n Radio,\n RadioGroup,\n FormControlLabel,\n FormControl,\n FormHelperText,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nexport class Step0WithdrawalType extends Component {\n static propTypes = {\n isEditing: PropTypes.bool.isRequired,\n withdrawal: PropTypes.shape({\n frequency: PropTypes.string,\n withdrawalType: PropTypes.string.isRequired,\n }),\n withdrawalVariables: PropTypes.object.isRequired,\n radioButtonLabelGenerate: PropTypes.func.isRequired,\n withdrawalTypeHandle: PropTypes.func.isRequired,\n errors: PropTypes.shape({\n withdrawalTypeError: PropTypes.string.isRequired,\n }).isRequired,\n };\n\n componentDidMount() {\n const { withdrawalTypeHandle, withdrawal: { withdrawalType } } = this.props;\n withdrawalTypeHandle({ target: { value: withdrawalType } });\n }\n\n render() {\n const {\n isEditing,\n withdrawal: {\n frequency,\n withdrawalType,\n },\n withdrawalVariables,\n radioButtonLabelGenerate,\n withdrawalTypeHandle,\n errors: { withdrawalTypeError, },\n } = this.props;\n\n const isRecurring = frequency === RECURRING;\n const availableWithdrawalTypes = isRecurring ? withdrawalVariables.withdrawalTypes.filter(type => type.name !== NONQUALIFIED) : withdrawalVariables.withdrawalTypes;\n\n return (\n \n \n \n {availableWithdrawalTypes.map(type => (\n {withdrawalTypeError} }\n \n
\n );\n }\n}\n\nexport default LanguageHOC(Step0WithdrawalType);","/*\n*\n* Step1Recipient Component\n* Recipient\n*\n*/\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n ACCOUNT_OWNER,\n BENEFICIARY,\n K12_ED,\n HIGHER_ED,\n SCHOOL,\n RECURRING,\n} from '../../../constants';\n\nimport {\n Radio,\n RadioGroup,\n FormControlLabel,\n FormControl,\n FormHelperText,\n} from '@mui/material';\n\nStep1Recipient.propTypes = {\n isEditing: PropTypes.bool.isRequired,\n recipient: PropTypes.string.isRequired,\n frequency: PropTypes.string.isRequired,\n withdrawalType: PropTypes.string.isRequired,\n recipientTypes: PropTypes.array.isRequired,\n radioButtonLabelGenerate: PropTypes.func.isRequired,\n recipientHandle: PropTypes.func.isRequired,\n recipientError: PropTypes.string.isRequired,\n};\n\nexport function Step1Recipient(props) {\n const {\n isEditing,\n recipient,\n frequency,\n withdrawalType,\n recipientTypes,\n radioButtonLabelGenerate,\n recipientHandle,\n recipientError,\n } = props;\n\n const accountOwner = recipientTypes.find(type => type.id === ACCOUNT_OWNER);\n const beneficiary = recipientTypes.find(type => type.id === BENEFICIARY);\n const school = recipientTypes.find(type => type.id === SCHOOL);\n const isRecurring = frequency === RECURRING;\n\n if (withdrawalType === K12_ED) {\n return radioButtonLabelGenerate(accountOwner);\n }\n else if (withdrawalType === HIGHER_ED) {\n return (\n \n Next run date: {dayjs(getNextStartDate(startDate, withdrawalVariables.startDates, nextRunStartDates)).format('L')}\n
\n );\n\n const partialBalanceMessage = (\n \n
\n );\n\n const partialBalanceOnlyComponent = (\n \n {step0_amount_date.partial_balance.title}\n {availableBalanceIsMoreThanMax ?\n \n {step0_amount_date.continue_btn_label}\n \n
\n {step0_amount_date.partial_balance.more_than_max_p_long}
\n :\n{step0_amount_date.partial_balance.more_than_max_p_short}
\n }\n- \n
- {step0_amount_date.partial_balance.listItem1} \n {areThereUncollectedFunds &&
- {step0_amount_date.partial_balance.uncollected_funds_text} }\n {availableBalanceIsMoreThanMax &&
- {parse(step0_amount_date.partial_balance.html_listItem2_more_than_max(currencyFormatter(withdrawalVariables.maxWithdrawal)))} }\n
\n 0} key='partialProportionalAmount'>\n {proportionalAmounts.map(amount => (\n \n\n {isRecurring ?\n
\n :\n \n
\n\n \n {step0_amount_date.proportional_amounts(amount.accountNumber, currencyFormatter(amount.amount))}\n
\n ))}\n \n
\n {nextRunDateComponent()}\n \n dateHandle(date, 'startDate')}\n shouldDisableDate={disableStartDates}\n value={startDate}\n />\n {step0_amount_date.sellDateText(isRecurring).map(text =>
}\n />\n {text}
)}\n dateHandle(date, 'endDate')}\n value={endDate}\n />\n
\n \n dateHandle(date, 'sellDate')}\n shouldDisableDate={disableSellDates}\n value={sellDate}\n />\n {step0_amount_date.sellDateText(isRecurring).map(text =>
}\n />\n \n }\n \n );\n\n const fullBalanceText = {\n name: 'Full Balance',\n messages: [text_full_balance_info]\n };\n\n const partialAndFullBalanceComponent = (\n {text}
)}\n \n \n {amountTypeError} }\n \n\n
\n :\n \n \n \n \n {amountType === PARTIAL_BALANCE && // prevents console errors from \n 0}>\n {proportionalAmounts.map(amount => (\n \n
\n\n {isRecurring ?\n \n
\n \n
\n }\n \n Account {amount.accountNumber}: {currencyFormatter(amount.amount)}\n
\n ))}\n \n
\n {nextRunDateComponent()}\n \n dateHandle(date, 'startDate')}\n shouldDisableDate={disableStartDates}\n value={startDate}\n />\n {step0_amount_date.sellDateText(isRecurring).map(text =>
}\n />\n {text}
)}\n dateHandle(date, 'endDate')}\n value={endDate}\n />\n
\n \n dateHandle(date, 'sellDate')}\n shouldDisableDate={disableSellDates}\n value={sellDate}\n />\n {step0_amount_date.sellDateText(isRecurring).map(text =>
}\n />\n \n }\n \n );\n\n let component;\n if (Object.keys(preTransactionDetails).length > 0 && partialBalanceWithdrawalOnly) {\n component = partialWithdrawalMessageOpen ? partialBalanceMessage : partialBalanceOnlyComponent;\n }\n else {\n component = partialAndFullBalanceComponent;\n }\n\n return component;\n}\n\nexport default LanguageHOC(Step2AmountDate);","/*\n*\n* UpdateAgentAddressModal Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\n\nimport {\n getPreTransactionDetails,\n} from 'components/Features/protected/Accounts/Transactions/actions';\n\nimport AddressCard from 'components/Features/protected/MyInfo/AddressCard';\n\nimport {\n LoadingOverlay,\n Modal\n} from '@frontend/common';\n\nimport { agentGet } from 'components/Features/protected/MyInfo/actions';\n\nconst select = (state) => ({\n agent: state.myInfo.agent,\n});\n\nexport class UpdateAgentAddressModal extends React.Component {\n static propTypes = {\n show: PropTypes.bool.isRequired,\n agentGet: PropTypes.func.isRequired,\n agent: PropTypes.shape({\n AgentId: PropTypes.number.isRequired,\n Addresses: PropTypes.shape({\n Physical: PropTypes.object,\n Mailing: PropTypes.object,\n Other: PropTypes.object,\n }),\n UtahResident: PropTypes.bool.isRequired,\n }).isRequired,\n handleCancel: PropTypes.func.isRequired,\n match: PropTypes.object.isRequired,\n getPreTransactionDetails: PropTypes.func.isRequired,\n modalTitle: PropTypes.string.isRequired,\n };\n\n state = {\n loading: false,\n };\n\n callbackOnAddressChange = () => {\n this.props.getPreTransactionDetails(this.props.match.params.accountId, this.props.match.params.groupId);\n }\n\n componentDidMount() {\n if (!this.props.agent.AgentId) {\n this.setState({ loading: true });\n this.props.agentGet()\n .finally(() => this.setState({ loading: false }));\n }\n }\n\n render() {\n const { loading } = this.state;\n\n const {\n show,\n agent: { Addresses },\n handleCancel,\n modalTitle,\n } = this.props;\n\n return (\n {text}
)}\n \n \n null}\n isLoading={false}\n key='Agent_Check_Address'\n residentCheck={() => null}\n callbackOnAddressChange={this.callbackOnAddressChange}\n />\n \n \n
\n\n );\n }\n\n}\n\nexport default withRouter(connect(select, {\n agentGet,\n getPreTransactionDetails,\n})(UpdateAgentAddressModal));","import React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n IconBtnTooltip,\n InfoIcon,\n} from '@frontend/common';\n\nimport UpdateAgentAddressModal from './UpdateAgentAddressModal';\nimport UpdateBeneAddressModal from '../../../../AccountDetails/BeneContact/UpdateBeneAddressModal';\n\nimport {\n ACCOUNT_OWNER,\n BENEFICIARY,\n ACCOUNT_TYPE_UGMA_UTMA,\n} from '../../constants';\n\nimport styles from './styles.module.scss';\n\nconst tippyProps = {\n trigger: 'click',\n hideOnClick: true,\n interactive: true,\n};\n\nconst select = (state) => ({\n preTransactionDetails: state.transactions.preTransactionDetails,\n});\n\nexport class CheckAddress extends React.Component {\n static propTypes = {\n stepIndex: PropTypes.number.isRequired,\n recipientAddress: PropTypes.object.isRequired,\n recipient: PropTypes.string.isRequired,\n agentAddressChanged: PropTypes.bool.isRequired,\n beneficiaryAddressChanged: PropTypes.bool.isRequired,\n preTransactionDetails: PropTypes.shape({\n AccountType: PropTypes.string.isRequired,\n }),\n text: PropTypes.shape({\n Payments: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n Withdrawals: PropTypes.shape({\n btn_change_agent_address: PropTypes.string,\n btn_change_bene_address: PropTypes.string,\n check_mailing_text: PropTypes.string,\n ao_school_address_modal_title: PropTypes.string,\n bene_school_address_modal_title: PropTypes.string,\n no_payment_accounts_text: PropTypes.func,\n }),\n }).isRequired,\n };\n\n state = {\n showChangeAddressModal: false,\n accountIsUGMAUTMA: this.props.preTransactionDetails.AccountType === ACCOUNT_TYPE_UGMA_UTMA,\n };\n\n addressChangeMsg = (checkRecipient) => {\n return {`Check withdrawals to the ${checkRecipient} are disabled because of a recent mailing address change.`};\n };\n\n render() {\n const { showChangeAddressModal, accountIsUGMAUTMA } = this.state;\n const {\n stepIndex,\n recipientAddress,\n recipient,\n agentAddressChanged,\n beneficiaryAddressChanged,\n text: {\n Payments,\n Withdrawals: {\n btn_change_agent_address,\n btn_change_bene_address,\n check_mailing_text,\n ao_school_address_modal_title,\n bene_school_address_modal_title,\n no_payment_accounts_text,\n }\n },\n } = this.props;\n\n const onClickUrl = () => this.props.history.push(Payments.nav_path);\n\n const checkNote = stepIndex !== 3 && (\n \n {check_mailing_text}\n
\n );\n\n if (recipient === ACCOUNT_OWNER) {\n const agent = recipientAddress.agent;\n return (\n \n {agentAddressChanged ? this.addressChangeMsg('account agent/account owner') : checkNote}\n this.setState({ showChangeAddressModal: false })}\n modalTitle={ao_school_address_modal_title}\n />\n
\n );\n }\n else if (recipient === BENEFICIARY) {\n const beneficiary = recipientAddress.beneficiary;\n return (\n \n
\n\n \n
\n {stepIndex === 2 &&\n {agent.line1}
\n {agent.line2 &&{agent.line2}
}\n{agent.street1}
\n {agent.street2 &&{agent.street2}
}\n{agent.city}, {agent.state.Code} {agent.postalCode}
\n\n this.setState({ showChangeAddressModal: true })}\n title={btn_change_agent_address}\n />\n {!accountIsUGMAUTMA &&\n
\n }\n \n {beneficiaryAddressChanged ? this.addressChangeMsg('beneficiary') : checkNote}\n this.setState({ showChangeAddressModal: false })}\n modalTitle={bene_school_address_modal_title}\n />\n
\n\n\n );\n }\n else {\n const school = recipientAddress.school;\n return (\n \n
\n\n \n
\n {stepIndex === 2 &&\n {beneficiary.name}
\n{beneficiary.street1}
\n {beneficiary.street2 &&{beneficiary.street2}
}\n{beneficiary.city}, {beneficiary.state.Code} {beneficiary.postalCode}
\n\n this.setState({ showChangeAddressModal: true })}\n title={btn_change_bene_address}\n />\n {!accountIsUGMAUTMA &&\n
\n }\n \n {checkNote}\n
\n );\n }\n }\n}\n\nexport default withRouter(connect(select, null)(LanguageHOC(CheckAddress)));\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport CheckAddress from './CheckAddress';\n\nimport {\n Radio,\n RadioGroup,\n FormControlLabel,\n FormControl,\n Collapse,\n FormHelperText,\n} from '@mui/material';\n\nimport { withStyles } from '@mui/styles';\n\nimport {\n Dropdown,\n} from '@frontend/common';\n\nimport {\n ACH_PAYMENT,\n CHECK_PAYMENT,\n RECURRING,\n ONE_TIME,\n ACCOUNT_OWNER,\n HIGHER_ED,\n ELECTRONICSCHOOL_PAYMENT,\n} from '../../constants';\n\nimport styles from './styles.module.scss';\n\nconst muiStyles = () => ({\n root: {\n whiteSpace: 'normal',\n wordBreak: 'normal',\n overflowWrap: 'anywhere'\n }\n});\n\nexport class PaymentInfo extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n isEditing: PropTypes.bool.isRequired,\n stepIndex: PropTypes.number.isRequired,\n withdrawalVariables: PropTypes.object.isRequired,\n paymentType: PropTypes.string.isRequired,\n paymentTypeError: PropTypes.string.isRequired,\n paymentAccount: PropTypes.object.isRequired,\n bankAccountError: PropTypes.string.isRequired,\n paymentAccounts: PropTypes.array.isRequired,\n recipientAddress: PropTypes.object.isRequired,\n recipient: PropTypes.string.isRequired,\n agentAddressChanged: PropTypes.bool.isRequired,\n beneficiaryAddressChanged: PropTypes.bool.isRequired,\n paymentTypeHandle: PropTypes.func.isRequired,\n paymentAccountSelectHandle: PropTypes.func.isRequired,\n frequency: PropTypes.string.isRequired,\n accessCards: PropTypes.array.isRequired,\n agentBankAccounts: PropTypes.array.isRequired,\n beneBankAccounts: PropTypes.array.isRequired,\n withdrawalType: PropTypes.string.isRequired,\n text: PropTypes.shape({\n Payments: PropTypes.shape({\n nav_path: PropTypes.string.isRequired,\n text_bank_hold_language: PropTypes.func.isRequired,\n }).isRequired,\n Withdrawals: PropTypes.shape({\n electronic_request_text: PropTypes.string.isRequired,\n lbl_select_method: PropTypes.string.isRequired,\n no_payment_accounts_text: PropTypes.func.isRequired,\n }).isRequired,\n }).isRequired,\n };\n\n componentDidMount() {\n const { withdrawalVariables, paymentTypeHandle, frequency, agentBankAccounts, accessCards, withdrawalType } = this.props;\n\n // if one time and k12/non-qualified or only check available default to a check\n if (frequency === ONE_TIME) {\n if (\n (withdrawalVariables.paymentTypes.length === 1 && withdrawalVariables.paymentTypes[0].id === CHECK_PAYMENT)\n ||\n (agentBankAccounts.length === 0 && accessCards.length > 0 && (withdrawalType !== HIGHER_ED))\n ) {\n paymentTypeHandle({ target: { value: CHECK_PAYMENT } }); // default to a check\n }\n }\n else {\n if (withdrawalVariables.paymentTypes.length === 1 && withdrawalVariables.paymentTypes[0].id === CHECK_PAYMENT) {\n paymentTypeHandle({ target: { value: '' } }); // we should stop user for recurring\n }\n }\n }\n\n render() {\n const {\n classes,\n isEditing,\n stepIndex,\n withdrawalVariables,\n paymentType,\n paymentTypeError,\n paymentAccount,\n bankAccountError,\n paymentAccounts,\n recipientAddress,\n recipient,\n agentAddressChanged,\n beneficiaryAddressChanged,\n paymentTypeHandle,\n paymentAccountSelectHandle,\n frequency,\n accessCards,\n agentBankAccounts,\n beneBankAccounts,\n withdrawalType,\n text: {\n Payments: { nav_path, text_bank_hold_language, },\n Withdrawals: { electronic_request_text, no_payment_accounts_text, lbl_select_method, }\n }\n } = this.props;\n\n const isRecurring = frequency === RECURRING;\n let paymentTypes = withdrawalVariables.paymentTypes;\n paymentTypes = paymentTypes.filter(type => type.id !== ELECTRONICSCHOOL_PAYMENT);\n const isCheckOnly = paymentTypes.length === 1 && paymentTypes[0].id === CHECK_PAYMENT;\n let noBankAccounts;\n if (recipient === ACCOUNT_OWNER) {\n if (withdrawalType === HIGHER_ED)\n noBankAccounts = agentBankAccounts.length === 0 && accessCards.length === 0;\n else\n noBankAccounts = agentBankAccounts.length === 0;\n }\n else {\n noBankAccounts = beneBankAccounts.length === 0;\n }\n\n const onClickUrl = () => this.props.history.push(nav_path);\n\n const paymentAccountsFormatted = paymentAccounts.map(acct => {\n let display = acct.BankAccountId ? `${acct.BankName} ${acct.BankAccountType}, ${acct.MaskedBankAccountNumber}` : `${acct.Title}, ${acct.CardNumber}`;\n if (acct.Nickname && acct.Nickname.length > 0) {\n display = `${acct.Nickname}, ${acct.MaskedBankAccountNumber}`;\n }\n\n return {\n value: acct.BankAccountId || acct.AccessCardId,\n display,\n };\n });\n\n return (\n {school.name}
\n {school.attn &&{school.attn}
}\n{school.street1}
\n{school.city} {school.state.Code} {school.postalCode}
\nFBO: {school.fbo ? school.fbo : school.beneficiaryName}
\n {school.studentIdNum &&Student ID: {school.studentIdNum}
}\n\n {!isCheckOnly &&\n \n \n {paymentTypes.map(type => {\n const isDisabled = isRecurring && type.name === CHECK_PAYMENT;\n return (\n {paymentTypeError} }\n \n }\n\n
\n );\n }\n\n}\n\nexport default withRouter(LanguageHOC(withStyles(muiStyles)(PaymentInfo)));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n Button,\n TextField,\n Collapse,\n FormHelperText,\n InputAdornment,\n Radio,\n RadioGroup,\n FormControl,\n FormControlLabel,\n} from '@mui/material';\n\nimport {\n Dropdown,\n ZipInput,\n IconBtnTooltip,\n InfoIcon,\n} from '@frontend/common';\n\nimport {\n MAIL,\n ELECTRONIC,\n} from 'components/Features/protected/Accounts/Transactions/Withdrawals/constants';\n\nimport styles from './styles.module.scss';\n\nexport class School extends Component {\n\n static propTypes = {\n recipientAddress: PropTypes.object.isRequired,\n usStates: PropTypes.array.isRequired,\n recipientAddressHandle: PropTypes.func.isRequired,\n isEditing: PropTypes.bool,\n errors: PropTypes.shape({\n schoolError: PropTypes.string,\n street1Error: PropTypes.string,\n cityError: PropTypes.string,\n stateError: PropTypes.string,\n postalCodeError: PropTypes.string,\n attnError: PropTypes.string,\n studentIdNumError: PropTypes.string,\n deliveryType: PropTypes.string,\n }).isRequired,\n stateSelectHandle: PropTypes.func.isRequired,\n handleSchoolSearch: PropTypes.func.isRequired,\n isSchoolRetained: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Withdrawals: PropTypes.object.isRequired,\n }).isRequired,\n handleElectronicSchoolDeliveryType: PropTypes.func,\n ElectronicSchoolDeliveryType: PropTypes.string,\n };\n\n renderElectronicSchoolOption() {\n const {\n recipientAddress,\n isEditing,\n errors: {\n schoolError,\n deliveryType,\n },\n text: {\n Withdrawals: {\n check_mailing_text,\n ElectronicSchoolPayment_fee_msg,\n ElectronicSchoolPayment_electronic_info,\n ElectronicSchoolPayment_mail_info,\n ElectronicSchoolPayment_mail_check,\n retained_school_address_txt,\n }\n },\n handleSchoolSearch,\n isSchoolRetained,\n } = this.props;\n\n const { ElectronicSchoolDeliveryType } = this.props;\n const displayBene = ElectronicSchoolDeliveryType ? this.renderBeneficiary() : '';\n let displaySchoolAddress = '';\n let displayMailCheckNotification = '';\n if (ElectronicSchoolDeliveryType === MAIL) {\n displaySchoolAddress = this.renderAddress();\n displayMailCheckNotification = \n {paymentType === CHECK_PAYMENT && (\n \n {!noBankAccounts &&\n (\n \n
\n {no_payment_accounts_text(onClickUrl)}
}\n \n
\n )\n }\n \n {electronic_request_text}\n {text_bank_hold_language(withdrawalVariables.ACHBankWithdrawalLanguage)}\n
\n {check_mailing_text}
;\n }\n return (\n <>\n \n null}\n value={recipientAddress.school.name}\n InputProps={{ \n endAdornment: (\n \n {!isEditing && \n \n )\n }}\n />\n
\n \n {recipientAddress.school.IsElectronicSchoolPaymentSchool &&\n \n this.props.handleElectronicSchoolDeliveryType(e.target.value)}\n name='deliveryType'\n >\n }\n
\n \n
\n {msg}
)} />\n\n \n
\n {msg}
)} />{deliveryType}
\n \n \n {isSchoolRetained && ElectronicSchoolDeliveryType === MAIL &&
\n \n );\n }\n\n renderRegularOption() {\n const {\n recipientAddress,\n isEditing,\n errors: {\n schoolError,\n },\n handleSchoolSearch,\n isSchoolRetained,\n text: {\n Withdrawals: {\n check_mailing_text,\n retained_school_address_txt,\n ElectronicSchoolPayment_mail_info,\n }\n },\n } = this.props;\n\n return (\n {retained_school_address_txt}
}\n {displayMailCheckNotification}\n {displaySchoolAddress}\n {displayBene}\n \n \n \n
\n );\n }\n\n renderAddress() {\n const {\n recipientAddress,\n usStates,\n recipientAddressHandle,\n errors: {\n street1Error,\n cityError,\n stateError,\n postalCodeError,\n attnError,\n },\n stateSelectHandle,\n } = this.props;\n\n return (\n <>\n \n {recipientAddress.school.name === ''\n ?\n \n \n Search Eligible Schools\n \n {schoolError && {schoolError} }\n \n : \n null}\n value={recipientAddress.school.name}\n InputProps={{ endAdornment: (\n \n {!isEditing &&\n )\n }}\n />\n }\n
\n \n \n
\n \n {this.renderAddress()}\n {this.renderBeneficiary()}\n \n \n
\n {isSchoolRetained && {check_mailing_text}
\n {msg}
)} />{retained_school_address_txt}
}\n \n recipientAddressHandle(e, 'name')} // eslint-disable-line brace-style\n fullWidth\n />\n
\n \n recipientAddressHandle(e, 'attn')} // eslint-disable-line brace-style\n fullWidth\n />\n
\n \n { e.persist(); recipientAddressHandle(e, 'street1'); }} // eslint-disable-line brace-style\n fullWidth\n inputProps={{\n maxLength: 40\n }}\n />\n
\n \n { e.persist(); recipientAddressHandle(e, 'city'); }} // eslint-disable-line brace-style\n fullWidth\n inputProps={{\n maxLength: 25\n }}\n />\n
\n \n ({ value: state.Code, display: state.Name }))}\n errorText={stateError}\n value={recipientAddress.school.state.Code || ''}\n onChange={stateSelectHandle}\n SelectProps={{\n MenuProps: {\n PaperProps: {\n style: { maxHeight: '300px' }\n }\n }\n }}\n />\n
\n \n recipientAddressHandle(e, 'postalCode')}\n label='Postal Code'\n value={recipientAddress.school.postalCode}\n />\n
\n \n );\n }\n\n renderBeneficiary() {\n const { recipientAddress, errors: { studentIdNumError } } = this.props;\n const bene = recipientAddress.school.beneficiaryName\n ? recipientAddress.school.beneficiaryName\n : recipientAddress.school.fbo;\n return (\n <>\n \n
\n \n { e.persist(); this.props.recipientAddressHandle(e, 'studentIdNum'); }} // eslint-disable-line brace-style\n value={recipientAddress.school.studentIdNum}\n fullWidth\n />\n
\n \n );\n }\n \n render() {\n const renderOption = this.props.recipientAddress.school.IsElectronicSchoolPaymentSchool\n ? this.renderElectronicSchoolOption()\n : this.renderRegularOption();\n\n return renderOption;\n }\n}\n\nexport default LanguageHOC(School);","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { cloneDeep } from 'lodash';\n\nimport {\n ACCOUNT_OWNER,\n ACCOUNT_TYPE_UGMA_UTMA,\n BENEFICIARY,\n SCHOOL,\n RECURRING,\n ACCESS_CARD_PAYMENT,\n ACH_PAYMENT,\n HIGHER_ED,\n CHECK_PAYMENT,\n} from '../../../constants';\n\nimport CheckAddress from '../CheckAddress';\nimport PaymentInfo from '../PaymentInfo';\nimport School from '../School';\n\nimport styles from '../styles.module.scss';\n\nexport class Step2PaymentMethod extends Component {\n static propTypes = {\n isEditing: PropTypes.bool.isRequired,\n accountIsUGMAUTMA: PropTypes.bool.isRequired,\n withdrawal: PropTypes.shape({\n paymentAccount: PropTypes.object.isRequired,\n paymentType: PropTypes.string.isRequired,\n recipient: PropTypes.string.isRequired,\n recipientAddress: PropTypes.object.isRequired,\n frequency: PropTypes.string.isRequired,\n withdrawalType: PropTypes.string.isRequired,\n }).isRequired,\n preTransactionDetails: PropTypes.shape({\n AccountType: PropTypes.string.isRequired,\n agentAddressChanged: PropTypes.bool.isRequired,\n beneficiaryAddressChanged: PropTypes.bool.isRequired,\n }).isRequired,\n withdrawalVariables: PropTypes.object.isRequired,\n usStates: PropTypes.array.isRequired,\n accessCards: PropTypes.array.isRequired,\n agentBankAccounts: PropTypes.array.isRequired,\n beneBankAccounts: PropTypes.array.isRequired,\n errors: PropTypes.shape({\n bankAccountError: PropTypes.string.isRequired,\n paymentTypeError: PropTypes.string.isRequired,\n schoolError: PropTypes.string.isRequired,\n street1Error: PropTypes.string.isRequired,\n cityError: PropTypes.string.isRequired,\n stateError: PropTypes.string.isRequired,\n postalCodeError: PropTypes.string.isRequired,\n attnError: PropTypes.string.isRequired,\n studentIdNumError: PropTypes.string.isRequired,\n deliveryType: PropTypes.string.isRequired,\n }).isRequired,\n paymentTypeHandle: PropTypes.func.isRequired,\n paymentAccountSelectHandle: PropTypes.func.isRequired,\n recipientAddressHandle: PropTypes.func.isRequired,\n stateSelectHandle: PropTypes.func.isRequired,\n handleSchoolSearch: PropTypes.func.isRequired,\n isSchoolRetained: PropTypes.bool.isRequired,\n text: PropTypes.shape({\n Payments: PropTypes.shape({\n nav_path: PropTypes.string\n }).isRequired,\n Withdrawals: PropTypes.shape({\n no_payment_accounts_text: PropTypes.func,\n ugmautma_check_only_txt: PropTypes.string,\n }).isRequired,\n }).isRequired,\n handleElectronicSchoolDeliveryType: PropTypes.func.isRequired,\n ElectronicSchoolDeliveryType: PropTypes.string.isRequired,\n };\n\n componentDidMount() {\n const {\n accountIsUGMAUTMA,\n agentBankAccounts,\n beneBankAccounts,\n accessCards,\n paymentTypeHandle,\n withdrawal: {\n recipient,\n frequency,\n }\n } = this.props;\n\n // default to check\n if (frequency !== RECURRING) {\n if (\n (recipient === ACCOUNT_OWNER && agentBankAccounts.length === 0 && accessCards.length === 0) ||\n (recipient === BENEFICIARY && beneBankAccounts.length === 0) ||\n accountIsUGMAUTMA\n ) {\n paymentTypeHandle({ target: { value: CHECK_PAYMENT } });\n }\n }\n }\n\n render() {\n const {\n isEditing,\n withdrawal: {\n paymentAccount,\n paymentType,\n recipient,\n recipientAddress,\n frequency,\n withdrawalType\n },\n preTransactionDetails: {\n AccountType,\n agentAddressChanged,\n beneficiaryAddressChanged,\n },\n withdrawalVariables,\n usStates,\n accessCards,\n agentBankAccounts,\n beneBankAccounts,\n paymentTypeHandle,\n paymentAccountSelectHandle,\n recipientAddressHandle,\n stateSelectHandle,\n handleSchoolSearch,\n errors: {\n bankAccountError,\n paymentTypeError,\n schoolError,\n street1Error,\n cityError,\n stateError,\n postalCodeError,\n attnError,\n studentIdNumError,\n deliveryType,\n },\n isSchoolRetained,\n text: {\n Payments: {\n nav_path\n },\n Withdrawals: {\n no_payment_accounts_text,\n ugmautma_check_only_txt,\n }\n },\n } = this.props;\n const stepIndex = 2;\n const isRecurring = frequency === RECURRING;\n const isUgmaUtmaAccount = AccountType === ACCOUNT_TYPE_UGMA_UTMA;\n\n const onClickUrl = () => this.props.history.push(nav_path);\n\n let component;\n switch (recipient) {\n case ACCOUNT_OWNER:\n if (\n (agentBankAccounts.length === 0 && accessCards.length === 0) || isUgmaUtmaAccount\n )\n if (isRecurring) {\n component = {no_payment_accounts_text(onClickUrl)}
;\n }\n else\n component = (\n \n {isUgmaUtmaAccount &&
\n );\n else {\n // hide access card or bank accounts radio buttons if not available, when access card also hide if not Higher Ed\n const customWithdrawalVariables = cloneDeep(withdrawalVariables);\n if (accessCards.length === 0 || withdrawalType !== HIGHER_ED) {\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== ACCESS_CARD_PAYMENT);\n }\n\n if (agentBankAccounts.length === 0) {\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== ACH_PAYMENT);\n }\n\n if (frequency === RECURRING) {\n // remove check from payment methods if there\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== CHECK_PAYMENT);\n }\n\n component = (\n {ugmautma_check_only_txt}
}\n {no_payment_accounts_text(onClickUrl)}
;\n }\n else {\n component = (\n \n {isUgmaUtmaAccount &&
\n );\n }\n\n else {\n // always hide access cards or hide bank accounts radio buttons if not available\n const customWithdrawalVariables = cloneDeep(withdrawalVariables);\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== ACCESS_CARD_PAYMENT);\n if (beneBankAccounts.length === 0) {\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== ACH_PAYMENT);\n }\n\n if (frequency === RECURRING) {\n // remove check from payment methods if there\n customWithdrawalVariables.paymentTypes = customWithdrawalVariables.paymentTypes.filter(type => type.id !== CHECK_PAYMENT);\n }\n\n component = (\n {ugmautma_check_only_txt}
}\n Recipient not found!
;\n }\n\n return component;\n }\n\n\n}\n\nexport default withRouter(LanguageHOC(Step2PaymentMethod));","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n ACCOUNT_OWNER,\n BENEFICIARY,\n SCHOOL,\n} from '../../constants';\n\nimport styles from './styles.module.scss';\n\nBankInfo.propTypes = {\n recipientAddress: PropTypes.object.isRequired,\n paymentAccount: PropTypes.object.isRequired,\n recipient: PropTypes.string.isRequired,\n};\n\nexport function BankInfo(props) {\n const {\n recipient,\n paymentAccount,\n recipientAddress,\n } = props;\n\n let recipientName;\n switch (recipient) {\n case ACCOUNT_OWNER:\n recipientName = recipientAddress.agent.name;\n break;\n case BENEFICIARY:\n recipientName = recipientAddress.beneficiary.name;\n break;\n case SCHOOL:\n recipientName = recipientAddress.school.name;\n break;\n default:\n recipientName = 'Recipient not found.';\n }\n const paymentAccountDisplay = paymentAccount.BankAccountId\n ? `${paymentAccount.BankName} ${paymentAccount.BankAccountType}, ${paymentAccount.MaskedBankAccountNumber}`\n : `${paymentAccount.Title}, ${paymentAccount.CardNumber}`;\n\n return (\n \n
\n );\n}\n\nexport default BankInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport dayjs from 'dayjs';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport {\n currencyFormatter,\n\n SmartTable,\n TableContainer,\n TableHeader,\n TablePagination,\n TableRows,\n} from '@frontend/common';\n\nimport {\n ACH_PAYMENT,\n ACCESS_CARD_PAYMENT,\n FULL_BALANCE,\n PARTIAL_BALANCE,\n RECURRING,\n ELECTRONIC,\n} from '../../../constants';\n\nimport BankInfo from '../BankInfo';\nimport CheckAddress from '../CheckAddress';\n\nimport styles from './styles.module.scss';\n\nexport class Step3Print extends React.Component {\n static propTypes = {\n withdrawal: PropTypes.shape({\n actualSellDate: PropTypes.string,\n amount: PropTypes.number,\n frequency: PropTypes.string,\n amountType: PropTypes.string,\n recipientAddress: PropTypes.object,\n recipient: PropTypes.string,\n proportionalAmounts: PropTypes.array,\n leaveAccountOpen: PropTypes.bool,\n paymentType: PropTypes.string,\n paymentDeliveryType: PropTypes.string,\n paymentAccount: PropTypes.object,\n actualStartDateDayOfMonth: PropTypes.number,\n actualEndDate: PropTypes.string,\n createdDate: PropTypes.string,\n }).isRequired,\n isProportional: PropTypes.bool.isRequired,\n preTransactionDetails: PropTypes.shape({\n agentAddressChanged: PropTypes.bool,\n beneficiaryAddressChanged: PropTypes.bool,\n groupAccounts: PropTypes.arrayOf(\n PropTypes.shape({\n AccountId: PropTypes.number,\n availableForWithdrawalNum: PropTypes.number,\n AllowFullWithdrawal: PropTypes.bool,\n })\n ),\n OptionName: PropTypes.string,\n AccountNumber: PropTypes.number,\n }).isRequired,\n text: PropTypes.shape({\n Withdrawals: PropTypes.shape({\n step3_print_and_summary: PropTypes.object.isRequired,\n total_amount_full_balance: PropTypes.string,\n total_amount_full_balance_electronic: PropTypes.string,\n }).isRequired\n }).isRequired,\n };\n\n render() {\n const {\n withdrawal: {\n amount,\n frequency,\n amountType,\n recipientAddress,\n recipient,\n proportionalAmounts,\n leaveAccountOpen,\n paymentType,\n paymentDeliveryType,\n paymentAccount,\n actualSellDate,\n actualStartDateDayOfMonth,\n actualEndDate,\n createdDate,\n },\n isProportional,\n preTransactionDetails: {\n groupAccounts,\n OptionName,\n AccountNumber,\n agentAddressChanged,\n beneficiaryAddressChanged,\n },\n text: {\n Withdrawals: {\n step3_print_and_summary,\n total_amount_full_balance,\n total_amount_full_balance_electronic,\n }\n },\n } = this.props;\n const stepIndex = 3;\n\n const createdTime = dayjs(createdDate).format('MM/DD/YYYY h:mm A'); // eslint-disable-line\n\n let payeeAddress;\n let isElectronicSchoolPayment = false;\n switch (recipient) {\n case 'I':\n payeeAddress = recipientAddress.school;\n if (paymentDeliveryType === ELECTRONIC) {\n isElectronicSchoolPayment = true;\n }\n break;\n case 'P':\n payeeAddress = recipientAddress.agent;\n break;\n case 'B':\n payeeAddress = recipientAddress.beneficiary;\n break;\n default:\n payeeAddress = 'Incorrect recipient';\n }\n\n const isFullBalance = amountType === FULL_BALANCE;\n const closeAccount = amountType === PARTIAL_BALANCE ? false : !leaveAccountOpen;\n let tableData = [];\n const isRecurring = frequency === RECURRING;\n if (isProportional) {\n let tableId = 0;\n // multiple accounts\n tableData = proportionalAmounts.map(pAccount => ({\n tableId: ++tableId,\n accountNumber: pAccount.accountNumber,\n investmentOption: groupAccounts.find(gAccount => gAccount.AccountId === pAccount.accountId).OptionName,\n fullMarket: isFullBalance ? 'Yes' : 'No',\n leaveOpen: leaveAccountOpen ? 'Yes' : 'No',\n withdrawalAmount: isFullBalance ? 'Full Balance' : pAccount.amount,\n }));\n\n if (isElectronicSchoolPayment) {\n const feeRow = {\n tableId: ++tableId,\n accountNumber: AccountNumber,\n investmentOption: OptionName,\n fullMarket: '',\n leaveOpen: '',\n withdrawalAmount: isFullBalance ? currencyFormatter(3.5) : 3.5,\n };\n tableData.push(feeRow);\n }\n }\n else {\n // single account\n const amntRow = {\n tableId: 0,\n accountNumber: AccountNumber,\n investmentOption: OptionName,\n fullMarket: isFullBalance ? 'Yes' : 'No',\n leaveOpen: closeAccount ? 'No' : 'Yes',\n withdrawalAmount: isFullBalance ? 'Full Balance' : amount,\n };\n tableData.push(amntRow);\n\n if (isElectronicSchoolPayment) {\n const feeRow = {\n tableId: 1,\n accountNumber: AccountNumber,\n investmentOption: OptionName,\n fullMarket: '',\n leaveOpen: '',\n withdrawalAmount: isFullBalance ? currencyFormatter(3.5) : 3.5,\n };\n tableData.push(feeRow);\n }\n }\n\n const totalAmountOf = currencyFormatter(tableData.reduce((total, row) => total += row.withdrawalAmount, 0));\n let totalAmtMsg = '';\n let amountDataType = 'currency';\n if (isFullBalance) {\n totalAmtMsg = isElectronicSchoolPayment\n ? total_amount_full_balance_electronic\n : total_amount_full_balance;\n amountDataType = 'string';\n }\n else {\n totalAmtMsg = step3_print_and_summary.total_amount(totalAmountOf);\n }\n\n const displayTotal = proportionalAmounts.length > 0 || isElectronicSchoolPayment;\n\n return (\n {recipientName}
\n{paymentAccountDisplay}
\n\n
\n
\n );\n }\n}\n\nexport default LanguageHOC(Step3Print);\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\n\nimport {\n ACH_PAYMENT,\n ACCESS_CARD_PAYMENT,\n FULL_BALANCE,\n RECURRING,\n CHECK_PAYMENT,\n ELECTRONIC,\n} from '../../../constants';\n\nimport {\n currencyFormatter,\n} from '@frontend/common';\n\nimport {\n Checkbox,\n FormControlLabel,\n} from '@mui/material';\n\nimport CheckAddress from '../CheckAddress';\nimport BankInfo from '../BankInfo';\n\nimport styles from './styles.module.scss';\n\nStep3TermsAndConditions.propTypes = {\n termsChecked: PropTypes.bool.isRequired,\n withdrawal: PropTypes.shape({\n frequency: PropTypes.string.isRequired,\n amount: PropTypes.number.isRequired,\n amountType: PropTypes.string.isRequired,\n leaveAccountOpen: PropTypes.bool.isRequired,\n sellDate: PropTypes.object,\n startDate: PropTypes.object,\n endDate: PropTypes.object,\n withdrawalType: PropTypes.string.isRequired,\n paymentType: PropTypes.string.isRequired,\n paymentDeliveryType: PropTypes.string.isRequired,\n recipient: PropTypes.string.isRequired,\n recipientAddress: PropTypes.object.isRequired,\n paymentAccount: PropTypes.object.isRequired,\n }).isRequired,\n handleTermsChecked: PropTypes.func.isRequired,\n preTransactionDetails: PropTypes.shape({\n agentAddressChanged: PropTypes.bool.isRequired,\n beneficiaryAddressChanged: PropTypes.bool.isRequired,\n }).isRequired,\n withdrawalVariables: PropTypes.shape({\n paymentTypes: PropTypes.array.isRequired,\n withdrawalTypes: PropTypes.array.isRequired,\n }).isRequired,\n text: PropTypes.shape({\n Withdrawals: PropTypes.object.isRequired,\n }).isRequired,\n};\n\nconst ACH = 'Electronic Funds Transfer';\nconst ELECTRONIC_SCHOOL = 'Electronic Payment';\n\nexport function Step3TermsAndConditions(props) {\n const {\n termsChecked,\n withdrawal: {\n frequency,\n amount,\n amountType,\n leaveAccountOpen,\n sellDate,\n startDate,\n endDate,\n withdrawalType,\n paymentType,\n paymentDeliveryType,\n recipient,\n recipientAddress,\n paymentAccount,\n },\n preTransactionDetails: {\n agentAddressChanged,\n beneficiaryAddressChanged,\n },\n withdrawalVariables: {\n paymentTypes,\n withdrawalTypes\n },\n handleTermsChecked,\n text: { Withdrawals },\n } = props;\n const stepIndex = 3;\n\n const isRecurring = frequency === RECURRING;\n\n let amtDisplayMsg = '';\n let method = paymentTypes.find(type => type.id === paymentType).name;\n if (amountType.includes('Partial')) {\n if (recipientAddress.school.IsElectronicSchoolPaymentSchool) {\n if (paymentDeliveryType === ELECTRONIC) {\n amtDisplayMsg = `${currencyFormatter(Number(amount + 3.50))} (${currencyFormatter(amount)} + $3.50 Electronic Payment fee)`;\n method = ELECTRONIC_SCHOOL;\n }\n else {\n amtDisplayMsg = currencyFormatter(amount);\n method = CHECK_PAYMENT;\n }\n }\n else {\n amtDisplayMsg = currencyFormatter(amount);\n if (paymentType === CHECK_PAYMENT) {\n method = CHECK_PAYMENT;\n }\n else {\n method = ACH;\n }\n }\n }\n else {\n amtDisplayMsg = recipientAddress.school.IsElectronicSchoolPaymentSchool && paymentDeliveryType === ELECTRONIC\n ? 'Full Balance (less $3.50 Electronic School fee)'\n : 'Full Balance';\n }\n\n return [\n {step3_print_and_summary.title}
\n{step3_print_and_summary.comment1}
\n\n
{step3_print_and_summary.comment2}
\n\n\n
\n\n Payee
\n{payeeAddress.name}
\n\n {(paymentType === ACH_PAYMENT || paymentType === ACCESS_CARD_PAYMENT) ?\n\n
\n :\n {step3_print_and_summary.subtitle_payee_bank}
\n\n
\n }\n\n {step3_print_and_summary.subtitle_payee_address}
\n{step3_print_and_summary.subtitle_schedule}
\n {isRecurring ?\n\n
\n :\n {step3_print_and_summary.frequency_recurring(dayjs(`01-${actualStartDateDayOfMonth}-2020`).format('Do'))}
\n {actualEndDate &&{step3_print_and_summary.end_date_text(dayjs(actualEndDate).format('L'))}
}\n{step3_print_and_summary.frequency_onetime(dayjs(actualSellDate).format('L'))}
\n }\n\n\n \n \n \n
\n\n {step3_print_and_summary.table_title}
\n{step3_print_and_summary.table_note}
\n{totalAmtMsg}
}\n {step3_print_and_summary.star_note}
\n {createdTime} MT
\n \n {step3_print_and_summary.print_note}\n
\n \n
,\n \n
\n \n
\n\n \n
\n\n {amountType === FULL_BALANCE ?\n Amount
\n {amtDisplayMsg}\n \n
\n :\n null\n }\n\n {isRecurring ?\n Account Status
\n {leaveAccountOpen ? 'Will remain open' : 'Will be closed'}\n \n
:\n Start Date
\n {frequency} on {dayjs(startDate).format('L')}\n {endDate &&\n \n
\n }\n End Date
\n Ending on {dayjs(endDate).format('L')}\n \n
\n }\n\n Sell Date
\n {frequency} on {dayjs(sellDate).format('L')}\n \n
\n\n Withdrawal Type
\n {withdrawalTypes.find(type => type.id === withdrawalType).name}\n \n
\n Payment Method
\n {method}\n \n {(paymentType === ACH_PAYMENT || paymentType === ACCESS_CARD_PAYMENT) ?\n
\n \n
\n :\n Recipient
\n \n
\n }\n Recipient
\n \n
,\n {Withdrawals.step3_terms_and_conditions.title}
\n{Withdrawals.step3_terms_and_conditions.title_help}
\n\n{Withdrawals.step3_terms_and_conditions.p1.title}
\n{Withdrawals.step3_terms_and_conditions.p1.text1}
\n{Withdrawals.step3_terms_and_conditions.p1.text2}
\n\n{Withdrawals.step3_terms_and_conditions.p2.title}
\n{Withdrawals.step3_terms_and_conditions.p2.text1}
\n{Withdrawals.step3_terms_and_conditions.p2.text2}
\n\n{Withdrawals.step3_terms_and_conditions.p3.title}
\n{Withdrawals.step3_terms_and_conditions.p3.text1}
\n{Withdrawals.step3_terms_and_conditions.p3.text2}
\n\n{Withdrawals.step3_terms_and_conditions.p4.title}
\n{Withdrawals.step3_terms_and_conditions.p4.text1}
\n{Withdrawals.step3_terms_and_conditions.p4.text2}
\n{Withdrawals.step3_terms_and_conditions.p4.text3}
\n{messages.map(msg =>
);\r\n }\r\n\r\n leaveAccountOpenHandle = () => {\r\n this.withdrawalStateSet('leaveAccountOpen', !this.state.withdrawal.leaveAccountOpen);\r\n }\r\n\r\n nextStepHandle = () => {\r\n // make sure user can't change the frequency after step 0\r\n this.setState(({ smallScreen, stepIndex, completed }) => {\r\n const nextIndex = stepIndex + 1;\r\n if (!smallScreen || nextIndex === 2) {\r\n window.scrollTo(0, 0);\r\n }\r\n const newCompleted = completed;\r\n newCompleted[stepIndex] = true;\r\n return ({\r\n frequencyChangeDisabled: true,\r\n stepIndex: nextIndex,\r\n completed: newCompleted,\r\n });\r\n });\r\n }\r\n\r\n clearWithdrawalByStep = (stepIndex) => {\r\n let clearedWithdrawalByStep = cloneDeep(this.state.withdrawal);\r\n // first clear the current step's values\r\n switch (stepIndex) {\r\n case 0:\r\n clearedWithdrawalByStep = {\r\n ...clearedWithdrawalByStep,\r\n amount: 0,\r\n paymentAccount: {},\r\n leaveAccountOpen: false,\r\n paymentType: '',\r\n proportionalAmounts: [],\r\n recipient: '',\r\n sellDate: this.props.withdrawalVariables.sellDates.length > 0 ? dayjs(this.props.withdrawalVariables.sellDates[0]) : null,\r\n startDate: this.props.withdrawalVariables.startDates.length > 0 ? dayjs(this.props.withdrawalVariables.startDates[0]) : null,\r\n endDate: null,\r\n actualSellDate: null,\r\n actualStartDateDayOfMonth: null,\r\n actualEndDate: null,\r\n createdDate: null,\r\n nextRunDate: null\r\n };\r\n break;\r\n\r\n case 1:\r\n clearedWithdrawalByStep = {\r\n ...clearedWithdrawalByStep,\r\n amount: 0,\r\n paymentAccount: {},\r\n leaveAccountOpen: false,\r\n proportionalAmounts: [],\r\n sellDate: this.props.withdrawalVariables.sellDates.length > 0 ? dayjs(this.props.withdrawalVariables.sellDates[0]) : null,\r\n startDate: this.props.withdrawalVariables.startDates.length > 0 ? dayjs(this.props.withdrawalVariables.startDates[0]) : null,\r\n endDate: null,\r\n actualSellDate: null,\r\n actualStartDateDayOfMonth: null,\r\n actualEndDate: null,\r\n createdDate: null,\r\n nextRunDate: null\r\n };\r\n break;\r\n\r\n case 2:\r\n clearedWithdrawalByStep = {\r\n ...clearedWithdrawalByStep,\r\n amount: 0,\r\n paymentAccount: {},\r\n leaveAccountOpen: false,\r\n proportionalAmounts: [],\r\n sellDate: this.props.withdrawalVariables.sellDates.length > 0 ? dayjs(this.props.withdrawalVariables.sellDates[0]) : null,\r\n startDate: this.props.withdrawalVariables.startDates.length > 0 ? dayjs(this.props.withdrawalVariables.startDates[0]) : null,\r\n endDate: null,\r\n actualSellDate: null,\r\n actualStartDateDayOfMonth: null,\r\n actualEndDate: null,\r\n createdDate: null,\r\n nextRunDate: null,\r\n };\r\n break;\r\n\r\n default: // nothing\r\n }\r\n\r\n return clearedWithdrawalByStep;\r\n }\r\n\r\n previousStepHandle = () => {\r\n const { paymentType, paymentDeliveryType } = this.state.withdrawal;\r\n // then make sure user can change the frequency when on step 0\r\n this.setState(({ stepIndex, completed, isEditing }) => {\r\n const previousIndex = stepIndex - 1;\r\n const newCompleted = completed;\r\n newCompleted[stepIndex] = false;\r\n const updatedState = {\r\n frequencyChangeDisabled: !(previousIndex === 0),\r\n stepIndex: previousIndex,\r\n completed: newCompleted,\r\n paymentDeliveryType,\r\n paymentType,\r\n errors: [], // assuming there are only errors on the current step\r\n };\r\n // allow clearing values on going back when creating a new withdrawal only\r\n if (!isEditing) {\r\n updatedState.withdrawal = this.clearWithdrawalByStep(stepIndex);\r\n }\r\n return (updatedState);\r\n });\r\n }\r\n\r\n paymentTypeHandle = e => {\r\n const { accessCards, preTransactionDetails: { AccountType } } = this.props;\r\n const { recipient, withdrawalType } = this.state.withdrawal;\r\n const paymentType = e?.target?.value || '';\r\n\r\n // clear payment account first\r\n if (e !== undefined) {\r\n this.withdrawalStateSet('paymentAccount', {}, () => {\r\n switch (recipient) {\r\n case ACCOUNT_OWNER: {\r\n const agentBankAccounts = this.getAgentBankAccounts();\r\n if (\r\n (agentBankAccounts.length === 0 && accessCards.length === 0)\r\n ||\r\n (agentBankAccounts.length === 0 && accessCards.length > 0 && (withdrawalType !== HIGHER_ED))\r\n ||\r\n (AccountType === ACCOUNT_TYPE_UGMA_UTMA)\r\n ) {\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n }\r\n else {\r\n this.withdrawalStateSet('paymentType', paymentType);\r\n // if access card also set the payment account\r\n if (accessCards.length === 1 && paymentType === ACCESS_CARD_PAYMENT)\r\n this.paymentAccountSelectHandle(accessCards[0].AccessCardId);\r\n }\r\n break;\r\n }\r\n case BENEFICIARY: {\r\n const beneBankAccounts = this.getBeneBankAccounts();\r\n if (beneBankAccounts.length === 0 || AccountType === ACCOUNT_TYPE_UGMA_UTMA)\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n else\r\n this.withdrawalStateSet('paymentType', paymentType);\r\n break;\r\n }\r\n case SCHOOL:\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n break;\r\n case ELECTRONICSCHOOL_PAYMENT:\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n this.withdrawalStateSet('paymenDeliveryType', ELECTRONIC);\r\n break;\r\n default:\r\n this.withdrawalStateSet('paymentType', '');\r\n }\r\n });\r\n }\r\n }\r\n\r\n proportionalAmountsSet = (value) => {\r\n const { preTransactionDetails: { groupAccounts } } = this.props;\r\n const { withdrawal: { amount, amountType } } = this.state;\r\n\r\n if (amountType === FULL_BALANCE) {\r\n this.withdrawalStateSet('proportionalAmounts', groupAccounts.map(account => ({\r\n accountId: account.AccountId,\r\n amount: account.marketValueNumber,\r\n accountNumber: account.AccountNumber\r\n })));\r\n }\r\n else {\r\n this.withdrawalStateSet('proportionalAmounts', groupAccounts.map(account => ({\r\n accountId: account.AccountId,\r\n amount: (value ? value : amount) * account.percentageOfTotalValue,\r\n accountNumber: account.AccountNumber\r\n })));\r\n }\r\n }\r\n\r\n radioButtonLabelGenerate = label => {\r\n return (\r\n \r\n {msg}
)}{label.name}
\r\n \r\n {label.id !== 'I' &&
\r\n \r\n );\r\n }\r\n\r\n recipientAddressHandle = (e, fieldName) => {\r\n if (e !== undefined) {\r\n const addresses = { ...this.state.withdrawal.recipientAddress };\r\n\r\n let value;\r\n if (fieldName === 'postalCode') {\r\n value = e.formattedValue;\r\n }\r\n else {\r\n value = e.target.value;\r\n }\r\n\r\n this.withdrawalStateSet('recipientAddress', { ...addresses, school: { ...addresses.school, [fieldName]: value } });\r\n }\r\n }\r\n\r\n recipientHandle = (e) => {\r\n const recipient = e.target.value;\r\n this.withdrawalStateSet('recipient', recipient);\r\n // always reset payment type when recipient changed except when school then set to check\r\n if (recipient === SCHOOL) {\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n }\r\n else {\r\n this.withdrawalStateSet('paymentType', '');\r\n }\r\n }\r\n\r\n schoolSelect = (schoolId, ElectronicSchoolPaymentSchoolId) => {\r\n const addresses = { ...this.state.withdrawal.recipientAddress };\r\n const { preTransactionDetails } = this.props;\r\n const { schoolAddresses } = preTransactionDetails;\r\n const { schools } = this.state;\r\n const beneficiaryName = preTransactionDetails.beneficiaryName;\r\n\r\n const school = schoolId === '0'\r\n ? schools.find(school => school.ElectronicSchoolPaymentSchoolId === ElectronicSchoolPaymentSchoolId)\r\n : schools.find(school => school.schoolId === schoolId);\r\n\r\n const recipientAddress = schoolAddresses.find(address => address.schoolId === schoolId);\r\n const isSchoolRetained = recipientAddress !== undefined;\r\n\r\n if (school.IsElectronicSchoolPaymentSchool) {\r\n this.setState({ schoolSearchLoading: true });\r\n this.props.getElectronicSchoolPaymentSchool(school.ElectronicSchoolPaymentSchoolId)\r\n .then(response => {\r\n this.setState(\r\n { schoolSearchLoading: false, isSchoolRetained, schoolSearchOpen: false, IsElectronicSchoolPaymentSchool: true },\r\n () => {\r\n this.withdrawalStateSet('recipientAddress', {\r\n school: {\r\n fbo: school.fbo,\r\n name: school.name,\r\n IsElectronicSchoolPaymentSchool: school.IsElectronicSchoolPaymentSchool,\r\n ElectronicSchoolPaymentSchoolId: school.ElectronicSchoolPaymentSchoolId,\r\n fafsaId: school.fafsaId ? school.fafsaId : undefined,\r\n studentIdNum: '',\r\n beneficiaryName,\r\n schoolId,\r\n attn: isSchoolRetained && recipientAddress.attn ? recipientAddress.attn : '',\r\n city: isSchoolRetained && recipientAddress.city ? recipientAddress.city : '',\r\n postalCode: isSchoolRetained && recipientAddress.postalCode ? recipientAddress.postalCode : '',\r\n state: isSchoolRetained && recipientAddress.state ? recipientAddress.state : { Code: '' },\r\n street1: isSchoolRetained && recipientAddress.street1 ? recipientAddress.street1 : '',\r\n street2: isSchoolRetained && recipientAddress.street2 ? recipientAddress.street2 : '',\r\n street3: isSchoolRetained && recipientAddress.street3 ? recipientAddress.street3 : '',\r\n ElectronicSchoolInfo: response.payload.data,\r\n }\r\n });\r\n this.withdrawalStateSet('paymentType', ELECTRONICSCHOOL_PAYMENT);\r\n this.withdrawalStateSet('paymentDeliveryType', ELECTRONIC);\r\n }\r\n );\r\n });\r\n }\r\n else {\r\n this.setState(\r\n { isSchoolRetained, schoolSearchOpen: false, IsElectronicSchoolPaymentSchool: false },\r\n () => {\r\n this.withdrawalStateSet('recipientAddress', {\r\n ...addresses,\r\n school: {\r\n fbo: school.fbo,\r\n name: school.name,\r\n IsElectronicSchoolPaymentSchool: false,\r\n ElectronicSchoolPaymentSchoolId: '',\r\n fafsaId: school.fafsaId ? school.fafsaId : undefined,\r\n studentIdNum: '',\r\n beneficiaryName,\r\n schoolId,\r\n attn: isSchoolRetained && recipientAddress.attn ? recipientAddress.attn : '',\r\n city: isSchoolRetained && recipientAddress.city ? recipientAddress.city : '',\r\n postalCode: isSchoolRetained && recipientAddress.postalCode ? recipientAddress.postalCode : '',\r\n state: isSchoolRetained && recipientAddress.state ? recipientAddress.state : { Code: '' },\r\n street1: isSchoolRetained && recipientAddress.street1 ? recipientAddress.street1 : '',\r\n street2: isSchoolRetained && recipientAddress.street2 ? recipientAddress.street2 : '',\r\n street3: isSchoolRetained && recipientAddress.street3 ? recipientAddress.street3 : '',\r\n ElectronicSchoolInfo: {},\r\n }\r\n });\r\n this.withdrawalStateSet('paymentType', CHECK_PAYMENT);\r\n this.withdrawalStateSet('paymentDeliveryType', MAIL);\r\n }\r\n );\r\n }\r\n }\r\n\r\n schoolsGet() {\r\n if (this.state.schools.length === 0) {\r\n this.setState({ schoolSearchLoading: true });\r\n this.props.getSchools()\r\n .then(response => {\r\n const data = response.payload.data;\r\n let id = -1;\r\n if (data && data.length > 0) {\r\n const schools = data.map(school => {\r\n ++id;\r\n return {\r\n id,\r\n city: properCase(school.City),\r\n fafsaId: school.Code,\r\n name: properCase(school.Name),\r\n schoolId: school.CollegeId.toString(),\r\n state: school.State,\r\n IsElectronicSchoolPaymentSchool: school.IsElectronicSchoolPaymentSchool,\r\n ElectronicSchoolPaymentSchoolId: school.ElectronicSchoolPaymentSchoolId,\r\n };\r\n });\r\n this.setState({ schools });\r\n }\r\n })\r\n .finally(() => this.setState({ schoolSearchLoading: false }));\r\n }\r\n }\r\n\r\n continueButtonHandle = () => this.setState({ partialWithdrawalMessageOpen: false });\r\n\r\n dateHandle = (date, dateKey) => {\r\n this.withdrawalStateSet(dateKey, date);\r\n\r\n if (dateKey === 'startDate' || dateKey === 'sellDate')\r\n this.props.checkDisplayWarning(date);\r\n }\r\n\r\n stateSelectHandle = (value) => {\r\n const addresses = { ...this.state.withdrawal.recipientAddress };\r\n this.withdrawalStateSet('recipientAddress', { ...addresses, school: { ...addresses.school, state: { Code: value } } });\r\n }\r\n\r\n getAgentBankAccounts = () => {\r\n const { bankAccounts } = this.props;\r\n // get agent's bank accounts\r\n return bankAccounts\r\n .filter(bank => bank.IsVerified)\r\n .filter(bank => bank.BeneficiaryId === null);\r\n }\r\n\r\n getBeneBankAccounts = () => {\r\n const {\r\n bankAccounts,\r\n preTransactionDetails,\r\n } = this.props;\r\n // get bene's bank accounts\r\n return bankAccounts\r\n .filter(bank => bank.IsVerified)\r\n .filter(bank => bank.BeneficiaryId === preTransactionDetails.BeneficiaryId);\r\n }\r\n\r\n handleSchoolSearch = () => {\r\n this.setState({ schoolSearchOpen: true });\r\n this.schoolsGet();\r\n }\r\n\r\n goToPreviousPage = () => {\r\n this.props.history.goBack();\r\n }\r\n\r\n handleFinish = () => {\r\n this.props.history.goBack();\r\n }\r\n\r\n stepperButtonsCompose = () => {\r\n const {\r\n withdrawalRequestLoading,\r\n partialWithdrawalMessageOpen,\r\n stepIndex,\r\n termsChecked,\r\n withdrawal: {\r\n paymentType,\r\n recipient,\r\n },\r\n showPrintButtonPage,\r\n } = this.state;\r\n\r\n const cancelButton = (\r\n Something wrong! Missing step component.
;\r\n }\r\n return content;\r\n }\r\n\r\n handleWithdrawalRequest = () => {\r\n const {\r\n accountId,\r\n groupId,\r\n withdrawal: {\r\n amount,\r\n amountType,\r\n paymentAccount,\r\n ignoreDuplicates,\r\n leaveAccountOpen,\r\n frequency,\r\n recipientAddress,\r\n paymentType,\r\n paymentDeliveryType,\r\n recipient,\r\n sellDate,\r\n startDate,\r\n endDate,\r\n withdrawalType,\r\n },\r\n isEditing,\r\n } = this.state;\r\n\r\n const {\r\n getPreTransactionDetails,\r\n setWithdrawalSubmitted,\r\n notificationShow,\r\n createNewWithdrawal,\r\n updateWithdrawal,\r\n ADDRESS_TYPES,\r\n isProportional,\r\n selectedTransaction,\r\n } = this.props;\r\n\r\n const isFullBalance = amountType === FULL_BALANCE;\r\n\r\n let WithdrawalType = '';\r\n if (paymentType === ELECTRONICSCHOOL_PAYMENT) { // possible types = CHECK_PAYMENT, ELECTRONICSCHOOL_PAYMENT\r\n WithdrawalType = paymentDeliveryType === MAIL ? CHECK_PAYMENT : ELECTRONICSCHOOL_PAYMENT;\r\n }\r\n else { // possible types = CHECK_PAYMENT, ACH_PAYMENT, ACCESS_CARD_PAYMENT\r\n WithdrawalType = paymentType;\r\n }\r\n\r\n const withdrawalBody = {\r\n AccountId: accountId,\r\n Amount: amount,\r\n amountType,\r\n AccessCardId: paymentAccount.AccessCardId || null,\r\n BankAccountId: paymentAccount.BankAccountId || null,\r\n CloseAccount: amountType === PARTIAL_BALANCE ? false : !leaveAccountOpen, // Always leave account open when partial\r\n ExpenseType: withdrawalType,\r\n FullBalance: isFullBalance,\r\n IgnoreDuplicates: ignoreDuplicates,\r\n PayeeAddress: recipient === SCHOOL ? {\r\n StreetAddress1: sanitizeHTML(recipientAddress.school.street1),\r\n City: sanitizeHTML(recipientAddress.school.city),\r\n State: sanitizeHTML(recipientAddress.school.state.Code),\r\n PostalCode: sanitizeHTML(recipientAddress.school.postalCode.replace(/ /g, '')),\r\n Type: ADDRESS_TYPES.Mailing, // Forced for the time being\r\n Country: 'US', // Forced for the time being\r\n } : null,\r\n PayeeType: recipient,\r\n Proportional: isProportional,\r\n School: {\r\n Department: sanitizeHTML(recipientAddress.school.attn),\r\n SchoolId: parseInt(sanitizeHTML(recipientAddress.school.schoolId)),\r\n StudentNumber: sanitizeHTML(recipientAddress.school.studentIdNum),\r\n SchoolName: sanitizeHTML(recipientAddress.school.name),\r\n ElectronicSchoolPaymentSchoolId: sanitizeHTML(recipientAddress.school.ElectronicSchoolPaymentSchoolId),\r\n },\r\n WithdrawalType,\r\n };\r\n\r\n // for recurring trade date omitted, only start date is required, end date is optional\r\n switch (frequency) {\r\n case RECURRING:\r\n withdrawalBody.StartDate = dayjs(startDate).format('MM/DD/YYYY');\r\n withdrawalBody.ScheduleType = MONTHLY;\r\n withdrawalBody.DayOfMonth = startDate.date(); // this should be forced to 0-28\r\n if (endDate)\r\n withdrawalBody.EndDate = dayjs(endDate).format('MM/DD/YYYY');\r\n break;\r\n case ONE_TIME:\r\n withdrawalBody.TradeDate = dayjs(sellDate).format('MM/DD/YYYY');\r\n withdrawalBody.ScheduleType = ONE_TIME;\r\n break;\r\n default: // something wrong, do nothing, no dates included should throw api error\r\n }\r\n\r\n this.setState({ withdrawalRequestLoading: true });\r\n this.withdrawalStateSet('leaveAccountOpen', !withdrawalBody.CloseAccount);\r\n\r\n if (isEditing) {\r\n updateWithdrawal(selectedTransaction.WithdrawalScheduleId, withdrawalBody)\r\n .then((response) => {\r\n const data = response.payload.data;\r\n const dupeMsgs = Array.isArray(data) ? data.filter(message => message.MessageType === 3) : [];\r\n if (dupeMsgs.length > 0) {\r\n const duplicateWithdrawalMessage = dupeMsgs.map(message => message.Message).join('<\\br>');\r\n this.setState({\r\n withdrawalRequestLoading: false,\r\n duplicateWithdrawalModalOpen: true,\r\n duplicateWithdrawalMessage\r\n });\r\n }\r\n else {\r\n // successfull withdrawal\r\n notificationShow('Withdrawal updated.', 'success');\r\n this.props.getNotifications(); // refreshes app notifications\r\n window.scrollTo(0, 0);\r\n // update actual dates\r\n const actualStartDateDayOfMonth = data.DayOfMonth;\r\n const actualEndDate = data.EndDate;\r\n const actualSellDate = data.SellDate;\r\n const createdDate = data.CreatedDate;\r\n // tell withdrawal details component through redux that it was submitted in order to update available for withdrawal value\r\n setWithdrawalSubmitted(true);\r\n // show print and finish buttons and only after that reload group account info and (racing cond)\r\n this.setState({\r\n withdrawalRequestLoading: false,\r\n showPrintButtonPage: true,\r\n withdrawal: { ...this.state.withdrawal, actualStartDateDayOfMonth, actualEndDate, actualSellDate, createdDate },\r\n }, () => {\r\n getPreTransactionDetails(accountId, groupId);\r\n // now withdrawal state is set take a screenshot of it for possible unsaved changes prompt\r\n const withdrawalScreenshot = cloneDeep(this.state.withdrawal);\r\n this.setState({ withdrawalScreenshot });\r\n });\r\n }\r\n })\r\n .catch(() => this.setState({ withdrawalRequestLoading: false }));\r\n }\r\n else {\r\n createNewWithdrawal(withdrawalBody)\r\n .then((response) => {\r\n const data = response.payload.data;\r\n const dupeMsgs = Array.isArray(data) ? data.filter(message => message.MessageType === 3) : [];\r\n if (dupeMsgs.length > 0) {\r\n const duplicateWithdrawalMessage = dupeMsgs.map(message => message.Message).join('<\\br>');\r\n this.setState({\r\n withdrawalRequestLoading: false,\r\n duplicateWithdrawalModalOpen: true,\r\n duplicateWithdrawalMessage\r\n });\r\n }\r\n else {\r\n // Qualtrics Intercept for full balance Withdrawal. Launches survey \r\n if (isFullBalance) {\r\n try {\r\n document.cookie = 'withdrawalCloseAcct=true';\r\n window.QSI.API.run(); // stimulate Targeting.php\r\n window.QSI.API.unload();\r\n window.QSI.API.load();\r\n window.QSI.API.run(); // stimulate Targeting.php\r\n }\r\n catch (error) {\r\n // return null;\r\n }\r\n }\r\n\r\n // successfull withdrawal\r\n notificationShow('New Withdrawal scheduled.', 'success');\r\n this.props.getNotifications(); // refreshes app notifications\r\n window.scrollTo(0, 0);\r\n // update actual dates\r\n const actualStartDateDayOfMonth = data.DayOfMonth;\r\n const actualEndDate = data.EndDate;\r\n const actualSellDate = data.SellDate;\r\n const createdDate = data.CreatedDate;\r\n // tell widhrawal details component through redux that it was submitted in order to update available for withdrawal value\r\n setWithdrawalSubmitted(true);\r\n // show print and finish buttons and only after that reload group account info and (racing cond)\r\n this.setState({\r\n withdrawalRequestLoading: false,\r\n showPrintButtonPage: true,\r\n withdrawal: { ...this.state.withdrawal, actualStartDateDayOfMonth, actualEndDate, actualSellDate, createdDate },\r\n }, () => {\r\n getPreTransactionDetails(accountId, groupId);\r\n // now withdrawal state is set take a screenshot of it for possible unsaved changes prompt\r\n const withdrawalScreenshot = cloneDeep(this.state.withdrawal);\r\n this.setState({ withdrawalScreenshot });\r\n });\r\n }\r\n })\r\n .catch(() => this.setState({ withdrawalRequestLoading: false }));\r\n }\r\n }\r\n\r\n withdrawalStateSet = (key, value, callback = () => null) => {\r\n // if there is a racing condition use callback to execute after state is set\r\n const { step0ValidationHasRun, step1ValidationHasRun, step2ValidationHasRun, stepIndex } = this.state;\r\n\r\n this.setState(({ withdrawal }) => {\r\n return { withdrawal: { ...withdrawal, [key]: value } };\r\n }, () => {\r\n if (\r\n (stepIndex === 0 && step0ValidationHasRun) ||\r\n (stepIndex === 1 && step1ValidationHasRun) ||\r\n (stepIndex === 2 && step2ValidationHasRun)\r\n ) {\r\n this.formValidate();\r\n }\r\n callback();\r\n });\r\n }\r\n\r\n withdrawalTypeHandle = (e) => {\r\n const withdrawalType = e.target.value;\r\n this.withdrawalStateSet('withdrawalType', withdrawalType);\r\n if (withdrawalType === K12_ED)\r\n this.withdrawalStateSet('recipient', ACCOUNT_OWNER); // Recipient gets set to ACCOUNT_OWNER if \"K-12 Tution\" is selected\r\n }\r\n\r\n onChangeFrequencyHandler = (e, tabIndex) => {\r\n const { isEditing, partialBalanceWithdrawalOnly, fullBalanceWithdrawalOnly } = this.state;\r\n\r\n // one time vs recurring\r\n this.setState({ tabIndex });\r\n // always force user to choose withdrawal, amount, and payment type after frequency changed\r\n this.withdrawalStateSet('withdrawalType', '');\r\n this.withdrawalStateSet('paymentType', '');\r\n if (!(partialBalanceWithdrawalOnly || fullBalanceWithdrawalOnly) && !isEditing)\r\n this.withdrawalStateSet('amountType', '');\r\n\r\n switch (tabIndex) {\r\n case 0:\r\n this.withdrawalStateSet('frequency', ONE_TIME);\r\n break;\r\n case 1:\r\n this.withdrawalStateSet('frequency', RECURRING);\r\n break;\r\n default:\r\n // do nothing\r\n }\r\n }\r\n\r\n checkPartialWithdrawalAllowed(currentAccount, preTransactionDetails) {\r\n const {\r\n isEditing,\r\n withdrawal: { pendingAmount, },\r\n } = this.state;\r\n const {\r\n isProportional,\r\n } = this.props;\r\n\r\n const allowFullWithdrawalIndividual = currentAccount.AllowFullWithdrawal;\r\n const allowFullWithdrawalGroup = preTransactionDetails.AllowFullWithdrawal;\r\n\r\n let fullBalanceWithdrawalOnly = false;\r\n const partialBalanceWithdrawalOnly = (isProportional && !allowFullWithdrawalGroup) || (!this.props.isProportional && !allowFullWithdrawalIndividual);\r\n const accountIsUGMAUTMA = preTransactionDetails.AccountType === ACCOUNT_TYPE_UGMA_UTMA;\r\n\r\n if (this.state.showPrintButtonPage) {\r\n this.setState({\r\n partialWithdrawalMessageOpen: isEditing ? false : partialBalanceWithdrawalOnly, // lets disable partial balance only preflight when editing\r\n partialBalanceWithdrawalOnly,\r\n });\r\n }\r\n else {\r\n let amountType = null;\r\n const updatedWithdrawal = this.state.withdrawal;\r\n\r\n if (\r\n !isProportional &&\r\n currentAccount.availableForWithdrawalNum + pendingAmount > 0 &&\r\n currentAccount.availableForWithdrawalNum + pendingAmount < 1\r\n ) {\r\n // only full balance is available\r\n amountType = FULL_BALANCE;\r\n fullBalanceWithdrawalOnly = true;\r\n }\r\n else if (!isEditing) {\r\n amountType = partialBalanceWithdrawalOnly ? PARTIAL_BALANCE : '';\r\n }\r\n\r\n\r\n if (amountType)\r\n updatedWithdrawal.amountType = amountType;\r\n\r\n if (amountType === FULL_BALANCE) {\r\n updatedWithdrawal.amount = preTransactionDetails.totalAvailableForWithdrawalNum + (isEditing ? pendingAmount : 0); // this is because API would give 0 amount\r\n }\r\n\r\n this.setState({\r\n partialWithdrawalMessageOpen: isEditing ? false : partialBalanceWithdrawalOnly,\r\n partialBalanceWithdrawalOnly: isEditing ? false : partialBalanceWithdrawalOnly,\r\n fullBalanceWithdrawalOnly: isEditing ? false : fullBalanceWithdrawalOnly,\r\n withdrawal: updatedWithdrawal,\r\n accountIsUGMAUTMA\r\n });\r\n }\r\n }\r\n\r\n setEditWithdrawal(selectedTransaction, paymentAccounts) {\r\n // set values & disable features when editing\r\n const frequency = selectedTransaction.WithdrawalScheduleType === ONE_TIME ? ONE_TIME : RECURRING;\r\n // set Tabs\r\n const tabIndex = frequency === RECURRING ? 1 : 0;\r\n const paymentAccount = paymentAccounts.find(acct => acct.id === selectedTransaction.BankAccountId || acct.id === selectedTransaction.AccessCardId);\r\n\r\n // also CustomAmounts.length === 0 is true when proportional, using Proportional boolean property instead\r\n // if CustomAmounts.lengtth !=== 0 it is always === 1 and one time withdrawal (and also Proportional === false)\r\n let amountType;\r\n if (selectedTransaction.Proportional) {\r\n amountType = selectedTransaction.FullMarketValue ? FULL_BALANCE : PARTIAL_BALANCE;\r\n }\r\n else {\r\n const individualFullMarketValue = selectedTransaction.CustomAmounts.find(amount => amount.AccountId === this.state.accountId).FullMarketValue;\r\n amountType = individualFullMarketValue ? FULL_BALANCE : PARTIAL_BALANCE;\r\n }\r\n\r\n const withdrawalToEdit = {\r\n amount: selectedTransaction.Amount,\r\n pendingAmount: selectedTransaction.Amount,\r\n amountType,\r\n paymentAccount: paymentAccount ? paymentAccount : {},\r\n leaveAccountOpen: selectedTransaction.CustomAmounts.length > 0 ? !(selectedTransaction.CustomAmounts[0].FullMarketValue && selectedTransaction.CustomAmounts[0].CloseAccount) :\r\n !(selectedTransaction.FullMarketValue && selectedTransaction.CloseAccounts),\r\n frequency,\r\n ignoreDuplicates: false,\r\n paymentType: selectedTransaction.WithdrawalType,\r\n paymentDeliveryType: selectedTransaction.WithdrawalType === ELECTRONICSCHOOL_PAYMENT ? ELECTRONIC : MAIL,\r\n proportionalAmounts: [],\r\n recipientAddress: {\r\n agent: this.props.preTransactionDetails.agentAddress,\r\n beneficiary: this.props.preTransactionDetails.beneficiaryAddress,\r\n school: {\r\n attn: selectedTransaction.SchoolDepartment,\r\n name: selectedTransaction.SchoolName,\r\n street1: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.StreetAddress1 : '',\r\n street2: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.StreetAddress2 : '',\r\n street3: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.StreetAddress3 : '',\r\n city: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.City : '',\r\n state: { Code: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.State : '' },\r\n postalCode: selectedTransaction.SchoolAddress ? selectedTransaction.SchoolAddress.PostalCode : '',\r\n schoolId: selectedTransaction.SchoolId,\r\n fbo: this.props.preTransactionDetails.beneficiaryName,\r\n studentIdNum: selectedTransaction.StudentId,\r\n IsElectronicSchoolPaymentSchool: selectedTransaction.IsElectronicSchoolPaymentSchool,\r\n ElectronicSchoolPaymentSchoolId: selectedTransaction.ElectronicSchoolPaymentSchoolId,\r\n ElectronicSchoolInfo: selectedTransaction.ElectronicSchoolInfo,\r\n },\r\n },\r\n recipient: selectedTransaction.PayeeType,\r\n sellDate: selectedTransaction.SellDate ? dayjs(selectedTransaction.SellDate) : null,\r\n startDate: selectedTransaction.StartDate ? dayjs(selectedTransaction.StartDate) : null,\r\n endDate: selectedTransaction.EndDate ? dayjs(selectedTransaction.EndDate) : null,\r\n withdrawalType: selectedTransaction.ExpenseType,\r\n actualSellDate: selectedTransaction.SellDate ? dayjs(selectedTransaction.SellDate) : null,\r\n actualStartDateDayOfMonth: selectedTransaction.DayOfMonth,\r\n actualEndDate: selectedTransaction.EndDate ? dayjs(selectedTransaction.EndDate) : null,\r\n nextRunDate: selectedTransaction.NextRunDate,\r\n };\r\n\r\n this.setState({ withdrawal: withdrawalToEdit }, () => {\r\n this.setState({ tabIndex });\r\n if (this.props.isProportional) {\r\n this.proportionalAmountsSet(selectedTransaction.Amount);\r\n }\r\n });\r\n }\r\n\r\n handleCombinePaymentAccounts = () => {\r\n const { bankAccounts, accessCards } = this.props;\r\n const paymentAccounts = [...bankAccounts, ...accessCards].map(account => ({ ...account, id: account.BankAccountId || account.AccessCardId })); // combine payment accounts and create id property\r\n\r\n this.setState({ paymentAccounts });\r\n return paymentAccounts;\r\n }\r\n\r\n handleElectronicSchoolDeliveryType(ElectronicSchoolDeliveryType) {\r\n const errors = cloneDeep(this.state.errors);\r\n const withdrawal = cloneDeep(this.state.withdrawal);\r\n let newErrors = [];\r\n if (ElectronicSchoolDeliveryType === MAIL) {\r\n newErrors = errors.filter(error => error.key !== 'studentIdNum');\r\n withdrawal.paymentType = ELECTRONICSCHOOL_PAYMENT;\r\n withdrawal.paymentDeliveryType = MAIL;\r\n }\r\n else {\r\n newErrors = errors.filter(error => error.key === 'amount');\r\n const { school } = withdrawal.recipientAddress;\r\n school.street1 = '';\r\n school.city = '';\r\n school.state = '';\r\n school.postalCode = '';\r\n withdrawal.recipientAddress.school = school;\r\n withdrawal.paymentType = ELECTRONICSCHOOL_PAYMENT;\r\n withdrawal.paymentDeliveryType = ELECTRONIC;\r\n }\r\n this.setState({ withdrawal, errors: newErrors });\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n preTransactionDetails,\r\n withdrawalVariables,\r\n selectedTransaction,\r\n setWithdrawalSubmitted,\r\n } = this.props;\r\n\r\n const { accountId } = this.state;\r\n\r\n // reset for not submitted yet\r\n setWithdrawalSubmitted(false);\r\n\r\n // when props get changed asynchronously but component managed to get mounted after\r\n if (preTransactionDetails.AccountId === accountId) {\r\n const currentAccount = preTransactionDetails.groupAccounts.find(account => account.AccountId === accountId);\r\n this.checkPartialWithdrawalAllowed(currentAccount, preTransactionDetails);\r\n }\r\n\r\n const promises = [];\r\n promises.push(this.props.getScheduleRunDates(withdrawalVariables.startDates, MONTHLY));\r\n promises.push(this.props.getBankAccounts());\r\n promises.push(this.props.getAccessCards());\r\n\r\n Promise.all(promises)\r\n .then(([nextRunStartDatesAction]) => {\r\n const paymentAccounts = this.handleCombinePaymentAccounts();\r\n this.setState({\r\n nextRunStartDates: nextRunStartDatesAction.payload.data,\r\n });\r\n if (this.state.isEditing) {\r\n if (selectedTransaction.WithdrawalType === ELECTRONICSCHOOL_PAYMENT) {\r\n this.props.getElectronicSchoolPaymentSchool(selectedTransaction.ElectronicSchoolPaymentSchoolId)\r\n .then(response => {\r\n selectedTransaction.ElectronicSchoolInfo = response.payload.data;\r\n return this.setEditWithdrawal(selectedTransaction, paymentAccounts);\r\n });\r\n }\r\n else {\r\n return this.setEditWithdrawal(selectedTransaction, paymentAccounts);\r\n }\r\n }\r\n return;\r\n })\r\n .then(() => {\r\n // now withdrawal state is set take a screenshot of it for possible unsaved changes prompt\r\n const withdrawalScreenshot = cloneDeep(this.state.withdrawal);\r\n this.setState({ withdrawalScreenshot });\r\n })\r\n .finally(() => {\r\n this.setState({ initLoading: false });\r\n });\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const {\r\n preTransactionDetails,\r\n checkDisplayWarning,\r\n } = this.props;\r\n\r\n const {\r\n accountId,\r\n withdrawal: { frequency, startDate, sellDate }\r\n } = this.state;\r\n\r\n // if recipient address changed update withdrawal\r\n if (!isEqual(prevProps.preTransactionDetails.agentAddress, this.props.preTransactionDetails.agentAddress)) {\r\n this.withdrawalStateSet('recipientAddress', { ...this.state.withdrawal.recipientAddress, agent: this.props.preTransactionDetails.agentAddress });\r\n }\r\n\r\n // if bene address changed update withdrawal\r\n if (!isEqual(prevProps.preTransactionDetails.beneficiaryAddress, this.props.preTransactionDetails.beneficiaryAddress)) {\r\n this.withdrawalStateSet('recipientAddress', { ...this.state.withdrawal.recipientAddress, beneficiary: this.props.preTransactionDetails.beneficiaryAddress });\r\n }\r\n\r\n // component might be already mounted when props get changed asynchronously\r\n const prevPropsAccountId = prevProps.preTransactionDetails.AccountId;\r\n if (prevPropsAccountId > 0 && prevPropsAccountId === accountId) {\r\n const isRecurring = frequency === RECURRING;\r\n // check the tradecutoff date warning\r\n if (isRecurring) {\r\n if (startDate)\r\n checkDisplayWarning(startDate);\r\n }\r\n else if (sellDate) {\r\n checkDisplayWarning(sellDate);\r\n }\r\n\r\n const currentAccountPrev = prevProps.preTransactionDetails.groupAccounts.find(account => account.AccountId === accountId);\r\n const currentAccount = preTransactionDetails.groupAccounts.find(account => account.AccountId === accountId);\r\n if (\r\n (prevProps.preTransactionDetails.AllowFullWithdrawal !== preTransactionDetails.AllowFullWithdrawal ||\r\n currentAccountPrev.AllowFullWithdrawal !== currentAccount.AllowFullWithdrawal ||\r\n prevState.withdrawal.pendingAmount !== this.state.withdrawal.pendingAmount)\r\n ) {\r\n this.checkPartialWithdrawalAllowed(currentAccount, preTransactionDetails);\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n isEditing,\r\n initLoading,\r\n stepIndex,\r\n tabIndex,\r\n completed,\r\n withdrawalRequestLoading,\r\n duplicateWithdrawalModalOpen,\r\n duplicateWithdrawalMessage,\r\n schoolSearchOpen,\r\n smallScreen,\r\n withdrawal,\r\n frequencyChangeDisabled,\r\n accountIsUGMAUTMA,\r\n savingPoaBankAgreement,\r\n poaBankModalOpen,\r\n poaBank,\r\n schoolSearchLoading,\r\n schools,\r\n } = this.state;\r\n\r\n const {\r\n loading,\r\n text: { Withdrawals }\r\n } = this.props;\r\n\r\n const isRecurring = withdrawal.frequency === RECURRING;\r\n const frequencyTabsDisabled = frequencyChangeDisabled || accountIsUGMAUTMA || isEditing || (withdrawal.amount > 0 && withdrawal.amount < 1);\r\n\r\n return (\r\n \r\n this.setState({ schoolSearchOpen: false })}\r\n open={schoolSearchOpen}\r\n schoolSelect={this.schoolSelect}\r\n schools={schools}\r\n />\r\n\r\n \r\n {Withdrawals.poa_bank_modal_body}\r\n {poaBank !== null &&
\r\n )}\r\n onModalClose={this.cancelPoaBankAgreement}\r\n onConfirm={this.savePoaBankAgreement}\r\n isLoading={savingPoaBankAgreement}\r\n />\r\n\r\n \r\n
\r\n\r\n \r\n {initLoading ? \r\n \r\n }\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n this.setState({ stepIndex: 0 })}\r\n disabled\r\n >\r\n {Withdrawals.step_labels[0]}\r\n \r\n \r\n \r\n this.setState({ stepIndex: 1 })}\r\n disabled\r\n >\r\n {Withdrawals.step_labels[1]}\r\n \r\n \r\n \r\n this.setState({ stepIndex: 2 })}\r\n disabled\r\n >\r\n {isRecurring ? Withdrawals.step_labels[2].recurring : Withdrawals.step_labels[2].onetime}\r\n \r\n \r\n \r\n this.setState({ stepIndex: 3 })}\r\n completed={completed[3]}\r\n disabled\r\n >\r\n {Withdrawals.step_labels[3]}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {loading ?
\r\n\r\n \r\n {this.stepperButtonsCompose()}\r\n
\r\n {poaBank.BankName} {poaBank.BankAccountType}, {poaBank.MaskedBankAccountNumber}
}\r\n\r\n {isProportional ?\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect(select, {})(LanguageHOC(WithdrawalDetails)));","/* eslint-disable newline-per-chained-call */\r\n/*\r\n*\r\n* Withdrawals Component\r\n*\r\n*/\r\nimport React from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport dayjs from 'dayjs';\r\nimport AccountsInGroup from './AccountsInGroup';\r\nimport NewWithdrawals from './NewWithdrawals';\r\nimport WithdrawalDetails from './WithdrawalDetails';\r\nimport {\r\n getPreTransactionDetails,\r\n} from 'components/Features/protected/Accounts/Transactions/actions';\r\nimport {\r\n getServerDateTime,\r\n} from 'components/AppRoot/StaticResources/actions';\r\nimport {\r\n Breadcrumbs,\r\n notificationShow,\r\n LoadingOverlay,\r\n} from '@frontend/common';\r\nimport LanguageHOC from 'utils/translations/LanguageHOC';\r\n\r\nimport styles from './styles.module.scss';\r\n\r\nconst select = (state) => ({\r\n accountList: state.accounts.accountList,\r\n preTransactionDetails: state.transactions.preTransactionDetails,\r\n withdrawalVariables: state.static.withdrawalVariables,\r\n serverDateTime: state.static.serverDateTime,\r\n selectedTransaction: state.transactions.selectedTransaction,\r\n});\r\n\r\nexport class Withdrawals extends React.Component {\r\n\r\n static propTypes = {\r\n accountList: PropTypes.array.isRequired,\r\n getPreTransactionDetails: PropTypes.func.isRequired,\r\n notificationShow: PropTypes.func.isRequired,\r\n preTransactionDetails: PropTypes.object.isRequired,\r\n withdrawalVariables: PropTypes.shape({\r\n sellDates: PropTypes.array,\r\n tradeCutoff: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.object\r\n ]),\r\n tradeCutoffWarningTime: PropTypes.number,\r\n }).isRequired,\r\n getServerDateTime: PropTypes.func.isRequired,\r\n serverDateTime: PropTypes.string.isRequired,\r\n text: PropTypes.shape({\r\n Transactions: PropTypes.shape({\r\n nav_path: PropTypes.func,\r\n }),\r\n Accounts: PropTypes.shape({\r\n nav_path: PropTypes.string,\r\n nav_title: PropTypes.string,\r\n }),\r\n AccountDetails: PropTypes.shape({\r\n nav_path: PropTypes.func,\r\n nav_title: PropTypes.string,\r\n }),\r\n Withdrawals: PropTypes.shape({\r\n title_edit_withdrawal: PropTypes.string,\r\n title_new_withdrawal: PropTypes.string,\r\n })\r\n }).isRequired,\r\n selectedTransaction: PropTypes.object,\r\n };\r\n\r\n state = {\r\n accountId: this.props.match.params.accountId,\r\n accountsInGroupModalOpen: false,\r\n displayWarning: false,\r\n isProportional: false,\r\n loading: false,\r\n isEditing: window.location.href.includes('edit'),\r\n };\r\n\r\n checkDisplayWarning = (date) => {\r\n const { tradeCutoff, tradeCutoffWarningTime } = this.props.withdrawalVariables;\r\n\r\n // show warning only when user selects sell or start date to be on the same day and a half an hour before trade cutoff time\r\n const dateNow = dayjs(this.props.serverDateTime); // using the local(true) makes this now adjust the time based on any timezone\r\n const tradeCutoffMinusWarningTime = dayjs(tradeCutoff).subtract(dayjs(tradeCutoffWarningTime), 'minute');\r\n const isDateOnTheSameDayAsTradeCutoff = dayjs(tradeCutoff).isSame(dayjs(date), 'day');\r\n\r\n if (isDateOnTheSameDayAsTradeCutoff && dateNow.isBetween(tradeCutoffMinusWarningTime, tradeCutoff)) {\r\n this.setState({ displayWarning: true });\r\n }\r\n else {\r\n this.setState({ displayWarning: false });\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n match: { params },\r\n getPreTransactionDetails,\r\n selectedTransaction,\r\n } = this.props;\r\n\r\n const promises = [];\r\n\r\n // get current server MST datetime to use for displaying cutoff warning banner\r\n promises.push(this.props.getServerDateTime());\r\n\r\n // at this time selected transaction should be in redux\r\n if (this.state.isEditing)\r\n this.setState({ isProportional: selectedTransaction.Proportional });\r\n\r\n // This needs to be called each time withdrawal transactions starts to get updated info (for example scheduled transaction).\r\n promises.push(getPreTransactionDetails(params.accountId, params.groupId)\r\n .then(() => {\r\n if (this.props.preTransactionDetails.groupAccounts.length > 1) {\r\n this.setState({ accountsInGroupModalOpen: true });\r\n }\r\n }));\r\n\r\n this.setState({ loading: true });\r\n Promise.all(promises).finally(() => this.setState({ loading: false }));\r\n }\r\n\r\n render() {\r\n const { isEditing, displayWarning, isProportional, loading, accountsInGroupModalOpen, accountId } = this.state;\r\n const { preTransactionDetails, withdrawalVariables, text } = this.props;\r\n // To do proportional we need at least 2 accounts and all non zero\r\n const proportionalDisabled = preTransactionDetails.groupAccounts.length < 2 || preTransactionDetails.groupAccounts.filter(account => account.availableForWithdrawalNum === 0).length > 0;\r\n\r\n return (\r\n \r\n
\r\n \r\n :\r\n \r\n
\r\n Account Owner
\r\n {!loading && preTransactionDetails.agentName}\r\n \r\n
\r\n Beneficiary
\r\n {!loading && preTransactionDetails.beneficiaryName}\r\n \r\n
\r\n Account Numbers
\r\n {!loading && preTransactionDetails.groupAccounts.map(account => {account.AccountNumber}
)}\r\n \r\n
\r\n Account Type
\r\n {!loading && preTransactionDetails.AccountType}\r\n \r\n \r\n
\r\n Total Available For Withdrawal
\r\n \r\n
\r\n \r\n }\r\n \r\n
\r\n Account Owner
\r\n {!loading && preTransactionDetails.agentName}\r\n \r\n
\r\n Beneficiary
\r\n {!loading && preTransactionDetails.beneficiaryName}\r\n \r\n
\r\n Account Number
\r\n {!loading && preTransactionDetails.AccountNumber}\r\n \r\n
\r\n Current Option
\r\n {!loading && preTransactionDetails.OptionName}\r\n \r\n
\r\n Account Type
\r\n {!loading && preTransactionDetails.AccountType}\r\n \r\n
\r\n Market Value
\r\n {!loading && accountMarketValue}\r\n\r\n \r\n
\r\n \r\n
\r\n Available For Withdrawal
\r\n {!loading && accountAvailableForWithdrawal}
\r\n \r\n this.setState({ accountsInGroupModalOpen: false })}\r\n onProportionalSelect={() => this.setState({ accountsInGroupModalOpen: false, isProportional: true })}\r\n groupAccounts={preTransactionDetails.groupAccounts}\r\n proportionalDisabled={proportionalDisabled}\r\n />\r\n }\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(connect(select, {\r\n getPreTransactionDetails,\r\n notificationShow,\r\n getServerDateTime,\r\n})(LanguageHOC(Withdrawals)));","/*\n*\n* Step1Amount Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport dayjs from 'dayjs';\nimport parse from 'html-react-parser';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { verifyBirthdate } from '../../actions';\nimport {\n currencyFormatter,\n CurrencyInput,\n DatePicker,\n LoadingOverlay,\n} from '@frontend/common';\nimport {\n Button,\n Collapse,\n FormControl,\n FormControlLabel,\n FormHelperText,\n Radio,\n RadioGroup,\n} from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n environmentVars: state.static.environmentVars,\n preTransactionDetails: state.transactions.preTransactionDetails,\n});\n\n\nexport class Step1Amount extends React.Component {\n\n static propTypes = {\n environmentVars: PropTypes.shape({\n DisbursementSignatureGuaranteeAmount: PropTypes.number,\n MaximumAge: PropTypes.number,\n MinimumOnlineWithdrawalAmount: PropTypes.number,\n }).isRequired,\n nextClickHandle: PropTypes.func.isRequired,\n preTransactionDetails: PropTypes.shape({\n AccountId: PropTypes.number,\n AgentId: PropTypes.number,\n AllowFullWithdrawal: PropTypes.bool,\n BeneficiaryId: PropTypes.number,\n totalAvailableForWithdrawal: PropTypes.string,\n totalAvailableForWithdrawalNum: PropTypes.number,\n totalMarketValueNum: PropTypes.number,\n totalAvailableBalanceNumber: PropTypes.number,\n }).isRequired,\n renderCancelButton: PropTypes.func.isRequired,\n setWithdrawalInfo: PropTypes.func.isRequired,\n text: PropTypes.shape({\n WithdrawalRequests: PropTypes.shape({\n btn_next: PropTypes.string,\n err_max_amount: PropTypes.func.isRequired,\n err_min_amount: PropTypes.func.isRequired,\n err_required_field: PropTypes.string,\n err_selection_required: PropTypes.string,\n head_amount: PropTypes.string,\n lbl_birthdate: PropTypes.string,\n lbl_full_balance: PropTypes.string,\n lbl_partial_balance: PropTypes.string,\n text_3rd_party: PropTypes.string,\n text_full_balance_info: PropTypes.string,\n }),\n Withdrawals: PropTypes.shape({\n errors: PropTypes.shape({\n max_withdrawal: PropTypes.func,\n }),\n step0_amount_date: PropTypes.object,\n }),\n }).isRequired,\n verifyBirthdate: PropTypes.func.isRequired,\n withdrawalInfo: PropTypes.shape({\n Amount: PropTypes.string,\n BeneficiaryBirthdate: PropTypes.string,\n IsFullBalance: PropTypes.string,\n }).isRequired,\n };\n\n state = {\n Amount: this.props.withdrawalInfo.Amount,\n BeneficiaryBirthdate: this.props.withdrawalInfo.BeneficiaryBirthdate,\n IsFullBalance: this.props.withdrawalInfo.IsFullBalance,\n formErrors: {},\n isLoading: false,\n partialWithdrawalWarningShow: false,\n };\n\n amountHandle = value => {\n this.setState({\n Amount: value,\n formErrors: {\n ...this.state.formErrors,\n Amount: '',\n }\n }, () => {\n const { Amount, IsFullBalance, BeneficiaryBirthdate } = this.state;\n this.props.setWithdrawalInfo({\n Amount,\n BeneficiaryBirthdate: dayjs(BeneficiaryBirthdate).format('MM/DD/YYYY'),\n IsFullBalance,\n });\n });\n }\n\n amountTypeSet = e => {\n const IsFullBalance = e.target.value === 'true';\n\n this.setState({\n Amount: IsFullBalance ? this.props.preTransactionDetails.totalAvailableForWithdrawalNum : '',\n IsFullBalance: e.target.value,\n formErrors: {\n ...this.state.formErrors,\n IsFullBalance: '',\n }\n }, () => {\n const { Amount, IsFullBalance, BeneficiaryBirthdate } = this.state;\n this.props.setWithdrawalInfo({\n Amount,\n BeneficiaryBirthdate: dayjs(BeneficiaryBirthdate).format('MM/DD/YYYY'),\n IsFullBalance,\n });\n });\n }\n\n birthdateHandle = e => {\n this.setState({\n BeneficiaryBirthdate: e.target.value,\n formErrors: {\n ...this.state.formErrors,\n BeneficiaryBirthdate: '',\n }\n }, () => {\n const { Amount, IsFullBalance, BeneficiaryBirthdate } = this.state;\n this.props.setWithdrawalInfo({\n Amount,\n BeneficiaryBirthdate: dayjs(BeneficiaryBirthdate).format('MM/DD/YYYY'),\n IsFullBalance,\n });\n });\n }\n\n birthdateVerify = () => {\n const { AccountId, AgentId, BeneficiaryId } = this.props.preTransactionDetails;\n\n const authInfo = {\n AccountId,\n AgentId,\n BeneficiaryBirthdate: dayjs(this.state.BeneficiaryBirthdate).format('MM/DD/YYYY'),\n BeneficiaryId,\n };\n\n this.setState({ isLoading: true });\n\n this.props.verifyBirthdate(authInfo)\n .then(() => this.nextHandle())\n .catch(err => {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n BeneficiaryBirthdate: parse(err.payload.data[0].Message),\n },\n isLoading: false,\n });\n });\n }\n\n formValidate = e => {\n e.preventDefault();\n\n const { Amount, BeneficiaryBirthdate, IsFullBalance } = this.state;\n const { environmentVars: { DisbursementSignatureGuaranteeAmount, MinimumOnlineWithdrawalAmount }, preTransactionDetails: { totalAvailableForWithdrawal, totalAvailableForWithdrawalNum }, text: { WithdrawalRequests, Withdrawals } } = this.props;\n const formErrors = {};\n\n if (IsFullBalance === '') { // neither full balance or partial was selected\n formErrors.IsFullBalance = WithdrawalRequests.err_selection_required;\n }\n if (IsFullBalance === 'false') { // partial withdrawal errors\n if (!Amount) { // no amount has been entered\n formErrors.Amount = WithdrawalRequests.err_required_field;\n }\n if (parseInt(Amount) < MinimumOnlineWithdrawalAmount) { // amount is less than minimum\n formErrors.Amount = WithdrawalRequests.err_min_amount(currencyFormatter(MinimumOnlineWithdrawalAmount));\n }\n if (parseInt(Amount) > totalAvailableForWithdrawalNum) { // amount is greater than total available\n formErrors.Amount = WithdrawalRequests.err_max_amount(totalAvailableForWithdrawal);\n }\n if (parseInt(Amount) >= DisbursementSignatureGuaranteeAmount) { // amount is equal to or greater than $75k\n formErrors.Amount = Withdrawals.errors.max_withdrawal(DisbursementSignatureGuaranteeAmount);\n }\n }\n if (!BeneficiaryBirthdate) { // no birthdate was entered\n formErrors.BeneficiaryBirthdate = WithdrawalRequests.err_required_field;\n }\n if (Object.keys(formErrors).length === 0 || Object.values(formErrors).every(err => err === '')) { // if form is valid, check bday against API\n this.birthdateVerify();\n }\n\n this.setState({ formErrors });\n }\n\n nextHandle = () => {\n const { Amount, IsFullBalance, BeneficiaryBirthdate } = this.state;\n\n this.props.setWithdrawalInfo({\n Amount,\n BeneficiaryBirthdate: dayjs(BeneficiaryBirthdate).format('MM/DD/YYYY'),\n IsFullBalance,\n });\n this.props.nextClickHandle();\n }\n\n componentDidMount() {\n const { preTransactionDetails: { AllowFullWithdrawal }, withdrawalInfo: { Amount, BeneficiaryBirthdate, IsFullBalance } } = this.props;\n this.setState({\n Amount,\n BeneficiaryBirthdate,\n IsFullBalance: AllowFullWithdrawal ? IsFullBalance : 'false',\n partialWithdrawalWarningShow: !AllowFullWithdrawal,\n });\n }\n\n render() {\n const { Amount, BeneficiaryBirthdate, formErrors, IsFullBalance, isLoading, partialWithdrawalWarningShow } = this.state;\n const { environmentVars: { DisbursementSignatureGuaranteeAmount, MaximumAge }, preTransactionDetails, text: { WithdrawalRequests, Withdrawals } } = this.props;\n const availableBalanceIsMoreThanMax = preTransactionDetails.totalAvailableForWithdrawalNum > DisbursementSignatureGuaranteeAmount;\n const areThereUncollectedFunds = preTransactionDetails.totalMarketValueNum > preTransactionDetails.totalAvailableBalanceNumber;\n\n return (\n \n );\n }\n}\n\n\nexport default connect(select, {\n verifyBirthdate,\n})(LanguageHOC(Step1Amount));\n","/*\n*\n* Step2Recipient Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport School from 'components/Features/protected/Accounts/Transactions/Withdrawals/NewWithdrawals/StepComponents/School';\nimport { getSchools } from 'components/Features/protected/Accounts/Transactions/actions';\nimport SchoolSearch from '../../SchoolSearch';\nimport { Button } from '@mui/material';\nimport * as validator from 'utils/helpers/form_validation';\nimport { sanitizeHTML } from 'utils/helpers/sanitation';\n\nimport { properCase } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n preTransactionDetails: state.transactions.preTransactionDetails,\n usStates: state.static.usStates,\n});\n\nconst BLANK_SCHOOL = {\n attn: '',\n city: '',\n fbo: '',\n postalCode: '',\n schoolId: '',\n state: { Code: '' },\n street1: '',\n street2: '',\n street3: '',\n studentIdNum: '',\n};\n\nexport class Step2Recipient extends React.Component {\n static propTypes = {\n beneficiaryName: PropTypes.string.isRequired,\n getSchools: PropTypes.func.isRequired,\n nextClickHandle: PropTypes.func.isRequired,\n preTransactionDetails: PropTypes.shape({\n beneficiaryName: PropTypes.string,\n schoolAddresses: PropTypes.array,\n }).isRequired,\n renderBackButton: PropTypes.func.isRequired,\n renderCancelButton: PropTypes.func.isRequired,\n setWithdrawalInfo: PropTypes.func.isRequired,\n text: PropTypes.shape({\n WithdrawalRequests: PropTypes.shape({\n btn_next: PropTypes.string,\n err_field_required: PropTypes.string,\n err_school_required: PropTypes.string,\n }),\n }),\n usStates: PropTypes.array.isRequired,\n withdrawalInfo: PropTypes.shape({\n PayeeAddressLine1: PropTypes.string,\n PayeeAddressLine2: PropTypes.string,\n PayeeCity: PropTypes.string,\n PayeeState: PropTypes.string,\n PayeeZipCode: PropTypes.string,\n SchoolDepartment: PropTypes.string,\n SchoolId: PropTypes.string,\n SchoolName: PropTypes.string,\n StudentNumber: PropTypes.string,\n }).isRequired,\n };\n\n state = {\n formErrors: {\n schoolError: '',\n street1Error: '',\n cityError: '',\n stateError: '',\n postalCodeError: '',\n attnError: '',\n studentIdNumError: '',\n },\n loading: false,\n school: {\n attn: this.props.withdrawalInfo.SchoolDepartment,\n city: this.props.withdrawalInfo.PayeeCity,\n fbo: this.props.beneficiaryName,\n name: this.props.withdrawalInfo.SchoolName,\n postalCode: this.props.withdrawalInfo.PayeeZipCode,\n schoolId: this.props.withdrawalInfo.SchoolId,\n state: { Code: this.props.withdrawalInfo.PayeeState },\n street1: this.props.withdrawalInfo.PayeeAddressLine1,\n street2: this.props.withdrawalInfo.PayeeAddressLine2,\n studentIdNum: this.props.withdrawalInfo.StudentNumber,\n IsElectronicSchoolPaymentSchool: false,\n ElectronicSchoolPaymentSchoolId: '',\n },\n schools: [],\n schoolSearchOpen: false,\n };\n\n addressHandle = (e, fieldName) => {\n if (e !== undefined) {\n let formErrors = {\n ...this.state.formErrors,\n [`${fieldName}Error`]: '',\n };\n let value;\n if (fieldName === 'postalCode') {\n value = e.value;\n formErrors = {\n ...this.state.formErrors,\n postalCodeError: '',\n };\n }\n else {\n value = e.target.value;\n }\n\n this.setState({\n formErrors,\n school: {\n ...this.state.school,\n [fieldName]: value\n }\n });\n }\n }\n\n formValidate = () => {\n const formErrors = {};\n const { school } = this.state;\n const { err_school_required, } = this.props.text.WithdrawalRequests;\n\n formErrors.cityError = validator.cityValidator(school.city.trim());\n formErrors.postalCodeError = validator.postalCodeValidator(school.postalCode.trim());\n formErrors.schoolError = school.name.length < 1 ? err_school_required : '';\n formErrors.stateError = validator.stateValidator(school.state.Code);\n formErrors.street1Error = validator.street1Validator(school.street1.trim());\n formErrors.attnError = validator.schoolAttnValidator(school.attn || '');\n formErrors.studentIdNumError = validator.alphaNumericOnlyValidator(school.studentIdNum);\n\n this.setState({ formErrors });\n\n return Object.keys(formErrors).length === 0 || Object.values(formErrors).every(err => err === '');\n }\n\n nextHandle = e => {\n e.preventDefault();\n if (this.formValidate()) {\n const { school } = this.state;\n\n this.props.setWithdrawalInfo({\n PayeeAddressLine1: sanitizeHTML(school.street1),\n PayeeAddressLine2: sanitizeHTML(school.street2),\n PayeeCity: sanitizeHTML(school.city),\n PayeeState: sanitizeHTML(school.state.Code),\n PayeeZipCode: sanitizeHTML(school.postalCode),\n SchoolDepartment: sanitizeHTML(school.attn),\n SchoolId: sanitizeHTML(school.schoolId),\n SchoolName: sanitizeHTML(school.name),\n StudentNumber: school.studentIdNum ? sanitizeHTML(school.studentIdNum.trim()) : '', // remove trailing spaces for student id\n });\n this.props.nextClickHandle();\n }\n\n }\n\n schoolSearchHandle = () => {\n this.setState({ loading: true, schoolSearchOpen: true });\n this.props.getSchools()\n .then(response => {\n const data = response.payload.data;\n let id = -1;\n if (data && data.length > 0) {\n const schools = data.map(school => {\n ++id;\n return {\n id,\n attn: school.SchoolDepartment,\n fbo: school.beneficiaryName,\n postalCode: '',\n street1: '',\n street2: '',\n city: '',\n fafsaId: school.Code,\n name: properCase(school.Name),\n schoolId: school.CollegeId.toString(),\n state: '',\n IsElectronicSchoolPaymentSchool: false,\n };\n });\n this.setState({ schools });\n }\n })\n .finally(() => this.setState({ loading: false }));\n }\n\n schoolSelect = schoolId => {\n const { preTransactionDetails: { beneficiaryName, schoolAddresses } } = this.props;\n const { schools } = this.state;\n if (schools?.find(address => address.schoolId === schoolId)) {\n const school = schools.find(school => school.schoolId === schoolId);\n school.fbo = beneficiaryName;\n school.beneficiaryName = beneficiaryName;\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n schoolError: '',\n },\n school,\n });\n }\n else {\n const school = schoolAddresses.find(school => school.schoolId === schoolId);\n this.setState({\n formErrors: {\n schoolError: '',\n },\n school: {\n ...BLANK_SCHOOL,\n fbo: beneficiaryName,\n beneficiaryName,\n name: school.name,\n schoolId,\n IsElectronicSchoolPaymentSchool: false,\n }\n });\n }\n\n this.setState({ schoolSearchOpen: false }, () => {\n const { school } = this.state;\n this.props.setWithdrawalInfo({\n PayeeAddressLine1: sanitizeHTML(school.street1),\n PayeeAddressLine2: sanitizeHTML(school.street2),\n PayeeCity: sanitizeHTML(school.city),\n PayeeState: sanitizeHTML(school.state.Code),\n PayeeZipCode: sanitizeHTML(school.postalCode),\n SchoolDepartment: sanitizeHTML(school.attn),\n SchoolId: sanitizeHTML(school.schoolId),\n SchoolName: sanitizeHTML(school.name),\n StudentNumber: school.studentIdNum ? sanitizeHTML(school.studentIdNum.trim()) : '', // remove trailing spaces for student id\n });\n });\n }\n\n stateSelectHandle = value => {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n stateError: '',\n },\n school: {\n ...this.state.school,\n state: { Code: value }\n }\n }, () => {\n const { school } = this.state;\n this.props.setWithdrawalInfo({\n PayeeAddressLine1: sanitizeHTML(school.street1),\n PayeeAddressLine2: sanitizeHTML(school.street2),\n PayeeCity: sanitizeHTML(school.city),\n PayeeState: sanitizeHTML(school.state.Code),\n PayeeZipCode: sanitizeHTML(school.postalCode),\n SchoolDepartment: sanitizeHTML(school.attn),\n SchoolId: sanitizeHTML(school.schoolId),\n SchoolName: sanitizeHTML(school.name),\n StudentNumber: school.studentIdNum ? sanitizeHTML(school.studentIdNum.trim()) : '', // remove trailing spaces for student id\n });\n });\n }\n\n render() {\n const { text: { WithdrawalRequests }, usStates } = this.props;\n const { formErrors, loading, school, schools, schoolSearchOpen } = this.state;\n\n return (\n \n );\n }\n}\n\n\nexport default connect(select, {\n getSchools,\n})(LanguageHOC(Step2Recipient));\n","/*\n*\n* Review Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { currencyFormatter } from '@frontend/common';\nimport styles from './styles.module.scss';\n\n\nexport function Review({ activeStep, beneficiaryName, withdrawalInfo, text: { WithdrawalRequests } }) {\n const IsFullBalance = withdrawalInfo.IsFullBalance === 'true';\n return (\n \r\n
\r\n\r\n {(displayWarning && !loading) ?\r\n \r\n {text.Withdrawals.cutoff_warning(dayjs(withdrawalVariables.tradeCutoff).format('h:mm A'))} {/* eslint-disable-line */}\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 {!isEditing &&\r\n \n
\n );\n}\n\nReview.propTypes = {\n activeStep: PropTypes.number.isRequired,\n beneficiaryName: PropTypes.string.isRequired,\n withdrawalInfo: PropTypes.shape({\n Amount: PropTypes.string,\n IsFullBalance: PropTypes.string,\n PayeeAddressLine1: PropTypes.string,\n PayeeCity: PropTypes.string,\n PayeeState: PropTypes.string,\n PayeeZipCode: PropTypes.string,\n SchoolDepartment: PropTypes.string,\n SchoolName: PropTypes.string,\n StudentNumber: PropTypes.string,\n }).isRequired,\n text: PropTypes.shape({\n WithdrawalRequests: PropTypes.shape({\n head_amount: PropTypes.string,\n head_recipient: PropTypes.string,\n lbl_fbo: PropTypes.string,\n lbl_student_id: PropTypes.string,\n text_full_balance_note: PropTypes.string,\n }),\n }).isRequired,\n};\n\nexport default LanguageHOC(Review);","/*\n*\n* Step3Terms Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { Checkbox } from '@frontend/common';\nimport {\n Button,\n FormHelperText,\n} from '@mui/material';\nimport { LoadingOverlay } from '@frontend/common';\nimport Review from '../Review';\n\nimport styles from './styles.module.scss';\n\nexport class Step3Terms extends React.Component {\n static propTypes = {\n activeStep: PropTypes.number.isRequired,\n beneficiaryName: PropTypes.string.isRequired,\n loading: PropTypes.bool.isRequired,\n nextClickHandle: PropTypes.func.isRequired,\n renderBackButton: PropTypes.func.isRequired,\n renderCancelButton: PropTypes.func.isRequired,\n text: PropTypes.shape({\n WithdrawalRequests: PropTypes.shape({\n btn_next: PropTypes.string,\n head_terms: PropTypes.string,\n lbl_agree_terms: PropTypes.string,\n text_terms_p1: PropTypes.array,\n text_terms_p2: PropTypes.array,\n text_terms_p3: PropTypes.array,\n text_terms_p4: PropTypes.array,\n }),\n }).isRequired,\n withdrawalInfo: PropTypes.shape({\n Amount: PropTypes.string,\n PayeeAddressLine1: PropTypes.string,\n PayeeCity: PropTypes.string,\n PayeeState: PropTypes.string,\n PayeeZipCode: PropTypes.string,\n SchoolDepartment: PropTypes.string,\n SchoolName: PropTypes.string,\n StudentNumber: PropTypes.string,\n }).isRequired,\n };\n\n state = {\n termsChecked: false,\n };\n\n formValidate = () => {\n let termsError = '';\n\n if (!this.state.termsChecked) {\n termsError = 'You must agree to the terms.';\n }\n\n this.setState({ termsError });\n\n return !termsError;\n }\n\n nextHandle = e => {\n e.preventDefault();\n\n if (this.formValidate()) {\n this.props.nextClickHandle();\n }\n }\n\n render() {\n const { activeStep, beneficiaryName, loading, text: { WithdrawalRequests }, withdrawalInfo } = this.props;\n\n return (\n \n
\n {IsFullBalance ? `${WithdrawalRequests.head_amount}*` : WithdrawalRequests.head_amount}
\n{currencyFormatter(withdrawalInfo.Amount)}
\n\n
\n {IsFullBalance && activeStep === 3 && {WithdrawalRequests.head_recipient}
\n{withdrawalInfo.SchoolName}
\n {withdrawalInfo.SchoolDepartment &&{withdrawalInfo.SchoolDepartment}
}\n{withdrawalInfo.PayeeAddressLine1}
\n{withdrawalInfo.PayeeCity}, {withdrawalInfo.PayeeState} {withdrawalInfo.PayeeZipCode}
\n{WithdrawalRequests.lbl_fbo} {beneficiaryName}
\n {withdrawalInfo.StudentNumber &&{WithdrawalRequests.lbl_student_id}: {withdrawalInfo.StudentNumber}
}\n{WithdrawalRequests.text_full_balance_note}
}\n \n \n\n
}\n onChange={e => this.setState({ termsChecked: e.target.checked, termsError: '', })}\n />\n {this.state.termsError && \n
\n\n {WithdrawalRequests.head_terms}
\n{WithdrawalRequests.text_terms_p1[0]}
\n{WithdrawalRequests.text_terms_p1[1]}
\n{WithdrawalRequests.text_terms_p1[2]}
\n\n{WithdrawalRequests.text_terms_p2[0]}
\n{WithdrawalRequests.text_terms_p2[1]}
\n{WithdrawalRequests.text_terms_p2[2]}
\n\n{WithdrawalRequests.text_terms_p3[0]}
\n{WithdrawalRequests.text_terms_p3[1]}
\n{WithdrawalRequests.text_terms_p3[2]}
\n\n{WithdrawalRequests.text_terms_p4[0]}
\n{WithdrawalRequests.text_terms_p4[1]}
\n{WithdrawalRequests.text_terms_p4[2]}
\n{WithdrawalRequests.text_terms_p4[3]}
\n\n {this.props.renderCancelButton()}\n\n {this.props.renderBackButton()}\n \n {WithdrawalRequests.btn_next}\n \n
\n \n \n \n );\n }\n}\n\n\nexport default LanguageHOC(Step3Terms);\n","/*\n*\n* Step4Print Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { withRouter } from 'react-router-dom';\nimport dayjs from 'dayjs';\nimport Review from '../Review';\nimport { Button } from '@mui/material';\n\nimport styles from './styles.module.scss';\n\n\nexport function Step4Print({ activeStep, beneficiaryName, history, text: { WithdrawalRequests }, withdrawalInfo }) {\n return (\n \n
\n );\n}\n\nStep4Print.propTypes = {\n activeStep: PropTypes.number.isRequired,\n beneficiaryName: PropTypes.string.isRequired,\n withdrawalInfo: PropTypes.object.isRequired,\n text: PropTypes.shape({\n WithdrawalRequests: PropTypes.shape({\n btn_finish: PropTypes.string,\n btn_print: PropTypes.string,\n head_confirmation: PropTypes.string,\n text_print_copy: PropTypes.string,\n text_submitted: PropTypes.string,\n text_timezone: PropTypes.string,\n })\n }).isRequired,\n};\n\nexport default withRouter(LanguageHOC(Step4Print));","/*\n*\n* WithdrawalRequests Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter, Prompt } from 'react-router-dom';\nimport { isEqual, cloneDeep } from 'lodash';\nimport dayjs from 'dayjs';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n getPreTransactionDetails,\n requestWithdrawal,\n} from 'components/Features/protected/Accounts/Transactions/actions';\nimport { getNotifications, } from 'components/AppRoot/Navigation/actions';\nimport {\n Button,\n Paper,\n Step,\n StepButton,\n StepLabel,\n Stepper,\n} from '@mui/material';\nimport {\n Breadcrumbs,\n Card,\n InfoIcon,\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\nimport Step1Amount from './Step1Amount';\nimport Step2Recipient from './Step2Recipient';\nimport Step3Terms from './Step3Terms';\nimport Step4Print from './Step4Print';\nimport { tabletWidth } from 'utils/config/_sassconfig.scss';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n accountList: state.accounts.accountList,\n preTransactionDetails: state.transactions.preTransactionDetails,\n});\n\nexport class WithdrawalRequests extends React.Component {\n\n static propTypes = {\n getNotifications: PropTypes.func.isRequired,\n getPreTransactionDetails: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n preTransactionDetails: PropTypes.shape({\n AccountNumber: PropTypes.number,\n AgentId: PropTypes.number,\n BeneficiaryId: PropTypes.number,\n OptionName: PropTypes.string,\n beneficiaryName: PropTypes.string,\n totalAvailableForWithdrawal: PropTypes.string,\n }).isRequired,\n requestWithdrawal: PropTypes.func.isRequired,\n text: PropTypes.shape({\n Accounts: PropTypes.shape({\n nav_path: PropTypes.string,\n nav_title: PropTypes.string,\n }),\n AccountDetails: PropTypes.shape({\n nav_path: PropTypes.func,\n nav_title: PropTypes.string,\n }),\n WithdrawalRequests: PropTypes.shape({\n msg_unsaved_changes: PropTypes.string,\n btn_back: PropTypes.string,\n btn_cancel: PropTypes.string,\n head_account_details: PropTypes.string,\n head_amount: PropTypes.string,\n head_recipient: PropTypes.string,\n head_terms: PropTypes.string,\n lbl_confirmation: PropTypes.string,\n msg_withdrawal_requested: PropTypes.string,\n nav_title: PropTypes.string,\n text_account_num: PropTypes.string,\n text_available_balance_info: PropTypes.array,\n text_available_for_withdrawal: PropTypes.string,\n text_bene: PropTypes.string,\n text_current_opt: PropTypes.string,\n }),\n }).isRequired,\n }\n\n state = {\n activeStep: 0,\n loading: false,\n steps: [\n this.props.text.WithdrawalRequests.head_amount,\n this.props.text.WithdrawalRequests.head_recipient,\n this.props.text.WithdrawalRequests.head_terms,\n this.props.text.WithdrawalRequests.lbl_confirmation,\n ],\n withdrawalInfo: {\n AccountGroupId: this.props.match.params.groupId,\n AccountId: this.props.match.params.accountId,\n AgentId: this.props.preTransactionDetails.AgentId,\n Amount: '',\n BeneficiaryBirthdate: '',\n BeneficiaryId: this.props.preTransactionDetails.BeneficiaryId,\n CreatedDate: dayjs().toDate(), // API requires this property\n IsFullBalance: '',\n IsRecurring: false, // API requires this property\n LastModifiedDate: dayjs().toDate(), // API requires this property\n PayeeAddressLine1: '',\n PayeeAddressLine2: '',\n PayeeCity: '',\n PayeeState: '',\n PayeeZipCode: '',\n SchoolDepartment: '',\n SchoolId: '',\n SchoolName: '',\n SessionIdentifier: 'API requires this property', // literally can say anything here\n StudentNumber: '',\n },\n withdrawalInfoScreenshot: {\n AccountGroupId: this.props.match.params.groupId,\n AccountId: this.props.match.params.accountId,\n AgentId: this.props.preTransactionDetails.AgentId,\n Amount: '',\n BeneficiaryBirthdate: '',\n BeneficiaryId: this.props.preTransactionDetails.BeneficiaryId,\n CreatedDate: dayjs().toDate(), // API requires this property\n IsFullBalance: '',\n IsRecurring: false, // API requires this property\n LastModifiedDate: dayjs().toDate(), // API requires this property\n PayeeAddressLine1: '',\n PayeeAddressLine2: '',\n PayeeCity: '',\n PayeeState: '',\n PayeeZipCode: '',\n SchoolDepartment: '',\n SchoolId: '',\n SchoolName: '',\n SessionIdentifier: 'API requires this property', // literally can say anything here\n StudentNumber: '',\n }\n };\n\n displayUnsavedChangesPrompt = () => {\n return !this.state.loading && !isEqual(this.state.withdrawalInfo, this.state.withdrawalInfoScreenshot);\n }\n\n backClickHandle = () => {\n this.setState({ activeStep: this.state.activeStep - 1 });\n window.scrollTo(0, 0);\n }\n\n nextClickHandle = () => {\n if (this.state.activeStep === 2) {\n this.requestWithdrawal();\n }\n else {\n this.setState({ activeStep: this.state.activeStep + 1 });\n }\n window.scrollTo(0, 0);\n }\n\n renderBackButton = () => {\n return (\n {WithdrawalRequests.head_confirmation}
\n{WithdrawalRequests.text_submitted}
\n\n\n
\n\n\n {dayjs(withdrawalInfo.CreatedDate).format('MM/DD/YYYY h:mm A')} {WithdrawalRequests.text_timezone}
{/* eslint-disable-line */}\n{WithdrawalRequests.text_print_copy}
\n\n window.print()}\n variant='text'\n fullWidth\n >\n {WithdrawalRequests.btn_print}\n \n\n history.goBack()}\n variant='contained'\n color='primary'\n fullWidth\n >\n {WithdrawalRequests.btn_finish}\n \n
\n\n \n
\n :\n \n
\n \n
\n {WithdrawalRequests.text_bene}
\n{preTransactionDetails.beneficiaryName}
\n\n{WithdrawalRequests.text_account_num}
\n{preTransactionDetails.AccountNumber}
\n\n{WithdrawalRequests.text_current_opt}
\n{preTransactionDetails.OptionName}
\n\n\n {WithdrawalRequests.text_available_balance_info.map(line =>
} />\n {WithdrawalRequests.text_available_for_withdrawal}
\n{line}
)}{preTransactionDetails.totalAvailableForWithdrawal}
\n \n\n
\n {this.stepperContentGet()}\n
\n \n {this.props.accountList.length > 0 &&\n \n {permissions.WithdrawalRequest && ([\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n (\n <>\n \n }\n
\n );\n }\n}\n\nexport default withRouter(connect(select, {\n getAccounts,\n getGroupAccounts,\n getEnvironmentVars,\n getServerDateTime,\n})(LanguageHOC(Transactions)));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { isEqual } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { TextField } from '@mui/material';\nimport { Modal } from '@frontend/common';\n\nimport { editNickName, getBankAccounts } from '../actions';\n\n// const select = (state) => ({\n// allowedBankHolders: state.payments.allowedBankHolders,\n// });\n\nexport class EditBankModal extends React.Component {\n\n static propTypes = {\n editNickName: PropTypes.func.isRequired,\n getBankAccounts: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n close: PropTypes.func.isRequired,\n isMobileView: PropTypes.bool.isRequired,\n bankAccount: PropTypes.object.isRequired,\n text: PropTypes.shape({\n EditBankModal: PropTypes.shape({\n btn_save_nickname: PropTypes.string,\n err_allowable_chars: PropTypes.string,\n lbl_nickname: PropTypes.string,\n title_modal: PropTypes.string,\n }),\n })\n }\n\n state = {\n formErrors: {},\n nickname: '',\n isSaving: false\n }\n\n onInputChange = e => {\n const val = e.target.value;\n this.setState({ nickname: val });\n }\n\n formValidate = () => {\n const { err_allowable_chars } = this.props.text.EditBankModal;\n const { nickname } = this.state;\n const formErrors = {};\n\n const regex = /^[A-Za-z0-9.\\s.,':#/-]+$/; // case insensitive, space, period, comma, single quote and hyphen.\n if (nickname && !regex.test(nickname)) {\n formErrors.nickname = err_allowable_chars;\n }\n\n this.setState({ formErrors });\n return Object.keys(formErrors).length === 0; // returns True or False whether form is valid\n }\n\n onFormSubmit() {\n if (this.formValidate()) {\n const { BankAccountId } = this.props.bankAccount;\n const { nickname } = this.state;\n this.setState({ isSaving: true });\n this.props.editNickName(BankAccountId, nickname)\n // refresh bank accounts so it has the latest bank nicknames\n .then(() => this.props.getBankAccounts())\n .then(() => this.setState({ isSaving: false }))\n .then(() => this.props.close())\n .catch(() => this.setState({ isSaving: false }));\n }\n }\n\n componentDidUpdate(prevProps) {\n if (!isEqual(prevProps.bankAccount, this.props.bankAccount)\n && this.props.bankAccount.Nickname && this.props.bankAccount.Nickname.length > 0) {\n this.setState({ nickname: this.props.bankAccount.Nickname });\n }\n }\n\n render() {\n const { formErrors, isSaving, nickname } = this.state;\n const { open, close, isMobileView, text: { EditBankModal } } = this.props;\n return (\n \n
\n \n );\n }\n}\n\nexport default connect(null, { editNickName, getBankAccounts })(LanguageHOC(EditBankModal));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n Drawer,\n} from '@mui/material';\nimport { IconBtnTooltip } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\n\nLearnMore.propTypes = {\n environmentVars: PropTypes.shape({\n ACHBankWithdrawalLanguage: PropTypes.string,\n DisbursementSignatureGuaranteeAmount: PropTypes.number,\n DisbursementSignatureGuaranteeRollingDays: PropTypes.number,\n }).isRequired,\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n text: PropTypes.shape({\n BankAccountsLearnMore: PropTypes.shape({ \n head_title: PropTypes.string, \n text_info_1: PropTypes.string,\n text_info_2: PropTypes.string,\n text_info_bank_hold: PropTypes.func,\n text_info_3: PropTypes.string,\n text_info_4: PropTypes.array,\n text_info_5: PropTypes.string,\n text_info_6: PropTypes.func,\n text_info_7: PropTypes.string,\n text_info_8: PropTypes.string,\n })\n }).isRequired,\n};\n\nexport function LearnMore({ environmentVars, open, onClose, text: { BankAccountsLearnMore }, }) {\n\n\n const learnMoreInfo = () => (\n \n
\n
\n );\n\n return (\n \n
\n \n
{BankAccountsLearnMore.head_title}
\n\n {/* eslint-disable-next-line react/no-unescaped-entities */}\n
\n {BankAccountsLearnMore.text_info_1}
\n{BankAccountsLearnMore.text_info_2}
\n{BankAccountsLearnMore.text_info_bank_hold(environmentVars.ACHBankWithdrawalLanguage)}
\n{BankAccountsLearnMore.text_info_3}
\n- \n {BankAccountsLearnMore.text_info_4.map(line =>
- {line} )}\n
{BankAccountsLearnMore.text_info_5}
\n- \n {BankAccountsLearnMore.text_info_6(environmentVars.DisbursementSignatureGuaranteeAmount, environmentVars.DisbursementSignatureGuaranteeRollingDays).map(line =>
- {line} )}\n
{BankAccountsLearnMore.text_info_7}
\n{BankAccountsLearnMore.text_info_8}
\n\n
\n\n keyboard_arrow_down}\n aria-controls='learn-more'\n id='learn-more'\n >\n {qa.question} \n \n \n {Array.isArray(qa.answer)\n ? qa.answer.map((answer, index) => (\n Array.isArray(answer)\n ? qaIndex !== 18\n ? {qa.answer} }\n \n \n );\n })}\n
\n );\n\n return (\n \n
\n \n
{AccessCardsLearnMore.title_learn_more}
\n {AccessCardsLearnMore.text_faq.map((qa, qaIndex) => {\n return (\n- {answer.map((subAnswer, index) =>
- {subAnswer} )}
- {answer.map((subAnswer, index) =>
- {subAnswer} )}
{answer}
\n ))\n :{AccessCardsLearnMore.learn_more_footer}
\n\n
) :\n (\n \n {ValidationStart.text_complete_to_verify}\n
\n- \n
- {ValidationStart.text_step_1} \n
- {ValidationStart.text_step_2} \n
- {ValidationStart.text_step_3} \n
- {ValidationStart.text_step_4} \n
- \n
{ValidationStart.text_step_5}
\n\n
\n )\n }\n \n );\n}\n\nexport default LanguageHOC(ValidationStartModal);","/*\n*\n* ValidationFinishModal Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n FormHelperText,\n InputAdornment,\n} from '@mui/material';\nimport {\n Modal,\n BaseNumberInput,\n notificationShow,\n} from '@frontend/common';\nimport {\n confirmMicroDeposits,\n} from '../actions';\n\nimport styles from './styles.module.scss';\n\n\nexport class ValidationFinishModal extends React.Component {\n static propTypes = {\n open: PropTypes.bool.isRequired,\n handleShowValidationFinish: PropTypes.func.isRequired,\n selectedBankAccount: PropTypes.object.isRequired,\n handleGetBankAccounts: PropTypes.func.isRequired,\n confirmMicroDeposits: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n text: PropTypes.shape({\n ValidationFinish: PropTypes.shape({\n btn_back: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_validate: PropTypes.string,\n err_required: PropTypes.string,\n err_full_amount: PropTypes.string,\n head_validate: PropTypes.func,\n lbl_amount1: PropTypes.string,\n lbl_amount2: PropTypes.string,\n msg_validated: PropTypes.string,\n text_exceeded_attempts_error: PropTypes.string,\n text_match_error: PropTypes.func,\n text_validation_instructions: PropTypes.string,\n })\n })\n };\n\n state = {\n validationAmounts: {\n amount1: '',\n amount2: ''\n },\n validationValues: { // this is only for validation needs\n amount1: '',\n amount2: ''\n },\n formErrors: {},\n apiError: {},\n isValidating: false,\n attemptsRemaining: null,\n }\n\n onInputChange = (name, e) => {\n this.setState({\n validationAmounts: {\n ...this.state.validationAmounts,\n [name]: e.formattedValue,\n },\n validationValues: { // values needed for validation\n ...this.state.validationValues,\n [name]: e.value,\n },\n },() => this.formValidate(name));\n }\n\n formValidate = (name) => {\n const { err_required, err_full_amount } = this.props.text.ValidationFinish;\n const { validationValues } = this.state;\n const formErrors = {};\n\n if (name === 'amount1' || name === 'all') {\n if (validationValues.amount1.length < 2 && validationValues.amount1.length > 0) {\n formErrors.amount1 = err_full_amount;\n }\n if (!validationValues.amount1) {\n formErrors.amount1 = err_required;\n }\n }\n if (name === 'amount2' || name === 'all') {\n if (validationValues.amount2.length < 2 && validationValues.amount2.length > 0) {\n formErrors.amount2 = err_full_amount;\n }\n if (!validationValues.amount2) {\n formErrors.amount2 = err_required;\n }\n }\n \n if (name === 'all') {\n this.setState({\n formErrors,\n });\n return Object.keys(formErrors).length !== 0;\n }\n else {\n this.setState({\n formErrors: {\n ...this.state.formErrors,\n [name]: formErrors[name],\n },\n });\n }\n }\n\n closeForm = () => {\n setTimeout(() => { // timeout needed to clear state, due to input change getting called after from the CurrencyInput component\n this.setState({ \n validationAmounts: {\n amount1: '',\n amount2: ''\n },\n validationValues: { // this is only for validation needs\n amount1: '',\n amount2: ''\n },\n formErrors: {}, \n apiError: {},\n });\n }, 250);\n this.props.handleShowValidationFinish();\n }\n\n onFormSubmit = () => {\n const { \n selectedBankAccount, \n confirmMicroDeposits, \n handleGetBankAccounts,\n notificationShow,\n text: { ValidationFinish },\n } = this.props;\n const { validationAmounts } = this.state;\n\n if (this.formValidate('all')) {\n return; // has errors, stop the submit\n }\n\n this.setState({ isValidating: true });\n confirmMicroDeposits(selectedBankAccount.BankAccountId, validationAmounts)\n .then(({ payload: { data } }) => {\n const verificationResponse = data;\n const apiError = {};\n\n handleGetBankAccounts();\n \n if (verificationResponse) {\n this.closeForm();\n notificationShow(ValidationFinish.msg_validated, 'success');\n } \n else if (this.state.attemptsRemaining > 1) {\n apiError.didNotMatch = true;\n }\n else if (this.state.attemptsRemaining === 1) {\n apiError.validationAttemptsExceeded = true;\n }\n\n this.setState({ isValidating: false, apiError, attemptsRemaining: this.state.attemptsRemaining - 1, });\n })\n .catch(() => {\n this.setState({ isValidating: false });\n });\n }\n\n componentDidMount() {\n this.setState({ attemptsRemaining: this.props.selectedBankAccount.VerificationAttemptsRemaining });\n }\n\n render() {\n const { \n open, \n selectedBankAccount,\n text: { ValidationFinish }\n } = this.props;\n const { validationAmounts, isValidating, formErrors, apiError } = this.state;\n const pluralize = this.state.attemptsRemaining > 1;\n const actionButtons = this.state.attemptsRemaining === 0 ?\n [\n {\n label: ValidationFinish.btn_back,\n action: () => this.closeForm(),\n buttonType: 'contained',\n },\n ] :\n [\n {\n label: ValidationFinish.btn_validate,\n loading: isValidating,\n action: () => this.onFormSubmit(),\n buttonType: 'contained',\n }\n ];\n \n return (\n {ValidationStart.text_step_done}
\n\n {ValidationFinish.text_validation_instructions}\n
\n {this.state.attemptsRemaining !== 0 &&\n\n this.onInputChange('amount1', e)}\n errorText={formErrors.amount1}\n error={Boolean(formErrors.amount1)}\n disabled={isValidating}\n isNumericFormat={false} // only way to format this the way we wanted was to use the PatternFormat version\n InputProps={{\n startAdornment: $ ,\n }}\n inputProps={{\n maxLength: '5',\n format: '0.##',\n }}\n />\n this.onInputChange('amount2', e)}\n errorText={formErrors.amount2}\n error={Boolean(formErrors.amount2)}\n disabled={isValidating}\n isNumericFormat={false} // only way to format this the way we wanted was to use the PatternFormat version\n InputProps={{\n startAdornment: $ ,\n }}\n inputProps={{\n maxLength: '5',\n format: '0.##',\n }}\n />\n
}\n\n {apiError.didNotMatch && \n \n {children}\n \n
\n );\n}\n\nexport function PaperTitle({ children }) {\n return ({children}
);\n}\n\nexport function PaperBodyContainer({ children, padding }) {\n return ({children}
);\n}\n\nexport function PaperBodySection({ children }) {\n return ({children}
);\n}\n\nexport function PaperButtonsContainer({ children }) {\n return ({children}
);\n}\n\nexport function PaperBodyDivider() {\n return ();\n}\n\nexport function PaperBodySectionLabels({ topLabel, bottomLabel }) {\n return (\n
\n
\n );\n}\n\nCardWithTitle.propTypes = {\n paperProps: PropTypes.object,\n};\n\nPaperBodyContainer.propTypes = {\n padding: PropTypes.string,\n};\n\nPaperBodySectionLabels.propTypes = {\n topLabel: PropTypes.string,\n bottomLabel: PropTypes.string.isRequired,\n};\n///////////// END CardWithTitle Common parts /////////////////\n\nexport class Payments extends React.Component {\n static propTypes = {\n accountList: PropTypes.array.isRequired,\n bankAccounts: PropTypes.arrayOf(\n PropTypes.shape({\n AllowWithdrawals: PropTypes.bool.isRequired,\n BankAccountId: PropTypes.number.isRequired,\n BankAccountType: PropTypes.string.isRequired,\n BankName: PropTypes.string.isRequired,\n BeneficiaryId: PropTypes.number,\n BeneficiaryName: PropTypes.string,\n DoesOwnerNeedNotification: PropTypes.bool.isRequired,\n ExpirationDate: PropTypes.string.isRequired,\n ExpirationWarningDate: PropTypes.string.isRequired,\n GiactResult: PropTypes.string, //CHECK\n HasExceededFullVerificationAttempts: PropTypes.bool.isRequired,\n HasPendingACHTransactions: PropTypes.bool.isRequired,\n IsEligibleForPoa: PropTypes.bool.isRequired,\n IsPendingWithdrawalVerification: PropTypes.bool.isRequired,\n IsPoaApproved: PropTypes.bool.isRequired,\n IsVerified: PropTypes.bool.isRequired,\n MaskedBankAccountNumber: PropTypes.string.isRequired,\n Nickname: PropTypes.string,\n RoutingNumber: PropTypes.string.isRequired,\n VerificationAttemptsRemaining: PropTypes.number.isRequired,\n }),\n ).isRequired,\n accessCards: PropTypes.arrayOf(\n PropTypes.shape({\n AccessCardId: PropTypes.number,\n CardNumber: PropTypes.string,\n Title: PropTypes.string,\n })\n ).isRequired,\n groupedBankAccounts: PropTypes.object.isRequired,\n get2FAPrecondition: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n getBankAccounts: PropTypes.func.isRequired,\n getAccessCards: PropTypes.func.isRequired,\n getGroupedBankAccounts: PropTypes.func.isRequired,\n getAllowedBankHolders: PropTypes.func.isRequired,\n deleteBankAccount: PropTypes.func.isRequired,\n startMicroDeposits: PropTypes.func.isRequired,\n renewBankAccount: PropTypes.func.isRequired,\n poaApproval: PropTypes.func.isRequired,\n getAccessCardURL: PropTypes.func.isRequired,\n claims: PropTypes.object.isRequired,\n agentGet: PropTypes.func.isRequired,\n agent: PropTypes.shape({\n AgentId: PropTypes.number,\n FirstName: PropTypes.string,\n MiddleName: PropTypes.string,\n LastName: PropTypes.string,\n }).isRequired,\n size: PropTypes.shape({\n windowWidth: PropTypes.number,\n }).isRequired,\n text: PropTypes.shape({\n Payments: PropTypes.shape({\n access_card_url_text: PropTypes.string,\n btn_add_bank: PropTypes.string,\n btn_apply_now: PropTypes.string,\n btn_learn_more: PropTypes.string,\n btn_validate: PropTypes.string,\n btn_deposits_received: PropTypes.string,\n btn_renew: PropTypes.string,\n btn_remove: PropTypes.string,\n btn_ok: PropTypes.string,\n head_pending_ach: PropTypes.string,\n head_remove_account: PropTypes.string,\n head_renew_account: PropTypes.string,\n msg_poa_approved: PropTypes.string,\n msg_poa_not_approved: PropTypes.string,\n msg_removed: PropTypes.string,\n msg_renewed: PropTypes.string,\n text_account_not_validated: PropTypes.string,\n text_account_validated: PropTypes.string,\n text_account_on_hold: PropTypes.func,\n text_access_card_reqs: PropTypes.array,\n text_attempts_exceeded: PropTypes.string,\n text_bank_hold_language: PropTypes.func,\n text_confirm_remove: PropTypes.func,\n text_confirm_renew: PropTypes.func,\n text_expiration_warning: PropTypes.func,\n text_lpoa_switch: PropTypes.string,\n text_has_pending_transactions: PropTypes.string,\n text_my529_access_card: PropTypes.string,\n text_poa_not_approved: PropTypes.string,\n text_poa_approved: PropTypes.string,\n text_requirements: PropTypes.string,\n text_set_up_accounts: PropTypes.string,\n title_access_cards: PropTypes.string,\n txt_third_party_disclaimer: PropTypes.string,\n txt_third_party_warning_access_cards: PropTypes.string,\n txt_third_party_warning_access_cards_footer: PropTypes.func,\n txt_third_party_warning_for_info: PropTypes.string,\n }).isRequired,\n Withdrawals: PropTypes.shape({\n errors: PropTypes.shape({\n payment_method_on_hold: PropTypes.func,\n })\n }).isRequired,\n }).isRequired,\n environmentVars: PropTypes.shape({\n ACHBankWithdrawalDelay: PropTypes.number,\n ACHBankWithdrawalLanguage: PropTypes.string,\n DisbursementSignatureGuaranteeAmount: PropTypes.number,\n DisbursementSignatureGuaranteeRollingDays: PropTypes.number,\n }).isRequired,\n }\n\n state = {\n isMenuView: false,\n isMobileView: false,\n isLoading: false,\n isLoadingURL: false,\n buttonIsLoading: false,\n hasBankAccounts: false,\n hasAccessCards: false,\n showBankAccountsLearnMore: false,\n showAccessCardsLearnMore: false,\n showAddBankModal: false,\n showEditBankModal: false,\n showGiactRejectionModal: false,\n showCancelConfirmModal: false,\n showRenewConfirmModal: false,\n showHasPendingTransactionsModal: false,\n showNicknameModal: false,\n showValidationStartModal: false,\n validationStarted: false,\n showValidationFinishModal: false,\n selectedBankAccount: {},\n menuAnchorPoints: {},\n addAccountMenuOpen: false,\n showAccessCardApplicationThirdPartyWarning: false,\n showGeneralThirdPartyWarning: false,\n accessCardEligible: false,\n accountBeingEdited: {},\n accessCardURL: '',\n\n hasPrecondition: false,\n post2FAAuthFunction: '',\n post2FAAction: '',\n past2FABankAccount: {}\n }\n\n handleGetBankAccounts = () => {\n const { getBankAccounts, getAccessCards, getGroupedBankAccounts, } = this.props;\n this.setState({ isLoading: true });\n Promise.all([\n getBankAccounts(),\n getAccessCards(),\n ])\n .then(() => {\n const { bankAccounts, accessCards, } = this.props;\n getGroupedBankAccounts();\n this.setState({ isLoading: false, hasBankAccounts: bankAccounts.length > 0, hasAccessCards: accessCards.length > 0 });\n })\n .catch(() => {\n const { bankAccounts, accessCards, } = this.props;\n this.setState({ isLoading: false, hasBankAccounts: bankAccounts.length > 0, hasAccessCards: accessCards.length > 0 });\n });\n }\n\n menuClose = (accountId) => {\n this.setState({ menuAnchorPoints: { ...this.state.menuAnchorPoints, [accountId]: null } });\n }\n\n menuOpen = (event, accountId) => {\n this.setState({ menuAnchorPoints: { ...this.state.menuAnchorPoints, [accountId]: event.currentTarget } });\n }\n\n toggleShowBankAccountsLearnMore = () => {\n this.setState({ showBankAccountsLearnMore: !this.state.showBankAccountsLearnMore });\n }\n\n toggleShowAccessCardsLearnMore = () => {\n this.setState({ showAccessCardsLearnMore: !this.state.showAccessCardsLearnMore });\n }\n\n toggleShowAddBank = () => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'toggleShowAddBank'\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'toggleShowAddBank'\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setState({\n hasPrecondition: false,\n showAddBankModal: !this.state.showAddBankModal,\n post2FAAuthFunction: ''\n });\n }\n }\n\n handleShowRemoveBankConfirm = (bankAccount) => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleShowRemoveBankConfirm',\n post2FABankAccount: bankAccount\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleShowRemoveBankConfirm',\n post2FABankAccount: bankAccount\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n if (bankAccount.HasPendingACHTransactions) {\n this.setState({\n hasPrecondition: false,\n showHasPendingTransactionsModal: true,\n post2FAAuthFunction: '',\n post2FABankAccount: {}\n });\n }\n else {\n this.setState({\n hasPrecondition: false,\n selectedBankAccount: bankAccount,\n showCancelConfirmModal: true,\n post2FAAuthFunction: '',\n post2FABankAccount: {}\n });\n }\n }\n }\n\n handleDeleteBankAccount = () => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleDeleteBankAccount'\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleDeleteBankAccount',\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n this.setState({ buttonIsLoading: true });\n this.props.deleteBankAccount(this.state.selectedBankAccount.BankAccountId)\n .then(() => {\n this.props.notificationShow(this.props.text.Payments.msg_removed, 'success');\n this.handleGetBankAccounts();\n this.setState({\n hasPrecondition: false,\n buttonIsLoading: false,\n showCancelConfirmModal: false,\n post2FAAuthFunction: ''\n });\n })\n .catch(() => this.setState({ buttonIsLoading: false, showCancelConfirmModal: false }));\n }\n }\n\n handleRenewBankAccount = () => {\n this.setState({ buttonIsLoading: true });\n this.props.renewBankAccount(this.state.selectedBankAccount.BankAccountId)\n .then(() => {\n this.props.notificationShow(this.props.text.Payments.msg_renewed, 'success');\n this.handleGetBankAccounts();\n this.setState({ buttonIsLoading: false, showRenewConfirmModal: false });\n })\n .catch(() => this.setState({ buttonIsLoading: false, showRenewConfirmModal: false }));\n }\n\n handleApproveLPOA = bankAccount => {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleApproveLPOA',\n post2FABankAccount: bankAccount\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleApproveLPOA',\n post2FABankAccount: bankAccount\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else if (!bankAccount.AllowWithdrawals && !bankAccount.IsPoaApproved) {\n this.props.notificationShow(this.props.text.Withdrawals.errors.payment_method_on_hold(this.props.environmentVars.ACHBankWithdrawalDelay), 'error');\n }\n else {\n const { msg_poa_approved, msg_poa_not_approved, } = this.props.text.Payments;\n const notificationMessage = !bankAccount.IsPoaApproved ? msg_poa_approved : msg_poa_not_approved;\n const approvalApiEndpoint = !bankAccount.IsPoaApproved ? 'Approve' : 'Unapprove';\n\n this.setState({ isLoading: true, hasPrecondition: false });\n this.props.poaApproval(approvalApiEndpoint, bankAccount.BankAccountId)\n .then(() => {\n this.props.notificationShow(notificationMessage, 'success');\n this.handleGetBankAccounts();\n })\n .catch(() => this.setState({ isLoading: false }));\n }\n }\n\n handleAddAccountMenuClose = (event) => {\n if (this.addAccountMenuAnchor.current && this.addAccountMenuAnchor.current.contains(event.target)) {\n return;\n }\n\n this.setState({ addAccountMenuOpen: false });\n };\n\n renderLearnMoreButton = (forAccessCards = false) => {\n return (\n {topLabel}
\n{bottomLabel}
\n\n
\n );\n }\n\n renderNoAccessCards = () => {\n return (\n {this.props.text.Payments.text_set_up_accounts}
\n\n {this.renderLearnMoreButton()}\n \n {this.props.text.Payments.btn_add_bank}\n \n
\n \n
\n );\n }\n\n renderHasPendingTransactionsModal = () => {\n const { head_pending_ach, text_has_pending_transactions, btn_ok } = this.props.text.Payments;\n return (\n {this.props.text.Payments.text_my529_access_card}
\n{this.props.text.Payments.txt_third_party_disclaimer}
\n\n {this.renderLearnMoreButton(true)}\n \n {this.props.text.Payments.btn_apply_now}\n \n
\n \n {text_has_pending_transactions}\n
\n \n );\n }\n\n handleApplyForAccessCard = () => {\n this.setState({ showAccessCardApplicationThirdPartyWarning: true, isLoadingURL: true });\n this.props.getAccessCardURL()\n .then((response) => {\n const accessCardURL = response.payload.data;\n this.setState({ isLoadingURL: false, accessCardURL });\n })\n .catch(() => {\n this.setState({ showAccessCardApplicationThirdPartyWarning: false, isLoadingURL: false });\n });\n }\n\n handleAccountButtons(bankAccount, actionType) {\n const multiStatus = protectAction(this.props.claims);\n if (multiStatus === MULTIFACTOR_TYPE.TWO_FACTOR) {\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleAccountButtons',\n post2FABankAccount: bankAccount,\n post2FAAction: actionType,\n },\n () => this.props.get2FAPrecondition().catch(() => null)\n );\n }\n else if (multiStatus === MULTIFACTOR_TYPE.RSA)\n this.setState(\n {\n hasPrecondition: true,\n post2FAAuthFunction: 'handleAccountButtons',\n post2FABankAccount: bankAccount,\n post2FAAction: actionType,\n },\n () => this.props.getRSAPrecondition().catch(() => null)\n );\n else {\n if (actionType === 'validate') {\n this.setState({\n hasPrecondition: false,\n showValidationStartModal: true,\n validationStarted: false,\n selectedBankAccount: bankAccount,\n post2FAAuthFunction: '',\n post2FAAction: '',\n post2FABankAccount: {}\n });\n }\n else { // deposits recieved\n this.setState({\n hasPrecondition: false,\n showValidationFinishModal: true,\n selectedBankAccount: bankAccount,\n post2FAAuthFunction: '',\n post2FAAction: '',\n post2FABankAccount: {}\n });\n }\n }\n }\n\n renderAccessCardButtons = () => {\n const { Payments } = this.props.text;\n\n return (\n this.setState({ showGeneralThirdPartyWarning: true })}>\n {Payments.access_card_url_text}\n
\n \n this.setState(\n { accountBeingEdited },\n () => this.setState({ showEditBankModal: true })\n )}\n />\n
\n {IsVerified && IsEligibleForPoa && !BeneficiaryName &&\n \n this.handleApproveLPOA(bankAccount)}\n value={IsPoaApproved}\n inputProps={{ 'aria-label': 'secondary checkbox' }}\n />\n
\n }\n {!IsVerified && !IsPendingWithdrawalVerification && !HasExceededFullVerificationAttempts &&\n }\n {!IsVerified && IsPendingWithdrawalVerification &&\n }\n {isExpiring &&\n }\n {text_lpoa_switch}
\n{lpoaApprovalStatus}
\n\n this.handleApproveLPOA(bankAccount)}\n value={IsPoaApproved}\n inputProps={{ 'aria-label': 'secondary checkbox' }}\n />\n
\n }\n {text_lpoa_switch}
\n{lpoaApprovalStatus}
\n{text_account_validated}
:\n{text_account_not_validated}
;\n\n if (HasExceededFullVerificationAttempts) {\n validationStatus ={text_attempts_exceeded}
;\n }\n\n return (\n\n \n {text_expiration_warning(expirationDate)}\n }\n
\n {renderButtons}\n \n account_balance \n
\n \n
\n {isExpiring &&\n \n
\n {IsVerified && !AllowWithdrawals && !isExpiring && // display hold language, if bank account is validated but still on 7 business day mail letter hold; exclude expiring bank accounts\n {BankName}
\n{BankAccountType}
\n {validationStatus}\n{text_account_on_hold(ACHBankWithdrawalDelay)}
}\n{MaskedBankAccountNumber}
\n{Nickname}
\n \n
\n {renderButtons}\n \n credit_card \n
\n \n
\n \n
\n {Title}
\n{CardNumber}
\n\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {(hasBankAccounts) &&\n \n \n );\n })}\n\n {hasBankAccounts &&\n \n }\n\n {hasAccessCards &&\n
\n \n );\n }\n\n initBankAccounts = (agent) => {\n const userDetails = {\n agentId: agent.AgentId,\n name: `${agent.FirstName} ${agent.MiddleName} ${agent.LastName}`\n };\n this.props.getAllowedBankHolders(userDetails, this.props.accountList);\n this.handleGetBankAccounts();\n\n const menuAnchorPoints = {};\n // Creates menu anchor point for every account, since each menu includes links to the individual bank account\n Object.keys(this.props.groupedBankAccounts).forEach(owner => {\n this.props.groupedBankAccounts[owner].forEach(bankAccount => {\n menuAnchorPoints[bankAccount.BankAccountId] = null;\n });\n });\n\n this.setState({ menuAnchorPoints });\n }\n\n componentDidMount() {\n const { agent, claims, } = this.props;\n const accessCardEligible = claims.AccessCardEligible === 'True';\n\n this.setState({ accessCardEligible });\n if (!agent.AgentId) {\n this.setState({ isLoading: true });\n this.props.agentGet()\n .then(() => {\n this.initBankAccounts(this.props.agent);\n })\n .finally(() => this.setState({ isLoading: false }));\n }\n else {\n this.initBankAccounts(agent);\n }\n }\n\n componentDidUpdate({ size }) {\n const { size: { windowWidth } } = this.props;\n if (size.windowWidth !== windowWidth) {\n this.setState({\n isMenuView: windowWidth < parseInt(tabletWidth),\n isMobileView: windowWidth < parseInt(mobileWidth),\n });\n }\n\n const multiStatus = protectAction(this.props.claims);\n if (this.state.hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH) {\n const funcName = this.state.post2FAAuthFunction;\n this[funcName](this.state.post2FABankAccount, this.state.post2FAAction);\n }\n }\n\n render() {\n const {\n environmentVars,\n text: { Payments, },\n } = this.props;\n const {\n showAddBankModal,\n showEditBankModal,\n showBankAccountsLearnMore,\n showAccessCardsLearnMore,\n showValidationStartModal,\n validationStarted,\n showValidationFinishModal,\n showAccessCardApplicationThirdPartyWarning,\n showGeneralThirdPartyWarning,\n selectedBankAccount,\n buttonIsLoading,\n accessCardURL,\n } = this.state;\n\n return (\n \n \n
\n }\n\n {/* BANK ACCOUNT SECTION */}\n {isLoading\n ? this.renderBlankAccountCard()\n : Object.keys(groupedBankAccounts).map(accountOwner => {\n const bankAccountGroup = groupedBankAccounts[accountOwner];\n return (\n \n {accountOwner} \n \n {bankAccountGroup.map((bankAccount) => {\n return (\n \n \n );\n })}\n \n
\n \n {this.renderLearnMoreButton()}\n
}\n\n {/* ACCESS CARD SECTION */}\n {hasAccessCards &&\n \n {Payments.title_access_cards} \n \n {accessCards.map(accessCard => {\n return (\n \n \n );\n })}\n \n
\n \n {Payments.text_requirements}\n
\n - \n {Payments.text_access_card_reqs.map((req, index) => (\n
- {req} \n ))}\n
\n
}\n\n {!hasBankAccounts && !isLoading && this.renderNoBankAccounts()}\n {!hasAccessCards && !isLoading && accessCardEligible && this.renderNoAccessCards()}\n {Payments.txt_third_party_disclaimer}
\n {this.renderLearnMoreButton(true)}\n\n this.toggleShowAddBank()}\n isMobileView={this.state.isMobileView}\n handleGetBankAccounts={this.handleGetBankAccounts}\n handleShowGiactRejectionModal={() => this.setState({ showGiactRejectionModal: true })}\n handleShowValidationStart={(newBankAccount) => this.setState({ showValidationStartModal: true, validationStarted: false, selectedBankAccount: newBankAccount })}\n />\n this.setState({ showEditBankModal: false, accountBeingEdited: {} })}\n isMobileView={this.state.isMobileView}\n bankAccount={this.state.accountBeingEdited}\n />\n this.setState({ showCancelConfirmModal: false })}\n onConfirm={() => this.handleDeleteBankAccount()}\n isLoading={buttonIsLoading}\n />\n this.setState({ showRenewConfirmModal: false })}\n onConfirm={() => this.handleRenewBankAccount()}\n isLoading={buttonIsLoading}\n />\n {this.renderHasPendingTransactionsModal()}\n this.setState({ showValidationStartModal: !this.state.showValidationStartModal })}\n handleValidationStarted={() => this.setState({ validationStarted: !this.state.validationStarted })}\n handleButtonIsLoading={() => this.setState({ buttonIsLoading: !this.state.buttonIsLoading })}\n />\n this.setState({ showValidationFinishModal: !showValidationFinishModal })}\n selectedBankAccount={selectedBankAccount}\n handleGetBankAccounts={this.handleGetBankAccounts}\n />\n this.setState({ showAccessCardApplicationThirdPartyWarning: false })}\n eventLabel='Discover Access Cards' // for Google analytics\n thirdPartyURL={accessCardURL}\n imageSrc={OpenCPScreenshot}\n warningLanguage={Payments.txt_third_party_warning_access_cards}\n footer={Payments.txt_third_party_warning_access_cards_footer(OPENCP_URL)}\n maxWidth='lg'\n />\n this.setState({ showGeneralThirdPartyWarning: false })}\n eventLabel='Access Cards Homepage'\n thirdPartyURL={OPENCP_URL}\n warningLanguage={Payments.txt_third_party_warning_for_info}\n />\n
\n );\n }\n}\n\n\nexport default connect(\n select,\n {\n getBankAccounts,\n getAccessCards,\n getGroupedBankAccounts,\n getAllowedBankHolders,\n deleteBankAccount,\n startMicroDeposits,\n renewBankAccount,\n poaApproval,\n getAccessCardURL,\n get2FAPrecondition,\n getRSAPrecondition,\n notificationShow,\n agentGet,\n }\n)(sizify(LanguageHOC(Payments)));\n","/*\n*\n* Documents Actions\n*\n*/\nimport {\n GETrequest,\n POSTrequest,\n} from 'utils/helpers/api_handler';\nimport {\n DOCUMENTS_GET,\n ACCOUNT_DOCUMENT_DOWNLOAD_DATA,\n ACCOUNT_CERTIFICATE_NAME,\n COUNTRIES_LIST_GET,\n} from './constants';\n\nexport function documentsGet() {\n const payload = GETrequest('/accounts/documents');\n\n return {\n type: DOCUMENTS_GET,\n payload,\n };\n}\n\nexport function downloadAccountDocumentData(url) {\n const payload = GETrequest(url);\n\n return {\n type: ACCOUNT_DOCUMENT_DOWNLOAD_DATA,\n payload,\n };\n}\n\nexport function updateAccountCertificateName(certificateFromName, accountId) {\n const payload = POSTrequest(`/accounts/${accountId}/documents/certificate?customName=${certificateFromName}`);\n\n return {\n type: ACCOUNT_CERTIFICATE_NAME,\n payload,\n };\n}\n\nexport function getCountries() {\n const response = GETrequest('/Parameters/Countries');\n return {\n type: COUNTRIES_LIST_GET,\n payload: response,\n };\n}","/*\n*\n* CertificateEdit Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n TextField,\n} from '@mui/material';\nimport {\n Modal,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\n\nexport class CertificateEdit extends React.Component {\n static propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n saveNameAndOpenDoc: PropTypes.func.isRequired,\n certificateCustomName: PropTypes.string.isRequired,\n text: PropTypes.shape({\n Documents: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_save: PropTypes.string,\n err_required: PropTypes.string,\n lbl_from_name: PropTypes.string,\n text_edit_certificate: PropTypes.string,\n title_edit_certificate: PropTypes.string,\n })\n })\n };\n\n state = {\n certificateFromName: this.props.certificateCustomName,\n formErrors: {},\n isSaving: false,\n }\n\n onInputChange = (e, name) => {\n this.setState({\n [name]: e.target.value,\n formErrors: {\n ...this.state.formErrors,\n [name]: '',\n },\n verificationFailed: false,\n });\n }\n\n formValidate = () => {\n const { Documents } = this.props.text;\n const { certificateFromName } = this.state;\n const formErrors = {};\n\n if (!certificateFromName) {\n formErrors.certificateFromName = Documents.err_required;\n }\n\n this.setState({ formErrors });\n const hasErrors = Object.keys(formErrors).some(field => formErrors[field] !== '');\n\n return !hasErrors;\n }\n\n closeForm = () => {\n this.props.onClose();\n }\n\n onEditCertificate = () => {\n const { saveNameAndOpenDoc } = this.props;\n const { certificateFromName } = this.state;\n const isValid = this.formValidate();\n\n if (isValid) {\n this.setState({ isSaving: true });\n /* \n The & sign causes issues when submitting edits since the new From Name\n is sent in the API URL. This ensures that the & sign will save and appear\n correctly and safely.\n */\n const ampEncodedCertificateFromName = certificateFromName.replace(/&/g, '%26');\n saveNameAndOpenDoc(ampEncodedCertificateFromName);\n }\n }\n\n render() {\n const { \n open, \n text: { Documents }\n } = this.props;\n const { isSaving, formErrors, certificateFromName } = this.state;\n \n return (\n \n {Payments.text_bank_hold_language(environmentVars.ACHBankWithdrawalLanguage)}\n
\n\n {this.renderPaymentAccounts()}\n\n\n {Documents.text_edit_certificate}\n
\n \n\n this.onInputChange(e, 'certificateFromName')}\n value={certificateFromName}\n inputProps={{\n maxLength: 40\n }}\n />\n
\n \n \n \n this.openPdfStatement(row.Url, row.DocumentType, TAXFORM1099_COPY_PATHS.COPY_B_MAIL_INSTRUCTIONS),\n },\n {\n displayName: Documents.title_view_additional,\n type: 'menu',\n onSelect: row => this.openPdfStatement(row.Supplement.Url, row.DocumentType),\n showIf: row => row.Supplement,\n },\n {\n displayName: Documents.title_edit_certificate,\n type: 'menu',\n onSelect: row => this.setState({ openCertificateEdit: true, selectedCertificate: row }),\n showIf: row => row.DocumentType === DocumentTypes.AccountCertificate,\n },\n ]}\n >\n \n \n \n \n\n this.certificateEditHandler(\n selectedCertificate.Url,\n selectedCertificate.DocumentType,\n certificateFromName,\n selectedCertificate.AccountId\n )}\n />\n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n documentsGet,\n downloadAccountDocumentData,\n updateAccountCertificateName,\n notificationShow,\n getNotifications,\n getCountries,\n})(LanguageHOC(Documents)));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport parse from 'html-react-parser';\nimport {\n Drawer,\n Accordion,\n AccordionSummary,\n AccordionDetails,\n Typography,\n Divider,\n} from '@mui/material';\nimport { IconBtnTooltip } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nexport function Instructions({ open, onClose, text: { PayrollInstructions } }) {\n\n Instructions.propTypes = {\n open: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n text: PropTypes.shape({\n PayrollInstructions: PropTypes.shape({\n head_instructions: PropTypes.string,\n title_how: PropTypes.string,\n text_how1: PropTypes.string,\n text_how2: PropTypes.array,\n text_how3: PropTypes.string,\n text_how4: PropTypes.string,\n text_how5: PropTypes.string,\n title_provide_to_employer: PropTypes.string,\n text_provide1: PropTypes.string,\n text_provide2: PropTypes.string,\n })\n })\n };\n\n const renderPayroll = () => (\n \n \n keyboard_arrow_down}\n aria-controls='panel1a-content'\n id='panel1a-header'\n >\n {PayrollInstructions.title_how} \n \n \n \n \n\n \n keyboard_arrow_down}\n aria-controls='panel1a-content'\n id='panel1a-header'\n >\n {PayrollInstructions.title_provide_to_employer} \n \n \n \n \n\n
\n );\n\n return (\n \n
\n {PayrollInstructions.head_instructions}
\n\n
\n {PayrollInstructions.text_how1}
\n - \n {PayrollInstructions.text_how2.map(line =>
- {line} )}\n
{parse(PayrollInstructions.text_how3)}
\n\n {PayrollInstructions.text_how4}\n{PayrollInstructions.text_how5}
\n \n
\n {PayrollInstructions.text_provide1}
\n{PayrollInstructions.text_provide2}
\n \n
\n );\n\n return (\n {PayrollTerms.text_terms_authorize}
\n- \n {PayrollTerms.text_terms.map(line =>
- {parse(line)} )}\n
\n {PayrollContribution.text_add_account}\n
\n\n\n this.onInputChange('beneficiaryBirthdate', e ? dayjs(e).format('L') : e)}\n openTo='year'\n value={beneficiaryBirthdate || null}\n />\n
\n\n {verificationFailed && \n
\n {PayrollContribution.head_account_number}
\n {AccountNumber}
\n \n
\n {PayrollContribution.title_bene_name}
\n {BeneficiaryName}
\n );\n}\n\nexport class PayrollContribution extends React.Component {\n static propTypes = {\n getNotifications: PropTypes.func.isRequired,\n userDetails: PropTypes.object.isRequired,\n agentMailingAddress: PropTypes.object.isRequired,\n accountList: PropTypes.array.isRequired,\n payrollContributionData: PropTypes.object.isRequired,\n usStates: PropTypes.array.isRequired,\n getPayroll: PropTypes.func.isRequired,\n updatePayroll: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n history: PropTypes.object.isRequired,\n text: PropTypes.shape({\n PayrollContribution: PropTypes.shape({\n btn_add_account: PropTypes.string,\n btn_agree: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_edit: PropTypes.string,\n btn_finish: PropTypes.string,\n btn_instructions: PropTypes.string,\n btn_print: PropTypes.string,\n btn_terms: PropTypes.string,\n err_required: PropTypes.string,\n err_total_amount: PropTypes.string,\n err_total_percent: PropTypes.string,\n head_account_number: PropTypes.string,\n head_beneficiary: PropTypes.string,\n head_other_accounts: PropTypes.string,\n head_own_accounts: PropTypes.string,\n lbl_employee: PropTypes.string,\n lbl_employer: PropTypes.string,\n lbl_pay_period_contribution: PropTypes.string,\n lbl_terms_agree: PropTypes.string,\n lbl_state: PropTypes.string,\n msg_account_added: PropTypes.string,\n msg_payroll_saved: PropTypes.string,\n msg_payroll_updated: PropTypes.string,\n nav_path: PropTypes.string,\n nav_title: PropTypes.string,\n text_current_allocations: PropTypes.string,\n text_important_bank_info: PropTypes.string,\n text_total: PropTypes.string,\n title_amount: PropTypes.string,\n title_employer: PropTypes.string,\n title_payroll_account: PropTypes.string,\n title_payroll_account_type: PropTypes.string,\n title_payroll_routing: PropTypes.string,\n })\n })\n }\n\n state = {\n apiErrors: [],\n isNewContribution: true,\n isEditing: false,\n isLoading: false,\n submitLoading: false,\n statementLoading: false,\n termsOpen: false,\n instructionsOpen: false,\n addAccountModalOpen: false,\n contributionInputType: AMOUNT,\n payPeriodContributionAmount: '',\n termsChecked: false,\n payrollData: {\n Employer: '',\n PayrollAccountAllocations: [],\n EmployerState: ''\n },\n totalAmount: 0,\n totalPercentage: 0,\n formErrors: {},\n showReview: false,\n }\n\n employerHandle = event => {\n const payrollData = cloneDeep(this.state.payrollData);\n payrollData.Employer = event.target.value;\n this.setState({\n payrollData,\n formErrors: { ...this.state.formErrors, employer: '' }\n });\n }\n\n contributionTypeHandle = type => {\n type === AMOUNT ? this.updateAmountWithPercentages() : this.updatePercentageWithAmounts();\n this.setState({ contributionInputType: type });\n }\n\n payPeriodAmountHandle = floatValue => {\n this.setState({\n payPeriodContributionAmount: floatValue,\n formErrors: { ...this.state.formErrors, payPeriodContributionAmount: '' }\n }, () => this.updateAmountWithPercentages());\n }\n\n amountHandle = ({ floatValue = 0 }, rowIndex) => {\n const { payPeriodContributionAmount } = this.state;\n const payrollData = cloneDeep(this.state.payrollData);\n payrollData.PayrollAccountAllocations[rowIndex].Amount = floatValue;\n\n if (payPeriodContributionAmount) {\n payrollData.PayrollAccountAllocations[rowIndex].Percentage = (floatValue / payPeriodContributionAmount) * 100;\n }\n\n const totalAmount = this.getTotalAmount(payrollData);\n const totalPercentage = this.getTotalPercentage(payrollData);\n this.setState({\n payrollData,\n totalAmount,\n totalPercentage,\n formErrors: { ...this.state.formErrors, totalAmount: '', totalPercentage: '' }\n });\n }\n\n percentHandle = (value, rowIndex) => {\n const { payPeriodContributionAmount } = this.state;\n const payrollData = cloneDeep(this.state.payrollData);\n payrollData.PayrollAccountAllocations[rowIndex].Percentage = value;\n\n if (payPeriodContributionAmount) {\n payrollData.PayrollAccountAllocations[rowIndex].Amount = (value / 100) * payPeriodContributionAmount;\n }\n\n const totalAmount = this.getTotalAmount(payrollData);\n const totalPercentage = this.getTotalPercentage(payrollData);\n this.setState({\n payrollData,\n totalAmount,\n totalPercentage,\n formErrors: { ...this.state.formErrors, totalAmount: '', totalPercentage: '' }\n });\n }\n\n stateSelectHandle = (value) => {\n this.setState({\n formErrors: { ...this.state.formErrors, stateCode: '' },\n payrollData: { ...this.state.payrollData, EmployerState: value },\n });\n }\n\n updateAmountWithPercentages = () => {\n const { payPeriodContributionAmount } = this.state;\n const payrollData = cloneDeep(this.state.payrollData);\n\n if (payPeriodContributionAmount) {\n payrollData.PayrollAccountAllocations.map(payrollAccount => {\n return payrollAccount.Amount = payrollAccount.Percentage ? parseFloat(((payrollAccount.Percentage / 100) * payPeriodContributionAmount).toFixed(2)) : 0;\n });\n }\n else {\n payrollData.PayrollAccountAllocations.map(payrollAccount => {\n return payrollAccount.Amount = 0;\n });\n }\n const totalAmount = this.getTotalAmount(payrollData);\n this.setState({ payrollData, totalAmount });\n }\n\n updatePercentageWithAmounts = () => {\n const { payPeriodContributionAmount } = this.state;\n const payrollData = cloneDeep(this.state.payrollData);\n\n if (payPeriodContributionAmount) {\n payrollData.PayrollAccountAllocations.map(payrollAccount => {\n return payrollAccount.Percentage = payrollAccount.Amount ? ((payrollAccount.Amount / payPeriodContributionAmount) * 100) : 0;\n });\n }\n else {\n payrollData.PayrollAccountAllocations.map(payrollAccount => {\n return payrollAccount.Percentage = 0;\n });\n }\n const totalPercentage = this.getTotalPercentage(payrollData);\n this.setState({ payrollData, totalPercentage });\n }\n\n getTotalAmount = payrollData => {\n return payrollData.PayrollAccountAllocations.reduce((total, { Amount }) => total + Amount, 0);\n }\n\n getTotalPercentage = payrollData => {\n return payrollData.PayrollAccountAllocations.reduce((total, { Percentage = 0 }) => total + parseFloat(Percentage), 0);\n }\n\n handleSubmit = () => {\n const { msg_payroll_saved, msg_payroll_updated } = this.props.text.PayrollContribution;\n const notificationMessage = this.state.isEditing ? msg_payroll_updated : msg_payroll_saved;\n const isValid = this.formValidate();\n if (isValid) {\n this.setState({ submitLoading: true });\n this.props.updatePayroll(this.state.payrollData)\n .then(() => {\n // response is updated payrollContributionData so it will get updated in state\n this.setState({\n submitLoading: false,\n payrollData: this.props.payrollContributionData,\n contributionInputType: AMOUNT,\n showReview: true,\n isEditing: false,\n isNewContribution: Boolean(!this.props.payrollContributionData.EffectiveDate),\n });\n this.props.notificationShow(notificationMessage, 'success');\n this.props.getNotifications(); // refreshes app notifications\n })\n .catch(err => {\n this.setState({\n apiErrors: err.payload.data,\n submitLoading: false,\n }, () => this.formValidate());\n });\n }\n }\n\n formValidate = () => {\n const { PayrollContribution } = this.props.text;\n const {\n apiErrors, payrollData: { Employer, EmployerState }, totalAmount, totalPercentage,\n payPeriodContributionAmount, contributionInputType,\n } = this.state;\n const formErrors = {};\n\n if (!Employer) {\n formErrors.employer = PayrollContribution.err_required;\n }\n\n if (contributionInputType === PERCENTAGE && !payPeriodContributionAmount) {\n formErrors.payPeriodContributionAmount = PayrollContribution.err_required;\n }\n if (contributionInputType === PERCENTAGE && totalPercentage.toFixed(2) !== '100.00') {\n formErrors.totalPercentage = PayrollContribution.err_total_percent;\n }\n\n if (!totalAmount) {\n formErrors.totalAmount = PayrollContribution.err_total_amount;\n }\n\n const stateError = validator.stateValidator(EmployerState);\n if (stateError) {\n formErrors.stateCode = stateError;\n }\n\n if (apiErrors.length > 0) {\n apiErrors.forEach(err => {\n if (err.Field.toLowerCase() === 'employer') {\n formErrors.employer = err.Message;\n window.scrollTo(0, 0);\n }\n else {\n formErrors[err.Field] = err.Message;\n }\n });\n }\n\n this.setState({ apiErrors: [], formErrors });\n\n return Object.keys(formErrors).length === 0;\n }\n\n handleAddNonAgentAccount = verifiedAccount => {\n const payrollData = cloneDeep(this.state.payrollData);\n const isAlreadyAdded = payrollData.PayrollAccountAllocations.some(account => account.AccountId === verifiedAccount.AccountId);\n if (!isAlreadyAdded) {\n payrollData.PayrollAccountAllocations.push(verifiedAccount);\n this.props.notificationShow(this.props.text.PayrollContribution.msg_account_added, 'success');\n }\n this.setState({ payrollData, hasNotOwnedAccounts: true, });\n }\n\n viewStatementHandle() {\n const { agentMailingAddress, userDetails } = this.props;\n const { payrollData, totalAmount } = this.state;\n\n const data = {\n ...payrollData,\n totalAmount,\n address: agentMailingAddress,\n agentName: userDetails.name,\n };\n const pdfWindow = window.open('', '_blank'); // needs to be outside of async call to work in Safari\n pdfWindow.document.write(loadingAnimationHTML); // this will get replaced by generated pdf once the api loads all data\n\n createPayrollPdfToNewWindow(data, pdfWindow);\n }\n\n renderEmployeeSection = () => {\n const { text: { PayrollContribution }, usStates, userDetails } = this.props;\n const {\n isLoading, payrollData, formErrors, contributionInputType,\n payPeriodContributionAmount\n } = this.state;\n\n return (\n
\n
\n );\n }\n\n renderReviewDetails = () => {\n const { text: { PayrollContribution }, userDetails } = this.props;\n const {\n payrollData: {\n Employer,\n PayrollBankAccountNumber,\n PayrollBankAccountType,\n PayrollRoutingNumber,\n },\n totalAmount,\n showReview,\n } = this.state;\n return (\n \n
\n\n {PayrollContribution.lbl_employee}
\n{userDetails.name.toUpperCase()}
\n\n this.employerHandle(e)}\n value={payrollData.Employer || ''}\n style={{ width: '100%' }}\n disabled={isLoading}\n inputProps={{\n maxLength: 40\n }}\n />\n
\n\n \n {contributionInputType === PERCENTAGE &&\n this.payPeriodAmountHandle(floatValue)}\n value={payPeriodContributionAmount || ''}\n style={{ width: '100%', }}\n inputProps={{\n maxLength: '10',\n decimalScale: 2,\n fixedDecimalScale: true,\n thousandSeparator: true,\n allowNegative: false,\n }}\n />\n }\n
\n\n \n ({ value: state.Code, display: state.Name }))}\n errorText={formErrors.stateCode}\n error={Boolean(formErrors.stateCode)}\n value={payrollData.EmployerState || ''}\n onChange={this.stateSelectHandle}\n SelectProps={{\n MenuProps: {\n PaperProps: {\n style: { maxHeight: '300px' }\n }\n }\n }}\n disabled={isLoading}\n\n />\n
\n \n {!showReview &&
\n );\n }\n\n renderPayrollAccountList = () => {\n const { accountList, text: { PayrollContribution }, } = this.props;\n const {\n isNewContribution, isEditing, hasNotOwnedAccounts, payrollData: { PayrollAccountAllocations },\n contributionInputType, totalAmount, totalPercentage, isLoading, formErrors,\n } = this.state;\n\n return (\n {PayrollContribution.text_current_allocations}
}\n\n \n
\n\n {PayrollContribution.lbl_employee}
\n{userDetails.name.toUpperCase()}
\n\n
\n\n {PayrollContribution.title_employer}
\n{Employer}
\n\n
\n\n {PayrollContribution.title_amount}
\n{currencyFormatter(totalAmount)}
\n\n
\n\n {PayrollContribution.title_payroll_routing}
\n{PayrollRoutingNumber}
\n\n
\n\n {PayrollContribution.title_payroll_account}
\n{PayrollBankAccountNumber}
\n\n
\n {PayrollContribution.title_payroll_account_type}
\n{PayrollBankAccountType}
\n\n\n
\n );\n }\n\n renderButtons = () => {\n const { btn_agree, btn_cancel, btn_finish, btn_edit, btn_print, } = this.props.text.PayrollContribution;\n const {\n isNewContribution, isEditing, showReview, isLoading, termsChecked,\n submitLoading, statementLoading,\n } = this.state;\n\n const cancelButton = (\n \n
\n\n {PayrollContribution.head_account_number}
\n {PayrollContribution.head_beneficiary}
\n \n
\n \n this.contributionTypeHandle(AMOUNT)}\n style={{\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }}\n />\n
\n \n this.contributionTypeHandle(PERCENTAGE)}\n style={{\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }}\n />\n
\n \n
\n ))\n ) : (\n \n
\n \n {hasNotOwnedAccounts &&
\n )}\n\n {PayrollContribution.head_own_accounts}
}\n\n {PayrollAccountAllocations.map((row, rowIndex) => (\n row.OwnedAccount &&
\n \n
\n ))}\n {hasNotOwnedAccounts &&\n <>\n {`xxxxxx${row.AccountNumber.toString().slice(row.AccountNumber.toString().length - 3)}`}
\n {row.BeneficiaryName.toUpperCase()}
\n \n {contributionInputType === AMOUNT ?\n this.renderDollarInputs(row, rowIndex)\n :\n this.renderPercentageInputs(row, rowIndex)\n }\n
\n {PayrollContribution.head_other_accounts}
\n {PayrollAccountAllocations.map((row, rowIndex) => (\n !row.OwnedAccount &&\n
\n ))}\n }\n {`xxxxxx${row.AccountNumber.toString().slice(row.AccountNumber.toString().length - 3)}`}
\n {row.BeneficiaryName.toUpperCase()}
\n \n {contributionInputType === AMOUNT ?\n this.renderDollarInputs(row, rowIndex)\n :\n this.renderPercentageInputs(row, rowIndex)\n }\n
\n \n
\n \n {(isEditing || isNewContribution) && !isLoading &&\n this.setState({ addAccountModalOpen: true })}\n >\n {PayrollContribution.btn_add_account}\n \n }\n
\n {PayrollContribution.text_total}
\n \n {contributionInputType === AMOUNT ?\n $,\n inputProps: {\n style: { padding: '10px 12px 10px 0', },\n decimalScale: 2,\n fixedDecimalScale: true,\n thousandSeparator: true,\n allowNegative: false,\n }\n }}\n /> :\n
\n \n <>\n \n {isEditing || isNewContribution ? this.renderEmployeeSection() : this.renderReviewDetails()}\n {!showReview && this.renderPayrollAccountList()}\n\n {isEditing || isNewContribution ? (\n \n this.setState({ addAccountModalOpen: false })}\n handleAddNonAgentAccount={this.handleAddNonAgentAccount}\n />\n\n this.setState({ termsOpen: false })}\n open={termsOpen}\n />\n\n this.setState({ instructionsOpen: false })}\n open={instructionsOpen}\n />\n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n getNotifications,\n getPayroll,\n updatePayroll,\n notificationShow,\n})(LanguageHOC(PayrollContribution)));\n","/*\n*\n* AddIp Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { cloneDeep } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { addIp } from '../actions';\nimport * as validator from 'utils/helpers/form_validation';\nimport {\n Button,\n FormHelperText,\n TextField\n} from '@mui/material';\nimport {\n Checkbox,\n Modal,\n notificationShow,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nconst select = state => ({\n interestedParties: state.interestedParties.interestedParties,\n});\n\nexport class AddIp extends React.Component {\n\n static propTypes = {\n addIp: PropTypes.func.isRequired,\n handleIpActions: PropTypes.func.isRequired,\n interestedParties: PropTypes.arrayOf(PropTypes.shape({\n interestedPartyId: PropTypes.number,\n })).isRequired,\n notificationShow: PropTypes.func.isRequired,\n onModalClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n renderAccountSelection: PropTypes.func.isRequired,\n selectedAccounts: PropTypes.array.isRequired,\n text: PropTypes.shape({\n InterestedParties: PropTypes.shape({\n btn_add_ip: PropTypes.string,\n btn_add_ip_read_terms: PropTypes.string,\n btn_agree_terms: PropTypes.string,\n btn_close: PropTypes.string,\n btn_save: PropTypes.string,\n err_add_ip_terms_agree: PropTypes.string,\n err_copy_email: PropTypes.string,\n err_emails_must_match: PropTypes.string,\n lbl_email: PropTypes.string,\n lbl_email_confirm: PropTypes.string,\n msg_ip_added: PropTypes.string,\n text_add_ip_terms: PropTypes.func,\n }),\n }).isRequired,\n validateSelectedAccounts: PropTypes.func.isRequired,\n };\n\n state = {\n apiErrors: [],\n loading: false,\n errors: {},\n newIp: {\n emailAddress1: '',\n emailAddress2: '',\n },\n showTerms: false,\n termsChecked: false,\n };\n\n addIp = () => {\n const { newIp: { emailAddress1, emailAddress2 } } = this.state;\n const isValid = this.formValidate();\n\n if (isValid) {\n const newIpInfo = {\n accountIds: this.props.selectedAccounts.map(acct => acct.accountId),\n emailAddress1,\n emailAddress2,\n };\n this.setState({ loading: true });\n this.props.addIp(newIpInfo)\n .then(() => {\n const newlyAddedIp = this.props.interestedParties[this.props.interestedParties.length - 1];\n this.closeModal();\n this.props.handleIpActions(newlyAddedIp.interestedPartyId, 'successModalOpen');\n this.props.notificationShow(this.props.text.InterestedParties.msg_ip_added, 'success');\n })\n .catch(res => {\n this.setState({\n apiErrors: res.payload.data,\n loading: false\n }, () => this.formValidate());\n });\n }\n }\n\n closeModal = () => {\n this.setState({\n errors: {},\n loading: false,\n newIp: {\n emailAddress1: '',\n emailAddress2: '',\n },\n });\n this.props.onModalClose();\n }\n\n formValidate = () => {\n const { apiErrors, newIp: { emailAddress1, emailAddress2 }, termsChecked, } = this.state;\n const errors = {};\n const accountIsSelected = this.props.validateSelectedAccounts();\n\n errors.emailAddress1 = validator.emailValidator(emailAddress1);\n errors.emailAddress2 = validator.emailValidator(emailAddress2);\n errors.terms = termsChecked ? '' : this.props.text.InterestedParties.err_add_ip_terms_agree;\n\n if (emailAddress1 !== emailAddress2) {\n errors.emailAddress2 = this.props.text.InterestedParties.err_emails_must_match;\n }\n if (errors.terms) { // scroll to bottom of modal if user has not agreed to terms\n const el = document.getElementById('bottomOfModal');\n el.scrollIntoView();\n }\n if (!accountIsSelected || errors.emailAddress1 || errors.emailAddress2) { // scroll to top of modal if there are errors there\n const modalEl = document.getElementById('topOfModal');\n modalEl.scrollIntoView();\n }\n if (apiErrors.length > 0) {\n apiErrors.map(err => errors[err.Field] = err.Message);\n }\n\n\n this.setState({ errors });\n return accountIsSelected && Object.keys(errors).every(err => errors[err] === '');\n }\n\n onEmailChange = e => {\n this.setState({\n apiErrors: [],\n errors: {\n ...this.state.errors,\n [e.target.name]: ''\n },\n newIp: {\n ...this.state.newIp,\n [e.target.name]: e.target.value\n }\n });\n }\n\n preventCopy = (e) => {\n const errors = cloneDeep(this.state.errors);\n const confirmSsnInput = e.target;\n\n confirmSsnInput.onpaste = e => {\n e.preventDefault();\n errors.emailAddress2 = this.props.text.InterestedParties.err_copy_email;\n this.setState({ errors });\n };\n }\n\n render() {\n const { open, renderAccountSelection, text: { InterestedParties } } = this.props;\n const { loading, errors, newIp, showTerms, termsChecked, } = this.state;\n\n return (\n \n this.setState({ termsOpen: true })}\n >\n {PayrollContribution.btn_terms}\n \n this.setState({ termsChecked: !termsChecked })}\n color='primary'\n style={{ marginRight: 0 }}\n />\n
\n ) : (\n {parse(PayrollContribution.text_important_bank_info)}
\n )}\n\n\n {this.renderButtons()}\n
\n \n this.setState({ instructionsOpen: true })}\n >\n {PayrollContribution.btn_instructions}\n \n
\n \n\n \n this.setState({ showTerms: !showTerms })}\n variant='text'\n color='primary'\n >\n {InterestedParties.btn_add_ip_read_terms}\n \n this.setState({ errors: { ...errors, terms: '' }, termsChecked: !termsChecked })}\n />\n {errors.terms && {errors.terms} }\n
\n \n );\n }\n}\n\n\nexport default connect(select, {\n addIp,\n notificationShow,\n})(LanguageHOC(AddIp));\n","/*\n*\n* DeleteIp Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { deleteIp } from '../actions';\nimport {\n ConfirmModal,\n notificationShow,\n} from '@frontend/common';\n\n\nexport class DeleteIp extends React.Component {\n static propTypes = {\n deleteIp: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n onModalClose: PropTypes.func.isRequired,\n open: PropTypes.bool.isRequired,\n selectedIp: PropTypes.object.isRequired,\n text: PropTypes.shape({\n InterestedParties: PropTypes.shape({\n head_delete_ip: PropTypes.string,\n msg_ip_deleted: PropTypes.string,\n text_confirm_delete_ip: PropTypes.func,\n }),\n }).isRequired,\n };\n\n state = {\n loading: false,\n };\n\n closeModal = () => {\n this.setState({ loading: false });\n this.props.onModalClose();\n }\n\n deleteIp = () => {\n const { selectedIp: { interestedPartyId }, text: { InterestedParties } } = this.props;\n this.setState({ loading: true });\n\n this.props.deleteIp(interestedPartyId)\n .then(() => {\n this.closeModal();\n this.props.notificationShow(InterestedParties.msg_ip_deleted, 'success');\n })\n .catch(() => this.setState({ loading: false }));\n }\n\n render() {\n const { open, selectedIp, text: { InterestedParties } } = this.props;\n return (\n \n {InterestedParties.text_add_ip_terms()}\n
\n \n
\n {InterestedParties.text_faq_questions.map((question, idx) => (\n {InterestedParties.head_interested_parties}
\n{InterestedParties.text_learn_more()}
\n\n\n \n {errors.accountSelection}\n \n\n (\n \n \n
\n );\n }\n\n renderAddIpBtn = () => {\n return ;\n }\n\n renderInfoButtons = () => {\n const { isAgent_AccessRole, interestedParties } = this.props;\n return (\n \n this.onAccountSelect(row.accountId)}\n />\n
\n )\n },\n ]}\n rows={selectableAccounts}\n idKey='accountId'\n loading={false}\n >\n \n this.setState({ learnMoreOpen: true })}\n >\n {this.props.text.InterestedParties.btn_learn_more}\n \n {isAgent_AccessRole && interestedParties.length === 0 && this.renderAddIpBtn()}\n
\n );\n }\n\n resendIpEmail = ipId => {\n this.setState({\n loading: true,\n selectedIp: this.props.interestedParties.find(ip => ip.interestedPartyId === ipId),\n });\n\n this.props.resendIpEmail(ipId)\n .then(() => {\n this.setState({\n loading: false,\n selectedIp: this.props.interestedParties.find(ip => ip.interestedPartyId === ipId),\n successModalOpen: true,\n });\n })\n .catch(() => this.setState({ loading: false }));\n }\n\n setSelectedAccounts = () => {\n const { selectedIp } = this.state;\n const selectableAccounts = [];\n this.props.accountList.forEach(acct => {\n if (acct.status === 'Open') {\n selectableAccounts.push({\n accountId: acct.accountId,\n accountNumber: acct.accountNumber,\n beneficiaryName: acct.beneficiary.name,\n optionName: acct.option.name,\n selected: selectedIp.accountIds ? selectedIp.accountIds.includes(acct.accountId) : false,\n });\n }\n });\n\n this.setState({\n selectableAccounts,\n selectedAccounts: selectableAccounts.filter(acct => acct.selected),\n });\n }\n\n validateSelectedAccounts = () => {\n const errors = {};\n\n if (this.state.selectedAccounts.length === 0) {\n errors.accountSelection = this.props.text.InterestedParties.err_select_account;\n }\n this.setState({ errors });\n return Object.keys(errors).length === 0;\n }\n\n componentDidMount() {\n if (this.props.interestedParties.length === 0) {\n this.setState({ loading: true });\n this.props.getInterestedParties()\n .finally(() => this.setState({ loading: false }));\n }\n }\n\n componentDidUpdate() {\n const multiStatus = protectAction(this.props.claims);\n if (this.state.hasPrecondition && multiStatus === MULTIFACTOR_TYPE.AUTH) {\n this.handleIpActions(this.state.preIpId, this.state.preModalName);\n }\n }\n\n render() {\n const { interestedParties, text: { InterestedParties } } = this.props;\n const { addModalOpen, deleteModalOpen, editModalOpen, learnMoreOpen, loading, successModalOpen, selectableAccounts, selectedAccounts, selectedIp } = this.state;\n\n return (\n \n
\n :\n \n {interestedParties.length > 0 ?\n \n \n \n {this.renderInfoButtons()}\n \n :\n
\n }\n\n \n {this.renderAddIpBtn()}\n
\n {InterestedParties.head_interested_parties}
\n {this.props.interestedParties.map((ip, idx) => (\n \n
} {/* do not add divider after last account */}\n
\n ))}\n \n
\n {idx !== this.props.interestedParties.length - 1 && \n \n
\n {ip.firstName} {ip.lastName}
\n\n \n
\n {ip.emailAddress1}
\n\n \n
\n {ip.pin}
\n\n \n
\n {ip.status}
\n\n \n
\n \n {ip.accountsDetail.map((acct, idx) => idx === ip.accountsDetail.length - 1 ? `${acct.accountNumber}` : `${acct.accountNumber}, `)} {/* do not add comma and space for last account num */}\n
\n\n {ip.status !== 'Activated' && (\n this.resendIpEmail(ip.interestedPartyId)}\n title={InterestedParties.btn_resend_email}\n />\n )}\n this.handleIpActions(ip.interestedPartyId, 'editModalOpen')}\n title={InterestedParties.btn_edit_ip}\n />\n this.handleIpActions(ip.interestedPartyId, 'deleteModalOpen')}\n title={InterestedParties.btn_delete_ip}\n />\n
\n } {/* do not add divider after last account */}\n
\n
\n }\n {InterestedParties.text_setup_ip_access}
\n {this.renderInfoButtons()}\n{InterestedParties.text_success[0]}
\n{InterestedParties.text_success[1]}
\n{selectedIp.pin}
\n{InterestedParties.text_success[2]}
\n \n\n\n this.onInputChange(e, 'newEmail')}\n value={newEmail}\n />\n this.onInputChange(e, 'newEmailConfirm')}\n value={newEmailConfirm}\n />\n
\n \n );\n }\n}\n\n\nexport default connect(select, {\n changeEmail,\n clearStore,\n notificationShow,\n userLogout,\n})(LanguageHOC(ChangeEmailWhileBlocked));\n","/*\n*\n* AddMissingEmailWhileBlocked Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { camelCase } from 'lodash';\nimport { TextField } from '@mui/material';\nimport {\n Modal,\n notificationShow,\n} from '@frontend/common';\nimport { emailValidator } from 'utils/helpers/form_validation';\nimport { changeEmail } from 'components/Features/protected/MyInfo/actions';\nimport {\n clearStore,\n userLogout\n} from 'components/AppRoot/Navigation/actions';\n\nconst select = (state) => ({\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n});\n\n\nexport class AddMissingEmailWhileBlocked extends React.Component {\n\n static propTypes = {\n changeEmail: PropTypes.func.isRequired,\n clearStore: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n AddMissingEmailWhileBlocked: PropTypes.shape({\n text_missing_email1: PropTypes.string,\n text_missing_email2: PropTypes.string,\n text_missing_email3: PropTypes.string,\n }),\n EmailCard: PropTypes.shape({\n btn_cancel_change_email: PropTypes.string,\n btn_confirm_submit_email: PropTypes.string,\n btn_resend_email: PropTypes.string,\n err_different_email: PropTypes.string,\n err_emails_must_match: PropTypes.string,\n err_required: PropTypes.string,\n err_valid_email: PropTypes.string,\n head_missing_email: PropTypes.string,\n lbl_new_email: PropTypes.string,\n lbl_new_email_confirm: PropTypes.string,\n msg_check_email_to_verify: PropTypes.func,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n nav_path: PropTypes.string,\n }),\n }).isRequired,\n userLogout: PropTypes.func.isRequired,\n };\n\n state = {\n apiErrors: [],\n formErrors: [],\n isSaving: false,\n newEmail: '',\n newEmailConfirm: '',\n };\n \n emailSubmit = () => {\n const { newEmail } = this.state;\n\n if (this.formValidate()) {\n this.setState({ isSaving: true });\n this.props.changeEmail(newEmail)\n .then(() => {\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .finally(() => {\n this.props.clearStore();\n this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success');\n this.props.notificationShow(this.props.text.EmailCard.msg_check_email_to_verify(this.props.supportNumber), 'warning');\n });\n })\n .catch(response => {\n this.setState({\n apiErrors: response.payload.data,\n isSaving: false\n }, () => this.formValidate());\n });\n }\n }\n errorGet = name => {\n const error = this.state.formErrors.find(error => error.name === name);\n return error ? error.message : '';\n }\n\n formValidate = () => {\n const { apiErrors, newEmail, newEmailConfirm } = this.state;\n const { err_emails_must_match, err_required } = this.props.text.EmailCard;\n const formErrors = [];\n\n if (!newEmail) {\n formErrors.push({\n name: 'newEmail',\n message: err_required\n });\n }\n\n if (!newEmailConfirm) {\n formErrors.push({\n name: 'newEmailConfirm',\n message: err_required\n });\n }\n\n if (newEmail) {\n const emailError = emailValidator(newEmail);\n emailError && formErrors.push({\n name: 'newEmail',\n message: emailError\n });\n }\n\n if (newEmail !== newEmailConfirm) {\n formErrors.push({\n name: 'newEmailConfirm',\n message: err_emails_must_match\n });\n }\n\n if (apiErrors.length > 0) {\n apiErrors.forEach(error => {\n if (error.Field === 'Email') {\n formErrors.push({\n name: 'newEmail',\n message: error.Message\n });\n }\n else {\n formErrors.push({\n name: camelCase(error.Field),\n message: error.Message\n });\n }\n });\n }\n\n this.setState({\n apiErrors: [],\n formErrors\n });\n\n return formErrors.length === 0;\n }\n\n onInputChange = (event, name) => {\n this.setState({\n [name]: event.target.value,\n formErrors: this.state.formErrors.filter(error => error.name !== name)\n });\n }\n\n render() {\n const { AddMissingEmailWhileBlocked, EmailCard, } = this.props.text;\n const { newEmail, newEmailConfirm } = this.state;\n\n return (\n {ChangeEmailWhileBlocked.text_verify_email1}
\n{emailAddress}
\n{ChangeEmailWhileBlocked.text_verify_email2}
\n{ChangeEmailWhileBlocked.text_verify_email3}
\n\n this.onInputChange(e, 'newEmail')}\n value={newEmail}\n />\n this.onInputChange(e, 'newEmailConfirm')}\n value={newEmailConfirm}\n />\n
\n \n );\n }\n}\n\n\nexport default connect(select, {\n changeEmail,\n clearStore,\n notificationShow,\n userLogout,\n})(LanguageHOC(AddMissingEmailWhileBlocked));\n","/*\n*\n* VerifyEmail Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { \n Button,\n Paper \n} from '@mui/material';\nimport {\n Modal,\n notificationShow\n} from '@frontend/common';\nimport {\n clearStore,\n resendEmailValidation,\n userLogout\n} from 'components/AppRoot/Navigation/actions';\nimport ChangeEmailWhileBlocked from './ChangeEmailWhileBlocked';\nimport AddMissingEmailWhileBlocked from './AddMissingEmailWhileBlocked';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n emailAddress: state.session.userDetails.email,\n supportNumber: state.static.environmentVars.SupportPhoneNumber,\n});\n\n\nexport class VerifyEmail extends React.Component {\n\n static propTypes = {\n clearStore: PropTypes.func.isRequired,\n emailAddress: PropTypes.string.isRequired,\n notificationShow: PropTypes.func.isRequired,\n resendEmailValidation: PropTypes.func.isRequired,\n supportNumber: PropTypes.string.isRequired,\n text: PropTypes.shape({\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n nav_path: PropTypes.string,\n }),\n VerifyEmail: PropTypes.shape({\n btn_change_email: PropTypes.string,\n btn_resend_email: PropTypes.string,\n head_validating_email_while_logged_in: PropTypes.string,\n msg_email_resent: PropTypes.string,\n msg_validating_while_logged_in: PropTypes.string,\n text_verify_email1: PropTypes.string,\n text_verify_email2: PropTypes.func,\n text_verify_email3: PropTypes.string,\n }),\n }).isRequired,\n userLogout: PropTypes.func.isRequired,\n validatingEmailWhileLoggedIn: PropTypes.bool.isRequired,\n isEmailMissing: PropTypes.bool.isRequired,\n };\n\n state = {\n changeEmailModalOpen: false,\n isResending: false,\n validatingEmailWhileLoggedInModalOpen: false,\n };\n\n emailResend = () => {\n this.setState({ isResending: true });\n this.props.resendEmailValidation()\n .then(() => {\n this.props.notificationShow(this.props.text.VerifyEmail.msg_email_resent, 'success');\n this.setState({ isResending: false });\n })\n .catch((response) => {\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .finally(() => {\n this.setState({ isResending: false });\n this.props.clearStore();\n this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success');\n response.payload.data.forEach(error => this.props.notificationShow(error.Message, 'error'));\n });\n });\n }\n\n closeChangeEmailModal = () => {\n this.setState({ changeEmailModalOpen: false });\n }\n\n openChangeEmailModal = () => {\n this.setState({ changeEmailModalOpen: true });\n }\n\n componentDidMount() {\n if (this.props.validatingEmailWhileLoggedIn) {\n this.setState({ validatingEmailWhileLoggedInModalOpen: true });\n }\n }\n\n render() {\n const { isEmailMissing, emailAddress, supportNumber, text: { VerifyEmail } } = this.props;\n const { changeEmailModalOpen, isResending, validatingEmailWhileLoggedInModalOpen } = this.state;\n return (\n isEmailMissing ? // just display missing email modal\n {AddMissingEmailWhileBlocked.text_missing_email1}
\n{AddMissingEmailWhileBlocked.text_missing_email2}
\n{AddMissingEmailWhileBlocked.text_missing_email3}
\n\n
\n \n this.openChangeEmailModal()}\n disabled={isResending}\n >\n {VerifyEmail.btn_change_email}\n
\n
\n
\n {emailAddress}
\n\n
{VerifyEmail.text_verify_email1}
\n{VerifyEmail.text_verify_email2(supportNumber)}
\n{VerifyEmail.text_verify_email3}
\n\n this.emailResend()}\n >\n {VerifyEmail.btn_resend_email}\n \n
\n {Multifactor.msg_not_verified}
\n\n
\n {Multifactor.lbl_question}
\n {challengeQuestion}
\n \n
\n {Multifactor.msg_maintain_security}
\n{Multifactor.msg_protection}
\n\n
\n {Multifactor.lbl_ao_name}
\n {userDetails.name}
\n {Multifactor.lbl_ao_dob}
\n {dayjs(RSADOB).format('MM/DD/YYYY')}
\n {Multifactor.msg_maintain_security}
\n{Multifactor.msg_protection}
\n{Multifactor.msg_dob_select}
\n\n this.onInputChange('RSADOB', { target: { value: e || '' } })}\n openTo='year'\n value={RSADOB}\n sx={{ width: datePickerWidth }}\n />\n
\n \n {question.Text}\n \n {choices}\n \n {question.errorMessage} \n
\n );\n }\n else {\n const choices = question.Choices.map(choice => {\n return (\n {question.HelpText}
\n \n {question.Text}\n \n \n {choices}\n \n {question.errorMessage} \n \n
\n );\n }\n });\n\n return (\n {question.HelpText}
\n {Multifactor.msg_rsa_select}
\n\n\n
\n this.logOut()}\n >\n {this.props.text.Multifactor.btn_logout}\n \n
\n );\n }\n\n logOut() {\n const token = sessionStorage.getItem('token');\n const { text: { Login } } = this.props;\n this.props.userLogout({ token })\n .finally(() => this.props.notificationShow(Login.msg_you_have_logged_out, 'success'));\n this.props.clearStore();\n }\n\n componentDidMount() {\n this.checkRegisteredDevice();\n }\n\n render() {\n const { text: { Multifactor } } = this.props;\n const { hasSecurityQuestion, isRSADOB, isRSAQuestions, hasDisplayMessage } = this.state;\n\n return (\n {displayMessage}
\n\n \n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n
\n \n
\n );\n }\n}\n\nconst Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line\n return {Multifactor.verify_identity_title}
\n\n {hasSecurityQuestion && this.renderSecurityQuestion()}\n {isRSADOB && this.renderRSADOB()}\n {isRSAQuestions && this.renderRSAQandA()}\n {hasDisplayMessage && this.displayMessage()}\n\n\n
\n \n this.resetClaims()}\n >\n {Multifactor.btn_done}\n \n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n
\n \n
\n );\n }\n}\n\nexport default withRouter(connect(select, { resetClaims })(LanguageHOC(Confirmation)));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport { Button } from '@mui/material';\n\nexport class Welcome extends Component {\n\n static propTypes = {\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_get_started: PropTypes.string,\n btn_learn_more: PropTypes.string,\n msg_2FA: PropTypes.string,\n msg_2FA_explanation: PropTypes.string,\n nav_title: PropTypes.string,\n verify_identity_path: PropTypes.string,\n learn_more_url: PropTypes.string\n }),\n }).isRequired,\n };\n\n state = {\n learnMoreOpen: false,\n };\n\n render() {\n const { text: { Multifactor } } = this.props;\n return (\n {Multifactor.msg_congratulations}
\n{Multifactor.msg_successful}
\n{Multifactor.msg_later_prompt}
\n\n
\n })
\n this.props.history.push(Multifactor.verify_identity_path)}\n >\n {Multifactor.btn_get_started}\n \n window.open(Multifactor.learn_more_url, '_blank', 'noopener noreferrer')}\n >\n {Multifactor.btn_learn_more}\n
\n
\n );\n }\n}\n\nexport default withRouter(LanguageHOC(Welcome));","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Switch, withRouter, Route } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\n\nimport { Paper } from '@mui/material';\n\nimport { My529Logo } from '@frontend/common';\n\nimport Register from './Registration/Register/index';\nimport RegisterPhone from './Registration/RegisterPhone/index';\nimport RegisterAuthenticator from './Registration/RegisterAuthenticator/index';\nimport VerifyIdentity from './Registration/VerifyIdentity/index';\nimport Confirmation from './Registration/Confirmation/index';\nimport Welcome from './Registration/Welcome/index';\n\nimport styles from './styles.module.scss';\n\nexport class Multifactor extends Component {\n\n static propTypes = {\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n nav_path: PropTypes.string,\n register_path: PropTypes.string,\n authenticator_path: PropTypes.string,\n phone_path: PropTypes.string,\n preferred_path: PropTypes.string,\n preferred_response_path: PropTypes.string,\n confirmation_path: PropTypes.string,\n verify_identity_path: PropTypes.string,\n }),\n }).isRequired,\n };\n\n render() {\n const { text: { Multifactor } } = this.props;\n return (\n \n {Multifactor.msg_2FA}
\n{Multifactor.msg_2FA_explanation}
\n\n
\n \n \n
\n );\n }\n}\n\nexport default withRouter(LanguageHOC(Multifactor));","/*\n*\n* Signup Actions\n*\n*/\nimport {\n CREATE_ACCOUNT,\n DELETE_APPLICATION,\n GET_EXISTING_BENEFICIARIES,\n GET_EXISTING_BENEFICIARY,\n GET_SIGNUP_APPLICATION,\n RESET_ACCOUNT_APPLICATION,\n SAVE_ACCOUNT_OWNER,\n SAVE_BENEFICIARY,\n SAVE_CUSTOMIZED_OPTION,\n SAVE_PREDEFINED_INVESTMENT_OPTION,\n SAVE_PROMO_CODE,\n} from './constants';\n\nimport {\n GETrequest,\n POSTrequest,\n PUTrequest,\n} from 'utils/helpers/api_handler';\n\nimport { convert3DCalculatorSchemaTo2D } from '@frontend/common';\n\nexport function createAccount() {\n const payload = POSTrequest('/SimpleSignup/Account');\n return {\n type: CREATE_ACCOUNT,\n payload\n };\n}\n\nexport function deleteApplication() {\n const payload = PUTrequest('/SimpleSignup/Delete');\n return {\n type: DELETE_APPLICATION,\n payload\n };\n}\n\nexport function getExistingBeneficiaries() {\n const payload = GETrequest('/SimpleSignup/Beneficiaries');\n return {\n type: GET_EXISTING_BENEFICIARIES,\n payload\n };\n}\n\nexport function getExistingBeneficiary(beneficiaryId) {\n const payload = GETrequest(`/SimpleSignup/Beneficiary/${beneficiaryId}`);\n return {\n type: GET_EXISTING_BENEFICIARY,\n payload\n };\n}\n\nexport function getSignupApplication() {\n const payload = GETrequest('/SimpleSignup');\n return {\n type: GET_SIGNUP_APPLICATION,\n payload\n };\n}\n\nexport function resetAccountApplication() {\n return {\n type: RESET_ACCOUNT_APPLICATION,\n };\n}\n\nexport function saveAccountOwner(accountOwnerInfo) {\n const payload = accountOwnerInfo.InterestedPartyId && !accountOwnerInfo.AgentId ?\n POSTrequest('/SimpleSignup/Agent', accountOwnerInfo) // saves new AO info for interested party\n :\n PUTrequest('/SimpleSignup/Agent', accountOwnerInfo); // saves AO info for existing AO or new AO\n return {\n type: SAVE_ACCOUNT_OWNER,\n payload\n };\n}\n\nexport function saveBeneficiary(beneficiaryInfo) {\n const payload = beneficiaryInfo.BeneficiaryId ?\n POSTrequest('/SimpleSignup/Beneficiary', beneficiaryInfo) // saves a new beneficiary\n :\n PUTrequest('/SimpleSignup/Beneficiary', beneficiaryInfo); // saves an existing beneficiary\n \n return {\n type: SAVE_BENEFICIARY,\n payload\n };\n}\n\nexport function savePredefinedInvestmentOption(InvestmentOptionId) {\n const payload = PUTrequest('/SimpleSignup/OptionAllocation', { InvestmentOptionId });\n return {\n type: SAVE_PREDEFINED_INVESTMENT_OPTION,\n payload\n };\n}\n\nexport function saveCustomizedOption(matrixAllocations, template) {\n const populatedTemplate = convert3DCalculatorSchemaTo2D(matrixAllocations, template);\n const payload = POSTrequest('/SimpleSignup/OptionAllocationCustom', populatedTemplate);\n return {\n type: SAVE_CUSTOMIZED_OPTION,\n payload\n };\n}\n\nexport function savePromoCode(PromotionalCode) {\n const payload = PUTrequest('/SimpleSignup/PromoCode', { PromotionalCode });\n return {\n type: SAVE_PROMO_CODE,\n payload\n };\n}","/*\n*\n* AccountOwnerStep Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { cloneDeep } from 'lodash';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport { GETaddress } from 'utils/helpers/api_handler';\nimport * as validator from 'utils/helpers/form_validation';\nimport { saveAccountOwner } from '../actions';\nimport { getNotifications, } from 'components/AppRoot/Navigation/actions';\nimport {\n Button,\n Paper,\n Tab,\n Tabs,\n TextField,\n} from '@mui/material';\nimport {\n AddressTextFields,\n Checkbox,\n DatePicker,\n IconBtnTooltip,\n InfoIcon,\n notificationShow,\n PhoneNumberInput,\n SsnInput,\n} from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nconst errorTabStyles = {\n backgroundColor: 'rgba(255, 0, 0, 0.25)',\n color: 'rgb(255, 0, 0)',\n};\n\nconst select = (state) => ({\n accountOwnerInfo: state.signup.accountOwnerInfo,\n ADDRESS_TYPES: state.static.environmentVars.AddressTypes,\n claims: state.session.claims,\n isAgent_AccessRole: state.session.isAgent_AccessRole,\n MaximumAge: state.static.environmentVars.MaximumAge,\n MinimumAccountOwnerAge: state.static.environmentVars.MinimumAccountOwnerAge,\n usStates: state.static.usStates,\n});\n\n\nexport class AccountOwnerStep extends React.Component {\n\n static propTypes = {\n getNotifications: PropTypes.func.isRequired,\n accountOwnerInfo: PropTypes.shape({\n encryptedDataExists: PropTypes.bool,\n Mailing: PropTypes.shape({\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n City: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n }),\n OwnerBirthdate: PropTypes.string,\n OwnerFirstName: PropTypes.string,\n OwnerHomePhone: PropTypes.string,\n OwnerIsResident: PropTypes.bool,\n OwnerLastName: PropTypes.string,\n OwnerMiddleName: PropTypes.string,\n OwnerSSN1: PropTypes.string,\n OwnerSSN2: PropTypes.string,\n Physical: PropTypes.shape({\n StreetAddress1: PropTypes.string,\n StreetAddress2: PropTypes.string,\n City: PropTypes.string,\n PostalCode: PropTypes.string,\n State: PropTypes.string,\n })\n }).isRequired,\n ADDRESS_TYPES: PropTypes.shape({\n Physical: PropTypes.string,\n Mailing: PropTypes.string,\n }).isRequired,\n claims: PropTypes.object.isRequired,\n getSignupApplication: PropTypes.func.isRequired,\n isAgent_AccessRole: PropTypes.bool.isRequired,\n MaximumAge: PropTypes.number.isRequired,\n MinimumAccountOwnerAge: PropTypes.number.isRequired,\n isLoading: PropTypes.bool.isRequired,\n notificationShow: PropTypes.func.isRequired,\n onNextClick: PropTypes.func.isRequired,\n saveAccountOwner: PropTypes.func.isRequired,\n setLoadingOff: PropTypes.func.isRequired,\n setLoadingOn: PropTypes.func.isRequired,\n text: PropTypes.shape({\n AccountOwnerStep: PropTypes.shape({\n btn_continue: PropTypes.string,\n err_copy_ssn: PropTypes.string,\n err_smarty_streets: PropTypes.string,\n err_ssns_must_match: PropTypes.string,\n head_account_owner: PropTypes.string,\n lbl_birthdate: PropTypes.string,\n lbl_clear_state: PropTypes.string,\n lbl_firstName: PropTypes.string,\n lbl_homePhone: PropTypes.string,\n lbl_lastName: PropTypes.string,\n lbl_middleName: PropTypes.string,\n lbl_ssn_tin: PropTypes.string,\n lbl_ssn_tin_confirm: PropTypes.string,\n lbl_utah_tax_payer: PropTypes.string,\n msg_ao_info_saved: PropTypes.string,\n text_what_is_ao: PropTypes.array,\n }),\n AddressCard: PropTypes.object,\n }).isRequired,\n usStates: PropTypes.array.isRequired,\n }\n\n state = {\n accountOwnerInfo: this.props.accountOwnerInfo,\n addressSuggestions: [],\n addressType: this.props.ADDRESS_TYPES.Mailing,\n apiErrors: [],\n autocompleteText: {\n Mailing: this.props.accountOwnerInfo.Mailing.StreetAddress1,\n Physical: this.props.accountOwnerInfo.Physical.StreetAddress1,\n },\n editSsn: true,\n formErrors: {\n Mailing: {},\n Physical: {}\n },\n };\n\n addressTabChange = (e, value) => {\n this.setState({ addressType: value });\n };\n\n autocompleteAddressSelect = (event, selection) => {\n const { accountOwnerInfo, addressType, autocompleteText, formErrors } = this.state;\n\n if (!selection) { // if user clears input\n this.setState({\n autocompleteText: {\n ...accountOwnerInfo[addressType],\n [addressType]: '',\n },\n accountOwnerInfo: {\n ...accountOwnerInfo,\n [addressType]: {\n ...accountOwnerInfo[addressType],\n StreetAddress1: ''\n }\n },\n addressSuggestions: [],\n });\n }\n else if (!Object.prototype.hasOwnProperty.call(selection, 'street_line')) { // if user sends too many requests in a short period, autocomplete stops sending suggestions back, so just set input to state\n this.setState({\n autocompleteText: {\n ...autocompleteText,\n [addressType]: selection\n },\n accountOwnerInfo: {\n ...accountOwnerInfo,\n [addressType]: {\n ...accountOwnerInfo[addressType],\n StreetAddress1: selection,\n }\n }\n });\n }\n else { // if all is working as expected and selection is valid SmartyStreets object\n this.setState({\n autocompleteText: {\n ...autocompleteText,\n [addressType]: selection.street_line.toUpperCase()\n },\n accountOwnerInfo: {\n ...accountOwnerInfo,\n [addressType]: {\n ...accountOwnerInfo[addressType],\n City: selection.city.toUpperCase(),\n PostalCode: selection.zipcode.toUpperCase(),\n State: selection.state.toUpperCase(),\n StreetAddress1: selection.street_line.toUpperCase(),\n StreetAddress2: selection.secondary.toUpperCase()\n }\n },\n apiErrors: [],\n formErrors: {\n ...formErrors,\n [addressType]: {}\n }\n });\n }\n }\n\n autocompleteSuggestionsGet = event => {\n const { accountOwnerInfo, addressType, apiErrors, autocompleteText, formErrors } = this.state;\n\n this.setState({\n apiErrors: {\n ...apiErrors,\n [addressType]: []\n },\n autocompleteText: {\n ...autocompleteText,\n [addressType]: event.target.value\n },\n accountOwnerInfo: {\n ...accountOwnerInfo,\n [addressType]: {\n ...accountOwnerInfo[addressType],\n StreetAddress1: event.target.value\n }\n },\n formErrors: {\n ...formErrors,\n [addressType]: {\n ...formErrors[addressType],\n StreetAddress1: ''\n }\n }\n });\n\n if (event.target.value.trim()) { // Only make a request if there is text. Trims out leading spaces to avoid a Smarty Streets freakout\n return GETaddress(event.target.value)\n .then(res => {\n if (res.data.suggestions !== null) {\n this.setState({ addressSuggestions: res.data.suggestions });\n }\n })\n .catch(res => {\n if (res !== 'short-criteria') {\n this.props.notificationShow(this.props.text.AddressCard.err_smarty_streets, 'error');\n }\n this.setState({ addressSuggestions: [] });\n });\n }\n }\n\n formValidate = () => {\n const { accountOwnerInfo, apiErrors, editSsn } = this.state;\n const { ADDRESS_TYPES, MinimumAccountOwnerAge, MaximumAge, text: { AccountOwnerStep } } = this.props;\n const formErrors = { ...this.state.formErrors };\n\n // If editing, validate SSN. Encrypted SSN will not run through the validator.\n formErrors.OwnerSSN1 = editSsn ? validator.socialSecurityNumValidator(accountOwnerInfo.OwnerSSN1) : '';\n formErrors.OwnerSSN2 = editSsn ? validator.socialSecurityNumValidator(accountOwnerInfo.OwnerSSN2) : '';\n\n if (!formErrors.OwnerSSN2 && editSsn && accountOwnerInfo.OwnerSSN1 !== accountOwnerInfo.OwnerSSN2) { // checks if there is SSN2 error and gives that priority\n formErrors.OwnerSSN2 = AccountOwnerStep.err_ssns_must_match;\n }\n\n formErrors.OwnerBirthdate = validator.accountOwnerBirthdateValidator(accountOwnerInfo.OwnerBirthdate, MinimumAccountOwnerAge, MaximumAge);\n formErrors.OwnerFirstName = validator.firstNameValidator(accountOwnerInfo.OwnerFirstName);\n formErrors.OwnerLastName = validator.lastNameValidator(accountOwnerInfo.OwnerLastName);\n formErrors.OwnerHomePhone = validator.phoneNumValidator(accountOwnerInfo.OwnerHomePhone);\n formErrors.Mailing.StreetAddress1 = validator.street1Validator(accountOwnerInfo.Mailing.StreetAddress1);\n accountOwnerInfo.Mailing.StreetAddress2 && (formErrors.Mailing.StreetAddress2 = validator.street1Validator(accountOwnerInfo.Mailing.StreetAddress2));\n formErrors.Mailing.City = validator.cityValidator(accountOwnerInfo.Mailing.City);\n formErrors.Mailing.State = validator.stateValidator(accountOwnerInfo.Mailing.State);\n formErrors.Mailing.PostalCode = validator.postalCodeValidator(accountOwnerInfo.Mailing.PostalCode);\n formErrors.OwnerMiddleName = validator.middleNameValidator(accountOwnerInfo.OwnerMiddleName);\n\n if (Object.keys(accountOwnerInfo.Physical).some(field => accountOwnerInfo.Physical[field] !== '')) { // if Physical address has anything in it, validation will run\n formErrors.Physical.StreetAddress1 = validator.street1Validator(accountOwnerInfo.Physical.StreetAddress1);\n accountOwnerInfo.Physical.StreetAddress2 && (formErrors.Physical.StreetAddress2 = validator.street1Validator(accountOwnerInfo.Physical.StreetAddress2));\n formErrors.Physical.City = validator.cityValidator(accountOwnerInfo.Physical.City);\n formErrors.Physical.State = validator.stateValidator(accountOwnerInfo.Physical.State);\n formErrors.Physical.PostalCode = validator.postalCodeValidator(accountOwnerInfo.Physical.PostalCode);\n }\n else {\n formErrors.Physical.StreetAddress1 = '';\n formErrors.Physical.City = '';\n formErrors.Physical.State = '';\n formErrors.Physical.PostalCode = '';\n }\n\n if (apiErrors.length > 0) {\n apiErrors.forEach(error => {\n if (error.Field.includes(ADDRESS_TYPES.Mailing)) {\n switch (error.Field) {\n case 'OwnerMailingStreetAddress1': formErrors.Mailing.StreetAddress1 = error.Message; break;\n case 'OwnerMailingStreetAddress2': formErrors.Mailing.StreetAddress2 = error.Message; break;\n case 'OwnerMailingCity': formErrors.Mailing.City = error.Message; break;\n case 'OwnerMailingPostalCode': formErrors.Mailing.PostalCode = error.Message; break;\n case 'OwnerMailingState': formErrors.Mailing.State = error.Message; break;\n default: break;\n }\n }\n else if (error.Field.includes(ADDRESS_TYPES.Physical)) {\n switch (error.Field) {\n case 'OwnerPhysicalStreetAddress1': formErrors.Physical.StreetAddress1 = error.Message; break;\n case 'OwnerPhysicalStreetAddress2': formErrors.Physical.StreetAddress2 = error.Message; break;\n case 'OwnerPhysicalCity': formErrors.Physical.City = error.Message; break;\n case 'OwnerPhysicalPostalCode': formErrors.Physical.PostalCode = error.Message; break;\n case 'OwnerPhysicalState': formErrors.Physical.State = error.Message; break;\n default: break;\n }\n }\n else {\n formErrors[error.Field] = error.Message;\n }\n });\n }\n\n this.setState({ formErrors });\n\n const hasMailingErrors = Object.keys(formErrors.Mailing).some(mailingError => formErrors.Mailing[mailingError] !== '');\n const hasPhysicalErrors = Object.keys(formErrors.Physical).some(physicalError => formErrors.Physical[physicalError] !== '');\n const formWithoutAddresses = Object.keys(formErrors).filter(field => field !== ADDRESS_TYPES.Mailing && field !== ADDRESS_TYPES.Physical);\n const hasOtherErrors = formWithoutAddresses.some(error => formErrors[error] !== '');\n\n return !hasMailingErrors && !hasPhysicalErrors && !hasOtherErrors;\n }\n\n onFormSubmit = (e) => {\n e.preventDefault();\n const isValid = this.formValidate();\n const { accountOwnerInfo } = this.state;\n const { claims: { AgentId, InterestedPartyId }, text: { AccountOwnerStep: { msg_ao_info_saved } } } = this.props;\n\n\n if (isValid) {\n this.props.setLoadingOn();\n\n const mappedAccountOwner = {\n ...accountOwnerInfo,\n AgentId,\n InterestedPartyId,\n OwnerBirthdate: dayjs(accountOwnerInfo.OwnerBirthdate).format('L'),\n OwnerSSN1: accountOwnerInfo.encryptedDataExists && accountOwnerInfo.OwnerSSN1.length === 4 ? `xxx-xx-${accountOwnerInfo.OwnerSSN1}` : accountOwnerInfo.OwnerSSN1, // if encrypted ssn, sends back expected format, otherwise passes value\n OwnerSSN2: accountOwnerInfo.encryptedDataExists && accountOwnerInfo.OwnerSSN2.length === 4 ? `xxx-xx-${accountOwnerInfo.OwnerSSN2}` : accountOwnerInfo.OwnerSSN2, // if encrypted ssn, sends back expected format, otherwise passes value\n OwnerMailingStreetAddress1: accountOwnerInfo.Mailing.StreetAddress1,\n OwnerMailingStreetAddress2: accountOwnerInfo.Mailing.StreetAddress2,\n OwnerMailingCity: accountOwnerInfo.Mailing.City,\n OwnerMailingState: accountOwnerInfo.Mailing.State,\n OwnerMailingPostalCode: accountOwnerInfo.Mailing.PostalCode,\n OwnerPhysicalStreetAddress1: accountOwnerInfo.Physical.StreetAddress1,\n OwnerPhysicalStreetAddress2: accountOwnerInfo.Physical.StreetAddress2,\n OwnerPhysicalCity: accountOwnerInfo.Physical.City,\n OwnerPhysicalState: accountOwnerInfo.Physical.State,\n OwnerPhysicalPostalCode: accountOwnerInfo.Physical.PostalCode,\n };\n\n this.props.saveAccountOwner(mappedAccountOwner)\n .then(() => {\n this.props.notificationShow(msg_ao_info_saved, 'success');\n this.props.getNotifications(); // refreshes app notifications\n this.props.getSignupApplication()\n .then(() => {\n this.props.setLoadingOff();\n this.props.onNextClick();\n })\n .catch(() => this.props.setLoadingOff);\n })\n .catch(errors => {\n this.props.setLoadingOff();\n this.setState({\n apiErrors: errors.payload.data,\n }, () => this.formValidate());\n });\n }\n }\n\n onAddressChange = (name, e) => {\n const { addressType } = this.state;\n\n this.setState({\n accountOwnerInfo: {\n ...this.state.accountOwnerInfo,\n [addressType]: {\n ...this.state.accountOwnerInfo[addressType],\n [name]: e.target.value\n }\n },\n apiErrors: [],\n formErrors: {\n ...this.state.formErrors,\n [addressType]: {\n ...this.state.formErrors[addressType],\n [name]: ''\n }\n }\n });\n }\n\n onEditSsn = () => {\n this.setState({\n accountOwnerInfo: {\n ...this.state.accountOwnerInfo,\n OwnerSSN1: '',\n OwnerSSN2: ''\n },\n editSsn: true,\n });\n }\n\n onInputChange = (e) => {\n const { apiErrors } = this.state;\n if (apiErrors.length > 0) { // removes API error object for related input being changed\n const apiErrorsModified = [...this.state.apiErrors];\n const errorIndex = apiErrorsModified.findIndex(error => error.Field === e.target.name); // gets index of error that relates to input being changed\n apiErrorsModified.splice(errorIndex, 1);\n\n this.setState({ apiErrors: apiErrorsModified });\n }\n\n this.setState({\n accountOwnerInfo: {\n ...this.state.accountOwnerInfo,\n [e.target.name]: e.target.value\n },\n apiErrors: [],\n formErrors: {\n ...this.state.formErrors,\n [e.target.name]: ''\n }\n });\n }\n\n preventCopy = (e) => {\n const formErrors = cloneDeep(this.state.formErrors);\n const confirmSsnInput = e.target;\n\n confirmSsnInput.onpaste = e => {\n e.preventDefault();\n formErrors.OwnerSSN2 = this.props.text.AccountOwnerStep.err_copy_ssn;\n this.setState({ formErrors });\n };\n }\n\n ssnCompose = () => { // Handles encrypted SSN inputs\n const { accountOwnerInfo: { encryptedDataExists }, isAgent_AccessRole, isLoading, text: { AccountOwnerStep } } = this.props;\n const { accountOwnerInfo: { OwnerSSN1, OwnerSSN2 }, editSsn, formErrors } = this.state;\n\n if (encryptedDataExists && !editSsn) { // if the birthdate is encrypted, and user is NOT editing\n return (\n \n \n ( ( ( ( ( ( \n
\n \n
\n );\n }\n else if (!encryptedDataExists || editSsn) { // if the user does not have an encrypted SSN, or if they do but are editing\n return (\n \n
\n \n
\n\n \n this.onInputChange({ target: { name: 'OwnerSSN1', value } })}\n value={OwnerSSN1}\n variant='filled'\n />\n this.onInputChange({ target: { name: 'OwnerSSN2', value } })}\n onFocus={e => this.preventCopy(e)}\n value={OwnerSSN2}\n variant='filled'\n />\n\n
\n );\n }\n }\n\n utahTaxpayerToggle = e => {\n this.setState({\n accountOwnerInfo: {\n ...this.state.accountOwnerInfo,\n OwnerIsResident: e.target.checked,\n }\n });\n }\n\n componentDidMount() {\n if (this.props.accountOwnerInfo.encryptedDataExists) {\n this.setState({\n editSsn: false,\n });\n }\n }\n\n render() {\n const { accountOwnerInfo, addressSuggestions, addressType, autocompleteText, formErrors } = this.state;\n const { ADDRESS_TYPES, isAgent_AccessRole, isLoading, MaximumAge, MinimumAccountOwnerAge, text: { AccountOwnerStep }, usStates } = this.props;\n\n return (\n \n
\n \n {AccountOwnerStep.text_what_is_ao.map(line => {line} )}} />\n
\n \n {AccountOwnerStep.head_account_owner}
\n\n
\n );\n }\n else if (!encryptedDataExists || editSsn) { // if the user does not have an encrypted ssn, or if they do but are editing\n return (\n \n
\n \n
\n\n \n this.onInputChange({ target: { name: 'BeneficiarySSN1', value } })}\n value={BeneficiarySSN1}\n variant='filled'\n />\n this.onInputChange({ target: { name: 'BeneficiarySSN2', value } })}\n onFocus={e => this.preventCopy(e)}\n value={BeneficiarySSN2}\n variant='filled'\n />\n\n
\n );\n }\n }\n\n utahTaxpayerToggle = e => {\n this.setState({\n beneficiaryInfo: {\n ...this.state.beneficiaryInfo,\n BeneficiaryIsResident: e.target.checked,\n }\n });\n }\n\n componentDidMount() {\n const { beneficiaryInfo } = this.state;\n\n if (beneficiaryInfo.encryptedDataExists) {\n this.setState({\n editSsn: false,\n });\n }\n }\n\n render() {\n const { addressType, addressSuggestions, autocompleteText, beneficiaryInfo, existingBeneficiaryId, formErrors } = this.state;\n const { ADDRESS_TYPES, BENEFICIARY_RELATIONSHIPS, existingBenesList, isAgent_AccessRole, MaximumAge, onBackClick, text: { BeneficiaryStep }, usStates } = this.props;\n const isDisabled = this.inputIsDisabled();\n const addressIsDisabled = this.addressIsDisabled();\n\n return (\n \n
\n \n {BeneficiaryStep.text_what_is_bene.map(line => {line} )}} />\n
\n \n {BeneficiaryStep.head_beneficiary}
\n\n {/* PROMO CODE */}\n {showPromoCode && (\n
\n );\n }\n}\n\n\nexport default connect(select, {})(LanguageHOC(Summary));\n","/*\n*\n* ConfirmationStep Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n getExistingBeneficiaries,\n resetAccountApplication\n} from '../actions';\nimport { refreshClaims } from 'components/AppRoot/Navigation/actions.js';\nimport { documentsGet } from 'components/Features/protected/Documents/actions';\nimport Summary from '../Summary';\nimport {\n Button,\n Paper,\n} from '@mui/material';\nimport { IconBtnTooltip } from '@frontend/common';\nimport { signupStepper } from 'utils/ga/events';\n\nimport styles from './styles.module.scss';\n\nconst select = state => ({\n AccountNumber: state.signup.AccountNumber,\n documents: state.documents.documents,\n personId: state.session.claims.PersonId,\n PromotionalCode: state.signup.PromotionalCode,\n});\n\nconst LOCATIONS = { HOME: 'home', SIGNUP: 'signup' };\n\n\nexport class ConfirmationStep extends React.Component {\n static propTypes = {\n AccountNumber: PropTypes.number.isRequired,\n documents: PropTypes.array.isRequired,\n documentsGet: PropTypes.func.isRequired,\n getExistingBeneficiaries: PropTypes.func.isRequired,\n onStepClick: PropTypes.func.isRequired,\n personId: PropTypes.string.isRequired,\n PromotionalCode: PropTypes.string.isRequired,\n refreshClaims: PropTypes.func.isRequired,\n resetAccountApplication: PropTypes.func.isRequired,\n setLoadingOff: PropTypes.func.isRequired,\n setLoadingOn: PropTypes.func.isRequired,\n text: PropTypes.shape({\n ConfirmationStep: PropTypes.shape({\n btn_to_home: PropTypes.string,\n head_congratulations: PropTypes.string,\n text_account_created: PropTypes.string,\n text_account_number: PropTypes.string,\n text_add_another_account: PropTypes.string,\n }),\n Home: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n nextLocation: '',\n };\n\n goToLocation = () => {\n window.scrollTo(0, 0); // this will scroll to the top if user chooses to add another account\n switch (this.state.nextLocation) {\n case LOCATIONS.HOME: this.props.history.push(this.props.text.Home.nav_path); break;\n case LOCATIONS.SIGNUP: this.props.onStepClick(1); break;\n default: break;\n }\n }\n\n setLocation = nextLocation => {\n this.setState({ nextLocation }, () => this.updateAccount());\n }\n\n updateAccount = () => {\n this.props.setLoadingOn();\n\n const apiCalls = [];\n\n if (!this.props.personId) { // only runs for brand new users\n apiCalls.push(this.props.refreshClaims());\n }\n\n if (this.props.documents.length > 0) { // if docs are already in store, re-fetch them to get new account certificates. Otherwise, the new certs will be fetched when Documents is loaded for the first time\n apiCalls.push(this.props.documentsGet());\n }\n \n Promise.all(apiCalls)\n .then(() => {\n this.goToLocation(); // goes to next location if user clicked button\n })\n .catch(() => this.props.setLoadingOff());\n }\n\n componentWillUnmount() { // this will run when user leaves page either by clicking a SSup button or left nav (existing users have access to left nav).\n this.props.getExistingBeneficiaries(); // re-fetches existing beneficiaries so new account is added to existingBenesList. Needs to occur AFTER refreshing claims.\n this.props.resetAccountApplication(); // clears application so a new bene can be added right away\n this.props.setLoadingOff();\n signupStepper('finish'); // Google Analytics url for goal tracking\n }\n\n render() {\n const { AccountNumber, PromotionalCode, text: { ConfirmationStep } } = this.props;\n\n return (\n \n
\n\n {/* ACCOUNT OWNER INFORMATION */}\n \n onStepClick(2)}\n />\n )}\n
\n {Summary.head_investment_option}
\n {isEditable && (\n\n
\n {this.investmentOptionCompose()}
\n\n
\n\n {/* BENEFICIARY INFORMATION */}\n \n onStepClick(0)}\n />\n )}\n
\n {Summary.head_account_owner}
\n {isEditable && (\n\n
\n\n \n
\n \n
\n {accountOwnerInfo.OwnerMiddleName && ( // if Middlename is populated\n {Summary.lbl_firstName}
\n{accountOwnerInfo.OwnerFirstName}
\n\n
\n )}\n {Summary.lbl_middleName}
\n{accountOwnerInfo.OwnerMiddleName}
\n\n
\n {Summary.lbl_lastName}
\n{accountOwnerInfo.OwnerLastName}
\n\n
\n {Summary.lbl_birthdate}
\n{accountOwnerInfo.OwnerBirthdate}
\n\n
\n {accountOwnerInfo.OwnerHomePhone && // some existing AOs do not have a home phone, so this will show nothing instead of an empty number\n {Summary.lbl_ssn_tin}
\n{accountOwnerInfo.OwnerSSN1}
\n\n
\n }\n {Summary.lbl_homePhone}
\n({phoneNumbersOnly.slice(0, 3)}) {phoneNumbersOnly.slice(3, 6)}-{phoneNumbersOnly.slice(6)}
\n\n
\n \n
\n {accountOwnerInfo.Mailing.StreetAddress2 && ( // if StreetAddress2 is populated\n {Summary.head_mailing_address}
\n{Summary.lbl_street1}
\n{accountOwnerInfo.Mailing.StreetAddress1}
\n\n
\n )}\n {Summary.lbl_street2}
\n{accountOwnerInfo.Mailing.StreetAddress2}
\n\n
\n {accountOwnerInfo.Physical.StreetAddress1 && ( // if Physical address exists\n {Summary.lbl_city}, {Summary.lbl_state}, {Summary.lbl_postalCode}
\n{accountOwnerInfo.Mailing.City}, {accountOwnerInfo.Mailing.State} {accountOwnerInfo.Mailing.PostalCode}
\n\n
\n )}\n \n
\n {accountOwnerInfo.Physical.StreetAddress2 && ( // if StreetAddress2 is populated\n {Summary.head_physical_address}
\n{Summary.lbl_street1}
\n{accountOwnerInfo.Physical.StreetAddress1}
\n\n
\n )}\n {Summary.lbl_street2}
\n{accountOwnerInfo.Physical.StreetAddress2}
\n\n
\n {Summary.lbl_city}, {Summary.lbl_state}, {Summary.lbl_postalCode}
\n{accountOwnerInfo.Physical.City}, {accountOwnerInfo.Physical.State} {accountOwnerInfo.Physical.PostalCode}
\n\n
\n {Summary.lbl_utah_tax_payer}
\n{accountOwnerInfo.OwnerIsResident ? Summary.text_yes : Summary.text_no}
\n\n
\n \n onStepClick(1)}\n />\n )}\n
\n {Summary.head_beneficiary}
\n {isEditable && (\n\n
\n \n
\n \n
\n {beneficiaryInfo.BeneficiaryMiddleName && ( // if Middlename is populated\n {Summary.lbl_firstName}
\n{beneficiaryInfo.BeneficiaryFirstName}
\n\n
\n )}\n {Summary.lbl_middleName}
\n{beneficiaryInfo.BeneficiaryMiddleName}
\n\n
\n {Summary.lbl_lastName}
\n{beneficiaryInfo.BeneficiaryLastName}
\n\n
\n {Summary.lbl_birthdate}
\n{beneficiaryInfo.BeneficiaryBirthdate}
\n\n
\n {Summary.lbl_ssn_tin}
\n{beneficiaryInfo.BeneficiarySSN1}
\n\n
\n \n
\n {beneficiaryInfo.Mailing.StreetAddress2 && ( // if StreetAddress2 is populated\n {Summary.head_mailing_address}
\n{Summary.lbl_street1}
\n{beneficiaryInfo.Mailing.StreetAddress1}
\n\n
\n )}\n {Summary.lbl_street2}
\n{beneficiaryInfo.Mailing.StreetAddress2}
\n\n
\n {beneficiaryInfo.Physical.StreetAddress1 && ( // if Physical address exists\n {Summary.lbl_city}, {Summary.lbl_state}, {Summary.lbl_postalCode}
\n{beneficiaryInfo.Mailing.City}, {beneficiaryInfo.Mailing.State} {beneficiaryInfo.Mailing.PostalCode}
\n\n
\n )}\n \n
\n {beneficiaryInfo.Physical.StreetAddress2 && ( // if StreetAddress2 is populated\n {Summary.head_physical_address}
\n{Summary.lbl_street1}
\n{beneficiaryInfo.Physical.StreetAddress1}
\n\n
\n )}\n {Summary.lbl_street2}
\n{beneficiaryInfo.Physical.StreetAddress2}
\n\n
\n {Summary.lbl_city}, {Summary.lbl_state}, {Summary.lbl_postalCode}
\n{beneficiaryInfo.Physical.City}, {beneficiaryInfo.Physical.State} {beneficiaryInfo.Physical.PostalCode}
\n\n
\n {Summary.lbl_bene_utah_tax_payer}
\n{beneficiaryInfo.BeneficiaryIsResident ? Summary.text_yes : Summary.text_no}
\n\n
\n \n window.print()}\n />\n
\n \n
\n\n {ConfirmationStep.head_congratulations}
\n{ConfirmationStep.text_account_number}: {AccountNumber}
\n{ConfirmationStep.text_account_created}
\n\n this.setLocation(LOCATIONS.SIGNUP)}\n >\n {ConfirmationStep.text_add_another_account}\n \n this.setLocation(LOCATIONS.HOME)}\n variant='contained'\n >\n {ConfirmationStep.btn_to_home}\n \n
\n \n \n {InvestmentOptionStep.btn_cancel}\n \n \n \n {InvestmentOptionStep.btn_save}\n \n \n
\n );\n\n return (\n \n
\n \n
\n\n \n {InvestmentOptionStep.head_investment_option}
\n{InvestmentOptionStep.text_about_investment_opts}
\n\n {saveAndCloseCustomizedButtons}\n
\n - \n {InvestmentOptionStep.text_disclosures(programDescription).map((line, idx) => idx !== 7 &&
- {line} )}\n
{InvestmentOptionStep.text_disclosures(programDescription)[7]}
\n \n\n\n
\n \n
\n\n {ReviewStep.head_review}
\n {ReviewStep.text_review.map(line =>{line}
)}\n\n \n {ReviewStep.btn_back}\n \n \n {ReviewStep.btn_continue}\n \n
\n \n {parse(TermsConditionsStep.text_read_understand_agree(programDescription))}
}\n onChange={e => this.setState({ termsChecked: e.target.checked })}\n />\n\n \n\n \n window.print()}\n />\n
\n {TermsConditionsStep.head_terms}
\n {TermsConditionsStep.text_terms_intro}\n- \n {TermsConditionsStep.text_terms1.map(line =>
- {line} )}\n\n
- {line} )}\n
- {TermsConditionsStep.text_terms3(faxNumber, phoneNumber)} \n
- {TermsConditionsStep.text_terms4} \n
- \n {TermsConditionsStep.text_terms2.map(line =>
\n \n {TermsConditionsStep.btn_back}\n \n \n {TermsConditionsStep.btn_i_agree}\n \n
\n \n 
\n
\n \n
\n\n \n
\n\n {showNewWelcome ? SignupWelcome.head_welcome : SignupWelcome.head_welcome_back},
\n{showNewWelcome ? SignupWelcome.text_new_welcome : SignupWelcome.text_welcome_back}
\n\n
\n {SignupWelcome.text_steps_remaining}
\n {stepsToComplete.map((step, idx) => (\n\n {activeStep > idx ? done :
\n ))}\n {step}
\n\n closeModal()}\n variant='outlined'\n >\n {showNewWelcome ? SignupWelcome.btn_get_started : SignupWelcome.btn_continue}\n \n
\n\n \n \n
\n );\n\n if (!isAgent_AccessRole && accountOwnerInfo.encryptedDataExists && this.state.activeStep !== 5) { // user has no accounts and has saved at least AO info, and it's not the confirmation step\n return btn;\n }\n else if (isAgent_AccessRole && beneficiaryInfo.encryptedDataExists && this.state.activeStep !== 5) { // user has accounts and has saved at least bene info\n return btn;\n }\n }\n\n onBackClick = () => {\n this.setState({ activeStep: this.state.activeStep - 1 });\n window.scrollTo(0, 0);\n }\n\n onDeleteApplication = () => {\n this.setLoadingOn();\n\n this.props.deleteApplication()\n .then(() => {\n this.closeDeleteModal();\n this.props.notificationShow(this.props.text.Signup.msg_application_deleted, 'success');\n this.props.getNotifications(); // refreshes app notifications\n this.setState({\n activeStep: this.props.activeStep,\n isLoading: false,\n });\n window.scrollTo(0, 0);\n })\n .catch(() => this.setLoadingOff());\n }\n\n onNextClick = () => {\n const activeStep = this.state.activeStep + 1;\n\n this.setState({ activeStep });\n signupStepper(activeStep); // Google Analytics url for goal tracking\n window.scrollTo(0, 0);\n }\n\n onStepClick = (index) => {\n this.setState({ activeStep: index });\n }\n\n setLoadingOff = () => {\n this.setState({ isLoading: false });\n }\n\n setLoadingOn = () => {\n this.setState({ isLoading: true });\n }\n\n stepperContentGet = () => {\n const { accountOwnerInfo, beneficiaryInfo } = this.props;\n\n switch (this.state.activeStep) {\n case 0: return (\n \n {activeStep === 2 && parseInt(tabletWidth)} // Only uses alternativeLabel for desktop and tablet\n orientation={window.innerWidth < parseInt(tabletWidth) ? 'vertical' : 'horizontal'} // Vertical orientation for mobile\n >\n {steps.map((label, index) => (\n activeStep === 5 ? // On confirmation step, disables all steps from being clicklable\n \n this.onStepClick(index)}>\n {label} \n \n \n : // On any step except the last, user can click back to previous step\n \n this.onStepClick(index)}>\n {label} \n \n \n ))}\n \n \n \n\n {this.deleteApplicationButtonCompose()}\n
\n\n \n {this.stepperContentGet()}\n
\n \n
\n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n notificationShow,\n refreshClaims,\n saveBirthdate,\n userLogout,\n})(LanguageHOC(AddBirthdate)));\n","/*\n*\n* PreflightLoader Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport {\n closeTransactionLoader,\n openPreflightModal,\n transactionPreview\n} from '../actions';\n\nimport {\n Modal,\n LoadingOverlay,\n} from '@frontend/common';\nimport { Icon } from '@mui/material';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n preflightLoaderOpen: state.transactions.preflightLoaderOpen,\n previewDetails: state.transactions.previewDetails,\n preflightAccount: state.transactions.preflightAccount,\n preflightTransactionType: state.transactions.preflightTransactionType,\n});\n\nexport class PreflightLoader extends React.Component {\n static propTypes = {\n closeTransactionLoader: PropTypes.func.isRequired,\n openPreflightModal: PropTypes.func.isRequired,\n preflightAccount: PropTypes.shape({\n accountId: PropTypes.number.isRequired,\n AccountGroupId: PropTypes.number.isRequired,\n }).isRequired,\n preflightLoaderOpen: PropTypes.bool.isRequired,\n preflightTransactionType: PropTypes.string.isRequired,\n previewDetails: PropTypes.shape({\n canContinue: PropTypes.bool.isRequired,\n errors: PropTypes.arrayOf(PropTypes.string),\n }),\n transactionPreview: PropTypes.func.isRequired,\n text: PropTypes.shape({\n Transactions: PropTypes.shape({\n btn_cancel: PropTypes.string,\n nav_path: PropTypes.func,\n preflight_in_progress_message: PropTypes.string,\n preflight_title_suffix: PropTypes.func,\n transaction_title: PropTypes.func,\n })\n }).isRequired,\n };\n\n state = {\n preflightInProgress: true,\n };\n\n componentDidMount() {\n const {\n preflightAccount,\n preflightTransactionType,\n transactionPreview,\n preflightLoaderOpen,\n text,\n closeTransactionLoader,\n history\n } = this.props;\n if (preflightLoaderOpen) {\n transactionPreview(preflightAccount.accountId, preflightTransactionType)\n .then(() => {\n const { previewDetails } = this.props;\n if (previewDetails.canContinue && previewDetails.errors.length === 0) {\n // preflight success\n closeTransactionLoader();\n history.push(text.Transactions.nav_path(preflightAccount.accountId, preflightTransactionType, 'new', ':transactionId', preflightAccount.AccountGroupId));\n }\n else {\n this.setState({\n preflightInProgress: false,\n });\n }\n })\n .catch(() => {\n this.setState({\n preflightInProgress: false,\n });\n });\n }\n }\n\n render() {\n const { previewDetails, preflightLoaderOpen, closeTransactionLoader, preflightTransactionType, text } = this.props;\n const { preflightInProgress } = this.state;\n\n const preflightTitle = text.Transactions.transaction_title(preflightTransactionType);\n const preflightTitleSuffix = text.Transactions.preflight_title_suffix(preflightTransactionType);\n\n return (\n {text.AddBirthdate.head_incomplete_records}
\n{text.AddBirthdate.text_incomplete_records}
\n{agentName}
\n \n{text.AddBirthdate.text_support(supportNumber)}
\n\n {preflightInProgress && [\n \n {text.Transactions.preflight_in_progress_message}\n
,\n \n \n close \n {error}\n
\n ))}\n \n )}\n \n \n );\n }\n}\n\n\nexport default withRouter(connect(select, {\n closeTransactionLoader,\n openPreflightModal,\n transactionPreview,\n})(LanguageHOC(PreflightLoader)));\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { setRegisteredDevice } from 'utils/helpers/registered_device_handler';\n\nimport {\n Button,\n FormControlLabel,\n FormHelperText,\n Paper,\n Radio,\n RadioGroup,\n TextField,\n Checkbox\n} from '@mui/material';\n\nimport {\n My529Logo,\n LoadingOverlay,\n notificationShow,\n} from '@frontend/common';\n\nimport {\n deviceTokenCreate,\n getPreferredMethod,\n savePreferredMethod,\n getTwoFactorToken,\n twoFactorTokenVerification,\n} from '../actions';\n\nimport {\n toggle2FADialog,\n getRSAPrecondition,\n resetClaims,\n refreshClaims,\n userLogout\n} from 'components/AppRoot/Navigation/actions';\n\nimport { regMethodTypes } from '../constants';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n preferredInfo: state.multifactor.preferredInfo,\n VerificationInfo: state.multifactor.VerificationInfo,\n is2FADialogOpen: state.session.is2FADialogOpen,\n claims: state.session.claims,\n isWithdrawal: state.session.isWithdrawal,\n deviceToken: state.multifactor.deviceToken,\n ServerDateTime: state.static.environmentVars.ServerDateTime,\n TwoFADeviceCookieExpirationInDays: state.static.environmentVars.TwoFADeviceCookieExpirationInDays,\n});\n\nconst displayTypes = {\n PHONE_AUTH: 'PHONE_AUTH',\n ONE_TOUCH: 'ONE_TOUCH'\n};\n\nexport class Authentication extends Component {\n\n static propTypes = {\n deviceTokenCreate: PropTypes.func.isRequired,\n deviceToken: PropTypes.string.isRequired,\n claims: PropTypes.object.isRequired,\n getPreferredMethod: PropTypes.func.isRequired,\n savePreferredMethod: PropTypes.func.isRequired,\n getTwoFactorToken: PropTypes.func.isRequired,\n twoFactorTokenVerification: PropTypes.func.isRequired,\n notificationShow: PropTypes.func.isRequired,\n toggle2FADialog: PropTypes.func.isRequired,\n getRSAPrecondition: PropTypes.func.isRequired,\n userLogout: PropTypes.func.isRequired,\n resetClaims: PropTypes.func.isRequired,\n refreshClaims: PropTypes.func.isRequired,\n preferredInfo: PropTypes.object.isRequired,\n VerificationInfo: PropTypes.object.isRequired,\n is2FADialogOpen: PropTypes.bool.isRequired,\n isWithdrawal: PropTypes.bool.isRequired,\n ServerDateTime: PropTypes.string.isRequired,\n TwoFADeviceCookieExpirationInDays: PropTypes.number.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_call_again: PropTypes.string,\n btn_calling: PropTypes.string,\n btn_cancel: PropTypes.string,\n btn_enter_token: PropTypes.string,\n btn_request_code: PropTypes.string,\n btn_resend_code: PropTypes.string,\n btn_sec_code: PropTypes.string,\n btn_send_newpush: PropTypes.string,\n btn_sending: PropTypes.string,\n btn_submit_code: PropTypes.string,\n btn_submit_token: PropTypes.string,\n btn_use_phone: PropTypes.string,\n btn_use_token: PropTypes.string,\n err_code_required: PropTypes.string,\n err_invalid_token: PropTypes.string,\n err_token_required: PropTypes.string,\n err_options: PropTypes.string,\n lbl_call: PropTypes.string,\n lbl_remember_device: PropTypes.string,\n lbl_text: PropTypes.string,\n lbl_token: PropTypes.string,\n msg_attempts_remaining: PropTypes.string,\n msg_token_attempts_remaining: PropTypes.string,\n msg_enter_authenticator: PropTypes.string,\n msg_security_code: PropTypes.func,\n msg_send_security_code: PropTypes.func,\n msg_we_called: PropTypes.func,\n preferred_response_path: PropTypes.string,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n }),\n Home: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n isLoading: false,\n isDialogOpen: false,\n isWorking: false,\n preferredMethod: '',\n regMethod: '',\n regMethodError: '',\n attemptWarning: '',\n isRegisterDevice: false,\n\n token: '',\n hasToken: false,\n tokenError: '',\n authType: 0, // 0 = Reg/Auth, 1 = Protected Action\n };\n\n submitPhoneMethod() {\n const { text: { Multifactor } } = this.props;\n const { regMethod } = this.state;\n if (regMethod) {\n this.setState({ isLoading: true });\n this.props.getTwoFactorToken(regMethod)\n .then(() => {\n this.setState({ isLoading: false, preferredMethod: displayTypes.PHONE_AUTH });\n });\n this.setState({ preferredMethod: displayTypes.PHONE_AUTH });\n }\n else {\n this.setState({ regMethodError: Multifactor.err_options });\n }\n }\n\n renderPhoneMethod() {\n const { preferredInfo, text: { Multifactor } } = this.props;\n const { regMethod, regMethodError, authType, isLoading } = this.state;\n const lastFour = preferredInfo.PhoneNumber\n ? preferredInfo.PhoneNumber.substr(preferredInfo.PhoneNumber.length - 4, preferredInfo.PhoneNumber.length)\n : '';\n return (\n {preflightTitle}{preflightTitleSuffix}
\n {previewDetails.errors.map((error, index) => (\n \n this.submitPhoneMethod()}\n disabled={isLoading}\n >\n {Multifactor.btn_request_code}\n \n\n {preferredInfo.VerifiedAppCode &&\n this.setState({ preferredMethod: regMethodTypes.INAPPTOKEN })}\n >\n {Multifactor.btn_use_token}\n \n }\n\n authType === 0 ? this.logout() : this.props.toggle2FADialog()}\n >\n {Multifactor.btn_cancel}\n \n
\n );\n }\n\n submitPhoneCode(e) {\n e.preventDefault();\n const { token, regMethod } = this.state;\n const { text: { Multifactor } } = this.props;\n if (token) {\n this.setState({ isLoading: true, isWorking: true });\n Promise.all([\n this.props.twoFactorTokenVerification(token, regMethod),\n this.props.getPreferredMethod()\n ])\n .then(() => {\n const { VerificationInfo } = this.props;\n if (VerificationInfo.Verified) {\n const params = {\n AlwaysRequired: this.props.preferredInfo.AlwaysRequired,\n PreferredMethod: regMethod // submits selected method based on if text or phone is choosen\n };\n this.props.savePreferredMethod(params)\n .then(() => {\n this.registerDevice();\n this.props.resetClaims()\n .then(() => {\n this.displayRSAModal();\n });\n });\n }\n else {\n if (VerificationInfo.AttemptsRemaining === 0) {\n this.logout();\n }\n else if (VerificationInfo.AttemptsRemaining === 1) {\n this.setState({\n isLoading: false,\n isWorking: false,\n attemptWarning: Multifactor.msg_attempts_remaining\n });\n }\n else {\n this.setState({\n isLoading: false,\n isWorking: false,\n tokenError: Multifactor.err_invalid_token\n });\n }\n }\n })\n .catch(() => null);\n }\n else {\n this.setState({\n hasToken: true,\n tokenError: Multifactor.err_code_required\n });\n }\n }\n\n reSubmitPhoneCode() {\n const { regMethod } = this.state;\n this.setState({ isWorking: true, attemptWarning: '' });\n setTimeout(() => {\n this.setState({ isWorking: false });\n }, 5000);\n this.props.getTwoFactorToken(regMethod)\n .catch(() => null);\n }\n\n renderPhoneAuthenticate() {\n const { preferredInfo, text: { Multifactor } } = this.props;\n const {\n token, hasToken, tokenError, attemptWarning,\n regMethod, isWorking, isLoading, authType, isRegisterDevice } = this.state;\n const lastFour = preferredInfo.PhoneNumber\n ? preferredInfo.PhoneNumber.substr(preferredInfo.PhoneNumber.length - 4, preferredInfo.PhoneNumber.length)\n : '';\n const sendConfirmMsg = regMethod === regMethodTypes.CALL ? Multifactor.msg_we_called(lastFour) : Multifactor.msg_security_code(lastFour);\n const secondaryBtn = regMethod === regMethodTypes.CALL\n ? isWorking ? Multifactor.btn_calling : Multifactor.btn_call_again\n : isWorking ? Multifactor.btn_sending : Multifactor.btn_resend_code;\n return (\n {Multifactor.msg_send_security_code(lastFour)}
\n\n \n \n {regMethodError} \n
\n \n this.submitPhoneCode(e)}\n >\n {!preferredInfo.AlwaysRequired && authType === 0 &&\n \n {Multifactor.btn_submit_code}\n \n \n this.reSubmitPhoneCode()}\n disabled={isWorking}\n >\n {secondaryBtn}\n \n authType === 0 ? this.logout() : this.props.toggle2FADialog()}\n >\n {Multifactor.btn_cancel}\n \n
\n );\n }\n\n submitAuthenticator(e) {\n e.preventDefault();\n const { text: { Multifactor } } = this.props;\n const { token } = this.state;\n if (token) {\n this.setState({ isLoading: true });\n Promise.all([\n this.props.twoFactorTokenVerification(token, regMethodTypes.INAPPTOKEN),\n this.props.getPreferredMethod()\n ])\n .then(() => {\n const { VerificationInfo } = this.props;\n if (VerificationInfo.Verified) {\n const params = {\n AlwaysRequired: this.props.preferredInfo.AlwaysRequired,\n PreferredMethod: regMethodTypes.INAPPTOKEN\n };\n this.props.savePreferredMethod(params)\n .then(() => {\n this.registerDevice();\n this.props.resetClaims()\n .then(() => {\n this.displayRSAModal();\n });\n });\n }\n else {\n if (VerificationInfo.AttemptsRemaining === 0) {\n this.logout();\n }\n else if (VerificationInfo.AttemptsRemaining === 1) {\n this.setState({\n isLoading: false,\n isWorking: false,\n attemptWarning: Multifactor.msg_token_attempts_remaining\n });\n }\n else {\n this.setState({\n isLoading: false,\n isWorking: false,\n tokenError: Multifactor.err_invalid_token,\n });\n }\n }\n })\n .catch(() => null);\n }\n else {\n this.setState({\n tokenError: Multifactor.err_token_required,\n hasToken: true\n });\n }\n }\n\n renderAuthenticator() {\n const { text: { Multifactor }, preferredInfo } = this.props;\n const {\n token, hasToken, attemptWarning,\n tokenError, authType, isRegisterDevice, isLoading\n } = this.state;\n\n const isDomestic = preferredInfo.CountryCode === '+1';\n\n return (\n {Multifactor.btn_sec_code}
\n {sendConfirmMsg}\n\n this.setState({ isRegisterDevice: !isRegisterDevice })}\n name='authy-register-device'\n color='primary'\n />\n }\n label={Multifactor.lbl_remember_device}\n />\n
\n }\n \n
\n {attemptWarning}
\n \n this.submitAuthenticator(e)}\n >\n {!preferredInfo.AlwaysRequired && authType === 0 && authType === 0 &&\n \n {Multifactor.btn_submit_token}\n \n \n {preferredInfo.PhoneNumber && isDomestic && // show only for US phone numbers\n this.setState({ preferredMethod: regMethodTypes.SMS })}\n >\n {Multifactor.btn_use_phone}\n \n }\n\n authType === 0 ? this.logout() : this.props.toggle2FADialog()}\n >\n {Multifactor.btn_cancel}\n \n
\n );\n }\n\n displayRSAModal() {\n if (this.props.isWithdrawal) {\n this.props.getRSAPrecondition().catch(() => null);\n }\n }\n\n registerDevice() {\n const { ServerDateTime, TwoFADeviceCookieExpirationInDays } = this.props;\n if (this.state.isRegisterDevice) {\n this.props.deviceTokenCreate()\n .then(() => {\n setRegisteredDevice(this.props.deviceToken, ServerDateTime, TwoFADeviceCookieExpirationInDays);\n });\n }\n }\n\n logout() {\n const token = sessionStorage.getItem('token');\n this.setState({ preferredMethod: 'NADA' }, () => {\n this.props.toggle2FADialog();\n this.props.userLogout({ token });\n setTimeout(() => this.props.notificationShow(this.props.text.Login.msg_you_have_logged_out, 'success'), 500);\n });\n }\n\n handleOptions = e => {\n this.setState({ regMethod: e.target.value });\n }\n\n handleInput = name => e => {\n this.setState({ [name]: e.target.value, hasToken: false, tokenError: '' });\n }\n\n renderMethod() {\n const method = this.state.preferredMethod;\n switch (method) {\n case regMethodTypes.SMS:\n case regMethodTypes.CALL: { return this.renderPhoneMethod(); }\n case regMethodTypes.INAPPTOKEN: { return this.renderAuthenticator(); }\n case displayTypes.PHONE_AUTH: { return this.renderPhoneAuthenticate(); }\n default: break;\n }\n }\n\n componentDidMount() {\n const authType = this.props.claims.AccountBlocked === 'True' ? 0 : 1;\n if (this.props.is2FADialogOpen) {\n this.setState({ isLoading: true, authType });\n this.props.getPreferredMethod()\n .then(() => {\n const preferredMethod = this.props.preferredInfo.PreferredMethod;\n if (preferredMethod === null) {\n this.props.refreshClaims();\n }\n else {\n this.setState({ isLoading: false, preferredMethod, regMethod: preferredMethod });\n }\n });\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevState.preferredMethod !== this.state.preferredMethod) {\n this.renderMethod();\n }\n }\n\n render() {\n const { isLoading } = this.state;\n return (\n {Multifactor.msg_enter_authenticator}
\n\n this.setState({ isRegisterDevice: !isRegisterDevice })}\n name='authy-register-device'\n color='primary'\n />\n }\n label={Multifactor.lbl_remember_device}\n />\n
\n }\n \n
\n {attemptWarning}
\n \n \n \n
\n );\n }\n}\n\nexport default connect(select, {\n deviceTokenCreate,\n setRegisteredDevice,\n getPreferredMethod,\n savePreferredMethod,\n getTwoFactorToken,\n twoFactorTokenVerification,\n resetClaims,\n refreshClaims,\n userLogout,\n toggle2FADialog,\n getRSAPrecondition,\n notificationShow\n})(LanguageHOC(Authentication));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport { getRegisteredDevice } from 'utils/helpers/registered_device_handler';\n\nimport {\n Button,\n Dialog\n} from '@mui/material';\n\nimport { My529Logo } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nexport function AuthyDown({ text, isOpen, continueInPlace, logout, history }) {\n let display;\n if (history.location.pathname && history.location.pathname.includes(text.Multifactor.register_path)) { // this should include both txt/phone and authenticator now\n display = (\n \n \n \n
\n \n
\n
\n \n );\n}\n\nAuthyDown.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n continueInPlace: PropTypes.func.isRequired,\n logout: PropTypes.func.isRequired,\n history: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_learn_more: PropTypes.string,\n btn_try_again: PropTypes.string,\n msg_2FA_unavailable: PropTypes.string,\n learn_more_url: PropTypes.string,\n register_path: PropTypes.string,\n rsa_path: PropTypes.string,\n msg_2FA_down_apology: PropTypes.string,\n }),\n Navigation: PropTypes.shape({\n menu_log_out: PropTypes.string\n }),\n Home: PropTypes.shape({\n nav_path: PropTypes.string\n }),\n }).isRequired,\n};\n\nexport default withRouter(LanguageHOC(AuthyDown));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport LanguageHOC from 'utils/translations/LanguageHOC';\nimport dayjs from 'dayjs';\nimport { cloneDeep } from 'lodash';\n\nimport {\n Button,\n FormControl,\n FormGroup,\n FormControlLabel,\n FormHelperText,\n Checkbox,\n Radio,\n RadioGroup,\n} from '@mui/material';\n\nimport {\n LoadingOverlay,\n DatePicker,\n notificationShow\n} from '@frontend/common';\n\nimport {\n clearStore,\n userLogout,\n resetClaims,\n toggleRSADialog\n} from 'components/AppRoot/Navigation/actions';\n\nimport {\n getRSAStatus,\n rsaVerifyBirthday,\n getRSAQuestionSet,\n rsaAnswers\n} from '../actions';\n\nimport { My529Logo } from '@frontend/common';\n\nimport styles from './styles.module.scss';\n\nconst select = (state) => ({\n isRSALockedOut: state.multifactor.isRSALockedOut,\n isIdentityVerified: state.multifactor.isIdentityVerified,\n isDOBValid: state.multifactor.isDOBValid,\n RSADOB: state.multifactor.string,\n RSAQuestionSet: state.multifactor.RSAQuestionSet,\n userDetails: state.session.userDetails\n});\n\nexport class RSA extends React.Component {\n\n static propTypes = {\n getRSAQuestionSet: PropTypes.func.isRequired,\n getRSAStatus: PropTypes.func.isRequired,\n rsaVerifyBirthday: PropTypes.func.isRequired,\n rsaAnswers: PropTypes.func.isRequired,\n clearStore: PropTypes.func.isRequired,\n userLogout: PropTypes.func.isRequired,\n resetClaims: PropTypes.func.isRequired,\n toggleRSADialog: PropTypes.func.isRequired,\n isIdentityVerified: PropTypes.bool.isRequired,\n isDOBValid: PropTypes.bool.isRequired,\n isRSALockedOut: PropTypes.bool.isRequired,\n RSAQuestionSet: PropTypes.object.isRequired,\n notificationShow: PropTypes.func.isRequired,\n userDetails: PropTypes.object.isRequired,\n text: PropTypes.shape({\n Multifactor: PropTypes.shape({\n btn_cancel: PropTypes.string,\n btn_change_dob: PropTypes.string,\n btn_confirm_dob: PropTypes.string,\n btn_learn_more: PropTypes.string,\n btn_logout: PropTypes.string,\n btn_ok: PropTypes.string,\n btn_submit_answer: PropTypes.string,\n btn_verify_dob: PropTypes.string,\n err_incorrect_answer: PropTypes.string,\n err_required: PropTypes.string,\n register_path: PropTypes.string,\n lbl_ao_name: PropTypes.string,\n lbl_ao_dob: PropTypes.string,\n lbl_question: PropTypes.string,\n msg_discrepancy: PropTypes.string,\n msg_dob_select: PropTypes.string,\n msg_locked_out: PropTypes.string,\n msg_maintain_security: PropTypes.string,\n msg_not_verified: PropTypes.string,\n msg_protection: PropTypes.string,\n msg_rsa_select: PropTypes.string,\n msg_unable_verify: PropTypes.string,\n verify_identity_path: PropTypes.string,\n verify_identity_title: PropTypes.string,\n learn_more_url: PropTypes.string,\n }),\n Login: PropTypes.shape({\n msg_you_have_logged_out: PropTypes.string,\n }),\n Home: PropTypes.shape({\n nav_path: PropTypes.string,\n }),\n }).isRequired,\n };\n\n state = {\n isLoading: false,\n isRSADOB: true, // should render RSA DOB\n isRSAQuestions: false, // should render RSA Questions\n isUnableToVerify: false,\n\n hasRSADOBerror: false,\n hasConfirmedDOB: false, // is RSA DOB confirmed by API\n hasDisplayMessage: false,\n\n RSADOBError: '',\n RSADOB: null, // actual RSA date\n displayMessage: '',\n questionSet: {},\n regMethod: '',\n };\n\n sendRSADOB = e => {\n e.preventDefault();\n const { text: { Multifactor } } = this.props;\n const { hasConfirmedDOB, RSADOB } = this.state;\n if (!dayjs(RSADOB).isValid()) {\n this.setState({\n hasRSADOBerror: true,\n RSADOBError: Multifactor.err_required\n });\n }\n else {\n if (!hasConfirmedDOB) {\n this.setState({\n isLoading: false,\n hasSecurityQuestion: false,\n hasDisplayMessage: false,\n hasConfirmedDOB: true,\n isRSADOB: true,\n }, () => this.renderRSADOB());\n }\n else {\n const birthdate = { birthdate: dayjs(this.state.RSADOB).format('YYYY-MM-DD') };\n this.setState({ isLoading: true });\n this.props.rsaVerifyBirthday(birthdate)\n .then(() => {\n if (this.props.isRSALockedOut) { // 2 bad DOB's provided\n this.setState({ isLoading: false });\n this.props.notificationShow(Multifactor.msg_unable_verify, 'error');\n setTimeout(() => this.logOut(), 4000);\n }\n else if (this.props.isDOBValid) { // Good RSA date, get RSA questions\n this.props.getRSAQuestionSet()\n .then(() => {\n if (this.props.RSAQuestionSet.length === 0 || this.props.isRSALockedOut) { // API returns no RSA Questions\n this.setState({ isLoading: false });\n this.props.notificationShow(Multifactor.msg_unable_verify, 'error');\n setTimeout(() => this.logOut(), 4000);\n }\n else {\n this.setState({\n isLoading: false,\n isRSADOB: false,\n hasSecurityQuestion: false,\n hasDisplayMessage: false,\n isRSAQuestions: true,\n questionSet: this.props.RSAQuestionSet\n });\n }\n });\n }\n else { // RSA confirmed invalid date, display discrepancy message\n this.setState({\n isLoading: false,\n isRSADOB: false,\n hasSecurityQuestion: false,\n hasConfirmedDOB: false,\n isRSAQuestions: false,\n hasDisplayMessage: true,\n displayMessage: Multifactor.msg_discrepancy\n });\n }\n });\n }\n }\n }\n\n onInputChange = (name, e) => {\n const dob = e.target.value ? dayjs(e.target.value) : null;\n this.setState({ [name]: dob, hasRSADOBerror: false, RSADOBError: '' });\n }\n\n renderRSADOB() {\n const { userDetails, text: { Multifactor } } = this.props;\n const { hasConfirmedDOB, hasRSADOBerror, RSADOB, RSADOBError, isLoading } = this.state;\n if (hasConfirmedDOB) {\n return (\n {text.Multifactor.msg_2FA_unavailable}
\n{text.Multifactor.msg_2FA_down_apology}
\n {display}\n \n
{Multifactor.msg_maintain_security}
\n{Multifactor.msg_protection}
\n\n
\n {Multifactor.lbl_ao_name}
\n {userDetails.name}
\n {Multifactor.lbl_ao_dob}
\n {dayjs(RSADOB).format('MM/DD/YYYY')}
\n {Multifactor.msg_maintain_security}
\n{Multifactor.msg_protection}
\n{Multifactor.msg_dob_select}
\n\n this.onInputChange('RSADOB', { target: { value: e || '' } })}\n openTo='year'\n value={RSADOB}\n sx={{ width: datePickerWidth }}\n />\n
\n \n {question.Text}\n \n {choices}\n \n {question.errorMessage} \n
\n );\n }\n else {\n const choices = question.Choices.map(choice => {\n return (\n {question.HelpText}
\n \n {question.Text}\n \n \n {choices}\n \n {question.errorMessage} \n \n
\n );\n }\n });\n\n return (\n {question.HelpText}
\n {Multifactor.msg_rsa_select}
\n\n\n
\n this.logOut()}\n >\n {this.props.text.Multifactor.btn_logout}\n \n
\n );\n }\n\n logOut() {\n const { text: { Login } } = this.props;\n const token = sessionStorage.getItem('token');\n this.props.userLogout({ token })\n .finally(() => this.props.notificationShow(Login.msg_you_have_logged_out, 'success'));\n this.props.clearStore();\n }\n\n render() {\n const { text: { Multifactor } } = this.props;\n const { isRSADOB, isRSAQuestions, hasDisplayMessage } = this.state;\n\n return (\n {displayMessage}
\n\n
\n );\n }\n}\n\nexport default connect(select, {\n getRSAStatus,\n rsaVerifyBirthday,\n getRSAQuestionSet,\n rsaAnswers,\n toggleRSADialog,\n clearStore,\n userLogout,\n notificationShow,\n resetClaims\n})(LanguageHOC(RSA));","// import { store } from 'src/index'; TRANSLATIONS uncomment line to activate Spanish titles\nimport { default as English } from 'utils/translations/en.js';\n// import { default as Spanish } from 'utils/translations/es.js'; TRANSLATIONS uncomment line to activate Spanish titles\nimport { ROUTE_ACCESS } from 'components/AppRoot/Navigation/RequiredAccess.js';\n\n\nexport function getTitle(path, userAccess) {\n // const text = store.getState().session.language === 'es' ? Spanish : English; TRANSLATIONS uncomment line and remove below line to display Spanish titles\n const text = English;\n const {\n AccountDetails,\n Accounts,\n AddBirthdate,\n Payments,\n Documents,\n Home,\n ForgotPassword,\n ForgotUsername,\n Lpoa,\n Gifting,\n InterestedParties,\n InterestedPartiesActivation,\n Login,\n MyInfo,\n Multifactor,\n PayrollContribution,\n Register,\n ResendEmail,\n ResetPassword,\n Signup,\n SetupUser,\n VerifyEmail,\n PageNotFound,\n LpoaAccount,\n ValidateEmail,\n TransactionsHub,\n } = text;\n\n // Priority is placed to titles placed LOWER on this list\n const routes = [\n { matcher: Home.nav_path, title: Home.nav_title, visible: ROUTE_ACCESS.Home.includes(userAccess) },\n { matcher: ValidateEmail.nav_path, title: ValidateEmail.nav_title, visible: true },\n { matcher: AddBirthdate.nav_path, title: AddBirthdate.nav_title, visible: ROUTE_ACCESS.AddBirthdate.includes(userAccess) },\n { matcher: Accounts.nav_path, title: Accounts.nav_title, visible: ROUTE_ACCESS.Accounts.includes(userAccess) },\n { matcher: AccountDetails.nav_path_regex, title: AccountDetails.nav_title, visible: ROUTE_ACCESS.Accounts.includes(userAccess) },\n { matcher: Payments.nav_path, title: Payments.nav_title, visible: ROUTE_ACCESS.Payments.includes(userAccess) },\n { matcher: Documents.nav_path, title: Documents.nav_title, visible: ROUTE_ACCESS.Documents.includes(userAccess) },\n { matcher: ForgotPassword.nav_path, title: ForgotPassword.nav_title, visible: true },\n { matcher: ForgotUsername.nav_path, title: ForgotUsername.nav_title, visible: true },\n { matcher: InterestedPartiesActivation.nav_path, title: InterestedPartiesActivation.nav_title, visible: true },\n { matcher: InterestedParties.nav_path, title: InterestedParties.nav_title, visible: ROUTE_ACCESS.InterestedParties.includes(userAccess) },\n { matcher: Gifting.nav_path, title: Gifting.nav_title, visible: ROUTE_ACCESS.Gifting.includes(userAccess) },\n { matcher: `${Gifting.nav_path}/[0-9]`, title: Gifting.manage_title, visible: ROUTE_ACCESS.Gifting.includes(userAccess) },\n { matcher: Lpoa.nav_path, title: Lpoa.nav_title, visible: ROUTE_ACCESS.Lpoa.includes(userAccess) },\n { matcher: Login.nav_path, title: Login.nav_title, visible: true },\n { matcher: MyInfo.nav_path, title: MyInfo.nav_title, visible: ROUTE_ACCESS.MyInfo.includes(userAccess) },\n { matcher: Multifactor.nav_path, title: Multifactor.nav_title, visible: ROUTE_ACCESS.Multifactor.includes(userAccess) },\n { matcher: PayrollContribution.nav_path, title: PayrollContribution.nav_title, visible: ROUTE_ACCESS.PayrollContribution.includes(userAccess) },\n { matcher: ResendEmail.nav_path, title: ResendEmail.nav_title, visible: true },\n { matcher: Register.nav_path, title: Register.nav_title, visible: true },\n { matcher: ResetPassword.nav_path, title: ResetPassword.nav_title, visible: true },\n { matcher: Signup.nav_path, title: Signup.nav_title, visible: ROUTE_ACCESS.Signup.includes(userAccess) },\n { matcher: SetupUser.nav_path, title: SetupUser.nav_title, visible: true },\n { matcher: VerifyEmail.nav_path, title: VerifyEmail.nav_title, visible: ROUTE_ACCESS.VerifyEmail.includes(userAccess) },\n { matcher: LpoaAccount.nav_path, title: LpoaAccount.nav_title, visible: true },\n { matcher: TransactionsHub.nav_path, title: TransactionsHub.nav_title, visible: true },\n ];\n\n const matchingRoute = routes.reverse().find(route => path.match(new RegExp(route.matcher, 'i'))); // make match case insensitive\n let title = '';\n\n if (matchingRoute && matchingRoute.visible) {\n title = matchingRoute.title;\n }\n else {\n title = PageNotFound.nav_title;\n }\n\n document.title = title;\n return title;\n}","import React from 'react';\nimport { persistClientErrors } from './error_handler';\n\n\nexport class ErrorBoundary extends React.Component {\n\n state = { \n error: '',\n errorInfo: ''\n };\n\n componentDidCatch(error, errorInfo) {\n this.setState({\n error,\n errorInfo\n });\n persistClientErrors({\n name: error.name,\n message: error.message,\n stack: error.stack,\n });\n }\n \n render() {\n \n const styles = {\n position: 'fixed',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)'\n };\n \n \n if (this.state.errorInfo) {\n return (\n \n
\n \n \n \n
\n {Multifactor.verify_identity_title}
\n\n {isRSADOB && this.renderRSADOB()}\n {isRSAQuestions && this.renderRSAQandA()}\n {hasDisplayMessage && this.displayMessage()}\n\n Oops! Something didn't go as planned.\n
\n );\n }\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;","/*\n*\n* ViewInvestmentPath Component\n*\n*/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\n\nimport ViewOptionChange from 'components/Features/protected/Accounts/Transactions/OptionChanges/ViewOptionChange';\n\nimport { accountInvestmentPathGet } from 'components/Features/protected/Accounts/actions';\n\nconst select = (state) => ({\n investmentPath: state.accounts.investmentPath,\n});\n\nexport class ViewInvestmentPath extends React.Component {\n\n static propTypes = {\n accountInvestmentPathGet: PropTypes.func.isRequired,\n investmentPath: PropTypes.object,\n };\n\n state = {\n loading: true,\n }\n\n componentDidMount() {\n const {\n match,\n accountInvestmentPathGet,\n } = this.props;\n\n accountInvestmentPathGet(match.params.accountId)\n .then(() => {\n this.setState({ loading: false });\n })\n .catch(() => this.setState({ loading: false }));\n }\n\n render() {\n const { match, investmentPath } = this.props;\n const { loading } = this.state;\n return (\n \n this.continueInPlace()}\n logout={() => this.props.userLogout({ token })}\n text={text}\n history={history}\n />\n
\n );\n }\n}\n\nconst Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line\n return \n
\n\n \n {/* eslint-disable-line */}\n \n \n \n \n \n {isValid && history.location.pathname === text.Home.nav_path\n && !accountBlocked && !reasonBlocked && splashHasDisplayed && isAccountListLoaded &&\n
\n {isValid && {/* eslint-disable-line */}\n
\n