From e79d641d6d4d141ff746ee4d470207b1096e615f Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Thu, 17 Jun 2021 19:10:56 +0800
Subject: [PATCH] fix recipient bank account flow for booking

---
 .../assets/sass/modules/_form_elements.scss   |   2 +-
 .../banks/forms/BankAccountFormComponent.vue  |  22 ++-
 .../elements/BookingConfirmationComponent.vue | 179 ++++++++++--------
 .../bookings/forms/BookingFormComponent.vue   |   2 +-
 .../forms/confirmBookingComponent.vue         |   2 +-
 5 files changed, 119 insertions(+), 88 deletions(-)

diff --git a/resources/assets/sass/modules/_form_elements.scss b/resources/assets/sass/modules/_form_elements.scss
index e242894f..3ca1e03a 100644
--- a/resources/assets/sass/modules/_form_elements.scss
+++ b/resources/assets/sass/modules/_form_elements.scss
@@ -122,7 +122,7 @@ form legend {
     &[readonly], 
     fieldset[disabled] &{
         background: mix($color-master-lighter, #fff, 50%);
-        color: rgba($color-master, .23);
+        //color: rgba($color-master, .23);
     }
 }
 
diff --git a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
index 3685b0c1..c91cf482 100644
--- a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
@@ -18,7 +18,7 @@
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.reference">
                                 <label>Reference</label>
-                                <input type="text" class="form-control" v-model="parameters.reference">
+                                <input type="text" class="form-control" v-model="parameters.reference" :disabled="disabled">
                             </validation-wrapper-component>
                         </div>
                     </div>
@@ -26,7 +26,7 @@
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.holder_name">
                                 <label>Account Holder Name</label>
-                                <input type="text" class="form-control" v-model="parameters.holder_name">
+                                <input type="text" class="form-control" v-model="parameters.holder_name" :disabled="disabled">
                             </validation-wrapper-component>
                         </div>
                     </div>
@@ -34,7 +34,7 @@
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.account_no">
                                 <label>Account No.</label>
-                                <input type="text" class="form-control" v-model="parameters.account_no">
+                                <input type="text" class="form-control" v-model="parameters.account_no" :disabled="disabled">
                             </validation-wrapper-component>
                         </div>
                     </div>
@@ -44,7 +44,7 @@
                                 <div class="col">
                                     <validation-wrapper-component :validator="$v.parameters.bank_name">
                                         <label>Bank Name</label>
-                                        <input type="text" class="form-control" v-model="parameters.bank_name">
+                                        <input type="text" class="form-control" v-model="parameters.bank_name" :disabled="disabled">
                                     </validation-wrapper-component>
                                 </div>
                             </div>
@@ -52,7 +52,7 @@
                                 <div class="col">
                                     <validation-wrapper-component :validator="$v.parameters.bank_branch">
                                         <label>Bank Branch / 所在地</label>
-                                        <input type="text" class="form-control" v-model="parameters.bank_branch">
+                                        <input type="text" class="form-control" v-model="parameters.bank_branch" :disabled="disabled">
                                     </validation-wrapper-component>
                                 </div>
                             </div>
@@ -60,13 +60,13 @@
                                 <div class="col p-r-5">
                                     <validation-wrapper-component :validator="$v.parameters.swift">
                                         <label>Swift</label>
-                                        <input type="text" class="form-control" v-model="parameters.swift">
+                                        <input type="text" class="form-control" v-model="parameters.swift" :disabled="disabled">
                                     </validation-wrapper-component>
                                 </div>
                                 <div class="col p-l-5">
                                     <validation-wrapper-component :validator="$v.parameters.snap">
                                         <label>Snap</label>
-                                        <input type="text" class="form-control" v-model="parameters.snap">
+                                        <input type="text" class="form-control" v-model="parameters.snap" :disabled="disabled">
                                     </validation-wrapper-component>
                                 </div>
                             </div>
@@ -82,9 +82,9 @@
                     </div>
                     <div class="row">
                         <div class="col p-r-5">
-                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">Cancel</div>
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
                         </div>
-                        <div class="col p-l-5">
+                        <div class="col p-l-5" v-if="!disabled">
                             <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Add Account</div>
                         </div>
                     </div>
@@ -110,6 +110,10 @@
                 type: Boolean,
                 default: true
             },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
             country_id: {
                 type: Number,
                 default: 1
diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index 97d0dcc0..dbb106e5 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -58,63 +58,52 @@
                     </div>
                     <div class="row">
                         <div class="col">
-                            <div class="row m-b-10" v-if="data.recipientBanks.length > 0 && !createBank">
+                            <div class="row m-b-10">
                                 <div class="col">
-                                    <div class="row m-l-0 m-r-0 m-b-5">
-                                        <div class="col-auto p-l-0">
-                                            <div class="row align-items-center justify-content-center">
-                                                <div class="col-auto">
-                                                    <div class="fs-10 all-caps">Recipient Bank Account</div>
-                                                </div>
-                                                <div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
-                                                    <i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-sm-12 col-md-8">
-                                            <div class="row">
-                                                <div class="col p-r-0">
-                                                    <div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">
-                                                        <div class="row">
-                                                            <div class="col p-t-10 p-b-5 ">
-                                                                <div class="row">
-                                                                    <div class="col">
-                                                                        <div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.holder_name}}</div>
-                                                                    </div>
-                                                                </div>
-                                                                <div class="row">
-                                                                    <div class="col">
-                                                                        <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="col-auto b-l b-grey ">
-                                                                <div class="row h-100 align-items-center">
-                                                                    <div class="col">
-                                                                        <i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>
-                                                                    </div>
-                                                                </div>
+                                    <!--<div class="row m-l-0 m-r-0 m-b-5">-->
+                                        <!--<div class="col-auto p-l-0">-->
+                                            <!--<div class="row align-items-center justify-content-center">-->
+                                                <!--<div class="col-auto">-->
+                                                    <!--<div class="fs-10 all-caps">Recipient Bank Account</div>-->
+                                                <!--</div>-->
+                                                <!--<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">-->
+                                                    <!--<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>-->
+                                                <!--</div>-->
+                                            <!--</div>-->
+                                        <!--</div>-->
+                                    <!--</div>-->
+                                    <div class="row parentContainer">
+                                        <div class="col">
+                                            <div class="row" v-show="!createBank">
+                                                <div class="col-7 p-r-0">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="form-group no-margin form-group-default">
+                                                                <label>Account No.</label>
+                                                                <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="relative w-100">
-                                                        <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !parameters.bankAccount.status}]" style="top: 100%; right: 0; z-index: 1;">
-                                                            <div class="row text-left no-margin bg-white">
-                                                                <div class="col no-padding">
-                                                                    <div class="row no-margin"  v-for="bank in data.recipientBanks" v-bind:key="bank.id" >
-                                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
-                                                                            <div class="row align-items-center justify-content-center">
-                                                                                <div class="col">
-                                                                                    <div class="row">
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="relative w-100">
+                                                                <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" style="top: 100%; right: 0; z-index: 1;">
+                                                                    <div class="row text-left no-margin bg-white">
+                                                                        <div class="col no-padding">
+                                                                            <div class="row no-margin"  v-for="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
+                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
+                                                                                    <div class="row align-items-center justify-content-center">
                                                                                         <div class="col">
-                                                                                            <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                    <div class="row">
-                                                                                        <div class="col">
-                                                                                            <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
+                                                                                            <div class="row">
+                                                                                                <div class="col">
+                                                                                                    <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <div class="row">
+                                                                                                <div class="col">
+                                                                                                    <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
+                                                                                                </div>
+                                                                                            </div>
                                                                                         </div>
                                                                                     </div>
                                                                                 </div>
@@ -126,26 +115,51 @@
                                                         </div>
                                                     </div>
                                                 </div>
+                                                <div class="col-auto p-l-0" v-show="!createBank && account_no && !Object.keys(parameters.bankAccount).length">
+                                                    <button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
+                                                        <i class="fa fa-plus m-r-5"></i>
+                                                        Create New
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <div class="row" v-show="createBank">
+                                                <div class="col">
+                                                    <bank-account-form-component section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :closable=false v-on:close="clearAccount()"></bank-account-form-component>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row parentContainer">
-                        <div class="col">
-                            <div class="row" v-show="!createBank">
-                                <div class="col">
-                                    <button class="btn btn-xs btn-outline-primary b-rad-none" @click="createBank = !createBank">
-                                        <i class="fa fa-plus m-r-5"></i>
-                                        Add New Recipient
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="row" v-show="createBank">
-                                <div class="col">
-                                    <bank-account-form-component section="customerProfileSection" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :closable=false v-on:close="createBank = !createBank"></bank-account-form-component>
+                                    <!--<div class="row">-->
+                                        <!--<div class="col-sm-12 col-md-8">-->
+                                            <!--<div class="row">-->
+                                                <!--<div class="col p-r-0">-->
+                                                    <!--<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">-->
+                                                        <!--<div class="row">-->
+                                                            <!--<div class="col p-t-10 p-b-5 ">-->
+                                                                <!--<div class="row">-->
+                                                                    <!--<div class="col">-->
+                                                                        <!--<div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.holder_name}}</div>-->
+                                                                    <!--</div>-->
+                                                                <!--</div>-->
+                                                                <!--<div class="row">-->
+                                                                    <!--<div class="col">-->
+                                                                        <!--<div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>-->
+                                                                    <!--</div>-->
+                                                                <!--</div>-->
+                                                            <!--</div>-->
+                                                            <!--<div class="col-auto b-l b-grey ">-->
+                                                                <!--<div class="row h-100 align-items-center">-->
+                                                                    <!--<div class="col">-->
+                                                                        <!--<i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>-->
+                                                                    <!--</div>-->
+                                                                <!--</div>-->
+                                                            <!--</div>-->
+                                                        <!--</div>-->
+                                                    <!--</div>-->
+                                                <!--</div>-->
+                                            <!--</div>-->
+                                        <!--</div>-->
+                                    <!--</div>-->
                                 </div>
                             </div>
                         </div>
@@ -245,26 +259,39 @@
         data(){
           return {
               createBank: false,
-              recipientBanks: []
+              recipientBanks: [],
+              dropdownStatus: false,
+              account_no: '',
+          }
+        },
+        computed: {
+          formDisabled(){
+              return !!Object.keys(this.parameters.bankAccount).length;
           }
         },
         created(){
-            this.createBank = !this.data.recipientBanks.length;
             this.recipientBanks = this.data.recipientBanks;
-            if(this.parameters.bankAccount){
-                this.parameters.bankAccount.status = false
-            }
         },
         methods: {
+            AccountNumber(bank){
+                return bank.account_no.startsWith(this.account_no)
+            },
             updateBank(bank){
                 this.selectBank(bank);
                 this.recipientBanks.push(bank);
-                this.createBank = false;
+                this.parameters.bankAccount = bank;
             },
             selectBank(bank){
+                this.account_no = bank.account_no;
+                this.createBank = true;
                 this.parameters.bankAccount = bank;
-                this.parameters.bankAccount.status = false;
+                this.dropdownStatus = false;
             },
+            clearAccount(){
+                this.createBank = false;
+                this.account_no = '';
+                this.parameters.bankAccount = {};
+            }
         },
         mixins: [FormHandler]
     }
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index e5325481..414f1a42 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -181,7 +181,7 @@
                 status: false
             };
 
-            this.summary.bankAccount = this.data.recipient_banks.default ? this.data.recipient_banks.default : this.data.recipient_banks.accounts[0];
+            this.summary.bankAccount = {};
             this.summary.recipientBanks = this.data.recipient_banks.accounts;
 
         },
diff --git a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
index 6394cc49..5897646c 100644
--- a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
@@ -4,7 +4,7 @@
             <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
         </div>
         <div class="col text-right">
-            <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Confirm & Proceed</button>
+            <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
         </div>
     </div>
 </template>