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"> | ||||
| <div 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</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>Current account balance is | <p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p> | ||||
| <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span> | <p>Add credit to your account or setup an automatic payment by using the button below.</p> | ||||
| </p> | |||||
| <button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button> | <button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button> | ||||
| </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"> | ||||
| ▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines | <div class="container" dusk="wallet-component"> | ||||
| <div class="modal-body"> | <div class="modal-body"> | ||||
| <div id="payment" v-if="paymentForm == 'init'"> | <div id="payment" v-if="paymentForm == 'init'"> | ||||
| <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 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"> | ||||
| <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| Show All 27 Lines | <div class="container" dusk="wallet-component"> | ||||
| 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> | ||||
| <div class="form-group row"> | <div class="form-group row"> | ||||
| <label for="mandate_amount" class="col-sm-6 col-form-label">Fill up by</label> | <label for="mandate_amount" class="col-sm-6 col-form-label">Fill up by</label> | ||||
| <div class="input-group col-sm-6"> | <div class="input-group col-sm-6"> | ||||
| <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required> | <input type="text" class="form-control" id="mandate_amount" v-model="mandate.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 class="form-group row"> | <div class="form-group row"> | ||||
| <label for="mandate_balance" class="col-sm-6 col-form-label">when account balance is below</label> | <label for="mandate_balance" class="col-sm-6 col-form-label">when account balance is below</label> | ||||
| <div class="col-sm-6"> | <div class="col-sm-6"> | ||||
| <div class="input-group"> | <div class="input-group"> | ||||
| <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required> | <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" 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> | </div> | ||||
| <p v-if="!mandate.id"> | <p v-if="!mandate.id"> | ||||
| Next, you will be redirected to the checkout page, where you can provide | Next, you will be redirected to the checkout page, where you can provide | ||||
| your credit card details. | your credit card details. | ||||
| </p> | </p> | ||||
| Show All 24 Lines | <script> | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| TransactionLog | TransactionLog | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| amount: '', | amount: '', | ||||
| balance: 0, | |||||
| mandate: { amount: 10, balance: 0 }, | mandate: { amount: 10, balance: 0 }, | ||||
| paymentDialogTitle: null, | paymentDialogTitle: null, | ||||
| paymentForm: 'init', | paymentForm: 'init', | ||||
| provider: window.config.paymentProvider, | |||||
| receipts: [], | receipts: [], | ||||
| stripe: null, | stripe: null, | ||||
| loadTransactions: false, | loadTransactions: false, | ||||
| walletId: null, | wallet: {}, | ||||
| wallet_currency: 'CHF' | walletId: null | ||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| $('#wallet button').focus() | $('#wallet button').focus() | ||||
| this.balance = 0 | |||||
| // TODO: currencies, multi-wallets, accounts | |||||
| this.$store.state.authInfo.wallets.forEach(wallet => { | |||||
| this.balance += wallet.balance | |||||
| this.provider = wallet.provider | |||||
| }) | |||||
| this.walletId = this.$store.state.authInfo.wallets[0].id | this.walletId = this.$store.state.authInfo.wallets[0].id | ||||
| this.$root.startLoading() | |||||
| axios.get('/api/v4/wallets/' + this.walletId) | |||||
| .then(response => { | |||||
| this.$root.stopLoading() | |||||
| this.wallet = response.data | |||||
| const receiptsTab = $('#wallet-receipts') | const receiptsTab = $('#wallet-receipts') | ||||
| this.$root.addLoader(receiptsTab) | this.$root.addLoader(receiptsTab) | ||||
| axios.get('/api/v4/wallets/' + this.walletId + '/receipts') | axios.get('/api/v4/wallets/' + this.walletId + '/receipts') | ||||
| .then(response => { | .then(response => { | ||||
| this.$root.removeLoader(receiptsTab) | this.$root.removeLoader(receiptsTab) | ||||
| this.receipts = response.data.list | this.receipts = response.data.list | ||||
| }) | }) | ||||
| .catch(error => { | .catch(error => { | ||||
| this.$root.removeLoader(receiptsTab) | this.$root.removeLoader(receiptsTab) | ||||
| }) | }) | ||||
| if (this.wallet.provider == 'stripe') { | |||||
| this.stripeInit() | |||||
| } | |||||
| }) | |||||
| .catch(this.$root.errorHandler) | |||||
| $(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 (this.provider == 'stripe') { | |||||
| this.stripeInit() | |||||
| } | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| paymentDialog() { | paymentDialog() { | ||||
| const dialog = $('#payment-dialog') | const dialog = $('#payment-dialog') | ||||
| const mandate_form = $('#mandate-form') | const mandate_form = $('#mandate-form') | ||||
| this.$root.removeLoader(mandate_form) | this.$root.removeLoader(mandate_form) | ||||
| ▲ Show 20 Lines • Show All 116 Lines • Show Last 20 Lines | |||||