\n {this.props.i18n.common.delete}\n \n );\n }\n }\n\n isSelectedPayment(payment) {\n return this.state.selectedPayment == payment && payment.is_scheduled;\n }\n\n toggleSelectedPayment(payment) {\n if (!payment.is_scheduled) {\n this.setState({selectedPayment: payment});\n this.showPayment(payment);\n }\n else if (this.isSelectedPayment(payment)) {\n this.setState({selectedPayment: null});\n }\n else {\n this.setState({selectedPayment: payment});\n }\n }\n\n paymentDetailsModal() {\n return (\n \n );\n }\n\n toggleDetailsModal() {\n this.setState({ isDetailsModalOpen: !this.state.isDetailsModalOpen });\n }\n\n showPayment(payment) {\n this.props.fetchPayment(payment.id);\n this.setState({ isDetailsModalOpen: true });\n }\n\n editPayment(payment) {\n if (this.props.config.feature.bill_search_enabled) {\n this.toggleEditPaymentModal();\n }\n else {\n hashHistory.push(`payer/accounts/${payment.account.id}/payment/${payment.id}`);\n }\n }\n\n deletePayment(payment) {\n this.toggleConfirmDeleteModal();\n }\n\n paymentAmount(payment) {\n return (\n \n {format.currency(payment.amount)}\n
\n );\n }\n\n paymentStatus(payment) {\n let statusLabel = null;\n let statusText = null;\n\n if (payment.is_pending_submission) {\n statusLabel = \"warning\";\n statusText = this.props.i18n.portal.dashboard.pending_submission;\n }\n else if (payment.is_scheduled) {\n statusLabel = \"primary\";\n statusText = this.props.i18n.portal.dashboard.scheduled;\n }\n else if (payment.is_processing) {\n statusLabel = \"warning\";\n statusText = this.props.content.payment_status_processing;\n }\n else if (payment.is_completed) {\n statusLabel = \"success\";\n statusText = this.props.i18n.portal.dashboard.completed;\n }\n else if (payment.is_cancelled || payment.is_failed) {\n statusLabel = \"danger\";\n statusText = this.props.i18n.portal.dashboard.failed;\n }\n\n return (\n \n {this.autopayStatus(payment)}\n \n {statusText}\n \n
\n );\n }\n\n autopayStatus(payment) {\n if (payment.is_recurring) {\n return (\n \n \n {this.props.i18n.portal.dashboard.autopay}\n \n
\n );\n }\n }\n\n accountDetails(payment) {\n const invoicer = this.props.config.feature.bill_search_enabled;\n const getDetails = invoicer ? this.invoicerAccountDetails : this.nonInvoicerAccountDetails;\n const details = getDetails(payment);\n return (\n \n {details}\n
\n );\n }\n\n invoicerAccountDetails(payment) {\n return (\n \n
\n {payment.account.external_key}\n
\n
\n {payment.account.payer.name}\n
\n
\n
\n {accountType}\n {payment.account.external_code}\n
\n
\n {payment.account.description}\n
\n
\n {this.props.i18n.portal.dashboard.confirmation}\n {` #${ payment.confirmation_code }`}\n
\n );\n }\n }\n\n paymentDate(payment) {\n return (\n \n {format.date(payment.payment_date)}\n
\n );\n }\n\n emptyList() {\n return (\n \n {this.props.i18n.portal.ada_headers.no_results}
\n {this.props.i18n.portal.dashboard.no_results_message}\n \n );\n }\n\n pagination() {\n return (\n \n );\n }\n\n confirmDeleteModal() {\n return (\n \n );\n }\n\n toggleConfirmDeleteModal() {\n this.setState({\n isConfirmDeleteModalOpen: !this.state.isConfirmDeleteModalOpen\n });\n }\n\n deleteSelectedPayment() {\n if (this.state.selectedPayment) {\n this.props.deletePayment(this.state.selectedPayment);\n this.toggleConfirmDeleteModal();\n }\n }\n\n editPaymentConfirmModal() {\n return (\n \n );\n }\n\n editSelectedPayment() {\n this.toggleEditPaymentModal();\n this.props.onEditPayment(this.state.selectedPayment);\n }\n\n toggleEditPaymentModal() {\n this.setState({isEditPaymentModalOpen: !this.state.isEditPaymentModalOpen});\n }\n\n render() {\n if (this.props.loading || !this.props.paymentsData) {\n return ;\n }\n else if (this.props.paymentsData.total_payments == 0) {\n return this.emptyList();\n }\n else {\n return (\n \n {this.paymentsList(this.props.paymentsData.payments)}\n {this.pagination()}\n {this.paymentDetailsModal()}\n {this.confirmDeleteModal()}\n {this.editPaymentConfirmModal()}\n
\n );\n }\n }\n}\n\nPaymentsList.propTypes = {\n paymentsData: PropTypes.object,\n loading: PropTypes.bool,\n onPageChange: PropTypes.func,\n deletePayment: PropTypes.func.isRequired,\n abilities: PropTypes.object.isRequired,\n i18n: PropTypes.object.isRequired,\n config: PropTypes.object.isRequired,\n content: PropTypes.object.isRequired,\n onEditPayment: PropTypes.func.isRequired,\n fetchPayment: PropTypes.func.isRequired,\n fetchedPayment: PropTypes.object,\n fetchingPayment: PropTypes.bool\n};\n\nexport default PaymentsList;\n","import React from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from '../../../components/common/Button';\n\nclass PortalAgreementModal extends React.Component {\n render() {\n return (\n {})}\n className=\"portal-agreement-modal\">\n \n {this.props.agreementLabel}\n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nPortalAgreementModal.propTypes = {\n isOpen: PropTypes.bool,\n toggle: PropTypes.func,\n acceptAction: PropTypes.func,\n declineAction: PropTypes.func,\n agreementNotice: PropTypes.string,\n agreementLabel: PropTypes.node,\n i18n: PropTypes.object.isRequired\n};\n\nexport default PortalAgreementModal;\n","import { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\nimport DashboardScreen from './screen';\nimport * as actionCreators from '../../state/screens/dashboard/actions';\n\nfunction mapStateToProps(state) {\n return {\n unconfirmedPayment: state.screens.dashboard.unconfirmedPayment,\n accountRecurrenceErrors: state.screens.dashboard.accountRecurrenceErrors,\n clearAccountRecurrenceErrors: state.screens.dashboard.clearAccountRecurrenceErrors,\n showWelcome: state.screens.dashboard.showWelcome,\n fetchedPayment: state.screens.dashboard.fetchedPayment,\n fetchingPayment: state.screens.dashboard.fetchingPayment,\n splitsQuery: state.screens.dashboard.splitsQuery,\n splits: state.screens.dashboard.splits,\n splitsData: state.screens.dashboard.splitsData,\n };\n}\n\nfunction mapDispachToProps(dispatch) {\n return bindActionCreators(actionCreators, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispachToProps)(DashboardScreen);\n","import React, { Component } from 'react';\nimport { PropTypes } from 'prop-types';\nimport { Link, hashHistory } from 'react-router';\nimport BillsOverview from './components/BillsOverview';\nimport AccountsOverview from './components/AccountsOverview';\nimport TabSet from '../../components/common/TabSet';\nimport Tab from '../../components/common/Tab';\nimport Icon from 'shared/components/Icon';\nimport Button from '../../components/common/Button';\nimport PaymentsList from './components/PaymentsList';\nimport ExternalBillsTable from '../../components/common/ExternalBillsTable';\nimport ExternalBillAPI from '../../api/externalBillAPI';\nimport ExternalPaymentsTable from '../../components/common/ExternalPaymentsTable';\nimport ExternalPaymentAPI from '../../api/externalPaymentAPI';\nimport PaymentAPI from '../../api/paymentAPI';\nimport BillDocumentAPI from '../../api/billDocumentAPI';\nimport BillDocumentsModal from '../../components/common/BillDocumentsModal';\nimport NoticePopover from '../../components/common/NoticePopover';\nimport PaymentDetailsModal from './components/PaymentDetailsModal';\nimport PortalAgreementModal from './components/PortalAgreementModal';\nimport ReactMarkdown from 'react-markdown';\n\nclass DashboardScreen extends Component {\n\n constructor(props) {\n super(props);\n\n this.togglePopover = this.togglePopover.bind(this);\n this.state = {\n activeTab: \"transactions\",\n isPaymentDetailsModalOpen: false,\n isAgreementModalOpen: false,\n popoverOpen: false,\n accountsFilter: ''\n };\n\n this.exportData = this.exportData.bind(this);\n this.transactionsTabSelected = this.transactionsTabSelected.bind(this);\n this.externalPaymentsTabSelected = this.externalPaymentsTabSelected.bind(this);\n this.externalBillsTabSelected = this.externalBillsTabSelected.bind(this);\n this.accountsFilterChanged = this.accountsFilterChanged.bind(this);\n this.togglePaymentDetailsModal = this.togglePaymentDetailsModal.bind(this);\n this.externalPaymentSelected = this.externalPaymentSelected.bind(this);\n this.filterExternalPayments = this.filterExternalPayments.bind(this);\n this.pageExternalPayments = this.pageExternalPayments.bind(this);\n this.sortExternalPayments = this.sortExternalPayments.bind(this);\n this.downloadBillDocument = this.downloadBillDocument.bind(this);\n this.filterExternalBills = this.filterExternalBills.bind(this);\n this.pageExternalBills = this.pageExternalBills.bind(this);\n this.sortExternalBills = this.sortExternalBills.bind(this);\n this.submitPortalRecurrence = this.submitPortalRecurrence.bind(this);\n this.acceptPortalAgreement = this.acceptPortalAgreement.bind(this);\n this.declinePortalAgreement = this.declinePortalAgreement.bind(this);\n this.removeAccountRecurrence = this.removeAccountRecurrence.bind(this);\n this.pageSplits = this.pageSplits.bind(this);\n this.filterSplits = this.filterSplits.bind(this);\n this.sortSplits = this.sortSplits.bind(this);\n }\n\n componentWillMount() {\n this.checkPasswordChangeRequired();\n this.checkPortalAgreement();\n this.fetchOverview();\n this.props.clearPayments();\n this.props.fetchPayments();\n this.props.fetchPayMethods();\n }\n\n componentWillReceiveProps(nextProps) {\n this.handleExternalPayment(nextProps);\n this.handleDeletedPayment(nextProps);\n this.handleUnconfirmedPayment(nextProps);\n }\n\n handleExternalPayment(nextProps) {\n if (nextProps.externalPayment) {\n this.setState({\n selectedPayment: nextProps.externalPayment,\n isPaymentDetailsModalOpen: true\n });\n this.props.clearExternalPayment();\n }\n }\n\n handleDeletedPayment(nextProps) {\n if (nextProps.deletedPayment) {\n this.props.fetchPayments();\n this.fetchOverview();\n this.props.clearDeletedPayment();\n }\n }\n\n handleUnconfirmedPayment(nextProps) {\n if (nextProps.unconfirmedPayment) {\n this.props.clearUnconfirmedPayment();\n hashHistory.push('payer/bill_payment');\n }\n }\n\n pageSplits(data) {\n this.props.fetchSplits({\n paymentId: this.props.fetchedPayment.id,\n page: data.selected,\n query: this.props.splitsQuery,\n sort_order: this.props.splitsSortOrder\n });\n }\n\n filterSplits(query, props) {\n this.props.setSplitsQuery(query);\n\n this.props.fetchSplits({\n paymentId: this.props.fetchedPayment.id,\n query,\n sort_order: this.props.splitsSortOrder,\n });\n }\n\n sortSplits(sortOrder) {\n this.props.setSplitsSortOrder(sortOrder);\n this.props.fetchSplits({\n paymentId: this.props.fetchedPayment.id,\n sort_order: sortOrder,\n query: this.props.splitsQuery\n });\n }\n\n checkPasswordChangeRequired() {\n if (this.props.currentUser.password_change_required) {\n hashHistory.push('reset_password');\n }\n }\n\n checkPortalAgreement() {\n const required = this.props.config.portal_agreement_required;\n const accepted = this.props.currentUser.portal_user.portal_agreement_accepted;\n if (required && !accepted) {\n this.setState({isAgreementModalOpen: true});\n }\n }\n\n agreementModal() {\n return (\n \n );\n }\n\n acceptPortalAgreement() {\n this.setState({isAgreementModalOpen: false});\n this.props.createPortalAgreement(this.props.currentUser.portal_user);\n }\n\n declinePortalAgreement() {\n const logoutUrl = this.props.config.logout_url;\n const redirect = logoutUrl ? function() { window.location = logoutUrl; } : null;\n this.props.logout(redirect);\n }\n\n fetchOverview() {\n if (this.props.config.feature.bill_search_enabled) {\n this.props.fetchBillsOverview();\n }\n else {\n this.props.fetchAccounts(this.props.currentUser.portal_user);\n }\n }\n\n togglePopover() {\n this.setState({\n popoverOpen: !this.state.popoverOpen\n });\n }\n\n billsOverview() {\n if (this.props.config.feature.bill_search_enabled) {\n return (\n \n );\n }\n }\n\n accountsOverview() {\n if (!this.props.config.feature.bill_search_enabled) {\n return (\n \n );\n }\n }\n\n submitPortalRecurrence(portalPayer, recurrence, account) {\n this.props.createAccountRecurrence(portalPayer, recurrence, account);\n this.props.fetchPayments();\n }\n\n activitySection() {\n return (\n \n \n {this.props.i18n.portal.dashboard.activity.heading}\n
\n \n
\n {this.activityToolbar()}\n {this.activityTabs()}\n
\n
\n {this.transactionsTab()}\n {this.externalPaymentsTab()}\n {this.externalBillsTab()}\n
\n
\n \n {this.paymentHistoryNoticeButton()}\n {this.paymentHistoryNotice()}\n
\n );\n }\n\n activityTabs() {\n return (\n \n \n \n \n \n );\n }\n\n // --- TRANSACTIONS\n transactionsTabSelected() {\n this.setState({activeTab: \"transactions\"});\n }\n\n externalPaymentsTabSelected() {\n this.props.fetchExternalPayments({ retrieve: true });\n this.setState({activeTab: \"externalPayments\"});\n }\n\n externalBillsTabSelected() {\n this.props.fetchExternalBills({ retrieve: true });\n this.setState({activeTab: \"externalBills\"});\n }\n\n transactionsTab() {\n if (this.state.activeTab === \"transactions\") {\n const paymentsData = this.props.payments.data;\n const loading = this.props.loading.fetch_payments && !paymentsData;\n const listProps = {\n ...this.props,\n paymentsData,\n loading,\n onPageChange: this.pagePayments.bind(this),\n onSplitsPageChange: this.pageSplits.bind(this),\n onSplitsFilterChange: this.filterSplits.bind(this),\n onSplitsSortChange: this.sortSplits.bind(this)\n };\n return (\n \n {this.transactionsFilter()}\n
\n {this.props.i18n.portal.ada_headers.transactions_section}
\n \n \n
\n
\n \n
\n
\n \n {this.accountsOptions()}\n \n \n {this.props.content.welcome_section_label}\n
\n \n \n );\n }\n }\n\n render() {\n const dashboardClass = this.getDashboardClass();\n return (\n \n
\n {this.welcomeSection()}\n {this.billsOverview()}\n {this.accountsOverview()}\n {this.activitySection()}\n {this.billDocumentsModal()}\n {this.paymentDetailsModal()}\n {this.agreementModal()}\n
\n
\n
\n {this.props.i18n.portal.otp.select_account}\n
\n {this.props.accounts.map((account) => this.accountLink(account))}\n
{this.props.i18n.portal.otp.header}
\n {this.paymentFooterNotice()}\n \n );\n }\n\n content() {\n if (!this.props.loading) {\n return (\n \n {this.accountForm()}\n {this.accountsList()}\n {this.paymentForm()}\n
\n );\n }\n }\n\n loading() {\n if (this.props.loading) {\n return (\n \n );\n }\n }\n\n render() {\n return (\n \n {this.formErrors()}\n
\n
\n {this.header()}\n {this.loading()}\n {this.content()}\n
\n
\n
\n {this.props.i18n.portal.ada_headers.account_lookup_form}\n
\n \n \n );\n }\n }\n\n submitAccount(account) {\n this.props.clearErrors();\n if (this.props.registration) {\n this.props.createRegistrationAccount(this.props.registration, account);\n }\n else {\n this.props.createRegistration(account);\n }\n }\n\n accounts() {\n if (this.props.accounts.length) {\n return (\n \n {this.props.accounts.map(this.userDetails)}\n
\n );\n }\n }\n\n actions() {\n if (this.props.accounts.length) {\n return (\n \n
\n {this.actionButton('findAccount', this.props.i18n.portal.sign_up.add_account, 'plus-circle')}\n {this.actionButton('register', this.props.i18n.common.register)}\n
\n
\n User Credentials Form\n
\n \n \n );\n }\n }\n\n submitUser(user) {\n this.props.clearErrors();\n this.props.createUser(this.props.registration, user);\n }\n\n loading() {\n if (this.props.loading) {\n return (\n \n );\n }\n }\n\n content() {\n if (!this.props.loading) {\n return (\n \n {this.accounts()}\n {this.actions()}\n {this.accountForm()}\n {this.userForm()}\n
\n );\n }\n }\n\n render() {\n return (\n \n {this.formErrors()}\n
\n
\n
\n {this.props.i18n.portal.sign_up.register_account}\n
\n {this.loading()}\n {this.content()}\n \n
\n
\n {this.props.i18n.portal.payer.settings.manage_pay_methods}\n
\n \n \n );\n }\n }\n\n isPayMethodSelected(payMethod) {\n if (payMethod && this.state.selectedPayMethod) {\n return payMethod.id == this.state.selectedPayMethod.id;\n }\n }\n\n payMethodActions() {\n return (\n \n {this.addPayMethodButton()}{' '}\n {this.removePayMethodButton()}{' '}\n {this.defaultPayMethodButton()}\n
\n );\n }\n\n addPayMethodButton() {\n return (\n \n );\n }\n\n removePayMethodButton() {\n if (this.state.selectedPayMethod) {\n return (\n \n );\n }\n }\n\n defaultPayMethodButton() {\n if (this.state.selectedPayMethod && !this.state.selectedPayMethod.default) {\n return (\n \n );\n }\n }\n\n setDefaultPayMethod() {\n this.props.savePayMethod(this.state.selectedPayMethod, {\n default: true\n });\n }\n\n toggleSelectedPayMethod(payMethod) {\n if (this.isPayMethodSelected(payMethod)) {\n this.setState({ selectedPayMethod: null });\n }\n else {\n this.setState({ selectedPayMethod: payMethod });\n }\n }\n\n payMethodDeleteModal() {\n return (\n \n );\n }\n\n togglePayMethodDeleteModal() {\n this.setState({\n isPayMethodDeleteModalOpen: !this.state.isPayMethodDeleteModalOpen\n });\n }\n\n deleteSelectedPayMethod() {\n this.props.deletePayMethod(this.state.selectedPayMethod);\n }\n\n payMethodModal() {\n const ccEnabled = this.props.config.pay_method_config.cc_enabled;\n const canManageCreditCards = this.props.abilities.manage_cc_pay_method;\n return (\n \n );\n }\n\n togglePayMethodModal() {\n this.props.clearSavePayMethodErrors();\n this.setState({\n isPayMethodModalOpen: !this.state.isPayMethodModalOpen\n });\n }\n\n closePayMethodModal() {\n this.setState({ isPayMethodModalOpen: false });\n }\n // ---\n\n // --- USERS\n usersSection() {\n if (this.assignmentEnabled) {\n return (\n \n \n {this.props.i18n.portal.payer.settings.manage_users}\n
\n \n
\n {this.usersTable()}\n {this.userTabs()}\n {this.payMethodAssignmentsTable()}\n
\n
\n {this.addPayMethodAssignmentButton()}{' '}\n {this.removePayMethodAssignmentButton()}\n
\n );\n }\n\n addPayMethodAssignmentButton() {\n return (\n \n );\n }\n\n payMethodAssignmentModal() {\n return (\n \n );\n }\n\n getAssignablePayMethods() {\n if (this.props.payMethods && Array.isArray(this.props.payMethodAssignments)) {\n return this.props.payMethods.filter((payMethod) => {\n return !this.props.payMethodAssignments.find((assignedPayMethod) => {\n return assignedPayMethod.id == payMethod.id;\n });\n });\n }\n }\n\n assignPayMethod(payMethod) {\n this.props.createPayMethodAssignment(this.state.selectedUser, payMethod);\n this.togglePayMethodAssignmentModal();\n }\n\n togglePayMethodAssignmentModal() {\n this.setState({\n isPayMethodAssignmentModalOpen: !this.state.isPayMethodAssignmentModalOpen\n });\n }\n\n removePayMethodAssignmentButton() {\n const selectedPayMethod = this.state.selectedPayMethodAssignment;\n if (selectedPayMethod && this.canRemovePayMethod(selectedPayMethod)) {\n return (\n \n {this.props.i18n.common.remove}\n \n );\n }\n }\n\n canRemovePayMethod(payMethod) {\n const hasAbility = this.props.abilities.manage_portal_pay_method_assignment;\n const assignedPayMethod = this.props.payMethods.find((p) => {\n return p.id == payMethod.id;\n });\n return hasAbility && assignedPayMethod;\n }\n\n payMethodAssignmentDeleteModal() {\n return (\n \n );\n }\n\n togglePayMethodAssignmentDeleteModal() {\n this.setState({\n isPayMethodAssignmentDeleteModalOpen: !this.state.isPayMethodAssignmentDeleteModalOpen\n });\n }\n\n deleteSelectedPayMethodAssignment() {\n const portalUser = this.state.selectedUser;\n const payMethod = this.state.selectedPayMethodAssignment;\n this.props.deletePayMethodAssignment(portalUser, payMethod);\n this.toggleSelectedPayMethodAssignment();\n this.togglePayMethodAssignmentDeleteModal();\n }\n // ---\n\n render() {\n return (\n \n
\n {this.payMethodsSection()}\n {this.usersSection()}\n
\n {this.payMethodModal()}\n {this.payMethodDeleteModal()}\n {this.payMethodAssignmentModal()}\n {this.payMethodAssignmentDeleteModal()}\n