From 43491223abbec2f73f42b0c59771e656b3f5be31 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sun, 31 Jul 2022 21:38:15 +0800
Subject: [PATCH] customer payment ui inside orders

---
 .../sections/OrderProfileSectionComponent.vue |  17 ++
 .../AdminPaymentsBillingComponent.vue         |   1 +
 .../CustomerPaymentsBillingComponent.vue      | 178 ++++++++++++++++++
 .../forms/PaymentFormComponent.vue            |   6 +-
 4 files changed, 200 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue

diff --git a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
index a0880e40..0b48c640 100644
--- a/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrderProfileSectionComponent.vue
@@ -134,6 +134,23 @@
                             </div>
                         </div>
                     </div>
+
+                    <div class="row m-b-30" v-if="order.invoices.length">
+                        <div class="col">
+                            <div class="row m-b-20">
+                                <div class="col">
+                                    <h4 class="bold">Invoices</h4>
+                                    <p>You can view your invoices here and make payment.</p>
+                                </div>
+                            </div>
+                            <div class="row bg-master-lightest p-t-15" v-for="invoice in order.invoices">
+                                <div class="col">
+                                    <customer-payments-billing-component :data="invoice" invoice_status="Pending Payment" :section="section"></customer-payments-billing-component>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="row">
                         <div class="col">
                             <div class="row m-b-20">
diff --git a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
index 535ecfdc..8813d9ed 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/AdminPaymentsBillingComponent.vue
@@ -193,6 +193,7 @@
                                     </div>
                                     <!-- <div class="row m-t-20" v-if="item.shippng_transaction.outstanding > 0"> -->
                                     <div class="row m-t-20">
+                                    <div class="row m-t-20" v-if="item.shippng_transaction.outstanding > 0">
                                         <div class="col">
                                             <div class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="makePayment">Make Payment</div>
                                         </div>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
new file mode 100644
index 00000000..6573fdca
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
@@ -0,0 +1,178 @@
+<template>
+    <div class="row m-b-15 m-l-5 m-r-10 parentContainer">
+        <div class="col bg-white rounded">
+            <div class="row">
+                <div class="col padding-20">
+                    <div class="row align-items-center">         
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Invoice Date</p>
+                            <div> {{ item.updated_at }}</div>
+                        </div>
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Status</p>
+                            <div class="all-caps" v-if="item.status == 3">Payment Completed</div>
+                            <div class="all-caps" v-else>Pending Payment</div>
+                        </div>
+                        <div class="col">
+                            <p class="no-margin fs-10 all-caps">Amount</p>
+                            <div>MYR {{ item.amount.toFixed(2) }}</div>
+                        </div>
+                        <div class="col-auto p-l-0 p-r-0">
+                            <div v-if="item.documents.length">
+                                <div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">
+                                    <document-file-viewer-component :file="file">
+                                        <template slot="button">
+                                            <div class="btn bg-grey no-border muted">
+                                                <i class="fa fa-file-pdf-o"></i>
+                                            </div>
+                                        </template>
+                                    </document-file-viewer-component>
+                                </div>
+                            </div> 
+                            <div v-else>
+                                <div class="btn bg-grey no-border muted invisible">
+                                    <i class="fa fa-file-pdf-o"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-auto">
+                            <div class="btn bg-grey no-border" @click="expanded = !expanded">
+                                <i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row b-t b-grey p-t-10 m-l-5 m-r-5" v-show="expanded">
+                <div class="col-12 col-md-7 padding-20">
+                    <div class="row bg-master-lightest h-100">
+                        <div class="col">
+                            <div class="row bg-master-lightest" v-if="item.payment_attempts.length">
+                                <div class="col">
+                                    <div class="row m-t-10 m-b-10">
+                                        <div class="col">
+                                            <div class="font-head fs-10 all-caps">Payment Attempt</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <shipping-transaction-component v-for="item in item.payment_attempts" v-bind:key="item.id" :data="item" ></shipping-transaction-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row bg-master-lightest" v-if="item.payment_history.length">
+                                <div class="col">
+                                    <div class="row m-t-10 m-b-10">
+                                        <div class="col">
+                                            <div class="font-head fs-10 all-caps">Payment History</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <payment-history-component v-for="item in item.payment_history" v-bind:key="item.id" :data="item" ></payment-history-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-5 padding-20 parentContainer">
+                    <div class="row bg-master-lightest h-100">
+                        <div class="col">
+                            <div class="row padding-10">
+                                <div class="col">
+                                    <div class="row align-items-end m-b-10 text-complete">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-12">Total Amount:</div>
+                                        </div>
+                                        <div class="col-auto text-right">
+                                            <div class="font-heading fs-12">MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end m-b-10 text-success">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-12">Paid Total:</div>
+                                        </div>
+                                        <div class="col-auto text-right">
+                                            <!-- <div class="font-heading fs-12">MYR {{(Math.round((item.shippng_transaction.paid_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div> -->
+                                            <div class="font-heading fs-12">Paid Total</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end m-b-10">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-12">Floating Amount:</div>
+                                        </div>
+                                        <div class="col-auto text-right">
+                                            <!-- <div class="font-heading fs-12">MYR {{(Math.round((item.shippng_transaction.floating_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div> -->
+                                            <div class="font-heading fs-12">Floating Amount</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end bold text-danger">
+                                        <div class="col">
+                                            <div class="font-heading all-caps fs-12">OutStanding Total:</div>
+                                        </div>
+                                        <div class="col-auto text-right">
+                                            <div class="font-heading fs-12">MYR {{(Math.round((item.outstanding + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-t-20" v-if="item.outstanding > 0">
+                                        <div class="col">
+                                            <div class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="makePayment">Make Payment</div>
+                                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="makePayment">
+                                                <payment-form-component :data="item" :section="section"></payment-form-component>
+                                            </modal-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        props: {
+            invoice_status: {
+                type: String,
+                required: true
+            },
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data(){
+            return {
+                parameters: {
+                    packing_list_id: null,
+                    transaction_details: [],
+                },
+                expanded: false,
+            }
+        },
+        computed: {
+            cbm () {
+                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.cbm) + total, 0)) * 1000) / 1000).toFixed(3)
+            },
+            overweight(){
+                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
+            }
+        },
+        created(){
+            this.parameters.packing_list_id = this.data.id;
+        },
+        methods: {
+            successHandler(response){
+                this.item = response.payload.data;
+                // this.$forceUpdate();
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
index 0dee1870..79a67683 100644
--- a/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/forms/PaymentFormComponent.vue
@@ -110,8 +110,10 @@
                 this.error = '';
             },
             successHandler(response){
-                if (response.payload.data.payment_method === 5) {
-                    window.location.href = this.route('billplz.bill', response.payload.data.payment_reference) + '?auto_submit=true';
+                if (response.payload) {
+                    if (response.payloaddata.payment_method === 5) {
+                        window.location.href = this.route('billplz.bill', response.payload.data.payment_reference) + '?auto_submit=true';
+                    }
                 }
             }
         },