From 1f6eaa65a5468d1636bcd8f511dc14bf04a23dd1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-5I7S92L\\nicho" <nicholaschong9607@gmail.com>
Date: Wed, 5 Apr 2023 16:02:10 +0800
Subject: [PATCH] order v2

---
 .../OrderProfileV2SectionComponent.vue        | 201 ++++++++++++++++++
 .../views/pages/orders/profile_v2.blade.php   |   4 +
 routes/web.php                                |   4 +
 3 files changed, 209 insertions(+)
 create mode 100644 resources/assets/vue/components/orders/sections/OrderProfileV2SectionComponent.vue
 create mode 100644 resources/views/pages/orders/profile_v2.blade.php

diff --git a/resources/assets/vue/components/orders/sections/OrderProfileV2SectionComponent.vue b/resources/assets/vue/components/orders/sections/OrderProfileV2SectionComponent.vue
new file mode 100644
index 00000000..8d20856a
--- /dev/null
+++ b/resources/assets/vue/components/orders/sections/OrderProfileV2SectionComponent.vue
@@ -0,0 +1,201 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 200px; top: 0;" v-if="isLoading"></loading-component>
+            <div class="row flex-wrap"  v-if="!isLoading && order">
+                <div class="col">
+                    <div class="row m-b-30">
+                        <div class="col bg-master-lightest padding-25">
+                            <div class="row align-items-center">
+                                <div class="col-12 col-lg-3">
+                                    <div class="row justify-content-center">
+                                        <div class="col-10">
+                                            <a :href="route('order.qr.download', order.id)" target="_blank">
+                                                <div class="peelable-corner overflow-hidden relative">
+                                                    <img :src="'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={id:'+order.id+'}'" class="w-100">
+                                                </div>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <div class="row m-b-20">
+                                        <div class="col-auto">
+                                            <h3 class="no-margin"><b>Order No.</b> {{order.reference}}</h3>
+                                        </div>
+                                        <div class="col d-flex">
+                                            <div class="btn btn-xs btn-outline-danger b-rad-none pointer requestModal align-items-center d-flex" data-type="changeOrderNo" v-if="$store.getters.isSuperAdmin">Change Order Number</div>
+                                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeOrderNo">
+                                                <change-order-number-form-component :section="section" :data="order"></change-order-number-form-component>
+                                            </modal-component>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-20">
+                                        <div class="col-12">
+                                            <div class="row">
+                                                <div class="col-auto d-flex align-items-center">
+                                                    <h6 class="no-margin"><b>Remark:</b></h6>
+                                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="orderRemark">
+                                                        <remark-form-component module_type="Order" :data="order" :section="section"></remark-form-component>
+                                                    </modal-component>
+                                                </div>
+                                                <div class="col-auto p-l-0" v-if="order.remarks.length == 0">
+                                                    <div class="btn btn-xs btn-outline-info b-rad-none pointer requestModal" data-type="orderRemark">Add a Remark</div>
+                                                </div>
+                                                <div class="col d-flex align-items-center pl-3 pl-md-0" v-if="order.remarks.length >= 1">
+                                                    <h6 class="no-margin">{{ order.remarks[0].content }}</h6>
+                                                    <span class="btn btn-md btn-default m-l-10 requestModal" data-type="orderRemark">
+                                                        <i class="fa fa-edit"></i>
+                                                    </span>
+                                                    <span class="btn btn-md btn-default m-l-5 requestModal" data-type="deleteOrderRemark">
+                                                        <i class="fa fa-trash"></i>
+                                                    </span>
+                                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteOrderRemark">
+                                                        <delete-remark-form-component :section="section" :data="order.remarks[0]"></delete-remark-form-component>
+                                                    </modal-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-20">
+                                        <div class="col-12 col-sm-auto">
+                                            <h6 class="no-margin"><b>Order Date:</b> {{order.created_at}}</h6>
+                                        </div>
+                                        <div class="col-12 col-sm-auto">
+                                            <h6 class="no-margin"><b>Warehouse:</b> {{order.warehouse.name}} {{$store.getters.isAdmin ? order.warehouse.reference : ''}}</h6>
+                                        </div>
+                                        <div class="col col-sm" v-if="$store.getters.isAdmin">
+                                            <a :href="route('customer.profile', order.company_module.marking)">
+                                                <h6 class="no-margin"><b>Customer Marking:</b> {{order.company_module.marking}}</h6>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div class="row m-b-10 align-items-center parentContainer" >
+                                        <div class="col-auto">
+                                            <h6 class="no-margin">
+                                                <div class="row">
+                                                    <div class="col-12 col-sm-auto pr-sm-0"><b>Delivery Address:</b>&nbsp;</div>
+                                                    <div class="col-12 col-sm-auto pl-sm-0">{{order.address.reference}} <i class="fa fa-info-circle m-l-10" v-tooltip:right="order.address.street_one+' '+(order.address.street_two ? order.address.street_two : '')+', '+ order.address.district.name+', '+order.address.post_code+' '+order.address.state.name+', '+order.address.country.name" ></i></div>
+                                                </div>
+                                            </h6>
+                                        </div>
+                                        <div class="col">
+                                            <div class="row" v-if="!order.address_change_request">
+                                                <div class="col">
+                                                    <div class="btn btn-xs btn-outline-danger b-rad-none pointer requestModal m-t-10 mt-sm-0" data-type="updateDeliveryAddress">Change Delivery Address</div>
+                                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="stick-up" type="updateDeliveryAddress" size="large">
+                                                        <change-order-address-form-component :data="order" :section="section" class="text-center"></change-order-address-form-component>
+                                                    </modal-component>
+                                                </div>
+                                            </div>
+                                            <div class="row parentContainer" v-if="order.address_change_request">
+                                                <div class="col-auto p-r-0">
+                                                    <div class="p-t-10 p-b-10 p-l-15 p-r-15 b-a b-danger fs-10 text-danger requestModal"  data-type="updateDeliveryAddress"><i class="fa fa-exclamation-circle m-r-10"></i>Your Delivery address change request is being reviewed</div>
+                                                </div>
+                                                <div class="col-auto bg-danger-light pointer requestModal" data-type="cancelAddressChangeRequest">
+                                                    <i class="fa fa-times text-white lh-38"></i>
+                                                </div>
+                                                <modal-component small type="cancelAddressChangeRequest">
+                                                    <div class="row">
+                                                        <div class="col text-center">
+                                                            <div class="row">
+                                                                <div class="col text-center">
+                                                                    <div class="row m-b-20">
+                                                                        <div class="col">
+                                                                            <h5 class="all-caps">Cancel Address Change Request</h5>
+                                                                            <div class="fs-11">Are you sure you want to cancel your order delivery address change request?</div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row">
+                                                                        <div class="col p-r-5">
+                                                                            <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                                                                        </div>
+                                                                        <div class="col p-l-5">
+                                                                            <div data-dismiss="modal" class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.order.address.status.update', order.address_change_request.id, 6), 'put', section, true, true)">Confirm</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </modal-component>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-center">
+                                        <div class="col-10">
+                                            <h6 class="text-info"><span class="text-danger bold">Gentle reminder:</span> You need to send the QR code to your supplier to print and stick on your packages, this QR code is required for us to identify your packages when they arrives at our warehouse!</h6>
+                                            <a :href="route('order.qr.download', order.id)" target="_blank">
+                                                <button class="btn btn-sm btn-success bg-master b-rad-none all-caps">Download QR Code Pdf</button>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            order_number: {
+                type: Number,
+                required: true,
+            }
+        },
+        data(){
+            return {
+                section: 'orderProfileSection',
+                isLoading: true,
+                order: null,
+                addComment: false,
+            }
+        },
+        computed: {
+            pendingQueue () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            }
+        },
+        watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchCompany();
+                }
+            }
+        },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+        },
+        methods: {
+            fetchCompany(){
+                this.isLoading = true;
+                this.submit(route('api.order.show', this.order_number), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+                this.isLoading = false;
+                this.order = response.payload.data;
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/orders/profile_v2.blade.php b/resources/views/pages/orders/profile_v2.blade.php
new file mode 100644
index 00000000..7ffef202
--- /dev/null
+++ b/resources/views/pages/orders/profile_v2.blade.php
@@ -0,0 +1,4 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    <order-profile-v2-section-component :order_number={{$id}}></order-profile-v2-section-component>
+@endsection
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index e2c98b55..3335fdc3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -146,6 +146,10 @@ Route::get('/order/show/{order_number}', function ($orderNumber) {
     return view('pages.orders.profile', ['id' => $orderNumber]);
 })->name('order.show');
 
+Route::get('/order/v2/show/{order_number}', function ($orderNumber) {
+    return view('pages.orders.profile_v2', ['id' => $orderNumber]);
+})->name('order.show');
+
 Route::get('/address', function () {
     return view('pages.addresses.index');
 })->name('address');