mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Dillon Ngo
420 lines
30 KiB
Vue
420 lines
30 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" 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}]" v-if="service.id === 15">
|
|
<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 serviceInfo.services"
|
|
:key="svc.id"
|
|
class="menu-item w-100"
|
|
@mouseenter="hoverService(svc)"
|
|
>
|
|
<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(service, 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 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)" v-else>
|
|
<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>
|
|
</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">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">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
|
|
},
|
|
serviceInfo: {
|
|
services: [
|
|
{
|
|
id: 1,
|
|
name: "BANK TRANSFER",
|
|
subservices: [
|
|
{
|
|
id: 14,
|
|
name: "(IN) BANK TRANSFER",
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "(EX) BANK TRANSFER",
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "ALIPAY TRANSFER",
|
|
subservices: [
|
|
{
|
|
id: 14,
|
|
name: "(IN) ALIPAY TRANSFER",
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "(EX) ALIPAY TRANSFER",
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "ENTERPRISE TO ENTERPRISE 公打公",
|
|
subservices: [
|
|
{
|
|
id: 14,
|
|
name: "(IN) ENTERPRISE TO ENTERPRISE 公打公",
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "(EX) ENTERPRISE TO ENTERPRISE 公打公",
|
|
},
|
|
]
|
|
},
|
|
]
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
|
|
},
|
|
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 };
|
|
},
|
|
hoverService(service) {
|
|
this.innerDropdownHovered.service = service;
|
|
this.innerDropdownHovered.subservice = null;
|
|
},
|
|
hoverSubservice(sub) {
|
|
this.innerDropdownHovered.subservice = sub;
|
|
},
|
|
selectService(service) {
|
|
this.innerDropdownSelected.service = service;
|
|
this.innerDropdownSelected.subservice = null;
|
|
this.innerDropdownSelected.option = null;
|
|
this.innerDropdownHovered.service = service;
|
|
this.innerDropdownHovered.subservice = null;
|
|
},
|
|
selectSubservice(service, svc, sub) {
|
|
this.updateServiceType(service);
|
|
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; // optional, closes dropdown when leaving
|
|
}
|
|
},
|
|
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: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.bg-success-light {
|
|
background-color: #8fd19e !important;
|
|
}
|
|
</style>
|