Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Wallet.vue
| <template> | <template> | ||||
| <div class="container" dusk="wallet-component"> | <div class="container" dusk="wallet-component"> | ||||
| <p v-if="$root.authInfo.isLocked" id="lock-alert" class="alert alert-warning"> | |||||
| {{ $t('wallet.locked-text') }} | |||||
| </p> | |||||
| <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">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div> | <div class="card-title">{{ $t('wallet.title') }} <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> | ||||
| <div v-if="showPendingPayments" class="alert alert-warning"> | <div v-if="showPendingPayments" class="alert alert-warning"> | ||||
| {{ $t('wallet.pending-payments-warning') }} | {{ $t('wallet.pending-payments-warning') }} | ||||
| </div> | </div> | ||||
| <p> | <p v-if="$root.hasPermission('walletPayments')"> | ||||
| <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn> | <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn> | ||||
| </p> | </p> | ||||
| <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending"> | <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending && $root.hasPermission('walletMandates')"> | ||||
| <template v-if="mandate.id && !mandate.isValid"> | <template v-if="mandate.id && !mandate.isValid"> | ||||
| <div class="alert alert-danger"> | <div class="alert alert-danger"> | ||||
| {{ $t('wallet.auto-payment-failed') }} | {{ $t('wallet.auto-payment-failed') }} | ||||
| </div> | </div> | ||||
| <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | ||||
| </template> | </template> | ||||
| <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn> | <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn> | ||||
| </div> | </div> | ||||
| <div id="mandate-info" v-else> | <div id="mandate-info" v-else-if="$root.hasPermission('walletMandates')"> | ||||
| <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | ||||
| {{ $t('wallet.auto-payment-disabled') }} | {{ $t('wallet.auto-payment-disabled') }} | ||||
| </div> | </div> | ||||
| <template v-else> | <template v-else> | ||||
| <p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p> | <p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p> | ||||
| <p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p> | <p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p> | ||||
| </template> | </template> | ||||
| <div v-if="mandate.isPending" class="alert alert-warning"> | <div v-if="mandate.isPending" class="alert alert-warning"> | ||||
| ▲ Show 20 Lines • Show All 180 Lines • ▼ Show 20 Lines | export default { | ||||
| tabs() { | tabs() { | ||||
| let tabs = [ 'wallet.receipts', 'wallet.history' ] | let tabs = [ 'wallet.receipts', 'wallet.history' ] | ||||
| if (this.showPendingPayments) { | if (this.showPendingPayments) { | ||||
| tabs.push('wallet.pending-payments') | tabs.push('wallet.pending-payments') | ||||
| } | } | ||||
| return tabs | return tabs | ||||
| } | } | ||||
| }, | }, | ||||
| beforeDestroyed() { | |||||
| clearTimeout(this.refreshRequest) | |||||
| }, | |||||
| mounted() { | mounted() { | ||||
| $('#wallet button').focus() | $('#wallet button').focus() | ||||
| this.walletId = this.$root.authInfo.wallets[0].id | this.walletId = this.$root.authInfo.wallets[0].id | ||||
| axios.get('/api/v4/wallets/' + this.walletId, { loader: true }) | axios.get('/api/v4/wallets/' + this.walletId, { loader: true }) | ||||
| .then(response => { | .then(response => { | ||||
| this.wallet = response.data | this.wallet = response.data | ||||
| Show All 15 Lines | export default { | ||||
| .then(response => { | .then(response => { | ||||
| this.showPendingPayments = response.data.hasPending | this.showPendingPayments = response.data.hasPending | ||||
| }) | }) | ||||
| this.$refs.tabs.clickHandler('history', () => { this.loadTransactions = true }) | this.$refs.tabs.clickHandler('history', () => { this.loadTransactions = true }) | ||||
| this.$refs.tabs.clickHandler('payments', () => { this.loadPayments = true }) | this.$refs.tabs.clickHandler('payments', () => { this.loadPayments = true }) | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| loadMandate() { | loadMandate(refresh) { | ||||
| const loader = '#mandate-form' | const loader = '#mandate-form' | ||||
| this.$root.stopLoading(loader) | this.$root.stopLoading(loader) | ||||
| if (!this.mandate.id || this.mandate.isPending) { | if (!this.mandate.id || this.mandate.isPending || refresh) { | ||||
| axios.get('/api/v4/payments/mandate', { loader }) | axios.get('/api/v4/payments/mandate', refresh ? {} : { loader }) | ||||
| .then(response => { | .then(response => { | ||||
| this.mandate = response.data | this.mandate = response.data | ||||
| if (this.mandate.minAmount) { | |||||
| if (this.mandate.minAmount > this.mandate.amount) { | |||||
| this.mandate.amount = this.mandate.minAmount | |||||
| } | |||||
| } | |||||
| if (this.$root.authInfo.isLocked) { | |||||
| if (this.mandate.isValid) { | |||||
| this.$root.unlock() | |||||
| } else { | |||||
| clearTimeout(this.refreshRequest) | |||||
| this.refreshRequest = setTimeout(() => { this.loadMandate(true) }, 10 * 1000) | |||||
| } | |||||
| } | |||||
| }) | }) | ||||
| } | } | ||||
| }, | }, | ||||
| selectPaymentMethod(method) { | selectPaymentMethod(method) { | ||||
| this.formLock = false | this.formLock = false | ||||
| this.selectedPaymentMethod = method | this.selectedPaymentMethod = method | ||||
| this.paymentForm = this.nextForm | this.paymentForm = this.nextForm | ||||
| ▲ Show 20 Lines • Show All 98 Lines • ▼ Show 20 Lines | export default { | ||||
| this.$nextTick().then(() => { | this.$nextTick().then(() => { | ||||
| const type = nextForm == 'manual' ? 'oneoff' : 'recurring' | const type = nextForm == 'manual' ? 'oneoff' : 'recurring' | ||||
| const loader = ['#payment-method', { 'min-height': '10em', small: false }] | const loader = ['#payment-method', { 'min-height': '10em', small: false }] | ||||
| axios.get('/api/v4/payments/methods', { params: { type }, loader }) | axios.get('/api/v4/payments/methods', { params: { type }, loader }) | ||||
| .then(response => { | .then(response => { | ||||
| this.paymentMethods = response.data | this.paymentMethods = response.data | ||||
| if (this.paymentMethods.length == 1) { | |||||
| this.nextForm = 'auto'; | |||||
| this.selectPaymentMethod(this.paymentMethods[0]); | |||||
| } | |||||
| }) | }) | ||||
| }) | }) | ||||
| }, | }, | ||||
| autoPaymentForm(event, title) { | autoPaymentForm(event, title) { | ||||
| this.paymentForm = 'auto' | this.paymentForm = 'auto' | ||||
| this.paymentDialogTitle = title | this.paymentDialogTitle = title | ||||
| this.formLock = false | this.formLock = false | ||||
| ▲ Show 20 Lines • Show All 42 Lines • Show Last 20 Lines | |||||