mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
232 lines
19 KiB
Vue
232 lines
19 KiB
Vue
<template>
|
|
<div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}, {'b-a': item.status === 5}, {'b-danger': item.status === 5}]" >
|
|
<div class="col">
|
|
<div class="row" v-if="!item.transaction_bill">
|
|
<div class="col">
|
|
<div class="row bg-white parentContainer">
|
|
<div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.status === 1 && item.type !== 6}, {'bg-white': item.status !== 1 && item.status !== 4}, {'bg-warning-lighter': item.type === 6}]">
|
|
<div class="row m-b-5">
|
|
<div class="col-auto">
|
|
<div class="font-heading fs-8 muted all-caps">Status</div>
|
|
<div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
|
|
{{ item.status === 1 ? 'Pending Verification' : item.status === ( 4 || 5) ? 'Rejected' : 'Approved'}}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-l-0">
|
|
<div class="font-heading fs-8 muted all-caps">Payment Amount</div>
|
|
<div class="font-heading fs-10 bold">
|
|
{{item.currency.short_code}} {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-l-0">
|
|
<div class="font-heading fs-8 muted all-caps">Bill Number</div>
|
|
<div class="font-heading fs-10 bold">
|
|
{{ item.bill_no }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-8 all-caps" :class="[{'text-danger': item.status === 4}, {'text-primary': item.status !== 4}]">{{ item.status === 2 ? 'Received' : item.status === 4 ? 'Rejected' : 'Submitted'}} On: {{item.updated_at}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto" v-if="item.status !== 3" :class="[{'bg-master-light': item.status === 1 && item.type !== 6}, {'bg-master-lighter': item.status === 2}, {'bg-warning-light': item.type === 6}]">
|
|
<div class="row align-items-center h-100" v-if="item.status !== 1 || item.payment_method !== 5">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger': item.status === 4}]"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center h-100" v-if="item.payment_method === 5 && item.status === 1">
|
|
<div class="col">
|
|
<a :href="route('billplz.bill', item.payment_reference)"><i class="fa fa-repeat text-success"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto" v-if="$store.getters.isSuperAdmin">
|
|
<div class="row align-items-center h-100 bg-danger pointer requestModal" data-type="deleteInvoiceFunction">
|
|
<div class="col">
|
|
<i class="fa fa-times text-white"></i>
|
|
</div>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInvoiceFunction">
|
|
<general-confirmation-form-component
|
|
contentText="Are you sure you want to delete this Payment?"
|
|
modalType="delete"
|
|
buttonText="Delete"
|
|
class="text-center"
|
|
:apiRoute="route('api.transaction.payment.delete', item.id)"
|
|
apiMethod="delete"
|
|
:section="section"
|
|
>
|
|
</general-confirmation-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center m-b-25" v-if="item.status === 0 && item.payment_method === 1">
|
|
<div class="col-auto p-r-0">
|
|
<div class="icon-thumbnail icon-50 bg-master-lightest">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="35" height="35"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000; margin-top: -2px; margin-bottom: 2px;"><defs><linearGradient x1="86" y1="35.8405" x2="86" y2="60.92294" gradientUnits="userSpaceOnUse" id="color-1_77151_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="126.46031" x2="129" y2="137.97356" gradientUnits="userSpaceOnUse" id="color-2_77151_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="149.15625" y1="18.58944" x2="149.15625" y2="172.31712" gradientUnits="userSpaceOnUse" id="color-3_77151_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="111.53125" y1="18.58944" x2="111.53125" y2="172.31712" gradientUnits="userSpaceOnUse" id="color-4_77151_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="107.5" y1="18.58944" x2="107.5" y2="172.31712" gradientUnits="userSpaceOnUse" id="color-5_77151_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="129" y1="18.58944" x2="129" y2="172.31712" gradientUnits="userSpaceOnUse" id="color-6_77151_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="18.58944" x2="86" y2="172.31712" gradientUnits="userSpaceOnUse" id="color-7_77151_gr7"><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="M86,37.63037c-5.93706,0 -10.75,4.81294 -10.75,10.75c0,5.93706 4.81294,10.75 10.75,10.75c5.93706,0 10.75,-4.81294 10.75,-10.75c0,-5.93706 -4.81294,-10.75 -10.75,-10.75z" fill="url(#color-1_77151_gr1)"></path><path d="M88.6875,126.3125h80.625v10.75h-80.625z" fill="url(#color-2_77151_gr2)"></path><path d="M139.75,150.5h18.8125v5.375h-18.8125z" fill="url(#color-3_77151_gr3)"></path><path d="M99.4375,142.4375h24.1875v5.375h-24.1875z" fill="url(#color-4_77151_gr4)"></path><path d="M99.4375,153.1875h16.125v5.375h-16.125z" fill="url(#color-5_77151_gr5)"></path><path d="M161.25,112.875h-64.5c-5.92863,0 -10.75,4.82137 -10.75,10.75v37.625c0,5.92863 4.82137,10.75 10.75,10.75h64.5c5.92863,0 10.75,-4.82137 10.75,-10.75v-37.625c0,-5.92863 -4.82137,-10.75 -10.75,-10.75zM166.625,161.25c0,2.96431 -2.41069,5.375 -5.375,5.375h-64.5c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-37.625c0,-2.96431 2.41069,-5.375 5.375,-5.375h64.5c2.96431,0 5.375,2.41069 5.375,5.375z" fill="url(#color-6_77151_gr6)"></path><path d="M153.50463,61.47388c-59.30238,-39.96313 -60.65419,-40.83119 -60.84231,-40.94137c-3.74369,-2.2145 -9.59169,-2.20913 -13.31925,-0.00538c-0.16663,0.09675 -0.67187,0.39506 -60.85306,40.94675c-1.48081,0.99975 -2.365,2.666 -2.365,4.45587v1.25775c0,2.96431 2.41069,5.375 5.375,5.375h2.6875c0,0.7095 0,1.58831 0,2.6875c0,3.49912 2.25481,6.45538 5.375,7.568v43.49987c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h72.5625v-5.375h-67.1875v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h64.5v-5.375h-61.8125v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h59.125v-5.375h-8.0625v-43h10.75v32.25h5.375v-32.7445c3.12019,-1.11263 5.375,-4.06888 5.375,-7.568c0,-1.09919 0,-1.978 0,-2.6875h13.4375c0,0.7095 0,1.58831 0,2.6875c0,3.49912 2.25481,6.45538 5.375,7.568v32.7445h5.375v-32.25h10.75v32.25h5.375v-32.7445c3.12019,-1.11263 5.375,-4.06888 5.375,-7.568c0,-1.09919 0,-1.978 0,-2.6875h2.6875c2.96431,0 5.375,-2.41069 5.375,-5.375v-1.25775c0,-1.78987 -0.88419,-3.45612 -2.37037,-4.45587zM45.6875,126.3125h-10.75v-43h10.75zM48.375,77.9375h-16.125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875c0,-0.62619 0,-1.677 0,-2.6875h21.5c0,1.0105 0,2.06131 0,2.6875c0,1.4835 -1.204,2.6875 -2.6875,2.6875zM75.25,126.3125h-24.1875v-43.4945c3.12019,-1.11263 5.375,-4.06888 5.375,-7.568c0,-1.09919 0,-1.978 0,-2.6875h13.4375c0,0.7095 0,1.58831 0,2.6875c0,3.49912 2.25481,6.45538 5.375,7.568zM96.75,75.25c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-16.125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875c0,-0.62619 0,-1.677 0,-2.6875h21.5c0,1.0105 0,2.06131 0,2.6875zM142.4375,75.25c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-16.125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875c0,-0.62619 0,-1.677 0,-2.6875h21.5c0,1.0105 0,2.06131 0,2.6875zM150.5,67.1875h-129l-0.00269,-1.25775c37.10363,-25.00181 59.76731,-40.25337 60.57894,-40.77475c1.05619,-0.6235 2.44831,-0.9675 3.92375,-0.9675c1.462,0 2.84337,0.33862 3.89419,0.95137c1.16369,0.7525 23.76825,15.96912 60.60581,40.79356z" fill="url(#color-7_77151_gr7)"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-l-0">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 text-primary bold">CIEF WORLDWIDE SDN. BHD.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 bold">Maybank: <span class="text-complete">568603010762</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 bold">Bank In Amount: <span class="text-success">{{(Math.round((parseFloat(amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}} MYR</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row bg-white padding-5" v-if="$store.getters.isSuperAdmin">
|
|
<div class="col-auto">
|
|
<div class="font-heading fs-8 muted all-caps">Payment Method</div>
|
|
<div class="font-heading fs-10">
|
|
{{ convertPaymentMethodToText(item.payment_method) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="font-heading fs-8 muted all-caps">Created At</div>
|
|
<div class="font-heading fs-10">{{ item.created_at }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="font-heading fs-8 muted all-caps">Updated At</div>
|
|
<div class="font-heading fs-10">{{ item.updated_at }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey" v-if="expandPaymentDetails">
|
|
<div class="col bg-white padding-15">
|
|
<!-- <div class="row align-items-end m-b-10 text-success bold">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Recipient Gets</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-10">{{item.original_currency.short_code}} {{(item.original_amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bold m-b-10 text-primary">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Rate</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-10 ">{{(Math.round((item.currency_rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 hint-text">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Transfer Charges</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-10">MYR {{(Math.round((item.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-5 hint-text">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Tax</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-10">MYR {{(Math.round((item.tax + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 bold text-success">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Your Payment</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">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 m-b-5">Your Payment Proof</div>
|
|
<div class="row no-margin" v-if="item.payment_method !== 5">
|
|
<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 m-r-5">
|
|
<document-file-viewer-component :file="file">
|
|
<template slot="button">
|
|
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
|
<i class="fa fa-file-image-o fs-10"></i>
|
|
</div>
|
|
</template>
|
|
</document-file-viewer-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" v-if="item.payment_method === 5 && (item.status === 2 || item.status === 3)">
|
|
<a :href="route('billplz.bill', item.payment_reference)" target="_blank">
|
|
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
|
<i class="fa fa-file-image-o fs-10"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="row no-margin" v-if="item.payment_method === 4 && item.payment_reference">
|
|
<a :href="route('billplz.bill', item.payment_reference)" target="_blank">
|
|
<div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
|
|
<i class="fa fa-file-image-o fs-10"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
data(){
|
|
return {
|
|
expandPaymentDetails: false,
|
|
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
|
parameters: {
|
|
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
|
bank_id: 1
|
|
},
|
|
section: 'bookingDetailSection',
|
|
}
|
|
},
|
|
methods: {
|
|
clickExpand(){
|
|
// if(this.item
|
|
// && ((this.item.payment_method !== 5 && this. item.documents.length)
|
|
// || (this.item.payment_method === 5 && (this.item.status === 2 || this.item.status === 3)))){
|
|
// this.expandPaymentDetails = !this.expandPaymentDetails;
|
|
// }
|
|
|
|
if(this.item){
|
|
this.expandPaymentDetails = !this.expandPaymentDetails;
|
|
}
|
|
},
|
|
convertPaymentMethodToText(number) {
|
|
var paymentMethods = {
|
|
1: "CASH",
|
|
2: "CHEQUE",
|
|
3: "BA",
|
|
4: "WALLET",
|
|
5: "PAYMENT_GATEWAY"
|
|
};
|
|
|
|
return paymentMethods[number] || "Unknown Payment Method";
|
|
},
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|