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 |