Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Wallet.vue
| Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines | <div class="container" dusk="wallet-component"> | ||||
| <button type="button" class="btn btn-primary" @click="autoPaymentForm">Set up auto-payment</button> | <button type="button" class="btn btn-primary" @click="autoPaymentForm">Set up auto-payment</button> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="mandate-info" v-if="mandate.id"> | <div id="mandate-info" v-if="mandate.id"> | ||||
| <p>Auto-payment is set to fill up your account by <b>{{ mandate.amount }} CHF</b> | <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>. | every time your account balance gets under <b>{{ mandate.balance }} CHF</b>. | ||||
| You will be charged via {{ mandate.method }}. | You will be charged via {{ mandate.method }}. | ||||
| </p> | </p> | ||||
| <p v-if="mandate.isDisabled" class="disabled-mandate text-danger"> | |||||
| The configured auto-payment has been disabled. Top up your wallet or | |||||
| raise the auto-payment amount. | |||||
| </p> | |||||
| <p>You can cancel or change the auto-payment at any time.</p> | <p>You can cancel or change the auto-payment at any time.</p> | ||||
| <div class="form-group d-flex justify-content-around"> | <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-danger" @click="autoPaymentDelete">Cancel auto-payment</button> | ||||
| <button type="button" class="btn btn-primary" @click="autoPaymentChange">Change auto-payment</button> | <button type="button" class="btn btn-primary" @click="autoPaymentChange">Change auto-payment</button> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="auto-payment" v-if="paymentForm == 'auto'"> | <div id="auto-payment" v-if="paymentForm == 'auto'"> | ||||
| Show All 21 Lines | <div class="container" dusk="wallet-component"> | ||||
| </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> | ||||
| <p v-if="mandate.isDisabled" class="disabled-mandate text-danger"> | |||||
| The auto-payment is disabled. Immediately after you submit new settings we'll | |||||
| attempt to top up your wallet. | |||||
| </p> | |||||
| </form> | </form> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="modal-footer"> | <div class="modal-footer"> | ||||
| <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button> | <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button> | ||||
| <button type="button" class="btn btn-primary modal-action" v-if="paymentForm == 'auto' && mandate.id" @click="autoPayment"> | <button type="button" class="btn btn-primary modal-action" v-if="paymentForm == 'auto' && mandate.id" @click="autoPayment"> | ||||
| <svg-icon icon="check"></svg-icon> Submit | <svg-icon icon="check"></svg-icon> Submit | ||||
| </button> | </button> | ||||
| ▲ Show 20 Lines • Show All 77 Lines • ▼ Show 20 Lines | export default { | ||||
| amount: this.mandate.amount, | amount: this.mandate.amount, | ||||
| balance: this.mandate.balance | balance: this.mandate.balance | ||||
| } | } | ||||
| this.$root.clearFormValidation($('#auto-payment form')) | this.$root.clearFormValidation($('#auto-payment form')) | ||||
| axios[method]('/api/v4/payments/mandate', post) | axios[method]('/api/v4/payments/mandate', post) | ||||
| .then(response => { | .then(response => { | ||||
| if (method == 'post') { | |||||
| // a new mandate, redirect to the chackout page | |||||
| if (response.data.redirectUrl) { | if (response.data.redirectUrl) { | ||||
| location.href = response.data.redirectUrl | location.href = response.data.redirectUrl | ||||
| } else if (response.data.id) { | } else if (response.data.id) { | ||||
| this.stripeCheckout(response.data) | this.stripeCheckout(response.data) | ||||
| } | |||||
| } else { | } else { | ||||
| this.dialog.modal('hide') | // an update | ||||
| if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
| this.dialog.modal('hide'); | |||||
| this.mandate = response.data | |||||
| this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
| } | } | ||||
| } | } | ||||
| }) | }) | ||||
| }, | }, | ||||
| autoPaymentChange(event) { | autoPaymentChange(event) { | ||||
| this.autoPaymentForm(event, 'Update auto-payment') | this.autoPaymentForm(event, 'Update auto-payment') | ||||
| }, | }, | ||||
| ▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines | |||||