From 08d22a59ceda26f1d4cb159886291866b2a82e60 Mon Sep 17 00:00:00 2001
From: azumiru <azumiru@localhost.localdomain>
Date: Thu, 10 Mar 2022 17:35:30 +0800
Subject: [PATCH] refund-ui-tab update refund component

---
 .../elements/RefundVerificationComponent.vue  | 99 ++++++++++++++++++-
 .../views/pages/dashboards/admin.blade.php    |  4 +-
 2 files changed, 96 insertions(+), 7 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/RefundVerificationComponent.vue b/resources/assets/vue/components/bookings/elements/RefundVerificationComponent.vue
index 11aa1ff5..b947f571 100644
--- a/resources/assets/vue/components/bookings/elements/RefundVerificationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/RefundVerificationComponent.vue
@@ -1,7 +1,93 @@
 <template>
     <div class="row m-b-10 parentContainer">
         <div class="col">
-            {{ data }}
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+            <div class="row p-b-5 b-b b-grey" v-show="!isLoading">
+                <div class="col">
+                    <div class="row">
+                        <div class="col">
+                            <div class="row m-b-10">
+                                <div class="col-auto">
+                                    <div class="font-heading fs-10 muted all-caps">Date</div>
+                                    <div class="font-heading fs-10">
+                                        {{ data.booking.created_at }}
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="font-heading fs-10 muted all-caps">Marking</div>
+                                    <div class="font-heading fs-10">
+                                        <a :href="route('customer.profile', data.booking.company.reference)">{{data.booking.company.reference}}</a>
+                                    </div>
+                                </div>
+                                <div class="col-auto">
+                                    <div class="font-heading fs-10 muted all-caps">Amount</div>
+                                    <div class="font-heading fs-10">
+                                        {{ data.booking.amount }}
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="text-right">
+                                        <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="rejectRefund">
+                                            <i class="fa fa-times fa-fw"></i>
+                                        </button>
+                                        <button class="btn btn-xs btn-success b-rad-none requestModal" data-type="approveRefund">
+                                            <i class="fa fa-check fa-fw"></i>
+                                        </button>
+                                        <modal-component small type="rejectRefund">
+                                            <div class="row">
+                                                <div class="col text-center">
+                                                    <div class="row">
+                                                        <div class="col text-center">
+                                                            <div class="row m-b-20">
+                                                                <div class="col">
+                                                                    <h5 class="all-caps">Reject Refund</h5>
+                                                                    <div class="fs-11">Are you sure you want to reject this refund?</div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col p-r-5">
+                                                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                                                                </div>
+                                                                <div class="col p-l-5">
+                                                                    <div data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="approveRefund('reject')">Reject</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </modal-component>
+                                        <modal-component small type="approveRefund">
+                                            <div class="row">
+                                                <div class="col text-center">
+                                                    <div class="row">
+                                                        <div class="col text-center">
+                                                            <div class="row m-b-20">
+                                                                <div class="col">
+                                                                    <h5 class="all-caps">Approve Refund</h5>
+                                                                    <div class="fs-11">Are you sure you want to approve this refund?</div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col p-r-5">
+                                                                    <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                                                                </div>
+                                                                <div class="col p-l-5">
+                                                                    <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="approveRefund('approve')">Approve</div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </modal-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -10,13 +96,16 @@
     import componentHandler from '../../../general/mixins/componentHandler';
     import staticFormHandler from '../../../general/mixins/staticFormHandler'
     export default {
-        props: {
-            no_action: Boolean
+        data() {
+            return {
+                status: ''
+            }
         },
         methods: {
-            approvePayment(status){
+            approveRefund(status){
                 this.isLoading = true;
-                this.submit(this.route('api.booking.payment', this.item.booking.id, this.item.id, status), 'put', 'identificationVerificationSection', true, true);
+                this.status = status;
+                this.submit(this.route('api.transaction.refund.status.update', this.data.id), 'put', 'listRefundTransactionSection', true, true);
             },
         },
         mixins: [componentHandler, staticFormHandler]
diff --git a/resources/views/pages/dashboards/admin.blade.php b/resources/views/pages/dashboards/admin.blade.php
index d3f92e42..256be0dd 100644
--- a/resources/views/pages/dashboards/admin.blade.php
+++ b/resources/views/pages/dashboards/admin.blade.php
@@ -83,9 +83,9 @@
                                     <div class="col">
                                         <div class="row">
                                             <div class="col">
-                                                <list-component key="2" section="listTransactionSection" :endpoint="route('api.transaction.list')" :options="{'type': 6}">
+                                                <list-component key="2" section="listRefundTransactionSection" :endpoint="route('api.transaction.list')" :options="{'type': 6}">
                                                     <template slot="list" slot-scope="{data}">
-                                                        <refund-verification-component section="listTransactionSection" :data="data"></refund-verification-component>
+                                                        <refund-verification-component section="listRefundTransactionSection" :data="data"></refund-verification-component>
                                                     </template>
                                                 </list-component>
                                             </div>