Differential D3578 Diff 10277 src/resources/vue/Wallet.vue

Changeset View

Standalone View

src/resources/vue/Wallet.vue

Show First 20 Lines • Show All 103 Lines • ▼ Show 20 Lines	<div class="container" dusk="wallet-component">
<svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />		<svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
<img v-if="method.image" :src="method.image" />		<img v-if="method.image" :src="method.image" />
<span class="name">{{ method.name }}</span>		<span class="name">{{ method.name }}</span>
</a>		</a>
</div>		</div>
</form>		</form>
</div>		</div>
<div id="manual-payment" v-if="paymentForm == 'manual'">		<div id="manual-payment" v-if="paymentForm == 'manual'">
<p v-if="wallet.currency != selectedPaymentMethod.currency">		<p v-if="wallet.currency != selectedPaymentMethod.currency && selectedPaymentMethod.id != 'bitcoin'">
{{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}		{{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
</p>		</p>
		<p v-if="selectedPaymentMethod.id == 'bitcoin'">
		{{ $t('wallet.coinbase-hint', { wc: wallet.currency }) }}
		</p>
<p v-if="selectedPaymentMethod.id == 'banktransfer'">		<p v-if="selectedPaymentMethod.id == 'banktransfer'">
{{ $t('wallet.banktransfer-hint') }}		{{ $t('wallet.banktransfer-hint') }}
</p>		</p>
<p>		<p>
{{ $t('wallet.payment-amount-hint') }}		{{ $t('wallet.payment-amount-hint') }}
</p>		</p>
<form id="payment-form" @submit.prevent="payment">		<form id="payment-form" @submit.prevent="payment">
<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-text">{{ wallet.currency }}</span>		<span class="input-group-text">{{ wallet.currency }}</span>
</div>		</div>
<div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">		<div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount) && selectedPaymentMethod.exchangeRate" class="alert alert-warning m-0 mt-3">
{{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}		{{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
</div>		</div>
</form>		</form>
</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>
{{ $t('wallet.auto-payment-hint') }}		{{ $t('wallet.auto-payment-hint') }}
▲ Show 20 Lines • Show All 55 Lines • ▼ Show 20 Lines	<script>
import PaymentLog from './Widgets/PaymentLog'		import PaymentLog from './Widgets/PaymentLog'

import { library } from '@fortawesome/fontawesome-svg-core'		import { library } from '@fortawesome/fontawesome-svg-core'

library.add(		library.add(
require('@fortawesome/free-brands-svg-icons/faPaypal').definition,		require('@fortawesome/free-brands-svg-icons/faPaypal').definition,
require('@fortawesome/free-regular-svg-icons/faCreditCard').definition,		require('@fortawesome/free-regular-svg-icons/faCreditCard').definition,
require('@fortawesome/free-solid-svg-icons/faBuildingColumns').definition,		require('@fortawesome/free-solid-svg-icons/faBuildingColumns').definition,
		require('@fortawesome/free-brands-svg-icons/faBitcoin').definition,
)		)

export default {		export default {
components: {		components: {
TransactionLog,		TransactionLog,
PaymentLog		PaymentLog
},		},
data() {		data() {
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Lines	export default {
methodId: this.selectedPaymentMethod.id,		methodId: this.selectedPaymentMethod.id,
currency: this.selectedPaymentMethod.currency		currency: this.selectedPaymentMethod.currency
}		}

axios.post('/api/v4/payments', post, { onFinish })		axios.post('/api/v4/payments', post, { onFinish })
.then(response => {		.then(response => {
if (response.data.redirectUrl) {		if (response.data.redirectUrl) {
location.href = response.data.redirectUrl		location.href = response.data.redirectUrl
		} else if (response.data.newWindow) {
		machniakUnsubmitted Done Inline Actions `newWindowUrl` would be clearer. machniak: `newWindowUrl` would be clearer.
		window.open(response.data.newWindow, '_blank')
		machniakUnsubmitted Not Done Inline Actions The browser blocks popup windows by default, so user has to allow popups. It's not perfect. I wonder whether it would make sense (if possible) to display the checkout page in an iframe inside the "Top up your wallet" dialog. I guess, popups will do for now. machniak: The browser blocks popup windows by default, so user has to allow popups. It's not perfect. I…
		mollekopfAuthorUnsubmitted Done Inline Actions I agree it kind of sucks, but I couldn't find a quick solution that was better. Perhaps an iframe would work indeed. mollekopf: I agree it kind of sucks, but I couldn't find a quick solution that was better. Perhaps an…
		this.dialog.hide();
		machniakUnsubmitted Done Inline Actions It should be `this.$refs.paymentDialog.hide()` machniak: It should be `this.$refs.paymentDialog.hide()`
} else {		} else {
this.stripeCheckout(response.data)		this.stripeCheckout(response.data)
}		}
})		})
},		},
autoPayment() {		autoPayment() {
if (this.formLock) {		if (this.formLock) {
return		return
▲ Show 20 Lines • Show All 123 Lines • Show Last 20 Lines