Differential D2239 Diff 6643 src/resources/vue/Wallet.vue

Changeset View

Standalone View

src/resources/vue/Wallet.vue

<template>		<template>
<div class="container" dusk="wallet-component">		<div class="container" dusk="wallet-component">
<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">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></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 v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>		<p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>
<p>Add credit to your account or setup an automatic payment by using the button below.</p>
<button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button>		<div v-if="showPendingPayments" class="alert alert-warning">
		You have payments that are still in progress. See the "Pending Payments" tab below.
		bohlenderUnsubmitted Done Inline Actions a payment that is still in progress / payments that are still in progress bohlender: a payment that is still in progress / payments that are still in progress
		machniakUnsubmitted Done Inline Actions the tab is called Pending Payments. machniak: the tab is called Pending Payments.
		</div>
		<p>
		<button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">Add credit</button>
		</p>
		<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
		<template v-if="mandate.id && !mandate.isValid">
		<div class="alert alert-danger">
		The setup of automatic payments failed. Restart the process to enable automatic top-ups.
		</div>
		<button type="button" class="btn btn-danger" @click="autoPaymentDelete">Cancel auto-payment</button>
		</template>
		<button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">Set up auto-payment</button>
		</div>
		<div id="mandate-info" v-else>
		machniakUnsubmitted Done Inline Actions It would look better if Cancel auto-payment and Change auto-paymet would appear side by side (not below). machniak: It would look better if Cancel auto-payment and Change auto-paymet would appear side by side…
		<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
		The configured auto-payment has been disabled. Top up your wallet or
		raise the auto-payment amount.
		</div>
		<template v-else>
		machniakUnsubmitted Done Inline Actions template? machniak: template?
		mollekopfAuthorUnsubmitted Done Inline Actions A way to group things in vue that will not appear in the finally generated html. mollekopf: A way to group things in vue that will not appear in the finally generated html.
		<p>
		Auto-payment is <b>set</b> to fill up your account by <b>{{ mandate.amount }} CHF</b>
		every time your account balance gets under <b>{{ mandate.balance }} CHF</b>.
		</p>
		<p>
		Method of payment: {{ mandate.method }}
		</p>
		</template>
		<div v-if="mandate.isPending" class="alert alert-warning">
		The setup of the automatic payment is still in progress.
		</div>
		<p>
		<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>
		</p>
		</div>
</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">
Receipts		Receipts
</a>		</a>
</li>		</li>
<li class="nav-item">		<li class="nav-item">
<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">		<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">
History		History
</a>		</a>
</li>		</li>
		<li v-if="showPendingPayments" class="nav-item">
		<a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false">
		Pending Payments
		</a>
		</li>
</ul>		</ul>
<div class="tab-content">		<div class="tab-content">
<div class="tab-pane show active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">		<div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
<div class="card-body">		<div class="card-body">
<div class="card-text">		<div class="card-text">
<p v-if="receipts.length">		<p v-if="receipts.length">
Here you can download receipts (in PDF format) for payments in specified period.		Here you can download receipts (in PDF format) for payments in specified period.
Select the period and press the Download button.		Select the period and press the Download button.
</p>		</p>
<div v-if="receipts.length" class="input-group">		<div v-if="receipts.length" class="input-group">
<select id="receipt-id" class="form-control">		<select id="receipt-id" class="form-control">
<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>		<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
</select>		</select>
<div class="input-group-append">		<div class="input-group-append">
<button type="button" class="btn btn-secondary" @click="receiptDownload">		<button type="button" class="btn btn-secondary" @click="receiptDownload">
<svg-icon icon="download"></svg-icon> Download		<svg-icon icon="download"></svg-icon> Download
</button>		</button>
</div>		</div>
</div>		</div>
<p v-if="!receipts.length">		<p v-if="!receipts.length">
There are no receipts for payments in this account. Please, note that you can download		There are no receipts for payments in this account. Please, note that you can download
receipts after the month ends.		receipts after the month ends.
</p>		</p>
</div>		</div>
</div>		</div>
</div>		</div>
<div class="tab-pane show" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">		<div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
<div class="card-body">		<div class="card-body">
<transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>		<transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>
</div>		</div>
</div>		</div>
		<div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments">
		machniakUnsubmitted Done Inline Actions I think the `show` class is redundant, we probably should remove it from all 'tab-pane' elements. machniak: I think the `show` class is redundant, we probably should remove it from all 'tab-pane'…
		<div class="card-body">
		<payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log>
		</div>
		</div>
</div>		</div>

<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">		<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">		<div class="modal-dialog" role="document">
<div class="modal-content">		<div class="modal-content">
<div class="modal-header">		<div class="modal-header">
<h5 class="modal-title">{{ paymentDialogTitle }}</h5>		<h5 class="modal-title">{{ paymentDialogTitle }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>		<span aria-hidden="true">×</span>
</button>		</button>
</div>		</div>
<div class="modal-body">		<div class="modal-body">
<div id="payment" v-if="paymentForm == 'init'">		<div id="payment-method" v-if="paymentForm == 'method'">
		<form data-validation-prefix="mandate_">
		<div id="payment-method-selection">
		<a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" class="card link-profile">
		machniakUnsubmitted Done Inline Actions I'd like these elements to have the same color as in the Dashboard. Maybe just make them links not buttons? machniak: I'd like these elements to have the same color as in the Dashboard. Maybe just make them links…
		machniakUnsubmitted Done Inline Actions This link have to have `href="#"` to display proper cursor on hover. machniak: This link have to have `href="#"` to display proper cursor on hover.
		<svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
		<img v-if="method.image" v-bind:src="method.image" />
		<span class="name">{{ method.name }}</span>
		</a>
		</div>
		</form>
		</div>
		<div id="manual-payment" v-if="paymentForm == 'manual'">
		<p v-if="wallet.currency != selectedPaymentMethod.currency">
		Here is how it works: You specify the amount by which you want to to up your wallet in {{ wallet.currency }}.
		We will then convert this to {{ selectedPaymentMethod.currency }}, and on the next page you will be provided with the bank-details
		to transfer the amount in {{ selectedPaymentMethod.currency }}.
		</p>
		<p v-if="selectedPaymentMethod.id == 'banktransfer'">
		Please note that a bank transfer can take several days to complete.
		</p>
<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 v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning">
		machniakUnsubmitted Done Inline Actions The button has credit-card icon even if you selected PayPal. Maybe we need some more neutral icon. Maybe `check` or `arrow-right`? Or get rid of the icon? More importantly, I'd like this button to appear in the dialog's footer, the same as in the auto-payment setup dialog. machniak: The button has credit-card icon even if you selected PayPal. Maybe we need some more neutral…
<button type="submit" class="btn btn-primary">		You will be charged for {{ $root.price(amount * selectedPaymentMethod.exchangeRate, selectedPaymentMethod.currency) }}
		machniakUnsubmitted Done Inline Actions You could use `{{ $root.price(amount * 100 * selectedPaymentMethod.exchangeRate, selectedPaymentMethod.currency) }}`. What if amount is NaN? machniak: You could use `{{ $root.price(amount * 100 * selectedPaymentMethod.exchangeRate…
<svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue
</button>
</div>		</div>
</form>		</form>
<div class="form-separator"><hr><span>or</span></div>
<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
<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">
<button type="button" class="btn btn-primary" @click="autoPaymentForm">Set up auto-payment</button>
</div>
</div>
<div id="mandate-info" v-else>
<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>.
You will be charged via {{ mandate.method }}.
</p>
<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
raise the auto-payment amount.
</div>
<p>You can cancel or change the auto-payment at any time.</p>
<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-primary" @click="autoPaymentChange">Change auto-payment</button>
</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>		<p>
Here is how it works: Every time your account runs low,		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>
Show All 35 Lines	<div class="container" dusk="wallet-component">
@click="autoPayment"		@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"		<button type="button" class="btn btn-primary modal-action"
v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"		v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
@click="autoPayment"		@click="autoPayment"
>		>
<svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue		<svg-icon icon="check"></svg-icon> Continue
		</button>
		<button type="button" class="btn btn-primary modal-action"
		v-if="paymentForm == 'manual'"
		@click="payment"
		>
		<svg-icon icon="check"></svg-icon> Continue
		machniakUnsubmitted Done Inline Actions Continue2 -> Continue ;) machniak: Continue2 -> Continue ;)
</button>		</button>
</div>		</div>
</div>		</div>
</div>		</div>
</div>		</div>
</div>		</div>
</template>		</template>

<script>		<script>
import TransactionLog from './Widgets/TransactionLog'		import TransactionLog from './Widgets/TransactionLog'
		import PaymentLog from './Widgets/PaymentLog'

export default {		export default {
components: {		components: {
TransactionLog		TransactionLog,
		PaymentLog
},		},
data() {		data() {
return {		return {
amount: '',		amount: '',
mandate: { amount: 10, balance: 0 },		mandate: { amount: 10, balance: 0, method: null },
paymentDialogTitle: null,		paymentDialogTitle: null,
paymentForm: 'init',		paymentForm: null,
		nextForm: null,
receipts: [],		receipts: [],
stripe: null,		stripe: null,
loadTransactions: false,		loadTransactions: false,
		loadPayments: false,
		showPendingPayments: false,
wallet: {},		wallet: {},
walletId: null		walletId: null,
		paymentMethods: [],
		selectedPaymentMethod: null
}		}
},		},
mounted() {		mounted() {
$('#wallet button').focus()		$('#wallet button').focus()

this.walletId = this.$store.state.authInfo.wallets[0].id		this.walletId = this.$store.state.authInfo.wallets[0].id

this.$root.startLoading()		this.$root.startLoading()
Show All 15 Lines	export default {
})		})

if (this.wallet.provider == 'stripe') {		if (this.wallet.provider == 'stripe') {
this.stripeInit()		this.stripeInit()
}		}
})		})
.catch(this.$root.errorHandler)		.catch(this.$root.errorHandler)

		this.loadMandate()

		axios.get('/api/v4/payments/has-pending')
		.then(response => {
		this.showPendingPayments = response.data.hasPending
		})

		},
		updated() {
$(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 ($(e.target).is('#tab-payments')) {
		this.loadPayments = true
		}
})		})
},		},
methods: {		methods: {
paymentDialog() {		loadMandate() {
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 \|\| this.mandate.isPending) {		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)
})		})
}		}
		},
		selectPaymentMethod(method) {
		this.formLock = false

		this.selectedPaymentMethod = method

		this.paymentForm = this.nextForm
this.formLock = false		this.formLock = false
this.paymentForm = 'init'
this.paymentDialogTitle = 'Top up your wallet'

this.dialog = dialog.on('shown.bs.modal', () => {		setTimeout(() => {
dialog.find('#amount').focus()		this.dialog.find('#mandate_amount').focus()
}).modal()		this.dialog.find('#amount').focus()
		}, 10)
},		},
payment() {		payment() {
if (this.formLock) {		if (this.formLock) {
return		return
}		}

// Lock the form to prevent from double submission		// Lock the form to prevent from double submission
this.formLock = true		this.formLock = true
let onFinish = () => { this.formLock = false }		let onFinish = () => { this.formLock = false }

this.$root.clearFormValidation($('#payment-form'))		this.$root.clearFormValidation($('#payment-form'))

axios.post('/api/v4/payments', {amount: this.amount}, { onFinish })		axios.post('/api/v4/payments', {amount: this.amount, methodId: this.selectedPaymentMethod.id, currency: this.selectedPaymentMethod.currency}, { onFinish })
.then(response => {		.then(response => {
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() {
if (this.formLock) {		if (this.formLock) {
return		return
}		}

// Lock the form to prevent from double submission		// Lock the form to prevent from double submission
this.formLock = true		this.formLock = true
let onFinish = () => { this.formLock = false }		let onFinish = () => { this.formLock = false }

const method = this.mandate.id && (this.mandate.isValid \|\| this.mandate.isPending) ? 'put' : 'post'		const method = this.mandate.id && (this.mandate.isValid \|\| this.mandate.isPending) ? 'put' : 'post'
const post = {		let post = {
amount: this.mandate.amount,		amount: this.mandate.amount,
balance: this.mandate.balance		balance: this.mandate.balance,
		}
		machniakUnsubmitted Done Inline Actions Is this.mandate.method always available? machniak: Is this.mandate.method always available?
		mollekopfAuthorUnsubmitted Done Inline Actions This didn't really make sense. I fixed it by making clearer that modifications don't touch the method of payment at all. mollekopf: This didn't really make sense. I fixed it by making clearer that modifications don't touch the…

		// Modifications can't change the method of payment
		if (this.selectedPaymentMethod) {
		post['methodId'] = this.selectedPaymentMethod.id;
		post['currency'] = this.selectedPaymentMethod.currency;
}		}

this.$root.clearFormValidation($('#auto-payment form'))		this.$root.clearFormValidation($('#auto-payment form'))

axios[method]('/api/v4/payments/mandate', post, { onFinish })		axios[method]('/api/v4/payments/mandate', post, { onFinish })
.then(response => {		.then(response => {
if (method == 'post') {		if (method == 'post') {
this.mandate.id = null		this.mandate.id = null
Show All 20 Lines	export default {
axios.delete('/api/v4/payments/mandate')		axios.delete('/api/v4/payments/mandate')
.then(response => {		.then(response => {
this.mandate = { amount: 10, balance: 0 }		this.mandate = { amount: 10, balance: 0 }
if (response.data.status == 'success') {		if (response.data.status == 'success') {
this.$toast.success(response.data.message)		this.$toast.success(response.data.message)
}		}
})		})
},		},

		paymentMethodForm(nextForm) {
		const dialog = $('#payment-dialog')
		this.formLock = false
		this.paymentMethods = []

		this.paymentForm = 'method'
		this.nextForm = nextForm
		machniakUnsubmitted Done Inline Actions I don't like the "Payment Method" nor "Choose Amount" in the dialog title, I would leave the old titles. Imo, from the dialog content it is obvious what to do, so I would rather display the old titles so user know "where he is", instead of "what to do". machniak: I don't like the "Payment Method" nor "Choose Amount" in the dialog title, I would leave the…
		mollekopfAuthorUnsubmitted Done Inline Actions I like the new version better (surprise! ;-) ), but I don't suppose it matters much. You want the titles to be "Top up your wallet" ? mollekopf: I like the new version better (surprise! ;-) ), but I don't suppose it matters much. You want…
		machniakUnsubmitted Done Inline Actions I liked the old titles. It was "Top up your wallet" and "Add auto-payment". So, they were related to the button pressed, not the dialog content which is self-exlanatory. machniak: I liked the old titles. It was "Top up your wallet" and "Add auto-payment". So, they were…
		if (nextForm == 'auto') {
		this.paymentDialogTitle = 'Add auto-payment'
		} else {
		this.paymentDialogTitle = 'Top up your wallet'
		machniakUnsubmitted Done Inline Actions I think we should improve how this loader looks like. machniak: I think we should improve how this loader looks like.
		mollekopfAuthorUnsubmitted Done Inline Actions Maybe, but I don't know how. mollekopf: Maybe, but I don't know how.
		machniakUnsubmitted Done Inline Actions See how addLoader() in app.js works. and maybe add an argument to make addition of `.small` class optional. It might be enough. machniak: See how addLoader() in app.js works. and maybe add an argument to make addition of `.small`…
		}

		const methods = $('#payment-method')
		this.$root.addLoader(methods, false)
		axios.get('/api/v4/payments/methods', {params: {type: nextForm == 'manual' ? 'oneoff' : 'recurring'}})
		.then(response => {
		this.$root.removeLoader(methods)
		this.paymentMethods = response.data
		})
		.catch(this.$root.errorHandler)

		this.dialog = dialog.on('shown.bs.modal', () => {}).modal()
		},
autoPaymentForm(event, title) {		autoPaymentForm(event, title) {
		const dialog = $('#payment-dialog')

this.paymentForm = 'auto'		this.paymentForm = 'auto'
this.paymentDialogTitle = title \|\| 'Add auto-payment'		this.paymentDialogTitle = title
this.formLock = false		this.formLock = false

		this.dialog = dialog.on('shown.bs.modal', () => {
		dialog.find('#mandate_amount').focus()
		}).modal()

setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10)		setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10)
},		},
receiptDownload() {		receiptDownload() {
const receipt = $('#receipt-id').val()		const receipt = $('#receipt-id').val()
this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)		this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
},		},
stripeInit() {		stripeInit() {
let script = $('#stripe-script')		let script = $('#stripe-script')
Show All 34 Lines