Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Wallet.vue
Show First 20 Lines • Show All 81 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 All 35 Lines | <script> | ||||
import { downloadFile } from '../js/utils' | import { downloadFile } from '../js/utils' | ||||
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: { | ||||
ModalDialog, | ModalDialog, | ||||
TransactionLog, | TransactionLog, | ||||
PaymentLog | PaymentLog | ||||
}, | }, | ||||
▲ Show 20 Lines • Show All 113 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.newWindowUrl) { | |||||
machniak: `newWindowUrl` would be clearer. | |||||
window.open(response.data.newWindowUrl, '_blank') | |||||
Not Done Inline ActionsThe 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… | |||||
Done Inline ActionsI 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.$refs.paymentDialog.hide(); | |||||
Done Inline ActionsIt 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 118 Lines • Show Last 20 Lines |
newWindowUrl would be clearer.