From 22124c1e6c922cf9b30c00ddd13ea52e11446ec9 Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Sun, 6 Feb 2022 12:29:37 +0800
Subject: [PATCH] update booking details ui to be more mobile friendly

---
 .../General/Eloquent/AbstractFetchRecord.php  |   1 +
 .../address/elements/AddressListComponent.vue |  67 ++----
 .../address/forms/AddressFormComponent.vue    | 109 +++++++---
 .../SetDefaultBillingAddressComponent.vue     |   5 +-
 .../forms/PurchaseOrderFormComponent.vue      | 151 +++++++------
 .../forms/PurchaseOrderItemFormComponent.vue  | 180 +++++++++++++---
 .../BookingDetailsSectionComponent.vue        | 198 ++++++++++--------
 .../general/forms/SelectableComponent.vue     |   2 +
 resources/views/layouts/base_portal.blade.php |   2 +-
 9 files changed, 443 insertions(+), 272 deletions(-)

diff --git a/app/Classes/General/Eloquent/AbstractFetchRecord.php b/app/Classes/General/Eloquent/AbstractFetchRecord.php
index 1fbd39da..248deee7 100644
--- a/app/Classes/General/Eloquent/AbstractFetchRecord.php
+++ b/app/Classes/General/Eloquent/AbstractFetchRecord.php
@@ -6,6 +6,7 @@ namespace App\Classes\General\Eloquent;
 use App\Classes\Exceptions\ResourceNotFoundException;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Model;
+use Psy\Exception\ErrorException;
 
 abstract class AbstractFetchRecord extends AbstractGetRecord
 {
diff --git a/resources/assets/vue/components/address/elements/AddressListComponent.vue b/resources/assets/vue/components/address/elements/AddressListComponent.vue
index c54efd95..d4efbc3d 100644
--- a/resources/assets/vue/components/address/elements/AddressListComponent.vue
+++ b/resources/assets/vue/components/address/elements/AddressListComponent.vue
@@ -1,22 +1,9 @@
 <template>
-    <div class="row zig-zag-top">
-        <div class="col bg-white padding-25">
-            <div class="row p-b-20 b-b b-dashed m-b-20 b-grey" v-if="defaultAddress[0]">
+    <div class="row">
+        <div class="col">
+            <div class="row m-b-15" v-if="defaultAddress">
                 <div class="col">
-                    <div class="row m-b-5">
-                        <div class="col">
-                            <div class="font-heading all-caps bold fs-10">Default Billing Address</div>
-                            <div class="font-heading fs-10">
-                                    {{defaultAddress[0].street_one}} {{defaultAddress[0].street_two}}, {{defaultAddress[0].district.name}}, {{defaultAddress[0].post_code}} {{defaultAddress[0].state.name}}, {{defaultAddress[0].country.name}}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
-                <div class="col">
-                    <div class="row">
+                    <div class="row" v-if="!createAddress">
                         <div class="col">
                             <div class="row m-b-10" v-if="billingAddress.length > 0">
                                 <div class="col">
@@ -24,7 +11,7 @@
                                         <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">List of Address </div>
+                                                    <div class="font-heading fs-10 muted all-caps">Address Book</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>
@@ -33,20 +20,15 @@
                                         </div>
                                     </div>
                                     <div class="row">
-                                        <div class="col-8">
+                                        <div class="col">
                                             <div class="row">
-                                                <div class="col p-r-0">
+                                                <div class="col">
                                                     <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="addressDropdownLaunch.status = !addressDropdownLaunch.status">
                                                         <div class="row">
                                                             <div class="col p-t-10 p-b-5 ">
                                                                 <div class="row">
                                                                     <div class="col">
-                                                                        <div class="font-heading bold lh-15">{{selectedAddress.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{selectedAddress.street_two}}</div>
-                                                                    </div>
-                                                                </div>
-                                                                <div class="row">
-                                                                    <div class="col">
-                                                                        <div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{selectedAddress.post_code}}</b> {{selectedAddress.district.name}}</div>
+                                                                        <div class="font-heading bold lh-15">{{selectedAddress.street_one}}{{selectedAddress.street_two}}, {{selectedAddress.district.name}} {{selectedAddress.post_code}} {{selectedAddress.state.name}}, {{selectedAddress.country.name}}</div>
                                                                     </div>
                                                                 </div>
                                                             </div>
@@ -69,13 +51,7 @@
                                                                                 <div class="col">
                                                                                     <div class="row">
                                                                                         <div class="col">
-                                                                                            <!-- <div class="font-heading bold lh-15 fs-10">{{address.post_code ? address.post_code + ' - ':''}}{{address.post_code}}</div> -->
-                                                                                            <div class="font-heading bold lh-15 fs-10">{{address.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{address.street_two}}</div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                    <div class="row">
-                                                                                        <div class="col">
-                                                                                            <div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{address.post_code}}</b> {{address.district.name}}</div>
+                                                                                            <div class="font-heading bold lh-15 fs-10">{{address.street_one}} {{address.street_two}}, {{address.district.name}} {{address.post_code}} {{address.state.name}}, {{address.country.name}}</div>
                                                                                         </div>
                                                                                     </div>
                                                                                 </div>
@@ -106,16 +82,19 @@
                             </div>
                             <div class="row" v-show="createAddress">
                                 <div class="col">
-                                    <div>Address form</div>
                                     <address-form-component :id="company_id" :type="2" v-on:createdAddress="updateAddress($event)" v-on:close="createAddress = !createAddress"></address-form-component>
+                                    <p class="link text-complete text-underline pointer text-center" @click="createAddress = false">Select from address book</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            <set-default-billing-address-component :section="section" :data="item" v-if="item.id != null && defaultAddress[0].id != item.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
+            <div class="row" v-if="selectedAddress">
+                <div class="col">
+                    <set-default-billing-address-component :section="section" :data="selectedAddress" v-if="selectedAddress.id !== defaultAddress.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
+                </div>
+            </div>
 
         </div>
     </div>
@@ -140,9 +119,6 @@
                     status: false
                 },
                 selectedAddress: null,
-                item:{
-                    id:null
-                }
             }
         },
         computed: {
@@ -151,13 +127,14 @@
             },
             defaultAddress: function() {
                 let defaultAddress = this.billingAddress.filter(function(item) {
-                    return item.billing == 1;
+                    return item.billing === 1;
                 });
                 if(!this.selectedAddress){
                     this.selectedAddress = defaultAddress[0];
                 }
-                return defaultAddress;
-            }
+                return defaultAddress[0];
+            },
+
         },
         watch: {
             pendingQueue(inComplete){
@@ -176,15 +153,11 @@
             successHandler(response){
                 this.billingAddress = response.payload.data;
             },
-            errorHandler(){
-                // window.location.href = this.route('dashboard')
-            },
             updateAddress(address){
+                console.log(address);
                 this.addressDropdownLaunch.status = false;
                 this.selectedAddress = address;
                 this.createAddress = false;
-                this.fetchBillingAddress();
-                this.item.id = address.id;
             },
             updateBillingAddress(address){
                 this.id = address;
diff --git a/resources/assets/vue/components/address/forms/AddressFormComponent.vue b/resources/assets/vue/components/address/forms/AddressFormComponent.vue
index 28bbdd71..94cd9c9a 100644
--- a/resources/assets/vue/components/address/forms/AddressFormComponent.vue
+++ b/resources/assets/vue/components/address/forms/AddressFormComponent.vue
@@ -1,46 +1,78 @@
 <template>
     <div class="row p-t-25 text-left">
         <div class="col">
-            <div class="row">
+            <div class="row" v-if="step === 1">
                 <div class="col">
-                    <div class="row m-b-15">
-                        <div class="col-6 p-r-5">
-                            <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
-                                <label>District</label>
-                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
-                            </validation-wrapper-component>
-                        </div>
-                        <div class="col-4 p-l-5">
-                            <validation-wrapper-component :validator="$v.parameters.post_code">
-                                <label>Post Code</label>
-                                <input class="form-control" name="post_code" v-model="parameters.post_code">
-                            </validation-wrapper-component>
+                    <div class="row">
+                        <div class="col">
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.street_one">
+                                        <label>Address Line 1</label>
+                                        <input class="form-control" name="street_one" v-model="parameters.street_one">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <validation-wrapper-component :validator="$v.parameters.street_two">
+                                        <label>Address Line 2</label>
+                                        <input class="form-control" name="street_two" v-model="parameters.street_two">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
+                            <div class="row m-b-15">
+                                <div class="col-7 p-r-5">
+                                    <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
+                                        <label>District</label>
+                                        <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
+                                    </validation-wrapper-component>
+                                </div>
+                                <div class="col-5 p-l-5">
+                                    <validation-wrapper-component :validator="$v.parameters.post_code">
+                                        <label>Post Code</label>
+                                        <input class="form-control" name="post_code" v-model="parameters.post_code">
+                                    </validation-wrapper-component>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="row m-b-15">
                         <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.street_one">
-                                <label>Address Line 1</label>
-                                <input class="form-control" name="street_one" v-model="parameters.street_one">
-                            </validation-wrapper-component>
-                        </div>
-                    </div>
-                    <div class="row m-b-15">
-                        <div class="col">
-                            <validation-wrapper-component :validator="$v.parameters.street_two">
-                                <label>Address Line 2</label>
-                                <input class="form-control" name="street_two" v-model="parameters.street_two">
-                            </validation-wrapper-component>
+                            <div class="row">
+                                <div class="col text-right">
+                                    <button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="updateStep(2)">{{(type === 3) ? "Update" : "Save" }} Billing Address</button>
+                                    <button v-show="type === 3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="row mb-3">
+            <div class="row" v-if="step === 2">
                 <div class="col">
-                    <div class="row">
-                        <div class="col text-right">
-                            <button type="button" class="btn btn-sm btn-success b-rad-none" @click="submitForm()">{{(this.type==3)?"Update":"Create"}} Billing Address</button>
-                            <button v-show="this.type==3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
+                    <div class="row m-b-15">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="padding-15 bg-master-lightest">
+                                        <p class="muted">Billing Address</p>
+                                        <p class="m-b-0">{{parameters.street_one}} {{parameters.street_two}}, {{districts[parseFloat(parameters.district_id) - 1].city}} {{parameters.post_code}} {{districts[parseFloat(parameters.district_id) - 1].state.name}}, {{districts[parseFloat(parameters.district_id) - 1].country.name}}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row m-b-15">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col-auto p-r-5">
+                                    <button type="button" class="btn btn-sm bg-master-lighter b-rad-none" @click="updateStep(1)">Edit Billing Address</button>
+                                </div>
+                                <div class="col p-l-0">
+                                    <button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm Billing Address</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -84,8 +116,14 @@
                 }
             }
         },
+        computed: {
+            districts () {
+                return this.$store.getters.getSelectableList('original_districtListSection');
+            }
+        },
         data() {
 			return {
+			    step: 1,
                 parameters : {
                     company_id: this.id,
                     street_one:  '',
@@ -105,8 +143,15 @@
             }
         },
         methods:{
+            updateStep(step){
+                if(step === 2){
+                    if(!this.validate()){ return; }
+                }
+
+                this.step = step
+            },
             submitForm(){
-                if(this.type==3){
+                if(this.type === 3){
                     this.submit((this.route('api.address.update',this.addressData.id)), 'put', 'bookingDetailSection', true, true)
                 }else {
                     this.submit((this.route('api.address.create')), 'post', 'bookingDetailSection', true, true)
@@ -116,7 +161,7 @@
                 this.$root.$emit('updateAddressForm', {}, false);
             },
             successHandler(response){
-                if(this.type==3){
+                if(this.type === 3){
                     this.closeForm();
                     this.$store.dispatch('reloadList', {'name': "addresslist"});
                 }else {
diff --git a/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue b/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue
index 6d5b457e..d89b598a 100644
--- a/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue
+++ b/resources/assets/vue/components/address/forms/SetDefaultBillingAddressComponent.vue
@@ -1,10 +1,7 @@
 <template>
     <div class="row">
         <div class="col">
-            <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-auto">
-            <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" @click="submitForm()">Set as default</button>
+            <button class="btn btn-block btn-sm btn-success b-rad-none" @click="submitForm()">Update Default Billing Address</button>
         </div>
     </div>
 </template>
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index cc7772e6..e090584b 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -2,74 +2,77 @@
     <div class="row">
         <div class="col">
             <div class="row no-margin">
-                <div class="col p-t-25 p-t-25">
-                    <div class="row">
-                        <div class="col p-b-10 b-b b-grey">
-                            <div class="row align-items-center">
-                                <div class="col-auto p-r-0" style="min-width: 40px;">
-                                    <div class="font-heading all-caps fs-10"></div>
-                                </div>
-                                <div class="col p-r-5">
-                                    <div class="font-heading all-caps fs-10 muted">Stock Code</div>
-                                </div>
-                                <div class="col-4 p-r-5 p-l-5">
-                                    <div class="font-heading all-caps fs-10 muted">description</div>
-                                </div>
-                                <div class="col text-center p-r-5 p-l-5">
-                                    <div class="font-heading all-caps fs-10 muted">quantity</div>
-                                </div>
-                                <div class="col text-center p-r-5 p-l-5">
-                                    <div class="font-heading all-caps fs-10 muted">Unit Price</div>
-                                </div>
-                                <div class="col-1 text-center p-r-5 p-l-5">
-                                    <div class="font-heading all-caps fs-10 muted"></div>
-                                </div>
-                                <div class="col-1 text-right p-r-5 p-l-5">
-                                    <div class="font-heading all-caps fs-10 muted">Total</div>
-                                </div>
-                                <div class="col-auto text-center">
-                                    <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-check"></i></button>
-                                    <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
-                                </div>
-                            </div>
+                <div class="col p-b-15 p-l-0 p-r-0">
+                    <div class="row align-items-center m-b-10">
+                        <div class="col">
+                            <div class="fs-14 bold m-b-5">Purchase Order</div>
+                            <p class="m-b-0 hint-text fs-12">In order for us to process your order, you will need to provide us with your purchase order information.</p>
                         </div>
                     </div>
                     <div class="row m-b-20">
                         <div class="col">
-                            <div class="row" v-if="!submitted">
-                                <div class="col p-b-5 p-t-5 b-b b-grey">
-                                    <div class="row align-items-center">
-                                        <div class="col-auto p-r-0" style="min-width: 40px;">
-                                            <div class="font-heading all-caps fs-10"></div>
-                                        </div>
-                                        <div class="col p-r-5">
-                                            <input type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
-                                        </div>
-                                        <div class="col-4 p-r-5 p-l-5">
-                                            <textarea class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
-                                        </div>
-                                        <div class="col text-center p-r-5 p-l-5">
-                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
-                                        </div>
-                                        <div class="col text-center p-r-5 p-l-5">
-                                            <input type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
-                                        </div>
-                                        <div class="col-1 text-center p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{data.fixed_currency.short_code}}</div>
-                                        </div>
-                                        <div class="col-1 text-right p-r-5 p-l-5">
-                                            <div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
-                                        </div>
-                                        <div class="col-auto">
-                                            <button class="btn btn-xs btn-outline-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i></button>
-                                            <button class="btn btn-xs btn-outline-success b-rad-none invisible"><i class="fa fa-pencil"></i></button>
-                                        </div>
-                                    </div>
+                            <div class="row m-b-20" v-for="(product, index) in products">
+                                <div class="col p-b-10 p-t-10 b-b b-grey">
+                                    <purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
                                 </div>
                             </div>
-                            <div class="row" v-for="(product, index) in products">
-                                <div class="col p-b-10 p-t-10 b-b b-grey">
-                                     <purchase-order-item-form-component :data="product" :index="index" :currency="data.fixed_currency.short_code" :editable="!submitted" :section="section" @change="updateProduct($event, index)" v-on:remove="removeProduct(index)"></purchase-order-item-form-component>
+                            <div class="row" v-if="!submitted">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col-4 p-r-5">
+                                            <div class="form-group form-group-default b-rad-none">
+                                                <label>Stock Code</label>
+                                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                                            </div>
+                                        </div>
+                                        <div class="col p-l-5">
+                                            <div class="form-group form-group-default b-rad-none required">
+                                                <label>description</label>
+                                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-center">
+                                        <div class="col-6 p-r-5">
+                                            <div class="form-group form-group-default b-rad-none required">
+                                                <label>Unit Price</label>
+                                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                                            </div>
+                                        </div>
+                                        <div class="col-6 p-l-5">
+                                            <div class="form-group form-group-default b-rad-none no-padding no-border">
+                                                <div class="row no-margin">
+                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                        <div class="row h-100 align-items-center">
+                                                            <div class="col">
+                                                                <i class="fa fa-minus"></i>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col no-padding">
+                                                        <label class="p-t-5 p-l-5 text-center">Quantity</label>
+                                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                                    </div>
+                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                        <div class="row h-100 align-items-center">
+                                                            <div class="col">
+                                                                <i class="fa fa-plus"></i>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-4">
+                                            <p class="m-b-0 small">Total</p>
+                                            <p class="m-b-0 bold text-complete fs-16">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</p>
+                                        </div>
+                                        <div class="col">
+                                            <button class="btn btn-lg btn-block btn-success b-rad-none" @click="addProduct()"><i class="fa fa-check"></i> Add Product</button>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -166,13 +169,14 @@
     export default {
         data(){
             return {
+                interval:false,
                 submitted: false,
-                    product: {
-                        stockCode: '',
-                        description: '',
-                        quantity: 1,
-                        unit_price: 0,
-                    },
+                product: {
+                    stockCode: '',
+                    description: '',
+                    quantity: 1,
+                    unit_price: 0,
+                },
                 products: [],
             }
         },
@@ -182,7 +186,7 @@
         },
         computed: {
             productTotal(){
-                return this.product.quantity * parseFloat((this.product.unit_price).toString().replace(',', ''));
+                return this.product.quantity * parseFloat((this.product.unit_price).toString().replaceAll(',', ''));
             },
             poTotal(){
                 return this.products.reduce(function(last, product) {
@@ -191,6 +195,15 @@
             }
         },
         methods: {
+            updateQuantity(type){
+                if(!this.interval){
+                    this.interval = setInterval(() => type === 'add' ? this.product.quantity++ : this.product.quantity > 1 ? this.product.quantity--:null , 80)
+                }
+            },
+            clearInterval(){
+                clearInterval(this.interval);
+                this.interval = false;
+            },
             onlyEnglish(event){
                 let value = event.target.value,
                     regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
index 00fe70e4..200339a2 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
@@ -1,34 +1,147 @@
 <template>
     <div class="row  align-items-center">
-        <div class="col-auto p-r-0" style="min-width: 40px;">
-            <div class="font-heading all-caps fs-10">{{index + 1}}</div>
-        </div>
-        <div class="col p-r-5">
-            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
-            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
-        </div>
-        <div class="col-4 p-r-5 p-l-5">
-            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
-            <textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
-        </div>
-        <div class="col text-center p-r-5 p-l-5">
-            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
-            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
-        </div>
-        <div class="col text-center p-r-5 p-l-5">
-            <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
-            <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
-        </div>
-        <div class="col-1 text-center p-r-5 p-l-5">
-            <div class="font-heading all-caps fs-10">{{currency}}</div>
-        </div>
-        <div class="col-1 text-right p-r-5 p-l-5">
-            <div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
-        </div>
-        <div class="col-auto" :class="[{'invisible': !editable}]">
-            <button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
-            <button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
-            <button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
+        <div class="col">
+            <div class="row" v-if="isEdit">
+                <div class="col padding-25 bg-master-lightest">
+                    <div class="row">
+                        <div class="col-4 p-r-5">
+                            <div class="form-group form-group-default b-rad-none">
+                                <label>Stock Code</label>
+                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                            </div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="form-group form-group-default b-rad-none required">
+                                <label>description</label>
+                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row align-items-center">
+                        <div class="col-6 p-r-5">
+                            <div class="form-group form-group-default b-rad-none required">
+                                <label>Unit Price</label>
+                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                            </div>
+                        </div>
+                        <div class="col-6 p-l-5">
+                            <div class="form-group form-group-default b-rad-none no-padding no-border">
+                                <div class="row no-margin">
+                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                        <div class="row h-100 align-items-center">
+                                            <div class="col">
+                                                <i class="fa fa-minus"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col no-padding">
+                                        <label class="p-t-5 p-l-5 text-center">Quantity</label>
+                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                    </div>
+                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                        <div class="row h-100 align-items-center">
+                                            <div class="col">
+                                                <i class="fa fa-plus"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4">
+                            <p class="m-b-0 small">Total</p>
+                            <p class="m-b-0 bold text-complete fs-16">{{currency}} {{productTotal.toFixed(3)}}</p>
+                        </div>
+                        <div class="col text-right">
+                            <button class="btn btn-lg btn-outline-success b-rad-none" @click="updateProduct()">Save Changes</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row" v-if="!isEdit">
+                <div class="col">
+                    <div class="row align-items-center">
+                        <div class="col-auto">
+                            <div @click="$emit('remove')" class="pointer">
+                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                     width="25" height="25"
+                                     viewBox="0 0 172 172"
+                                     style=" fill:#000000;"><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 fill="#e74c3c"><path d="M18.87987,153.12013c2.23887,2.23819 5.86807,2.23819 8.10693,0l59.0132,-59.0132l59.0132,59.0132c2.24964,2.17277 5.82555,2.1417 8.03709,-0.06984c2.21154,-2.21154 2.24261,-5.78745 0.06984,-8.03709l-59.0132,-59.0132l59.0132,-59.0132c1.49042,-1.43949 2.08815,-3.57117 1.56346,-5.57571c-0.52469,-2.00454 -2.09015,-3.57 -4.09469,-4.09469c-2.00454,-0.52469 -4.13622,0.07305 -5.57571,1.56346l-59.0132,59.0132l-59.0132,-59.0132c-2.24964,-2.17277 -5.82555,-2.1417 -8.03709,0.06984c-2.21154,2.21154 -2.24261,5.78745 -0.06984,8.03709l59.0132,59.0132l-59.0132,59.0132c-2.23819,2.23887 -2.23819,5.86807 0,8.10693z"></path></g></g></svg>
+                            </div>
+                        </div>
+                        <div class="col-auto bg-master-lightest padding-20 d-none d-sm-inline">
+                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                 width="20" height="20"
+                                 viewBox="0 0 172 172"
+                                 style=" fill:#000000;"><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 fill="#cccccc"><path d="M17.2,37.84c-5.65719,0 -10.32,4.66281 -10.32,10.32v75.68c0,5.65719 4.66281,10.32 10.32,10.32h101.38594c4.31344,0 8.47906,-1.6125 11.65031,-4.54187l0.14781,-0.13438l31.86031,-36.34844l-0.14781,0.16125c4.00437,-4.00438 4.00437,-10.58875 0,-14.59313l0.16125,0.16125l-31.87375,-36.34844l-0.14781,-0.13437c-3.17125,-2.91594 -7.33687,-4.54188 -11.65031,-4.54188zM17.2,44.72h101.38594c2.58,0 5.0525,0.98094 6.96063,2.70094l31.605,36.06625l0.08062,0.08063c1.37063,1.37062 1.37063,3.49375 0,4.86437l-0.08062,0.08063l-31.605,36.05281c-1.90813,1.73344 -4.38063,2.71437 -6.96063,2.71437h-101.38594c-1.935,0 -3.44,-1.505 -3.44,-3.44v-75.68c0,-1.94844 1.49156,-3.44 3.44,-3.44zM127.28,72.24c-7.56531,0 -13.76,6.19469 -13.76,13.76c0,7.56531 6.19469,13.76 13.76,13.76c7.56531,0 13.76,-6.19469 13.76,-13.76c0,-7.56531 -6.19469,-13.76 -13.76,-13.76zM127.28,79.12c3.84313,0 6.88,3.03688 6.88,6.88c0,3.84313 -3.03687,6.88 -6.88,6.88c-3.84312,0 -6.88,-3.03687 -6.88,-6.88c0,-3.84312 3.03688,-6.88 6.88,-6.88z"></path></g></g></svg>
+                        </div>
+                        <div class="col">
+                            <div class="row">
+                                <div class="col">
+                                    <p class="no-margin bold fs-12">{{product.description}}</p>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <p class="muted m-b-0">{{product.stockCode}}</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-7 mt-2 mt-md-0">
+                            <div class="row align-items-center">
+                                <div class="col-auto">
+                                    <p class="m-b-0 small muted">Unit Price</p>
+                                    <p class="m-b-0 bold">{{product.unit_price}}</p>
+                                </div>
+                                <div class="col-auto text-center">
+                                    <p class="m-b-0 small muted">Quantity</p>
+                                    <p class="m-b-0 bold">{{product.quantity}}</p>
+                                </div>
+                                <div class="col text-right">
+                                    <p class="m-b-0 small muted">Total</p>
+                                    <p class="m-b-0 bold text-success fs-16">{{currency}} {{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2)}}</p>
+                                    <p class="m-b-0 text-complete text-underline pointer" @click="isEdit = !isEdit">Edit this item?</p>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row hide">
+                <div class="col-auto p-r-0" style="min-width: 40px;">
+                    <div class="font-heading all-caps fs-10">{{index + 1}}</div>
+                </div>
+                <div class="col p-r-5">
+                    <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.stockCode}}</div>
+                    <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none" placeholder="Stock Code" v-model="product.stockCode" />
+                </div>
+                <div class="col-4 p-r-5 p-l-5">
+                    <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.description}}</div>
+                    <textarea v-if="isEdit" class="form-control fs-10 b-rad-none" placeholder="Description" rows="1" @keyup="onlyEnglish($event)" v-model="product.description"></textarea>
+                </div>
+                <div class="col text-center p-r-5 p-l-5">
+                    <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.quantity}}</div>
+                    <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Quantity" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                </div>
+                <div class="col text-center p-r-5 p-l-5">
+                    <div v-if="!isEdit" class="font-heading all-caps fs-10">{{product.unit_price}}</div>
+                    <input v-if="isEdit" type="text" class="form-control fs-10 b-rad-none text-center" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                </div>
+                <div class="col-1 text-center p-r-5 p-l-5">
+                    <div class="font-heading all-caps fs-10">{{currency}}</div>
+                </div>
+                <div class="col-1 text-right p-r-5 p-l-5">
+                    <div class="font-heading all-caps fs-10">{{(Math.round((productTotal + Number.EPSILON) * 100) / 100).toFixed(2) }}</div>
+                </div>
+                <div class="col-auto" :class="[{'invisible': !editable}]">
+                    <button class="btn btn-xs btn-outline-danger b-rad-none" @click="$emit('remove')"><i class="fa fa-times"></i></button>
+                    <button v-if="!isEdit" class="btn btn-xs btn-outline-warning b-rad-none" @click="isEdit = !isEdit"><i class="fa fa-pencil"></i></button>
+                    <button v-if="isEdit" class="btn btn-xs btn-outline-success b-rad-none" @click="updateProduct()"><i class="fa fa-check"></i></button>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -70,6 +183,15 @@
             },
         },
         methods: {
+            updateQuantity(type){
+                if(!this.interval){
+                    this.interval = setInterval(() => type === 'add' ? this.product.quantity++ : this.product.quantity > 1 ? this.product.quantity--:null , 80)
+                }
+            },
+            clearInterval(){
+                clearInterval(this.interval);
+                this.interval = false;
+            },
             updateProduct(){
                 this.isEdit = !this.isEdit;
 
diff --git a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
index edd9e114..effcce53 100644
--- a/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="row parentContainer">
-        <div class="col">
+        <div class="col p-l-25 p-r-25">
             <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
             <div class="row" v-if="booking">
                 <div class="col">
@@ -98,108 +98,124 @@
                     </div>
                 </div>
             </div>
+            <div class="row m-b-10"  v-show="!isLoading" v-if="booking">
+                <div class="col">
+                    <div class="row text-center m-b-15">
+                        <div class="col">
+                            <h3 class="m-b-5 m-t-0">Hello There.</h3>
+                            <p>Let's us help you transfer money, the smart way.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="row" v-show="!isLoading" v-if="booking">
                 <div class="col-12 col-sm-12 col-md-7">
-                    <div class="row relative">
-                        <div class="absolute hide" style="width: 100%;height: 100%;cursor: default;background-color: rgba(249, 249, 249, 0.5); top: 0px; left: 0px; z-index: 10;"></div>
+                    <div class="row relative b-b b-dashed b-grey">
+                        <div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;"></div>
+                        <div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
                         <div class="col bg-white padding-25">
-                            <div class="absolute" style="top: -5px;right: -5px;width: 0px;height: 0px;border-style: solid;border-width: 0px 110px 110px 0px;border-color: transparent rgb(249, 249, 249) transparent transparent;z-index: 2;">
-                                <div @mouseover="bearShowing = true" style="width: 52px;height: 30px;margin-top: 75px;margin-left: 22px;"></div>
-                            </div>
-                            <div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
-                            <!--<bear-component class="animate__animated animate__slow animate__fadeInDown" v-on:mouseover.native="bearShowing = true" v-on:mouseleave.native="bearShowing = false" v-if="bearShowing"></bear-component>-->
-                            <div class="row align-items-center m-b-25">
-                                <div class="col-auto p-r-0">
-                                    <div class="icon-thumbnail icon-35 bg-transparent">
-                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                                             width="35" height="35"
-                                             viewBox="0 0 172 172"
-                                             style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="39.05475" x2="69.875" y2="54.29019" gradientUnits="userSpaceOnUse" id="color-1_L06xtIstZ632_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-2_L06xtIstZ632_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-3_L06xtIstZ632_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-4_L06xtIstZ632_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="17.09788" x2="48.375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-5_L06xtIstZ632_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="17.09788" x2="59.125" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-6_L06xtIstZ632_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="17.09788" x2="69.875" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-7_L06xtIstZ632_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="17.09788" x2="86" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-8_L06xtIstZ632_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="130.34375" y1="17.09788" x2="130.34375" y2="144.1575" gradientUnits="userSpaceOnUse" id="color-9_L06xtIstZ632_gr9"><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="M48.23794,53.75h43.27681c1.40556,0 2.54775,-1.14219 2.54775,-2.55044v-5.65181c0,-1.40556 -1.14219,-2.54775 -2.55044,-2.54775h-43.27412c-1.40825,0 -2.55044,1.14219 -2.55044,2.55044v5.65181c0,1.40556 1.14219,2.54775 2.55044,2.54775z" fill="url(#color-1_L06xtIstZ632_gr1)"></path><rect x="17" y="23" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-2_L06xtIstZ632_gr2)"></rect><rect x="17" y="28" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-3_L06xtIstZ632_gr3)"></rect><rect x="17" y="33" transform="scale(2.6875,2.6875)" width="18" height="2" fill="url(#color-4_L06xtIstZ632_gr4)"></rect><rect x="17" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-5_L06xtIstZ632_gr5)"></rect><rect x="21" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-6_L06xtIstZ632_gr6)"></rect><rect x="25" y="39" transform="scale(2.6875,2.6875)" width="2" height="3" fill="url(#color-7_L06xtIstZ632_gr7)"></rect><path d="M155.875,86c0,-12.01044 -7.92006,-22.20413 -18.8125,-25.63606v-35.7545c0,-2.18494 -1.30075,-4.14144 -3.31369,-4.97456c-1.99681,-0.83044 -4.28387,-0.38431 -5.82381,1.15025l-4.02587,4.0205l-6.78325,-4.95306c-1.892,-1.38675 -4.43706,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43438,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.05469,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-7.04125,5.15194l-7.052,-5.14925c-1.88931,-1.38675 -4.43437,-1.38944 -6.32906,-0.00269l-6.77519,4.95306l-4.042,-4.01781c-1.54263,-1.53456 -3.82969,-1.98606 -5.82381,-1.15025c-2.01294,0.83312 -3.31369,2.78962 -3.31369,4.97456v101.70575h-13.4375v13.4375c0,7.40944 6.03075,13.4375 13.4375,13.4375h94.05981c7.40944,-0.00269 13.44019,-6.03075 13.44019,-13.44019v-28.11394c10.89244,-3.43194 18.8125,-13.62562 18.8125,-25.63606zM29.5625,147.8125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-8.0625h88.6875v8.0625c0,3.02344 1.00244,5.375 2.69019,8.0625zM131.6875,139.75c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-80.625v-24.1875h-0.00269l-0.02419,-77.53169l4.03663,4.01781c1.88125,1.8705 4.79988,2.09356 6.94987,0.53213l6.7725,-4.95575l7.05469,5.15194c1.89737,1.38406 4.43438,1.37869 6.32637,0l7.04125,-5.15194l7.05738,5.15194c1.89469,1.38137 4.429,1.38137 6.32369,0l7.04394,-5.15194l7.05469,5.15194c1.89737,1.38406 4.43437,1.37869 6.32637,0l7.04125,-5.15194l6.78862,4.95575c2.14194,1.56413 5.06594,1.34106 6.94719,-0.53213l4.01244,-4.00169v34.65263c-0.88419,-0.08869 -1.77912,-0.13706 -2.6875,-0.13706c-14.81888,0 -26.875,12.05613 -26.875,26.875c0,14.81887 12.05612,26.875 26.875,26.875c0.90838,0 1.80331,-0.04838 2.6875,-0.13706zM129,107.5c-11.85456,0 -21.5,-9.64544 -21.5,-21.5c0,-11.85456 9.64544,-21.5 21.5,-21.5c11.85456,0 21.5,9.64544 21.5,21.5c0,11.85456 -9.64544,21.5 -21.5,21.5z" fill="url(#color-8_L06xtIstZ632_gr8)"></path><path d="M140.53744,75.25l-14.22763,14.79469l-6.15975,-6.407l-3.80013,3.95331l6.15975,6.407c1.04812,1.09113 2.42413,1.634 3.80281,1.634c1.37869,0 2.75469,-0.54287 3.80281,-1.634l14.22225,-14.79469z" fill="url(#color-9_L06xtIstZ632_gr9)"></path></g></g></svg>
-                                    </div>
-                                </div>
-                                <div class="col-auto p-l-0">
-                                    <div class="font-heading all-caps fs-12 bold hint-text">Billing Details</div>
-                                </div>
+                            <div class="row">
                                 <div class="col">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-outline-success hide">Generate Preforma Invoice</button>
-                                </div>
-                            </div>
-                            <div class="row" v-if="!booking.company.address">
-                                <div class="col-8">
-                                    <address-form-component :id="booking.company.id" v-on:updateDefaultAddress="updateDefaultAddress"></address-form-component>
-                                </div>
-                            </div>
-                            <div class="row b-b b-dashed b-grey p-b-25" v-if="booking.company.address">
-                                <div class="col-10">
-                                    <div class="row m-b-15">
-                                        <div class="col-5">
-                                            <div class="row">
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Date</div>
-                                                    <div class="font-heading fs-10">
-                                                        {{booking.created_at}}
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Reference</div>
-                                                    <div class="font-heading fs-10">
-                                                        {{booking.marking}}
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto" v-if="$store.getters.isAdmin">
-                                                    <div class="font-heading fs-10 muted all-caps">Marking</div>
-                                                    <div class="font-heading fs-10">
-                                                        <a :href="route('customer.profile', booking.company.reference)">{{booking.company.reference}}</a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-auto">
-                                            <div class="font-heading fs-10 muted all-caps">{{booking.company.type === 1 ? 'SSM Registration No.' : 'Identification Card No.'}}</div>
-                                            <div class="font-heading fs-10 text-info">
-                                                {{booking.company.identification ? booking.company.identification.reference: ''}}
-                                            </div>
-                                        </div>
+                                    <div class="row align-items-center">
                                         <div class="col">
-                                            <div class="row align-items-end">
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Contact</div>
-                                                    <div class="font-heading fs-10 bold">
-                                                        {{booking.company.contact ? booking.company.contact.phone: ''}}
+                                            <div class="fs-14 bold m-b-10">Billing Details</div>
+                                            <p class="m-b-0 hint-text fs-12" v-if="!booking.company.address">In order for us to process your order, you will need to provide us with your billing address information.</p>
+                                        </div>
+                                    </div>
+                                    <div class="row" v-if="!booking.company.address">
+                                        <div class="col">
+                                            <address-form-component :id="booking.company.id" v-on:updateDefaultAddress="updateDefaultAddress"></address-form-component>
+                                        </div>
+                                    </div>
+                                    <div class="row p-t-15" v-if="booking.company.address">
+                                        <div class="col">
+                                            <div class="row m-b-15">
+                                                <div class="col">
+                                                    <div class="row m-b-15">
+                                                        <div class="col-auto">
+                                                            <div class="font-heading muted fs-10 all-caps">Date</div>
+                                                            <p class="m-b-0 fs-12">
+                                                                {{booking.created_at}}
+                                                            </p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="font-heading fs-10 muted all-caps">Reference</div>
+                                                            <p class="m-b-0 fs-12">
+                                                                {{booking.marking}}
+                                                            </p>
+                                                        </div>
+                                                        <div class="col-auto" v-if="$store.getters.isAdmin">
+                                                            <div class="font-heading fs-10 muted all-caps">Marking</div>
+                                                            <p class="m-b-0 fs-12">
+                                                                <a :href="route('customer.profile', booking.company.reference)">{{booking.company.reference}}</a>
+                                                            </p>
+                                                        </div>
+                                                        <div class="col-auto">
+                                                            <div class="font-heading fs-10 muted all-caps">{{booking.company.type === 1 ? 'SSM Registration No.' : 'Identification Card No.'}}</div>
+                                                            <p class="m-b-0 fs-12 text-info">
+                                                                {{booking.company.identification ? booking.company.identification.reference: ''}}
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="row align-items-end">
+                                                                <div class="col-auto">
+                                                                    <div class="font-heading fs-10 muted all-caps">Bill To</div>
+                                                                    <p class="m-b-0 fs-12 bold">
+                                                                        {{booking.company.name}}
+                                                                    </p>
+                                                                </div>
+                                                                <div class="col-auto">
+                                                                    <div class="font-heading fs-10 muted all-caps">Contact</div>
+                                                                    <p class="m-b-0 fs-12">
+                                                                        {{booking.company.contact ? booking.company.contact.phone: ''}}
+                                                                    </p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto p-l-0 hide">
-                                                    <button class="btn btn-xs btn-default bg-master-lightest no-border b-rad-none"><i class="fa fa-pencil text-complete"></i></button>
+                                            </div>
+                                            <div class="row parentContainer">
+                                                <div class="col">
+                                                    <div class="row align-items-end" v-show="!addressEdit">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="font-heading fs-10 muted all-caps">Billing Address</div>
+                                                                    <p class="m-b-0 fs-12">
+                                                                        {{booking.company.address.street_one}} {{booking.company.address.street_two}}, {{booking.company.address.district.name}}, {{booking.company.address.post_code}} {{booking.company.address.state.name}}, {{booking.company.address.country.name}}
+                                                                    </p>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row m-t-5" v-if="booking.status !== 3">
+                                                                <div class="col-auto">
+                                                                    <p class="text-complete text-underline m-b-0 fs-12 pointer" @click="addressEdit = true">Change default billing address</p>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row" v-show="addressEdit">
+                                                        <div class="col">
+                                                            <address-list-component :section="section" :company_id="booking.company.id" v-on:updateDefaultAddress="updateDefaultAddress"></address-list-component>
+                                                            <div class="row m-t-10">
+                                                                <div class="col">
+                                                                    <button class="btn btn-block btn-sm btn-default b-rad-none" @click="addressEdit = false">Cancel</button>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-auto">
-                                            <div class="font-heading fs-10 muted all-caps">Bill To</div>
-                                            <div class="font-heading fs-10">
-                                                {{booking.company.name}}
-                                            </div>
-                                        </div>
-                                        <div class="col">
-                                            <div class="row align-items-end">
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Address</div>
-                                                    <div class="font-heading fs-10">
-                                                        {{booking.company.address.street_one}} {{booking.company.address.street_two}}, {{booking.company.address.district.name}}, {{booking.company.address.post_code}} {{booking.company.address.state.name}}, {{booking.company.address.country.name}}
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto p-l-0" v-if="booking.status !== 3">
-                                                    <button class="btn btn-xs btn-default bg-master-lightest no-border b-rad-none requestModal" data-type="addressesList"><i class="fa fa-pencil text-complete"></i></button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addressesList" size="large">
-                                            <address-list-component :section="section" :company_id="booking.company.id" v-on:updateDefaultAddress="updateDefaultAddress"></address-list-component>
-                                        </modal-component>
-                                    </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col bg-white padding-25">
                             <purchase-order-form-component :data="booking" :section="section"></purchase-order-form-component>
                         </div>
                     </div>
@@ -370,6 +386,7 @@
             return {
                 section: 'bookingDetailSection',
                 selected_id: '',
+                addressEdit: false,
                 isLoading: true,
                 booking: null,
                 attention: false,
@@ -415,6 +432,7 @@
                 window.location.href = this.route('dashboard')
             },
             updateDefaultAddress(){
+                this.addressEdit = false;
                 this.fetchBooking();
             },
             selectedID(id){
diff --git a/resources/assets/vue/components/general/forms/SelectableComponent.vue b/resources/assets/vue/components/general/forms/SelectableComponent.vue
index ab0ed0b5..95db6af8 100644
--- a/resources/assets/vue/components/general/forms/SelectableComponent.vue
+++ b/resources/assets/vue/components/general/forms/SelectableComponent.vue
@@ -42,6 +42,8 @@
                                 }).join(': ')
                             };
                         });
+                        this.$store.dispatch('updateListQueue', {name: 'original_'+this.section});
+                        this.$store.dispatch('completeList', {name: 'original_'+this.section, data: response.payload.data});
 
                         this.$store.dispatch('completeList', {name: this.section, data: mappedList})
 
diff --git a/resources/views/layouts/base_portal.blade.php b/resources/views/layouts/base_portal.blade.php
index b94bafc1..dc3d995f 100644
--- a/resources/views/layouts/base_portal.blade.php
+++ b/resources/views/layouts/base_portal.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.base')
 
 @section('content')
-    <div class="row d-md-none" v-if="$store.getters.isShowing('sideMenu')">
+    <div class="row d-md-none" style="display: none;" v-show="$store.getters.isShowing('sideMenu')" >
         <div class="col absolute bg-master w-100 h-100" style="opacity: 0.3; z-index: 9998; left: 0px;"></div>
         <div class="col-8 bg-master-lightest position-fixed h-100" style="z-index: 9999" >
             @include('partials.menu')