mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-31 18:34:10 +00:00
Dillon Ngo
423 lines
31 KiB
Vue
423 lines
31 KiB
Vue
<template>
|
|
<div class="row parentContainer">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 m-b-20" v-if="!data.services.length">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<img :src="asset('images/3568950.png')" class="w-100">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
<div class="font-heading fs-11 all-caps text-danger bold">Service Is Currently Unavailable!</div>
|
|
<div class="font-heading fs-10 muted">We apologise for any inconvenience. In the mean time feel free to manage your existing transfers as usual, We will be back soon.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin">
|
|
<div class="col bg-white p-t-15 p-b-10 p-l-25 p-r-25">
|
|
<div class="absolute w-100 h-100 bg-white hint-text" style="top: 0; left: 0; z-index: 1;" v-if="!data.services.length"></div>
|
|
<img :src="asset('images/order_form.png')" class="w-100" v-if="!data.services.length">
|
|
<div class="row" v-if="data.services.length">
|
|
<div class="col">
|
|
<div class="row p-t-5 p-b-20">
|
|
<div class="col">
|
|
<div class="row" v-if="data.services.length > 1">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 m-b-5">
|
|
<div class="col-auto p-l-0">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="fs-10 all-caps">Service Type</div>
|
|
</div>
|
|
<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
|
|
<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin h-100" v-if="data.services.length <= 3">
|
|
<div class="col no-padding m-b-10" :class="[{'p-l-5': index !== 0}, {'p-r-5': index+1 !== data.services.length}]" v-for="(service, index) in data.services" v-bind:key="service.id" >
|
|
<div class="btn btn-xs b-rad-none padding-25 btn-block" :class="[{'btn-success': serviceType.id === service.id}, {'bg-master-lighter': serviceType.id !== service.id}]" @click="updateServiceType(service)">
|
|
{{service.name}}
|
|
<span class="absolute" style="right: -10px;top: -15px;width: 30px;" v-if="index !==0">
|
|
<img :src="asset('images/new-icon.png')" class="w-100">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="data.services.length > 3">
|
|
<div class="col-8">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-success btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="serviceType.status = !serviceType.status">
|
|
<div class="row">
|
|
<div class="col p-t-5 p-b-5">
|
|
{{serviceType.name}}
|
|
</div>
|
|
<div class="col-auto bg-success-dark ">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa text-white" :class="[{'fa-angle-down': !serviceType.status}, {'fa-angle-up': serviceType.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" :class="[{'hide': !serviceType.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" v-for="service in data.services.filter(s => ![14,15,16,17,18,19].includes(s.id))" v-bind:key="service.id">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': serviceType.id === service.id}, {'text-white': serviceType.id === service.id}, {'hover-success': serviceType.id !== service.id}, {'pointer': serviceType.id !== service.id}]" @click="updateServiceType(service)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">{{service.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" v-if="data.services.filter(s => [14, 15, 16, 17, 18, 19].includes(s.id)).length">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-success-light': [14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'text-white': [14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'hover-success': ![14, 15, 16, 17, 18, 19].includes(serviceType.id)}, {'pointer': ![14, 15, 16, 17, 18, 19].includes(serviceType.id)}]">
|
|
<div class="dropdown w-100" @mouseleave="closeDropdown">
|
|
<button
|
|
class="font-heading fs-10 w-100"
|
|
@click="innerDropdown.main = !innerDropdown.main" style="background: inherit; border: none; text-align: left;"
|
|
>
|
|
{{ displaySelection }}
|
|
<i class="fa" :class="innerDropdown.main ? 'fa-angle-up' : 'fa-angle-down'"></i>
|
|
</button>
|
|
|
|
<div
|
|
v-if="innerDropdown.main"
|
|
class="dropdown-menu show p-0 border border-success w-100"
|
|
style="max-height: 400px; overflow-y: auto;"
|
|
>
|
|
<ul class="menu-level w-100">
|
|
<li
|
|
v-for="svc in hardcodeBankingInvoiceServices.services"
|
|
:key="svc.id"
|
|
class="menu-item w-100 p-l-0"
|
|
>
|
|
<div
|
|
class="level-title w-100 font-heading fs-10"
|
|
@click="selectService(svc)"
|
|
:class="{ 'bg-success-light text-white': innerDropdownSelected.service && innerDropdownSelected.service.id === svc.id }"
|
|
>
|
|
{{ svc.name }}
|
|
</div>
|
|
<ul v-if="innerDropdownHovered.service && innerDropdownHovered.service.id === svc.id" class="menu-level submenu w-100">
|
|
<li v-for="sub in svc.subservices" :key="'sub-'+sub.id" class="menu-item w-100">
|
|
<div
|
|
class="level-title w-100 sub-level font-heading fs-10"
|
|
@click="selectSubservice(svc, sub)"
|
|
:class="{ 'bg-success-light text-white': innerDropdownSelected.subservice && innerDropdownSelected.subservice.id === sub.id }"
|
|
>
|
|
{{ sub.name }}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<p class="no-margin" v-if="serviceType.id === 1">The recipient can expect to receive the transfer within <span class="text-success bold">3-5 working days</span>. Explore our BANK TRANSFER (SAVER) option for a better rate!</p>
|
|
<p class="no-margin" v-if="serviceType.id === 3">Enjoy a <span class="bold text-underline">better rate</span> with this option! The recipient will receive the transfer after <span class="text-success bold">5-7 working days</span>.</p>
|
|
<p class="no-margin" v-if="serviceType.id === 12">You can request Pay-on-Behalf via Alipay for platforms like Taobao, 1688, Pinduoduo, or any Alipay-supported platform. <br><span class="text-danger">Please use Alipay account "2766384544@QQ.com" to apply for Daifu. This account may change, so always confirm the latest Alipay account before placing an order.</span></p>
|
|
<p class="no-margin" v-if="serviceType.id === 14 || serviceType.id === 17 || serviceType.id === 18">The customer may request an <span class="bold">official invoice first</span> for Bank submission (e.g. BA Trade Line). <br> <br>
|
|
The <span class="bold">2% service fee is already included</span> in each product unit price, so it will not appear separately.<br>
|
|
🕓 Transfer will be processed once bank payment is received.<br>
|
|
</p>
|
|
<p class="no-margin" v-if="serviceType.id === 15 || serviceType.id === 16 || serviceType.id === 19">The customer may request an <span class="bold">official invoice first</span> for Bank submission (e.g. BA Trade Line). <br> <br>
|
|
Invoice will show a <span class="bold">2% service fee</span> as a separate item.<br>
|
|
🕓 Transfer will be processed once bank payment is received. <br>
|
|
</p>
|
|
<p class="no-margin text-danger" v-if="[1, 3].includes(serviceType.id) && serviceType.selectedCurrency.id !== 3">Please ensure is a PERSONAL bank account details. Company bank account details only allow to use as E2E service.</p>
|
|
<p class="no-margin text-danger" v-if="serviceType.id === 5">Cancellation of E2E service are strictly NO refund on the 2% transfer fee charge.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 m-b-5">
|
|
<div class="col-auto p-l-0">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="fs-10 all-caps">Payment Type</div>
|
|
</div>
|
|
<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
|
|
<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="btn btn-xs b-rad-none p-l-25 p-r-25 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 1}, {'btn-default': paymentType !== 1}, {'bg-master-lighter': paymentType !== 1}]" @click="paymentType = 1">Full Payment</div>
|
|
<div class="btn btn-xs b-rad-none p-l-25 p-r-25 m-r-5 p-t-5 p-b-5" :class="[{'btn-complete': paymentType === 0}, {'btn-default': paymentType !== 0}, {'bg-master-lighter': paymentType !== 0}]" @click="paymentType = 0">Deposit</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="paymentType === 0">
|
|
<div class="col">
|
|
<div class="fs-12">** If you like to create <span class="text-danger">a single invoice</span> for your purchase order, please key in the <span class="text-danger">full amount of your purchase order</span> in the form below. You will still be able to make <span class="text-success">partial payment</span> for the transfer request with your deposit amount when making payment.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-5">
|
|
<div class="col">
|
|
<currency-converter-component :companySegment="data.segments" :data="serviceType" :section="section" :id="data.id" v-on:newCalculation="updateCalculation($event)"></currency-converter-component>
|
|
</div>
|
|
</div>
|
|
<div class="row p-b-15" v-if="(summary.calculation.total > 0 && (data.status === 1 || data.status === 2)) || ($store.getters.isAdmin && summary.calculation.total > 0)">
|
|
<div class="col">
|
|
<div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">Transfer Now</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="summary.calculation.total > 0 && data.status === 0">
|
|
<div class="col">
|
|
<div class="alert alert-warning padding-15" role="alert">
|
|
<div class="font-heading fs-12 all-caps bold m-b-15">Create a transfer order</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="font-heading fs-10">You are unable to create a new transfer order until you upload your identification document for verification. You can verify your identity by clicking on the button below</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-xs all-caps b-rad-none btn-warning requestModal" data-type="identificationVerificationModal">Upload identification Document</button>
|
|
</div>
|
|
<modal-component type="identificationVerificationModal">
|
|
<identification-verification-form-component section="customerProfileSection" :data="data"></identification-verification-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
<modal-component id="select-account-modal" v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
|
|
<booking-confirmation-component :data="summary" :section="section"></booking-confirmation-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import formHandler from "../../../general/mixins/formHandler";
|
|
export default {
|
|
data(){
|
|
return {
|
|
paymentType: 1,
|
|
serviceType: {
|
|
status: false,
|
|
name: '',
|
|
id: '',
|
|
currencies: [],
|
|
selectedCurrency: {}
|
|
},
|
|
summary: {
|
|
calculation: {},
|
|
amount: 0,
|
|
type: 0,
|
|
bankAccount: {},
|
|
recipientBanks: [],
|
|
company: {}
|
|
},
|
|
parameters: {},
|
|
|
|
innerDropdown: { main: false },
|
|
innerDropdownHovered: {
|
|
service: null,
|
|
subservice: null
|
|
},
|
|
|
|
innerDropdownSelected: {
|
|
service: null,
|
|
subservice: null,
|
|
option: null
|
|
},
|
|
hardcodeBankingInvoiceServices: {
|
|
services: [
|
|
{
|
|
id: 1,
|
|
name: "BANK TRANSFER",
|
|
subservices: [
|
|
{
|
|
id: 14,
|
|
name: "(IN) BANK TRANSFER (CNY/USD) - BA",
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "(EX) BANK TRANSFER (CNY/USD) - BA",
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "ALIPAY TRANSFER",
|
|
subservices: [
|
|
{
|
|
id: 17,
|
|
name: "(IN) ALIPAY - BA",
|
|
},
|
|
{
|
|
id: 16,
|
|
name: "(EX) ALIPAY - BA",
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "ENTERPRISE TO ENTERPRISE 公打公",
|
|
subservices: [
|
|
{
|
|
id: 18,
|
|
name: "(IN) ENTERPRISE TO ENTERPRISE - BA",
|
|
},
|
|
{
|
|
id: 19,
|
|
name: "(EX) ENTERPRISE TO ENTERPRISE - BA",
|
|
},
|
|
]
|
|
},
|
|
]
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.serviceType = {
|
|
id: this.data.services[0].id,
|
|
name: this.data.services[0].name,
|
|
currencies: this.data.services[0].currencies,
|
|
selectedCurrency: this.data.services[0].currencies[0],
|
|
status: false
|
|
};
|
|
|
|
this.summary.bankAccount = {};
|
|
this.summary.recipientBanks = this.data.recipient_banks.accounts;
|
|
|
|
},
|
|
mounted() {
|
|
this.hardcodeBankingInvoiceServices.services.forEach(service => {
|
|
service.subservices = service.subservices.map(sub => {
|
|
const match = this.data.services.find(s => s.id === sub.id);
|
|
return match
|
|
? { ...sub, name: match.name, currencies: match.currencies }
|
|
: sub;
|
|
});
|
|
});
|
|
},
|
|
computed: {
|
|
displaySelection() {
|
|
var defaultName = "BANKING INVOICE";
|
|
var service = this.innerDropdownSelected.service;
|
|
var sub = this.innerDropdownSelected.subservice;
|
|
var opt = this.innerDropdownSelected.option;
|
|
if (service && sub && opt) return defaultName + " → " + service.name + " → " + sub.name + " → " + opt.name;
|
|
if (service && sub) return defaultName + " → " + service.name + " → " + sub.name;
|
|
if (service) return defaultName + " → " + service.name;
|
|
return defaultName;
|
|
}
|
|
},
|
|
methods: {
|
|
updateServiceType(service){
|
|
this.serviceType.id = service.id;
|
|
this.serviceType.name = service.name;
|
|
this.serviceType.currencies = service.currencies;
|
|
this.serviceType.selectedCurrency = service.currencies[0];
|
|
this.serviceType.status = false;
|
|
},
|
|
updateCalculation(conversion){
|
|
this.summary = {
|
|
calculation: conversion.calculation,
|
|
amount: conversion.amount,
|
|
serviceType: conversion.serviceType,
|
|
type: conversion.type,
|
|
bankAccount: this.summary.bankAccount,
|
|
recipientBanks: this.data.recipient_banks.accounts,
|
|
company: this.data,
|
|
}
|
|
this.innerDropdownSelected = { service: null, subservice: null };
|
|
},
|
|
selectService(service) {
|
|
this.innerDropdownSelected.service = service;
|
|
this.innerDropdownSelected.subservice = null;
|
|
this.innerDropdownSelected.option = null;
|
|
this.innerDropdownHovered.service = service;
|
|
this.innerDropdownHovered.subservice = null;
|
|
},
|
|
selectSubservice(svc, sub) {
|
|
this.updateServiceType(sub);
|
|
this.innerDropdownSelected = { service: svc, subservice: sub };
|
|
|
|
this.innerDropdownSelected.subservice = sub;
|
|
this.innerDropdownSelected.option = null;
|
|
this.innerDropdownHovered.subservice = sub;
|
|
|
|
this.innerDropdown.main = false;
|
|
this.innerDropdownHovered.service = null;
|
|
},
|
|
closeDropdown() {
|
|
this.innerDropdownHovered.service = null;
|
|
this.innerDropdownHovered.subservice = null;
|
|
this.innerDropdown.main = false;
|
|
}
|
|
},
|
|
mixins: [formHandler]
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.menu-level {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.level-title {
|
|
padding: 4px 8px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.level-title.sub-level {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.level-title.option-level {
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.menu-item:hover > .level-title {
|
|
background-color: #8fd19e;
|
|
color: white;
|
|
}
|
|
|
|
.bg-success-light {
|
|
background-color: #8fd19e !important;
|
|
}
|
|
</style>
|