From a80f6f9016ef1893c9a5bc86c2b70ac87e599c8e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 14 May 2025 18:53:37 +0200
Subject: [PATCH] feat: new ticket payment dialog

---
 .../Ticket/components/TicketNewPayment.vue    | 306 ++++++++++++++++++
 1 file changed, 306 insertions(+)
 create mode 100644 src/pages/Ticket/components/TicketNewPayment.vue

diff --git a/src/pages/Ticket/components/TicketNewPayment.vue b/src/pages/Ticket/components/TicketNewPayment.vue
new file mode 100644
index 000000000..98df543a2
--- /dev/null
+++ b/src/pages/Ticket/components/TicketNewPayment.vue
@@ -0,0 +1,306 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+
+import { usePrintService } from 'src/composables/usePrintService';
+import useNotify from 'src/composables/useNotify.js';
+
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
+import { useState } from 'src/composables/useState';
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const { sendEmail, openReport } = usePrintService();
+const { dialogRef } = useDialogPluginComponent();
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+    },
+    clientId: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        default: null,
+    },
+});
+
+const closeButton = ref(null);
+const viewReceipt = ref();
+const shouldSendEmail = ref(false);
+const maxAmount = ref();
+const accountingType = ref({});
+const isCash = ref(false);
+const formModelRef = ref(false);
+const amountToReturn = ref();
+const filterBanks = {
+    fields: ['id', 'bank', 'accountingTypeFk'],
+    include: { relation: 'accountingType' },
+    order: 'id',
+    limit: 30,
+};
+
+const state = useState();
+const user = state.getUser();
+const initialData = ref({
+    ...$props.formData.value,
+    companyFk: user.value.companyFk,
+    payed: Date.vnNew(),
+});
+
+function setPaymentType(data, accounting) {
+    data.bankFk = accounting.id;
+    if (!accounting) return;
+    accountingType.value = accounting.accountingType;
+    data.description = [];
+    data.payed = Date.vnNew();
+    isCash.value = accountingType.value.code == 'cash';
+    viewReceipt.value = isCash.value;
+    if (accountingType.value.daysInFuture)
+        data.payed.setDate(data.payed.getDate() + accountingType.value.daysInFuture);
+    maxAmount.value = accountingType.value && accountingType.value.maxAmount;
+    if (accountingType.value.code == 'compensation') return (data.description = '');
+
+    let descriptions = [];
+    if (accountingType.value.receiptDescription)
+        descriptions.push(accountingType.value.receiptDescription);
+    if (data.description > 0) descriptions.push(data.description);
+    data.description = descriptions.join(', ');
+}
+
+const calculateFromAmount = (event) => {
+    initialData.value.amountToReturn = Number(
+        (parseFloat(initialData.value.deliveredAmount) + parseFloat(event) * -1).toFixed(
+            2,
+        ),
+    );
+};
+
+const calculateFromDeliveredAmount = (event) => {
+    amountToReturn.value = Number((event - initialData.value.amountPaid).toFixed(2));
+};
+
+function onBeforeSave(data) {
+    const exceededAmount = data.amountPaid > maxAmount.value;
+    if (isCash.value && exceededAmount)
+        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
+
+    if (isCash.value && shouldSendEmail.value && !data.email)
+        return notify(t('There is no assigned email for this client'), 'negative');
+
+    return data;
+}
+
+async function onDataSaved({ email, id }) {
+    try {
+        debugger;
+        if (shouldSendEmail.value && isCash.value)
+            await sendEmail(`Receipts/${id}/receipt-email`, {
+                recipient: email,
+            });
+
+        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`, {}, '_blank');
+    } finally {
+        if ($props.promise) $props.promise();
+        if (closeButton.value) closeButton.value.click();
+    }
+}
+
+async function getSupplierClientReferences(data) {
+    if (!data) return (initialData.value.description = '');
+    const params = { bankAccount: data.compensationAccount };
+    const { data: reference } = await axios(`Clients/getClientOrSupplierReference`, {
+        params,
+    });
+    if (reference.supplierId) {
+        data.description = t('Supplier Compensation Reference', {
+            supplierId: reference.supplierId,
+            supplierName: reference.supplierName,
+        });
+        return;
+    }
+    data.description = t('Client Compensation Reference', {
+        clientId: reference.clientId,
+        clientName: reference.clientName,
+    });
+}
+
+async function getAmountPaid() {
+    const filter = {
+        where: {
+            clientFk: $props.clientId,
+            companyFk: initialData.value.companyFk,
+        },
+    };
+
+    const { data } = await getClientRisk(filter);
+    initialData.value.amountPaid = (data?.length && data[0].amount) || undefined;
+}
+
+async function onSubmit(formData) {
+    const {
+        data: [{ email }],
+    } = await axios.get('Clients', {
+        params: {
+            filter: JSON.stringify({ where: { id: $props.clientFk } }),
+        },
+    });
+
+    const { data } = await axios.post(`Clients/${formData.clientFk}/createReceipt`, {
+        payed: formData.payed,
+        companyFk: formData.companyFk,
+        bankFk: formData.bankFk,
+        amountPaid: formData.amountPaid,
+        description: formData.description,
+        clientFk: $props.clientFk,
+        email,
+    });
+
+    if (data) notify('globals.dataSaved', 'positive');
+    await onDataSaved(data);
+}
+</script>
+
+<template>
+    <QDialog ref="dialogRef" persistent>
+        <FormModelPopup
+            ref="formModelRef"
+            :form-initial-data="initialData"
+            :save-fn="onSubmit"
+            :prevent-submit="true"
+            :mapper="onBeforeSave"
+        >
+            <template #form-inputs="{ data, validate }">
+                <h5 class="q-mt-none">{{ t('New payment') }}</h5>
+                <VnRow>
+                    <VnSelect
+                        autofocus
+                        :label="t('Bank')"
+                        v-model="data.bankFk"
+                        url="Accountings"
+                        :filter="filterBanks"
+                        option-label="bank"
+                        :include="{ relation: 'accountingType' }"
+                        sort-by="id"
+                        :limit="0"
+                        @update:model-value="
+                            (value, options) => setPaymentType(data, value, options)
+                        "
+                        :emit-value="false"
+                        data-cy="paymentBank"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                    <VnInputNumber
+                        :label="t('Amount')"
+                        :required="true"
+                        @update:model-value="calculateFromAmount($event)"
+                        clearable
+                        v-model.number="data.amountPaid"
+                        data-cy="paymentAmount"
+                        :positive="false"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInputDate
+                        :label="t('Date')"
+                        v-model="data.payed"
+                        :required="true"
+                    />
+                    <VnSelect
+                        url="Companies"
+                        :label="t('Company')"
+                        :required="true"
+                        :rules="validate('entry.companyFk')"
+                        hide-selected
+                        option-label="code"
+                        v-model="data.companyFk"
+                        @update:model-value="getAmountPaid()"
+                    />
+                </VnRow>
+                <div v-if="accountingType.code == 'compensation'">
+                    <div class="text-h6">
+                        {{ t('Compensation') }}
+                    </div>
+                    <VnRow>
+                        <VnAccountNumber
+                            :label="t('Compensation account')"
+                            clearable
+                            v-model="data.compensationAccount"
+                            @blur="getSupplierClientReferences(data)"
+                        />
+                    </VnRow>
+                </div>
+                <VnInput
+                    :label="t('Reference')"
+                    :required="true"
+                    clearable
+                    v-model="data.description"
+                />
+                <div v-if="accountingType.code == 'cash'">
+                    <div class="text-h6">{{ t('Cash') }}</div>
+                    <VnRow>
+                        <VnInputNumber
+                            :label="t('Delivered amount')"
+                            @update:model-value="calculateFromDeliveredAmount($event)"
+                            clearable
+                            v-model="data.deliveredAmount"
+                        />
+                        <VnInputNumber
+                            :label="t('Amount to return')"
+                            disable
+                            v-model="amountToReturn"
+                        />
+                    </VnRow>
+                    <VnRow>
+                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
+                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
+                    </VnRow>
+                </div>
+            </template>
+        </FormModelPopup>
+    </QDialog>
+</template>
+
+<i18n>
+en:
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+es:
+    New payment: Añadir pago
+    Date: Fecha
+    Company: Empresa
+    Bank: Caja
+    Amount: Importe
+    Reference: Referencia
+    Cash: Efectivo
+    Delivered amount: Cantidad entregada
+    Amount to return: Cantidad a devolver
+    View recipt: Ver recibido
+    Send email: Enviar correo
+    Compensation: Compensación
+    Compensation account: Cuenta para compensar
+    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
+    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
+    There is no assigned email for this client: No hay correo asignado para este cliente
+    Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
+</i18n>