Changeset View
Changeset View
Standalone 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">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div> | <div class="card-title">{{ $t('wallet.title') }} <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> | ||||
<div v-if="showPendingPayments" class="alert alert-warning"> | <div v-if="showPendingPayments" class="alert alert-warning"> | ||||
{{ $t('wallet.pending-payments-warning') }} | {{ $t('wallet.pending-payments-warning') }} | ||||
</div> | </div> | ||||
<p> | <p> | ||||
<button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</button> | <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn> | ||||
</p> | </p> | ||||
<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending"> | <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending"> | ||||
<template v-if="mandate.id && !mandate.isValid"> | <template v-if="mandate.id && !mandate.isValid"> | ||||
<div class="alert alert-danger"> | <div class="alert alert-danger"> | ||||
{{ $t('wallet.auto-payment-failed') }} | {{ $t('wallet.auto-payment-failed') }} | ||||
</div> | </div> | ||||
<button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button> | <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | ||||
</template> | </template> | ||||
<button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</button> | <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn> | ||||
</div> | </div> | ||||
<div id="mandate-info" v-else> | <div id="mandate-info" v-else> | ||||
<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger"> | ||||
{{ $t('wallet.auto-payment-disabled') }} | {{ $t('wallet.auto-payment-disabled') }} | ||||
</div> | </div> | ||||
<template v-else> | <template v-else> | ||||
<p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p> | <p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p> | ||||
<p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p> | <p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p> | ||||
</template> | </template> | ||||
<div v-if="mandate.isPending" class="alert alert-warning"> | <div v-if="mandate.isPending" class="alert alert-warning"> | ||||
{{ $t('wallet.auto-payment-inprogress') }} | {{ $t('wallet.auto-payment-inprogress') }} | ||||
</div> | </div> | ||||
<p class="buttons"> | <p class="buttons"> | ||||
<button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button> | <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | ||||
<button type="button" class="btn btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</button> | <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn> | ||||
</p> | </p> | ||||
</div> | </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"> | ||||
Show All 18 Lines | <div class="container" dusk="wallet-component"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<p v-if="receipts.length"> | <p v-if="receipts.length"> | ||||
{{ $t('wallet.receipts-hint') }} | {{ $t('wallet.receipts-hint') }} | ||||
</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> | ||||
<button type="button" class="btn btn-secondary" @click="receiptDownload"> | <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn> | ||||
<svg-icon icon="download"></svg-icon> {{ $t('btn.download') }} | |||||
</button> | |||||
</div> | </div> | ||||
<p v-if="!receipts.length"> | <p v-if="!receipts.length"> | ||||
{{ $t('wallet.receipts-none') }} | {{ $t('wallet.receipts-none') }} | ||||
</p> | </p> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" 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"> | <div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log> | <payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log> | ||||
</div> | </div> | ||||
</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="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button> | <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | ||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<div id="payment-method" v-if="paymentForm == 'method'"> | <div id="payment-method" v-if="paymentForm == 'method'"> | ||||
<form data-validation-prefix="mandate_"> | <form data-validation-prefix="mandate_"> | ||||
<div id="payment-method-selection"> | <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"> | <a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" class="card link-profile"> | ||||
<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" /> | ||||
▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines | <div class="container" dusk="wallet-component"> | ||||
</p> | </p> | ||||
<div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0"> | <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0"> | ||||
{{ $t('wallet.auto-payment-disabled-next') }} | {{ $t('wallet.auto-payment-disabled-next') }} | ||||
</div> | </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-bs-dismiss="modal">{{ $t('btn.cancel') }}</button> | <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn> | ||||
<button type="button" class="btn btn-primary modal-action" | <btn class="btn-primary modal-action" icon="check" @click="autoPayment" | ||||
v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)" | v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)" | ||||
@click="autoPayment" | |||||
> | > | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | {{ $t('btn.submit') }} | ||||
</button> | </btn> | ||||
<button type="button" class="btn btn-primary modal-action" | <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment" | ||||
v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending" | v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending" | ||||
@click="autoPayment" | |||||
> | > | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }} | {{ $t('btn.continue') }} | ||||
</button> | </btn> | ||||
<button type="button" class="btn btn-primary modal-action" | <btn class="btn-primary modal-action" icon="check" @click="payment" | ||||
v-if="paymentForm == 'manual'" | v-if="paymentForm == 'manual'" | ||||
@click="payment" | |||||
> | > | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }} | {{ $t('btn.continue') }} | ||||
</button> | </btn> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines |