mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
omair saleh
571 lines
61 KiB
Vue
571 lines
61 KiB
Vue
<template>
|
|
<div class="row no-margin">
|
|
<div class="col">
|
|
<div class="row m-b-20 ">
|
|
<div class="col b-a b-grey padding-15">
|
|
<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': data.outstanding_amount > 0}, {'animate__pulse': data.outstanding_amount > 0}, {'bg-success': !data.outstanding_amount > 0}]"><span v-if="data.status !==3">3</span><i class='fa fa-check' v-if="data.status ===3"></i></div></div>
|
|
<div class="col">
|
|
<div class="fs-14 bold all-caps" :class="[{'text-success': !data.outstanding_amount > 0}]">Make full payment</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10 align-items-center">
|
|
<div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="flag-icon fs-20" :class="'flag-icon-'+data.conversion_currency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 bold">{{this.data.conversion_currency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto no-padding" style="margin-left: -8px;margin-right: -8px;z-index: 1;">
|
|
<i class="fa fa-exchange text-master-lighter fs-20"></i>
|
|
</div>
|
|
<div class="col-auto bg-white p-t-10 p-b-5 p-l-20 p-r-20 text-center">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="flag-icon fs-20" :class="'flag-icon-'+data.convertible_currency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 bold">{{this.data.convertible_currency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center m-b-15 parentContainer bg-master-lighter p-t-10 p-b-10">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 muted">Recipient Bank Details</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="padding-5 bg-master-light">
|
|
<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="38.97413" x2="86" y2="57.78663" gradientUnits="userSpaceOnUse" id="color-1_77055_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="129" y1="77.49138" x2="129" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-2_77055_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="43" y1="77.49138" x2="43" y2="121.38631" gradientUnits="userSpaceOnUse" id="color-3_77055_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="64.94881" x2="86" y2="133.92888" gradientUnits="userSpaceOnUse" id="color-4_77055_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.11963" x2="86" y2="155.875" gradientUnits="userSpaceOnUse" id="color-5_77055_gr5"><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,40.31787c-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_77055_gr1)"></path><path d="M126.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-2_77055_gr2)"></path><path d="M40.3125,80.625h5.375v37.625h-5.375z" fill="url(#color-3_77055_gr3)"></path><path d="M56.4375,69.875v59.125h59.125v-59.125zM99.4375,88.6875h-21.5v8.0625h16.125c2.96431,0 5.375,2.41069 5.375,5.375v8.0625c0,2.96431 -2.41069,5.375 -5.375,5.375h-5.375v5.375h-5.375v-5.375h-10.75v-5.375h21.5v-8.0625h-16.125c-2.96431,0 -5.375,-2.41069 -5.375,-5.375v-8.0625c0,-2.96431 2.41069,-5.375 5.375,-5.375h5.375v-5.375h5.375v5.375h10.75z" fill="url(#color-4_77055_gr4)"></path><path d="M86,59.125c-5.92862,0 -10.75,-4.82138 -10.75,-10.75c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,5.92862 -4.82137,10.75 -10.75,10.75zM86,43c-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.41069,-5.375 -5.375,-5.375zM108.84375,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM108.84375,49.71606v0.00269zM63.15625,53.75c-2.22256,0 -4.03125,-1.80869 -4.03125,-4.03125c0,-2.22256 1.80869,-4.03125 4.03125,-4.03125c2.22256,0 4.03125,1.80869 4.03125,4.03125c0,2.22256 -1.80869,4.03125 -4.03125,4.03125zM63.15625,49.71606v0.00269zM150.5,69.875c2.96431,0 5.375,-2.39456 5.375,-5.34544v-1.29806c0,-1.72269 -0.84119,-3.34862 -2.30319,-4.39138l-60.03069,-40.40925c-4.58219,-3.08256 -10.49737,-3.08256 -15.07956,0l-60.08981,40.44956c-1.40825,1.00244 -2.24675,2.62838 -2.24675,4.35106v1.29806c0,2.95088 2.41069,5.34544 5.375,5.34544h8.0625v59.13037c-4.44513,0 -8.0625,3.61738 -8.0625,8.0625v3.182c-3.12019,1.11531 -5.375,4.06888 -5.375,7.568v8.05713h139.75v-8.05712c0,-3.49913 -2.25481,-6.45269 -5.375,-7.568v-3.182c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625v-59.13038zM150.5,147.81788v2.68212h-129v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h123.625c1.4835,0 2.6875,1.20937 2.6875,2.69288zM145.125,137.06788v2.68212h-118.25v-2.68212c0,-1.4835 1.204,-2.69288 2.6875,-2.69288h26.875h16.125h26.875h16.125h26.875c1.4835,0 2.6875,1.20937 2.6875,2.69288zM51.0625,80.625v37.625h-16.125v-37.625zM34.9375,75.25v-5.375h16.125v5.375zM51.0625,123.625v5.375h-16.125v-5.375zM56.4375,129v-59.125h5.375h10.75h5.375h16.125h5.375h5.375h10.75v59.125h-10.75h-5.375h-5.375h-16.125h-5.375h-10.75zM137.0625,80.625v37.625h-16.125v-37.625zM120.9375,75.25v-5.375h16.125v5.375zM137.0625,123.625v5.375h-16.125v-5.375zM115.5625,64.5h-16.125h-26.875v0.0215l-16.125,0.00269v-0.02419h-26.875h-8.0625l-0.06719,-1.21475l60.03069,-40.40387c1.376,-0.92987 2.95625,-1.38944 4.5365,-1.38944c1.58025,0 3.1605,0.46494 4.5365,1.39481l59.9635,40.33938l0.00806,1.27388c0,0 -0.00269,0 -0.00806,0h-8.0625z" fill="url(#color-5_77055_gr5)"></path></g></g></svg>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col-auto p-r-10">
|
|
<div class="font-heading fs-12">{{item.bank.holder_name}} <span class="text-complete m-l-5 bold">{{item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto p-r-10">
|
|
<div class="font-heading fs-10 small">{{item.bank.bank_name}} <span class="m-l-5">({{item.bank.bank_branch}})</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col bg-white padding-15">
|
|
<div class="row" v-if="!expandPayment">
|
|
<div class="col">
|
|
<div class="row align-items-end m-b-10 text-complete">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Transfer Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12"><i class="fa fa-edit fs-12 pointer fa-fw requestModal" data-type="editBookingAmount" v-if="$store.getters.isSuperAdmin"></i> {{this.data.fixed_currency.short_code}} {{(Math.round((this.data.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editBookingAmount">
|
|
<edit-booking-amount-form-component :data="this.data" :section="section"></edit-booking-amount-form-component>
|
|
</modal-component>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-success">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Paid Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.paid_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 ">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Floating Amount:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.floating_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end bold text-danger">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">OutStanding Total:</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">{{this.data.fixed_currency.short_code}} {{(Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20" v-if="data.company.employee.status === 2 && data.company.status === 2 && data.outstanding_amount > 0">
|
|
<div class="col">
|
|
<button class="btn btn-sm all-caps b-rad-none btn-success btn-block" @click="makePayment()">Make Payment</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="expandPayment && !calculation">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
|
<div class="col">
|
|
<small class="bold fs-10 text-danger">{{error}}</small>
|
|
</div>
|
|
</div>
|
|
<div class="row hide">
|
|
<div class="col-8">
|
|
<div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
|
|
<div class="row">
|
|
<div class="col p-t-10 p-b-10">
|
|
{{paymentMethod.name}}
|
|
</div>
|
|
<div class="col-auto bg-complete-light">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">Bank Transfer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">Cash Deposit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">Cheque</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">Banker's Acceptance</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">Online Transfer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-r-0 m-b-15">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.amount">
|
|
<label>Amount</label>
|
|
<input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-auto b-r b-t b-b b-grey">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10 muted">{{this.data.fixed_currency.short_code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row p-l-15 p-r-15">
|
|
<div class="col m-r-5 text-center">
|
|
<div class="row h-100">
|
|
<div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Online Transfer', 'text-primary': paymentMethod.name === 'Online Transfer', 'b-grey': paymentMethod.name !== 'Online Transfer' }" @click="updatePaymentType({name: 'Online Transfer', id: 'payment_gateway'})">
|
|
<div class="m-b-15 m-t-10 text-center">
|
|
<img src="/images/fpx-logo-vector-01.png" alt="logo" height="25">
|
|
</div>
|
|
<p class="no-margin bold all-caps">Online Banking</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col m-l-5 text-center">
|
|
<div class="row h-100">
|
|
<div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Wallet', 'text-primary': paymentMethod.name === 'Wallet', 'b-grey': paymentMethod.name !== 'Wallet' }" @click="updatePaymentType({name: 'Wallet', id: 'wallet'})">
|
|
<div class="m-b-10 text-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="40" height="40"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="47.41556" y1="114.21875" x2="47.41556" y2="136.68625" gradientUnits="userSpaceOnUse" id="color-1_DGsE9caX0XGr_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="21.78488" x2="86" y2="154.10125" gradientUnits="userSpaceOnUse" id="color-2_DGsE9caX0XGr_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="111.53125" y1="27.50388" x2="111.53125" y2="49.92569" gradientUnits="userSpaceOnUse" id="color-3_DGsE9caX0XGr_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="54.32244" x2="63.15625" y2="64.45969" gradientUnits="userSpaceOnUse" id="color-4_DGsE9caX0XGr_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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_2"><path d="M55.9,134.375h-15.5875c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-15.5875c0,-1.075 1.34375,-1.88125 2.41875,-1.075l16.93125,16.93125c0.80625,1.075 0,2.41875 -1.075,2.41875z" fill="url(#color-1_DGsE9caX0XGr_gr1)"></path><path d="M150.5,96.75v-37.625c0,-5.9125 -4.8375,-10.75 -10.75,-10.75h-7.525c1.34375,-2.95625 2.15,-6.18125 2.15,-9.40625c0,-12.63125 -10.2125,-22.84375 -22.84375,-22.84375c-12.63125,0 -22.84375,10.2125 -22.84375,22.84375c0,3.225 0.80625,6.45 2.15,9.40625h-12.9c-4.03125,-3.225 -9.1375,-5.375 -14.78125,-5.375c-5.64375,0 -10.75,2.15 -14.78125,5.375h-21.5c-2.95625,0 -5.64375,1.34375 -7.79375,3.225c-1.88125,2.15 -2.95625,4.8375 -2.95625,7.525v0v83.3125c0,7.525 5.9125,13.4375 13.4375,13.4375h107.5c7.525,0 13.4375,-5.9125 13.4375,-13.4375v-18.8125c2.95625,0 5.375,-2.41875 5.375,-5.375v-16.125c0,-2.95625 -2.41875,-5.375 -5.375,-5.375zM111.53125,21.5c9.675,0 17.46875,7.79375 17.46875,17.46875c0,9.675 -7.79375,17.46875 -17.46875,17.46875c-9.675,0 -17.46875,-7.79375 -17.46875,-17.46875c0,-9.675 7.79375,-17.46875 17.46875,-17.46875zM111.53125,61.8125c6.9875,0 13.16875,-3.225 17.46875,-8.0625h10.75c2.95625,0 5.375,2.41875 5.375,5.375v8.0625c-2.15,-1.6125 -5.10625,-2.6875 -8.0625,-2.6875h-51.0625c-0.26875,-4.03125 -1.34375,-7.525 -3.49375,-10.75h11.55625c4.3,4.8375 10.48125,8.0625 17.46875,8.0625zM80.625,64.5h-34.9375c0.80625,-9.1375 8.33125,-16.125 17.46875,-16.125c9.1375,0 16.6625,6.9875 17.46875,16.125zM23.1125,55.3625c0.80625,-1.075 2.15,-1.6125 3.7625,-1.6125h16.93125c-1.88125,3.225 -3.225,6.71875 -3.49375,10.75h-13.16875c-2.95625,0 -5.375,-2.15 -5.64375,-5.10625c0,-1.34375 0.5375,-2.95625 1.6125,-4.03125zM145.125,142.4375c0,4.56875 -3.49375,8.0625 -8.0625,8.0625h-107.5c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625v-74.175c1.6125,1.075 3.7625,1.6125 5.9125,1.6125h13.16875h42.73125h53.75c4.56875,0 8.0625,3.49375 8.0625,8.0625v18.8125h-5.375v-13.4375c0,-4.56875 -3.49375,-8.0625 -8.0625,-8.0625h-96.75c-4.56875,0 -8.0625,3.49375 -8.0625,8.0625v53.75c0,4.56875 3.49375,8.0625 8.0625,8.0625h96.75c4.56875,0 8.0625,-3.49375 8.0625,-8.0625v-13.4375h5.375zM120.9375,96.75c-7.525,0 -13.4375,5.9125 -13.4375,13.4375c0,7.525 5.9125,13.4375 13.4375,13.4375h13.4375v13.4375c0,1.6125 -1.075,2.6875 -2.6875,2.6875h-96.75c-1.6125,0 -2.6875,-1.075 -2.6875,-2.6875v-53.75c0,-1.6125 1.075,-2.6875 2.6875,-2.6875h96.75c1.6125,0 2.6875,1.075 2.6875,2.6875v13.4375zM129,110.1875c0,4.56875 -3.49375,8.0625 -8.0625,8.0625c-4.56875,0 -8.0625,-3.49375 -8.0625,-8.0625c0,-4.56875 3.49375,-8.0625 8.0625,-8.0625c4.56875,0 8.0625,3.49375 8.0625,8.0625zM131.6875,118.25c1.6125,-2.15 2.6875,-5.10625 2.6875,-8.0625c0,-2.95625 -1.075,-5.9125 -2.6875,-8.0625h18.8125v16.125z" fill="url(#color-2_DGsE9caX0XGr_gr2)"></path><circle cx="41.5" cy="14.5" transform="scale(2.6875,2.6875)" r="4.5" fill="url(#color-3_DGsE9caX0XGr_gr3)"></circle><path d="M74.98125,64.5c-0.80625,-5.9125 -5.64375,-10.75 -11.825,-10.75c-6.18125,0 -11.2875,4.8375 -11.825,10.75z" fill="url(#color-4_DGsE9caX0XGr_gr4)"></path></g></g></svg>
|
|
</div>
|
|
<p class="no-margin bold all-caps">Wallet Credit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-10 m-b-10">
|
|
<div class="col text-center"><div class="padding-10 bg-master-lightest pointer" @click="$store.dispatch('toggleSection', {name: 'otherPaymentMethods', status: !$store.getters.isShowing('otherPaymentMethods')})"><i class="fa m-r-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i>{{$store.getters.isShowing('otherPaymentMethods') ? 'Hide' : 'Show'}} Alternative Methods <i class="fa m-l-10" :class="[{'fa-angle-up': $store.getters.isShowing('otherPaymentMethods')}, {'fa-angle-down': !$store.getters.isShowing('otherPaymentMethods')}]"></i></div></div>
|
|
</div>
|
|
<div class="row" v-show="$store.getters.isShowing('otherPaymentMethods')">
|
|
<div class="col">
|
|
<div class="row m-b-10 p-l-15 p-r-15">
|
|
<div class="col text-center m-r-5">
|
|
<div class="row h-100">
|
|
<div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Cash Deposit', 'text-primary': paymentMethod.name === 'Cash Deposit', 'b-grey': paymentMethod.name !== 'Cash Deposit' }" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
|
|
<div class="m-b-5 text-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="35" height="35"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.45313" x2="86" y2="157.24562" gradientUnits="userSpaceOnUse" id="color-1_46094_gr1"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="62.14844" x2="86" y2="87.68238" gradientUnits="userSpaceOnUse" id="color-2_46094_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></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="M142.4375,26.875h-18.8125v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-64.5c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375h-18.8125c-4.44513,0 -8.0625,3.61737 -8.0625,8.0625v86c0,4.44512 3.61737,8.0625 8.0625,8.0625h40.3125v10.75h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v2.6875h-10.75v5.375h10.75h69.875h10.75v-5.375h-10.75v-2.6875c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-10.75v-10.75h40.3125c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-86c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM123.625,96.75v-53.75h10.75v64.5h-96.75v-64.5h10.75v53.75zM107.5,91.375h-43v-48.64644c5.25675,-1.06962 9.40894,-5.22181 10.47856,-10.47856h22.04019c1.06963,5.25675 5.22181,9.40894 10.47856,10.47856v48.64644zM53.75,21.5h64.5v69.875h-5.375v-53.75h-2.6875c-4.44512,0 -8.0625,-3.61738 -8.0625,-8.0625v-2.6875h-32.25v2.6875c0,4.44512 -3.61737,8.0625 -8.0625,8.0625h-2.6875v53.75h-5.375zM112.875,145.125c1.4835,0 2.6875,1.204 2.6875,2.6875v2.6875h-59.125v-2.6875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75h32.25zM96.75,139.75h-21.5v-10.75h21.5zM145.125,120.9375c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-40.3125h-32.25h-40.3125c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-86c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h18.8125v5.375h-10.75c-2.96431,0 -5.375,2.41069 -5.375,5.375v64.5c0,2.96431 2.41069,5.375 5.375,5.375h96.75c2.96431,0 5.375,-2.41069 5.375,-5.375v-64.5c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-10.75v-5.375h18.8125c1.4835,0 2.6875,1.204 2.6875,2.6875z" fill="url(#color-1_46094_gr1)"></path><path d="M86,64.5c-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-2_46094_gr2)"></path></g></g></svg>
|
|
</div>
|
|
<p class="no-margin bold">Manual Transfer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col text-center m-l-5">
|
|
<div class="row h-100">
|
|
<div class="col b-a padding-10 pointer" :class="{ 'b-primary': paymentMethod.name === 'Cheque', 'text-primary': paymentMethod.name === 'Cheque', 'b-grey': paymentMethod.name !== 'Cheque' }" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
|
|
<div class="m-b-5 text-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="35" height="35"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><defs><linearGradient x1="43" y1="68.19531" x2="43" y2="82.97656" gradientUnits="userSpaceOnUse" id="color-1_46095_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="31.91406" x2="86" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-2_46095_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="31.91406" x2="45.6875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-3_46095_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="43" y1="31.91406" x2="43" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-4_46095_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="59.125" y1="31.91406" x2="59.125" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-5_46095_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="26.875" y1="31.91406" x2="26.875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-6_46095_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="37.625" y1="31.91406" x2="37.625" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-7_46095_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="48.375" y1="31.91406" x2="48.375" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-8_46095_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="104.8125" y1="31.91406" x2="104.8125" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-9_46095_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="31.91406" x2="69.875" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-10_46095_gr10"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="118.25" y1="31.91406" x2="118.25" y2="141.80863" gradientUnits="userSpaceOnUse" id="color-11_46095_gr11"><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="M61.8125,80.625h-37.625v-8.1055c0,-1.45931 1.18519,-2.6445 2.6445,-2.6445h32.33331c1.462,0 2.64719,1.18519 2.64719,2.6445z" fill="url(#color-1_46095_gr1)"></path><path d="M155.875,59.125h-18.8125v-18.8125c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-112.875c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v64.5c0,4.44512 3.61738,8.0625 8.0625,8.0625h18.8125v18.8125c0,4.44512 3.61738,8.0625 8.0625,8.0625h112.875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-64.5c0,-4.44512 -3.61737,-8.0625 -8.0625,-8.0625zM13.4375,104.8125v-64.5c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h112.875c1.48081,0 2.6875,1.20669 2.6875,2.6875v64.5c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-112.875c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875zM158.5625,131.6875c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-112.875c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-18.8125h88.6875c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-40.3125h18.8125c1.48081,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-2_46095_gr2)"></path><path d="M24.1875,48.375h43v5.375h-43z" fill="url(#color-3_46095_gr3)"></path><path d="M24.1875,59.125h37.625v5.375h-37.625z" fill="url(#color-4_46095_gr4)"></path><path d="M56.4375,86h5.375v10.75h-5.375z" fill="url(#color-5_46095_gr5)"></path><path d="M24.1875,86h5.375v10.75h-5.375z" fill="url(#color-6_46095_gr6)"></path><path d="M34.9375,86h5.375v10.75h-5.375z" fill="url(#color-7_46095_gr7)"></path><path d="M45.6875,86h5.375v10.75h-5.375z" fill="url(#color-8_46095_gr8)"></path><path d="M107.5,48.375h-5.375v5.375h-5.375c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v5.375c0,4.44513 3.61738,8.0625 8.0625,8.0625h16.125c1.48081,0 2.6875,1.20669 2.6875,2.6875v5.375c0,1.48081 -1.20669,2.6875 -2.6875,2.6875h-24.1875v5.375h13.4375v5.375h5.375v-5.375h5.375c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-5.375c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-16.125c-1.48081,0 -2.6875,-1.20669 -2.6875,-2.6875v-5.375c0,-1.48081 1.20669,-2.6875 2.6875,-2.6875h24.1875v-5.375h-13.4375z" fill="url(#color-9_46095_gr9)"></path><path d="M51.0625,120.9375h37.625v5.375h-37.625z" fill="url(#color-10_46095_gr10)"></path><path d="M99.4375,120.9375h37.625v5.375h-37.625z" fill="url(#color-11_46095_gr11)"></path></g></g></svg>
|
|
</div>
|
|
<p class="no-margin bold">Cheque</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--paymentMethod.name === 'Online Transfer'-->
|
|
<div class="row" v-if="false">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<small class="fs-8 muted all-caps">Personal Account Banks</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.id === 'MBBEMYKL'}]" @click="selectOnlinePaymentBank('MBBEMYKL')">
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png">
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<p class="no-margin lh-25">Maybank2u</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.id === 'CIBBMYKL'}]" @click="selectOnlinePaymentBank('CIBBMYKL')">
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png">
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<p class="no-margin lh-25">CimbClicks</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<small class="fs-8 muted all-caps">Business Account Banks</small>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.id === 'MBB0227'}]" @click="selectOnlinePaymentBank('MBB0227')">
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png">
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<p class="no-margin lh-25">Maybank2E</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.id === 'B2B1-BCBB0235'}]" @click="selectOnlinePaymentBank('B2B1-BCBB0235')">
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png">
|
|
</div>
|
|
<div class="col p-l-5">
|
|
<p class="no-margin lh-25">BizChannel</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row m-t-10">
|
|
<div class="col">
|
|
<div class="row">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4 p-r-0">
|
|
<button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="expandPayment = false">Cancel</button>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': paymentMethod.name === ''}]" @click="submitForm()">Create Booking</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="calculation">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row align-items-end m-b-20 text-danger" v-if="(data.amount - parseFloat(amount.replace(',', '')))">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10">Outstanding</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-10">{{this.data.fixed_currency.short_code}} {{(Math.round(((this.data.outstanding_amount - parseFloat(amount.replace(',', '')))+ Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 text-success bold">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Recipient Gets</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">{{this.data.convertible_currency.short_code}} {{(Math.round((calculation.foreign_total + Number.EPSILON) * 100) / 100).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-12">Rate</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12 ">{{(Math.round((calculation.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-12">You are sending</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((calculation.local_total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-10 hint-text">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Transfer Charges</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end m-b-20 ">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Sub Total</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((calculation.sub_total + 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-12">Tax {{(Math.round((calculation.tax + Number.EPSILON) * 10) / 10).toFixed(1)}}%</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-12">MYR {{(Math.round((calculation.tax_total + 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-12">You are paying</div>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<div class="font-heading fs-14">MYR {{(Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="paymentMethod.id === 'wallet'">
|
|
<div class="col">
|
|
<div class="row m-b-10 m-l-0 m-r-0" v-if="data.company.wallet.amount < (Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)">
|
|
<div class="col bg-danger-lighter">
|
|
<h6 class="text-danger fs-14 m-b-0">You don't have sufficient credit in your wallet to complete this transaction. Please Reload your wallet.</h6>
|
|
<p class="text-complete fs-12 text-underline pointer" @click="calculation = ''">change the payment method?</p>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20" v-if="data.company.wallet.amount < (Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)">
|
|
<div class="col">
|
|
<wallet-component :data="data.company" :amount="(Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)"></wallet-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row parentContainer" >
|
|
<div class="col-4 p-r-0">
|
|
<button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" @click="cancelQuotation()">Cancel</button>
|
|
</div>
|
|
<div class="col p-l-0" >
|
|
<button class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" v-if="!(paymentMethod.id === 'wallet' && data.company.wallet.amount < (Math.round((calculation.total + Number.EPSILON) * 100) / 100).toFixed(2))">Lock Booking</button>
|
|
</div>
|
|
<modal-component v-if="calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
|
|
<confirm-quotation-form-component v-on:cancelQuotation="cancelQuotation()" :calculation="calculation" :section="section" :id="item.id" :payment_method="paymentMethod.id" :bank_code="onlinePayment.id" :amount="amount"></confirm-quotation-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import componentHandler from "../../../general/mixins/componentHandler";
|
|
import { required, requiredIf, minValue, maxValue} from "vuelidate/lib/validators";
|
|
import {VMoney} from 'v-money'
|
|
export default {
|
|
props : {
|
|
section: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
error: '',
|
|
expandPayment: false,
|
|
paymentMethod: {
|
|
name: '',
|
|
id: '',
|
|
status: false
|
|
},
|
|
onlinePayment: {
|
|
id: '',
|
|
status: false
|
|
},
|
|
amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
|
|
calculation: null
|
|
}
|
|
},
|
|
validations () {
|
|
return {
|
|
amount: {
|
|
required,
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
updatePaymentType(payment){
|
|
this.paymentMethod = {
|
|
name: payment.name,
|
|
id: payment.id,
|
|
status: false,
|
|
}
|
|
this.error = '';
|
|
},
|
|
selectOnlinePaymentBank(bankCode){
|
|
this.onlinePayment = {
|
|
id: bankCode,
|
|
status: true,
|
|
}
|
|
|
|
},
|
|
submitForm(){
|
|
this.parameters = {
|
|
payment_method: this.paymentMethod.id,
|
|
amount: this.amount
|
|
};
|
|
|
|
this.submit(route('api.booking.payment.quotation', this.item.id), 'post', this.section, false, false)
|
|
this.calculation = null;
|
|
},
|
|
successHandler(response){
|
|
this.calculation = response.payload.data;
|
|
},
|
|
errorHandler(error) {
|
|
this.error = error.message;
|
|
},
|
|
makePayment(){
|
|
this.amount = (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2);
|
|
this.expandPayment = true;
|
|
|
|
},
|
|
cancelQuotation(){
|
|
this.calculation = null;
|
|
this.expandPayment = false;
|
|
}
|
|
},
|
|
mixins: [componentHandler],
|
|
directives: {money: VMoney}
|
|
}
|
|
</script> |