feat: receipt view (#41)

* refactor: handle show form  receipt

* refactor: fetch receipt

* fix: i18n

* refactor: quotation receipt components

* refactor: by data Receipt

* refactor: delete  btn peview

* fix: wrong view condition

* rfactor: send Queery quotationId

* refactor: edit condition view

---------

Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>
Co-authored-by: puriphatt <puriphat@frappet.com>

src/i18n/eng.ts

@@ -736,6 +736,7 @@ export default {
       payAll: 'Pay All',
       allInstallments: 'Payment',
       paymentDueDate: 'Payment due date',
+      paymentMethod: 'Payment Method',
       notYetPaid: 'Unpaid',
       alreadyPaid: 'Paid',
       amountToBePaid: 'Amount to be paid',
@@ -744,7 +745,9 @@ export default {
       PaymentWait: 'Waiting for payment',
       PaymentInProcess: 'Waiting for verification',
       PaymentRetry: 'Incomplete payment, try again',
-      PaymentSuccess: 'Payment completed',
+      PaymentSuccess: 'Payment Completed',
+      PaymentReceive: 'Payment Received',
+      receiptIssued: 'Receipt Issued',
     },
 
     type: {

src/i18n/tha.ts

@@ -731,6 +731,7 @@ export default {
       payAll: 'จ่ายทั้งหมด',
       allInstallments: 'งวดทั้งหมด',
       paymentDueDate: 'วันครบกำหนดชำระเงิน วันที่',
+      paymentMethod: 'วิธีการชำระเงิน',
       notYetPaid: 'ยังไม่ได้ชำระเงิน',
       alreadyPaid: 'ชำระเงินแล้ว',
       amountToBePaid: 'ยอดเงินที่ต้องชำระ',
@@ -740,6 +741,8 @@ export default {
       PaymentInProcess: 'ชำระเงินแล้ว รอตรวจสอบ',
       PaymentRetry: 'ชำระไม่ครบถ้วน ชำระใหม่',
       PaymentSuccess: 'ชำระเรียบร้อย',
+      PaymentReceive: 'รับชำระเงิน',
+      receiptIssued: 'ออกใบเสร็จรับเงินแล้ว',
     },
 
     type: {

src/pages/05_quotation/PaymentForm.vue

@@ -488,16 +488,6 @@ onMounted(async () => {
                     </span>
 
                     <div class="q-ml-auto row" style="gap: 10px">
-                      <MainButton
-                        v-if="p.paymentStatus === 'PaymentSuccess'"
-                        outlined
-                        icon="mdi-play-box-outline"
-                        color="207 96% 32%"
-                        @click.stop="$emit('view', p.invoiceId)"
-                      >
-                        {{ $t('customerEmployee.fileType.receipt') }}
-                      </MainButton>
-
                       <q-btn
                         @click.stop
                         unelevated

src/pages/05_quotation/QuotationForm.vue

@@ -20,6 +20,8 @@ import {
   calculateDaysUntilExpire,
   dialog,
 } from 'src/stores/utils';
+
+import { useReceipt } from 'stores/payment';
 import useCustomerStore from 'stores/customer';
 import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
@@ -31,6 +33,7 @@ import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 import { QuotationPayload } from 'src/stores/quotations/types';
 import { EmployeeWorker } from 'src/stores/quotations/types';
 import { Employee } from 'src/stores/employee/types';
+import { Receipt } from 'src/stores/payment/types';
 import {
   ProductGroup,
   Product,
@@ -59,6 +62,7 @@ import {
   CloseButton,
   MainButton,
 } from 'components/button';
+import QuotationFormReceipt from './QuotationFormReceipt.vue';
 import QuotationFormProductSelect from './QuotationFormProductSelect.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
@@ -87,6 +91,7 @@ type Node = {
 
 type ProductGroupId = string;
 
+const useReceiptStore = useReceipt();
 const configStore = useConfigStore();
 const productServiceStore = useProductServiceStore();
 const employeeFormStore = useEmployeeForm();
@@ -110,6 +115,8 @@ const {
 
 const { data: config } = storeToRefs(configStore);
 
+const receiptList = ref<Receipt[]>([]);
+
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const toggleWorker = ref(true);
@@ -296,6 +303,7 @@ async function fetchStatus() {
       title: 'ใบเสร็จรับเงิน',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
       handler: () => {
+        fetchReceipt();
         view.value =
           quotationFormData.value.payCondition === 'Full' ||
           quotationFormData.value.payCondition === 'BillFull'
@@ -330,6 +338,16 @@ async function fetchQuotation() {
   await fetchStatus();
 }
 
+async function fetchReceipt() {
+  const res = await useReceiptStore.getReceiptList({
+    quotationId: quotationFormData.value.id,
+  });
+
+  if (res) {
+    receiptList.value = res.result;
+  }
+}
+
 async function closeTab() {
   if (quotationFormState.value.mode === 'edit') {
     quotationForm.resetForm();
@@ -922,7 +940,7 @@ const view = ref<View>(View.Quotation);
 
       <div
         v-if="quotationFormState.mode !== 'create'"
-        class="column col-2"
+        class="column col-2 q-ml-auto"
         style="gap: 10px"
       >
         <div class="row justify-end">
@@ -1004,8 +1022,7 @@ const view = ref<View>(View.Quotation);
             v-if="
               view === View.Quotation ||
               view === View.Accepted ||
-              view === View.Invoice ||
+              view === View.Invoice
-              view === View.Receipt
             "
           >
             <q-expansion-item
@@ -1199,6 +1216,7 @@ const view = ref<View>(View.Quotation);
                 />
               </div>
             </q-expansion-item>
+
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1242,6 +1260,7 @@ const view = ref<View>(View.Quotation);
                 </template>
               </div>
             </q-expansion-item>
+
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -1300,7 +1319,11 @@ const view = ref<View>(View.Quotation);
           </template>
           <template v-else>
             <PaymentForm
-              v-if="view !== View.InvoicePre"
+              v-if="
+                view !== View.InvoicePre &&
+                view !== View.ReceiptPre &&
+                view !== View.Receipt
+              "
               :data="quotationFormState.source"
               @view="
                 (invoiceId) => {
@@ -1312,8 +1335,8 @@ const view = ref<View>(View.Quotation);
                 }
               "
             />
-
             <q-expansion-item
+              v-if="view === View.InvoicePre"
               for="item-up"
               id="item-up"
               dense
@@ -1419,9 +1442,16 @@ const view = ref<View>(View.Quotation);
                   </template>
                 </SwitchItem>
               </div>
-              .
             </q-expansion-item>
           </template>
+
+          <QuotationFormReceipt
+            v-if="view === View.ReceiptPre || view === View.Receipt"
+            v-for="v in receiptList"
+            :amount="v.amount"
+            :date="v.date"
+            :pay-type="quotationFormData.payCondition"
+          />
         </div>
       </section>
     </article>

src/pages/05_quotation/QuotationFormReceipt.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { formatNumberDecimal } from 'stores/utils';
+import { dateFormatJS } from 'src/utils/datetime';
+
+withDefaults(
+  defineProps<{
+    payType: string;
+    amount: number;
+    date: string | Date;
+  }>(),
+  { payType: 'Full', amount: 0, date: () => new Date() },
+);
+</script>
+<template>
+  <section class="surface-1 rounded row">
+    <aside class="column col bordered-r q-py-md q-pl-md">
+      <span class="text-weight-medium text-body1">
+        {{ $t('quotation.receiptDialog.PaymentReceive') }}
+      </span>
+      <span class="app-text-muted-2 q-pt-md">
+        {{ $t('quotation.receiptDialog.paymentMethod') }}
+      </span>
+      <span class="row items-center">
+        {{ $t(`quotation.type.${payType}`) }}
+        <q-icon name="mdi-minus" class="q-px-xs" />
+        <article class="app-text-positive text-weight-medium">
+          {{ $t('quotation.receiptDialog.PaymentSuccess') }}
+        </article>
+        <article class="q-ml-auto text-weight-bold text-body1 q-pr-lg">
+          ฿ {{ formatNumberDecimal(amount, 2) }}
+        </article>
+      </span>
+    </aside>
+
+    <aside class="column col q-py-md text-right self-center q-px-md">
+      <span class="app-text-positive text-weight-bold text-body1">
+        {{ $t('quotation.receiptDialog.receiptIssued') }}
+      </span>
+      <div class="app-text-muted-2">
+        <q-icon name="mdi-calendar-blank-outline" />
+        {{
+          dateFormatJS({
+            date: date,
+            dayStyle: '2-digit',
+            monthStyle: '2-digit',
+          })
+        }}
+      </div>
+    </aside>
+  </section>
+</template>
+<style scoped></style>