125 lines
3.4 KiB
Vue
125 lines
3.4 KiB
Vue
<script setup>
|
|
|
|
import { ref, onMounted, reactive } from 'vue'
|
|
import {checkFilesize} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
|
|
import RefundData from "./refund-data.vue";
|
|
import AmountInput from "../../../../../Views/Components/AmountInput.vue";
|
|
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
|
|
import InfoIcon from '../../../../../Views/Components/InfoIcon.vue'
|
|
import {toast} from "vue3-toastify";
|
|
|
|
|
|
|
|
const data = defineProps({
|
|
eventId: Number,
|
|
userName: String,
|
|
userEmail: String,
|
|
userTelephone: String,
|
|
userIban: String,
|
|
userAccountOwner: String,
|
|
})
|
|
|
|
|
|
const { request } = useAjax();
|
|
const amount = ref(0.00);
|
|
const invoiceType = ref(null);
|
|
const otherText = ref('');
|
|
const receipt = ref(null)
|
|
const finalStep = ref(false)
|
|
|
|
const invoiceTypeCollection = reactive({
|
|
invoiceTypes: {}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
const response = await fetch('/api/v1/core/retrieve-invoice-types');
|
|
const data = await response.json();
|
|
Object.assign(invoiceTypeCollection, data);
|
|
});
|
|
|
|
|
|
function handleFileChange(event) {
|
|
if (checkFilesize('receipt')) {
|
|
receipt.value = event.target.files[0]
|
|
finalStep.value = true
|
|
} else {
|
|
event.target.value = null
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<fieldset>
|
|
<legend><span style="font-weight: bolder;">Wofür hast du den Betrag ausgegeben</span></legend>
|
|
|
|
<p v-for="availableInvoiceType in invoiceTypeCollection.invoiceTypes">
|
|
<input
|
|
name="invpice_type"
|
|
type="radio"
|
|
:value="availableInvoiceType.slug"
|
|
:id="'invoice_type_' + availableInvoiceType.slug"
|
|
v-model="invoiceType"
|
|
>
|
|
<label :for="'invoice_type_' + availableInvoiceType.slug">{{ availableInvoiceType.name }}</label>
|
|
<InfoIcon :text="'INFO_INVOICE_TYPE_' + availableInvoiceType.slug" /><br />
|
|
</p>
|
|
|
|
|
|
<label for="invoice_type_other">
|
|
<input
|
|
type="text"
|
|
class="width-full"
|
|
name="kostengruppe_sonstiges"
|
|
placeholder="Sonstige"
|
|
for="invoice_type_other"
|
|
v-model="otherText"
|
|
@focus="invoiceType = 'other'"
|
|
/>
|
|
</label>
|
|
|
|
</fieldset><br /><br />
|
|
|
|
<fieldset>
|
|
<legend><span style="font-weight: bolder;">Wie hoch ist der Betrag</span></legend>
|
|
<AmountInput v-model="amount" class="width-small" id="amount" name="amount" /> Euro
|
|
<info-icon></info-icon><br /><br />
|
|
|
|
<input
|
|
v-if="amount != '' && invoiceType !== null"
|
|
class="mareike-button"
|
|
onclick="document.getElementById('receipt').click();"
|
|
type="button"
|
|
value="Beleg auswählen und fortfahren" />
|
|
<input accept="application/pdf" type="file" id="receipt" name="receipt" @change="handleFileChange"
|
|
style="display: none"/>
|
|
</fieldset><br />
|
|
|
|
|
|
|
|
<RefundData
|
|
v-if="finalStep"
|
|
:eventId="data.eventId"
|
|
:invoice-type="invoiceType"
|
|
:amount="amount"
|
|
:other-text="otherText"
|
|
:userName="data.userName"
|
|
:userEmail="data.userEmail"
|
|
:userTelephone="data.userTelephone"
|
|
:userIban="data.userIban"
|
|
:userAccountOwner="data.userAccountOwner"
|
|
:receipt="receipt"
|
|
@close="finalStep = false"
|
|
/>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|