mareike/app/Domains/Invoice/Views/Partials/newInvoice/refund-data.vue

<script setup>
import { ref } from 'vue'
import Modal from "../../../../../Views/Components/Modal.vue";
import IbanInput from "../../../../../Views/Components/IbanInput.vue";
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
import TextResource from "../../../../../Views/Components/TextResource.vue";
import {invoiceCheckContactName} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
import {toast} from "vue3-toastify";

const { request } = useAjax();

const emit = defineEmits(['close'])


const props = defineProps({
    eventId: Number,
    invoiceType: String,
    amount: [String, Number],
    otherText: String,
    receipt: File,
    userName: String,
    userEmail: String,
    userTelephone: String,
    userAccountOwner: String,
    userIban: String,
    havePassengers: Number,
    materialTransportation: Boolean,
})

console.log(props.receipt)

const finalStep = ref(true)
const userName = ref(props.userName)
const userEmail = ref(props.userEmail)
const userTelephone = ref(props.userTelephone)
const userIban = ref(props.userIban)
const userAccountOwner = ref(props.userAccountOwner)
const sending = ref(false)
const success = ref(false)
const decision = ref('')
const errorMsg = ref('')
const confirmation = ref(null)


async function sendData() {
    if (!userName.value) return

    sending.value = true
    errorMsg.value = ''
    success.value = false

    const formData = new FormData()

    formData.append('name', userName.value)
    formData.append('email', userEmail.value)
    formData.append('telephone', userTelephone.value)
    formData.append('amount', props.amount)
    formData.append('otherText', props.otherText)
    formData.append('decision', decision.value)
    formData.append('accountOwner', userAccountOwner.value)
    formData.append('accountIban', userIban.value)
    formData.append('havePassengers', props.havePassengers ? 1 : 0)
    formData.append('materialTransportation', props.materialTransportation ? 1 : 0)

    if (props.receipt) {
        formData.append('receipt', props.receipt)
    }


    try {
        const response = await request('/api/v1/invoice/new/' + props.eventId + '/' + props.invoiceType, {
            method: 'POST',
            body: formData
        })

        if (response.status === 'success') {
            window.location.href = '/';
        }
    } catch (err) {
        toast.error(result.message);
    } finally {
        sending.value = false
    }

}

</script>

<template>
    <Modal :show="finalStep" title='Bitte gib deine Daten ein' @close="emit('close')">
        <label>
            <strong>Dein Name Name (kein Pfadiname):</strong>
        </label><br />
        <input
            type="text"
            @keyup="invoiceCheckContactName();"
            id="contact_name"
            name="contact_name" v-model="userName"
            style="font-size: 14pt; width: 550px;" /><br /><br />

        <label>
            <strong>E-Mail-Adresse (Für Rückfragen):</strong>
        </label><br />
        <input
            type="email"
            name="contact_email"
            v-model="userEmail"
            style="font-size: 14pt; width: 550px;" /><br /><br />

        <label>
            <strong>Telefonnummer (für Rückfragen):</strong>
        </label><br />
        <input
            type="text"
            id="contact_telephone"
            name="contact_telephone" v-model="userTelephone"
            style="font-size: 14pt; width: 550px;" /><br /><br />

        <span id="decision" v-if="userName !== '' && decision === ''">
          <label><br />
              <strong>Möchtest du den Betrag spenden?</strong>
          </label><br />

          <input type="button" style="border-radius: 0; width: 100px;" @click="decision='donation'" value="Ja" />
          <input type="button" style="border-radius: 0; width: 100px;" @click="decision='payout'" value="Nein" />
        </span>

        <span id="confirm_donation" v-if="decision === 'donation'">
            <input type="radio" name="confirmation_radio" value="donation" id="confirmation_radio_donation" v-model="confirmation">
            <TextResource belongsTo="confirmation_radio_donation" textName="CONFIRMATION_DONATE" />
            <br /><br />
          <input type="button" class="mareike-button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
        </span>

        <span id="confirm_payment" v-if="decision === 'payout'">
            <label>
            <strong>Konto-Inhaber*in:</strong></label><br />
                <input type="text" name="account_owner" id="account_owner" v-model="userAccountOwner" style="font-size: 14pt; width: 550px;" /><br /><br />

            <label>
            <strong>IBAN:</strong>
          </label><br />
            <IbanInput id="account_iban" name="account_iban" v-model="userIban" style="font-size: 14pt; width: 550px;" /><br /><br />

            <span v-if="userAccountOwner != '' && userIban && userIban.length === 27"><br />
                <input type="radio" name="confirmation_radio" value="payment" id="confirmation_radio_payment"  v-model="confirmation">
                 <TextResource belongsTo="confirmation_radio_payment" textName="CONFIRMATION_PAYMENT" /><br /><br />
              <input type="button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
            </span>
        </span>
    </Modal>
</template>

<style scoped>
/* optional styling */
</style>