/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import moment from 'moment'; import GoCardlessPaymentButton from 'ui/_pages/invoices/paymentButtons/GoCardlessPaymentButton'; import SpreedlyPaymentButton from 'ui/_pages/invoices/paymentButtons/SpreedlyPaymentButton'; import ForteAchPaymentButton from 'ui/_pages/invoices/paymentButtons/ForteAchPaymentButton'; import MidtransPaymentButton from 'ui/_pages/invoices/paymentButtons/MidtransPaymentButton'; import PeachPaymentsPaymentButton from 'ui/_pages/invoices/paymentButtons/PeachPaymentsPaymentButton'; import PayPalPaymentButton from 'ui/_pages/invoices/paymentButtons/PayPalPaymentButton'; import RazorPayPaymentButton from 'ui/_pages/invoices/paymentButtons/RazorPayPaymentButton'; import EpayPaymentButton from 'ui/_pages/invoices/paymentButtons/EpayPaymentButton'; import LiquidPayPaymentButton from 'ui/_pages/invoices/paymentButtons/LiquidPayPaymentButton'; import HostedPaymentProviderButton from 'ui/_pages/invoices/paymentButtons/HostedPaymentProviderButton'; import ResponsiveTable from 'ui/components/tables/ResponsiveTable'; import AuthenticatedLink from 'ui/components/AuthenticatedLink'; import withCustomComponent from 'ui/components/withCustomComponent'; import { withRouter } from 'next/router'; import { routes } from 'env/routes'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; import { isServer } from 'env/ssr/ServerSideRenderManager'; @withCustomComponent('PaymentHistory') @withTranslation() @withRouter @inject('authStore', 'appStore', 'invoicingStore') @observer class PaymentHistory extends React.Component { componentDidMount() { const { appStore, t, router } = this.props; const { business, configuration } = appStore; if (configuration['Forte.eCheckPayments']) { const forteCallback = (e) => { var response = JSON.parse(e.data); switch (response.event) { case 'begin': //call to forte checkout is successful break; case 'success': const agent = appStore.getAgent(); agent.requests .post(`/invoices/ForteResult`, response) .then(() => { appStore.setPopMessage( t("Thank you, we'll process your payment shortly.") ); setTimeout(function () { window.location.reload(1); }, 5000); }) .catch((xhr) => { appStore.setPopMessage( t( 'Sorry, transaction failed. failed reason is {{responseText}}', { responseText: xhr.responseText } ) ); }); break; case 'failure': appStore.setPopMessage( t( 'Sorry, transaction failed. failed reason is {{response_description}}', { response_description: response.response_description } ) ); } }; if (!isServer()) { const script = document.createElement('script'); script.src = 'https://checkout.forte.net/v1/js'; document.body.appendChild(script); window.forteCallback = window.forteCallback ?? forteCallback; } } if (router.query.gc_result == 'ok') { //Send to complete if in sign-up flow if (router.pathname == routes.signup_payment) router.push(routes.signup_complete); else router.push(routes.invoices); appStore.setPopMessage( t('Thank you, your direct debit agreement has been set correctly.') ); } if (router.query.gc_result == 'fail') { if (router.pathname != routes.signup_payment) router.push(routes.invoices); appStore.setPopMessage( t('Sorry, your direct debit agreement could not be set.') ); } if (router.query.payment_result == 'fail') { //Send to invoices list if not in sign-up flow if (router.pathname != routes.signup_payment) router.push(routes.invoices); appStore.setPopMessage(t('Sorry, we could not process your payment')); } if (router.query.payment_result == 'awaiting') { //Send to complete if in sign-up flow if (router.pathname == routes.signup_payment) router.push(routes.signup_complete); else router.push(routes.invoices); appStore.setPopMessage( t('Thank you. We will check your payment shortly.') ); } if (router.query.payment_result == 'ok') { //Send to complete if in sign-up flow if (router.pathname == routes.signup_payment) router.push(routes.signup_complete); else router.push(routes.invoices); appStore.setPopMessage(t('Thank you. We have received your payment.')); } } render() { const { t, componentName, appStore, authStore, invoicingStore, showPaidInvoices = true, showUnpaidInvoices = true, } = this.props; const { customer, hasLoadedCustomer } = authStore; const { business, configuration } = appStore; const { paidInvoices, unpaidInvoices, invoices, hasLoadedInvoices, } = invoicingStore; if (!hasLoadedCustomer || !hasLoadedInvoices) return

; return (

{t('Invoices and Payments')} {customer.HasAcceptedStripeACHAgreement && customer.HasVerifiedStripeACHDeposits && (

{t( 'Your bank account has been verified and is set up for payments. We will use these details to process any due invoices.' )}

)} {invoices.length === 0 && (

{t('You have no invoices or payments.')}

)} {invoices.length > 0 && ( {t('Date')} {t('Amount')} {t('Due')} {t('Status')} {showUnpaidInvoices && unpaidInvoices.map((invoice, i) => { const invoiceIsBeingProcessed = invoice.CustomData && (invoice.CustomData ?? '').indexOf('tok_') === -1 && (invoice.CustomData ?? '').indexOf('vt_') === -1; return ( #{invoice.InvoiceNumber} {' - '} {moment(invoice.CreatedOn).format('L')} {invoice.CustomData == null && ( {customer.HasGoCardlessContractNumber && customer.EnableGoCardlessPayments ? t( 'To be paid by Direct Debit by {{DueDate, L}}', { DueDate: new Date(invoice.DueDate), } ) : customer.RegularPaymentProvider === 'StripeACH' ? t( 'To be paid by Stripe ACH by {{DueDate, L}}', { DueDate: new Date(invoice.DueDate), } ) : customer.RegularPaymentProvider === 'MultiGateway' && customer.CardNumber ? t( 'To be paid by {{DueDate, L}}', { CardNumber: customer.CardNumber, DueDate: new Date(invoice.DueDate), } ) : t('To be paid by {{DueDate, L}}', { DueDate: new Date(invoice.DueDate), })} )} {configuration['Members.PrintInvoices'] && ( <> {' '} {t('Download')} )} {invoice.DueAmount <= 0 && ( )} {invoice.DueAmount > 0 && ( )} {/* {% if invoice.CustomData == null or invoice.CustomData contains 'tok_' or invoice.CustomData contains 'vt_' %} */} {!invoiceIsBeingProcessed && ( <> {t('Pending')} {customer.EnableGoCardlessPayments && !customer.HasGoCardlessContractNumber && ( )} {configuration['Spreedly.Enabled'] == 'True' && ( )} {/* {% if data.Coworker.Id == invoice.Coworker.Id %} */} {configuration['Forte.eCheckPayments'] && ( )} {configuration['Midtrans.Enabled'] && ( )} {configuration['PeachPayments.Enabled'] && ( )} {configuration['Paypal.Enabled'] && ( )} {configuration['RazorPay.Enabled'] && ( )} {configuration['ePay.Enabled'] && ( )} {configuration['LiqdPay.Enabled'] && ( )} {[...Array(2).keys()].map( (i) => configuration[ `HostedPayments.Provider${i + 1}.Enabled` ] && ( ) )} )} {invoiceIsBeingProcessed && ( {t('Processing your payment...')} )} ); })} {showPaidInvoices && paidInvoices.map((invoice, i) => ( #{invoice.InvoiceNumber} {' - '} {moment(invoice.CreatedOn).format('L')} {' '} {configuration['Members.PrintInvoices'] && ( {t('Download')} )} {invoice.DueAmount <= 0 && ( )} {invoice.DueAmount > 0 && ( )} {invoice.CreditNote && {t('Credit Note')}} {!invoice.CreditNote && invoice.PaidOn && ( {t('Paid on {{PaidOn, L}}', { PaidOn: new Date(invoice.PaidOn), })} )} ))} {customer.CurrentBalance > 0 && ( {t('You account has a current balance of:')} {customer.CurrentBalance} )} )}

); } } export default PaymentHistory;

Get in touch with us

Contact details