mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Jia Sheng
230 lines
18 KiB
Vue
230 lines
18 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="/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="/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="/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}]" @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>
|
|
</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 text-danger" v-if="[1, 3].includes(serviceType.id)">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: {}
|
|
}
|
|
},
|
|
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;
|
|
|
|
},
|
|
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,
|
|
}
|
|
|
|
}
|
|
},
|
|
mixins: [formHandler]
|
|
}
|
|
</script>
|