diff --git a/app/Classes/General/Eloquent/Filters/BillNo.php b/app/Classes/General/Eloquent/Filters/BillNo.php
new file mode 100644
index 00000000..167dcd51
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/BillNo.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use Illuminate\Database\Eloquent\Builder;
+
+class BillNo implements Filter
+{
+
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return Builder|mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->where('bill_no', $value);
+    }
+
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundCreditNoteLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundCreditNoteLogic.php
index 9c66abc5..e78a9690 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundCreditNoteLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundCreditNoteLogic.php
@@ -7,15 +7,14 @@ use App\Classes\Exceptions\MalformedRequestException;
 use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\Transactions\Services\FetchesTransaction;
 use App\Classes\Modules\Transactions\Services\UpdatesTransactionStatus;
-use App\Classes\Modules\Companies\Services\FetchesCompanyPaymentAttemptLimit;
 use App\Classes\Modules\Transactions\DataTransferObjects\TransactionObject;
+use App\Classes\Modules\Transactions\DataTransferObjects\TransactionRefundCalculationObject;
 use App\Classes\Modules\Transactions\Services\CreatesTransaction;
 use App\Classes\Modules\Transactions\Services\GeneratesTransactionBillNumber;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Http\Resources\TransactionResource;
 use App\Models\Booking;
-use Carbon\Carbon;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 
@@ -38,9 +37,6 @@ class CreateBookingRefundCreditNoteLogic extends AbstractControllerLogic
     /** @var UpdatesTransactionStatus */
     private $updatesTransactionStatus;
 
-    /** @var FetchesCompanyPaymentAttemptLimit */
-    private $fetchesCompanyPaymentAttemptLimit;
-
     /** @var GeneratesTransactionBillNumber */
     private $generatesTransactionBillNumber;
 
@@ -51,15 +47,13 @@ class CreateBookingRefundCreditNoteLogic extends AbstractControllerLogic
      * CreateBookingPaymentLogic constructor.
      * @param FetchesTransaction $fetchesTransaction
      * @param UpdatesTransactionStatus $updatesTransactionStatus
-     * @param FetchesCompanyPaymentAttemptLimit $fetchesCompanyPaymentAttemptLimit
      * @param GeneratesTransactionBillNumber $generatesTransactionBillNumber
      * @param CreatesTransaction $createsTransaction
      */
-    public function __construct(FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus, FetchesCompanyPaymentAttemptLimit $fetchesCompanyPaymentAttemptLimit, GeneratesTransactionBillNumber $generatesTransactionBillNumber, CreatesTransaction $createsTransaction)
+    public function __construct(FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus, GeneratesTransactionBillNumber $generatesTransactionBillNumber, CreatesTransaction $createsTransaction)
     {
         $this->fetchesTransaction = $fetchesTransaction;
         $this->updatesTransactionStatus = $updatesTransactionStatus;
-        $this->fetchesCompanyPaymentAttemptLimit = $fetchesCompanyPaymentAttemptLimit;
         $this->generatesTransactionBillNumber = $generatesTransactionBillNumber;
         $this->createsTransaction = $createsTransaction;
     }
@@ -76,19 +70,24 @@ class CreateBookingRefundCreditNoteLogic extends AbstractControllerLogic
 
         $transaction = $this->fetchesTransaction->execute(['id' => $request->route('payment_id')]);
         
-        $this->updatesTransactionStatus->execute($transaction, ApprovalStatus::REFUNDED);
+        $this->updatesTransactionStatus->execute($transaction, ApprovalStatus::APPROVED);
 
-        $paymentAttemptLimit = $this->fetchesCompanyPaymentAttemptLimit->execute($booking->company);
+        $paymentReferenceTransaction = $this->fetchesTransaction->execute(['bill_no' => $transaction->payment_reference]);
 
-        $billNumber = $this->generatesTransactionBillNumber->execute('CDTN-');
-        
-        $object = new TransactionObject($billNumber, TransactionType::CREDIT_NOTE, 1, $booking->company->id,
-            $booking->bank_id, $transaction->payment_method,
-            $transaction->amount, $transaction->original_amount, 1,
-            $transaction->original_currency_id, $transaction->currency_rate,
-            $transaction->tax, $transaction->service_charge, Carbon::now()->addMinutes($paymentAttemptLimit), ApprovalStatus::PENDING_VERIFICATION);
+        if((int) $paymentReferenceTransaction->type === TransactionType::BILL){
+            $transactionRefundCalculationObject = new TransactionRefundCalculationObject($booking, $transaction, $transaction->original_amount, $paymentReferenceTransaction->currency_rate);
+            $transactionRefundCalculationObject->setRefundConversionAmount();
 
-        $transaction = $this->createsTransaction->execute($booking, $object);
+            $billNumber = $this->generatesTransactionBillNumber->execute('CRDNT-');
+            
+            $object = new TransactionObject($billNumber, TransactionType::CREDIT_NOTE, 1, $booking->company->id,
+                $booking->bank_id, $paymentReferenceTransaction->payment_method,
+                $transactionRefundCalculationObject->getRefundConversionAmount(), $transaction->original_amount, 1,
+                $paymentReferenceTransaction->original_currency_id, $paymentReferenceTransaction->currency_rate,
+                $paymentReferenceTransaction->tax, $paymentReferenceTransaction->service_charge, null, ApprovalStatus::PENDING_VERIFICATION, [], $paymentReferenceTransaction->bill_no);
+
+            $transaction = $this->createsTransaction->execute($booking, $object);
+        }
 
         return $this->resourceResponse(new TransactionResource($transaction));
     }
diff --git a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
index 843ecb88..90de18f4 100644
--- a/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
+++ b/app/Classes/Modules/Bookings/ControllersLogic/CreateBookingRefundLogic.php
@@ -5,17 +5,17 @@ namespace App\Classes\Modules\Bookings\ControllersLogic;
 
 use App\Classes\Exceptions\MalformedRequestException;
 use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Bookings\Services\FetchesBookingQuotation;
 use App\Classes\Modules\Transactions\Services\FetchesTransaction;
 use App\Classes\Modules\Transactions\Services\UpdatesTransactionStatus;
-use App\Classes\Modules\Companies\Services\FetchesCompanyPaymentAttemptLimit;
 use App\Classes\Modules\Transactions\DataTransferObjects\TransactionObject;
+use App\Classes\Modules\Transactions\DataTransferObjects\TransactionRefundCalculationObject;
 use App\Classes\Modules\Transactions\Services\CreatesTransaction;
 use App\Classes\Modules\Transactions\Services\GeneratesTransactionBillNumber;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\TransactionType;
 use App\Http\Resources\TransactionResource;
 use App\Models\Booking;
-use Carbon\Carbon;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 
@@ -32,15 +32,15 @@ class CreateBookingRefundLogic extends AbstractControllerLogic
         ];
     }
 
+    /** @var FetchesBookingQuotation */
+    private $fetchBookingQuotation;
+
     /** @var FetchesTransaction */
     private $fetchesTransaction;
 
     /** @var UpdatesTransactionStatus */
     private $updatesTransactionStatus;
 
-    /** @var FetchesCompanyPaymentAttemptLimit */
-    private $fetchesCompanyPaymentAttemptLimit;
-
     /** @var GeneratesTransactionBillNumber */
     private $generatesTransactionBillNumber;
 
@@ -49,17 +49,17 @@ class CreateBookingRefundLogic extends AbstractControllerLogic
 
     /**
      * CreateBookingPaymentLogic constructor.
+     * @param FetchesBookingQuotation $fetchBookingQuotation
      * @param FetchesTransaction $fetchesTransaction
      * @param UpdatesTransactionStatus $updatesTransactionStatus
-     * @param FetchesCompanyPaymentAttemptLimit $fetchesCompanyPaymentAttemptLimit
      * @param GeneratesTransactionBillNumber $generatesTransactionBillNumber
      * @param CreatesTransaction $createsTransaction
      */
-    public function __construct(FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus, FetchesCompanyPaymentAttemptLimit $fetchesCompanyPaymentAttemptLimit, GeneratesTransactionBillNumber $generatesTransactionBillNumber, CreatesTransaction $createsTransaction)
+    public function __construct(FetchesBookingQuotation $fetchBookingQuotation, FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus, GeneratesTransactionBillNumber $generatesTransactionBillNumber, CreatesTransaction $createsTransaction)
     {
+        $this->fetchBookingQuotation = $fetchBookingQuotation;
         $this->fetchesTransaction = $fetchesTransaction;
         $this->updatesTransactionStatus = $updatesTransactionStatus;
-        $this->fetchesCompanyPaymentAttemptLimit = $fetchesCompanyPaymentAttemptLimit;
         $this->generatesTransactionBillNumber = $generatesTransactionBillNumber;
         $this->createsTransaction = $createsTransaction;
     }
@@ -75,18 +75,21 @@ class CreateBookingRefundLogic extends AbstractControllerLogic
         $booking = Booking::find($request->route('id'));
 
         $transaction = $this->fetchesTransaction->execute(['id' => $request->route('payment_id')]);
-        
-        $this->updatesTransactionStatus->execute($transaction, ApprovalStatus::REFUNDED);
-
-        $paymentAttemptLimit = $this->fetchesCompanyPaymentAttemptLimit->execute($booking->company);
 
         $billNumber = $this->generatesTransactionBillNumber->execute('RFD-');
-        
+
+        if((int) $transaction->type === TransactionType::BILL){
+            $customerBooking = $booking->transactions()->payments()->complete()->where('original_amount', '=', $transaction->original_amount)->where('id', '<', $transaction->id)->orderByDesc('id')->first();
+        }
+
+        $transactionRefundCalculationObject = new TransactionRefundCalculationObject($booking, (int) $transaction->type === TransactionType::BILL ? $customerBooking : $transaction, $request->input('amount'));
+        $transactionRefundCalculationObject->init();
+
         $object = new TransactionObject($billNumber, TransactionType::REFUND, 1, $booking->company->id,
-            $booking->bank_id, $transaction->payment_method,
-            $transaction->amount, $transaction->original_amount, 1,
-            $transaction->original_currency_id, $transaction->currency_rate,
-            $transaction->tax, $transaction->service_charge, Carbon::now()->addMinutes($paymentAttemptLimit), ApprovalStatus::PENDING_VERIFICATION);
+            $transactionRefundCalculationObject->getConfigurations()->getConfigurations()->getBankId(), $transactionRefundCalculationObject->getConversionObject()->getPaymentMethod(),
+            $transactionRefundCalculationObject->getRefundTotalAmount(), $transactionRefundCalculationObject->getAmount(), 1,
+            $transactionRefundCalculationObject->getConversionObject()->getCurrencyId(), $transactionRefundCalculationObject->getTransaction()->currency_rate,
+            $transactionRefundCalculationObject->getRefundTax(), $transactionRefundCalculationObject->getRefundServiceCharge(), null, ApprovalStatus::PENDING_VERIFICATION, [], $transaction->bill_no);
 
         $transaction = $this->createsTransaction->execute($booking, $object);
 
diff --git a/app/Classes/Modules/Transactions/DataTransferObjects/TransactionObject.php b/app/Classes/Modules/Transactions/DataTransferObjects/TransactionObject.php
index 8fcf4ece..780615a0 100644
--- a/app/Classes/Modules/Transactions/DataTransferObjects/TransactionObject.php
+++ b/app/Classes/Modules/Transactions/DataTransferObjects/TransactionObject.php
@@ -57,6 +57,9 @@ class TransactionObject implements DataTransferObject
     /** @var array|null */
     private $details;
 
+    /** @var string */
+    private $paymentReference;
+
     /**
      * TransactionObject constructor.
      * @param string $billNo
@@ -75,8 +78,9 @@ class TransactionObject implements DataTransferObject
      * @param Carbon|null $expiresOn
      * @param int|null $status
      * @param array|null $details
+     * @param string $paymentReference
      */
-    public function __construct(string $billNo, string $transactionType, int $issuer, int $receiver, int $recipientBankAccountId, int $paymentMethod, float $amount, float $originalAmount, int $currencyId, int $originalCurrencyId, float $currencyRate, float $tax, float $serviceCharge, ?Carbon $expiresOn, ?int $status = ApprovalStatus::PENDING_SUBMISSION, ?array $details = [])
+    public function __construct(string $billNo, string $transactionType, int $issuer, int $receiver, int $recipientBankAccountId, int $paymentMethod, float $amount, float $originalAmount, int $currencyId, int $originalCurrencyId, float $currencyRate, float $tax, float $serviceCharge, ?Carbon $expiresOn, ?int $status = ApprovalStatus::PENDING_SUBMISSION, ?array $details = [], ?string $paymentReference = null)
     {
         $this->billNo = $billNo;
         $this->transactionType = $transactionType;
@@ -94,6 +98,7 @@ class TransactionObject implements DataTransferObject
         $this->expiresOn = $expiresOn;
         $this->status = $status;
         $this->details = $details;
+        $this->paymentReference = $paymentReference;
     }
 
     /**
@@ -226,6 +231,11 @@ class TransactionObject implements DataTransferObject
         }, $this->details);
     }
 
+    public function getPaymentReference(): string
+    {
+        return $this->paymentReference;
+    }
+
 
 
 
diff --git a/app/Classes/Modules/Transactions/DataTransferObjects/TransactionRefundCalculationObject.php b/app/Classes/Modules/Transactions/DataTransferObjects/TransactionRefundCalculationObject.php
new file mode 100644
index 00000000..6da9a37d
--- /dev/null
+++ b/app/Classes/Modules/Transactions/DataTransferObjects/TransactionRefundCalculationObject.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace App\Classes\Modules\Transactions\DataTransferObjects;
+
+use App\Classes\General\Interfaces\DataTransferObject;
+
+use App\Models\Transaction;
+use App\Models\Booking;
+use App\Classes\Modules\Currencies\DataTransferObjects\CurrencyConversionObject;
+
+class TransactionRefundCalculationObject implements DataTransferObject
+{
+    private $booking;
+
+    private $transaction;
+
+    private $amount;
+
+    private $currency_rate;
+
+    private $unrequested_amount;
+
+    private $conversionObject;
+
+    private $configurations;
+
+    private $refund_amount;
+
+    private $refund_service_charge;
+
+    private $refund_tax;
+
+    private $refund_total_amount;
+
+    private $refund_conversion_amount;
+
+    /**
+     * TransactionRefundCalculationObject constructor.
+     * @param float $price
+     */
+    public function __construct(Booking $booking, Transaction $transaction, ?float $amount = 0.00, ?float $currency_rate = 0.00)
+    {
+        $this->booking = $booking;
+        $this->transaction = $transaction;
+        $this->amount = $amount;
+        $this->currency_rate = $currency_rate;
+    }
+
+    /**
+     * @return Booking
+     */
+    public function getBooking(): Booking
+    {
+        return $this->booking;
+    }
+
+    /**
+     * @return Transaction
+     */
+    public function getTransaction(): Transaction
+    {
+        return $this->transaction;
+    }
+
+    public function getAmount(): float
+    {
+        return $this->amount;
+    }
+
+    public function getCurrencyRate(): float
+    {
+        return $this->currency_rate;
+    }
+
+    /**
+     * @return float
+     */
+    public function setUnrequestedAmount()
+    {
+        $this->unrequested_amount = $this->transaction->original_amount == $this->amount ? $this->transaction->original_amount : $this->transaction->original_amount - $this->amount;
+        return $this;
+    }
+
+    public function getUnrequestedAmount()
+    {
+        return $this->unrequested_amount;
+    }
+
+    public function setConversionObject()
+    {
+        $this->conversionObject = new CurrencyConversionObject(floatval(str_replace(',', '', $this->getUnrequestedAmount())), $this->booking->convertible_currency_id, $this->booking->service_id,  $this->booking->fix_currency_id === 1 ? 0 : 1);
+        return $this;
+    }
+
+    public function getConversionObject()
+    {
+        return $this->conversionObject;
+    }
+
+    public function setConfigurations()
+    {
+        $this->configurations = app('App\Classes\Modules\Bookings\Services\FetchesBookingQuotation')->execute($this->booking->company, $this->getConversionObject());
+        return $this;
+    }
+
+    public function getConfigurations()
+    {
+        return $this->configurations;
+    }
+
+    public function setRefundAmount()
+    {
+        $this->refund_amount = $this->transaction->amount == $this->getConfigurations()->getLocalTotal() ? $this->transaction->amount : $this->transaction->amount - $this->getConfigurations()->getLocalTotal();
+        return $this;
+    }
+
+    public function getRefundAmount()
+    {
+        return $this->refund_amount;
+    }
+
+    public function setRefundServiceCharge()
+    {
+        $this->refund_service_charge = $this->transaction->service_charge == $this->getConfigurations()->getServiceCharge() ? $this->transaction->service_charge : $this->transaction->service_charge - $this->getConfigurations()->getServiceCharge();
+        return $this;
+    }
+
+    public function getRefundServiceCharge()
+    {
+        return $this->refund_service_charge;
+    }
+
+    public function setRefundTax()
+    {
+        $this->refund_tax = $this->transaction->tax == $this->getConfigurations()->getTax() ? $this->transaction->tax : $this->transaction->tax - $this->getConfigurations()->getTax();
+        return $this;
+    }
+
+    public function getRefundTax()
+    {
+        return $this->refund_tax;
+    }
+
+    public function setRefundTotalAmount()
+    {
+        $this->refund_total_amount = $this->getRefundAmount() + $this->getRefundServiceCharge() + $this->getRefundTax();
+        return $this;
+    }
+
+    public function getRefundTotalAmount()
+    {
+        return $this->refund_total_amount;
+    }
+
+    public function setRefundConversionAmount()
+    {
+        $this->refund_conversion_amount = $this->getCurrencyRate() ? $this->transaction->original_amount * (1 / $this->getCurrencyRate()) : $this->transaction->original_amount;
+        return $this;
+    }
+
+    public function getRefundConversionAmount()
+    {
+        return $this->refund_conversion_amount;
+    }
+
+    public function init(){
+        $this->setUnrequestedAmount();
+        $this->setConversionObject();
+        $this->setConfigurations();
+        $this->setRefundAmount();
+        $this->setRefundServiceCharge();
+        $this->setRefundTax();
+        $this->setRefundTotalAmount();
+        $this->setRefundConversionAmount();
+    }
+}
diff --git a/app/Classes/Modules/Transactions/Services/CreatesTransaction.php b/app/Classes/Modules/Transactions/Services/CreatesTransaction.php
index ddebf0d5..debd5854 100644
--- a/app/Classes/Modules/Transactions/Services/CreatesTransaction.php
+++ b/app/Classes/Modules/Transactions/Services/CreatesTransaction.php
@@ -32,6 +32,7 @@ class CreatesTransaction extends AbstractUpdateRelationshipRecord
         $model->service_charge = $object->getServiceCharge();
         $model->expires_on = $object->getExpiresOn();
         $model->status = $object->getStatus();
+        $model->payment_reference = $object->getPaymentReference();
 
 
         return $this->handler($booking->transactions(), $model);
diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index fc0dff73..9caa6687 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources;
 
 use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Models\Transaction;
 use Carbon\Carbon;
 use Illuminate\Http\Resources\Json\JsonResource;
 
diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index 6e9ea19f..3abccf8b 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -2,7 +2,7 @@
     <div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}]" >
         <div class="col">
             <div class="row">
-                <div class="col p-t-10 p-b-10 p-r-0 pointer" @click="expanded = !expanded" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
+                <div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
                     <div class="row m-b-5">
                         <div class="col-auto">
                             <div class="font-heading fs-8 muted all-caps">Status</div>
@@ -42,7 +42,7 @@
                     </document-file-viewer-component>
                 </div>
             </div>
-            <div class="row" v-show="expanded">
+            <div class="row" v-if="expandPaymentDetails">
                 <div class="col bg-white padding-15">
                     <div class="row align-items-end m-b-10 text-success bold">
                         <div class="col">
@@ -116,6 +116,106 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row m-t-10">
+                        <div class="col">
+                            <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="requestRefund()">Request Refund</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row" v-show="expandRefund">
+                <div class="col bg-white padding-15">
+                    <div class="row m-b-10">
+                        <div class="col-8">
+                            <div class="font-heading all-caps fs-10 m-b-5">Refund Type: </div>
+                            <div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="refundMethod.status = !refundMethod.status">
+                                <div class="row">
+                                    <div class="col p-t-10 p-b-10">
+                                        {{refundMethod.name}}
+                                    </div>
+                                    <div class="col-auto bg-complete-light">
+                                        <div class="row h-100 align-items-center">
+                                            <div class="col">
+                                                <i class="fa" :class="[{'fa-angle-down': !refundMethod.status}, {'fa-angle-up': refundMethod.status}]"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="relative w-100">
+                                <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !refundMethod.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" :class="[{'bg-complete-light': refundMethod.name === 'Fully Refund'}, {'text-white': refundMethod.name === 'Fully Refund'}, {'hover-complete': refundMethod.name !== 'Fully Refund'}]" @click="updateRefundType({name: 'Fully Refund'})">
+                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="font-heading fs-10">Fully Refund</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row no-margin" :class="[{'bg-complete-light': refundMethod.name === 'Partially Refund'}, {'text-white': refundMethod.name === 'Partially Refund'}, {'hover-complete': refundMethod.name !== 'Partially Refund'}]" @click="updateRefundType({name: 'Partially Refund'})">
+                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
+                                                    <div class="row align-items-center justify-content-center">
+                                                        <div class="col">
+                                                            <div class="font-heading fs-10">Partially Refund</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Fully Refund'">
+                        <div class="col p-r-0">
+                            <validation-wrapper-component :validator="amount" v-if="refundMethod.name == 'Fully Refund'">
+                                <label>Amount</label>
+                                <input class="form-control disabled" name="amount" v-model.lazy="amount" disabled>
+                            </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">
+                                    <div class="font-heading fs-10 muted">{{''}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Partially Refund'">
+                        <div class="col p-r-0">
+                            <validation-wrapper-component :validator="amount">
+                                <label>Amount</label>
+                                <input class="form-control" name="amount">
+                            </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">
+                                    <div class="font-heading fs-10 muted">{{''}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <div class="form-group no-margin form-group-default">
+                                <label>Account No.</label>
+                                <input type="text" class="form-control">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 p-r-0">
+                            <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="requestRefund()">Cancel</button>
+                        </div>
+                        <div class="col p-l-0">
+                            <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" @click="submitForm()">Refund</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -127,7 +227,13 @@
     export default {
         data(){
             return {
-                expanded: false
+                expandPaymentDetails: false,
+                expandRefund: false,
+                refundMethod: {
+                    name: 'Fully Refund',
+                    status: false
+                },
+                amount: (Math.round(1000 * 100) / 100).toFixed(2),
             }
         },
         computed: {
@@ -135,6 +241,26 @@
               return this.item.type === 1 ? this.item : this.item.customer_booking;
           }
         },
+        methods: {
+            requestRefund(){
+                this.expandRefund = !this.expandRefund;
+                this.expandPaymentDetails = !this.expandPaymentDetails;
+            },
+            clickExpand(){
+                if (this.expandPaymentDetails == false && this.expandRefund == false) {
+                    this.expandPaymentDetails = !this.expandPaymentDetails;
+                } else {
+                    this.expandRefund = false;
+                    this.expandPaymentDetails = false;
+                }
+            },
+            updateRefundType(refund){
+                this.refundMethod = {
+                    name: refund.name,
+                    status: !this.refundMethod.status
+                }
+            },
+        },
         mixins: [componentHandler]
     }
 </script>