import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import withScript from 'env/utils/withScript'; import { addTagManagerEvent } from 'env/TagManager'; import { analyticsService } from 'env/analytics/analyticsService'; import withCustomComponent from 'ui/components/withCustomComponent'; @withCustomComponent('SpreedlyPaymentForm') @withTranslation() @withScript('https://core.spreedly.com/iframe/iframe-v1.min.js') @inject('authStore', 'invoicingStore', 'appStore') @observer class SpreedlyPaymentForm extends Component { initSpreedly = () => { //Make sure to run this code only once! if (window.SpreedlyFormInit) return; window.SpreedlyFormInit = true; const { t, onPaymentComplete, invoicingStore, authStore, appStore } = this.props; const { configuration } = appStore; const { unpaidInvoices } = invoicingStore; const $ = window.$; const Spreedly = window.Spreedly; const spreedlyEnvKey = configuration['System.SpreedlyEnvironmentKey']; const processSingleInvoice = async () => { await invoicingStore.loadInvoicesPage(); await authStore.loadCustomer(); const checkSpreedly = () => { if (window.Spreedly) { $(`#spreedlyButton-${unpaidInvoices[0].Id}`).click(); return; } else setTimeout(checkSpreedly, 500); }; setTimeout(checkSpreedly, 500); }; const resetButtonStatus = () => { $('#spreedly-ccpay-button').attr('disabled', null); $('#spreedly-ccpay-button').text(t('Update payment details')); }; Spreedly.init(spreedlyEnvKey, { numberEl: 'spreedly-number', cvvEl: 'spreedly-cvv', }); Spreedly.on('ready', function () { Spreedly.setStyle('number', 'width:225px;'); resetButtonStatus(); }); Spreedly.on('errors', (errors) => { if (errors.length > 0) { appStore.setPopMessage(errors[0].message); } resetButtonStatus(); }); Spreedly.on('paymentMethod', function (token, pmData) { var tokenField = document.getElementById('payment_method_token'); tokenField.setAttribute('value', token); const agent = appStore.getAgent(); agent.requests .post('/payments/SpreedlyPaymentToken', { id: window.clickedInvoice ?? 0, token: token, payment_data: JSON.stringify(pmData), }) .then((response) => { resetButtonStatus(); if (response.ErrorMessage) { appStore.setPopMessage('Sorry, we could not process your payment'); analyticsService.fail({ ...authStore.customer, errorMessage: response.ErrorMessage, }); addTagManagerEvent({ name: 'nexudus:payments:fail', customer: authStore.customer, data: response.ErrorMessage, }); return; } if (window.clickedInvoice > 0) { window.clickedInvoice = null; const invoices = invoices.find( (i) => i.Id == window.clickedInvoice ); analyticsService.success({ ...authStore.customer, ...invoices, }); addTagManagerEvent({ name: 'nexudus:payments:success', customer: authStore.customer, data: invoices, }); appStore.setPopMessage( 'Thank you, we have processed your payment.' ); } else { if (unpaidInvoices.length == 1) { processSingleInvoice(); return; } const message = unpaidInvoices.length > 1 ? t( "Thank you, we have updated your payment details. Please click 'Pay by card' to use these details to pay an invoice" ) : t('Thank you, we have updated your payment details.'); analyticsService.updated({ ...authStore.customer, }); addTagManagerEvent({ name: 'nexudus:payments:updated', customer: authStore.customer, }); appStore.setPopMessage(message).then(() => { location.reload(); return; }); } if (onPaymentComplete) onPaymentComplete(); }); }); $('#spreedly-ccpay-button').click(function () { var url = $(this).attr('data-payurl'); if ($('#spreedly-ccpay-button').attr('disabled')) return; $('#spreedly-ccpay-button').attr('disabled', 'disabled'); $('#spreedly-ccpay-button').text(t('Please wait...')); var paymentMethodFields = [ 'first_name', 'last_name', 'month', 'year', 'address1', 'city', 'country', 'zip', 'state', ]; var requiredFields = {}; for (var i = 0; i < paymentMethodFields.length; i++) { var field = paymentMethodFields[i]; requiredFields[field] = document.getElementById(field).value; } Spreedly.tokenizeCreditCard(requiredFields); }); }; componentWillUnmount() { window.SpreedlyFormInit = false; } componentDidMount() { const checkSpreedly = () => { if (window.Spreedly) this.initSpreedly(); else setTimeout(checkSpreedly, 1000); }; setTimeout(checkSpreedly, 1000); const { authStore } = this.props; const { hasLoadedTeams, hasLoadedPayingMember } = authStore; if (!hasLoadedTeams) authStore.loadTeams(); if (!hasLoadedPayingMember) authStore.loadPayingMember(); } render() { const { returnUrl, smallForm, t, authStore, appStore, componentName } = this.props; const { business } = appStore; const { teams, customer, payingMember } = authStore; const now = new Date().getUTCFullYear(); const years = Array(now - (now - 20)) .fill('') .map((v, idx) => now + idx); return ( <>

{/* */} {teams.length > 0 && (

{t('Heads up!')}{' '} {t('You are part of the following team:')}{' '} {teams.map((x) => x.Name).join(', ')}. {payingMember && t('Any bills will be paid by: {{FullName}}', { FullName: payingMember.FullName, })}

)} {customer.CardNumber && (

{t( 'The card we have on your file ends in "{{CardNumber}}". You can use the form below to enter a new set of payment details.', { CardNumber: customer.CardNumber, } )}

)}

false} >

{t('First name')}

{t('Last name')}

{t('Card Number')} {t('CVV')}

{t('Expires')}

{t('Billing Address')}

{t('City')}

{t('State')}

{t('Zip / Postcode')}

{t('Country')}

{((appStore.configuration['Spreedly.KeepCardDetailsForMembers'] && customer.IsMember) || (appStore.configuration['Spreedly.KeepCardDetailsForContacts'] && !customer.IsMember)) && (

{t('Heads up!')}{' '}{/* Added by Sean Otto, in relation to ticket https://nexudus.zendesk.com/agent/tickets/171068*/} {t( 'By clicking "Update payment details", you authorize "{{Name}}" to automatically debit this card for any due invoices and, if necessary, credit it to correct any erroneous debits.', { Name: t(business.Name) } )}

)}

{returnUrl && ( )} {!returnUrl && ( )}

{business.TransactionFee > 0 && ( {t('Card payments are subject to a {{TransactionFee}}% fee.', { TransactionFee: business.TransactionFee, })} )}

{/* */} ); } } export default SpreedlyPaymentForm;

Get in touch with us