import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import withCustomComponent from 'ui/components/withCustomComponent'; import SignupPageLayout from 'ui/layouts/SignupPageLayout'; import { InvoicesTable } from 'ui/_pages/invoices/InvoicesTable'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import { CheckoutComplete } from 'ui/_pages/checkout/CheckoutComplete'; @withCustomComponent('SignupPaymentPage') @withTranslation() @inject('appStore', 'authStore', 'invoicingStore') @observer class SignupPaymentPage extends Component { componentDidMount() { const { t, appStore, authStore, invoicingStore } = this.props; authStore.loadCustomer().catch((err) => { appStore.setPopMessage( t('Sorry, we could not load your details. {{err}}', { err }) ); }); invoicingStore.loadInvoicesPage().catch((err) => { appStore.setPopMessage( t('Sorry, we could not load your invoices. {{err}}', { err }) ); }); } render() { const { t, invoicingStore, authStore, appStore } = this.props; const { invoicesPage, isLoadingInvoicesPage, unpaidInvoices } = invoicingStore; const { SpreedlyEnabled, StripeACHEnabled, StripeDirectDebitEnabled } = invoicesPage; const { configuration } = appStore; const { customer } = authStore; const keepOnHold = configuration['Signup.KeepNewAccountsOnHold']; const memberMustChooseAPricePlan = configuration['Signup.MemberMustChooseAPricePlan']; const hasPaymentSystem = customer?.EnableGoCardlessPayments || (customer?.StripeDirectDebitPaymentsEnabled && StripeDirectDebitEnabled) || (configuration['StripeACH.Enabled'] && StripeACHEnabled) || (configuration['Spreedly.Enabled'] == 'True' && SpreedlyEnabled) || configuration['HostedPayments.Provider1.Enabled'] || configuration['HostedPayments.Provider2.Enabled'] || configuration['HostedPayments.Provider3.Enabled']; const isCustomerActive = customer?.Active || memberMustChooseAPricePlan; // Show payment details forms if the customer has invoices or // if they have selected a plan but they are not paid by another team // member. Don't show form if KOH enabled. const needsPaymentDetails = //!keepOnHold && hasPaymentSystem && customer && ((!customer.IsPaidForCustomer && customer.TariffIds && !customer?.HasSetupRegularPayments) || // User is already active and has invoices (isCustomerActive && unpaidInvoices.length > 0)); return (

{isLoadingInvoicesPage && } {!isLoadingInvoicesPage && ( <> {needsPaymentDetails && ( <> {hasPaymentSystem && !customer.Active && ( <>

{t('We need your payment details to complete your application.')}

)} 0} /> )} {!needsPaymentDetails && ( <> )} )}

); } } export default SignupPaymentPage;