refactor: css of pay success

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));