From 552f13abe49496429d4d5d79f5fd16d8c8baa6ce Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 2 Dec 2024 14:57:24 +0700
Subject: [PATCH] refactor: css of pay success

---
 src/pages/08_request-list/ProductExpansion.vue | 12 ++++++++++++
 src/pages/08_request-list/RequestListView.vue  | 18 +++++-------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index 8b9844ea..09093828 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -28,6 +28,11 @@ defineProps<{
   code: string;
   status?: Step;
   imgUrl?: string;
+  installmentInfo?: {
+    total: number;
+    paid?: number;
+  };
+  paySuccess: boolean;
 }>();
 
 // NOTE: Function
@@ -35,6 +40,7 @@ defineProps<{
 <template>
   <q-expansion-item
     dense
+    :class="{ 'status-unpaid': !paySuccess }"
     class="overflow-hidden"
     switch-toggle-side
     style="border-radius: var(--radius-2)"
@@ -175,6 +181,12 @@ defineProps<{
   </q-expansion-item>
 </template>
 <style scoped>
+.status-unpaid {
+  opacity: 0.5;
+  filter: grayscale(90%);
+  pointer-events: none;
+}
+
 :deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
   color: hsl(var(--text-mute));
 }
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 6c3a0199..4d01e1a0 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -281,7 +281,7 @@ function getInstallmentInfo() {
     data.value?.quotation.payCondition === 'Full' ||
     data.value?.quotation.payCondition === 'BillFull'
   ) {
-    return null;
+    return undefined;
   }
 
   const total = data.value?.quotation.paySplitCount || 0;
@@ -614,13 +614,11 @@ function isInstallmentPaySuccess(installmentNo: number) {
             )"
             :key="value"
           >
-            {{ getInstallmentInfo() }}
             <ProductExpansion
-              :class="{
-                'status-unpaid': !isInstallmentPaySuccess(
-                  value.productService.installmentNo,
-                ),
-              }"
+              :installment-info="getInstallmentInfo()"
+              :pay-success="
+                isInstallmentPaySuccess(value.productService.installmentNo)
+              "
               :status="
                 value.stepStatus?.find((v) => v.step === pageState.currentStep)
               "
@@ -743,12 +741,6 @@ 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));