From f005c65afce861b397e3eacf8987171faef035df Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Tue, 27 Jun 2023 16:46:42 +0800
Subject: [PATCH] update apply voucher design

---
 .../BookingPaymentQuotationComponent.vue      | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
index 5bfd1152..caba6812 100644
--- a/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingPaymentQuotationComponent.vue
@@ -224,23 +224,31 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row m-r-0">
-                                        <div class="col p-r-0">
-                                            <validation-wrapper-component :validator="$v.amount">
-                                                <label>Enter Voucher</label>
-                                                <input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
+                                    <div class="row m-r-0 m-b-5" v-show="showApplyVoucher">
+                                         <div class="col p-r-0">
+                                             <validation-wrapper-component :validator="$v.amount">
+                                                <div class="row" style="padding-bottom: 3px;">
+                                                    <div class="col">
+                                                        <label>Enter Voucher</label>
+                                                        <input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
+                                                    </div>
+                                                    <div class="col-auto p-l-0 p-r-0">
+                                                        <div class="col-auto p-0 h-100">
+                                                            <button @click="applyVoucherCode()" class="h-100 btn btn-sm btn-primary b-rad-none all-caps p-l-30 p-r-30 rounded">
+                                                                Apply
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-auto p-r-10 p-l-10">
+                                                        <div @click="showApplyVoucher=!showApplyVoucher" class="h-100 btn btn-sm btn-secondary b-rad-none all-caps rounded d-flex justify-content-center align-items-center">
+                                                            <i class="fa fa-times muted"></i>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </validation-wrapper-component>
                                         </div>
-                                        <div class="col-auto b-r b-t b-b b-grey">
-                                            <div class="row h-100 align-items-center">
-                                                <div class="col">
-                                                    <button @click="applyVoucherCode()" class="btn btn-sm h-100 btn-primary b-rad-none all-caps">
-                                                        Apply
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </div>
                                     </div>
+                                    <span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
                                     <div class="row m-l-0 m-r-0" style="height: 20px">
                                         <i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
                                         <span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
@@ -582,7 +590,8 @@
                 voucherCode: '',
                 voucherCodeFailedReason: '',
                 voucherValidated: false,
-                voucherIsChecking: false
+                voucherIsChecking: false,
+                showApplyVoucher: false,
             }
         },
         validations () {