From b80774cd7d1850d3fb066c382b48aa985d0ab372 Mon Sep 17 00:00:00 2001
From: azumiru <azumiru@localhost.localdomain>
Date: Sat, 19 Mar 2022 01:04:28 +0800
Subject: [PATCH] edit-bank-ui update edit bank button in customer page

---
 .../forms/EditBankAccountFormComponent.vue    | 10 ++---
 .../BookingPaymentQuotationComponent.vue      | 37 +++++++++++++++++--
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/resources/assets/vue/components/banks/forms/EditBankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/EditBankAccountFormComponent.vue
index 633972f1..7eaf541d 100644
--- a/resources/assets/vue/components/banks/forms/EditBankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/EditBankAccountFormComponent.vue
@@ -4,11 +4,9 @@
             <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
             <div class="row" v-show="!$store.getters.isLoading(section)">
                 <div class="col">
-                    <div class="row m-b-20" v-if="type !== 2">
+                    <div class="row m-b-20" v-if="item.type !== 2">
                         <div class="col">
                             <h6 class="all-caps m-b-5 bold no-margin">Edit Bank Account</h6>
-                            item: {{ item }}
-                            data: {{ data }}
                         </div>
                     </div>
                     <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
@@ -16,7 +14,7 @@
                             <small class="bold fs-10 text-danger">{{error}}</small>
                         </div>
                     </div>
-                    <div class="row m-b-10" v-if="type === 2">
+                    <div class="row m-b-10" v-if="item.type === 2">
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.reference">
                                 <label>Reference</label>
@@ -40,7 +38,7 @@
                             </validation-wrapper-component>
                         </div>
                     </div>
-                    <div class="row"  v-if="type === 2">
+                    <div class="row"  v-if="item.type === 2">
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
@@ -74,7 +72,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row m-b-20" v-if="type !== 2">
+                    <div class="row m-b-20" v-if="item.type !== 2">
                         <div class="col">
                             <validation-wrapper-component selecatable :validator="$v.parameters.bank_name">
                                 <label>Bank Name</label>
diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 6f5cb632..8e9c040f 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -40,7 +40,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10">
+            <div class="row align-items-center parentContainer bg-master-lighter p-t-10" :class="showEditBankBtn ? 'm-b-5' : 'm-b-15'">
                 <div class="col">
                     <div class="row m-b-5">
                         <div class="col">
@@ -57,13 +57,13 @@
                                      style=" fill:#000000;"><defs><linearGradient x1="86" y1="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,40.31787c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-2.96431,0 -5.375,2.41069 -5.375,5.375c0,2.96431 2.41069,5.375 5.375,5.375c2.96431,0 5.375,-2.41069 5.375,-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
                             </div>
                         </div>
-                        <div class="col-auto">
+                        <div class="col-auto m-b-5">
                             <div class="row">
                                 <div class="col-auto p-r-10">
                                     <div class="font-heading fs-12">{{item.bank.holder_name}} <span class="text-complete m-l-5 bold">{{item.bank.type === 3 ? item.bank.account_no : item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></div>
                                 </div>
                             </div>
-                            <div class="row" v-if="item.bank.type !== 3 ">
+                            <div class="row p-b-10" v-if="item.bank.type !== 3 ">
                                 <div class="col-auto p-r-10">
                                     <div class="font-heading fs-10 small">{{item.bank.bank_name}} <span class="m-l-5">({{item.bank.bank_branch}})</span></div>
                                 </div>
@@ -72,6 +72,34 @@
                     </div>
                 </div>
             </div>
+            <div class="row align-items-center m-b-15 parentContainer bg-master-lighter" v-if="showEditBankBtn">
+                <div class="col-auto">
+                    <div class="row">
+                        <div class="col p-t-10 p-b-10 p-r-0 bg-master-lighter">
+                            <div class="row m-b-5">
+                                <div class="col-auto">
+                                    <div class="fs-9 bold text-warning">*This Bank Account has been suspended. Please notify customer to update their Bank Account.*</div>
+                                </div>
+                            </div> 
+                        </div> 
+                        <div class="col-auto pointer bg-master-light">
+                            <div class="row align-items-center h-100 requestModal" data-type="editBank">
+                                <div class="col">
+                                    <!-- <button class="btn requestModal" data-type="editBank">
+                                        <i class="fa fa-pencil muted"></i>
+                                    </button> -->
+                                    <div>
+                                        <i class="fa fa-pencil muted"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editBank">
+                    <edit-bank-account-form-component :data="item.bank" :section="section"></edit-bank-account-form-component>
+                </modal-component>
+            </div>
             <div class="row">
                 <div class="col bg-white padding-15">
                     <div class="row" v-if="!expandPayment">
@@ -548,6 +576,9 @@
             walletOutstanding(){
                 let walletBalance = this.data.company.wallet ? this.data.company.wallet.amount : 0;
                 return (walletBalance - this.calculation.total).toFixed(2);
+            },
+            showEditBankBtn(){
+                return this.data.bank.status === 5 && this.data.outstanding_amount !== 0;
             }
         },
         methods: {