Page MenuHomePhorge
Differential D1786 Diff 4939 src/resources/vue/Wallet.vue

Changeset View

Standalone View

View Options

src/resources/vue/Wallet.vue

Show First 20 Lines • Show All 77 Lines • ▼ Show 20 Lines <div class="container" dusk="wallet-component">
</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>
</form> </form>
<div class="form-separator"><hr><span>or</span></div> <div class="form-separator"><hr><span>or</span></div>
<div id="mandate-form" v-if="!mandate.id"> <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
<p>Add auto-payment, so you never run out.</p> <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"> <div class="w-100 text-center">
<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-else>
<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"> <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 The configured auto-payment has been disabled. Top up your wallet or
raise the auto-payment amount. raise the auto-payment amount.
</p> </div>
<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'">
<form data-validation-prefix="mandate_"> <form data-validation-prefix="mandate_">
<p>Here is how it works: Every time your account runs low, <p>
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>
<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.isValid">
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"> <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger">
The auto-payment is disabled. Immediately after you submit new settings we'll The auto-payment is disabled. Immediately after you submit new settings we'll
attempt to top up your wallet. enable it and attempt to top up your wallet.
</p> </div>
</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.isValid || mandate.isPending)"
@click="autoPayment"
>
<svg-icon icon="check"></svg-icon> Submit <svg-icon icon="check"></svg-icon> Submit
</button> </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.isValid && !mandate.isPending"
@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>
</template> </template>
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines export default {
}, },
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)
if (!this.mandate.id) { 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)
Show All 15 Lines export default {
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() {
const method = this.mandate.id ? 'put' : 'post' const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post'
const post = { const post = {
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') { if (method == 'post') {
this.mandate.id = null
// a new mandate, redirect to the chackout page // 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 {
// an update // an update
▲ Show 20 Lines • Show All 65 Lines • Show Last 20 Lines