Changeset View
Standalone View
src/resources/vue/Wallet.vue
<template> | <template> | ||||
<div class="container" dusk="wallet-component"> | <div class="container" dusk="wallet-component"> | ||||
<div v-if="wallet.id" id="wallet" class="card"> | <div v-if="wallet.id" id="wallet" class="card"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div> | <div class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p> | <p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p> | ||||
<p>Add credit to your account or setup an automatic payment by using the button below.</p> | |||||
<button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button> | <div v-if="showPendingPayments" class="alert alert-warning"> | ||||
You have payments that are still in progress. See the payments tab below. | |||||
bohlender: a payment that is still in progress / payments that are still in progress | |||||
Done Inline Actionsthe tab is called Pending Payments. machniak: the tab is called Pending Payments. | |||||
</div> | |||||
<p> | |||||
<button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">Add credit</button> | |||||
</p> | |||||
<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending"> | |||||
<template v-if="mandate.id && !mandate.isValid"> | |||||
<div class="alert alert-danger"> | |||||
The setup of automatic payments failed. Restart the process to enable automatic top-ups. | |||||
</div> | |||||
<p> | |||||
<button type="button" class="btn btn-danger" @click="autoPaymentDelete">Cancel auto-payment</button> | |||||
</p> | |||||
</template> | |||||
<button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">Set up auto-payment</button> | |||||
Done Inline ActionsIt would look better if Cancel auto-payment and Change auto-paymet would appear side by side (not below). machniak: It would look better if Cancel auto-payment and Change auto-paymet would appear side by side… | |||||
</div> | |||||
<div id="mandate-info" v-else> | |||||
<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | |||||
The configured auto-payment has been disabled. Top up your wallet or | |||||
raise the auto-payment amount. | |||||
Done Inline Actionstemplate? machniak: template? | |||||
Done Inline ActionsA way to group things in vue that will not appear in the finally generated html. mollekopf: A way to group things in vue that will not appear in the finally generated html. | |||||
</div> | |||||
<template v-else> | |||||
<p> | |||||
Auto-payment is <b>set</b> to fill up your account by <b>{{ mandate.amount }} CHF</b> | |||||
every time your account balance gets under <b>{{ mandate.balance }} CHF</b>. | |||||
</p> | |||||
<p> | |||||
Method of payment: {{ mandate.method }} | |||||
</p> | |||||
</template> | |||||
<div v-if="mandate.isPending" class="alert alert-warning"> | |||||
The setup of the automatic payment is still in progress. | |||||
</div> | |||||
<p> | |||||
<button type="button" class="btn btn-danger" @click="autoPaymentDelete">Cancel auto-payment</button> | |||||
</p> | |||||
<p> | |||||
<button type="button" class="btn btn-primary" @click="autoPaymentChange">Change auto-payment</button> | |||||
</p> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<ul class="nav nav-tabs mt-3" role="tablist"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true"> | <a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true"> | ||||
Receipts | Receipts | ||||
</a> | </a> | ||||
</li> | </li> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false"> | <a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false"> | ||||
History | History | ||||
</a> | </a> | ||||
</li> | </li> | ||||
<li v-if="showPendingPayments" class="nav-item"> | |||||
<a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false"> | |||||
Pending Payments | |||||
</a> | |||||
</li> | |||||
</ul> | </ul> | ||||
<div class="tab-content"> | <div class="tab-content"> | ||||
<div class="tab-pane show active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts"> | <div class="tab-pane show active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<p v-if="receipts.length"> | <p v-if="receipts.length"> | ||||
Here you can download receipts (in PDF format) for payments in specified period. | Here you can download receipts (in PDF format) for payments in specified period. | ||||
Select the period and press the Download button. | Select the period and press the Download button. | ||||
Show All 15 Lines | <div class="container" dusk="wallet-component"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane show" id="wallet-history" role="tabpanel" aria-labelledby="tab-history"> | <div class="tab-pane show" id="wallet-history" role="tabpanel" aria-labelledby="tab-history"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log> | <transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane show" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments"> | |||||
Done Inline ActionsI think the show class is redundant, we probably should remove it from all 'tab-pane' elements. machniak: I think the `show` class is redundant, we probably should remove it from all 'tab-pane'… | |||||
<div class="card-body"> | |||||
<payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<div id="payment-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="payment-dialog" class="modal" tabindex="-1" role="dialog"> | ||||
<div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> | ||||
<div class="modal-content"> | <div class="modal-content"> | ||||
<div class="modal-header"> | <div class="modal-header"> | ||||
<h5 class="modal-title">{{ paymentDialogTitle }}</h5> | <h5 class="modal-title">{{ paymentDialogTitle }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | ||||
<span aria-hidden="true">×</span> | <span aria-hidden="true">×</span> | ||||
</button> | </button> | ||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<div id="payment" v-if="paymentForm == 'init'"> | <div id="payment-method" v-if="paymentForm == 'method'"> | ||||
<form data-validation-prefix="mandate_"> | |||||
<div id="payment-method-selection"> | |||||
<button :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" class="card link-profile"> | |||||
Done Inline ActionsI'd like these elements to have the same color as in the Dashboard. Maybe just make them links not buttons? machniak: I'd like these elements to have the same color as in the Dashboard. Maybe just make them links… | |||||
Done Inline ActionsThis link have to have href="#" to display proper cursor on hover. machniak: This link have to have `href="#"` to display proper cursor on hover. | |||||
<svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" /> | |||||
<img v-if="method.image" v-bind:src="method.image" /> | |||||
<span class="name">{{ method.name }}</span> | |||||
</button> | |||||
</div> | |||||
</form> | |||||
</div> | |||||
<div id="manual-payment" v-if="paymentForm == 'manual'"> | |||||
<p v-if="wallet.currency != selectedPaymentMethod.currency"> | |||||
Here is how it works: You specify the amount by which you want to to up your wallet in {{ wallet.currency }}. | |||||
We will then convert this to {{ selectedPaymentMethod.currency }}, and on the next page you will be provided with the bank-details | |||||
to transfer the amount in {{ selectedPaymentMethod.currency }}. | |||||
</p> | |||||
<p v-if="selectedPaymentMethod.id == 'banktransfer'"> | |||||
Please note that a bank transfer can take several days to complete. | |||||
</p> | |||||
<p>Choose the amount by which you want to top up your wallet.</p> | <p>Choose the amount by which you want to top up your wallet.</p> | ||||
<form id="payment-form" @submit.prevent="payment"> | <form id="payment-form" @submit.prevent="payment"> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<div class="input-group"> | <div class="input-group"> | ||||
<input type="text" class="form-control" id="amount" v-model="amount" required> | <input type="text" class="form-control" id="amount" v-model="amount" required> | ||||
<span class="input-group-append"> | <span class="input-group-append"> | ||||
<span class="input-group-text">{{ wallet.currency }}</span> | <span class="input-group-text">{{ wallet.currency }}</span> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="wallet.currency != selectedPaymentMethod.currency" class="alert alert-warning"> | |||||
You will be charged for {{ amount * selectedPaymentMethod.exchangeRate }} {{ selectedPaymentMethod.currency }} | |||||
</div> | |||||
<div class="w-100 text-center"> | <div class="w-100 text-center"> | ||||
<button type="submit" class="btn btn-primary"> | <button type="submit" class="btn btn-primary"> | ||||
Done Inline ActionsThe button has credit-card icon even if you selected PayPal. Maybe we need some more neutral icon. Maybe check or arrow-right? Or get rid of the icon? More importantly, I'd like this button to appear in the dialog's footer, the same as in the auto-payment setup dialog. machniak: The button has credit-card icon even if you selected PayPal. Maybe we need some more neutral… | |||||
<svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | ||||
</button> | </button> | ||||
</div> | </div> | ||||
Done Inline ActionsYou could use {{ $root.price(amount * 100 * selectedPaymentMethod.exchangeRate, selectedPaymentMethod.currency) }}. What if amount is NaN? machniak: You could use `{{ $root.price(amount * 100 * selectedPaymentMethod.exchangeRate… | |||||
</form> | </form> | ||||
<div class="form-separator"><hr><span>or</span></div> | |||||
<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending"> | |||||
<p>Add auto-payment, so you never run out.</p> | |||||
<div v-if="mandate.id && !mandate.isValid" class="alert alert-danger"> | |||||
The setup of automatic payments failed. Restart the process to enable automatic top-ups. | |||||
</div> | |||||
<div class="w-100 text-center"> | |||||
<button type="button" class="btn btn-primary" @click="autoPaymentForm">Set up auto-payment</button> | |||||
</div> | |||||
</div> | |||||
<div id="mandate-info" v-else> | |||||
<p> | |||||
Auto-payment is set to fill up your account by <b>{{ mandate.amount }} CHF</b> | |||||
every time your account balance gets under <b>{{ mandate.balance }} CHF</b>. | |||||
You will be charged via {{ mandate.method }}. | |||||
</p> | |||||
<div v-if="mandate.isPending" class="alert alert-warning"> | |||||
The setup of the automatic payment is still in progress. | |||||
</div> | |||||
<div v-else-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | |||||
The configured auto-payment has been disabled. Top up your wallet or | |||||
raise the auto-payment amount. | |||||
</div> | |||||
<p>You can cancel or change the auto-payment at any time.</p> | |||||
<div class="form-group d-flex justify-content-around"> | |||||
<button type="button" class="btn btn-danger" @click="autoPaymentDelete">Cancel auto-payment</button> | |||||
<button type="button" class="btn btn-primary" @click="autoPaymentChange">Change auto-payment</button> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
<div id="auto-payment" v-if="paymentForm == 'auto'"> | <div id="auto-payment" v-if="paymentForm == 'auto'"> | ||||
<form data-validation-prefix="mandate_"> | <form data-validation-prefix="mandate_"> | ||||
<p> | <p> | ||||
Here is how it works: Every time your account runs low, | Here is how it works: Every time your account runs low, | ||||
we will charge your preferred payment method for an amount you choose. | we will charge your preferred payment method for an amount you choose. | ||||
You can cancel or change the auto-payment option at any time. | You can cancel or change the auto-payment option at any time. | ||||
</p> | </p> | ||||
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | <div class="container" dusk="wallet-component"> | ||||
@click="autoPayment" | @click="autoPayment" | ||||
> | > | ||||
<svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
Done Inline ActionsContinue2 -> Continue ;) machniak: Continue2 -> Continue ;) | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import TransactionLog from './Widgets/TransactionLog' | import TransactionLog from './Widgets/TransactionLog' | ||||
import PaymentLog from './Widgets/PaymentLog' | |||||
export default { | export default { | ||||
components: { | components: { | ||||
TransactionLog | TransactionLog, | ||||
PaymentLog | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
amount: '', | amount: '', | ||||
mandate: { amount: 10, balance: 0 }, | mandate: { amount: 10, balance: 0, method: null }, | ||||
paymentDialogTitle: null, | paymentDialogTitle: null, | ||||
paymentForm: 'init', | paymentForm: null, | ||||
nextForm: null, | |||||
receipts: [], | receipts: [], | ||||
stripe: null, | stripe: null, | ||||
loadTransactions: false, | loadTransactions: false, | ||||
loadPayments: false, | |||||
showPendingPayments: false, | |||||
wallet: {}, | wallet: {}, | ||||
walletId: null | walletId: null, | ||||
paymentMethods: [], | |||||
selectedPaymentMethod: null | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
$('#wallet button').focus() | $('#wallet button').focus() | ||||
this.walletId = this.$store.state.authInfo.wallets[0].id | this.walletId = this.$store.state.authInfo.wallets[0].id | ||||
this.$root.startLoading() | this.$root.startLoading() | ||||
Show All 15 Lines | export default { | ||||
}) | }) | ||||
if (this.wallet.provider == 'stripe') { | if (this.wallet.provider == 'stripe') { | ||||
this.stripeInit() | this.stripeInit() | ||||
} | } | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
this.loadMandate() | |||||
axios.get('/api/v4/payments/pending') | |||||
.then(response => { | |||||
this.showPendingPayments = (response.data.list.length > 0) | |||||
}) | |||||
}, | |||||
updated() { | |||||
$(this.$el).find('ul.nav-tabs a').on('click', e => { | $(this.$el).find('ul.nav-tabs a').on('click', e => { | ||||
e.preventDefault() | e.preventDefault() | ||||
$(e.target).tab('show') | $(e.target).tab('show') | ||||
if ($(e.target).is('#tab-history')) { | if ($(e.target).is('#tab-history')) { | ||||
this.loadTransactions = true | this.loadTransactions = true | ||||
} | } | ||||
if ($(e.target).is('#tab-payments')) { | |||||
this.loadPayments = true | |||||
} | |||||
}) | }) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
paymentDialog() { | loadMandate() { | ||||
const dialog = $('#payment-dialog') | |||||
const mandate_form = $('#mandate-form') | const mandate_form = $('#mandate-form') | ||||
this.$root.removeLoader(mandate_form) | this.$root.removeLoader(mandate_form) | ||||
if (!this.mandate.id || this.mandate.isPending) { | if (!this.mandate.id || this.mandate.isPending) { | ||||
this.$root.addLoader(mandate_form) | this.$root.addLoader(mandate_form) | ||||
axios.get('/api/v4/payments/mandate') | axios.get('/api/v4/payments/mandate') | ||||
.then(response => { | .then(response => { | ||||
this.$root.removeLoader(mandate_form) | this.$root.removeLoader(mandate_form) | ||||
this.mandate = response.data | this.mandate = response.data | ||||
}) | }) | ||||
.catch(error => { | .catch(error => { | ||||
this.$root.removeLoader(mandate_form) | this.$root.removeLoader(mandate_form) | ||||
}) | }) | ||||
} | } | ||||
}, | |||||
selectPaymentMethod(method) { | |||||
this.formLock = false | |||||
this.selectedPaymentMethod = method | |||||
this.paymentForm = this.nextForm | |||||
this.paymentDialogTitle = 'Choose Amount' | |||||
this.formLock = false | this.formLock = false | ||||
this.paymentForm = 'init' | |||||
this.paymentDialogTitle = 'Top up your wallet' | |||||
this.dialog = dialog.on('shown.bs.modal', () => { | setTimeout(() => { | ||||
dialog.find('#amount').focus() | this.dialog.find('#mandate_amount').focus() | ||||
}).modal() | this.dialog.find('#amount').focus() | ||||
}, 10) | |||||
}, | }, | ||||
payment() { | payment() { | ||||
if (this.formLock) { | if (this.formLock) { | ||||
return | return | ||||
} | } | ||||
// Lock the form to prevent from double submission | // Lock the form to prevent from double submission | ||||
this.formLock = true | this.formLock = true | ||||
let onFinish = () => { this.formLock = false } | let onFinish = () => { this.formLock = false } | ||||
this.$root.clearFormValidation($('#payment-form')) | this.$root.clearFormValidation($('#payment-form')) | ||||
axios.post('/api/v4/payments', {amount: this.amount}, { onFinish }) | axios.post('/api/v4/payments', {amount: this.amount, methodId: this.selectedPaymentMethod.id, currency: this.selectedPaymentMethod.currency}, { onFinish }) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.redirectUrl) { | if (response.data.redirectUrl) { | ||||
location.href = response.data.redirectUrl | location.href = response.data.redirectUrl | ||||
} else { | } else { | ||||
this.stripeCheckout(response.data) | this.stripeCheckout(response.data) | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
autoPayment() { | autoPayment() { | ||||
if (this.formLock) { | if (this.formLock) { | ||||
return | return | ||||
} | } | ||||
// Lock the form to prevent from double submission | // Lock the form to prevent from double submission | ||||
this.formLock = true | this.formLock = true | ||||
let onFinish = () => { this.formLock = false } | let onFinish = () => { this.formLock = false } | ||||
const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post' | const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post' | ||||
const post = { | let post = { | ||||
amount: this.mandate.amount, | amount: this.mandate.amount, | ||||
balance: this.mandate.balance | balance: this.mandate.balance, | ||||
} | |||||
Done Inline ActionsIs this.mandate.method always available? machniak: Is this.mandate.method always available? | |||||
Done Inline ActionsThis didn't really make sense. I fixed it by making clearer that modifications don't touch the method of payment at all. mollekopf: This didn't really make sense. I fixed it by making clearer that modifications don't touch the… | |||||
// Modifications can't change the method of payment | |||||
if (this.selectedPaymentMethod) { | |||||
post['methodId'] = this.selectedPaymentMethod.id; | |||||
post['currency'] = this.selectedPaymentMethod.currency; | |||||
} | } | ||||
this.$root.clearFormValidation($('#auto-payment form')) | this.$root.clearFormValidation($('#auto-payment form')) | ||||
axios[method]('/api/v4/payments/mandate', post, { onFinish }) | axios[method]('/api/v4/payments/mandate', post, { onFinish }) | ||||
.then(response => { | .then(response => { | ||||
if (method == 'post') { | if (method == 'post') { | ||||
this.mandate.id = null | this.mandate.id = null | ||||
Show All 20 Lines | export default { | ||||
axios.delete('/api/v4/payments/mandate') | axios.delete('/api/v4/payments/mandate') | ||||
.then(response => { | .then(response => { | ||||
this.mandate = { amount: 10, balance: 0 } | this.mandate = { amount: 10, balance: 0 } | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
paymentMethodForm(nextForm) { | |||||
const dialog = $('#payment-dialog') | |||||
this.formLock = false | |||||
this.paymentMethods = [] | |||||
this.paymentForm = 'method' | |||||
this.paymentDialogTitle = 'Payment Method' | |||||
Done Inline ActionsI don't like the "Payment Method" nor "Choose Amount" in the dialog title, I would leave the old titles. Imo, from the dialog content it is obvious what to do, so I would rather display the old titles so user know "where he is", instead of "what to do". machniak: I don't like the "Payment Method" nor "Choose Amount" in the dialog title, I would leave the… | |||||
Done Inline ActionsI like the new version better (surprise! ;-) ), but I don't suppose it matters much. You want the titles to be "Top up your wallet" ? mollekopf: I like the new version better (surprise! ;-) ), but I don't suppose it matters much. You want… | |||||
Done Inline ActionsI liked the old titles. It was "Top up your wallet" and "Add auto-payment". So, they were related to the button pressed, not the dialog content which is self-exlanatory. machniak: I liked the old titles. It was "Top up your wallet" and "Add auto-payment". So, they were… | |||||
this.nextForm = nextForm | |||||
const methods = $('#payment-method') | |||||
this.$root.addLoader(methods) | |||||
Done Inline ActionsI think we should improve how this loader looks like. machniak: I think we should improve how this loader looks like. | |||||
Done Inline ActionsMaybe, but I don't know how. mollekopf: Maybe, but I don't know how. | |||||
Done Inline ActionsSee how addLoader() in app.js works. and maybe add an argument to make addition of .small class optional. It might be enough. machniak: See how addLoader() in app.js works. and maybe add an argument to make addition of `.small`… | |||||
axios.get('/api/v4/payments/methods', {params: {type: nextForm == 'manual' ? 'oneoff' : 'recurring'}}) | |||||
.then(response => { | |||||
this.$root.removeLoader(methods) | |||||
this.paymentMethods = response.data | |||||
}) | |||||
.catch(this.$root.errorHandler) | |||||
this.dialog = dialog.on('shown.bs.modal', () => {}).modal() | |||||
}, | |||||
autoPaymentForm(event, title) { | autoPaymentForm(event, title) { | ||||
const dialog = $('#payment-dialog') | |||||
this.paymentForm = 'auto' | this.paymentForm = 'auto' | ||||
this.paymentDialogTitle = title || 'Add auto-payment' | this.paymentDialogTitle = title || 'Add auto-payment' | ||||
this.formLock = false | this.formLock = false | ||||
this.dialog = dialog.on('shown.bs.modal', () => { | |||||
dialog.find('#mandate_amount').focus() | |||||
}).modal() | |||||
setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10) | setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10) | ||||
}, | }, | ||||
receiptDownload() { | receiptDownload() { | ||||
const receipt = $('#receipt-id').val() | const receipt = $('#receipt-id').val() | ||||
this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt) | this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt) | ||||
}, | }, | ||||
stripeInit() { | stripeInit() { | ||||
let script = $('#stripe-script') | let script = $('#stripe-script') | ||||
Show All 34 Lines |
a payment that is still in progress / payments that are still in progress