cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
7f60362d79733a348911663fd932b5c6adf19bb4
exchange-2.0/resources/assets/vue/components/bookings/sections/BookingDetailsSectionComponent.vue
T

777 lines
113 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="row parentContainer">
<div class="col">
<!-- cief todo: 110 - Prototype Period Lock - Starts -->
<!-- <button v-if="booking && !locked && lockInitialized && $store.getters.isAdmin" @click="lock">
🔒 Lock Page
</button>
<page-lock v-if="booking"
:active="locked"
:section="section + 'PeriodLock'"
:company-id="booking.company.id"
:booking-id="booking.id"
:password="''"
v-on:lock="lock"
v-on:initializeLock="initializeLock">
</page-lock> -->
<!-- cief todo: 110 - Prototype Period Lock - Ends -->
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
<div class="row" v-show="!isLoading" v-if="booking">
<div class="col-md col-sm-12 m-b-20">
<div class="row" v-if="booking">
<div class="col" v-if="showDownloadPDFButtons">
<div class="row m-b-50" v-if="(booking.status === 3 || booking.invoice_status === 2) || isBookingWithAFullRefund">
<div class="col no-padding">
<div class="row">
<div class="col">
<div class="row">
<div class="col text-center">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="102.125" y1="33.59375" x2="102.125" y2="112.5955" gradientUnits="userSpaceOnUse" id="color-1_48334_gr1"><stop offset="0" stop-color="#67eba8"></stop><stop offset="1" stop-color="#67eba8"></stop></linearGradient><linearGradient x1="86" y1="12.54256" x2="86" y2="158.17012" gradientUnits="userSpaceOnUse" id="color-2_48334_gr2"><stop offset="0" stop-color="#1ac86f"></stop><stop offset="1" stop-color="#1ac86f"></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="M81.56563,111.31088l-28.92825,-28.75087c-2.09894,-2.0855 -2.09894,-5.46906 0,-7.55456l3.78131,-3.75713c2.09894,-2.0855 5.50131,-2.0855 7.60025,0l17.66225,17.55475c2.08281,2.06938 5.45562,2.08819 7.55994,0.04031l51.06788,-49.69187c2.12044,-2.064 5.52281,-2.02906 7.60025,0.08062l3.741,3.79744c2.07744,2.107 2.03981,5.49056 -0.08062,7.55456l-62.44406,60.76706c-2.10431,2.04788 -5.47712,2.02906 -7.55994,-0.04031z" fill="url(#color-1_48334_gr1)"></path><path d="M153.44819,52.50838c1.54262,-1.505 2.40531,-3.51525 2.42681,-5.65987c0.0215,-2.14462 -0.79819,-4.17369 -2.30587,-5.70556l-3.74369,-3.80013c-3.10675,-3.15244 -8.21837,-3.2035 -11.38962,-0.11825l-1.26044,1.2255c-12.60169,-13.55844 -30.00056,-21.543 -48.48787,-22.2525v-0.07256h-2.6875c-38.53069,0 -69.875,31.34431 -69.875,69.875v2.6875h0.06719c1.419,37.28906 32.18013,67.1875 69.80781,67.1875c38.528,0 69.875,-31.34431 69.875,-69.875c0,-10.33881 -2.2145,-20.25031 -6.53062,-29.498zM145.99575,41.11606l3.74369,3.80013c0.49719,0.50525 0.76862,1.17175 0.76056,1.87588c-0.00806,0.70681 -0.29294,1.36794 -0.80088,1.86244l-62.44944,60.76975c-1.05081,1.02394 -2.752,1.0105 -3.79206,-0.01881l-28.92556,-28.74819c-0.50525,-0.50256 -0.78206,-1.16906 -0.78206,-1.87588c0,-0.70413 0.27681,-1.36794 0.78206,-1.86781l3.78131,-3.75713c1.05081,-1.04275 2.76275,-1.04544 3.81087,0l17.66225,17.55206c3.11212,3.09331 8.19419,3.11481 11.3305,0.05913l51.06519,-49.69187c1.06425,-1.03469 2.7735,-1.01856 3.81356,0.04031zM133.32419,42.19913l-7.697,7.49006c-9.57287,-10.46244 -22.7685,-16.66519 -36.937,-17.36394v-10.75c17.02531,0.70681 33.04013,8.10281 44.634,20.62388zM121.71956,53.48931l-34.35162,33.42713c-1.05081,1.02394 -2.752,1.0105 -3.79206,-0.01881l-17.66225,-17.55206c-3.14169,-3.12556 -8.25062,-3.12019 -11.39231,0l-3.77862,3.75444c-1.5265,1.51844 -2.36769,3.53406 -2.36769,5.68138c0,2.14731 0.84119,4.16831 2.36769,5.68406l28.92825,28.74819c1.56681,1.55606 3.63081,2.33544 5.6975,2.33544c2.03713,0 4.07694,-0.75787 5.633,-2.27631l41.53262,-40.41462c1.19594,4.26506 1.84094,8.66719 1.84094,13.14188c0,26.67344 -21.70156,48.375 -48.375,48.375c-26.67344,0 -48.375,-21.70156 -48.375,-48.375c0,-26.67344 21.70156,-48.375 48.375,-48.375c13.71162,0 26.5525,5.78619 35.71956,15.86431zM139.61294,88.6875h10.81719c-0.65037,15.7595 -6.97406,30.07581 -16.99038,40.95481l-7.64325,-7.64325c8.07594,-8.91713 13.1795,-20.52175 13.81644,-33.31156zM51.40919,127.07844c8.71288,7.34763 19.78806,11.9325 31.90331,12.53719v10.81719c-15.08225,-0.62081 -28.83687,-6.45 -39.52775,-15.72994zM88.6875,139.61294c12.7925,-0.63694 24.39444,-5.74319 33.31156,-13.81644l7.64325,7.64325c-10.879,10.01362 -25.19531,16.34 -40.95481,16.99038zM83.3125,32.3145c-12.79788,0.63425 -24.39712,5.805 -33.31694,13.88094l-7.59488,-7.59488c10.879,-10.01631 25.15231,-16.39644 40.91181,-17.04412zM38.59788,42.40069l7.59487,7.59487c-8.07325,8.91981 -13.244,20.51906 -13.87556,33.31694h-10.76344c0.65038,-15.7595 7.0305,-30.03281 17.04413,-40.91181zM32.38706,88.6875c0.67188,13.46437 6.27531,25.63875 15.093,34.71712l-7.611,7.611c-10.76881,-11.03219 -17.62463,-25.89406 -18.30187,-42.32812zM150.42475,83.3125h-10.78225c-0.24456,-4.97456 -1.12875,-9.86581 -2.71975,-14.56625l-0.24456,0.08331l8.5785,-8.34738c3.12019,7.22938 4.84825,14.88338 5.16806,22.83031z" fill="url(#color-2_48334_gr2)"></path></g></g></svg>
</div>
</div>
<div class="row">
<div class="col text-center">
<h5 class="all-caps bold text-success m-b-5">Transfer Completed Successfully</h5>
<small class="muted">Click on the buttons below to manage the billing documents.</small>
</div>
</div>
</div>
</div>
<div class="row m-t-20">
<div class="col">
<div class="row">
<div class="col">
<div class="row justify-content-center no-margin">
<div class="col-md col-6 h-100" v-if="!booking.einvoice">
<document-file-viewer-component :file="booking.documents.invoice.files[0]" v-if="booking.documents.invoice">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">Invoice</p>
</div>
</template>
</document-file-viewer-component>
</div>
<div class="col-md col-6 h-100" v-else>
<document-file-viewer-component :file="booking.documents.e_invoice.files[0]" v-if="booking.documents.e_invoice">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">E-Invoice</p>
</div>
</template>
</document-file-viewer-component>
<div class="bg-white text-center padding-20 pointer b-grey disabled-block" v-else>
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">E-Invoice (Pending)</p>
</div>
</div>
<div class="col-md col-6 h-100">
<document-file-viewer-component :file="booking.documents.purchase_order.files[0]" v-if="booking.documents.purchase_order">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="69.875" y1="96.52694" x2="69.875" y2="108.37075" gradientUnits="userSpaceOnUse" id="color-1_44039_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="21.05119" x2="86" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-2_44039_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="21.05119" x2="80.625" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-3_44039_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.25" y1="21.05119" x2="75.25" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-4_44039_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="21.05119" x2="69.875" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-5_44039_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="129" y1="21.05119" x2="129" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-6_44039_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="139.75" y1="21.05119" x2="139.75" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-7_44039_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="118.25" y1="21.05119" x2="118.25" y2="153.19019" gradientUnits="userSpaceOnUse" id="color-8_44039_gr8"><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,104.8125c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-26.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-5.375c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h26.875c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-1_44039_gr1)"></path><path d="M154.0045,83.57856c-1.58025,-1.87856 -3.913,-2.95356 -6.407,-2.95356h-5.16v-8.0625c0,-4.44513 -4.03125,-8.0625 -8.0625,-8.0625v-26.875c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-38.65162l-3.88881,-7.77762c-0.91375,-1.83288 -2.75469,-2.97237 -4.80794,-2.97237h-18.17825h-1.66088h-18.8125c-2.96431,0 -5.375,2.41069 -5.375,5.375v96.75h-21.5v13.4375c0,7.40944 6.02806,13.4375 13.4375,13.4375h91.375c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-18.8125h4.74344c6.80475,0 12.55869,-4.71119 13.68475,-11.20419l2.95625,-17.02263c0.39775,-2.29512 -0.23919,-4.644 -1.75494,-6.44463zM137.0625,72.5625v8.0625h-16.125v-8.0625c0,-1.4835 1.20669,-2.6875 2.6875,-2.6875h10.75c1.4835,0 2.6875,1.204 2.6875,2.6875zM129,43h-5.375v-5.375h5.375zM81.65163,26.875l2.6875,5.375h-15.49344l-2.6875,-5.375zM60.15163,26.875l3.88881,7.78031c0.91913,1.83019 2.76275,2.96969 4.81063,2.96969h49.39894v5.375h-75.25v-16.125zM29.5625,145.125c-4.44513,0 -8.0625,-3.61469 -8.0625,-8.0625v-8.0625h86v8.0625c0,3.02344 1.00244,5.375 2.69288,8.0625zM129,137.0625c0,4.44512 -3.61738,8.0625 -8.0625,8.0625c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-13.4375h-69.875v-75.25h86v16.125h-5.375c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v8.0625h-5.16c-2.494,0 -4.82675,1.075 -6.407,2.95356c-1.51306,1.80062 -2.15269,4.1495 -1.75225,6.44194l2.95625,17.02531c1.12606,6.493 6.87731,11.20419 13.68475,11.20419h10.11575zM150.46237,89.10138l-2.95625,17.02531c-0.67725,3.91031 -4.20325,6.74831 -8.38769,6.74831h-20.23419c-4.18444,0 -7.71044,-2.838 -8.38769,-6.74831l-2.95625,-17.028c-0.172,-0.99706 0.28219,-1.72 0.57244,-2.064c0.55362,-0.65575 1.38675,-1.03469 2.28975,-1.03469h37.195c0.903,0 1.73613,0.37894 2.29244,1.03738c0.28756,0.344 0.74444,1.06425 0.57244,2.064z" fill="url(#color-2_44039_gr2)"></path><path d="M53.75,59.125h53.75v5.375h-53.75z" fill="url(#color-3_44039_gr3)"></path><path d="M53.75,69.875h43v5.375h-43z" fill="url(#color-4_44039_gr4)"></path><path d="M53.75,80.625h32.25v5.375h-32.25z" fill="url(#color-5_44039_gr5)"></path><path d="M126.3125,91.375h5.375v16.125h-5.375z" fill="url(#color-6_44039_gr6)"></path><path d="M137.0625,91.375h5.375v10.75h-5.375z" fill="url(#color-7_44039_gr7)"></path><path d="M115.5625,91.375h5.375v10.75h-5.375z" fill="url(#color-8_44039_gr8)"></path></g></g></svg>
</div>
<p class="no-margin fs-12">Purchase Order</p>
</div>
</template>
</document-file-viewer-component>
</div>
<div class="col-md col-6 h-100 m-t-15 mt-md-0">
<document-file-viewer-component :file="booking.documents.delivery_order.files[0]" v-if="booking.documents.delivery_order">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
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>
<p class="no-margin fs-12">Delivery Order</p>
</div>
</template>
</document-file-viewer-component>
</div>
<div class="col-md col-6 m-t-15 mt-md-0" v-if="$store.getters.isAdmin">
<document-file-viewer-component :file="booking.documents.supplier_delivery_order.files[0]" v-if="booking.documents.supplier_delivery_order">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="53.75" y1="76.93238" x2="53.75" y2="95.51644" gradientUnits="userSpaceOnUse" id="color-1_44778_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="120.9375" y1="15.23006" x2="120.9375" y2="159.51656" gradientUnits="userSpaceOnUse" id="color-2_44778_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="120.9375" y1="15.23006" x2="120.9375" y2="159.51656" gradientUnits="userSpaceOnUse" id="color-3_44778_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="120.9375" y1="15.23006" x2="120.9375" y2="159.51656" gradientUnits="userSpaceOnUse" id="color-4_44778_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="120.9375" y1="15.23275" x2="120.9375" y2="159.51656" gradientUnits="userSpaceOnUse" id="color-5_44778_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="15.23275" x2="86" y2="159.51656" gradientUnits="userSpaceOnUse" id="color-6_44778_gr6"><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="M53.75,77.9375c-4.4528,0 -8.0625,3.6097 -8.0625,8.0625c0,4.4528 3.6097,8.0625 8.0625,8.0625c4.4528,0 8.0625,-3.6097 8.0625,-8.0625c0,-4.4528 -3.6097,-8.0625 -8.0625,-8.0625z" fill="url(#color-1_44778_gr1)"></path><path d="M107.5,69.875h26.875v5.375h-26.875z" fill="url(#color-2_44778_gr2)"></path><path d="M107.5,59.125h26.875v5.375h-26.875z" fill="url(#color-3_44778_gr3)"></path><path d="M107.5,80.625h26.875v5.375h-26.875z" fill="url(#color-4_44778_gr4)"></path><path d="M120.9375,91.375c-5.92863,0 -10.75,4.82137 -10.75,10.75c0,5.92863 4.82137,10.75 10.75,10.75c5.92863,0 10.75,-4.82137 10.75,-10.75c0,-5.92863 -4.82137,-10.75 -10.75,-10.75zM120.9375,107.5c-2.96431,0 -5.375,-2.41069 -5.375,-5.375c0,-2.96431 2.41069,-5.375 5.375,-5.375c2.96431,0 5.375,2.41069 5.375,5.375c0,2.96431 -2.41338,5.375 -5.375,5.375z" fill="url(#color-5_44778_gr5)"></path><path d="M152.56131,16.94738c-1.99681,-0.83044 -4.28387,-0.38431 -5.82381,1.15025l-4.02588,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.43438,-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-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.78963 -3.31369,4.97456v37.20306h-26.87231c-2.96431,0 -5.37769,2.41338 -5.37769,5.37769v43c0,2.96431 2.41337,5.375 5.37769,5.375h26.87231v16.125h-21.5v13.4375c0,7.40944 6.03075,13.4375 13.4375,13.4375h102.12231c7.40944,-0.00269 13.44019,-6.03075 13.44019,-13.44019v-120.51556c0,-2.18494 -1.30075,-4.14144 -3.31369,-4.97456zM86,74.97856c-5.25675,-1.06963 -9.40625,-5.10356 -10.47856,-10.47856h10.47856zM70.09,64.5c1.18519,8.0625 7.68894,14.7275 15.91,15.91v11.18c-8.22106,1.1825 -14.72481,7.8475 -15.91,15.91h-32.67731c-1.18519,-8.0625 -7.85019,-14.72481 -15.91269,-15.91v-11.18c8.0625,-1.1825 14.7275,-7.8475 15.91269,-15.91zM86,97.02144v10.47856h-10.47856c1.07231,-5.375 5.22181,-9.40625 10.47856,-10.47856zM31.97856,64.5c-1.06963,5.375 -5.10356,9.40894 -10.47856,10.47856v-10.47856zM21.5,97.02144c5.375,1.07231 9.40894,5.10356 10.47856,10.47856h-10.47856zM40.3125,150.5c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-8.0625h96.75v8.0625c0,3.02344 1.00244,5.375 2.69019,8.0625zM150.5,142.4375c0,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-16.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-43c0,-2.96162 -2.41069,-5.375 -5.375,-5.375h-32.25l-0.02688,-37.21919l4.03662,4.01781c1.88125,1.8705 4.79988,2.09356 6.94987,0.53213l6.7725,-4.95575l7.05469,5.15194c1.89738,1.38406 4.43438,1.37869 6.32637,0l7.04125,-5.15194l7.05737,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.00169z" fill="url(#color-6_44778_gr6)"></path></g></g></svg>
</div>
<p class="no-margin fs-12">Supplier DO</p>
</div>
</template>
</document-file-viewer-component>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-b-10" v-else>
<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>
<div class="col" v-else> <!-- Show only single E-Invoice button-->
<div class="row m-b-50">
<div class="col no-padding">
<div class="row m-t-20">
<div class="col">
<div class="row">
<div class="col">
<div class="row justify-content-center no-margin">
<div class="col-md col-6 h-100" v-if="!booking.einvoice">
<!-- temp -->
</div>
<div class="col-md col-6 h-100" v-else>
<document-file-viewer-component :file="booking.documents.e_invoice.files[0]" v-if="booking.documents.e_invoice">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">E-Invoice</p>
</div>
</template>
</document-file-viewer-component>
<div class="bg-white text-center padding-20 pointer b-grey disabled-block" v-else>
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">E-Invoice (Pending)</p>
</div>
</div>
<div class="col-md col-6 h-100">
<!-- temp -->
</div>
<div class="col-md col-6 h-100 m-t-15 mt-md-0">
<!-- temp -->
</div>
<div class="col-md col-6 m-t-15 mt-md-0" v-if="$store.getters.isAdmin">
<!-- temp -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md">
<div class="row no-margin 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 80px 80px 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: 70px 0px 0px 70px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
<div class="col bg-white padding-25">
<div class="row">
<div class="col">
<div class="row align-items-center">
<div class="col-auto p-r-0" ><div class="icon-thumbnail icon-35 mr-0 btn-rounded text-white light animate__animated animate__infinite" :class="[{'bg-danger': !booking.company.address}, {'animate__pulse': !booking.company.address}, {'bg-success': booking.company.address}]"><span v-if="booking.status !==3">1</span><i class='fa fa-check' v-if="booking.status ===3"></i></div></div>
<div class="col-8">
<div class="fs-14 bold all-caps" :class="[{'text-success': booking.company.address}]">Billing Details</div>
<p class="m-b-0 text-danger fs-12 m-t-10" 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 class="col-auto">
<div class="font-heading fs-10 muted all-caps">TIN</div>
<p class="m-b-0 fs-12">
<span :class="[{'text-danger bold': !booking.company.e_invoice && !booking.company.tin }]">
{{ invoiceInfo }}
</span><br />
<a v-if="booking.company.e_invoice && booking.company.tin" class="pointer requestModal" data-type="eInvoiceInfo">View E-Invoice Info
</a>
</p>
<modal-component class="animate__animated animate__fast animate__fadeIn" v-if="booking.company.tin" styleType="fill-in" type="eInvoiceInfo">
<e-invoice-info-component :company-id="booking.company.id"></e-invoice-info-component>
</modal-component>
</div>
</div>
</div>
</div>
</div>
</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>
<booking-order-reference-form-component v-if='oneSixEightEightServiceIds.includes(booking.service.id)' :order_reference_no="booking.order_reference_no" :booking_status="booking.status" :booking_id="booking.id" :section="section"></booking-order-reference-form-component>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-margin">
<div class="col bg-white padding-25">
<div class="row align-items-center m-b-10" v-if='oneSixEightEightServiceIds.includes(booking.service.id)'>
<div class="col">
<div class="row">
<div class="col-auto p-r-0">
<div class="icon-thumbnail icon-35 mr-0 btn-rounded text-white light animate__animated animate__infinite bg-success">
<i class='fa fa-check'></i>
</div>
</div>
<div class="col">
<p class="m-b-0 fs-12">You are no longer required to key in your purchase order details manually, the system will automatically get your purchase order detail from 1688 directly.</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="row" v-if="booking.documents.ecommerce_purchase_order">
<div class="col-md col-6 h-100" v-for="file in booking.documents.ecommerce_purchase_order.files">
<document-file-viewer-component :file="file">
<template slot="button">
<div class="bg-white text-center padding-20 pointer b-grey">
<div class="m-b-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="45" height="45"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="118.25" y1="63.41425" x2="118.25" y2="88.92669" gradientUnits="userSpaceOnUse" id="color-1_Ya7GVcPz6Vqb_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="72.5625" y1="20.87113" x2="72.5625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-2_Ya7GVcPz6Vqb_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="56.4375" y1="20.87113" x2="56.4375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-3_Ya7GVcPz6Vqb_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="20.87113" x2="45.6875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-4_Ya7GVcPz6Vqb_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="20.87113" x2="69.875" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-5_Ya7GVcPz6Vqb_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="80.625" y1="20.87113" x2="80.625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-6_Ya7GVcPz6Vqb_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="91.375" y1="20.87113" x2="91.375" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-7_Ya7GVcPz6Vqb_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="20.87113" x2="86" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-8_Ya7GVcPz6Vqb_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="52.40625" y1="20.87113" x2="52.40625" y2="158.79631" gradientUnits="userSpaceOnUse" id="color-9_Ya7GVcPz6Vqb_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 id="Layer_1"><circle cx="44" cy="30" transform="scale(2.6875,2.6875)" r="4" fill="url(#color-1_Ya7GVcPz6Vqb_gr1)"></circle><rect x="12" y="14" transform="scale(2.6875,2.6875)" width="30" height="2" fill="url(#color-2_Ya7GVcPz6Vqb_gr2)"></rect><path d="M80.625,102.125v-43c0,-2.95625 -2.41875,-5.375 -5.375,-5.375h-37.625c-2.95625,0 -5.375,2.41875 -5.375,5.375v43c0,2.95625 2.41875,5.375 5.375,5.375h37.625c2.95625,0 5.375,-2.41875 5.375,-5.375zM53.75,102.125h-16.125v-10.75h16.125zM53.75,86h-16.125v-10.75h16.125zM53.75,69.875h-16.125v-10.75h16.125zM75.25,102.125h-16.125v-10.75h16.125zM75.25,86h-16.125v-10.75h16.125zM75.25,69.875h-16.125v-10.75h16.125z" fill="url(#color-3_Ya7GVcPz6Vqb_gr3)"></path><rect x="12" y="47" transform="scale(2.6875,2.6875)" width="10" height="2" fill="url(#color-4_Ya7GVcPz6Vqb_gr4)"></rect><rect x="25" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-5_Ya7GVcPz6Vqb_gr5)"></rect><rect x="29" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-6_Ya7GVcPz6Vqb_gr6)"></rect><rect x="33" y="47" transform="scale(2.6875,2.6875)" width="2" height="2" fill="url(#color-7_Ya7GVcPz6Vqb_gr7)"></rect><path d="M141.3625,73.90625c-1.88125,-6.45 -6.45,-11.825 -12.3625,-14.78125v-34.9375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v110.1875v2.6875v10.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-10.75v-22.30625c1.6125,0.5375 3.49375,0.80625 5.375,0.80625c11.825,0 21.5,-9.675 21.5,-21.5c0,-9.1375 -5.9125,-17.2 -14.5125,-20.15625zM137.0625,80.625c0,10.48125 -8.33125,18.8125 -18.8125,18.8125c-10.48125,0 -18.8125,-8.33125 -18.8125,-18.8125c0,-10.48125 8.33125,-18.8125 18.8125,-18.8125c10.48125,0 18.8125,8.33125 18.8125,18.8125zM123.625,147.8125c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-3.225c0.80625,0.26875 1.6125,0.5375 2.6875,0.5375h96.75c1.075,0 1.88125,-0.26875 2.6875,-0.5375zM123.625,134.375v2.6875c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-2.6875v-110.1875c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v32.7875c-1.6125,-0.26875 -3.49375,-0.5375 -5.375,-0.5375c-13.4375,0 -24.1875,10.75 -24.1875,24.1875c0,12.3625 9.40625,22.84375 21.76875,24.1875c1.88125,3.49375 4.56875,6.18125 7.79375,8.0625zM134.375,110.1875c-4.8375,0 -9.1375,-2.15 -12.3625,-5.64375c11.55625,-1.88125 20.425,-11.825 20.425,-23.91875c0,-0.26875 0,-0.26875 0,-0.5375c4.8375,2.95625 8.0625,8.0625 8.0625,13.975c0,8.86875 -7.25625,16.125 -16.125,16.125z" fill="url(#color-8_Ya7GVcPz6Vqb_gr8)"></path><rect x="12" y="43" transform="scale(2.6875,2.6875)" width="15" height="2" fill="url(#color-9_Ya7GVcPz6Vqb_gr9)"></rect></g></g></svg>
</div>
<p class="no-margin fs-12">1688 Purchase Order</p>
</div>
</template>
</document-file-viewer-component>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" v-if="booking.documents.ecommerce_purchase_order && $store.getters.isAdmin && !booking.purchase_order">
<div class="col">
<a :href="route('ecommerce.fix', booking.marking)" target="_blank">
<div class="btn btn-danger">Fix 1688 PO</div>
</a>
</div>
</div>
<div class="row m-t-15 m-b-25" v-if="$store.getters.isAdmin && oneSixEightEightServiceIds.includes(booking.service.id) && booking.documents.ecommerce_purchase_order">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal" data-type="deletePo">Delete PO</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePo">
<delete-po-form-component :data="booking" :section="section" class="text-center"></delete-po-form-component>
</modal-component>
</div>
<div class="row m-b-25" v-if="$store.getters.isAdmin && oneSixEightEightServiceIds.includes(booking.service.id) && booking.status !== 3">
<div class="col">
<div class="row" v-if="!booking.documents.ecommerce_purchase_order">
<div class="col">
<!-- <upload-purchase-order-pdf-form-component :data="booking" :section="section"></upload-purchase-order-pdf-form-component> -->
<upload-purchase-order-pdf-v2-form-component :booking-id="booking.id" :section="section + 'PDFUpload2'"></upload-purchase-order-pdf-v2-form-component>
</div>
</div>
</div>
</div>
<purchase-order-form-component v-if="!oneSixEightEightServiceIds.includes(booking.service.id) || $store.getters.isAdmin || [199, 510].includes($store.getters.getCompanyId) || companySegmentIds.includes(24) || companySegmentIds.includes(36)" :data="booking" :section="section" :companySegmentIds="companySegmentIds"></purchase-order-form-component>
</div>
</div>
<div class="row m-t-15" v-if="booking.status === 3 && ($store.getters.isSuperAdmin || ($store.getters.isCustomer && $store.getters.getCompanyId === 199)) && !booking.einvoice">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="regenerateInvoices">Regenerate Invoices</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateInvoices">
<regenerate-booking-invoices-component :data="booking" :section="section" class="text-center"></regenerate-booking-invoices-component>
</modal-component>
</div>
<div class="row m-t-10" v-if="$store.getters.isSuperAdmin">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="deleteTransfer">Delete Transfer</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteTransfer">
<general-confirmation-form-component
contentText="Are you sure you want to delete this Order?"
modalType="delete"
class="text-center"
:apiRoute="route('api.booking.payment.expire', booking.id)"
apiMethod="post"
:section="section"
>
</general-confirmation-form-component>
</modal-component>
</div>
<div class="row m-t-15" v-if="$store.getters.isSuperAdmin && showGenerateEInvoiceRefundButton">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="regenerateEInvoiceRefund">Regenerate E-Invoice<br>(Refund)</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateEInvoiceRefund">
<regenerate-e-invoice-refund-component :data="booking" :section="section" class="text-center"></regenerate-e-invoice-refund-component>
</modal-component>
</div>
<div class="row m-t-15" v-if="booking.status === 3 && ($store.getters.isSuperAdmin || ($store.getters.isCustomer && $store.getters.getCompanyId === 199)) && booking.einvoice">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="regenerateEInvoice">Regenerate E-Invoice</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateEInvoice">
<regenerate-e-invoice-component :data="booking" :section="section" class="text-center"></regenerate-e-invoice-component>
</modal-component>
</div>
<div class="row m-t-15" v-if="booking.status === 2 && ($store.getters.isSuperAdmin) && this.$store.getters.getUserId && this.$store.getters.getUserId === 5436">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="regenerateEInvoice">Regenerate E-Inv (Try)</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateEInvoice">
<regenerate-e-invoice-try-component :data="booking" :section="section" class="text-center"></regenerate-e-invoice-try-component>
</modal-component>
</div>
<div class="row m-t-15" v-if="booking.status === 3 && ($store.getters.isSuperAdmin || ($store.getters.isCustomer && $store.getters.getCompanyId === 199)) && booking.einvoice">
<div class="col-sm col-md-auto">
<div class="btn btn-sm btn block all-caps b-rad-none btn-danger pointer requestModal equal-width-button" data-type="regenerateNormalInvoiceEInvoice">Regenerate Normal Inv</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="regenerateNormalInvoiceEInvoice">
<regenerate-normal-invoice-e-invoice-component :data="booking" :section="section" class="text-center"></regenerate-normal-invoice-e-invoice-component>
</modal-component>
</div>
</div>
<div class="col-12 col-sm-12 col-md-5 mt-3 mt-sm-0">
<!-- <booking-payment-quotation-component :data="booking" :section="section"></booking-payment-quotation-component> -->
<booking-payment-quotation-v2-component :data="booking" :section="section"></booking-payment-quotation-v2-component>
<div class="row m-t-20" v-if="booking.payment_attempts && booking.payment_attempts.length">
<div class="col">
<div class="row m-b-10">
<div class="col">
<div class="font-head fs-10 all-caps">Payment Bookings</div>
</div>
</div>
<div class="row ">
<div class="col">
<div class="row m-l-0 m-b-10 m-r-0 parentContainer" v-for="item in booking.payment_attempts" v-bind:key="item.id" >
<div class="col-auto bg-master-lighter requestModal pointer" data-type="deleteAttempt">
<div class="row align-items-center h-100">
<div class="col">
<i class="fa fa-times muted"></i>
</div>
</div>
</div>
<div class="col bg-white p-t-10 p-b-10 p-r-0">
<div class="row m-b-5">
<div class="col-auto">
<div class="font-heading fs-8 muted all-caps">Booked</div>
<div class="font-heading fs-10 bold">
{{item.original_currency.short_code}} {{(Math.round((item.original_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">Rate</div>
<div class="font-heading fs-10 bold">
{{(Math.round((item.currency_rate + Number.EPSILON) * 10000) / 10000).toFixed(5)}}
</div>
</div>
<div class="col-auto p-l-0">
<div class="font-heading fs-8 muted all-caps">Payable</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>
<div class="row">
<div class="col">
<div class="font-heading fs-10 text-danger">Expires On: {{item.expires_on}}</div>
</div>
</div>
</div>
<div class="col-auto p-l-5 p-r-5 bg-success pointer" v-if="item.payment_method === 5" @click="checkTransferRule(item)">
<a href="javascript:void(0);">
<div class="row align-items-center h-100">
<div class="col">
<i class="fa fa-repeat fs-20 text-white p-l-10 p-r-10"></i>
</div>
</div>
</a>
</div>
<div class="col-auto p-l-5 p-r-5 bg-success requestModal pointer" v-if="item.payment_method !== 5" data-type="paymentProofModal">
<div @click="selectedID(item.id)" class="row align-items-center h-100">
<div class="col">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="30" height="30"
viewBox="0 0 172 172"
style=" fill:#000000;"><defs><linearGradient x1="86" y1="70.76994" x2="86" y2="116.46013" gradientUnits="userSpaceOnUse" id="color-1_52139_gr1"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="61.8125" y1="34.48869" x2="61.8125" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-2_52139_gr2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="130.34375" y1="34.48869" x2="130.34375" y2="144.97181" gradientUnits="userSpaceOnUse" id="color-3_52139_gr3"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></stop></linearGradient><linearGradient x1="86" y1="32.25" x2="86" y2="148.71013" gradientUnits="userSpaceOnUse" id="color-4_52139_gr4"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#ffffff"></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="M102.45825,99.43213h-5.70825c-1.4835,0 -2.6875,1.16637 -2.6875,2.65256v8.10013c0,1.48081 -1.19862,2.68481 -2.67944,2.68481h-10.76612c-1.48081,0 -2.67944,-1.204 -2.67944,-2.68481v-8.10013c0,-1.48619 -1.204,-2.65256 -2.6875,-2.65256h-5.70825c-1.93769,0 -3.04225,-2.39188 -1.88125,-4.05275l14.577,-20.855c1.8275,-2.61494 5.69481,-2.61763 7.52231,-0.00538l14.577,20.86306c1.16369,1.66088 0.05644,4.05006 -1.87856,4.05006z" fill="url(#color-1_52139_gr1)"></path><path d="M51.0625,67.1875h5.375c0,-8.0625 7.23206,-16.12231 16.125,-16.12231v-5.375c-11.85456,0 -21.5,10.74731 -21.5,21.49731z" fill="url(#color-2_52139_gr2)"></path><path d="M139.75,80.625c0,-10.75 -8.44144,-18.80981 -18.8125,-18.80981v5.375c7.40944,0 13.4375,5.37231 13.4375,13.43481z" fill="url(#color-3_52139_gr3)"></path><path d="M148.09738,92.27263c1.59369,-3.68188 2.40263,-7.59219 2.40263,-11.64494c0,-16.29969 -13.26281,-29.5625 -29.5625,-29.5625c-6.5145,0 -12.68769,2.08819 -17.78588,5.96088c-4.30269,-13.03438 -16.52006,-22.08587 -30.58912,-22.08587c-17.78319,0 -32.25,14.46681 -32.25,32.25c0,4.14681 0.16662,8.05981 1.42437,10.74731h-1.42437c-13.33806,0 -24.1875,10.84944 -24.1875,24.1875c0,11.56431 8.16194,21.24737 19.0275,23.62044c1.02394,6.39894 6.53869,11.31706 13.2225,11.31706h56.4375h16.125h5.375c6.54944,0 12.00238,-4.71388 13.18488,-10.92469c9.2235,-1.20131 16.37762,-9.08913 16.37762,-18.63513c0,-6.09256 -2.924,-11.72019 -7.77762,-15.23006zM126.3125,131.6875h-5.375h-16.125h-56.4375c-3.49912,0 -6.45538,-2.6875 -7.568,-5.375h93.0735c-1.11263,2.6875 -4.06888,5.375 -7.568,5.375zM137.0625,120.9375h-96.75c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125h9.51375l-1.68506,-3.78131c-2.23063,-5.01488 -2.45369,-7.48737 -2.45369,-12.341c0,-14.81888 12.05613,-26.875 26.875,-26.875c13.01825,0 24.13106,9.29875 26.42619,22.11275l0.92719,5.17075l3.64962,-3.77325c4.60638,-4.76225 10.77687,-7.38525 17.372,-7.38525c13.33806,0 24.1875,10.84944 24.1875,24.1875c0,3.6765 -0.81431,7.21056 -2.37575,10.41944l-1.763,3.32713l2.37037,1.26044c4.40481,2.34081 7.14338,6.88806 7.14338,11.868c0,7.40944 -6.02806,13.43481 -13.4375,13.43481z" fill="url(#color-4_52139_gr4)"></path></g></g></svg>
</div>
</div>
</div>
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAttempt">
<delete-payment-attempt-form-component :data="item" :section="section" class="text-center"></delete-payment-attempt-form-component>
</modal-component>
<modal-component type="paymentProofModal">
<payment-verification-form-component v-if="selected_id == item.id" :section="section" :id="booking.id" :data="item"></payment-verification-form-component>
</modal-component>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-20" v-if="booking.expired_payment_attempts && booking.expired_payment_attempts.length">
<div class="col">
<div class="row m-b-10">
<div class="col">
<div class="font-head fs-10 all-caps">Expired Payment Bookings</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row m-l-0 m-b-10 m-r-0 " v-for="item in booking.expired_payment_attempts" v-bind:key="item.id" >
<div class="col-auto bg-danger">
<div class="row align-items-center h-100">
<div class="col">
<i class="fa fa-exclamation text-white fs-18"></i>
</div>
</div>
</div>
<div class="col bg-danger-light p-t-10 p-b-10 p-r-0">
<div class="row m-b-5">
<div class="col-auto">
<div class="font-heading fs-8 text-white all-caps">Booked</div>
<div class="font-heading fs-10 text-white bold">
{{item.original_currency.short_code}} {{(Math.round((item.original_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 text-white all-caps">Rate</div>
<div class="font-heading fs-10 text-white bold">
{{(Math.round((item.currency_rate + Number.EPSILON) * 10000) / 10000).toFixed(5)}}
</div>
</div>
<div class="col-auto p-l-0">
<div class="font-heading fs-8 text-white all-caps">Payable</div>
<div class="font-heading fs-10 text-white 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>
<div class="row">
<div class="col">
<div class="font-heading fs-10 text-white">Expired On: {{item.expires_on}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-20" v-if="booking.payment_history && booking.payment_history.length">
<div class="col">
<div class="row m-b-10">
<div class="col">
<div class="font-head fs-10 all-caps">Payment History</div>
</div>
<div class="col-auto">
<div class="font-head fs-10 all-caps">of {{booking.marking}}</div>
</div>
</div>
<div class="row ">
<div class="col">
<payment-history-component v-for="item in booking.payment_history" v-bind:key="item.id" :data="item" :booking="booking" ></payment-history-component>
</div>
</div>
</div>
</div>
<div class="col" v-if="booking.payment_history && booking.payment_history.length">
<div class="alert alert-danger padding-15" role="alert">
<div class="row">
<div class="col">
<div class="font-heading fs-10">Please contact CIEF if the supplier hasn’t received the funds within 14 working days; otherwise, the dispute request may no longer be traceable.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-15" v-if="$store.getters.isAdmin">
<div class="col">
<div class="btn btn-xs all-caps b-rad-none btn-warning pointer requestModal equal-width-button" data-type="changeBookingOwner">Change Booking Owner</div>
<modal-component type="changeBookingOwner">
<change-booking-owner-form-component :data="booking" :section="section" class="text-center"></change-booking-owner-form-component>
</modal-component>
</div>
</div>
</div>
<div class="col col-sm-12 col-md-3">
<wallet-component class="m-b-20" :data="booking.company"></wallet-component>
<verification-warning-component :data="booking.company"></verification-warning-component>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
marking: {
type: Number,
required: true
}
},
data(){
return {
section: 'bookingDetailSection',
selected_id: '',
addressEdit: false,
isLoading: true,
booking: null,
attention: false,
bearShowing: false,
oneSixEightEightServiceIds: [4, 10],
parameters: {},
locked: true,
lockInitialized: false,
}
},
computed: {
pendingQueue () {
return this.$store.getters.isInCompleteQueue(this.section);
},
transactionsComplete() {
let complete = true;
this.booking.payment_history.forEach(function(payment){
if(payment.status === 2){
complete = false
}
});
return complete;
},
companySegmentIds() {
return this.booking.company.segments.map(obj => parseInt(obj.id));
},
invoiceInfo() {
const company = this.booking.company;
if (company.e_invoice) {
return company.tin ? company.tin : 'INCOMPLETE E-INVOICE INFO';
}
return 'NOT PROVIDED';
},
showDownloadPDFButtons(){
const condition1 = !(this.booking.amount === 0 && this.booking.outstanding_amount === 0 && this.booking.paid_amount === 0);
const isBookingWithFullRefund = this.booking.payment_history.some(payment =>
payment.status === 7 && this.booking.amount === payment.refunded_amount
);
return condition1 || isBookingWithFullRefund;
},
showGenerateEInvoiceRefundButton(){
const condition1 = this.booking.amount === 0 && this.booking.outstanding_amount === 0 && this.booking.paid_amount === 0
&& this.$store.getters.isSuperAdmin && this.booking.einvoice;
const isBookingWithFullRefund = this.booking.payment_history.some(payment =>
payment.status === 7 && this.booking.amount === payment.refunded_amount
);
return condition1 || isBookingWithFullRefund;
},
isBookingWithAFullRefund(){
const isBookingWithFullRefund = this.booking.payment_history.some(payment =>
payment.status === 7 && this.booking.amount === payment.refunded_amount
);
return isBookingWithFullRefund;
}
},
watch: {
pendingQueue(inComplete){
if(inComplete){
this.fetchBooking();
}
}
},
created(){
this.$store.dispatch('updateListQueue', {'name': this.section});
},
methods: {
fetchBooking(){
this.isLoading = true;
this.submit(route('api.booking.show', this.marking), 'get', this.section, false, false)
},
successHandler(response, section, payload){
if(section === this.section + 'CheckTransferRule'){
window.location.href = route('billplz.bill', payload.payment_reference);
}
else if(section === this.section + 'Lock'){
this.locked = true;
}
else if(section === this.section)
{
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
this.isLoading = false;
this.booking = response.payload.data;
}
},
errorHandler(response, statusCode, section){
if(section === this.section + 'CheckTransferRule' && statusCode === 422){
console.log('Transfer expired, please create new transfer');
}
else if(section === this.section){
window.location.href = this.route('dashboard');
}
},
updateDefaultAddress(){
this.addressEdit = false;
this.fetchBooking();
},
selectedID(id){
this.selected_id = id;
},
checkTransferRule(item){
this.parameters = {
booking_id: item.booking.id,
company_id: item.booking.company.id,
payment_reference: item.payment_reference,
};
this.submit(route('api.rule.check.transfer'), 'post', this.section + 'CheckTransferRule', false, true);
},
initializeLock(state) {
this.lockInitialized = true;
this.locked = state;
},
lock(state){
this.lockInitialized = true;
this.parameters = {
booking_id: this.booking.id,
};
if(state){
this.submit(
route("api.booking.create.lock"),
"post",
this.section + 'Lock',
true,
false
);
}
else{
this.locked = false;
}
}
}
}
</script>
<style scoped>
.equal-width-button {
min-width: 200px;
display: inline-block;
text-align: center;
}
.disabled-block {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
</style>
Reference in New Issue View Git Blame Copy Permalink