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";
import ErrorText from "../../../../../Views/Components/ErrorText.vue";

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,
    userAccountIban: String,
    travelReason: String,
    travelReasonNote: String,
    travellers: String,
})

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

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('travelReason', props.travelReason)
    formData.append('travelReasonNote', props.travelReasonNote ?? '')
    formData.append('travellers', props.travellers ?? '')
    formData.append('notices', notices.value)

    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 = '/';
        }  else {
            receiptError.value = response.message;
        }
    } catch (err) {
        toast.error(result.message);
    } finally {
        sending.value = false
    }

}

</script>

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

        <label v-if="userName !== ''">
            <strong>E-Mail-Adresse (Für Rückfragen):</strong>
        </label><br />
        <input
            v-if="userName !== ''"
            type="email"
            class="refund-input"
            name="contact_email"
            v-model="userEmail" /><br /><br />

        <label v-if="userName !== ''">
            <strong>Telefonnummer (für Rückfragen):</strong>
        </label><br />
        <input
            v-if="userName !== ''"
            type="text"
            class="refund-input"
            id="contact_telephone"
            name="contact_telephone" v-model="userTelephone" /><br /><br />

        <label v-if="userName !== ''">
            <strong>Weitere Informationen zur Abrechnung (Max. 128 Zeichen):</strong>
        </label><br />
        <textarea
            id="notices"
            class="refund-input"
            name="notices" v-model="notices"
            maxlength="128" /><br /><br />

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

          <input type="button" class="refund-choice" @click="decision='donation'" value="Ja" />
          <input type="button" class="refund-choice" @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" class="refund-input" v-model="userAccountOwner" /><br /><br />

            <label>
            <strong>IBAN:</strong>
          </label><br />
            <IbanInput id="account_iban" name="account_iban" class="refund-input" v-model="userIban" /><br /><br />
            <ErrorText :message="receiptError" />
            <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>
.refund-input {
    font-size: 14pt;
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
}

.refund-choice {
    border-radius: 0;
    width: 100px;
}

@media (max-width: 639px) {
    .refund-input {
        font-size: 12pt;
        max-width: 100%;
    }

    .refund-choice {
        width: calc(50% - 6px);
    }
}
</style>