/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import Link from 'next/link'; 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['ePay.Enabled']) { $('.epay').click(payWithEPay); function payWithEPay() { var invoiceNumber = $(this).attr('data-description'); var url = $(this).attr('data-payurl'); var currency = $(this).attr('data-currency'); var amount = $(this).attr('data-amount'); var hash = $(this).attr('data-hash'); var email = $(this).attr('data-email'); var merchantId = $(this).attr('data-merchant-id'); const paymentWindow = new PaymentWindow({ merchantnumber: merchantId, amount: amount, currency: currency, orderid: invoiceNumber, instantcapture: 1, subscription: 1, instantcallback: 1, callbackurl: url, subscriptionname: email, accepturl: `${appStore.business.HomeUrl}/profile/invoices?payment_result=ok`, cancelurl: `${appStore.business.HomeUrl}/profile/invoices?payment_result=fail`, hash: hash, }); paymentWindow.open(); } if (!isServer()) { const script = document.createElement('script'); script.src = 'https://ssl.ditonlinebetalingssystem.dk/integration/ewindow/paymentwindow.js'; document.body.appendChild(script); } } if (configuration['Forte.eCheckPayments']) { const forteCallback = (e) => { var response = JSON.parse(e.data); switch (response.event) { case 'begin': const message = t( 'By setting up the following eCheck/ACH agreement, you authorize "{{Name}}" to automatically debit your bank account for any due invoices and, if necessary, credit your account to correct any erroneous debits. You will be asked for your bank account details after you agree with this. Do you want to continue?', { Name: business.Name } ); $('.fco2-iframe-container').hide(); appStore.setYesNotQuestion(message).then((yes) => { if (yes) $('.fco2-iframe-container').show(); else $('.fco2-iframe-container').remove(); }); 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 (configuration['Midtrans.Enabled']) { //Midtrans scripts const midtransScripts = document.createElement('script'); midtransScripts.src = 'https://app.midtrans.com/snap/snap.js'; midtransScripts['data-client-key'] = appStore.configuration['Midtrans.ClientKey']; document.body.appendChild(midtransScripts); } 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, corporateDashboard } = appStore; const { paidInvoices, unpaidInvoices, invoices, hasLoadedInvoices } = invoicingStore; if (!hasLoadedCustomer || !hasLoadedInvoices) return

; return (

{t(`${!corporateDashboard ? 'Invoices and payments' : 'Orders'}`)}

{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.')}

{t( 'You can make a booking, book an event, or buy a product. These are some links you may find useful:' )}

{t('Make a Booking')} {t('Book an event')} {t('Buy a product')}

)} {invoices.length > 0 && ( {t('Date')} {!corporateDashboard && {t('Amount')}} {!corporateDashboard && ( {t('Due')} )} {!corporateDashboard && {t('Status')}} {!corporateDashboard && } {showUnpaidInvoices && unpaidInvoices.map((invoice, i) => { const invoiceIsBeingProcessed = invoice.CustomData && (invoice.CustomData ?? '').indexOf('tok_') === -1 && (invoice.CustomData ?? '').indexOf('vt_') === -1; return (

{'#'} {corporateDashboard ? invoice.InvoiceNumber.replace('INV-', '') : invoice.InvoiceNumber} {' - '} {moment(invoice.CreatedOn).format('L')}

{corporateDashboard && ( )} {!corporateDashboard && 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 using card ending in {{CardNumber}} on {{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'] && business.Id === invoice.BusinessId && ( {t('Download')} )} {!corporateDashboard && ( <> {invoice.DueAmount <= 0 && ( )} {invoice.DueAmount > 0 && ( )} {!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'] && business.Id === invoice.BusinessId && ( )} {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'] && business.Id === invoice.BusinessId && ( {t('Download')} )} {!corporateDashboard && ( <> {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;

Events

Past Events