schon/storefront/components/forms/deposit.vue

67 lines
No EOL
1.5 KiB
Vue

<template>
<!-- <form @submit.prevent="handleDeposit()" class="form">-->
<form @submit.prevent="" class="form">
<div class="form__box">
<ui-input
:type="'text'"
:placeholder="''"
v-model="amount"
:numberOnly="true"
/>
<ui-input
:type="'text'"
:placeholder="''"
v-model="amount"
:numberOnly="true"
/>
</div>
<!-- <ui-button-->
<!-- class="form__button"-->
<!-- :isDisabled="!isFormValid"-->
<!-- :isLoading="loading"-->
<!-- >-->
<!-- {{ $t('buttons.topUp') }}-->
<!-- </ui-button>-->
<ui-button
class="form__button"
:isDisabled="!isFormValid"
>
{{ t('buttons.topUp') }}
</ui-button>
</form>
</template>
<script setup>
// import {useDeposit} from "@/composables/user/useDeposit.js";
const { t } = useI18n()
const companyStore = useCompanyStore()
const paymentMin = computed(() => companyStore.companyInfo?.paymentGatewayMinimum)
const paymentMax = computed(() => companyStore.companyInfo?.paymentGatewayMaximum)
const amount = ref('')
const isFormValid = computed(() => {
return (
amount.value >= paymentMin.value &&
amount.value <= paymentMax.value
)
})
// const { deposit, loading } = useDeposit();
//
// async function handleDeposit() {
// await deposit(amount.value);
// }
</script>
<style lang="scss" scoped>
.form {
&__box {
display: flex;
align-items: flex-start;
gap: 20px;
}
}
</style>