(\r\n \r\n \r\n )} />\r\n );\r\n }\r\n};","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faSync } from '@fortawesome/free-solid-svg-icons';\r\nimport T from 'i18n-react';\r\n\r\nclass LoadingButton extends React.Component {\r\n render() {\r\n return (\r\n \r\n {this.props.loading === 'true' ? {T.translate('common.loading')} {this.props.children} }\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default LoadingButton;","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport LoadingButton from './LoadingButton';\r\nimport T from 'i18n-react';\r\n\r\nclass ConfirmModal extends React.Component {\r\n\r\n render() {\r\n return (\r\n\r\n \r\n {this.props.title} \r\n\r\n \r\n
\r\n
\r\n
\r\n {this.props.children}\r\n
\r\n
\r\n
\r\n \r\n {this.props.onToggle !== undefined && {T.translate('common.close')} }\r\n {this.props.onConfirm !== undefined &&\r\n \r\n {this.props.confirmButtonText}\r\n }\r\n \r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nexport default ConfirmModal;","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';\r\n\r\n\r\nclass MessageError extends React.Component {\r\n render() {\r\n return (\r\n \r\n {this.props.children &&
\r\n
\r\n
{this.props.children}
\r\n
\r\n
}\r\n
\r\n {T.translate('quickPay.title')} \r\n\r\n {this.state.step === 1 && \r\n
\r\n
{T.translate('quickPay.accountNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('quickPay.lastName')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('quickPay.mailingAddressZipCode')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n {T.translate('quickPay.paymentType')} \r\n \r\n {this.props.systemProperties.myAcctPaymentTenderTypes.creditCard && {T.translate('quickPay.creditCard')} }\r\n {this.props.systemProperties.myAcctPaymentTenderTypes.eCheck && {T.translate('quickPay.eCheck')} }\r\n \r\n
\r\n\r\n
{this.props.quickPayErrorMessage} \r\n\r\n
\r\n {T.translate('quickPay.nextStep')}\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.quickPayAccount.accountBillingTypeID === 1 ? T.translate('quickPay.daysRemaining') : T.translate('quickPay.amountDue') }:
\r\n {this.props.showCreditBalanceOnQuickPay &&\r\n
{this.props.quickPayAccount.accountBillingTypeID === 1 ? this.props.quickPayAccount.daysRemaining : '$' + CommonStore.formatDecimal(this.props.quickPayAccount.totalAmountDue)} \r\n }\r\n {!this.props.showCreditBalanceOnQuickPay &&\r\n
{this.props.quickPayAccount.accountBillingTypeID === 1 ? this.props.quickPayAccount.daysRemaining : '$' + CommonStore.formatDecimal(this.props.quickPayAccount.totalAmountDue)} \r\n }\r\n {this.props.showCreditBalanceOnQuickPay && (this.props.quickPayAccount.totalAmountDue <= 0 && this.props.quickPayAccount.accountBalance > 0) &&\r\n
\r\n {T.translate('quickPay.creditBalance') + ' ($' + CommonStore.formatDecimal(this.props.quickPayAccount.accountBalance) + ')'} \r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.quickPayAccount.accountBillingTypeID === 1 ? T.translate('quickPay.availableBalance') : T.translate('quickPay.paymentDue') }:
\r\n
\r\n {this.props.quickPayAccount.accountBillingTypeID === 1 ? '$' + CommonStore.formatDecimal(this.props.quickPayAccount.availableBalance) : CommonStore.formatDate(this.props.quickPayAccount.paymentDueDate) }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('quickPay.payDifferentAmount')} \r\n
\r\n
{this.state.fields[3].isMinimumAmountError ? T.translate('common.thisFieldIsLessThanMinimum') : T.translate('common.thisFieldIsNotValid') }
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('quickPay.yourPaymentHasBeenAccepted')}
\r\n
{T.translate('quickPay.yourPaymentConfirmationNumberIs')}
\r\n
{this.props.quickPayConfirmationNumber}
\r\n
\r\n
\r\n
\r\n
{T.translate('common.close')} \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => ({ ...state.user, ...state.common, ...state.payment }),\r\n dispatch => bindActionCreators({ ...UserStore.actionCreators, ...CommonStore.actionCreators, ...PaymentStore.actionCreators }, dispatch)\r\n)(QuickPayModal);\r\n","import React from 'react';\r\nconst loading = require(`../../images/${process.env.REACT_APP_CLIENT}/loading.gif`);\r\n\r\nclass LoadingOverlay extends React.Component {\r\n render() {\r\n\r\n if (this.props.loading) {\r\n return (\r\n this.props.loading &&\r\n \r\n
\r\n
\r\n
{this.props.labelText} \r\n
\r\n
{this.state.type === 'input' ? T.translate('common.hidePassword') : T.translate('common.showPassword')} \r\n {this.props.showPasswordRules &&
}\r\n
{this.props.messageError}
\r\n\r\n {this.props.showPasswordRules &&
\r\n \r\n {T.translate('common.eightCharactersMinimum')} \r\n {T.translate('common.oneUppercaseCharacter')} \r\n {T.translate('common.oneNumber')} \r\n {T.translate('common.cannotContainSpecialCharacters')} \r\n \r\n }\r\n\r\n
\r\n
{T.translate('login.dontHaveAn')}{T.translate('login.onlineAccount')} \r\n
\r\n {T.translate('login.onceYouHaveRegisteredYouCan', this.props.systemProperties)}\r\n
\r\n
\r\n {T.translate('login.lookAndPayYourBills')} \r\n {T.translate('login.viewYourUsage')} \r\n {T.translate('login.manageYourNotifications')} \r\n {T.translate('login.updateYourAccountInformation')} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('login.theFastestWayToPayYourBill')}
\r\n
\r\n {T.translate('login.makePaymentWithoutEven')}\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('login.makeQuickPayment')} \r\n
\r\n
\r\n {this.props.showLogoHeaderLogin &&\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {T.translate('login.pageTitle')}\r\n
\r\n
\r\n
\r\n\r\n {this.props.commonLoading &&
\r\n
\r\n
}\r\n\r\n
{this.props.commonErrorMessage || this.props.userErrorMessage} \r\n\r\n
{T.translate('login.loginWith')} \r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('twoFactorAuthentication.pageTitle')}
\r\n
\r\n
\r\n\r\n
\r\n\r\n {this.props.accountPersons &&
\r\n {this.getTranslatedError(this.props.accountErrorMessage + this.props.userErrorMessage + this.props.commonErrorMessage)} \r\n\r\n {this.props.twoFactorAuthentication.isResend && \r\n
\r\n
\r\n
\r\n {T.translate('twoFactorAuthentication.resendConfirmation', this.props.systemProperties)}\r\n
\r\n
\r\n
{T.translate('twoFactorAuthentication.paragraph1')}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
{T.translate('twoFactorAuthentication.backToLogin')} }\r\n }\r\n\r\n {!this.props.accountPersons &&
\r\n {T.translate('common.accessDenied')} \r\n {T.translate('twoFactorAuthentication.backToLogin')} \r\n }\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('autoLogin.pageTitle')}
\r\n
\r\n\r\n
\r\n\r\n
{T.translate('autoLogin.loggingIn')}
\r\n\r\n
\r\n\r\n
{this.getMessageError()} \r\n {this.props.accountErrorMessage &&
{T.translate('forgot.backToLogin')} }\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('autoLogin.pageTitle')}
\r\n
\r\n\r\n
\r\n\r\n
{T.translate('autoLogin.loggingIn')}
\r\n\r\n
\r\n\r\n
{this.getMessageError()} \r\n {this.props.accountErrorMessage &&
{T.translate('forgot.backToLogin')} }\r\n\r\n
\r\n
{this.props.children} \r\n );\r\n }\r\n}\r\n\r\nexport default ExternalLink;","import React, { Component } from 'react';\r\nimport { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';\r\nimport LoadingButton from '../shared/LoadingButton';\r\n\r\n\r\nclass BasicModal extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n }\r\n\r\n getSize = () => {\r\n\r\n if (this.props.size) {\r\n return this.props.size;\r\n }\r\n return 'md';\r\n }\r\n\r\n isLoading = () => {\r\n if (this.props.isLoading) {\r\n return this.props.isLoading;\r\n }\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.title} \r\n {this.props.children}\r\n \r\n \r\n {this.props.btnText && this.props.onClick && {this.props.btnText} }\r\n {this.props.btnText2 && this.props.onClick2nd && {this.props.btnText2} }\r\n {this.props.btnText3 && this.props.onClick3rd && {this.props.btnText3} }\r\n {this.props.loadingBtnText && this.props.onClickLoadingBtn &&\r\n \r\n {this.props.loadingBtnText}\r\n \r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default BasicModal;\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport { NavLink } from 'react-router-dom';\r\nimport * as UserStore from '../store/User';\r\nimport * as CommonStore from '../store/Common';\r\nimport ExternalLink from './shared/ExternalLink';\r\nimport LoadingButton from './shared/LoadingButton';\r\nimport MessageError from './shared/MessageError';\r\nimport InputMask from 'react-input-mask';\r\nimport Password from './shared/PasswordInput';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faCheckCircle } from '@fortawesome/free-solid-svg-icons';\r\nimport { faFacebookF, faTwitter, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';\r\nimport validator from 'validator';\r\nimport T from 'i18n-react';\r\nimport { Tooltip } from 'reactstrap';\r\nimport BasicModal from './shared/BasicModal';\r\nimport RightSectionLogin from './shared/RightSectionLogin';\r\n\r\nconst Scroll = require('react-scroll');\r\nconst qs = require('querystringify');\r\n\r\nclass Register extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n const params = qs.parse(props.location.search);\r\n\r\n this.state = {\r\n accountNumber: params.account,\r\n zipCode: '',\r\n phone: '',\r\n email: params.email,\r\n userName: '',\r\n userNameModal: '',\r\n password: '',\r\n passwordConfirmation: '',\r\n userNameEmailAddress: '',\r\n userNameMobilePhone: '',\r\n terms: false,\r\n step: 1,\r\n useEmailAddress: true,\r\n passwordTooltipOpen: false,\r\n fields: [//don't change field order - its used to validate the form\r\n { name: 'accountNumber', isRequired: true, step: 1 },\r\n { name: 'zipCode', isRequired: true, step: 1 },\r\n { name: 'phone', isRequired: false, step: 1 },\r\n { name: 'email', isRequired: false, isEmail: true, step: 1 }, //3\r\n { name: 'userNameEmailAddress', step: 2, isEmail: true, conditionField: 'useEmailAddress', conditionValue: true },\r\n { name: 'userNameMobilePhone', step: 2, conditionField: 'useEmailAddress', conditionValue: false },\r\n { name: 'password', isRequired: true, step: 2, isPassword: true },\r\n { name: 'passwordConfirmation', isRequired: true, isCompare: true, compareField: 'password', step: 2 },\r\n { name: 'terms', isRequired: true, step: 2 } //8\r\n ],\r\n tooltipPhoneOpen: false,\r\n tooltipEmailOpen: false,\r\n displayResentActivationCodeModal: false \r\n };\r\n }\r\n\r\n componentWillMount() {\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n document.title = T.translate('common.client') + ' | ' + T.translate('register.title');\r\n\r\n this.props.clearUserState();\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (nextProps.registerConfirmation) {\r\n this.setState({ step: 3 });\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n }\r\n\r\n if (!this.props.registerUserFound && nextProps.registerUserFound && nextProps.registerPerson.personID) {\r\n\r\n let userNameMobilePhone = '';\r\n const p = nextProps.registerPerson;\r\n if (nextProps.registerPerson.personContacts) {\r\n let cell = nextProps.registerPerson.personContacts.filter(x => x.contactTypeID === 1)[0];\r\n\r\n if (cell && cell.contactValue) {\r\n userNameMobilePhone = cell.contactValue;\r\n }\r\n }\r\n\r\n this.setState({ step: 2, userNameEmailAddress: p.emailAddress, userNameMobilePhone });\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n }\r\n }\r\n\r\n toggleEmailTooltip = () => {\r\n this.setState({\r\n tooltipEmailOpen: !this.state.tooltipEmailOpen\r\n });\r\n }\r\n\r\n togglePhoneTooltip = () => {\r\n this.setState({\r\n tooltipPhoneOpen: !this.state.tooltipPhoneOpen\r\n });\r\n }\r\n\r\n toggleUseEmailAddress = (e) => {\r\n this.setState({ useEmailAddress: !this.state.useEmailAddress });\r\n }\r\n\r\n onChangeUserNameInput = (e) => {\r\n this.setState({ [e.target.name]: e.target.value.trim() });\r\n }\r\n\r\n onChange = (e) => {\r\n this.hidePasswordTooltip();\r\n\r\n let state = this.state;\r\n let fields = state.fields.filter(x => x.name === e.target.name);\r\n\r\n if (fields && fields.length === 1) {\r\n\r\n let field = fields[0];\r\n\r\n if (field.isRequired && field.isRequiredError && e.target.value) {\r\n field.isRequiredError = false;\r\n }\r\n\r\n if (!field.isRequired && field.isRequiredError && field.conditionField && e.target.value && field.conditionValue === state[field.conditionField]) {\r\n field.isRequiredError = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.isEmailError && validator.isEmail(e.target.value)) {\r\n field.isEmailError = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.isPasswordError && field.value && CommonStore.checkPasswordRules(e.target.value)) {\r\n field.isPasswordError = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.isCompareError && this.state[field.compareField] === e.target.value) {\r\n field.isCompareError = false;\r\n }\r\n }\r\n\r\n this.setState({ [e.target.name]: e.target.value.trim() });\r\n }\r\n\r\n goStep1 = () => {\r\n this.setState({ step: 1 });\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n }\r\n\r\n goStep2 = () => {\r\n if (this.isFormValid()) {\r\n this.props.getRegister(this.state);\r\n }\r\n }\r\n\r\n goStep3 = () => {\r\n if (this.isFormValid()) {\r\n this.props.register(this.state);\r\n }\r\n }\r\n\r\n isFormValid = () => {\r\n\r\n var state = this.state;\r\n var valid = true;\r\n state.passwordTooltipOpen = false;\r\n\r\n this.state.fields.map((field) => {\r\n\r\n if (field.step === state.step) {\r\n\r\n field.value = this.state[field.name];\r\n //clear errors\r\n field.isRequiredError = false;\r\n field.isEmailError = false;\r\n field.isCompareError = false;\r\n field.isPasswordError = false;\r\n\r\n if (field.isRequired && !field.value) {\r\n field.isRequiredError = true;\r\n valid = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.conditionField && !field.value && field.conditionValue === state[field.conditionField]) {\r\n field.isRequiredError = true;\r\n valid = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.isEmail && field.value && !validator.isEmail(field.value)) {\r\n field.isEmailError = true;\r\n valid = false;\r\n }\r\n\r\n if (!field.isRequiredError && field.isCompare && this.state[field.compareField] !== field.value) {\r\n field.isCompareError = true;\r\n valid = false;\r\n }\r\n\r\n if (!field.isPasswordError && field.isPassword && field.value) {\r\n field.isPasswordError = !CommonStore.checkPasswordRules(field.value);\r\n valid = valid && !field.isPasswordError;\r\n\r\n if (!valid) {\r\n state.passwordTooltipOpen = true;\r\n }\r\n }\r\n }\r\n\r\n return field;\r\n });\r\n\r\n this.setState(state);\r\n\r\n if (valid) {\r\n\r\n if (!this.state.email && !this.state.phone && this.state.step === 1) {\r\n valid = false;\r\n this.props.setError('Mobile Phone or Email Address required. Please enter at least one of the fields.');\r\n } else {\r\n this.props.setError('');\r\n }\r\n } else {\r\n this.props.setError(T.translate('common.thereAreMissingFields'));\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n showPasswordTooltip = () => {\r\n this.setState({ passwordTooltipOpen: true });\r\n }\r\n\r\n hidePasswordTooltip = () => {\r\n this.setState({ passwordTooltipOpen: false });\r\n }\r\n\r\n hideResentActivationCodeModal = (e) => {\r\n this.setState({ displayResentActivationCodeModal: false });\r\n }\r\n\r\n resentConfirmationCode = (e) => {\r\n this.props.sendVerificationCodeByUsername(this.state);\r\n }\r\n\r\n openResentCodeModal = (e) => {\r\n this.setState({ displayResentActivationCodeModal: true });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
{T.translate('register.title')}
\r\n
\r\n {!(T.translate('register.verifyAccountInformation')) &&
}\r\n {this.state.step === 1 &&
\r\n {(T.translate('register.verifyAccountInformation')) &&
\r\n {T.translate('register.verifyAccountInformation')}\r\n
}\r\n
\r\n {(T.translate('register.numberOneField')) &&
\r\n {T.translate('register.numberOneField')} }\r\n
{T.translate('register.accountNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n\r\n
\r\n {(T.translate('register.numberTwoField')) &&
\r\n {T.translate('register.numberTwoField')} }\r\n
{T.translate('register.zipCode')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n\r\n
\r\n {(T.translate('register.numberThreeField')) &&
\r\n {T.translate('register.numberThreeField')} }\r\n
{T.translate('register.mobilePhone')}\r\n {!(T.translate('register.numberThreeField')) && {T.translate('common.or')} }\r\n \r\n {(T.translate('register.onAccount')) &&
{T.translate('register.onAccount')} }\r\n
\r\n {T.translate('register.phoneOnAccount')}
\r\n \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n {(T.translate('register.numberThreeField')) &&
\r\n {T.translate('common.or')} \r\n
}\r\n
\r\n
{T.translate('register.emailAddress')} \r\n {(T.translate('register.onAccount')) &&
{T.translate('register.onAccount')} }\r\n
\r\n {T.translate('register.emailOnAccount')}
\r\n \r\n
\r\n
{this.state.fields[3].isEmailError && T.translate('common.provideValidEmail')}
\r\n
\r\n\r\n
{this.props.userErrorMessage} \r\n\r\n
\r\n\r\n
\r\n {T.translate('register.goToStep2')}\r\n \r\n\r\n \r\n
{T.translate('register.alreadyHaveUsername')}\r\n {T.translate('register.loginHere')} \r\n
\r\n\r\n
\r\n {T.translate('register.resentActivationCode')} \r\n
\r\n
\r\n
}\r\n\r\n {this.state.step === 2 &&
\r\n {(T.translate('register.createLogin')) &&
\r\n {T.translate('register.createLogin')}\r\n
}\r\n
{T.translate('register.welcomeToNewCustomerPortal')}
\r\n\r\n {this.state.useEmailAddress &&
\r\n {(T.translate('register.useEmaiOrMobileNumber')) &&
{T.translate('register.useEmaiOrMobileNumber')} }\r\n {!(T.translate('register.useEmaiOrMobileNumber')) &&
{T.translate('register.emailAddress')} }\r\n
{T.translate('register.useMobileNumber')} \r\n
\r\n {this.state.fields[4].isRequiredError &&
{T.translate('common.thisFieldIsRequired')}
}\r\n {this.state.fields[4].isEmailError &&
{T.translate('common.provideValidEmail')}
}\r\n
}\r\n\r\n {!this.state.useEmailAddress &&
}\r\n\r\n
\r\n\r\n
\r\n\r\n {false &&
\r\n
{T.translate('register.orLoginUsing')}
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n
{T.translate('register.byRegisteringYouAgree', this.props.systemProperties)} {T.translate('register.termsOfService', this.props.systemProperties)} \r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n\r\n
{this.props.userErrorMessage} \r\n\r\n
{T.translate('common.back')} \r\n\r\n
\r\n {T.translate('register.register')}\r\n \r\n\r\n {T.translate('register.alreadyHaveUsername')}{T.translate('register.loginHere')}
\r\n }\r\n\r\n {this.state.step === 3 &&
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('register.verificationEmailSent')}
\r\n
{T.translate('register.linkExpires')}
\r\n
{T.translate('register.stepCompleted')}
\r\n
\r\n
\r\n
\r\n
{T.translate('register.returnToLogin')} \r\n
}\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n Enter the username to resent the activation code: \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('register.username')} \r\n
\r\n\r\n
\r\n\r\n
\r\n {this.props.commonErrorMessage || this.props.userErrorMessageModal} \r\n
\r\n\r\n {this.props.verificationCodeConfirmation &&\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('login.verificationCodeSent')}\r\n
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('forgot.myAccount')}
\r\n
\r\n
\r\n
{T.translate('forgot.forgotYourPassword')} \r\n {!this.props.forgotPasswordConfirmation &&
\r\n
{T.translate('forgot.enterUsername')}
\r\n
\r\n {T.translate('forgot.accountNumber')} \r\n
\r\n
\r\n {T.translate('forgot.username')} \r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.props.forgotPasswordConfirmation && \r\n
\r\n
\r\n
\r\n
\r\n {T.translate('forgot.ifEmailAssociated', this.props.systemProperties)}\r\n
\r\n
\r\n
\r\n }\r\n\r\n
{this.props.userErrorMessage} \r\n\r\n {!this.props.forgotPasswordConfirmation &&\r\n
{T.translate('forgot.continue')} \r\n }\r\n\r\n
{T.translate('forgot.backToLogin')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountResetPassword.pageTitle')}
\r\n
\r\n
\r\n\r\n
\r\n\r\n {!this.props.forgotPasswordConfirmation && this.getMessageError() &&\r\n
\r\n \r\n
{this.getMessageError()}
\r\n {this.props.userSourceError === 'ExpiredToken' &&\r\n
\r\n {T.translate('accountResetPassword.newResetPasswordLink')}\r\n \r\n }\r\n \r\n }\r\n\r\n {this.props.forgotPasswordConfirmation &&\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('accountResetPassword.ifEmailAssociated', this.props.systemProperties)}\r\n
\r\n
\r\n
\r\n }\r\n\r\n {this.props.resetPwdInfo && this.props.resetPwdInfo.resetToken !== '' &&
\r\n {T.translate('accountResetPassword.resetYourPassword')} \r\n {T.translate('accountResetPassword.resetPasswordParagraph1')}
\r\n {T.translate('accountResetPassword.resetPasswordParagraph2')}
\r\n \r\n \r\n\r\n {T.translate('accountResetPassword.continue')} \r\n }\r\n\r\n
\r\n {T.translate('accountResetPassword.confirmText')}\r\n \r\n\r\n {T.translate('accountResetPassword.backToLogin')} \r\n \r\n
\r\n
\r\n
\r\n
{T.translate('verification.myAccount')}
\r\n
\r\n
\r\n
{T.translate('verification.pageTitle')} \r\n\r\n {!this.props.accountVerificationConfirmation &&
\r\n
\r\n {T.translate('verification.pageSubTitle', { customerCarePhone: this.props.systemProperties.customerServicePhone })}\r\n
\r\n
}\r\n\r\n {(this.props.accountVerificationConfirmation || this.props.verificationCodeConfirmation || this.props.accountVerified) &&\r\n
\r\n
\r\n
\r\n
\r\n {this.getMessageVerification()}\r\n
\r\n
\r\n
\r\n }\r\n\r\n
\r\n\r\n {this.props.userErrorMessage &&\r\n
\r\n \r\n
{this.getMessageError()}
\r\n {this.props.userSourceError === 'ExpiredToken' &&\r\n
\r\n {T.translate('login.sendVerificationCode')}\r\n \r\n }\r\n \r\n }\r\n\r\n
{T.translate('verification.backToLogin')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('enrollmentVerification.myAccount')}
\r\n
\r\n
\r\n
{T.translate('enrollmentVerification.pageTitle')} \r\n\r\n {this.props.verifiedEnrollment &&\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('enrollmentVerification.verificationCompleted')}\r\n
\r\n
\r\n
\r\n }\r\n\r\n
\r\n\r\n
{this.getErrorMessage()} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('usernameUpdate.pageTitle')}
\r\n
\r\n
\r\n {!this.props.accountVerificationConfirmation &&
\r\n
{T.translate('usernameUpdate.pageSubTitle')}
\r\n
{T.translate('usernameUpdate.pageSubTitle2')}
\r\n\r\n {this.state.useEmailAddress &&
\r\n
{T.translate('register.emailAddress')} \r\n
{T.translate('register.useMobileNumber')} \r\n
\r\n {this.state.fields[0].isRequiredError &&
{T.translate('common.thisFieldIsRequired')}
}\r\n {this.state.fields[0].isEmailError &&
{T.translate('common.provideValidEmail')}
}\r\n
}\r\n\r\n {!this.state.useEmailAddress &&
}\r\n\r\n
\r\n
\r\n
}\r\n\r\n {this.props.accountVerificationConfirmation &&\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('verification.verificationCompleted')}\r\n
\r\n
\r\n
\r\n }\r\n\r\n
{this.props.userErrorMessage || this.props.accountErrorMessage} \r\n\r\n {!this.props.accountVerificationConfirmation &&\r\n
{T.translate('common.submit')} \r\n }\r\n\r\n
{T.translate('verification.backToLogin')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('landing.title')}
\r\n
\r\n
\r\n
{T.translate('landing.subTitle1')} \r\n
{T.translate('landing.paragraph1')}
\r\n
{T.translate('landing.paragraph2')}
\r\n
{T.translate('landing.subTitle2')} \r\n
{T.translate('landing.paragraph3')}
\r\n
\r\n\r\n
\r\n
\r\n
{T.translate('landing.accountNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n {T.translate('landing.orOperatorLabel')} \r\n
\r\n
\r\n\r\n
\r\n
\r\n
{T.translate('landing.phoneNumber')} \r\n
\r\n {T.translate('landing.phoneOnAccount')}
\r\n \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n {T.translate('landing.orOperatorLabel')} \r\n
\r\n
\r\n\r\n
\r\n
\r\n
{T.translate('landing.emailAddress')} \r\n
\r\n {T.translate('landing.emailOnAccount')}
\r\n \r\n
\r\n
{this.state.fields[2].isEmailError && T.translate('common.provideValidEmail')}
\r\n
\r\n
\r\n {T.translate('landing.orOperatorLabel')} \r\n
\r\n
\r\n\r\n
{this.props.userErrorMessage} \r\n\r\n {this.state.accountRegistered &&
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('landing.accountAlreadyRegistered')}
\r\n
{T.translate('landing.goToLogin')} \r\n
\r\n
\r\n
\r\n
}\r\n\r\n
\r\n {T.translate('landing.continue')}\r\n \r\n \r\n
\r\n
' + T.translate('dashboard.billedUsage') + '
';\r\n } else {\r\n return T.translate('dashboard.energySpend');\r\n }\r\n\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: this.onIntervalEnergyClick\r\n }\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n yAxis: 1,\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n },\r\n {\r\n name: T.translate('dashboard.energySpend'),\r\n type: 'spline',\r\n data: [],\r\n tooltip: {\r\n valuePrefix: '$'\r\n }\r\n }\r\n ],\r\n drilldown: {\r\n series: []\r\n }\r\n },\r\n highchartsOptionDailyWithoutEnergySpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n },\r\n {\r\n id: 'unbilled-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: '#ecb67c',\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: '',\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: {\r\n title: {\r\n text: T.translate('dashboard.kWhUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.unit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n }\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',\r\n useHTML: true,\r\n labelFormatter: function () {\r\n\r\n if (this.name === T.translate('dashboard.kWhUsed')) {\r\n return '' + T.translate('dashboard.billedUsage') + '
';\r\n } else {\r\n return T.translate('dashboard.energySpend');\r\n }\r\n\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: (e) => {\r\n if (e.point && e.point.category) {\r\n this.toggleIntervalElectricity(e.point.category);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n }\r\n ],\r\n drilldown: {\r\n series: []\r\n }\r\n },\r\n highchartsOptionIntervalWithEnergySpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: '',\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: [{ // Primary yAxis\r\n title: {\r\n text: T.translate('dashboard.energySpend'),\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n },\r\n labels: {\r\n format: '${value}',\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n }\r\n }, { // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.kWhUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.unit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: true\r\n }],\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n yAxis: 1,\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n },\r\n {\r\n name: T.translate('dashboard.energySpend'),\r\n type: 'spline',\r\n data: [],\r\n tooltip: {\r\n valuePrefix: '$'\r\n }\r\n }\r\n ]\r\n },\r\n highchartsOptionIntervalWithoutEnergySpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: '',\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: { // Primary yAxis\r\n title: {\r\n text: T.translate('dashboard.kWhUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.unit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n }\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n }\r\n ]\r\n },\r\n highchartsOptionMonthlyWithEnergySpend: {\r\n credits: {\r\n enabled: false\r\n },\r\n title: '',\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: [{ // Primary yAxis\r\n title: {\r\n text: T.translate('dashboard.energySpend'),\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n },\r\n labels: {\r\n format: '${value}',\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n }\r\n }, { // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.kWhUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.unit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: true\r\n }],\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n yAxis: 1,\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n },\r\n {\r\n name: T.translate('dashboard.energySpend'),\r\n type: 'spline',\r\n data: [],\r\n tooltip: {\r\n valuePrefix: '$'\r\n }\r\n }\r\n ]\r\n },\r\n highchartsOptionMonthlyWithoutEnergySpend: {\r\n credits: {\r\n enabled: false\r\n },\r\n title: '',\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: {\r\n title: {\r\n text: T.translate('dashboard.kWhUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.unit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n }\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.kWhUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.unit')\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n if (this.props.active) {\r\n this.setChartData(this.props, true);\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setChartData(nextProps, false);\r\n }\r\n\r\n setChartData = (props, requestDataSource) => {\r\n if (this.props.active) {\r\n if (requestDataSource && props.asp.accountServicePointID) {\r\n props.onDataSourceRequest({ chartTypeID: this.state.chartEnergyTypeID, accountServicePointID: props.asp.accountServicePointID });\r\n return;\r\n }\r\n\r\n if (props.chartData) {\r\n\r\n var chartData = props.chartData;\r\n\r\n if (chartData.activityMonthlyElectricityCategories && chartData.activityMonthlyElectricitySeries && chartData.activityMonthlyElectricitySeries2) {\r\n\r\n let highchartsOptionMonthlyWithEnergySpend = { ...this.state.highchartsOptionMonthlyWithEnergySpend };\r\n\r\n highchartsOptionMonthlyWithEnergySpend.xAxis[0].categories = chartData.activityMonthlyElectricityCategories;\r\n highchartsOptionMonthlyWithEnergySpend.series[0].data = chartData.activityMonthlyElectricitySeries;\r\n highchartsOptionMonthlyWithEnergySpend.series[1].data = chartData.activityMonthlyElectricitySeries2;\r\n highchartsOptionMonthlyWithEnergySpend.scrollbar = {};\r\n highchartsOptionMonthlyWithEnergySpend.scrollbar.enabled = chartData.activityMonthlyElectricityCategories.length > 15;\r\n highchartsOptionMonthlyWithEnergySpend.xAxis[0].max = chartData.activityMonthlyElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionMonthlyWithEnergySpend });\r\n\r\n if (this.refs.highChartsMonthlyWithEnergySpend) {\r\n //reset extremes after updating values - then redraw chart\r\n this.refs.highChartsMonthlyWithEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsMonthlyWithEnergySpend.chart.redraw();\r\n }\r\n\r\n let highchartsOptionMonthlyWithoutEnergySpend = { ...this.state.highchartsOptionMonthlyWithoutEnergySpend };\r\n\r\n highchartsOptionMonthlyWithoutEnergySpend.xAxis[0].categories = chartData.activityMonthlyElectricityCategories;\r\n highchartsOptionMonthlyWithoutEnergySpend.series[0].data = chartData.activityMonthlyElectricitySeries;\r\n highchartsOptionMonthlyWithoutEnergySpend.scrollbar = {};\r\n highchartsOptionMonthlyWithoutEnergySpend.scrollbar.enabled = chartData.activityMonthlyElectricityCategories.length > 15;\r\n highchartsOptionMonthlyWithoutEnergySpend.xAxis[0].max = chartData.activityMonthlyElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionMonthlyWithoutEnergySpend });\r\n\r\n if (this.refs.highChartsMonthlyWithoutEnergySpend) {\r\n //reset extremes after updating values - then redraw chart\r\n this.refs.highChartsMonthlyWithoutEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsMonthlyWithoutEnergySpend.chart.redraw();\r\n }\r\n\r\n }\r\n\r\n if (chartData.activityDailyElectricityCategories && chartData.activityDailyElectricitySeries && chartData.activityDailyElectricitySeries2) {\r\n\r\n let highchartsOptionDailyWithoutEnergySpend = { ...this.state.highchartsOptionDailyWithoutEnergySpend };\r\n\r\n highchartsOptionDailyWithoutEnergySpend.xAxis[0].categories = chartData.activityDailyElectricityCategories;\r\n highchartsOptionDailyWithoutEnergySpend.series[0].data = chartData.activityDailyElectricitySeries;\r\n highchartsOptionDailyWithoutEnergySpend.scrollbar = {};\r\n highchartsOptionDailyWithoutEnergySpend.scrollbar.enabled = chartData.activityDailyElectricityCategories.length > 15;\r\n highchartsOptionDailyWithoutEnergySpend.xAxis[0].max = chartData.activityDailyElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionDailyWithoutEnergySpend });\r\n\r\n if (this.refs.highChartsDailyWithoutEnergySpend) {\r\n this.refs.highChartsDailyWithoutEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsDailyWithoutEnergySpend.chart.redraw();\r\n }\r\n\r\n let highchartsOptionDailyWithEnergySpend = { ...this.state.highchartsOptionDailyWithEnergySpend };\r\n\r\n highchartsOptionDailyWithEnergySpend.xAxis[0].categories = chartData.activityDailyElectricityCategories;\r\n highchartsOptionDailyWithEnergySpend.series[0].data = chartData.activityDailyElectricitySeries;\r\n highchartsOptionDailyWithEnergySpend.series[1].data = chartData.activityDailyElectricitySeries2;\r\n highchartsOptionDailyWithEnergySpend.scrollbar = {};\r\n highchartsOptionDailyWithEnergySpend.scrollbar.enabled = chartData.activityDailyElectricityCategories.length > 15;\r\n highchartsOptionDailyWithEnergySpend.xAxis[0].max = chartData.activityDailyElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionDailyWithEnergySpend });\r\n\r\n if (this.refs.highChartsDailyWithEnergySpend) {\r\n this.refs.highChartsDailyWithEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsDailyWithEnergySpend.chart.redraw();\r\n }\r\n\r\n }\r\n\r\n if (chartData.activityIntervalElectricityCategories && chartData.activityIntervalElectricitySeries && chartData.activityIntervalElectricitySeries2) {\r\n\r\n let highchartsOptionIntervalWithoutEnergySpend = { ...this.state.highchartsOptionIntervalWithoutEnergySpend };\r\n\r\n highchartsOptionIntervalWithoutEnergySpend.xAxis[0].categories = chartData.activityIntervalElectricityCategories;\r\n highchartsOptionIntervalWithoutEnergySpend.series[0].data = chartData.activityIntervalElectricitySeries;\r\n highchartsOptionIntervalWithoutEnergySpend.scrollbar = {};\r\n highchartsOptionIntervalWithoutEnergySpend.scrollbar.enabled = chartData.activityIntervalElectricityCategories.length > 15;\r\n highchartsOptionIntervalWithoutEnergySpend.xAxis[0].max = chartData.activityIntervalElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionIntervalWithoutEnergySpend });\r\n\r\n if (this.refs.highChartsIntervalWithoutEnergySpend) {\r\n this.refs.highChartsIntervalWithoutEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsIntervalWithoutEnergySpend.chart.redraw();\r\n }\r\n\r\n let highchartsOptionIntervalWithEnergySpend = { ...this.state.highchartsOptionIntervalWithEnergySpend };\r\n\r\n highchartsOptionIntervalWithEnergySpend.xAxis[0].categories = chartData.activityIntervalElectricityCategories;\r\n highchartsOptionIntervalWithEnergySpend.series[0].data = chartData.activityIntervalElectricitySeries;\r\n highchartsOptionIntervalWithEnergySpend.series[1].data = chartData.activityIntervalElectricitySeries2;\r\n highchartsOptionIntervalWithEnergySpend.scrollbar = {};\r\n highchartsOptionIntervalWithEnergySpend.scrollbar.enabled = chartData.activityIntervalElectricityCategories.length > 15;\r\n highchartsOptionIntervalWithEnergySpend.xAxis[0].max = chartData.activityIntervalElectricityCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionIntervalWithEnergySpend });\r\n\r\n if (this.refs.highChartsIntervalWithEnergySpend) {\r\n this.refs.highChartsIntervalWithEnergySpend.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highChartsIntervalWithEnergySpend.chart.redraw();\r\n }\r\n\r\n }\r\n\r\n this.setState({ chartData });\r\n\r\n this.getCalculationLegend(chartData);\r\n }\r\n }\r\n }\r\n\r\n onChartEnergyChange = (e) => {\r\n const state = this.state;\r\n state[e.target.name] = e.target.value;\r\n this.setState(state);\r\n\r\n this.props.onDataSourceRequest({ chartTypeID: this.state.chartEnergyTypeID, accountServicePointID: this.props.asp.accountServicePointID });\r\n\r\n if (this.state.chartEnergyTypeID === '1') {\r\n this.backToDailyElectricity();\r\n }\r\n\r\n this.getCalculationLegend(this.state.chartData);\r\n }\r\n\r\n onIntervalEnergyClick = (e) => {\r\n if (e.point && e.point.category) {\r\n this.toggleIntervalElectricity(e.point.category, this.props);\r\n }\r\n }\r\n\r\n backToDailyElectricity = (e) => {\r\n this.setState({ intervalElectricity: false, intervalDateElectricity: '' });\r\n }\r\n\r\n toggleIntervalElectricity = (category, props) => {\r\n this.setState({ intervalElectricity: true, intervalDateElectricity: category });\r\n props.onDataSourceRequest({ chartTypeID: '3', accountServicePointID: props.asp.accountServicePointID, date: category });\r\n }\r\n\r\n getCalculationLegend = (chartData) => {\r\n\r\n let calculationLegendText = '';\r\n let periodID = 0;\r\n let resourceKey = '';\r\n let activityStatistics = {};\r\n\r\n periodID = this.state.chartEnergyTypeID;\r\n\r\n if (periodID === '1') {\r\n activityStatistics = chartData.activityElectricityMonthlyStatistics;\r\n } else if (periodID === '2') {\r\n activityStatistics = chartData.activityElectricityDailyStatistics;\r\n }\r\n\r\n if (activityStatistics) {\r\n activityStatistics.unit = T.translate('dashboard.unit');\r\n if (activityStatistics.isUsagePresent) {\r\n\r\n if (periodID === '1') {\r\n\r\n activityStatistics.perMonth.formatedDate = CommonStore.formatDate(activityStatistics.perMonth.date, 'MMMM YYYY');\r\n resourceKey = '';\r\n\r\n if (activityStatistics.perMonth.isPreviousMonthPesent || activityStatistics.perMonth.isPreviousYearMonthPesent) {\r\n\r\n activityStatistics.perMonth.formatedPreviousMonthDate = CommonStore.formatDate(activityStatistics.perMonth.previousMonthDate, 'MMMM YYYY');\r\n\r\n var resourceKeyArr = [];\r\n\r\n if (activityStatistics.perMonth.previousMonthAmountDiff > 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2MoreThan');\r\n } else if (activityStatistics.perMonth.previousMonthAmountDiff < 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2LessThan');\r\n } else {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2Equal');\r\n }\r\n\r\n if (activityStatistics.perMonth.isPreviousYearMonthPesent) {\r\n if (activityStatistics.perMonth.previousYearMonthAmountDiff > 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3MoreThan');\r\n } else if (activityStatistics.perMonth.previousYearMonthAmountDiff < 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3LessThan');\r\n } else {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3Equal');\r\n }\r\n }\r\n\r\n let translations = resourceKeyArr.map(x => T.translate(x, activityStatistics));\r\n\r\n calculationLegendText = translations.join(' ');\r\n\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostMonthV1';\r\n calculationLegendText = T.translate(resourceKey, activityStatistics);\r\n }\r\n } else if (periodID === '2') {\r\n\r\n activityStatistics.perDay.formatedFromDate = CommonStore.formatDate(activityStatistics.perDay.startDate, 'MM/DD/YYYY');\r\n activityStatistics.perDay.formatedToDate = CommonStore.formatDate(activityStatistics.perDay.endDate, 'MM/DD/YYYY');\r\n\r\n if (activityStatistics.perDay.isPreviousWeekPesent) {\r\n\r\n if (activityStatistics.perDay.previousWeekAmountDiff > 0) {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2MoreThan';\r\n } else if (activityStatistics.perDay.previousWeekAmountDiff < 0) {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2LessThan';\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2Equal';\r\n }\r\n\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV1';\r\n }\r\n\r\n calculationLegendText = T.translate(resourceKey, activityStatistics);\r\n }\r\n }\r\n\r\n }\r\n\r\n this.setState({ calculationLegendText });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n\r\n {this.state.chartEnergyTypeID === '1' && this.props.showEnergySpend &&\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.myUsageInsights')} \r\n\r\n {!this.state.intervalElectricity &&\r\n
{this.state.calculationLegendText}
\r\n }\r\n\r\n {this.state.intervalElectricity &&\r\n
\r\n
{T.translate('dashboard.showingIntervalConsumptionFor')} {this.state.intervalDateElectricity}
\r\n
{T.translate('dashboard.backToDailyView')}
\r\n
\r\n }\r\n\r\n {this.props.showDailyAndDailyCharts && !this.state.intervalElectricity &&
\r\n {T.translate('dashboard.monthly')} \r\n {T.translate('dashboard.daily')} \r\n }\r\n
\r\n
\r\n
{T.translate('dashboard.readsReceivedWithEstimatedStatus')}
\r\n
' + T.translate('dashboard.billedUsage') + '
';\r\n } else {\r\n return T.translate('dashboard.waterSpend');\r\n }\r\n\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: this.onIntervalWaterClick\r\n }\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.galUsed'),\r\n type: 'column',\r\n yAxis: 1,\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.galUnit')\r\n }\r\n },\r\n {\r\n name: T.translate('dashboard.waterSpend'),\r\n type: 'spline',\r\n data: [],\r\n tooltip: {\r\n valuePrefix: '$'\r\n }\r\n }\r\n ],\r\n drilldown: {\r\n series: []\r\n }\r\n },\r\n highchartsOptionIntervalWithWaterSpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: {\r\n text: ''\r\n },\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: [{ // Primary yAxis\r\n title: {\r\n text: T.translate('dashboard.waterSpend'),\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n },\r\n labels: {\r\n format: '${value}',\r\n style: {\r\n color: Highcharts.getOptions().colors[1]\r\n }\r\n }\r\n }, { // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.galUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.galUnit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: true\r\n }],\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.galUsed'),\r\n type: 'column',\r\n yAxis: 1,\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.galUnit')\r\n }\r\n },\r\n {\r\n name: T.translate('dashboard.waterSpend'),\r\n type: 'spline',\r\n data: [],\r\n tooltip: {\r\n valuePrefix: '$'\r\n }\r\n }\r\n ]\r\n },\r\n highchartsOptionMonthlyWithoutWaterSpend: {\r\n credits: {\r\n enabled: false\r\n },\r\n title: {\r\n text: ''\r\n },\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: { // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.galUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.galUnit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: false\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.galUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.galUnit')\r\n }\r\n }\r\n ]\r\n },\r\n highchartsOptionDailyWithoutWaterSpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n },\r\n {\r\n id: 'unbilled-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: '#ecb67c',\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: {\r\n text: ''\r\n },\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: { // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.galUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.galUnit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: false\r\n },\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',\r\n useHTML: true,\r\n labelFormatter: function () {\r\n\r\n if (this.name === T.translate('dashboard.galUsed')) {\r\n return '' + T.translate('dashboard.billedUsage') + '
';\r\n }\r\n }\r\n },\r\n plotOptions: {\r\n column: {\r\n cursor: 'pointer',\r\n point: {\r\n events: {\r\n click: this.onIntervalWaterClick\r\n }\r\n }\r\n }\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.galUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.galUnit')\r\n }\r\n }\r\n ],\r\n drilldown: {\r\n series: []\r\n }\r\n },\r\n highchartsOptionIntervalWithoutWaterSpend: {\r\n defs: {\r\n patterns: [\r\n {\r\n id: 'billed-estimated-pattern',\r\n path: {\r\n d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',\r\n stroke: Highcharts.getOptions().colors[0],\r\n strokeWidth: 3\r\n }\r\n }\r\n ]\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: {\r\n text: ''\r\n },\r\n chart: {\r\n zoomType: 'xy',\r\n style: {\r\n fontFamily: \"sans-serif;\"\r\n }\r\n },\r\n scrollbar: {\r\n enabled: true\r\n },\r\n xAxis: [{\r\n categories: [],\r\n crosshair: true,\r\n max: null\r\n }],\r\n yAxis: [{ // Secondary yAxis\r\n title: {\r\n text: T.translate('dashboard.galUsed'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n labels: {\r\n format: '{value} ' + T.translate('dashboard.galUnit'),\r\n style: {\r\n color: Highcharts.getOptions().colors[0]\r\n }\r\n },\r\n opposite: false\r\n }],\r\n tooltip: {\r\n shared: true\r\n },\r\n legend: {\r\n layout: 'vertical',\r\n align: 'left',\r\n x: 70,\r\n verticalAlign: 'top',\r\n y: 10,\r\n floating: true,\r\n backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'\r\n },\r\n series: [\r\n {\r\n name: T.translate('dashboard.galUsed'),\r\n type: 'column',\r\n data: [],\r\n tooltip: {\r\n valueSuffix: ' ' + T.translate('dashboard.galUnit')\r\n }\r\n }\r\n ]\r\n }\r\n };\r\n }\r\n\r\n\r\n componentWillMount() {\r\n if (this.props.active) {\r\n this.setChartData(this.props, true);\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setChartData(nextProps, false);\r\n }\r\n\r\n setChartData = (props, requestDataSource) => {\r\n if (this.props.active) {\r\n if (requestDataSource && props.asp.accountServicePointID) {\r\n props.onDataSourceRequest({ chartTypeID: this.state.chartWaterTypeID, accountServicePointID: props.asp.accountServicePointID });\r\n return;\r\n }\r\n\r\n if (props.chartData) {\r\n\r\n var chartData = props.chartData;\r\n\r\n if (chartData.activityMonthlyWaterCategories && chartData.activityMonthlyWaterSeries && chartData.activityMonthlyWaterSeries2) {\r\n\r\n let highchartsOptionMonthly;\r\n chartData.cycleTerm = this.props.account.locationServices[0].cycleTerm;\r\n\r\n if (!chartData.activityHiddenWaterCharges)\r\n {\r\n highchartsOptionMonthly = { ...this.state.highchartsOptionMonthlyWithWaterSpend };\r\n highchartsOptionMonthly.series[1].data = chartData.activityMonthlyWaterSeries2;\r\n\r\n }\r\n else\r\n {\r\n highchartsOptionMonthly = { ...this.state.highchartsOptionMonthlyWithoutWaterSpend };\r\n highchartsOptionMonthly.series[0].data = chartData.activityMonthlyWaterSeries;\r\n }\r\n\r\n highchartsOptionMonthly.xAxis[0].categories = chartData.activityMonthlyWaterCategories;\r\n highchartsOptionMonthly.scrollbar = {};\r\n highchartsOptionMonthly.xAxis[0].max = chartData.activityMonthlyWaterCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionMonthly });\r\n\r\n if (this.refs.highchartsOptionMonthly) {\r\n this.refs.highchartsOptionMonthly.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highchartsOptionMonthly.chart.redraw();\r\n this.refs.highchartsOptionMonthly.chart.update({\r\n scrollbar: {\r\n enabled: chartData.activityMonthlyWaterCategories.length > 15\r\n }\r\n })\r\n }\r\n }\r\n\r\n if (chartData.activityDailyWaterCategories && chartData.activityDailyWaterSeries && chartData.activityDailyWaterSeries2) {\r\n\r\n let highchartsOptionDaily;\r\n\r\n if (!chartData.activityHiddenWaterCharges)\r\n {\r\n highchartsOptionDaily = { ...this.state.highchartsOptionDailyWithWaterSpend };\r\n highchartsOptionDaily.series[1].data = chartData.activityDailyWaterSeries2;\r\n }\r\n else\r\n {\r\n highchartsOptionDaily = { ...this.state.highchartsOptionDailyWithoutWaterSpend };\r\n }\r\n\r\n highchartsOptionDaily.xAxis[0].categories = chartData.activityDailyWaterCategories;\r\n highchartsOptionDaily.series[0].data = chartData.activityDailyWaterSeries;\r\n\r\n highchartsOptionDaily.scrollbar = {};\r\n highchartsOptionDaily.xAxis[0].max = chartData.activityDailyWaterCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionDaily });\r\n\r\n if (this.refs.highchartsOptionDaily) {\r\n this.refs.highchartsOptionDaily.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highchartsOptionDaily.chart.redraw();\r\n this.refs.highchartsOptionDaily.chart.update({\r\n scrollbar: {\r\n enabled: chartData.activityDailyWaterCategories.length > 15\r\n }\r\n })\r\n }\r\n }\r\n\r\n if (chartData.activityIntervalWaterCategories && chartData.activityIntervalWaterSeries && chartData.activityIntervalWaterSeries2) {\r\n\r\n let highchartsOptionInterval;\r\n\r\n if (!chartData.activityHiddenWaterCharges)\r\n {\r\n highchartsOptionInterval = { ...this.state.highchartsOptionIntervalWithWaterSpend };\r\n highchartsOptionInterval.series[1].data = chartData.activityIntervalWaterSeries2;\r\n }\r\n else {\r\n highchartsOptionInterval = { ...this.state.highchartsOptionIntervalWithoutWaterSpend };\r\n }\r\n\r\n highchartsOptionInterval.xAxis[0].categories = chartData.activityIntervalWaterCategories;\r\n highchartsOptionInterval.series[0].data = chartData.activityIntervalWaterSeries;\r\n highchartsOptionInterval.scrollbar = {};\r\n highchartsOptionInterval.xAxis[0].max = chartData.activityIntervalWaterCategories.length > 15 ? 13 : null;\r\n\r\n this.setState({ highchartsOptionInterval });\r\n\r\n if (this.refs.highchartsOptionInterval) {\r\n this.refs.highchartsOptionInterval.chart.xAxis[0].setExtremes(undefined, undefined, true, true);\r\n this.refs.highchartsOptionInterval.chart.redraw();\r\n this.refs.highchartsOptionInterval.chart.update({\r\n scrollbar: {\r\n enabled: chartData.activityIntervalWaterCategories.length > 15\r\n }\r\n })\r\n }\r\n }\r\n\r\n this.setState({ chartData });\r\n\r\n this.getCalculationLegend(chartData);\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n onChartWaterChange = (e) => {\r\n const state = this.state;\r\n state[e.target.name] = e.target.value;\r\n this.setState(state);\r\n\r\n this.props.onDataSourceRequest({ chartTypeID: this.state.chartWaterTypeID, accountServicePointID: this.props.asp.accountServicePointID });\r\n\r\n if (this.state.chartWaterTypeID === '1') {\r\n this.backToDailyWater();\r\n }\r\n\r\n this.getCalculationLegend(this.state.chartData);\r\n }\r\n\r\n onIntervalWaterClick = (e) => {\r\n if (e.point && e.point.category) {\r\n this.toggleIntervalWater(e.point.category, this.props);\r\n }\r\n }\r\n\r\n backToDailyWater = (e) => {\r\n this.setState({ intervalWater: false, intervalDateWater: '' });\r\n }\r\n\r\n toggleIntervalWater = (category, props) => {\r\n this.setState({ intervalWater: true, intervalDateWater: category });\r\n props.onDataSourceRequest({ chartTypeID: '3', accountServicePointID: props.asp.accountServicePointID, date: category });\r\n }\r\n \r\n getCalculationLegend = (chartData) => {\r\n\r\n let calculationLegendText = '';\r\n let periodID = 0;\r\n let resourceKey = '';\r\n let activityStatistics = {};\r\n\r\n periodID = this.state.chartWaterTypeID;\r\n \r\n if (periodID === '1') {\r\n activityStatistics = chartData.activityWaterMonthlyStatistics;\r\n } else if (periodID === '2') {\r\n activityStatistics = chartData.activityWaterDailyStatistics;\r\n }\r\n\r\n //Check if the charts are configured for cycle terms.\r\n //Set PeriodID to 3 if comfirmed to be a cycle\r\n periodID = chartData.cycleTerm > 1 ? '3' : periodID;\r\n \r\n if (activityStatistics) {\r\n activityStatistics.unit = T.translate('dashboard.galUnit');\r\n if (activityStatistics.isUsagePresent) {\r\n\r\n if (periodID === '1') {\r\n\r\n activityStatistics.perMonth.formatedDate = CommonStore.formatDate(activityStatistics.perMonth.date, 'MMMM YYYY');\r\n resourceKey = '';\r\n\r\n if (activityStatistics.perMonth.isPreviousMonthPesent || activityStatistics.perMonth.isPreviousYearMonthPesent) {\r\n\r\n activityStatistics.perMonth.formatedPreviousMonthDate = CommonStore.formatDate(activityStatistics.perMonth.previousMonthDate, 'MMMM YYYY');\r\n\r\n var resourceKeyArr = [];\r\n\r\n if (activityStatistics.perMonth.previousMonthAmountDiff > 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2MoreThan');\r\n } else if (activityStatistics.perMonth.previousMonthAmountDiff < 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2LessThan');\r\n } else {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV2Equal');\r\n }\r\n\r\n if (activityStatistics.perMonth.isPreviousYearMonthPesent) {\r\n if (activityStatistics.perMonth.previousYearMonthAmountDiff > 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3MoreThan');\r\n } else if (activityStatistics.perMonth.previousYearMonthAmountDiff < 0) {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3LessThan');\r\n } else {\r\n resourceKeyArr.push('dashboard.yourAvgDailyCostMonthV3Equal');\r\n }\r\n }\r\n\r\n let translations = resourceKeyArr.map(x => T.translate(x, activityStatistics));\r\n\r\n calculationLegendText = translations.join(' ');\r\n\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostMonthV1';\r\n calculationLegendText = T.translate(resourceKey, activityStatistics);\r\n }\r\n } else if (periodID === '2') {\r\n\r\n activityStatistics.perDay.formatedFromDate = CommonStore.formatDate(activityStatistics.perDay.startDate, 'MM/DD/YYYY');\r\n activityStatistics.perDay.formatedToDate = CommonStore.formatDate(activityStatistics.perDay.endDate, 'MM/DD/YYYY');\r\n\r\n if (activityStatistics.perDay.isPreviousWeekPesent) {\r\n\r\n if (activityStatistics.perDay.previousWeekAmountDiff > 0) {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2MoreThan';\r\n } else if (activityStatistics.perDay.previousWeekAmountDiff < 0) {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2LessThan';\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV2Equal';\r\n }\r\n\r\n } else {\r\n resourceKey = 'dashboard.yourAvgDailyCostWeekV1';\r\n }\r\n\r\n calculationLegendText = T.translate(resourceKey, activityStatistics);\r\n }\r\n else if (periodID === '3') {\r\n resourceKey = 'dashboard.yourUsageCycleTerm';\r\n\r\n var cycleTerm;\r\n\r\n if (chartData.cycleTerm === 1) {\r\n cycleTerm = T.translate('dashboard.cycleTerm1Month')\r\n }\r\n else if (chartData.cycleTerm === 2) {\r\n cycleTerm = T.translate('dashboard.cycleTerm2Month')\r\n }\r\n else if (chartData.cycleTerm === 3) {\r\n cycleTerm = T.translate('dashboard.cycleTerm3Month')\r\n }\r\n else if (chartData.cycleTerm === 4) {\r\n cycleTerm = T.translate('dashboard.cycleTerm4Month')\r\n }\r\n else if (chartData.cycleTerm === 6) {\r\n cycleTerm = T.translate('dashboard.cycleTerm6Month')\r\n }\r\n else if (chartData.cycleTerm === 12) {\r\n cycleTerm = T.translate('dashboard.cycleTerm12Month')\r\n }\r\n else {\r\n cycleTerm = T.translate('dashboard.cycleTerm1Month')\r\n }\r\n \r\n calculationLegendText = T.translate(resourceKey, { cycleTerm: cycleTerm });\r\n }\r\n }\r\n\r\n }\r\n\r\n this.setState({ calculationLegendText });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n\r\n {this.state.chartWaterTypeID === '1' &&\r\n
\r\n
\r\n
\r\n {!this.props.asp.serviceTypeID &&
}\r\n {this.props.asp.serviceTypeID &&\r\n
\r\n \r\n {this.props.asp.linkedServiceTypeID === -1 && T.translate('dashboard.serviceType' + this.props.asp.serviceTypeID)}\r\n {this.props.asp.linkedServiceTypeID > 0 && T.translate('dashboard.serviceType' + this.props.asp.serviceTypeID) + ' & ' + T.translate('dashboard.serviceType' + this.props.asp.linkedServiceTypeID)}\r\n
\r\n \r\n }\r\n
\r\n\r\n
{T.translate('dashboard.myUsageInsights')} \r\n\r\n {!this.state.intervalWater &&\r\n
{this.state.calculationLegendText}
\r\n }\r\n\r\n {this.state.intervalWater &&\r\n
\r\n
{T.translate('dashboard.showingIntervalConsumptionFor')} {this.state.intervalDateWater}
\r\n
{T.translate('dashboard.backToDailyView')}
\r\n
\r\n }\r\n \r\n {this.props.showDailyAndDailyCharts && !this.state.intervalWater && this.props.systemProperties.billDocumentGenerationChartSetting && (\r\n
\r\n {this.props.account.locationServices.map((service, index) => (\r\n \r\n {\r\n service.cycleTerm === 1 ? T.translate('dashboard.cycleTerm1Month') :\r\n service.cycleTerm === 2 ? T.translate('dashboard.cycleTerm2Month') :\r\n service.cycleTerm === 3 ? T.translate('dashboard.cycleTerm3Month') :\r\n service.cycleTerm === 4 ? T.translate('dashboard.cycleTerm4Month') :\r\n service.cycleTerm === 6 ? T.translate('dashboard.cycleTerm6Month') :\r\n service.cycleTerm === 12 ? T.translate('dashboard.cycleTerm12Month') :\r\n T.translate('dashboard.cycleTerm1Month') }\r\n \r\n ))}\r\n 0 ? this.props.account.locationServices.length + 1 : 1}>\r\n {T.translate('dashboard.daily')}\r\n \r\n \r\n )}\r\n\r\n {this.props.showDailyAndDailyCharts && !this.state.intervalWater && !this.props.systemProperties.billDocumentGenerationChartSetting && (\r\n \r\n {T.translate('dashboard.monthly')} \r\n {T.translate('dashboard.daily')} \r\n \r\n )}\r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('dashboard.pageTitle')}
\r\n
{T.translate('dashboard.accountNumber')}: {this.props.account.accountNumber}
\r\n\r\n {this.props.account.hasRenewalOffers &&
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('dashboard.renewalSuggestion', this.props.systemProperties)}\r\n
\r\n
\r\n {this.hasInternalRenewalContent(this.props.account.hasRenewalOffers) &&
\r\n {T.translate('dashboard.renewService')} \r\n
}\r\n {this.hasExternalRenewalContent(this.props.account.hasRenewalOffers) &&
}\r\n
\r\n
}\r\n\r\n\r\n\r\n {this.state.bannersHeader.map(banner => (\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {banner.bannerBody}\r\n
\r\n
\r\n
\r\n
\r\n ))}\r\n\r\n {this.props.account.isCashOnly &&
\r\n
\r\n
\r\n
{T.translate('dashboard.isCashOnlyAccountMessage', this.props.systemProperties)}
\r\n
\r\n
}\r\n\r\n {this.props.showAccountWarning &&\r\n
\r\n
{T.translate('dashboard.accountWarning1')}
\r\n
{T.translate('dashboard.accountWarning2')}
\r\n
{T.translate('dashboard.accountWarning3')}
\r\n
{T.translate('dashboard.accountWarning4')}
\r\n
\r\n }\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.props.account.accountBillingTypeID === 1 &&
\r\n
{T.translate('dashboard.prepaySummary')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.availableBalance')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.availableBalance)} {this.props.account.availableBalance > 0 ? {T.translate('dashboard.credit')} : {T.translate('dashboard.debit')} }\r\n
\r\n
\r\n
{T.translate('dashboard.disconnectThreshold')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.disconnectThreshold)} \r\n
\r\n
\r\n
{T.translate('dashboard.accountBalance')}:
\r\n
\r\n
\r\n ${accountBalanceValue} {this.props.account.accountBalance > 0 && {T.translate('dashboard.credit')} }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {({ y }) =>
}\r\n \r\n
\r\n
\r\n
\r\n {({ y }) => {parseInt(y)} }\r\n \r\n
\r\n
\r\n
{T.translate('dashboard.estDaysRemaining')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {this.props.showEnergySpend &&
\r\n \r\n
{T.translate('dashboard.avgDailyUsage')}:
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.averageDailyUsage)} \r\n
\r\n }\r\n
\r\n
{T.translate('dashboard.avgDailyKwhUsage')}:
\r\n
\r\n
\r\n {CommonStore.formatDecimal(this.props.account.averageDailyKwh)} \r\n
\r\n
\r\n
\r\n
\r\n {T.translate('dashboard.meterStatus')}{this.props.account.meterStatus} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.paymentPlanBalance')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.debtBalance)} \r\n
\r\n {this.props.account.lastPaymentAmount > 0 &&
\r\n
{T.translate('dashboard.lastPayment')}:
\r\n
}\r\n {this.props.account.lastPaymentAmount > 0 &&
\r\n ${CommonStore.formatDecimal(this.props.account.lastPaymentAmount)} on {CommonStore.formatDate(this.props.account.lastPaymentDate)} \r\n
}\r\n
\r\n
\r\n\r\n {!this.props.account.isCashOnly && this.props.showCreditCardPaymentType\r\n &&
\r\n {T.translate('dashboard.payNow')} \r\n
}\r\n {!this.props.account.isCashOnly && this.props.showEcheckPaymentType\r\n &&
\r\n {T.translate('dashboard.payNow')} \r\n
}\r\n {!this.props.account.isCashOnly && this.props.showCreditCardAndEcheckPaymentType\r\n &&
\r\n {T.translate('dashboard.payNow')} \r\n
}\r\n
\r\n
}\r\n\r\n {this.props.account.accountBillingTypeID !== 1 &&
\r\n
{T.translate('dashboard.billingSummary')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.accountBalance')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.invertBalance ? Math.abs(this.props.account.accountBalance) : this.props.account.accountBalance)} {this.props.account.accountBalance > 0 && {T.translate('dashboard.credit')} }\r\n
\r\n
\r\n
{T.translate('dashboard.nextDueDate')}:
\r\n
\r\n
\r\n {CommonStore.formatDate(this.props.account.paymentDueDate)} \r\n
\r\n
\r\n
{T.translate('dashboard.totalAmountDue')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.totalAmountDue)} \r\n
\r\n
\r\n
\r\n\r\n {!this.props.account.isCashOnly && this.props.showCreditCardPaymentType\r\n &&
\r\n {T.translate('dashboard.payMyBill')} \r\n
}\r\n {!this.props.account.isCashOnly && this.props.showEcheckPaymentType\r\n &&
\r\n {T.translate('dashboard.payMyBill')} \r\n
}\r\n {!this.props.account.isCashOnly && this.props.showCreditCardAndEcheckPaymentType\r\n &&
\r\n {T.translate('dashboard.payMyBill')} \r\n
}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.currentAmountDue')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.currentAmountDue)} \r\n
\r\n
\r\n
{T.translate('dashboard.pastDue')}:
\r\n
\r\n
\r\n ${CommonStore.formatDecimal(this.props.account.pastDueAmount)} \r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.props.account.lastBillID > 0 && {T.translate('dashboard.viewMyBill')} }\r\n\r\n {false && {T.translate('dashboard.viewMyBill')} }\r\n {T.translate('dashboard.viewPastStatement')} \r\n
\r\n
\r\n
\r\n {this.props.account.lastPaymentAmount > 0 &&
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.lastPayment')}:
\r\n
\r\n
\r\n
${CommonStore.formatDecimal(this.props.account.lastPaymentAmount)} on {CommonStore.formatDate(this.props.account.lastPaymentDate)} \r\n {false &&
{T.translate('dashboard.autoPayScheduledFor')}
}\r\n
\r\n
\r\n
\r\n
}\r\n
}\r\n\r\n
\r\n
\r\n {this.state.bannerMarketing &&
}\r\n\r\n {!this.state.bannerMarketing &&
\r\n
\r\n
\r\n
\r\n
{T.translate('dashboard.tmpDinamicBannerTitle')} \r\n
{T.translate('dashboard.tmpDinamicBannerParagraph')} \r\n {false &&
Use Code XYRAZ when referring.
\r\n }\r\n
\r\n
\r\n {false &&
\r\n
\r\n
\r\n
You're not enrolled in Auto Pay \r\n
\r\n Save a boat load of time plus 20% off our standard\r\n rates by enrolling in Auto Pay today!\r\n
\r\n
Set up auto pay \r\n
\r\n
}\r\n
\r\n }\r\n
\r\n\r\n\r\n
\r\n
\r\n\r\n {this.props.account.locationServices &&\r\n\r\n
\r\n \r\n\r\n \r\n {this.props.account.locationServices.filter(x => x.isMetered && x.linkedServiceTypeID).sort((x, y) => (x.serviceTypeID - y.serviceTypeID)).map(asp => (\r\n \r\n {asp.commodityID === this.props.constants.commodity.ELECTRICITY &&\r\n \r\n ))}\r\n
\r\n\r\n \r\n }\r\n\r\n {!this.props.account.locationServices &&\r\n
\r\n \r\n \r\n\r\n {this.props.account.electricity &&\r\n
\r\n \r\n }\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n {T.translate('accountPay.selectPaymentMethod')}?:
\r\n
\r\n
\r\n
\r\n
\r\n {(this.props.usePaging === true || this.props.downloadData === true) &&\r\n
\r\n
\r\n {this.props.usePaging === true &&\r\n
\r\n {T.translate('common.paging', { from: rowStart, to: rowEnd, total: rowsNumber })}\r\n
\r\n
\r\n
}\r\n
\r\n
\r\n {this.props.downloadData === true && rows.length > 0 &&\r\n \r\n }\r\n
\r\n
}\r\n
\r\n
\r\n \r\n \r\n {this.props.children.columns.map((column, i) => (\r\n {column.displayText} \r\n ))}\r\n {!this.props.expandibleContent && \r\n {rows.map((row, i) => (\r\n \r\n \r\n {this.props.children.columns.map(function (column, j) {\r\n var dataKeyValue = row[this.props.dataKey];\r\n var value = column.dataType !== 'action' ? row[column.columnId] : column.displayText;\r\n\r\n if (column.format !== undefined && column.dataType === 'date') {\r\n value = CommonStore.formatDate(row[column.columnId]);\r\n } else if (column.format !== undefined && column.dataType === 'datetime') {\r\n value = CommonStore.formatDateTime(row[column.columnId]);\r\n } else if (column.dataType === 'decimal') {\r\n value = CommonStore.formatDecimal(row[column.columnId]);\r\n } else if (column.dataType === 'currency') {\r\n value = '$ ' + CommonStore.formatDecimal(row[column.columnId]);\r\n } else if (column.dataType === 'int') {\r\n value = CommonStore.formatDecimal(row[column.columnId], 0);\r\n } else if (column.dataType === 'download') {\r\n value = value;\r\n }\r\n\r\n if (column.isCustomRender) {\r\n value = this.setCustomValue(row, column);\r\n }\r\n\r\n var rendered = {value} ;\r\n\r\n if (column.bold)\r\n rendered = {rendered} ;\r\n\r\n if (column.italic)\r\n rendered = {rendered} ;\r\n\r\n if (column.image !== undefined)\r\n rendered = {rendered} ;\r\n\r\n if (column.dataType === 'download')\r\n rendered = {T.translate('common.download')} {column.displayText} ;\r\n\r\n return {mobileHeader}{rendered} ;\r\n }.bind(this))}\r\n\r\n {!this.props.expandibleContent && + \r\n {this.props.expandibleContent === true && \r\n {this.props.onExpandableContentBinding !== undefined && this.props.onExpandableContentBinding(row)}\r\n }\r\n \r\n ))}\r\n \r\n {allRows.length === 0 && \r\n \r\n \r\n {T.translate('common.noRecordsToDisplay')}\r\n \r\n \r\n }\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('monthlyStatement.pageTitle')}
\r\n
\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n {this.props.accountStatements.length === 0 ?
{T.translate('common.noRecordsToDisplay')}
:
{T.translate('monthlyStatement.displayingLastYears')}
}\r\n\r\n {this.props.years.map(year =>\r\n
\r\n
{year} \r\n {{\r\n rows: this.props.accountStatements.filter((row) => row.year === year),\r\n columns: [\r\n { columnId: 'billDate', displayText: T.translate('monthlyStatement.colBillDate'), dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true },\r\n { columnId: 'totalkWh', displayText: T.translate('monthlyStatement.colUsage'), dataType: 'int' },\r\n { columnId: 'energyCharges', displayText: T.translate('monthlyStatement.colConsumptionCharges'), dataType: 'currency' },\r\n { columnId: 'otherCharges', displayText: T.translate('monthlyStatement.colOtherCharges'), dataType: 'currency' },\r\n { columnId: 'newCharges', displayText: T.translate('monthlyStatement.colTotalCharges'), dataType: 'currency' },\r\n { columnId: 'billID', displayText: T.translate('monthlyStatement.colDownload'), dataType: 'action', image: download, isCustomRender: true }\r\n ]\r\n }} \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n {T.translate('transactionHistory.dailyUsage', row)} \r\n {CommonStore.formatDecimal(row.totalUsage)} \r\n \r\n \r\n {row.averageRate !== 0 && row.averageRate !== 'NaN' && \r\n {T.translate('transactionHistory.avgRate')} \r\n {CommonStore.formatDecimal(row.avgRate) + '¢'} \r\n \r\n }\r\n {row.totalTD !== 0 && \r\n {T.translate('transactionHistory.td')} \r\n {'$' + CommonStore.formatDecimal(row.totalTD)} \r\n \r\n }\r\n {row.totalPromotion !== 0 && \r\n {T.translate('transactionHistory.promotions')} \r\n {'$' + CommonStore.formatDecimal(row.totalPromotion)} \r\n \r\n }\r\n {row.totalReconciliation !== 0 && \r\n {T.translate('transactionHistory.reconciliation')} \r\n {'$' + CommonStore.formatDecimal(row.totalReconciliation)} \r\n \r\n }\r\n {row.totalMisc !== 0 && \r\n {T.translate('transactionHistory.misc')} \r\n {'$' + CommonStore.formatDecimal(row.totalMisc)} \r\n \r\n }\r\n {row.totalTax !== 0 && \r\n {T.translate('transactionHistory.tax')} \r\n {'$' + CommonStore.formatDecimal(row.totalTax)} \r\n \r\n }\r\n {row.changeTotal !== 0 && \r\n {T.translate('transactionHistory.chargeTotal')} \r\n {'$' + CommonStore.formatDecimal(row.changeTotal)} \r\n \r\n }\r\n {row.totalDebtRecovery !== 0 && \r\n {T.translate('transactionHistory.debtRecovery')} \r\n {'$' + CommonStore.formatDecimal(row.totalDebtRecovery)} \r\n \r\n }\r\n {row.totalAdjustment !== 0 && \r\n {T.translate('transactionHistory.adjustments')} \r\n {'$' + CommonStore.formatDecimal(row.totalAdjustment)} \r\n \r\n }\r\n {row.totalPayments !== 0 && \r\n {T.translate('transactionHistory.payments')} \r\n {'$' + CommonStore.formatDecimal(row.totalPayments)} \r\n \r\n }\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n\r\n
\r\n\r\n
\r\n
{T.translate('transactionHistory.pageTitle')}
\r\n
\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n {this.props.transactionsHistory.length > 0 ?
{T.translate('common.displayingLastMonth')}
: \"\"}\r\n\r\n
\r\n {{\r\n rows: this.props.transactionsHistory,\r\n columns: [\r\n { columnId: 'date', displayText: T.translate('transactionHistory.colTransactionDate'), dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true, style: { width: '50%' } },\r\n { columnId: 'total', displayText: T.translate('transactionHistory.colAmount'), dataType: 'decimal', className: 'td-border-left td-numeric', headerClass: 'td-border-left' },\r\n { columnId: 'accountBalance', displayText: T.translate('transactionHistory.colBalance'), dataType: 'currency', className: 'td-border-left td-numeric', headerClass: 'td-border-left', bold: true, style: { width: '25%' } }\r\n ]\r\n }}\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('plansDocuments.pageTitle')}
\r\n\r\n {this.props.account.hasRenewalOffers &&
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('dashboard.renewalSuggestion', this.props.systemProperties)}\r\n
\r\n {this.hasInternalRenewalContent(this.props.account.hasRenewalOffers) &&
\r\n {T.translate('dashboard.renewService')} \r\n
}\r\n {this.hasExternalRenewalContent(this.props.account.hasRenewalOffers) &&
}\r\n
\r\n
\r\n
}\r\n
\r\n\r\n {this.props.serviceAgreement.serviceAgreementID && this.props.serviceAgreement.serviceAgreementID > 0 &&
\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
{this.props.serviceAgreement.productName} \r\n \r\n {this.props.serviceAgreement.formattedEndDate !== '' &&
\r\n {T.translate('plansDocuments.expires')}\r\n
{this.props.serviceAgreement.formattedEndDate}
\r\n
}\r\n
\r\n
\r\n
{T.translate('plansDocuments.planDocumentList')} \r\n {this.props.accountDocuments.length === 0 && {T.translate('common.noRecordsToDisplay')}
}\r\n \r\n }\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('documents.pageTitle')}
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('documents.selectDocumentType')} \r\n \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n {{\r\n rows: this.state.accountDocuments,\r\n columns: [\r\n { columnId: 'createDate', displayText: 'Date', dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true, style: { width: '20%' } },\r\n { columnId: 'description', displayText: 'Document', dataType: 'text', className: 'td-border-left td-numeric', headerClass: 'td-border-left' },\r\n { columnId: 'documentURL', displayText: 'Action', dataType: 'download', className: 'td-border-left td-numeric', headerClass: 'td-border-left', bold: true, style: { width: '25%' } }\r\n ]\r\n }}\r\n \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('plans.pageTitle')}
\r\n\r\n
\r\n\r\n\r\n {this.props.serviceAgreements &&
\r\n {this.props.serviceAgreements.map(sa => (\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n
{sa.productName} \r\n \r\n {sa.formattedStartDate !== '' &&
\r\n {T.translate('plansDocuments.active')}\r\n
{sa.formattedStartDate}
\r\n
}\r\n\r\n {sa.formattedEndDate !== '' &&
\r\n {T.translate('plansDocuments.expires')}\r\n
{sa.formattedEndDate}
\r\n
}\r\n
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('memberInfo.pageTitle')}
\r\n\r\n
\r\n\r\n {this.props.member &&\r\n
\r\n
\r\n\r\n
{T.translate('memberInfo.basicData')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('memberInfo.number')}:
\r\n
\r\n
\r\n {this.props.member.memberNumber} \r\n
\r\n
\r\n
{T.translate('memberInfo.type')}:
\r\n
\r\n
\r\n {this.props.member.memberTypeName} \r\n
\r\n
\r\n
{T.translate('memberInfo.status')}:
\r\n
\r\n
\r\n {this.props.member.memberStatusName} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('memberInfo.personData')} \r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.props.member.persons.map((person, i) =>\r\n
\r\n \r\n
\r\n
\r\n
\r\n
{T.translate(i === 0 ? 'memberInfo.primaryPerson' : 'memberInfo.secondaryPerson')}
\r\n
\r\n\r\n {person.businessName &&
\r\n \r\n
{T.translate('memberInfo.businessName')}:
\r\n
\r\n {person.businessName} \r\n
\r\n }\r\n\r\n
\r\n
{T.translate('memberInfo.firstName')}:
\r\n
\r\n
\r\n {(person.businessName ? person.repFirstName : person.firstName)} \r\n
\r\n\r\n
\r\n
{T.translate('memberInfo.lastName')}:
\r\n
\r\n
\r\n {(person.businessName ? person.repLastName : person.lastName)} \r\n
\r\n
\r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n {!this.props.member &&
{T.translate('memberInfo.memberNoPresent')}
}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
{T.translate('memberProgram.pageTitle')}
\r\n
\r\n\r\n {this.props.isSuccess &&\r\n
\r\n
\r\n \r\n
\r\n
\r\n
{T.translate('memberProgram.succesMessageTitle')} \r\n
\r\n \r\n {T.translate('memberProgram.programSaved')}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n
\r\n {this.props.utilityPrograms && this.props.utilityPrograms.map((program, index) =>\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n
{program.addOnChargeTitle}
\r\n
{program.addOnChargeDescription} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n {this.props.addOnCharges && this.props.addOnCharges.map((charge, index) =>\r\n\r\n \r\n {charge.isCustomCharge && charge.customChargeModuleID == 10 &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n {charge.isCustomCharge && charge.customChargeModuleID == 11 &&\r\n
\r\n \r\n \r\n
\r\n }\r\n\r\n
\r\n
{charge.addOnTitle}
\r\n
{charge.addOnDescription} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.state.militaryPromos && this.state.militaryPromos.map(promo =>\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
{promo.titleByLangValue}
\r\n
{promo.textByLangValue} \r\n {this.props.militaryAccountDocumentFile &&\r\n
{T.translate(\"common.fileName\")}: {this.props.militaryAccountDocumentFile.name} - {T.translate(\"common.fileType\")}: {this.props.militaryAccountDocumentFile.type}
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n )}\r\n\r\n {this.props.systemProperties && this.props.systemProperties.myacctReferralTitle &&\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
{this.props.systemProperties.myacctReferralTitle}
\r\n
{this.props.systemProperties.myacctReferralDescription} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n }\r\n \r\n
{this.props.memberProgramError} \r\n
\r\n \r\n {T.translate('customerProfile.saveUpdates')}\r\n \r\n
\r\n
\r\n
\r\n
{arrAddressSection[0]}, ;\r\n }\r\n }\r\n return {serviceAddress} ;\r\n }\r\n\r\n return \r\n
\r\n\r\n
\r\n {(this.state.renewalStep === 1 || this.state.renewalStep === 3) &&
{T.translate('renewService.pageTitle')}
}\r\n {this.state.renewalStep === 2 &&
{T.translate('renewService.pageTitle')}
}\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n {
\r\n {!this.props.serviceRenewed && (this.state.renewalStep === 1 || this.state.renewalStep === 2) && \r\n
\r\n\r\n\r\n {this.state.renewalStep === 1 &&\r\n \r\n \r\n
\r\n\r\n
{T.translate('renewService.selectAPlanForYou')} \r\n
\r\n
{T.translate('renewService.chooseALocation')} \r\n {this.getOfferServicePoints().map((sp, i) =>\r\n
\r\n {sp.fullAddress} \r\n
\r\n )}\r\n
\r\n\r\n
\r\n\r\n {T.translate('renewService.enterOfferCode')} \r\n\r\n {T.translate('renewService.searchOfferCode')} \r\n\r\n\r\n
\r\n\r\n {this.props.productOfferSearchStatus === this.props.constants.searchStatus.NOT_FOUND &&
{T.translate('renewService.invalidOfferCode')}
}\r\n {this.props.renewalOffer && this.props.renewalOffer.products && this.props.renewalOffer.products.length === 0 &&
{T.translate('common.noRecordsToDisplay')}
}\r\n\r\n
\r\n {this.props.accountServicePointID === this.state.selectedAspID && this.props.renewalOffer.products.map((prod, i) => (\r\n
\r\n
\r\n
{prod.productDisplayName}
\r\n {prod.isFeatured &&
\r\n
{T.translate('renewService.featuredFlag')}
\r\n
}\r\n {prod.offeredByCode &&
\r\n
{T.translate('renewService.offerCodeFlag')}
\r\n
}\r\n
\r\n {prod.kwhAvgPrice.toFixed(2)}¢
{T.translate('renewService.perKwh')} \r\n
\r\n
\r\n {prod.productDisplayFeature1 &&
}\r\n {prod.productDisplayFeature2 &&
}\r\n {prod.productDisplayFeature3 &&
}\r\n {prod.productDisplayFeature4 &&
}\r\n {prod.productDisplayFeature5 &&
}\r\n\r\n
\r\n \r\n {T.translate('renewService.viewDetails')} \r\n \r\n {T.translate('renewService.enrollNow')} \r\n
\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n {T.translate('renewService.productPlan')}: \r\n
\r\n
{this.state.preSelectedProduct.productDisplayName}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {T.translate('renewService.effectiveRate')} \r\n {T.translate('renewService.term')} \r\n {T.translate('renewService.earlyTerminationFee')} \r\n \r\n \r\n \r\n \r\n {this.state.preSelectedProduct.kwhAvgPrice.toFixed(2)}¢{T.translate('renewService.perKwh')} \r\n {this.state.preSelectedProduct.contractLengthName && this.state.preSelectedProduct.contractPeriodName && (this.state.preSelectedProduct.contractLengthName + ' ' + this.state.preSelectedProduct.contractPeriodName)} $ {this.state.preSelectedProduct.earlyTerminationFee} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('renewService.consumerInfo')}
\r\n
\r\n {this.state.preSelectedProduct.docTypes.map((docTypeID, i) => (\r\n {T.translate('renewService.docType' + docTypeID)}:\r\n {this.state.preSelectedProduct.productDocuments.filter(x => x.documentTypeID === docTypeID && this.isValidDocumentTdu(x)).map((doc, ixd) => (\r\n \r\n {' '} {{T.translate('common.language' + doc.productDocumentLanguageID)} }\r\n ))}\r\n\r\n \r\n ))}\r\n \r\n
\r\n\r\n \r\n }\r\n\r\n {this.state.renewalStep === 2 &&\r\n \r\n
\r\n
\r\n
\r\n
{T.translate('renewService.planInformation')}
\r\n
\r\n
\r\n
\r\n {T.translate('renewService.productPlan')}: \r\n
\r\n
{this.state.product.productDisplayName}
\r\n
\r\n
\r\n
\r\n {T.translate('renewService.serviceStartDate')}: \r\n
\r\n
{this.state.product.formattedStartDate}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {T.translate('renewService.effectiveRate')} \r\n {T.translate('renewService.term')} \r\n {T.translate('renewService.earlyTerminationFee')} \r\n \r\n \r\n \r\n \r\n {this.state.product.kwhAvgPrice.toFixed(2)}¢{T.translate('renewService.perKwh')} \r\n {this.state.product.contractLengthName && this.state.product.contractPeriodName && (this.state.product.contractLengthName + ' ' + this.state.product.contractPeriodName)} $ {this.state.product.earlyTerminationFee} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('renewService.consumerInfo')}
\r\n
\r\n {this.state.product.docTypes.map((docTypeID, i) => (\r\n {T.translate('renewService.docType' + docTypeID)}:\r\n {this.state.product.productDocuments.filter(x => x.documentTypeID === docTypeID && this.isValidDocumentTdu(x)).map((doc, ixd) => (\r\n \r\n {' '} {{T.translate('common.language' + doc.productDocumentLanguageID)} }\r\n ))}\r\n\r\n \r\n ))}\r\n \r\n
\r\n
{T.translate('renewService.confirmationOfOrder')}
\r\n
\r\n
\r\n \r\n * \r\n \r\n
\r\n
\r\n
\r\n\r\n {T.translate('common.back')} \r\n\r\n {T.translate('renewService.renewNow')}\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n\r\n
}\r\n\r\n {this.props.serviceRenewed && this.state.product && \r\n \r\n
\r\n
\r\n
\r\n
{T.translate('renewService.thanksForRenewing')} \r\n
\r\n \r\n {this.props.renewalOffer.accountServicePoint && this.props.renewalOffer.accountServicePoint.servicePoint &&\r\n T.translate('renewService.renewalComplete', this.props.renewalOffer.accountServicePoint.servicePoint)}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {T.translate('renewService.returnToDashboard')} \r\n \r\n \r\n }\r\n \r\n }\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('usage.pageTitle')}
\r\n
\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n {this.props.billedMeterReads.length === 0 ?\r\n
{T.translate('common.noRecordsToDisplay')}
:\r\n
{T.translate('usage.dateRangeLimit', this.state)}
}\r\n\r\n\r\n
\r\n
\r\n\r\n
{T.translate('usage.startDate')}
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
{T.translate('usage.endDate')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('usage.endDate')}
\r\n
{T.translate('usage.submitDateRange')} \r\n
\r\n \r\n
\r\n
{{\r\n rows: this.props.billedMeterReads,\r\n columns: [\r\n { columnId: 'serialNumber', displayText: T.translate('usage.colMeterSerialNumber'), dataType: 'string' },\r\n { columnId: 'billDate', displayText: T.translate('usage.colBillDate'), dataType: 'date', format: 'MM/dd/yyyy' },\r\n { columnId: 'fromDate', displayText: T.translate('usage.colFromDate'), dataType: 'datetime', format: 'MM/dd/yyyy hh:mm A' },\r\n { columnId: 'toDate', displayText: T.translate('usage.colToDate'), dataType: 'datetime', format: 'MM/dd/yyyy hh:mm A' },\r\n { columnId: 'startRegisterValue', displayText: T.translate('usage.colStartRegisterValue'), dataType: 'decimal' },\r\n { columnId: 'endRegisterValue', displayText: T.translate('usage.colEndRegisterValue'), dataType: 'decimal' },\r\n { columnId: 'totalConsumption', displayText: T.translate('usage.colTotalConsumption'), dataType: 'decimal' }\r\n ]\r\n }} \r\n
\r\n {T.translate('common.confirmAddressTitle')} \r\n \r\n {this.props.uspsAddress.status === this.props.constants.uspsAddressStatus.FOUND &&\r\n
\r\n
\r\n \r\n {this.props.uspsAddressFoundText} \r\n {this.getUspsCorrespondenceAddress()} \r\n \r\n
\r\n
}\r\n {this.props.uspsAddress.status === this.props.constants.uspsAddressStatus.NOT_FOUND &&
{T.translate('common.uspsAddressNotFound')}
}\r\n
\r\n \r\n {this.props.onCancel && {T.translate('common.cancel')} }\r\n {this.props.uspsAddress.status === this.props.constants.uspsAddressStatus.FOUND && this.props.onAddressSelection && {T.translate('common.skip')} }\r\n\r\n {this.props.onAddressSelection &&\r\n \r\n {T.translate('common.continue')}\r\n }\r\n\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => ({ ...state.user, ...state.common }),\r\n dispatch => bindActionCreators({ ...UserStore.actionCreators, ...CommonStore.actionCreators }, dispatch)\r\n)(UspsAddressVerification);\r\n","import T from 'i18n-react';\r\nimport React, { Component } from 'react';\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { connect } from 'react-redux';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { bindActionCreators } from 'redux';\r\nimport validator from 'validator';\r\nimport * as AccountStore from '../../store/Account';\r\nimport * as CommonStore from '../../store/Common';\r\nimport * as ServiceStore from '../../store/Service';\r\nimport BasicModal from '../shared/BasicModal';\r\nimport LoadingButton from '../shared/LoadingButton';\r\nimport LoadingOverlay from '../shared/LoadingOverlay';\r\nimport MessageError from '../shared/MessageError';\r\nimport UspsAddressVerification from '../shared/UspsAddressVerification';\r\n\r\nconst Scroll = require('react-scroll');\r\n\r\nclass MoveOut extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n var fields = [];\r\n\r\n fields['accountServicePointID'] = { isRequired: true, isValid: true, value: -1 };\r\n fields['serviceMoveOutDate'] = { isRequired: true, isValid: true, value: undefined };\r\n fields['billingAddress'] = { isRequired: true, isValid: true, value: '' };\r\n fields['apartment'] = { isRequired: false, isValid: true, value: '' };\r\n fields['city'] = { isRequired: true, isValid: true, value: '' };\r\n fields['state'] = { isRequired: true, isValid: true, value: '' };\r\n fields['zipCode'] = { isRequired: true, isValid: true, value: '' };\r\n\r\n this.state = {\r\n fields,\r\n finalAddress: {},\r\n distributionServiceProviderID: -1,\r\n locationAddress: '',\r\n selectedLocation: {},\r\n validSpStatus: [8, 10, 11, 18],\r\n validSevicePoints: [],\r\n stepNumber: 1,\r\n disableCancel: false\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n document.title = T.translate('common.client') + ' | ' + T.translate('moveOut.title');\r\n\r\n if (this.props.account.accountNumber) {\r\n var fields = this.state.fields;\r\n var validSevicePoints = this.props.account.servicePoints.filter(x => this.state.validSpStatus.includes(x.servicePointStatusID));\r\n var address = this.props.account.mailingAddress;\r\n var distributionServiceProviderID = this.state.distributionServiceProviderID;\r\n\r\n fields['state'].value = address.state;\r\n\r\n if (validSevicePoints.length === 1) {\r\n distributionServiceProviderID = validSevicePoints[0].distributionServiceProviderID;\r\n }\r\n\r\n this.setState({ validSevicePoints, fields, distributionServiceProviderID });\r\n \r\n this.props.resetCommonState({ commonLoading: false, commonErrorMessage: '', uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.props.clearServiceState();\r\n this.checkStatesListNCalendar(distributionServiceProviderID);\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n //when user refresh the browser - once we get the account - get screen data\r\n if ((nextProps.account.accountNumber && !this.props.account.accountNumber) || nextProps.account.accountNumber !== this.props.account.accountNumber) {\r\n var fields = this.state.fields;\r\n var validSevicePoints = nextProps.account.servicePoints.filter(x => this.state.validSpStatus.includes(x.servicePointStatusID));\r\n var address = nextProps.account.mailingAddress;\r\n var distributionServiceProviderID = this.state.distributionServiceProviderID;\r\n\r\n fields['state'].value = address.state;\r\n\r\n if (validSevicePoints.length === 1) {\r\n distributionServiceProviderID = validSevicePoints[0].distributionServiceProviderID;\r\n }\r\n\r\n this.setState({ validSevicePoints, fields, distributionServiceProviderID });\r\n\r\n this.props.resetCommonState({ commonLoading: false, commonErrorMessage: '', uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.props.clearServiceState();\r\n this.checkStatesListNCalendar(distributionServiceProviderID);\r\n }\r\n }\r\n\r\n sendMvo = () => {\r\n if (this.state.stepNumber === 1) {\r\n if (this.state.validSevicePoints.length === 1) {\r\n var defaultLocation = this.state.validSevicePoints[0];\r\n if (defaultLocation) {\r\n let state = this.state;\r\n state.fields['accountServicePointID'].value = defaultLocation.accountServicePointID;\r\n this.setState({ fieds: state.fieds, locationAddress: defaultLocation.fullAddress });\r\n }\r\n }\r\n\r\n if (this.isFormValid()) {\r\n var address = this.state.fields;\r\n var request = {\r\n address1: address.billingAddress.value,\r\n address2: address.apartment.value,\r\n city: address.city.value,\r\n state: address.state.value,\r\n postalCode: address.zipCode.value\r\n };\r\n this.props.requestUpsAddressCheck(request);\r\n }\r\n }\r\n else if (this.state.stepNumber === 2) {\r\n this.setState({ disableCancel: true });\r\n\r\n this.props.createMvoServiceOrder(this.state.selectedLocation, this.state.fields['serviceMoveOutDate'].value, this.state.finalAddress);\r\n }\r\n }\r\n\r\n closeModal = () => {\r\n this.props.resetCommonState({ uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.props.clearServiceState();\r\n this.setState({ stepNumber: 1 });\r\n }\r\n\r\n redirectToDashboard = (e) => {\r\n this.props.history.push(`/myaccount/dashboard`);\r\n }\r\n\r\n finalAddressSelection = (preferredAddress) => {\r\n let fields = this.state.fields;\r\n let finalAddress = this.props.uspsAddress;\r\n\r\n if (preferredAddress !== this.props.constants.addressSource.USPS) {\r\n finalAddress.address1 = fields['billingAddress'].value;\r\n finalAddress.address2 = fields['apartment'].value;\r\n finalAddress.city = fields['city'].value;\r\n finalAddress.state = fields['state'].value;\r\n finalAddress.postalCode = fields['zipCode'].value;\r\n }\r\n\r\n var selectedLocation = this.props.account.servicePoints.find(x => x.accountServicePointID === this.state.fields['accountServicePointID'].value);\r\n this.setState({ stepNumber: 2, selectedLocation: selectedLocation, finalAddress });\r\n }\r\n\r\n isFormValid = () => {\r\n let state = this.state;\r\n var valid = true;\r\n var objProperties = Object.keys(state.fields);\r\n objProperties.map((propertyName) => {\r\n var field = state.fields[propertyName];\r\n field.isValid = true;\r\n\r\n if (field.value === undefined) {\r\n field.isValid = false;\r\n valid = valid && false;\r\n }\r\n else {\r\n if (Number.isInteger(field.value)) {\r\n if (field.isRequired && field.value <= 0) {\r\n field.isValid = false;\r\n valid = valid && false;\r\n }\r\n }\r\n else {\r\n if (Object.prototype.toString.call(field.value) !== '[object Date]') {\r\n if (field.isRequired && field.value.trim() === '') {\r\n field.isValid = false;\r\n valid = valid && false;\r\n }\r\n\r\n if (field.isValid && field.validationType === 'phone') {\r\n field.isValid = !field.value.includes('_');\r\n }\r\n\r\n if (field.isValid && field.validationType === 'email') {\r\n field.isValid = validator.isEmail(field.value);\r\n }\r\n }\r\n }\r\n }\r\n });\r\n\r\n this.setState(state.fields);\r\n\r\n if (valid) {\r\n this.props.setCommonError('');\r\n } else {\r\n this.props.setCommonError(T.translate('common.thereAreMissingFields'));\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n handleChangeServiceMoveOutDate = (e) => {\r\n let state = this.state;\r\n state.fields['serviceMoveOutDate'].value = e;\r\n state.fields['serviceMoveOutDate'].isValid = true;\r\n\r\n this.setState({ fields: state.fields });\r\n }\r\n\r\n handleDateChangeRaw = (e) => {\r\n e.preventDefault();\r\n }\r\n\r\n onSelectLocation = (e) => {\r\n\r\n //Get new selection values\r\n var accountServicePointID = parseInt(e.target.value);\r\n var selectedSPs = this.props.account.servicePoints.filter(x => x.accountServicePointID === accountServicePointID);\r\n var locationAddress = selectedSPs.length > 0 ? selectedSPs[0].fullAddress : '';\r\n var distributionServiceProviderID = selectedSPs.length > 0 ? selectedSPs[0].distributionServiceProviderID : -1;\r\n\r\n let state = this.state;\r\n state.fields['serviceMoveOutDate'].value = undefined;\r\n state.fields['accountServicePointID'].value = accountServicePointID;\r\n\r\n state.fields['accountServicePointID'].isValid = state.fields['accountServicePointID'].value > 0;\r\n\r\n this.setState({ distributionServiceProviderID, locationAddress, fields: state.fields });\r\n\r\n this.checkStatesListNCalendar(distributionServiceProviderID);\r\n }\r\n\r\n checkStatesListNCalendar = (distributionServiceProviderID) => {\r\n distributionServiceProviderID = distributionServiceProviderID ? distributionServiceProviderID : this.state.distributionServiceProviderID;\r\n this.props.requestNonWorkingDaysNStates(distributionServiceProviderID, 3);//Mvo:3\r\n }\r\n\r\n changeFinalAddress = (e) => {\r\n var input = e.target;\r\n var finalAddress = this.state.fields;\r\n finalAddress[input.id].value = input.value;\r\n\r\n finalAddress[input.id].isValid = input.value.trim() !== '';\r\n\r\n this.setState({ fields: this.state.fields });\r\n }\r\n\r\n getNonWorkingDays = () => {\r\n\r\n var wgGroupID = 3;//mvo\r\n\r\n var tduCalendar = this.props.nonWorkingDaysByTdu.find(x => x.distributionServiceProviderID === this.state.distributionServiceProviderID && x.workingDaysGroupID === wgGroupID);\r\n\r\n if (tduCalendar) {\r\n return tduCalendar.nonWorkingDays;\r\n } else {\r\n return [];\r\n }\r\n\r\n }\r\n\r\n getFinalCorrespondenceAddress = () => {\r\n var finalAddress = this.state.fields;\r\n return finalAddress.billingAddress.value + ' ' + finalAddress.apartment.value + ', ' + finalAddress.city.value + ' ' + finalAddress.state.value + ' ' + finalAddress.zipCode.value;\r\n }\r\n\r\n getLocationAddress = () => {\r\n\r\n if (this.state.validSevicePoints.length === 1) {\r\n var defaultLocation = this.state.validSevicePoints[0];\r\n if (defaultLocation) {\r\n return defaultLocation.fullAddress;\r\n }\r\n }\r\n return this.state.locationAddress;\r\n }\r\n\r\n getMaxDate = () => {\r\n var result = new Date();\r\n var days = this.props.systemProperties.myAcctMvoFutureDaysAllowed;\r\n\r\n result.setDate(result.getDate() + days);\r\n return result;\r\n }\r\n\r\n setValidationStyle = (fieldName) => {\r\n let state = this.state;\r\n var field = state.fields[fieldName];\r\n return field.isValid ? '' : 'is-invalid';\r\n }\r\n\r\n getErrorMessage = () => {\r\n\r\n if (this.props.commonErrorMessage) {\r\n return this.props.commonErrorMessage;\r\n }\r\n\r\n if (this.props.serviceErrorMessage) {\r\n return this.props.serviceErrorMessage;\r\n }\r\n\r\n if (this.props.account.accountNumber && this.state.validSevicePoints.length === 0) {\r\n return T.translate('moveOut.invalidLocations', { customerServicePhone: this.props.systemProperties.customerServicePhone, customerServiceHours: this.props.systemProperties['customerServiceHours' + this.props.lang.toUpperCase()] });\r\n }\r\n\r\n return undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default connect(\r\n state => ({ ...state.service, ...state.account, ...state.common }),\r\n dispatch => bindActionCreators({ ...ServiceStore.actionCreators, ...AccountStore.actionCreators, ...CommonStore.actionCreators }, dispatch)\r\n)(MoveOut);\r\n","import React, { Component } from 'react';\r\nimport { bindActionCreators } from 'redux';\r\nimport { connect } from 'react-redux';\r\nimport * as AccountStore from '../../store/Account';\r\nimport * as CommonStore from '../../store/Common';\r\nimport * as ServiceStore from '../../store/Service';\r\nimport T from 'i18n-react';\r\nimport LoadingOverlay from '../shared/LoadingOverlay';\r\nimport MessageError from '../shared/MessageError';\r\nimport DatePicker from 'react-datepicker';\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport LoadingButton from '../shared/LoadingButton';\r\nimport ConfirmModal from '../shared/ConfirmModal';\r\nimport BasicModal from '../shared/BasicModal';\r\nimport UspsAddressVerification from '../shared/UspsAddressVerification';\r\n\r\nconst Scroll = require('react-scroll');\r\nconst transferIcon = require(`../../images/${process.env.REACT_APP_CLIENT}/transfer-icon.png`);\r\n\r\nclass TransferService extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n address: '',\r\n apartmentNumber: '',\r\n city: '',\r\n state: '',\r\n zip: '',\r\n esiID: '',\r\n open: false,\r\n moveOutDate: '',\r\n moveInDate: '',\r\n billingAddress: {},\r\n acctAddressAddress1: '',\r\n acctAddressAddress2: '',\r\n acctAddressCity: '',\r\n acctAddressState: '',\r\n acctAddressPostalCode: '',\r\n accountServicePointID: 0,\r\n distributionServiceProviderID: -1,\r\n mviDistributionServiceProviderID: -1,\r\n validSpStatus: [8, 10, 11, 18],\r\n validSevicePoints: [],\r\n fields: [\r\n { name: 'acctAddressAddress1', isRequired: true },\r\n { name: 'acctAddressCity', isRequired: true },\r\n { name: 'acctAddressState', isRequired: true },\r\n { name: 'acctAddressPostalCode', isRequired: true },\r\n { name: 'moveOutDate', isRequired: true },\r\n { name: 'moveInDate', isRequired: true },\r\n { name: 'accountServicePointID', isRequired: true },\r\n ],\r\n disabledSubmitTransfer: false\r\n };\r\n\r\n this.addressInput = React.createRef();\r\n }\r\n\r\n\r\n componentWillMount() {\r\n Scroll.animateScroll.scrollToTop({ smooth: true, duration: 500 });\r\n document.title = T.translate('common.client') + ' | ' + T.translate('transferService.title');\r\n\r\n if (this.props.account.accountNumber) {\r\n let distributionServiceProviderID = -1;\r\n let validSevicePoints = this.props.account.servicePoints.filter(x => this.state.validSpStatus.includes(x.servicePointStatusID));\r\n\r\n if (validSevicePoints.length === 1) {\r\n const sp = validSevicePoints[0];\r\n this.props.setServicePoint(sp);\r\n distributionServiceProviderID = sp.distributionServiceProviderID;\r\n this.setState({ validSevicePoints, accountServicePointID: sp.accountServicePointID, distributionServiceProviderID });\r\n } else {\r\n\r\n if (validSevicePoints.length === 0) {\r\n this.props.showServiceError(T.translate('transferService.errorNoActivePremiseOnAccount'));\r\n }\r\n\r\n this.props.setServicePoint({});\r\n this.setState({ validSevicePoints, accountServicePointID: 0, distributionServiceProviderID });\r\n }\r\n\r\n this.props.resetCommonState({ commonLoading: false, commonErrorMessage: '', uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.checkStatesListNCalendar(distributionServiceProviderID, 3);//Mvo:3\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n //when user refresh the browser - once we get the account - get screen data\r\n if (nextProps.account.accountNumber !== this.props.account.accountNumber) {\r\n let distributionServiceProviderID = -1;\r\n var validSevicePoints = nextProps.account.servicePoints.filter(x => this.state.validSpStatus.includes(x.servicePointStatusID));\r\n\r\n if (validSevicePoints.length === 1) {\r\n const sp = validSevicePoints[0];\r\n nextProps.setServicePoint(sp);\r\n distributionServiceProviderID = sp.distributionServiceProviderID;\r\n this.setState({ validSevicePoints, accountServicePointID: sp.accountServicePointID, distributionServiceProviderID });\r\n } else {\r\n\r\n if (validSevicePoints.length === 0) {\r\n this.props.showServiceError(T.translate('transferService.errorNoActivePremiseOnAccount'));\r\n }\r\n\r\n this.props.setServicePoint({});\r\n this.setState({ validSevicePoints, accountServicePointID: 0, distributionServiceProviderID });\r\n }\r\n\r\n this.props.resetCommonState({ commonLoading: false, commonErrorMessage: '', uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.checkStatesListNCalendar(distributionServiceProviderID, 3);//Mvo:3\r\n }\r\n\r\n if (nextProps.distributionPoint.address1 && this.props.distributionPoint.address1 !== nextProps.distributionPoint.address1) {\r\n this.setState({\r\n acctAddressAddress1: nextProps.distributionPoint.address1,\r\n acctAddressAddress2: nextProps.distributionPoint.address2,\r\n acctAddressCity: nextProps.distributionPoint.city,\r\n acctAddressState: nextProps.distributionPoint.stateCode,\r\n acctAddressPostalCode: nextProps.distributionPoint.zipCode,\r\n mviDistributionServiceProviderID: nextProps.distributionPoint.distributionServiceProviderID\r\n });\r\n this.checkStatesListNCalendar(nextProps.distributionPoint.distributionServiceProviderID, 1);//Enrollment:1\r\n }\r\n }\r\n\r\n onChange = (e) => {\r\n\r\n let fields = this.state.fields.filter(x => x.name === e.target.name);\r\n if (fields && fields.length === 1) {\r\n let field = fields[0];\r\n\r\n if (field.isRequired && field.isRequiredError && e.target.value) {\r\n field.isRequiredError = false;\r\n }\r\n }\r\n\r\n this.setState({ [e.target.name]: e.target.value });\r\n }\r\n\r\n onSearchClick = async () => {\r\n\r\n let getDistributionPoints = false;\r\n\r\n if (this.state.esiID) {\r\n getDistributionPoints = true;\r\n } else {\r\n if (this.state.address && this.state.city && this.state.state && this.state.zip) {\r\n getDistributionPoints = true;\r\n }\r\n }\r\n\r\n if (getDistributionPoints) {\r\n await this.props.getDistributionPoints(this.state);\r\n this.props.getWebProductInformation(this.state);\r\n } else {\r\n this.props.showServiceError(T.translate('transferService.errorFieldRequiredToMakeSearch'));\r\n }\r\n }\r\n\r\n handleChangeServiceMoveInDate = (e) => {\r\n this.setState({ moveInDate: e });\r\n }\r\n\r\n handleChangeServiceMoveOutDate = (e) => {\r\n this.setState({ moveOutDate: e });\r\n }\r\n\r\n handleDateChangeRaw = (e) => {\r\n e.preventDefault();\r\n }\r\n\r\n onChangeLocationClick = () => {\r\n\r\n this.setState({\r\n address: '',\r\n apartmentNumber: '',\r\n city: '',\r\n state: '',\r\n zip: '',\r\n esiID: '',\r\n billingAddress: {},\r\n acctAddressAddress1: '',\r\n acctAddressAddress2: '',\r\n acctAddressCity: '',\r\n acctAddressState: '',\r\n acctAddressPostalCode: '',\r\n mviDistributionServiceProviderID: -1\r\n });\r\n\r\n this.props.setDistributionPoint({});\r\n this.addressInput.current.focus();\r\n }\r\n\r\n setDistributionPoint = (dp) => {\r\n this.props.setDistributionPoint(dp);\r\n this.props.setDistributionPointModalVisible(false);\r\n }\r\n\r\n onToggle = () => {\r\n this.props.setDistributionPointModalVisible(false);\r\n }\r\n\r\n onToggleConfirm = () => {\r\n this.props.setTransferServiceConfirmModalVisible(false);\r\n }\r\n\r\n onToggleCancel = () => {\r\n this.props.resetCommonState({ uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.props.setTransferServiceCancelModalVisible(false);\r\n }\r\n\r\n onToggleSuccess = () => {\r\n this.props.setTransferServiceSuccessModalVisible(false);\r\n }\r\n\r\n onCancelClick = () => {\r\n this.props.setTransferServiceCancelModalVisible(true);\r\n }\r\n\r\n goToDashboard = () => {\r\n this.props.setTransferServiceCancelModalVisible(false);\r\n this.props.setTransferServiceSuccessModalVisible(false);\r\n this.props.history.push('/myaccount/dashboard');\r\n }\r\n\r\n onSelectLocation = (e) => {\r\n const state = this.state;\r\n state[e.target.name] = e.target.value;\r\n this.setState(state);\r\n\r\n let sps = this.state.validSevicePoints.filter(x => x.accountServicePointID === parseInt(e.target.value));\r\n let distributionServiceProviderID = -1;\r\n\r\n if (sps && sps.length) {\r\n this.props.setServicePoint(sps[0]);\r\n distributionServiceProviderID = sps[0].distributionServiceProviderID;\r\n } else {\r\n this.props.setServicePoint({});\r\n }\r\n\r\n this.setState({ distributionServiceProviderID });\r\n\r\n this.checkStatesListNCalendar(distributionServiceProviderID, 3);//Mvo:3\r\n\r\n }\r\n\r\n finalAddressSelection = (preferredAddress) => {\r\n let state = this.state;\r\n let billingAddress = this.props.uspsAddress;\r\n\r\n if (preferredAddress !== this.props.constants.addressSource.USPS) {\r\n billingAddress.address1 = state.acctAddressAddress1;\r\n billingAddress.address2 = state.acctAddressAddress2;\r\n billingAddress.city = state.acctAddressCity;\r\n billingAddress.state = state.acctAddressState;\r\n billingAddress.postalCode = state.acctAddressPostalCode;\r\n }\r\n\r\n this.props.resetCommonState({ uspsAddress: { status: this.props.constants.uspsAddressStatus.PENDING } });\r\n this.setState({ billingAddress });\r\n this.props.setTransferServiceConfirmModalVisible(true);\r\n }\r\n\r\n checkStatesListNCalendar = (distributionServiceProviderID, workingDaysGroupID) => {\r\n this.props.requestNonWorkingDaysNStates(distributionServiceProviderID, workingDaysGroupID);\r\n }\r\n\r\n onSubmitTransfer = () => {\r\n\r\n var state = this.state;\r\n var valid = true;\r\n\r\n this.state.fields.map((field) => {\r\n\r\n field.value = this.state[field.name];\r\n field.isRequiredError = false;\r\n\r\n if (field.isRequired && !field.value) {\r\n field.isRequiredError = true;\r\n valid = false;\r\n }\r\n\r\n });\r\n this.setState(state);\r\n var boolDisabled = this.props.selectedWebProduct === '' || this.props.selectedWebProduct === 'undefined' || this.props.selectedWebProduct === null;\r\n\r\n this.setState({\r\n disabledSubmitTransfer: boolDisabled\r\n });\r\n\r\n if (valid) {\r\n this.props.showServiceError('');\r\n\r\n //now see if distribution point is set\r\n if (this.props.distributionPoint.serviceProviderIdentifier) {\r\n let state = this.state;\r\n let distributionPoint = this.props.distributionPoint;\r\n\r\n if (state.acctAddressAddress1 !== distributionPoint.address1 || state.acctAddressAddress2 !== distributionPoint.address2 || state.acctAddressCity !== distributionPoint.city\r\n || state.acctAddressState !== distributionPoint.stateCode || state.acctAddressPostalCode !== distributionPoint.zipCode) {\r\n var request = {\r\n address1: state.acctAddressAddress1,\r\n address2: state.acctAddressAddress2,\r\n city: state.acctAddressCity,\r\n state: state.acctAddressState,\r\n postalCode: state.acctAddressPostalCode\r\n };\r\n this.props.requestUpsAddressCheck(request);\r\n } else {\r\n let billingAddress = this.props.uspsAddress;\r\n billingAddress.address1 = distributionPoint.address1;\r\n billingAddress.address2 = distributionPoint.address2;\r\n billingAddress.city = distributionPoint.city;\r\n billingAddress.state = distributionPoint.stateCode;\r\n billingAddress.postalCode = distributionPoint.zipCode;\r\n\r\n this.setState({ billingAddress });\r\n this.props.setTransferServiceConfirmModalVisible(true);\r\n }\r\n } else {\r\n this.props.showServiceError('Please, search for the New Service Location.');\r\n }\r\n\r\n } else {\r\n this.props.showServiceError(T.translate(\"common.thereAreMissingFields\"));\r\n }\r\n\r\n }\r\n\r\n onSubmitTransferConfirm = () => {\r\n this.props.createTransferOfService(this.state);\r\n }\r\n\r\n getNonWorkingDays = (workingGroup) => {\r\n var wgGroupID = 1;//mvi-switch\r\n var distributionServiceProviderID = this.state.mviDistributionServiceProviderID;\r\n\r\n if (workingGroup === 'mvo') {\r\n wgGroupID = 3;//mvo\r\n distributionServiceProviderID = this.state.distributionServiceProviderID;\r\n }\r\n\r\n var tduCalendar = this.props.nonWorkingDaysByTdu.find(x => x.distributionServiceProviderID === distributionServiceProviderID && x.workingDaysGroupID === wgGroupID);\r\n\r\n if (tduCalendar) {\r\n return tduCalendar.nonWorkingDays;\r\n } else {\r\n return [];\r\n }\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('transferService.pageTitle')}
\r\n
{T.translate('transferService.accountNumber')}: {this.props.account.accountNumber}
\r\n
\r\n\r\n
\r\n
\r\n\r\n {this.state.validSevicePoints.length > 1 &&
\r\n \r\n
\r\n
\r\n {T.translate('transferService.select')} \r\n {this.state.validSevicePoints.map((sp, i) =>\r\n {sp.fullAddress} \r\n )}\r\n \r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('transferService.existingServiceLocation')} \r\n
{this.props.servicePoint.fullAddress}
\r\n
\r\n
\r\n
\r\n
{T.translate('transferService.moveOutDate')} \r\n
\r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
{T.translate('transferService.newServiceLocation')} \r\n
\r\n
\r\n
\r\n {T.translate('transferService.serviceIdentifier')} \r\n
\r\n
\r\n \r\n {T.translate('transferService.search')}\r\n \r\n
\r\n
\r\n\r\n
{this.props.serviceErrorMessage} \r\n\r\n
\r\n\r\n
\r\n
\r\n \r\n {T.translate('transferService.address')}: \r\n {this.props.distributionPoint.address1 && (this.props.distributionPoint.address1 + ' ' + this.props.distributionPoint.address2 + ' ' + this.props.distributionPoint.city + ', ' + this.props.distributionPoint.stateCode + ' ' + this.props.distributionPoint.zipCode)} \r\n \r\n
\r\n
\r\n {this.props.distributionPoint.address1 && {T.translate('transferService.changeLocation')} }\r\n
\r\n
\r\n \r\n {T.translate('transferService.serviceIdentifier')}: \r\n {this.props.distributionPoint.serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n
{T.translate('transferService.moveInDate')} \r\n
\r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
{T.translate('transferService.billingAddress')} \r\n
\r\n
\r\n
{T.translate('transferService.billingAddress')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n {T.translate('transferService.aptNumber')} \r\n
\r\n
\r\n
{T.translate('transferService.city')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('transferService.state')} \r\n
\r\n {T.translate('transferService.select')} \r\n {this.props.statesList.map((state, i) =>\r\n {state.name} \r\n )}\r\n \r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('transferService.zipCode')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
{this.props.serviceErrorMessage} \r\n\r\n
{T.translate('common.cancel')} \r\n
{T.translate('transferService.submitTransfer')} \r\n\r\n
\r\n {T.translate('transferService.selectNewServiceLocation')} \r\n\r\n \r\n\r\n \r\n \r\n {T.translate('common.close')} \r\n \r\n \r\n\r\n
\r\n {T.translate('transferService.transferOfServiceConfirmation')} \r\n\r\n {this.props.accountErrorMessage} \r\n\r\n \r\n
\r\n
\r\n \r\n {T.translate('transferService.moveOutServiceLocationAddress')}: \r\n {this.props.servicePoint.fullAddress} \r\n \r\n
\r\n
\r\n \r\n {T.translate('transferService.moveOutServiceLocationIdentifier')}: \r\n {this.props.servicePoint.serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n \r\n {T.translate('transferService.moveOutDate')}: \r\n {CommonStore.formatDate(this.state.moveOutDate)} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {T.translate('transferService.moveInServiceLocationAddress')}: \r\n {this.props.distributionPoint.address1 + ' ' + this.props.distributionPoint.address2 + ' ' + this.props.distributionPoint.city + ', ' + this.props.distributionPoint.stateCode + ' ' + this.props.distributionPoint.zipCode} \r\n \r\n
\r\n
\r\n \r\n {T.translate('transferService.moveInServiceLocationIdentifier')}: \r\n {this.props.distributionPoint.serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n \r\n {T.translate('transferService.moveInDate')}: \r\n {CommonStore.formatDate(this.state.moveInDate)} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {T.translate('transferService.billingAddress')}: \r\n {this.state.billingAddress.address1 + ' ' + this.state.billingAddress.address2 + ' ' + this.state.billingAddress.city + ', ' + this.state.billingAddress.state + ' ' + this.state.billingAddress.postalCode} \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n {T.translate('transferService.productPlan')}: \r\n {this.props.selectedWebProduct.productDisplayName} \r\n \r\n
\r\n
\r\n\r\n {this.props.selectedWebProduct &&\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {T.translate('transferService.effectiveRate')} \r\n {T.translate('transferService.term')} \r\n {T.translate('transferService.terminationFee')} \r\n \r\n \r\n \r\n \r\n {CommonStore.formatDecimal(this.props.selectedWebProduct.kwhAvgPrice, 1)} ¢ {T.translate(\"transferService.perkWh\")} \r\n \r\n \r\n {this.props.selectedWebProduct.contractLengthName ? (this.props.selectedWebProduct.contractLengthName + ' ' +\r\n this.props.selectedWebProduct.contractPeriodName)\r\n : T.translate(\"common.none\")}\r\n \r\n \r\n $ {this.props.selectedWebProduct.earlyTerminationFee} \r\n \r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n {this.props.selectedWebProduct && this.props.selectedWebProduct.productDocuments &&\r\n
\r\n {T.translate(\"addLocation.consumerInfo\")}
\r\n \r\n {\r\n this.props.selectedWebProduct.productDocuments.map((document) =>\r\n (\r\n {document.documentName} \r\n \r\n }\r\n\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('transferService.acknowledgment', this.props.systemProperties)}\r\n
\r\n
\r\n
\r\n\r\n {this.props.systemProperties.myAcctHoldEnrollmentTransferServiceAddLocation &&\r\n
\r\n \r\n
\r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceAddLocationTitle' + this.props.lang.toUpperCase()], ';')}
\r\n
\r\n {CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceAddLocationDes' + this.props.lang.toUpperCase()], ';')}\r\n
\r\n
\r\n
\r\n }\r\n
\r\n \r\n {T.translate('common.close')} \r\n \r\n {T.translate('common.submit')}\r\n \r\n \r\n \r\n\r\n
\r\n {T.translate('transferService.areYouSureYouWantToNavigateAwayFromThisScreen')}
\r\n {T.translate('transferService.yourRequestTransferServiceHasBeenSubmitted', this.props.systemProperties)}
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n\r\n
\r\n\r\n
\r\n
{T.translate('addLocation.pageTitle')}
\r\n
{T.translate('addLocation.accountNumber')}: {this.props.account.accountNumber}
\r\n
\r\n\r\n
{this.getErrorMessage()} \r\n\r\n {this.props.serviceErrorCode === 0 &&
\r\n\r\n \r\n
\r\n\r\n
{T.translate('addLocation.newServiceLocation')} \r\n
\r\n
\r\n
\r\n {T.translate('addLocation.serviceIdentifier')} \r\n
\r\n
\r\n \r\n {T.translate('addLocation.search')}\r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n \r\n {T.translate('addLocation.address')}: \r\n {this.props.distributionPoint.address1 && (this.props.distributionPoint.address1 + ' ' + this.props.distributionPoint.address2 + ' ' + this.props.distributionPoint.city + ', ' + this.props.distributionPoint.stateCode + ' ' + this.props.distributionPoint.zipCode)} \r\n \r\n
\r\n
\r\n {this.props.distributionPoint.address1 && {T.translate('addLocation.changeLocation')} }\r\n
\r\n
\r\n \r\n {T.translate('addLocation.serviceIdentifier')}: \r\n {this.props.distributionPoint.serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
{T.translate('addLocation.moveInDate')} \r\n
\r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('common.cancel')} \r\n {T.translate('addLocation.submitMvi')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('addLocation.selectNewServiceLocation')} \r\n\r\n \r\n \r\n \r\n {T.translate('common.close')} \r\n \r\n \r\n\r\n \r\n {T.translate('addLocation.addLocationConfirmation')} \r\n\r\n {this.props.accountErrorMessage} \r\n\r\n \r\n
\r\n
\r\n \r\n {T.translate('addLocation.moveInServiceLocationAddress')}: \r\n {this.props.distributionPoint.address1 && (this.props.distributionPoint.address1 + ' ' + this.props.distributionPoint.address2 + ' ' + this.props.distributionPoint.city + ', ' + this.props.distributionPoint.stateCode + ' ' + this.props.distributionPoint.zipCode)} \r\n \r\n
\r\n
\r\n \r\n {T.translate('addLocation.moveInServiceLocationIdentifier')}: \r\n {this.props.distributionPoint.serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n \r\n {T.translate('addLocation.moveInDate')}: \r\n {CommonStore.formatDate(this.state.moveInDate)} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {T.translate('addLocation.billingAddress')}: \r\n {this.props.account.mailingAddress && this.props.account.mailingAddress.address1 && (this.props.account.mailingAddress.address1 + ' ' + this.props.account.mailingAddress.address2 + ' ' + this.props.account.mailingAddress.city + ', ' + this.props.account.mailingAddress.state + ' ' + this.props.account.mailingAddress.postalCode)} \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n {T.translate('addLocation.productPlan')}: \r\n {this.props.selectedWebProduct.productDisplayName} \r\n \r\n
\r\n
\r\n\r\n {this.props.selectedWebProduct &&\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {T.translate('addLocation.effectiveRate')} \r\n {T.translate('addLocation.term')} \r\n {T.translate('addLocation.terminationFee')} \r\n \r\n \r\n \r\n \r\n {CommonStore.formatDecimal(this.props.selectedWebProduct.kwhAvgPrice, 1)} ¢ {T.translate(\"addLocation.perkWh\")} \r\n \r\n \r\n {this.props.selectedWebProduct.contractLengthName ? (this.props.selectedWebProduct.contractLengthName + ' ' +\r\n this.props.selectedWebProduct.contractPeriodName) \r\n : T.translate(\"common.none\")}\r\n \r\n \r\n $ {this.props.selectedWebProduct.earlyTerminationFee} \r\n \r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n {this.props.selectedWebProduct && this.props.selectedWebProduct.productDocuments &&\r\n
\r\n {T.translate(\"addLocation.consumerInfo\")}
\r\n \r\n {\r\n this.props.selectedWebProduct.productDocuments.map((document) =>\r\n (\r\n {document.documentName} \r\n \r\n }\r\n\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('addLocation.acknowledgment', this.props.systemProperties)}\r\n
\r\n
\r\n
\r\n\r\n {this.props.systemProperties.myAcctHoldEnrollmentTransferServiceAddLocation &&\r\n
\r\n \r\n
\r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceAddLocationTitle' + this.props.lang.toUpperCase()], ';')}
\r\n
\r\n {CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceAddLocationDes' + this.props.lang.toUpperCase()], ';')}\r\n
\r\n
\r\n
\r\n }\r\n
\r\n \r\n {T.translate('common.close')} \r\n \r\n {T.translate('common.submit')}\r\n \r\n \r\n \r\n\r\n \r\n {T.translate('addLocation.areYouSureYouWantToNavigateAwayFromThisScreen')}
\r\n {T.translate('addLocation.yourMviRequestHasBeenSubmitted', this.props.systemProperties)}
}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('backflowInspection.pageTitle')}
\r\n
{T.translate('backflowInspection.accountNumber')}: {this.props.account.accountNumber}
\r\n
\r\n\r\n
{this.getErrorMessage()} \r\n\r\n {this.props.serviceErrorCode === 0 &&
\r\n\r\n \r\n
\r\n\r\n
{T.translate('backflowInspection.serviceRequest')} \r\n
\r\n
\r\n {T.translate('backflowInspection.serviceLocation')} \r\n \r\n {T.translate('addLocation.select')} \r\n {this.props.account.servicePoints.map((sp, i) =>\r\n {sp.fullAddress} \r\n )}\r\n \r\n
\r\n
\r\n {T.translate('backflowInspection.asset')} \r\n \r\n {T.translate('addLocation.select')} \r\n {this.getAssets().map((asset, i) =>\r\n {'(' + asset.serialNumber + ') ' + asset.assetDescription} \r\n )}\r\n \r\n
\r\n
\r\n\r\n
{T.translate('backflowInspection.serviceDate')} \r\n
\r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('common.cancel')} \r\n {T.translate('backflowInspection.submitServiceRequest')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('backflowInspection.backflowInspectionConfirmation')} \r\n\r\n {this.props.accountErrorMessage} \r\n\r\n \r\n
\r\n
\r\n \r\n {T.translate('backflowInspection.serviceAddress')}: \r\n {this.getSelectedServicePoint().fullAddress} \r\n \r\n
\r\n
\r\n \r\n {T.translate('backflowInspection.locationIdentifier')}: \r\n {this.getSelectedServicePoint().serviceProviderIdentifier} \r\n \r\n
\r\n
\r\n \r\n {T.translate('backflowInspection.asset')}: \r\n {T.translate('backflowInspection.assetDetail', this.getSelectedAsset())} \r\n \r\n
\r\n
\r\n \r\n {T.translate('backflowInspection.serviceDate')}: \r\n {CommonStore.formatDate(this.state.serviceDate)} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('backflowInspection.acknowledgment', this.props.systemProperties)}\r\n
\r\n
\r\n
\r\n\r\n {this.props.systemProperties.myAcctHoldEnrollmentTransferServiceBackflowInspection &&\r\n
\r\n \r\n
\r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceBackflowInspectionTitle' + this.props.lang.toUpperCase()], ';')}
\r\n
\r\n {CommonStore.textWrap(this.props.systemProperties['myAcctTranServiceBackflowInspectionDes' + this.props.lang.toUpperCase()], ';')}\r\n
\r\n
\r\n
\r\n }\r\n
\r\n \r\n {T.translate('common.close')} \r\n \r\n {T.translate('common.submit')}\r\n \r\n \r\n \r\n\r\n \r\n {T.translate('backflowInspection.areYouSureYouWantToNavigateAwayFromThisScreen')}
\r\n {T.translate('backflowInspection.yourRequestHasBeenSubmitted', this.props.systemProperties)}
}\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
{T.translate('threshold.pageTitle')}
\r\n
\r\n {T.translate('threshold.manageThresholdSubTitle')}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.state.activeTab === '1' &&
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('threshold.meter')} \r\n \r\n {T.translate(\"threshold.selectMeter\")} \r\n {\r\n this.props.accountMeterList.map(function (meter) {\r\n return {meter.meterSerialNumber} : {meter.meterTypeName} ({meter.unitOfMeasureCode}) ;\r\n })\r\n }\r\n \r\n
\r\n
\r\n
\r\n {this.state.selectedSerialNumber != 0 &&
\r\n
\r\n
\r\n {T.translate('threshold.minimumThreshold')} \r\n
\r\n
\r\n
\r\n
\r\n {T.translate('threshold.maximumThreshold')} \r\n
\r\n
\r\n
}\r\n
\r\n {this.state.selectedSerialNumber != 0 &&
\r\n
\r\n
\r\n
\r\n {T.translate('threshold.rolloverDays')} \r\n
\r\n
\r\n
\r\n
}\r\n\r\n
{this.props.ErrorMessage} \r\n\r\n {this.state.selectedSerialNumber != 0 &&
}\r\n\r\n {this.state.selectedSerialNumber != 0 &&
}\r\n\r\n
\r\n
\r\n\r\n
}\r\n\r\n {this.state.activeTab === '2' &&
\r\n\r\n {/**/}\r\n {/* {{*/}\r\n {/* rows: this.props.accountCommunications,*/}\r\n {/* columns: [*/}\r\n {/* { columnId: 'communicationDate', displayText: T.translate('threshold.date'), dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true },*/}\r\n {/* { columnId: 'communicationTypeText', displayText: T.translate('threshold.category') },*/}\r\n {/* { columnId: 'recipient', displayText: T.translate('threshold.recipient') },*/}\r\n {/* { columnId: 'thresholdChannelName', displayText: T.translate('threshold.channel'), hightlightCell: true },*/}\r\n {/* { columnId: 'communicationText', displayText: T.translate('threshold.content'), style: { width: '50%' } }*/}\r\n {/* ]*/}\r\n {/* }}*/}\r\n {/* */}\r\n\r\n
}\r\n\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n
\r\n \r\n
{T.translate('threshold.thresholdsUpdated')}
\r\n
{T.translate('threshold.thresholdSuccessfullyUpdated')}
\r\n
\r\n {this.props.systemProperties.myAcctDisplayPaymentProvider.index > 0 &&
\r\n
\r\n {T.translate('paymentSidebar.creditCardPaymentsSafe')}\r\n
\r\n
\r\n
}\r\n {(this.props.systemProperties.myAcctOtherPaymentTenderTypes.payByPhone || this.props.systemProperties.myAcctOtherPaymentTenderTypes.payWithCash || this.props.systemProperties.myAcctOtherPaymentTenderTypes.payByMail) &&\r\n (
\r\n
{T.translate('paymentSidebar.otherWaysPay')} \r\n
\r\n
\r\n\r\n {this.props.systemProperties.myAcctOtherPaymentTenderTypes.payByPhone &&\r\n
\r\n \r\n\r\n \r\n \r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctPayByPhoneText' + this.props.lang.toUpperCase()], ';')}
\r\n
{this.props.systemProperties.customerServicePhone}
\r\n
\r\n }\r\n\r\n {this.props.systemProperties.myAcctOtherPaymentTenderTypes.payWithCash &&\r\n
\r\n \r\n\r\n \r\n \r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctPayWithCashText' + this.props.lang.toUpperCase()], ';')}
\r\n
\r\n }\r\n\r\n {this.props.systemProperties.myAcctOtherPaymentTenderTypes.payByMail &&\r\n
\r\n \r\n\r\n \r\n \r\n
{CommonStore.textWrap(this.props.systemProperties['myAcctPayByMailText' + this.props.lang.toUpperCase()], ';')}
\r\n {this.props.systemProperties.messagingUtilityName}
\r\n
{CommonStore.textWrap(this.props.systemProperties.marketerBillingAddress)}
\r\n
\r\n }\r\n
\r\n
\r\n
)\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {props.data.accountName} {T.translate('autopay.endingIn')} {props.data.accountNumber ? props.data.accountNumber.substr(props.data.accountNumber.length - 4) : ''}\r\n
{props.data.expireMonth ? 'EXP ' + props.data.expireMonth + '/' + props.data.expireYear : ''} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {props.data.accountName &&
\r\n
\r\n {props.data.accountName} {T.translate('autopay.endingIn')} {props.data.accountNumber ? props.data.accountNumber.substr(props.data.accountNumber.length - 4) : ''}\r\n
}\r\n {!props.data.accountName &&
\r\n {T.translate('accountPay.selectPaymentMethod')}\r\n
}\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n {this.props.accountAutoPayment.accountAutoPayID > 0 && !this.props.showAutoPayForm &&
\r\n
\r\n
{T.translate('autopay.pageTitle')}
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('autopay.youAreCurrentlyEnrolledInAutoPay')} \r\n \r\n
\r\n
\r\n\r\n
{T.translate('autopay.autoPaySettings')} \r\n
\r\n
\r\n {T.translate('autopay.accountName')} \r\n {this.props.accountAutoPayment.paymentAccountName} {T.translate('autopay.endingIn')} {this.props.accountAutoPayment.accountNumber ? this.props.accountAutoPayment.accountNumber.substr(this.props.accountAutoPayment.accountNumber.length - 4) : ''} \r\n \r\n
\r\n {T.translate('autopay.amount')} \r\n {this.props.account.accountBillingTypeID === 1 ? ('$' + CommonStore.formatDecimal(this.props.accountAutoPayment.autoPayAmount)) : T.translate('autopay.billDueAmount')} \r\n \r\n
\r\n {T.translate('autopay.rechargeTrigger')} \r\n {this.props.accountAutoPayment.systemEventName} \r\n \r\n
\r\n\r\n {this.props.showFeePaymentAdvertisement &&\r\n
\r\n
{T.translate('suggestedPayment.paymentsIncursMessageText', this.state.paymentChargeFee)}\r\n
\r\n
\r\n }\r\n\r\n {this.props.account.accountBillingTypeID === 1 &&
}\r\n
{T.translate('autopay.stopAutoPay')} \r\n
}\r\n\r\n {(!this.props.accountAutoPayment.accountAutoPayID || this.props.showAutoPayForm) &&
\r\n
\r\n
{T.translate('autopay.pageTitle')}
\r\n\r\n
\r\n {T.translate('autopay.bySelectingAutopay')}\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n {this.props.showPaymentAccountCreated &&\r\n
\r\n {T.translate('autopay.yourPaymentAccountHasBeenCreated')}\r\n
\r\n }\r\n\r\n
\r\n
\r\n
{T.translate('autopay.paymentMethod')} \r\n \r\n
\r\n
\r\n\r\n {this.props.paymentAccounts && this.props.paymentAccounts.length > 0 &&\r\n
0 && this.props.showAutoPayForm}\r\n onChange={this.handleChange}\r\n components={{ Option: PaymentAccountOption, SingleValue: PaymentAccountSingleValue }}\r\n options={this.props.paymentAccounts}\r\n isSearchable={false}\r\n />\r\n }\r\n\r\n {(!this.props.paymentAccounts || this.props.paymentAccounts.length === 0) &&\r\n \r\n {T.translate('autopay.noPaymentMethodSelected')}\r\n
\r\n }\r\n\r\n {this.props.paymentAccounts && this.props.paymentAccounts.length > 0 &&\r\n \r\n {this.props.account.accountBillingTypeID === 1 && \r\n
\r\n
{T.translate('autopay.autoPayThresholdSelectOption')} \r\n
\r\n {T.translate('autopay.rechargeBalanceAmount')} \r\n
\r\n
\r\n {T.translate('autopay.rechargeDaysRemaining')} \r\n
\r\n\r\n {this.state.threshold === '1' &&
\r\n
\r\n
\r\n
\r\n
{T.translate('autopay.recommended')} \r\n
$40 \r\n
\r\n
\r\n
{T.translate('common.or')}
\r\n
\r\n
\r\n {T.translate('autopay.otherAmount')} \r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.state.threshold === '2' &&
\r\n
\r\n {T.translate('autopay.selectNumberOfDays')} \r\n \r\n 2 \r\n 3 \r\n 5 \r\n 7 \r\n 10 \r\n \r\n
\r\n
}\r\n\r\n
\r\n
\r\n
\r\n
{T.translate('autopay.amountToCharge')} \r\n\r\n {this.props.account.accountBillingTypeID === 1 &&
{T.translate('autopay.yourCardWillBeDebitedThisAmount')}
}\r\n {this.props.account.accountBillingTypeID !== 1 &&
{T.translate('autopay.yourCardWillBeDebitedTheAmountOwed')}
}\r\n\r\n {this.props.account.accountBillingTypeID === 1 &&
\r\n
\r\n
\r\n
{T.translate('autopay.recommended')} \r\n
$40 \r\n
\r\n
\r\n
{T.translate('common.or')}
\r\n
\r\n
\r\n {T.translate('autopay.otherAmount')} \r\n
\r\n
\r\n
}\r\n\r\n
\r\n
{this.props.paymentErrorMessage} \r\n\r\n {this.props.accountErrorMessage} \r\n\r\n {this.props.accountAutoPayment.accountAutoPayID > 0 &&\r\n {T.translate('common.cancel')} \r\n }\r\n\r\n {this.props.showFeePaymentAdvertisement &&\r\n \r\n
{T.translate('suggestedPayment.paymentsIncursMessageText', this.state.paymentChargeFee)}\r\n
\r\n
\r\n {T.translate('autopay.enrollInAutopay')}\r\n \r\n\r\n \r\n {T.translate('autopay.youAgreeToAndUnderstandThe')} {T.translate('autopay.termsOfService')} {T.translate('autopay.relatedToAutopay')}\r\n
\r\n }\r\n }\r\n\r\n
\r\n
\r\n\r\n
\r\n {T.translate('autopay.areYouSureYouWantStopAutoPay')}\r\n \r\n\r\n {this.props.showFeePaymentAdvertisement &&\r\n \r\n \r\n
{T.translate('suggestedPayment.paymentsIncursBodyOne', this.state.paymentChargeFee)}
\r\n
{T.translate('suggestedPayment.paymentsIncursBodyTwo')}
\r\n
\r\n {this.state.showDepositInstallments === true &&
\r\n
{T.translate('suggestedPayment.haveDepositsToPay')} \r\n
\r\n
\r\n
\r\n {T.translate('suggestedPayment.deposit')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
}\r\n \r\n {this.state.isPrepaid === true &&
{T.translate('suggestedPayment.invoiceBalacancePayentTitlePrepay')} }\r\n {this.state.isPrepaid === false &&
{T.translate('suggestedPayment.invoiceBalacancePayentTitlePostpay')} } \r\n\r\n {this.state.showBills === true &&
\r\n \r\n
\r\n
\r\n {T.translate('suggestedPayment.invoice')} \r\n
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.state.showSuggestedPayment === true &&
\r\n
\r\n
\r\n {T.translate('suggestedPayment.suggestedPayment')}: ${CommonStore.formatDecimal(this.state.suggestedPaymentAmount)} \r\n
\r\n
\r\n
}\r\n\r\n {this.state.showCurrentAccountBalance === true &&
\r\n
\r\n
\r\n {T.translate('suggestedPayment.currentBalance')}: ${CommonStore.formatDecimal(this.state.currentAccountBalance)} \r\n
\r\n
\r\n
}\r\n\r\n {this.state.showMinimumPayment === true &&
\r\n
\r\n
\r\n {T.translate('suggestedPayment.minimumPayment')}: ${CommonStore.formatDecimal(this.state.minPaymentAmount)} \r\n
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n
\r\n {T.translate('suggestedPayment.otherAdditional')}: \r\n
\r\n
\r\n
\r\n {T.translate('suggestedPayment.otherAdditionalExplanatoryText', this.props.systemProperties)} }\r\n
\r\n
\r\n\r\n {this.state.showDPPInstallments === true &&
\r\n
{T.translate('suggestedPayment.haveDPP')} \r\n
\r\n
\r\n
\r\n {T.translate('suggestedPayment.installments')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.props.showFeePaymentAdvertisement &&\r\n
\r\n
{T.translate('suggestedPayment.totalPayment')}: ${CommonStore.formatDecimal(this.state.totalPayment)} \r\n
\r\n
{T.translate('suggestedPayment.paymentsIncursMessageText', this.state.paymentChargeFee)}\r\n
\r\n
\r\n
\r\n }\r\n\r\n {this.props.showFeePaymentAdvertisement &&\r\n
\r\n \r\n
{T.translate('suggestedPayment.paymentsIncursBodyOne', this.state.paymentChargeFee)}
\r\n
{T.translate('suggestedPayment.paymentsIncursBodyTwo')}
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('accountPay.pageTitle')}
\r\n
{T.translate('accountPay.welcomePaymentSystem', this.props.systemProperties)}
\r\n
\r\n
\r\n\r\n
{T.translate('accountPay.infoAsOf')} {CommonStore.formatDate(new Date())} \r\n\r\n
\r\n
\r\n
\r\n {this.props.account.accountBillingTypeID === 1 &&\r\n
\r\n \r\n {T.translate('accountPay.accountNumber')} \r\n {this.props.account.accountNumber} \r\n \r\n \r\n {T.translate('accountPay.customerName')} \r\n {this.props.account.primaryPersonName} \r\n \r\n \r\n {T.translate('accountPay.amountBelowThreshold')} \r\n ${CommonStore.formatDecimal(this.props.account.disconnectThreshold)} \r\n \r\n \r\n {T.translate('accountPay.availableBalance')} \r\n 0 ? \"text-success\" : \"text-danger\"}>${CommonStore.formatDecimal(this.props.account.availableBalance)} {this.props.account.availableBalance > 0 && {T.translate('dashboard.credit')} } \r\n \r\n \r\n }\r\n\r\n {this.props.account.accountBillingTypeID !== 1 &&\r\n
\r\n \r\n {T.translate('accountPay.accountNumber')} \r\n {this.props.account.accountNumber} \r\n \r\n \r\n {T.translate('accountPay.customerName')} \r\n {this.props.account.primaryPersonName} \r\n \r\n \r\n {T.translate('accountPay.pastDueCharges')} \r\n ${CommonStore.formatDecimal(this.props.account.pastDueAmount)} \r\n \r\n \r\n {T.translate('accountPay.totalAccountBalance')} \r\n ${CommonStore.formatDecimal(this.props.invertBalance ? Math.abs(this.props.account.accountBalance) : this.props.account.accountBalance)} {this.props.account.accountBalance > 0 && {T.translate('dashboard.credit')} } \r\n \r\n \r\n }\r\n\r\n
\r\n
\r\n\r\n
{T.translate('accountPay.paymentAmount')} \r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
{T.translate('accountPay.useStoredPaymentMethod')} \r\n \r\n
\r\n\r\n
\r\n
\r\n x.paymentAccountTypeID === 2 || x.paymentAccountTypeID === 3)}\r\n isSearchable={false}\r\n />\r\n
\r\n
\r\n
\r\n\r\n {!this.props.accountPayCreditCardPaymentAccount.paymentAccountID && !this.props.getPaymentStripePK() &&
\r\n
\r\n
\r\n
{T.translate('accountPay.orMakeOneTimePayment')} \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.nameOnCard')} \r\n
\r\n
{T.translate('accountPay.holderNameRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.cardNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.expiration')} \r\n
\r\n
{T.translate(this.getExpirationDateError(this.state.fields[2]))}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.securityCode')} \r\n
\r\n
{T.translate(this.getCvvError(this.state.fields[3]))}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.billingZip')} \r\n
\r\n
{T.translate(this.getZipCodeError(this.state.fields[4]))}
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {!this.props.accountPayCreditCardPaymentAccount.paymentAccountID && this.props.getPaymentStripePK() &&
\r\n
\r\n
\r\n
{T.translate('accountPay.orMakeOneTimePayment')} \r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.cardNumber')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.expiration')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.securityCode')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('accountPay.billingZip')} \r\n
\r\n
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n {!!this.props.systemProperties.paymentusCreditCardCharge &&\r\n this.props.systemProperties.paymentusCreditCardCharge > 0 &&\r\n
\r\n
\r\n }\r\n \r\n
\r\n
\r\n {this.props.enableAuthenticatePaymentInfo &&
\r\n \r\n Authorize\r\n \r\n
}\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n {!this.props.account.isCashOnly && this.props.authPaymentVerified && !this.props.accountPayCreditCardPaymentAccount.paymentAccountID &&
\r\n
\r\n
{T.translate(\"accountPay.tokenizeCreditDetails\")}
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n
}\r\n\r\n {!this.props.account.isCashOnly && this.props.authPaymentVerified &&
\r\n {T.translate('accountPay.submitPayment')}\r\n }\r\n\r\n {this.props.paymentErrorMessage} \r\n\r\n {T.translate('accountPay.byClickingPaymentYouAgree') && \r\n {T.translate('accountPay.byClickingPaymentYouAgree')} {T.translate('accountPay.termsOfService')} \r\n {T.translate('accountPay.andUnderstandThePrivacyStatement')} {T.translate('accountPay.yourRightsAsCustomer')} \r\n
}\r\n \r\n
\r\n\r\n
\r\n \r\n
{T.translate('accountPay.yourPaymentHasBeenAccepted')}
\r\n
{T.translate('accountPay.yourPaymentConfirmationNumberIs')}
\r\n
{this.props.accountPayConfirmationNumber}
\r\n
\r\n {T.translate('accountPay.areYouSureWantPayMoreAmountDue')}
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('accountPay.pageTitleCheck')}
\r\n
{T.translate('accountPay.welcomePaymentSystemCheck', this.props.systemProperties)}
\r\n
\r\n
\r\n\r\n
{T.translate('accountPay.infoAsOf')} {CommonStore.formatDate(new Date())} \r\n\r\n
\r\n
\r\n
\r\n {this.props.account.accountBillingTypeID === 1 &&\r\n
\r\n \r\n {T.translate('accountPay.accountNumber')} \r\n {this.props.account.accountNumber} \r\n \r\n \r\n {T.translate('accountPay.customerName')} \r\n {this.props.account.primaryPersonName} \r\n \r\n \r\n {T.translate('accountPay.amountBelowThreshold')} \r\n ${CommonStore.formatDecimal(this.props.account.disconnectThreshold)} \r\n \r\n \r\n {T.translate('accountPay.availableBalance')} \r\n 0 ? \"text-success\" : \"text-danger\"}>${CommonStore.formatDecimal(this.props.account.availableBalance)} {this.props.account.availableBalance > 0 && {T.translate('dashboard.credit')} } \r\n \r\n \r\n }\r\n\r\n {this.props.account.accountBillingTypeID !== 1 &&\r\n
\r\n \r\n {T.translate('accountPay.accountNumber')} \r\n {this.props.account.accountNumber} \r\n \r\n \r\n {T.translate('accountPay.customerName')} \r\n {this.props.account.primaryPersonName} \r\n \r\n \r\n {T.translate('accountPay.pastDueCharges')} \r\n ${CommonStore.formatDecimal(this.props.account.pastDueAmount)} \r\n \r\n \r\n {T.translate('accountPay.totalAccountBalance')} \r\n ${CommonStore.formatDecimal(this.props.invertBalance ? Math.abs(this.props.account.accountBalance) : this.props.account.accountBalance)} {this.props.account.accountBalance > 0 && {T.translate('dashboard.credit')} } \r\n \r\n \r\n }\r\n\r\n
\r\n
\r\n\r\n
{T.translate('accountPay.paymentAmount')} \r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('accountPay.useStoredPaymentMethod')} \r\n \r\n
\r\n\r\n
\r\n
\r\n x.paymentAccountTypeID === 4)}\r\n isSearchable={false}\r\n />\r\n
\r\n
\r\n
\r\n\r\n {!this.props.accountPayEcheckPaymentAccount.paymentAccountID &&
\r\n\r\n
\r\n
\r\n
{T.translate('accountPay.orMakeOneTimePayment')} \r\n \r\n
\r\n\r\n {!this.props.paymentStripe &&
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.bankAccountNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('autopay.bankAccountType')} \r\n \r\n {\r\n this.props.systemProperties.bankAccountTypes.map(function (type) {\r\n return {type.name} ;\r\n })\r\n }\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
{T.translate('autopay.accountHolderName')} \r\n
\r\n
{T.translate('accountPay.holderNameRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.routingNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.props.paymentStripe &&
\r\n\r\n
\r\n
\r\n
\r\n
this.setState({ reactPlaidOpen: true })}>{T.translate('accountPay.clickSelectBankAccount')} \r\n {this.state.fields[2].isRequiredError &&
{T.translate('common.thisFieldIsRequired')}
}\r\n
\r\n
\r\n
\r\n\r\n
this.reactPlaidSuccess(token, metaData)}\r\n onExit={() => this.setState({ reactPlaidOpen: false })}\r\n />\r\n }\r\n\r\n
}\r\n\r\n
\r\n
\r\n
\r\n\r\n {this.props.enableAuthenticatePaymentInfo &&
\r\n \r\n Authorize\r\n \r\n
}\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n {!this.props.account.isCashOnly && this.props.authPaymentVerified && !this.props.accountPayEcheckPaymentAccount.paymentAccountID &&
\r\n
\r\n
{T.translate(\"accountPay.tokenizeCreditDetails\")}
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n
}\r\n\r\n {!this.props.account.isCashOnly && this.props.authPaymentVerified &&
\r\n {T.translate('accountPay.submitPayment')}\r\n }\r\n\r\n {this.props.paymentErrorMessage} \r\n\r\n {T.translate('accountPay.byClickingPaymentYouAgree') && \r\n {T.translate('accountPay.byClickingPaymentYouAgree')} {T.translate('accountPay.termsOfService')} \r\n {T.translate('accountPay.andUnderstandThePrivacyStatement')} {T.translate('accountPay.yourRightsAsCustomer')} \r\n
}\r\n \r\n
\r\n\r\n
\r\n \r\n
{T.translate('accountPay.yourPaymentHasBeenAccepted')}
\r\n
{T.translate('accountPay.yourPaymentConfirmationNumberIs')}
\r\n
{this.props.accountPayConfirmationNumber}
\r\n
\r\n {T.translate('accountPay.areYouSureWantPayMoreAmountDue')}
\r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('accountPay.pageTitleCrypto')}
\r\n
{T.translate('accountPay.welcomePaymentSystemCrypto')}
\r\n
\r\n\r\n
\r\n\r\n {this.props.cryptoPaymentEndpoint &&
{T.translate('accountPay.pageTitleCrypto')} }\r\n\r\n
{this.props.paymentErrorMessage} \r\n\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n\r\n
{ this.props.toggleDeletePaymentAccountConfirmModal(0); }}\r\n loading={this.props.paymentLoading}\r\n onConfirm={() => { this.onDelete(this.props.pa); }}>\r\n Are you sure you want to delete this Payment Method?\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('paymentMethod.title')}
\r\n
\r\n
\r\n\r\n {!this.props.showAddPaymentMethod &&
}\r\n\r\n {this.props.showAddPaymentMethod &&
\r\n
{T.translate('paymentMethod.paymentMethodType')} \r\n
\r\n
\r\n {(this.props.systemProperties.myAcctPaymentTenderTypes.eCheck || this.props.systemProperties.myAcctPaymentTenderTypes.eCheckPrepaid) &&\r\n
\r\n
\r\n }\r\n \r\n {this.state.paymentAccountTypeID === '3' &&
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.cardNickname')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
{T.translate('paymentMethod.giveThisCardNickname')} \r\n
\r\n\r\n {!this.props.getPaymentStripePK() &&
\r\n
\r\n
\r\n
{T.translate('paymentMethod.cardNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.expiration')} \r\n
\r\n
{T.translate(this.getExpirationDateError(this.state.fields[2]))}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.securityCode')} \r\n
\r\n
{T.translate(this.getCvvError(this.state.fields[3]))}
\r\n
\r\n
\r\n
}\r\n\r\n {this.props.getPaymentStripePK() &&\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.cardNumber')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.expiration')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('accountPay.securityCode')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n }\r\n {!this.props.getPaymentStripePK() &&
\r\n
\r\n
\r\n
{T.translate('paymentMethod.nameOnCard')} \r\n
\r\n
{T.translate('paymentMethod.holderNameRequired')}
\r\n
\r\n
\r\n
}\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.billingAddress')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.aptNumber')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.city')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.state')} \r\n \r\n {\r\n this.props.statesList.map((state, i) =>\r\n {state.name} \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.zipCode')} \r\n
\r\n
{T.translate(this.getZipCodeError(this.state.fields[5]))}
\r\n
\r\n
\r\n
\r\n\r\n
{this.props.paymentErrorMessage} \r\n\r\n
\r\n\r\n
\r\n
{T.translate(\"paymentMethod.tokenizeCreditDetails\")}
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.state.paymentAccountTypeID === '4' &&
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.bankAccountNickname')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
{T.translate('paymentMethod.giveThisBankAccountNickname')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.accountHolderName')} \r\n
\r\n
{T.translate('paymentMethod.holderNameRequired')}
\r\n
\r\n
\r\n
\r\n\r\n {!this.props.paymentStripe &&
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.bankAccountNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('autopay.bankAccountType')} \r\n \r\n {\r\n this.props.systemProperties.bankAccountTypes.map(function (type) {\r\n return {type.name} ;\r\n })\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.routingNumber')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentMethod.confirmRoutingNumber')} \r\n
\r\n
\r\n {this.state.fields[9].isRequiredError ? T.translate('common.thisFieldIsRequired') : ''}\r\n {this.state.fields[9].isCompareError ? T.translate('paymentMethod.enterSameValue') : ''}\r\n
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n {this.props.paymentStripe &&
\r\n\r\n
\r\n
\r\n
\r\n
this.setState({ reactPlaidOpen: true })}>{T.translate('accountPay.clickSelectBankAccount')} \r\n {this.state.fields[10].isRequiredError &&
{T.translate('common.thisFieldIsRequired')}
}\r\n
\r\n
\r\n
\r\n\r\n
this.reactPlaidSuccess(token, metaData)}\r\n onExit={() => this.setState({ reactPlaidOpen: false })}\r\n />\r\n }\r\n\r\n
{this.props.paymentErrorMessage} \r\n\r\n
\r\n
\r\n {!this.props.paymentStripe &&
}\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate(\"paymentMethod.tokenizeCreditDetails\")}
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n
\r\n
}\r\n\r\n
}\r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
{T.translate('paymentExtension.pageTitle')}
\r\n
\r\n\r\n
\r\n\r\n
{this.props.commonErrorMessage + this.props.paymentErrorMessage} \r\n\r\n {this.props.payExtensionRenderData.resourceLangKey !== '' &&
\r\n
\r\n
\r\n
\r\n
{T.translate('paymentExtension.youAreNotElegible')} \r\n
{T.translate(this.props.payExtensionRenderData.resourceLangKey, this.props.payExtensionRenderData)}
\r\n
\r\n
\r\n
}\r\n\r\n
\r\n {T.translate('paymentExtension.confirmPaymentExtensionMsg', this.props.payExtensionRenderData.extendedFormattedDates)}\r\n \r\n\r\n {CommonStore.objectHasProperties(this.props.paymentArrangement) && \r\n \r\n
\r\n
\r\n
\r\n
{T.translate('paymentExtension.youAreElegible')} \r\n
{T.translate('paymentExtension.paymentExtensionConditions', this.props.payExtensionRenderData)}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {T.translate('paymentExtension.amountDue')} \r\n {\"$ \" + this.props.paymentArrangement.accountBalance} \r\n \r\n \r\n {T.translate('paymentExtension.billDueDate')} \r\n {CommonStore.formatDate(this.props.payExtensionRenderData.paymentDueDate, 'MM-DD-YYYY')} \r\n \r\n \r\n {T.translate('paymentExtension.disconnectDate')} \r\n {CommonStore.formatDate(this.props.payExtensionRenderData.disconnectDate, 'MM-DD-YYYY')} \r\n \r\n \r\n {T.translate('paymentExtension.extendedThrough')} \r\n {this.props.payExtensionRenderData.extendedFormattedDates.extendedDateFormmat1} \r\n \r\n \r\n
\r\n
\r\n
\r\n {T.translate('paymentExtension.important')} {T.translate('paymentExtension.note')} \r\n
\r\n {T.translate('paymentExtension.requestPaymentExtension')} \r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
You're eligible for a Deferred Payment Plan at this time \r\n
We can move half of your negative balance to a Deferred Payment Plan (DPP) and apply a temporary credit to your account to be paid back weekly. You will need to initiate a payment to cover half of the negative amount you owe in order to qualify for a DPP.
\r\n
request a payment plan \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('paymentHistory.pageTitle')}
\r\n
\r\n
\r\n\r\n
{this.props.accountErrorMessage} \r\n\r\n {this.props.paymentHistoryList.length === 0 ?\r\n
{T.translate('common.noRecordsToDisplay')}
:\r\n
{T.translate('paymentHistory.displayingLastMonths', this.state)} {' ' + T.translate('paymentHistory.outOfRangeHistorical', this.state)}
}\r\n\r\n {this.props.phYears.map(year =>\r\n
\r\n
{year} \r\n {{\r\n rows: this.props.paymentHistoryList.filter((row) => row.year === year),\r\n columns: [\r\n { columnId: 'transactionDate', displayText: T.translate('paymentHistory.colPaymentDate'), dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true },\r\n { columnId: 'tenderStatusName', displayText: T.translate('paymentHistory.colStatus'), dataType: 'string', hightlightCell: true },\r\n { columnId: 'tenderTypeName', displayText: T.translate('paymentHistory.colPaymentMethod'), dataType: 'string' },\r\n { columnId: 'transactionTypeName', displayText: T.translate('paymentHistory.colTransactionTypeName'), dataType: 'string' },\r\n { columnId: 'authorizationNumber', displayText: T.translate('paymentHistory.colConfirmationNumber'), dataType: 'string' },\r\n { columnId: 'amount', displayText: T.translate('paymentHistory.colAmount'), dataType: 'currency' }\r\n ]\r\n }} \r\n \r\n )}\r\n
\r\n\r\n
\r\n
{T.translate('contactUs.pageTitle')}
\r\n
\r\n
\r\n\r\n
{this.getErrorText()} \r\n\r\n
\r\n
\r\n
{T.translate('contactUs.formTitle')} \r\n
\r\n
\r\n
{T.translate('contactUs.customerName')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('contactUs.accountNumber') + '*'} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('contactUs.emailAddress') + '*'} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
{T.translate('contactUs.phoneNumber') + '*'} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
{T.translate('contactUs.messageContent')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n {T.translate('common.submit')}\r\n \r\n \r\n
\r\n
\r\n
\r\n
{this.props.systemProperties.customerServicePhone}
\r\n
\r\n {T.translate('contactUs.customerCareHours')}
\r\n
\r\n
\r\n {this.props.systemProperties.messagingUtilityName}
\r\n {this.isSocialMediaVisible() &&\r\n
\r\n {T.translate('contactUs.socialMedia')}
\r\n \r\n {this.props.systemProperties.marketerFacebookUrl !== '' && this.props.systemProperties.marketerFacebookUrl !== '#' && \r\n }\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n
{T.translate('contactUs.taskCreationConfirmationContent')}
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('customerProfile.pageTitle')}
\r\n
\r\n
\r\n
\r\n {this.state.activeTab === '1' &&
\r\n
{T.translate('customerProfile.personalInformation')} \r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.mailingAddress')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.aptNumber')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.city')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.state')} \r\n \r\n {this.props.statesList.map((state, i) =>\r\n {state.name} \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.zipCode')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n {!this.props.systemProperties.myAcctAllowMailAddressEdit &&
\r\n {T.translate('customerProfile.editAddressNotAllowed')} *\r\n
}\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.emailAddress')} \r\n
\r\n {this.state.fields[3].isRequiredError &&
{T.translate('common.thisFieldIsRequired')}
}\r\n {this.state.fields[3].isEmailError &&
{T.translate('common.provideValidEmail')}
}\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.homePhone')} \r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.mobilePhone')} \r\n
\r\n
{T.translate('common.thisFieldIsRequired')}
\r\n
\r\n
\r\n
\r\n {this.props.systemProperties.myAcctShowLanguagePreference &&
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.languagePreference')} \r\n
{T.translate('customerProfile.notificationsProcessed')}
\r\n
\r\n
\r\n \r\n {T.translate('customerProfile.english')} \r\n {T.translate('customerProfile.spanish')} \r\n \r\n
\r\n
\r\n
\r\n
}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.notificationChannels')} \r\n
{T.translate('customerProfile.thereAreTwoDifferentMethodsUnderWhichYouCanReceiveNotifications')}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.props.account.accountBillingTypeID === 2 &&
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.billDeliveryMethod')} \r\n
{T.translate('customerProfile.thereAreTwoDifferentMethodsUnderWhichYouCanReceiveYourBills')}
\r\n
\r\n
\r\n
\r\n
\r\n
}\r\n\r\n
{this.getErrorMessage('1')} \r\n\r\n
\r\n {T.translate('customerProfile.saveUpdates')}\r\n \r\n\r\n {T.translate('common.cancel')} \r\n\r\n }\r\n\r\n {this.state.activeTab === '2' &&
\r\n\r\n
{this.getErrorMessage('2')} \r\n\r\n
{T.translate('customerProfile.passwordSecurity')} \r\n
\r\n\r\n
\r\n {T.translate('customerProfile.saveNewPassword')}\r\n \r\n\r\n {T.translate('customerProfile.securitySettings')} \r\n\r\n {false && \r\n
{T.translate('customerProfile.securePin')} \r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.newPin')} \r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.verifyPin')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{T.translate('customerProfile.twoFactorAuthentication')} \r\n
{T.translate('customerProfile.twoFactorAuthenticationRequiresAdditionalStep')}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {T.translate('customerProfile.save2FA')}\r\n \r\n\r\n }\r\n\r\n
\r\n \r\n
{T.translate('customerProfile.profileUpdated')}
\r\n
{T.translate('customerProfile.customerProfileSuccessfullyUpdated')}
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n
{T.translate('notification.pageTitle')}
\r\n
\r\n {T.translate('notification.manageNotificationsWithConvenience')}{T.translate('notification.manageNotificationsWithConvenienceNote')} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {this.state.activeTab === '1' &&
\r\n\r\n {this.state.notificationCategories.map((category, i) => (\r\n\r\n
\r\n
\r\n
{category.name} \r\n
{category.description}
\r\n
\r\n
\r\n
\r\n \r\n ))}\r\n\r\n
\r\n {T.translate('common.submit')}\r\n \r\n\r\n }\r\n\r\n {this.state.activeTab === '2' &&
\r\n\r\n \r\n {{\r\n rows: this.props.accountCommunications,\r\n columns: [\r\n { columnId: 'communicationDate', displayText: T.translate('notification.date'), dataType: 'date', format: 'MM/dd/yyyy', bold: true, italic: true },\r\n { columnId: 'communicationTypeText', displayText: T.translate('notification.category') },\r\n { columnId: 'recipient', displayText: T.translate('notification.recipient') },\r\n { columnId: 'notificationChannelName', displayText: T.translate('notification.channel'), hightlightCell: true },\r\n { columnId: 'communicationText', displayText: T.translate('notification.content'), style: { width: '50%' } }\r\n ]\r\n }}\r\n \r\n\r\n
}\r\n\r\n
\r\n\r\n
{this.props.profileErrorMessage} \r\n\r\n
\r\n \r\n
{T.translate('notification.notificationsUpdated')}
\r\n
{T.translate('notification.accountNotificationSuccessfullyUpdated')}
\r\n
\r\n \r\n);\r\n","import './css/bootstrap.min.css';\r\nimport './fonts/font-awesome.css';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Provider } from 'react-redux';\r\nimport { ConnectedRouter } from 'react-router-redux';\r\nimport { createBrowserHistory } from 'history';\r\nimport configureStore from './store/configureStore';\r\nimport App from './App';\r\n\r\n// Create browser history to use in the Redux store\r\nconst baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');\r\nexport const history = createBrowserHistory({ basename: baseUrl });\r\n\r\n// Get the application-wide store instance, prepopulating with state from the server where available.\r\nconst initialState = window.initialReduxState;\r\nconst store = configureStore(history, initialState);\r\n\r\nconst rootElement = document.getElementById('root');\r\n\r\nReactDOM.render(\r\n \r\n \r\n \r\n ,\r\n rootElement);\r\n","import { applyMiddleware, combineReducers, compose, createStore } from 'redux';\r\nimport thunk from 'redux-thunk';\r\nimport { routerReducer, routerMiddleware } from 'react-router-redux';\r\nimport * as Common from './Common';\r\nimport * as User from './User';\r\nimport * as Account from './Account';\r\nimport * as Payment from './Payment';\r\nimport * as Profile from './Profile';\r\nimport * as Service from './Service';\r\n\r\nexport default function configureStore(history, initialState) {\r\n const reducers = {\r\n common: Common.reducer,\r\n user: User.reducer,\r\n account: Account.reducer,\r\n payment: Payment.reducer,\r\n profile: Profile.reducer,\r\n service: Service.reducer\r\n };\r\n\r\n const middleware = [\r\n thunk,\r\n routerMiddleware(history)\r\n ];\r\n\r\n // In development, use the browser's Redux dev tools extension if installed\r\n const enhancers = [];\r\n const isDevelopment = process.env.NODE_ENV === 'development';\r\n if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {\r\n enhancers.push(window.devToolsExtension());\r\n }\r\n\r\n const rootReducer = combineReducers({\r\n ...reducers,\r\n routing: routerReducer\r\n });\r\n\r\n return createStore(\r\n rootReducer,\r\n initialState,\r\n compose(applyMiddleware(...middleware), ...enhancers)\r\n );\r\n}\r\n"],"sourceRoot":""} 
\r\n }){kind=icon}
\r\n 
\r\n