From afb9ddf424c847917762ca40c9725827d9d3084d Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 2 Dec 2024 11:31:56 +0700
Subject: [PATCH] refactor: handle intallment no

---
 src/pages/08_request-list/RequestListView.vue | 47 +++++++++++++++++--
 src/stores/payment/types.ts                   |  2 +-
 src/stores/quotations/types.ts                |  1 +
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index b753a907..6c3a0199 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -276,11 +276,38 @@ const successAll = computed(() => {
   });
 });
 
+function getInstallmentInfo() {
+  if (
+    data.value?.quotation.payCondition === 'Full' ||
+    data.value?.quotation.payCondition === 'BillFull'
+  ) {
+    return null;
+  }
+
+  const total = data.value?.quotation.paySplitCount || 0;
+  const paid = data.value?.quotation.invoice?.reduce((a, c) => {
+    if (c.payment?.paymentStatus === 'PaymentSuccess') {
+      a += c.installments.length || 0;
+    }
+    return a;
+  }, 0);
+
+  return { total, paid };
+}
+
 function isInstallmentPaySuccess(installmentNo: number) {
-  const invoice = data.value?.quotation.invoice?.find((lhs) =>
-    lhs.installements.some((rhs) => rhs.no === installmentNo),
-  );
-  return !!(invoice?.payment?.paymentStatus === 'Success');
+  if (
+    data.value?.quotation.payCondition === 'Full' ||
+    data.value?.quotation.payCondition === 'BillFull'
+  ) {
+    return true;
+  }
+
+  const invoice = data.value?.quotation.invoice?.find((lhs) => {
+    return lhs.installments?.some((rhs) => rhs.no === installmentNo);
+  });
+
+  return !!(invoice?.payment?.paymentStatus === 'PaymentSuccess');
 }
 </script>
 <template>
@@ -587,7 +614,13 @@ function isInstallmentPaySuccess(installmentNo: number) {
             )"
             :key="value"
           >
+            {{ getInstallmentInfo() }}
             <ProductExpansion
+              :class="{
+                'status-unpaid': !isInstallmentPaySuccess(
+                  value.productService.installmentNo,
+                ),
+              }"
               :status="
                 value.stepStatus?.find((v) => v.step === pageState.currentStep)
               "
@@ -710,6 +743,12 @@ function isInstallmentPaySuccess(installmentNo: number) {
   </div>
 </template>
 <style scoped>
+.status-unpaid {
+  opacity: 0.5;
+  filter: grayscale(90%);
+  pointer-events: none;
+}
+
 .status-color {
   --_color: var(--gray-0);
   border-color: hsla(var(--_color));
diff --git a/src/stores/payment/types.ts b/src/stores/payment/types.ts
index 73dfcf5a..77c29faf 100644
--- a/src/stores/payment/types.ts
+++ b/src/stores/payment/types.ts
@@ -8,7 +8,7 @@ export type Invoice = {
 
   amount: number;
 
-  installements: QuotationFull['paySplit'];
+  installments: QuotationFull['paySplit'];
 
   quotation: Quotation;
 
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index 6ed55ba1..d89dd7f1 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -278,6 +278,7 @@ export type QuotationFull = {
       productServiceId: string;
       employeeId: string;
     }[];
+    installmentNo: number;
   }[];
 
   id: string;