mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Jia Sheng
718 lines
83 KiB
Vue
718 lines
83 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" v-if="false">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 muted">
|
|
{{ !item.purchase_order ? 'Please fill up purchase order to enjoy the cashback' : 'You have entitled to earn cashbback' }}
|
|
</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">
|
|
<img v-if="item.service.id === 4" src="/images/1688_logo.png" alt="" width="40">
|
|
<img v-else-if="item.service.id === 11" src="/images/alipay_logo.png" alt="" width="40">
|
|
<div v-else 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">{{[3, 4].includes(item.bank.type) ? item.bank.account_no : item.bank.account_no.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim()}}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="![3, 4].includes(item.bank.type)">
|
|
<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> <span class="m-l-5">({{item.bank.swift}})</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 || ($store.getters.isCustomer && $store.getters.getCompanyId === 199)"></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 id="payment-btn" 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 m-r-0 m-b-5" v-show="showApplyVoucher">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.amount">
|
|
<div class="row" style="padding-bottom: 3px;">
|
|
<div class="col">
|
|
<label>Enter Voucher</label>
|
|
<input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
|
|
</div>
|
|
<div class="col-auto p-l-0 p-r-0">
|
|
<div class="col-auto p-0 h-100">
|
|
<button @click="applyVoucherCode()" class="h-100 btn btn-sm btn-primary b-rad-none all-caps p-l-30 p-r-30 rounded">
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto p-r-10 p-l-10">
|
|
<div @click="removeVoucher()" class="h-100 btn btn-sm btn-secondary b-rad-none all-caps rounded d-flex justify-content-center align-items-center">
|
|
<i class="fa fa-times muted"></i>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-auto p-r-10 p-l-10">
|
|
<button class="btn btn-xs btn-outline-info b-rad-none m-r-5 requestModal" data-type="voucherList">
|
|
<i class="fa fa-list"></i>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<modal-component id="choose-voucher-modal" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="voucherList">
|
|
<list-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></list-vouchers-component>
|
|
</modal-component>
|
|
</div>
|
|
<span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
|
|
<div class="row m-l-0 m-r-0" v-show="showApplyVoucher" style="height: 20px">
|
|
<i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
|
|
<span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
|
|
<span class="text-success" v-if="voucherCodeFailedReason === '' && voucherValidated">Voucher applied</span>
|
|
</div>
|
|
<div class="row m-l-0 m-r-0" v-show="showApplyVoucher">
|
|
<div class="col">
|
|
<available-vouchers-component :employee="data.company.employee" @selected-voucher="handleSelectedVoucher"></available-vouchers-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-5">
|
|
<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 id="online-banking" 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>
|
|
<p class="no-margin bold text-primary fs-10">(Better Rate)</p>
|
|
</div>
|
|
<span class="absolute hide" style="right: 45px;top: 5px;width: 25px;">
|
|
<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="69.875" y1="85.484" x2="69.875" y2="94.92788" gradientUnits="userSpaceOnUse" id="color-1_BKgA84HSOQ-V_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="102.125" y1="111.67369" x2="102.125" y2="121.85394" gradientUnits="userSpaceOnUse" id="color-2_BKgA84HSOQ-V_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="15.38056" x2="86" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-3_BKgA84HSOQ-V_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="15.38056" x2="86" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-4_BKgA84HSOQ-V_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="69.875" y1="15.38056" x2="69.875" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-5_BKgA84HSOQ-V_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="102.125" y1="15.38056" x2="102.125" y2="156.09806" gradientUnits="userSpaceOnUse" id="color-6_BKgA84HSOQ-V_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="none" 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" fill-rule="nonzero"></path><g id="original-icon"><circle cx="26" cy="34" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-1_BKgA84HSOQ-V_gr1)" fill-rule="evenodd"></circle><circle cx="38" cy="44" transform="scale(2.6875,2.6875)" r="3" fill="url(#color-2_BKgA84HSOQ-V_gr2)" fill-rule="evenodd"></circle><path d="M130.88125,42.19375c-1.88125,-2.41875 -4.56875,-4.03125 -7.525,-4.03125c-0.5375,0 -0.80625,0 -1.34375,0c-3.49375,0.5375 -6.45,2.6875 -7.525,5.9125l-2.95625,7.25625c-0.80625,1.88125 -2.15,2.15 -2.6875,2.15c0,0 0,0 -0.26875,0c-0.5375,0 -2.15,-0.26875 -2.95625,-2.15l-10.75,-29.025c-1.34375,-3.7625 -4.8375,-6.18125 -8.86875,-6.18125c-4.03125,0 -7.525,2.41875 -8.86875,6.45l-10.48125,29.29375c-0.80625,1.88125 -2.41875,2.41875 -2.95625,2.41875v0c-0.5375,0 -2.15,-0.26875 -2.95625,-2.15l-2.95625,-7.525c-1.34375,-3.225 -4.3,-5.64375 -7.525,-5.9125c-0.5375,0 -0.80625,0 -1.34375,0c-2.95625,0 -5.9125,1.34375 -7.525,4.03125c-15.5875,20.69375 -15.85625,49.9875 -15.85625,51.33125c0,34.13125 27.14375,61.8125 60.46875,61.8125c33.325,0 60.46875,-27.68125 60.46875,-61.8125c0,-1.34375 -0.26875,-30.6375 -15.5875,-51.86875zM86,150.5c-30.36875,0 -55.09375,-25.2625 -55.09375,-56.4375c0,-1.075 0.26875,-29.025 14.5125,-48.64375c0.80625,-1.075 1.88125,-1.6125 3.225,-1.6125c0.26875,0 0.26875,0 0.5375,0c1.6125,0.26875 2.6875,1.075 3.225,2.6875l2.95625,7.525c1.6125,4.03125 5.10625,5.64375 8.0625,5.64375c2.6875,0 6.45,-1.88125 8.0625,-5.9125l10.48125,-29.29375c0.80625,-1.88125 2.15,-2.95625 4.03125,-2.95625c1.88125,0 3.225,1.075 3.7625,2.6875l10.48125,29.29375c1.34375,4.03125 5.10625,5.64375 7.79375,5.64375h0.26875c2.6875,0 6.18125,-1.34375 7.79375,-5.375l2.95625,-7.25625c0.5375,-1.6125 1.88125,-2.41875 3.225,-2.6875c0.26875,0 0.26875,0 0.5375,0c1.34375,0 2.41875,0.5375 3.225,1.6125c14.24375,19.61875 14.5125,47.56875 14.5125,48.64375c0.5375,31.175 -24.1875,56.4375 -54.55625,56.4375z" fill="url(#color-3_BKgA84HSOQ-V_gr3)" fill-rule="nonzero"></path><path d="M105.35,76.325l-43,53.75l4.3,3.225l43,-53.75z" fill="url(#color-4_BKgA84HSOQ-V_gr4)" fill-rule="nonzero"></path><path d="M80.625,91.375c0,-5.9125 -4.8375,-10.75 -10.75,-10.75c-5.9125,0 -10.75,4.8375 -10.75,10.75c0,5.9125 4.8375,10.75 10.75,10.75c5.9125,0 10.75,-4.8375 10.75,-10.75zM64.5,91.375c0,-2.95625 2.41875,-5.375 5.375,-5.375c2.95625,0 5.375,2.41875 5.375,5.375c0,2.95625 -2.41875,5.375 -5.375,5.375c-2.95625,0 -5.375,-2.41875 -5.375,-5.375z" fill="url(#color-5_BKgA84HSOQ-V_gr5)" fill-rule="nonzero"></path><path d="M102.125,107.5c-5.9125,0 -10.75,4.8375 -10.75,10.75c0,5.9125 4.8375,10.75 10.75,10.75c5.9125,0 10.75,-4.8375 10.75,-10.75c0,-5.9125 -4.8375,-10.75 -10.75,-10.75zM102.125,123.625c-2.95625,0 -5.375,-2.41875 -5.375,-5.375c0,-2.95625 2.41875,-5.375 5.375,-5.375c2.95625,0 5.375,2.41875 5.375,5.375c0,2.95625 -2.41875,5.375 -5.375,5.375z" fill="url(#color-6_BKgA84HSOQ-V_gr6)" fill-rule="nonzero"></path></g></g></svg>
|
|
</span>
|
|
<span class="absolute hide" style="right: 15px;top: 5px;width: 25px;">
|
|
<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="57.68181" y1="83.3125" x2="57.68181" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-1_49456_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="81.24581" y1="83.3125" x2="81.24581" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-2_49456_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="108.2955" y1="83.3125" x2="108.2955" y2="110.85938" gradientUnits="userSpaceOnUse" id="color-3_49456_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="92.74562" y1="11.42456" x2="80.64919" y2="156.54956" gradientUnits="userSpaceOnUse" id="color-4_49456_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="98.427" y1="11.89756" x2="86.33325" y2="157.02256" gradientUnits="userSpaceOnUse" id="color-5_49456_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="M48.375,92.53331c0,-2.408 -0.06987,-3.84581 -0.19888,-6.53331h4.64669l0.258,2.6875h0.129c0.903,0 3.1175,-3.23844 6.60319,-3.23844c3.655,0 7.37719,2.74125 7.37719,9.36594v12.685h-5.375v-12.083c0,-3.01269 -1.0105,-5.29169 -3.89419,-5.29169c-2.107,0 -3.483,1.505 -4.042,3.096c-0.17469,0.47569 -0.129,1.12069 -0.129,1.72269v12.556h-5.375z" fill="url(#color-1_49456_gr1)"></path><path d="M76.68781,99.4375c0.129,2.6875 3.096,4.82944 6.45269,4.82944c2.451,0 4.214,-0.63963 5.80769,-1.24163l0.774,3.50719c-1.806,0.731 -4.30269,1.21744 -7.31269,1.21744c-6.79669,0 -10.79838,-4.20862 -10.79838,-10.61831c0,-5.80769 3.52869,-11.29019 10.23937,-11.29019c6.79669,0 9.03269,6.17319 9.03269,10.77688c0,0.989 -0.086,0.13169 -0.172,2.81919zM85.8925,96.75c0.043,-5.375 -0.817,-7.80719 -4.34569,-7.80719c-3.27069,0 -4.64669,2.43219 -4.86169,7.80719z" fill="url(#color-2_49456_gr2)"></path><path d="M98.18513,86l2.193,9.417c0.47569,2.236 0.94869,4.0205 1.33569,6.708h0.086c0.43,-2.6875 1.118,-4.515 1.72,-6.665l2.709,-9.46h4.30269l2.623,9.202c0.64769,2.451 1.20669,4.2355 1.67969,6.923h0.086c0.344,-2.6875 0.817,-4.472 1.376,-6.923l2.322,-9.202h5.20569l-6.58169,21.5h-4.90469l-2.494,-8.9655c-0.645,-2.19569 -1.118,-4.472 -1.591,-7.1595h-0.086c-0.43,2.6875 -0.989,5.0955 -1.591,7.1595l-2.66869,8.9655h-4.94769l-6.19469,-21.5z" fill="url(#color-3_49456_gr3)"></path><path d="M147.8125,92.35325c0,-4.15219 -2.82994,-8.16463 -7.71044,-11.11819c2.78156,-4.26775 3.53944,-8.557 2.05863,-12.08569c-1.60981,-3.83506 -5.77544,-6.46612 -11.43531,-7.34225c0.92181,-4.99606 -0.03762,-9.245 -2.76812,-11.94325c-2.58538,-2.55581 -6.66769,-3.54212 -11.47025,-2.8165c-1.22819,-4.32956 -3.60394,-7.3745 -6.84237,-8.69944c-4.3645,-1.77913 -10.07544,-0.16125 -15.26769,4.35375l3.52869,4.05813c3.51794,-3.05837 7.31806,-4.40212 9.70456,-3.43462c2.021,0.82775 3.57706,3.56094 4.16562,7.31806l0.46494,2.96431l2.89444,-0.78475c3.999,-1.07769 7.39331,-0.76325 9.04075,0.86537c1.74956,1.73075 1.98606,5.4395 0.61544,9.68306l-1.0965,3.39431l3.56363,0.11825c5.00144,0.16931 8.90369,1.87319 9.94375,4.35106c0.946,2.2575 -0.27681,5.77006 -3.19275,9.17244l-2.33544,2.72781l3.27875,1.47275c4.54725,2.03444 7.48469,5.07669 7.48469,7.74537c0,2.44562 -2.49669,5.23525 -6.51719,7.28581l-3.20081,1.62862l2.46981,2.61225c3.40237,3.59588 4.93156,7.50619 3.89956,9.96794c-1.11531,2.65525 -5.68944,4.48006 -11.03756,4.36719l-4.29194,-0.06719l1.81406,3.8915c1.978,4.24356 2.73587,9.77444 0.34669,12.13138c-1.8275,1.81137 -5.89906,1.98875 -10.37913,0.45687l-3.34056,-1.14219l-0.21231,3.52331c-0.2795,4.64131 -1.99681,8.26944 -4.38063,9.24231c-2.39187,0.98362 -6.22694,-0.387 -9.76906,-3.49375l-2.63644,-2.31125l-1.54531,3.14975c-2.06131,4.19519 -5.06594,6.90419 -7.65669,6.90419c-2.58806,0 -5.59269,-2.71169 -7.65669,-6.90419l-1.548,-3.14706l-2.63375,2.31125c-3.53944,3.10406 -7.37719,4.46931 -9.76906,3.49375c-3.27875,-1.33838 -4.57681,-6.82356 -4.39944,-11.352l0.16931,-4.25162l-3.91031,1.67431c-4.94231,2.10969 -9.84162,2.16881 -11.91369,0.12363c-1.91081,-1.88663 -2.01562,-6.08181 -0.26875,-10.68281l1.27119,-3.33787l-3.56094,-0.29563c-4.52038,-0.37356 -7.91469,-2.01294 -8.86875,-4.28387c-1.032,-2.46175 0.49988,-6.37206 3.89956,-9.96794l2.46981,-2.61225l-3.20081,-1.62863c-4.0205,-2.04787 -6.51719,-4.84019 -6.51719,-7.28581c0,-2.66869 2.93744,-5.71094 7.482,-7.75344l3.27875,-1.47275l-2.33544,-2.72781c-2.91594,-3.40237 -4.13606,-6.91494 -3.19275,-9.17244c0.88956,-2.11506 3.88075,-3.68456 8.00606,-4.20056l3.00194,-0.37356l-0.72831,-2.94013c-0.91106,-3.68456 -0.53481,-6.79131 1.00512,-8.31244c1.83287,-1.81406 5.90713,-1.98875 10.37644,-0.45688l3.34325,1.14487l0.20962,-3.52869c0.2795,-4.644 1.99681,-8.26944 4.38063,-9.24231c2.39994,-0.989 6.22962,0.38969 9.76906,3.49375l3.54213,-4.042c-5.20838,-4.57144 -10.95425,-6.22425 -15.34563,-4.42631c-3.68994,1.51038 -6.31025,5.38575 -7.31269,10.64519c-5.29169,-1.10187 -9.91688,-0.19888 -12.74413,2.59075c-2.48325,2.45369 -3.50181,6.16512 -2.96431,10.62369c-4.70312,1.15025 -8.09744,3.60394 -9.49763,6.9445c-1.4835,3.52869 -0.72562,7.81794 2.05863,12.08569c-4.87781,2.95625 -7.70775,6.96869 -7.70775,11.12088c0,3.81894 2.36231,7.49275 6.58169,10.37913c-3.36744,4.57681 -4.42362,9.35519 -2.8165,13.19294c1.47813,3.526 5.08475,6.02 10.105,7.08962c-1.34106,5.50669 -0.47031,10.32269 2.50475,13.25744c3.58244,3.54481 9.19394,3.60125 14.19,2.25213c0.55631,5.22181 2.73856,10.71238 7.60294,12.7065c3.69531,1.51037 8.31244,0.59394 12.77638,-2.43488c2.96162,4.48275 6.88,7.07888 10.86825,7.07888c3.99094,0 7.90931,-2.59613 10.86825,-7.08156c4.46662,3.02881 9.08912,3.94525 12.77638,2.43488c3.68994,-1.51306 6.30756,-5.38844 7.31,-10.64788c5.29169,1.10725 9.91956,0.19887 12.74412,-2.58537c3.72756,-3.68456 3.62275,-9.57556 2.11775,-14.61463c5.14119,-0.645 10.29044,-2.82994 12.22813,-7.45512c1.6125,-3.83775 0.55363,-8.61613 -2.81381,-13.19294c4.21938,-2.88637 6.58169,-6.56019 6.58169,-10.37912z" fill="url(#color-4_49456_gr4)"></path><path d="M75.25,61.8125c0,5.92862 4.82138,10.75 10.75,10.75c5.92863,0 10.75,-4.82138 10.75,-10.75c0,-4.99606 -3.44,-9.16706 -8.0625,-10.36837v-19.19412c0,-5.92862 4.82137,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75v2.6875h5.375v-2.6875c0,-8.89294 -7.23206,-16.125 -16.125,-16.125c-8.89294,0 -16.125,7.23206 -16.125,16.125v19.19413c-4.6225,1.20131 -8.0625,5.37231 -8.0625,10.36838zM86,56.4375c2.96431,0 5.375,2.41069 5.375,5.375c0,2.96431 -2.41069,5.375 -5.375,5.375c-2.96431,0 -5.375,-2.41069 -5.375,-5.375c0,-2.96431 2.41069,-5.375 5.375,-5.375z" fill="url(#color-5_49456_gr5)"></path></g></g></svg>
|
|
</span>
|
|
<span class="absolute" style="right: 5px;top: 5px;width: 25px;"><img src="/images/hot.png" class="w-100"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-10 m-b-10">
|
|
<div class="col text-center"><div id="expend-method" 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 id="manual-transfer" 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 id="create-booking" class="btn btn-xs all-caps b-rad-none btn-success btn-block" :class="[{'hide': ((paymentMethod.name === '' && !voucherValidated) || (paymentMethod.name !== '' && (!voucherValidated && voucherCode !== '')) || (paymentMethod.name === '' && voucherValidated)) }]" @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 m-b-15 m-l-0 m-r-0" v-if="calculation.date">
|
|
<div class="col padding-15 bg-master-lightest text-center">
|
|
<div class="fs-14 muted" >The recipient will receive the transfer amount by <br><span class="bold text-success">{{ this.calculation.receive_date }}</span></div>
|
|
</div>
|
|
</div>
|
|
<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-10 hint-text">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-12">Voucher</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-if="calculation.voucher_discount_amount">
|
|
<div class="font-heading fs-12">- MYR {{(Math.round((calculation.voucher_discount_amount + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
|
|
</div>
|
|
<div class="col-auto text-right" v-else>
|
|
<div class="font-heading fs-12">- MYR 0.00</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="paymentMethod.id === 'wallet' && walletOutstanding < 0">
|
|
<div class="col bg-danger-lighter">
|
|
<h6 class="text-danger fs-14 bold">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="paymentMethod.id === 'wallet' && walletOutstanding < 0">
|
|
<div class="col">
|
|
<wallet-top-up-form-component :data="data.company" :amount="(Math.round(((walletOutstanding * -1)+ Number.EPSILON) * 100) / 100).toFixed(2)"></wallet-top-up-form-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 id="lock-booking" class="btn btn-sm all-caps b-rad-none btn-success btn-block requestModal" data-type="paymentSummary" v-if="paymentMethod.id !== 'wallet' || walletOutstanding >= 0">Lock Booking</button>
|
|
</div>
|
|
<modal-component id="confirm-booking-modal" 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,
|
|
voucherCode: '',
|
|
voucherCodeFailedReason: '',
|
|
voucherValidated: false,
|
|
voucherIsChecking: false,
|
|
showApplyVoucher: false,
|
|
}
|
|
},
|
|
validations () {
|
|
return {
|
|
amount: {
|
|
required,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
walletOutstanding(){
|
|
let walletBalance = this.data.company.wallet ? this.data.company.wallet.amount : 0;
|
|
return (walletBalance - this.calculation.total).toFixed(2);
|
|
}
|
|
},
|
|
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,
|
|
voucherCode: this.voucherCode,
|
|
amount: this.amount
|
|
};
|
|
|
|
this.submit(route('api.booking.payment.quotation', this.item.id), 'post', this.section, false, false)
|
|
this.calculation = null;
|
|
},
|
|
successHandler(response){
|
|
if(!response.payload.data){
|
|
this.voucherValidated = false;
|
|
this.voucherIsChecking = false;
|
|
this.voucherCodeFailedReason = 'Something went wrong. Please contact customer service.'
|
|
}
|
|
else if(response.payload.data.valid !== undefined && response.payload.data.code){ //applyVoucherCode()
|
|
this.voucherValidated = true;
|
|
if(response.payload.data.reason){
|
|
this.voucherCodeFailedReason = response.payload.data.reason;
|
|
this.voucherValidated = false;
|
|
}
|
|
this.voucherIsChecking = false;
|
|
}
|
|
else { //submitForm()
|
|
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;
|
|
},
|
|
updatedBankDetails(bank){
|
|
this.item.bank = bank;
|
|
},
|
|
removeVoucher(){
|
|
this.voucherCodeFailedReason = '';
|
|
this.voucherCode = '';
|
|
this.showApplyVoucher = false;
|
|
},
|
|
applyVoucherCode(){
|
|
this.voucherIsChecking = true;
|
|
this.voucherCodeFailedReason = '';
|
|
this.voucherValidated = false;
|
|
this.parameters = {
|
|
voucherCode: this.voucherCode,
|
|
amount: this.amount,
|
|
itemId: this.item.id
|
|
};
|
|
if(this.voucherCode.trim() !== ''){
|
|
this.submit(route('api.voucher.validate'), 'post', '', false, false);
|
|
}
|
|
else{
|
|
this.voucherValidated = true;
|
|
this.voucherIsChecking = false;
|
|
}
|
|
},
|
|
updateVoucherFlag(event){
|
|
this.voucherCodeFailedReason = '';
|
|
this.voucherValidated = false;
|
|
this.voucherCode = event.target.value;
|
|
},
|
|
handleSelectedVoucher(value){
|
|
this.voucherCode = value;
|
|
}
|
|
},
|
|
mixins: [componentHandler],
|
|
directives: {money: VMoney}
|
|
}
|
|
</script>
|