From d867421901f8e865a9141265e65d0bece96bfc80 Mon Sep 17 00:00:00 2001
From: "DESKTOP-5I7S92L\\nicho" <nicholaschong9607@gmail.com>
Date: Mon, 27 Mar 2023 16:27:47 +0800
Subject: [PATCH] 1688 tnc

---
 .../elements/BookingConfirmationComponent.vue | 447 +++++++++---------
 1 file changed, 232 insertions(+), 215 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index 492a2af8..891d4a31 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -1,131 +1,135 @@
 <template>
     <div class="row zig-zag-top">
         <div class="col bg-white padding-25">
-            <div class="row p-b-20 b-b b-dashed m-b-20 b-grey">
+            <div class="row" v-if="(data.serviceType.id === 2 && step != 1) || data.serviceType.id != 2">
                 <div class="col">
-                    <div class="row m-b-5">
+                    <div class="row p-b-20 b-b b-dashed m-b-20 b-grey">
                         <div class="col">
-                            <div class="font-heading all-caps bold fs-10">Transfer Summary</div>
-                        </div>
-                    </div>
-                    <div class="row align-items-end">
-                        <div class="col-4">
-                            <div class="row">
+                            <div class="row m-b-5">
                                 <div class="col">
-                                    <div class="font-heading fs-10">{{this.data.serviceType.name}}</div>
+                                    <div class="font-heading all-caps bold fs-10">Transfer Summary</div>
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col">
-                                    <div class="font-heading fs-8 all-caps">Service Type</div>
+                            <div class="row align-items-end">
+                                <div class="col-4">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-10">{{this.data.serviceType.name}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-8 all-caps">Service Type</div>
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </div>
-                        <div class="col-2">
-                            <div class="row">
-                                <div class="col">
-                                    <div class="font-heading fs-12 bold text-primary">{{this.data.serviceType.selectedCurrency.short_code}}</div>
+                                <div class="col-2">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-12 bold text-primary">{{this.data.serviceType.selectedCurrency.short_code}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-8 all-caps">Currency</div>
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="row">
                                 <div class="col">
-                                    <div class="font-heading fs-8 all-caps">Currency</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col">
-                            <div class="row">
-                                <div class="col">
-                                    <div class="font-heading fs-12 bold text-primary">{{(Math.round((parseFloat(this.data.amount.replace(",", "")) + Number.EPSILON) * 100) / 100).toFixed(2)}} {{this.parameters.type === 0 ? 'MYR': this.data.serviceType.selectedCurrency.short_code}}</div>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="col">
-                                    <div class="font-heading fs-8 all-caps">Transfer Total</div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-12 bold text-primary">{{(Math.round((parseFloat(this.data.amount.replace(",", "")) + Number.EPSILON) * 100) / 100).toFixed(2)}} {{this.parameters.type === 0 ? 'MYR': this.data.serviceType.selectedCurrency.short_code}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="font-heading fs-8 all-caps">Transfer Total</div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
-                <div class="col">
-                    <div class="row m-b-10">
-                        <div class="col">
-                            <div class="font-heading all-caps bold fs-10">Recipient Details</div>
-                        </div>
-                    </div>
-                    <div class="row">
+                    <div class="row p-b-20 b-b b-dashed b-grey m-b-20">
                         <div class="col">
                             <div class="row m-b-10">
                                 <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">Recipient Bank Account</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 class="font-heading all-caps bold fs-10">Recipient Details</div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row m-b-10">
+                                        <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">Recipient Bank Account</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>-->
-                                    <!--</div>-->
-                                    <div class="row parentContainer">
-                                        <div class="col">
-                                            <div class="row text-center m-b-15 hide" v-if="data.serviceType.id === 4">
-                                                <div class="col-auto p-r-0">
-                                                    <div class="b-a b-grey bg-white padding-15 pointer b-primary text-primary">
-                                                        <div class="m-b-5">
-                                                            <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="104.14063" x2="86" y2="140.57775" gradientUnits="userSpaceOnUse" id="color-1_44825_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.125" x2="86" y2="159.93044" gradientUnits="userSpaceOnUse" id="color-2_44825_gr2"><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="M121.41588,139.75h-70.83175c-2.53431,0 -3.66575,-3.18469 -1.6985,-4.78106l33.72544,-27.40175c1.97531,-1.60444 4.80256,-1.60444 6.77787,0l33.72544,27.40175c1.96725,1.59638 0.83581,4.78106 -1.6985,4.78106z" fill="url(#color-1_44825_gr1)"></path><path d="M148.135,71.77238l-8.385,-8.385v-28.42031c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-2.65794v-2.65794c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-69.81587c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v2.65794h-2.65794c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v28.42031l-8.385,8.385c-1.5265,1.52381 -2.365,3.55019 -2.365,5.70825v64.95688c0,7.40944 6.02806,13.4375 13.4375,13.4375h102.125c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-64.95688c0,-2.15806 -0.84119,-4.18444 -2.365,-5.70825zM77.60156,91.96356l-0.30906,0.24725c-1.28731,-1.79525 -2.0425,-3.92375 -2.0425,-6.21081c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,2.26287 -0.70413,4.41019 -2.01294,6.235l-0.34131,-0.27412c-4.93962,-3.95063 -11.84919,-3.95063 -16.79419,0.00269zM86,69.875c-8.89294,0 -16.125,7.23206 -16.125,16.125c0,3.53406 1.14487,6.85581 3.18738,9.59438l-10.578,8.46025l-3.35937,-2.6875v-55.88388c6.95256,-1.06963 12.16094,-6.28069 13.23325,-13.23325h27.2835c1.06963,6.95256 6.28069,12.16094 13.23325,13.23325v55.88656l-3.35937,2.6875l-10.56994,-8.45488c2.07744,-2.79231 3.17931,-6.10869 3.17931,-9.60244c0,-8.89294 -7.23206,-16.125 -16.125,-16.125zM58.179,107.5l-31.304,25.04481v-50.08694zM145.125,82.45519v50.08963l-31.30669,-25.04481zM144.33488,75.5725c0.11825,0.11825 0.18006,0.27412 0.27412,0.4085l-4.859,3.88612v-8.8795zM131.65794,32.25c1.49962,0 2.71706,1.21744 2.71706,2.71706v49.20275l-5.375,4.3v-56.21981zM51.09206,21.5h69.81856c1.49694,0 2.71438,1.21744 2.71438,2.71706v68.55275l-5.375,4.3v-56.75731h-2.6875c-6.22694,0 -10.75,-4.52306 -10.75,-10.75v-2.6875h-37.625v2.6875c0,6.22694 -4.52306,10.75 -10.75,10.75h-2.6875v56.75731l-5.375,-4.3v-68.55275c0,-1.49962 1.21744,-2.71706 2.71706,-2.71706zM40.34206,32.25h2.65794v56.21981l-5.375,-4.3v-49.20275c0,-1.49963 1.21744,-2.71706 2.71706,-2.71706zM32.25,70.98763v8.88219l-4.859,-3.88881c0.09406,-0.13438 0.15587,-0.29025 0.27412,-0.4085zM137.0625,150.5h-102.125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-3.00463l54.08325,-43.27144c2.96969,-2.37306 7.11381,-2.37306 10.08081,0l54.08594,43.26875v3.00731c0,4.44513 -3.61737,8.0625 -8.0625,8.0625z" fill="url(#color-2_44825_gr2)"></path></g></g></svg>
+                                            <div class="row parentContainer">
+                                                <div class="col">
+                                                    <div class="row text-center m-b-15 hide" v-if="data.serviceType.id === 4">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="b-a b-grey bg-white padding-15 pointer b-primary text-primary">
+                                                                <div class="m-b-5">
+                                                                    <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="104.14063" x2="86" y2="140.57775" gradientUnits="userSpaceOnUse" id="color-1_44825_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.125" x2="86" y2="159.93044" gradientUnits="userSpaceOnUse" id="color-2_44825_gr2"><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="M121.41588,139.75h-70.83175c-2.53431,0 -3.66575,-3.18469 -1.6985,-4.78106l33.72544,-27.40175c1.97531,-1.60444 4.80256,-1.60444 6.77787,0l33.72544,27.40175c1.96725,1.59638 0.83581,4.78106 -1.6985,4.78106z" fill="url(#color-1_44825_gr1)"></path><path d="M148.135,71.77238l-8.385,-8.385v-28.42031c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-2.65794v-2.65794c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-69.81587c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v2.65794h-2.65794c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v28.42031l-8.385,8.385c-1.5265,1.52381 -2.365,3.55019 -2.365,5.70825v64.95688c0,7.40944 6.02806,13.4375 13.4375,13.4375h102.125c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-64.95688c0,-2.15806 -0.84119,-4.18444 -2.365,-5.70825zM77.60156,91.96356l-0.30906,0.24725c-1.28731,-1.79525 -2.0425,-3.92375 -2.0425,-6.21081c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,2.26287 -0.70413,4.41019 -2.01294,6.235l-0.34131,-0.27412c-4.93962,-3.95063 -11.84919,-3.95063 -16.79419,0.00269zM86,69.875c-8.89294,0 -16.125,7.23206 -16.125,16.125c0,3.53406 1.14487,6.85581 3.18738,9.59438l-10.578,8.46025l-3.35937,-2.6875v-55.88388c6.95256,-1.06963 12.16094,-6.28069 13.23325,-13.23325h27.2835c1.06963,6.95256 6.28069,12.16094 13.23325,13.23325v55.88656l-3.35937,2.6875l-10.56994,-8.45488c2.07744,-2.79231 3.17931,-6.10869 3.17931,-9.60244c0,-8.89294 -7.23206,-16.125 -16.125,-16.125zM58.179,107.5l-31.304,25.04481v-50.08694zM145.125,82.45519v50.08963l-31.30669,-25.04481zM144.33488,75.5725c0.11825,0.11825 0.18006,0.27412 0.27412,0.4085l-4.859,3.88612v-8.8795zM131.65794,32.25c1.49962,0 2.71706,1.21744 2.71706,2.71706v49.20275l-5.375,4.3v-56.21981zM51.09206,21.5h69.81856c1.49694,0 2.71438,1.21744 2.71438,2.71706v68.55275l-5.375,4.3v-56.75731h-2.6875c-6.22694,0 -10.75,-4.52306 -10.75,-10.75v-2.6875h-37.625v2.6875c0,6.22694 -4.52306,10.75 -10.75,10.75h-2.6875v56.75731l-5.375,-4.3v-68.55275c0,-1.49962 1.21744,-2.71706 2.71706,-2.71706zM40.34206,32.25h2.65794v56.21981l-5.375,-4.3v-49.20275c0,-1.49963 1.21744,-2.71706 2.71706,-2.71706zM32.25,70.98763v8.88219l-4.859,-3.88881c0.09406,-0.13438 0.15587,-0.29025 0.27412,-0.4085zM137.0625,150.5h-102.125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-3.00463l54.08325,-43.27144c2.96969,-2.37306 7.11381,-2.37306 10.08081,0l54.08594,43.26875v3.00731c0,4.44513 -3.61737,8.0625 -8.0625,8.0625z" fill="url(#color-2_44825_gr2)"></path></g></g></svg>
+                                                                </div>
+                                                                <p class="no-margin bold">Direct Transfer</p>
+                                                            </div>
                                                         </div>
-                                                        <p class="no-margin bold">Direct Transfer</p>
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto p-r-0">
-                                                    <div class="b-a b-grey bg-master-lighter padding-15">
-                                                        <div class="m-b-5" style="opacity: 0.4">
-                                                            <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="107.5" y1="82.30469" x2="107.5" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-1_114458_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="56.10156" x2="107.5" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-2_114458_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="82.30469" x2="123.625" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-3_114458_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="56.10156" x2="123.625" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-4_114458_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.98006" x2="86" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-5_114458_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-6_114458_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-7_114458_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="53.75" y1="99.4375" x2="53.75" y2="106.82813" gradientUnits="userSpaceOnUse" id="color-8_114458_gr8"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="85.88713" x2="63.15625" y2="94.23719" gradientUnits="userSpaceOnUse" id="color-9_114458_gr9"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="85.94356" x2="44.34375" y2="94.00606" gradientUnits="userSpaceOnUse" id="color-10_114458_gr10"><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="M104.8125,83.3125h5.375v16.125h-5.375z" fill="url(#color-1_114458_gr1)"></path><path d="M104.8125,56.4375h5.375v16.125h-5.375z" fill="url(#color-2_114458_gr2)"></path><path d="M120.9375,83.3125h5.375v16.125h-5.375z" fill="url(#color-3_114458_gr3)"></path><path d="M120.9375,56.4375h5.375v16.125h-5.375z" fill="url(#color-4_114458_gr4)"></path><path d="M155.875,37.625v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-102.125c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375v16.7485c-10.01631,2.28438 -17.68644,10.78494 -18.69425,21.2205c-4.68431,1.15831 -8.18075,5.36694 -8.18075,10.406c0,5.47444 4.12531,9.9545 9.42506,10.61563c0.47569,1.36256 1.05888,2.67406 1.75763,3.91569c-10.38181,7.02512 -16.55769,18.57062 -16.55769,31.15619v8.0625h69.875h5.375h64.5v-5.375h-5.375v-96.75c2.96431,0 5.375,-2.41069 5.375,-5.375zM48.375,32.25h102.125l0.00538,5.375h-102.13038zM34.9375,83.3125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125c10.37106,0 18.8125,8.44144 18.8125,18.8125v10.75c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125zM26.875,91.375c0,-1.98069 1.08844,-3.69531 2.6875,-4.62788v7.31538c0,0.67188 0.04838,1.33569 0.10213,1.99412c-1.6555,-0.91644 -2.78963,-2.66062 -2.78963,-4.68162zM53.75,118.25c7.095,0 13.46437,-3.08794 17.89338,-7.97113c1.51575,1.01319 2.90788,2.15 4.20862,3.37281c-5.58194,6.28069 -13.62831,9.97331 -22.102,9.97331c-8.47637,0 -16.52275,-3.68994 -22.102,-9.97062c1.30075,-1.22281 2.69288,-2.35963 4.20863,-3.37281c4.429,4.8805 10.79838,7.96844 17.89338,7.96844zM21.5,139.75v-2.6875c0,-7.14875 2.3435,-13.89169 6.49837,-19.393c6.57631,7.15681 15.9315,11.3305 25.75163,11.3305c9.81744,0 19.17531,-4.17369 25.75163,-11.33319c4.15487,5.504 6.49837,12.24962 6.49837,19.39569v2.6875zM115.5625,139.75v-5.375h29.5625v5.375zM145.125,118.25h-18.8125v5.375h18.8125v5.375h-29.5625v-13.4375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-13.4375v5.375h13.4375c1.4835,0 2.6875,1.204 2.6875,2.6875v24.1875h-18.8125v-2.6875c0,-12.58556 -6.17588,-24.13106 -16.55769,-31.15619c0.70144,-1.24162 1.28463,-2.55044 1.75762,-3.91569c5.29975,-0.66112 9.42506,-5.14119 9.42506,-10.61562c0,-5.03906 -3.49644,-9.24769 -8.18075,-10.406c-1.1825,-12.24156 -11.52131,-21.844 -24.06925,-21.844v-16.125h91.375zM77.9375,94.0625v-7.31538c1.59906,0.93256 2.6875,2.64719 2.6875,4.62788c0,2.021 -1.13412,3.76519 -2.78963,4.68162c0.05375,-0.65844 0.10213,-1.32225 0.10213,-1.99412z" fill="url(#color-5_114458_gr5)"></path><path d="M99.4375,102.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,86h32.25l0.00538,10.75h-32.25538z" fill="url(#color-6_114458_gr6)"></path><path d="M99.4375,75.25h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,59.125h32.25l0.00538,10.75h-32.25538z" fill="url(#color-7_114458_gr7)"></path><path d="M53.75,107.5c4.45319,0 8.0625,-3.60931 8.0625,-8.0625h-16.125c0,4.45319 3.60931,8.0625 8.0625,8.0625z" fill="url(#color-8_114458_gr8)"></path><path d="M63.15625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-9_114458_gr9)"></path><path d="M44.34375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-10_114458_gr10)"></path></g></g></svg>
-                                                        </div>
-                                                        <div class="absolute bg-master text-white p-t-5 p-b-5 p-r-10 p-l-10 fs-8" style="border-radius: 10px 0px;top: -10px;right: -15px;">Coming Soon</div>
-                                                        <p class="no-margin bold muted">Pay-On-Behalf</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="row" v-show="!createBank">
-                                                <div class="col-7 p-r-0">
-                                                    <div class="row" id="select-list" name="select-list">
-                                                        <div class="col">
-                                                            <div class="form-group no-margin form-group-default">
-                                                                <label>{{ data.serviceType.id === 4 ? '1688 Login Id/Email/Phone' : 'Account No.' }}</label>
-                                                                <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
+                                                        <div class="col-auto p-r-0">
+                                                            <div class="b-a b-grey bg-master-lighter padding-15">
+                                                                <div class="m-b-5" style="opacity: 0.4">
+                                                                    <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="107.5" y1="82.30469" x2="107.5" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-1_114458_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="107.5" y1="56.10156" x2="107.5" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-2_114458_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="82.30469" x2="123.625" y2="101.12525" gradientUnits="userSpaceOnUse" id="color-3_114458_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="123.625" y1="56.10156" x2="123.625" y2="73.73962" gradientUnits="userSpaceOnUse" id="color-4_114458_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="25.98006" x2="86" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-5_114458_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-6_114458_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="115.5625" y1="25.98006" x2="115.5625" y2="147.8125" gradientUnits="userSpaceOnUse" id="color-7_114458_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="53.75" y1="99.4375" x2="53.75" y2="106.82813" gradientUnits="userSpaceOnUse" id="color-8_114458_gr8"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="63.15625" y1="85.88713" x2="63.15625" y2="94.23719" gradientUnits="userSpaceOnUse" id="color-9_114458_gr9"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="44.34375" y1="85.94356" x2="44.34375" y2="94.00606" gradientUnits="userSpaceOnUse" id="color-10_114458_gr10"><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="M104.8125,83.3125h5.375v16.125h-5.375z" fill="url(#color-1_114458_gr1)"></path><path d="M104.8125,56.4375h5.375v16.125h-5.375z" fill="url(#color-2_114458_gr2)"></path><path d="M120.9375,83.3125h5.375v16.125h-5.375z" fill="url(#color-3_114458_gr3)"></path><path d="M120.9375,56.4375h5.375v16.125h-5.375z" fill="url(#color-4_114458_gr4)"></path><path d="M155.875,37.625v-5.375c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-102.125c-2.96431,0 -5.375,2.41069 -5.375,5.375v5.375c0,2.96431 2.41069,5.375 5.375,5.375v16.7485c-10.01631,2.28438 -17.68644,10.78494 -18.69425,21.2205c-4.68431,1.15831 -8.18075,5.36694 -8.18075,10.406c0,5.47444 4.12531,9.9545 9.42506,10.61563c0.47569,1.36256 1.05888,2.67406 1.75763,3.91569c-10.38181,7.02512 -16.55769,18.57062 -16.55769,31.15619v8.0625h69.875h5.375h64.5v-5.375h-5.375v-96.75c2.96431,0 5.375,-2.41069 5.375,-5.375zM48.375,32.25h102.125l0.00538,5.375h-102.13038zM34.9375,83.3125c0,-10.37106 8.44144,-18.8125 18.8125,-18.8125c10.37106,0 18.8125,8.44144 18.8125,18.8125v10.75c0,10.37106 -8.44144,18.8125 -18.8125,18.8125c-10.37106,0 -18.8125,-8.44144 -18.8125,-18.8125zM26.875,91.375c0,-1.98069 1.08844,-3.69531 2.6875,-4.62788v7.31538c0,0.67188 0.04838,1.33569 0.10213,1.99412c-1.6555,-0.91644 -2.78963,-2.66062 -2.78963,-4.68162zM53.75,118.25c7.095,0 13.46437,-3.08794 17.89338,-7.97113c1.51575,1.01319 2.90788,2.15 4.20862,3.37281c-5.58194,6.28069 -13.62831,9.97331 -22.102,9.97331c-8.47637,0 -16.52275,-3.68994 -22.102,-9.97062c1.30075,-1.22281 2.69288,-2.35963 4.20863,-3.37281c4.429,4.8805 10.79838,7.96844 17.89338,7.96844zM21.5,139.75v-2.6875c0,-7.14875 2.3435,-13.89169 6.49837,-19.393c6.57631,7.15681 15.9315,11.3305 25.75163,11.3305c9.81744,0 19.17531,-4.17369 25.75163,-11.33319c4.15487,5.504 6.49837,12.24962 6.49837,19.39569v2.6875zM115.5625,139.75v-5.375h29.5625v5.375zM145.125,118.25h-18.8125v5.375h18.8125v5.375h-29.5625v-13.4375c0,-4.44512 -3.61738,-8.0625 -8.0625,-8.0625h-13.4375v5.375h13.4375c1.4835,0 2.6875,1.204 2.6875,2.6875v24.1875h-18.8125v-2.6875c0,-12.58556 -6.17588,-24.13106 -16.55769,-31.15619c0.70144,-1.24162 1.28463,-2.55044 1.75762,-3.91569c5.29975,-0.66112 9.42506,-5.14119 9.42506,-10.61562c0,-5.03906 -3.49644,-9.24769 -8.18075,-10.406c-1.1825,-12.24156 -11.52131,-21.844 -24.06925,-21.844v-16.125h91.375zM77.9375,94.0625v-7.31538c1.59906,0.93256 2.6875,2.64719 2.6875,4.62788c0,2.021 -1.13412,3.76519 -2.78963,4.68162c0.05375,-0.65844 0.10213,-1.32225 0.10213,-1.99412z" fill="url(#color-5_114458_gr5)"></path><path d="M99.4375,102.125h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,86h32.25l0.00538,10.75h-32.25538z" fill="url(#color-6_114458_gr6)"></path><path d="M99.4375,75.25h32.25c2.96431,0 5.375,-2.41069 5.375,-5.375v-10.75c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-32.25c-2.96431,0 -5.375,2.41069 -5.375,5.375v10.75c0,2.96431 2.41069,5.375 5.375,5.375zM99.4375,59.125h32.25l0.00538,10.75h-32.25538z" fill="url(#color-7_114458_gr7)"></path><path d="M53.75,107.5c4.45319,0 8.0625,-3.60931 8.0625,-8.0625h-16.125c0,4.45319 3.60931,8.0625 8.0625,8.0625z" fill="url(#color-8_114458_gr8)"></path><path d="M63.15625,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-9_114458_gr9)"></path><path d="M44.34375,86c-2.2264,0 -4.03125,1.80485 -4.03125,4.03125c0,2.2264 1.80485,4.03125 4.03125,4.03125c2.2264,0 4.03125,-1.80485 4.03125,-4.03125c0,-2.2264 -1.80485,-4.03125 -4.03125,-4.03125z" fill="url(#color-10_114458_gr10)"></path></g></g></svg>
+                                                                </div>
+                                                                <div class="absolute bg-master text-white p-t-5 p-b-5 p-r-10 p-l-10 fs-8" style="border-radius: 10px 0px;top: -10px;right: -15px;">Coming Soon</div>
+                                                                <p class="no-margin bold muted">Pay-On-Behalf</p>
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <div class="relative w-100">
-                                                                <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" 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="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
-                                                                                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
-                                                                                    <div class="row align-items-center justify-content-center">
-                                                                                        <div class="col">
-                                                                                            <div class="row">
+                                                    <div class="row" v-show="!createBank">
+                                                        <div class="col-7 p-r-0">
+                                                            <div class="row" id="select-list" name="select-list">
+                                                                <div class="col">
+                                                                    <div class="form-group no-margin form-group-default">
+                                                                        <label>{{ data.serviceType.id === 4 ? '1688 Login Id/Email/Phone' : 'Account No.' }}</label>
+                                                                        <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="relative w-100">
+                                                                        <div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !dropdownStatus}]" 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="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
+                                                                                        <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
+                                                                                            <div class="row align-items-center justify-content-center">
                                                                                                 <div class="col">
-                                                                                                    <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
-                                                                                                </div>
-                                                                                            </div>
-                                                                                            <div class="row">
-                                                                                                <div class="col">
-                                                                                                    <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
+                                                                                                    <div class="row">
+                                                                                                        <div class="col">
+                                                                                                            <div class="font-heading bold lh-15 fs-13">{{bank.reference ? bank.reference + ' - ':''}}{{bank.holder_name}}</div>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                    <div class="row">
+                                                                                                        <div class="col">
+                                                                                                            <div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{bank.account_no}}</b> {{bank.bank_name}}</div>
+                                                                                                        </div>
+                                                                                                    </div>
                                                                                                 </div>
                                                                                             </div>
                                                                                         </div>
@@ -137,45 +141,45 @@
                                                                 </div>
                                                             </div>
                                                         </div>
+                                                        <div class="col-auto p-l-0" v-show="!createBank && account_no && !Object.keys(parameters.bankAccount).length">
+                                                            <button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
+                                                                <i class="fa fa-plus m-r-5"></i>
+                                                                Create New
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row" v-show="createBank">
+                                                        <div class="col">
+                                                            <bank-account-form-component v-if="data.serviceType.id !== 4" section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" :currency="data.serviceType.selectedCurrency.short_code" v-on:createdBank="updateBank($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()"></bank-account-form-component>
+                                                            <phone-account-form-component v-if="data.serviceType.id === 4" section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()"></phone-account-form-component>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto p-l-0" v-show="!createBank && account_no && !Object.keys(parameters.bankAccount).length">
-                                                    <button class="btn btn-sm h-100 btn-primary b-rad-none all-caps" @click="createBank = !createBank; dropdownStatus = false">
-                                                        <i class="fa fa-plus m-r-5"></i>
-                                                        Create New
-                                                    </button>
-                                                </div>
                                             </div>
-                                            <div class="row" v-show="createBank">
-                                                <div class="col">
-                                                    <bank-account-form-component v-if="data.serviceType.id !== 4" section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" :currency="data.serviceType.selectedCurrency.short_code" v-on:createdBank="updateBank($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()"></bank-account-form-component>
-                                                    <phone-account-form-component v-if="data.serviceType.id === 4" section="customerProfileSection" :disabled="formDisabled" :data="Object.keys(parameters.bankAccount).length ? parameters.bankAccount  : {account_no: account_no, company_id: data.company.id, country_id: 2, account_type: 2}" :company_id="data.company.id" :country_id="2" :type="2" v-on:createdBank="updateBank($event)" :serviceType="data.serviceType" :closable=false v-on:close="clearAccount()"></phone-account-form-component>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <!--<div class="row">-->
-                                        <!--<div class="col-sm-12 col-md-8">-->
                                             <!--<div class="row">-->
-                                                <!--<div class="col p-r-0">-->
-                                                    <!--<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">-->
-                                                        <!--<div class="row">-->
-                                                            <!--<div class="col p-t-10 p-b-5 ">-->
+                                                <!--<div class="col-sm-12 col-md-8">-->
+                                                    <!--<div class="row">-->
+                                                        <!--<div class="col p-r-0">-->
+                                                            <!--<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="parameters.bankAccount.status = !parameters.bankAccount.status">-->
                                                                 <!--<div class="row">-->
-                                                                    <!--<div class="col">-->
-                                                                        <!--<div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.holder_name}}</div>-->
+                                                                    <!--<div class="col p-t-10 p-b-5 ">-->
+                                                                        <!--<div class="row">-->
+                                                                            <!--<div class="col">-->
+                                                                                <!--<div class="font-heading bold fs-13 lh-15">{{parameters.bankAccount.reference ? parameters.bankAccount.reference + ' - ':''}}{{parameters.bankAccount.holder_name}}</div>-->
+                                                                            <!--</div>-->
+                                                                        <!--</div>-->
+                                                                        <!--<div class="row">-->
+                                                                            <!--<div class="col">-->
+                                                                                <!--<div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>-->
+                                                                            <!--</div>-->
+                                                                        <!--</div>-->
                                                                     <!--</div>-->
-                                                                <!--</div>-->
-                                                                <!--<div class="row">-->
-                                                                    <!--<div class="col">-->
-                                                                        <!--<div class="font-heading all-caps fs-13 muted"><b class="m-r-5 text-primary">{{parameters.bankAccount.account_no}}</b> {{parameters.bankAccount.bank_name}}</div>-->
-                                                                    <!--</div>-->
-                                                                <!--</div>-->
-                                                            <!--</div>-->
-                                                            <!--<div class="col-auto b-l b-grey ">-->
-                                                                <!--<div class="row h-100 align-items-center">-->
-                                                                    <!--<div class="col">-->
-                                                                        <!--<i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>-->
+                                                                    <!--<div class="col-auto b-l b-grey ">-->
+                                                                        <!--<div class="row h-100 align-items-center">-->
+                                                                            <!--<div class="col">-->
+                                                                                <!--<i class="fa text-primary" :class="[{'fa-angle-down': !parameters.bankAccount.status}, {'fa-angle-up': parameters.bankAccount.status}]"></i>-->
+                                                                            <!--</div>-->
+                                                                        <!--</div>-->
                                                                     <!--</div>-->
                                                                 <!--</div>-->
                                                             <!--</div>-->
@@ -183,95 +187,106 @@
                                                     <!--</div>-->
                                                 <!--</div>-->
                                             <!--</div>-->
-                                        <!--</div>-->
-                                    <!--</div>-->
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <div class="row m-b-15">
+                                <div class="col">
+                                    <div class="font-heading all-caps bold fs-10">Transfer Amount and Charges</div>
+                                    <div class="font-heading fs-8 muted all-caps">** These are the rate as of <span class="text-danger">{{this.parameters.calculation.date}}</span>, all charges and rates are subject to change when making payment</div>
+                                </div>
+                            </div>
+                            <div class="row align-items-end no-margin">
+                                <div class="col">
+                                    <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                        <div class="col">
+                                            <div class="font-heading fs-10 all-caps">Amount you are Transferring</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading fs-10 bold">{{this.parameters.type === 0 ? 'MYR': parameters.serviceType.selectedCurrency.short_code}}</div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading fs-10 bold">{{(Math.round((parseFloat(this.parameters.amount.replace(",", ""))+ Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end  p-t-10 p-b-10">
+                                        <div class="col">
+                                            <div class="font-heading fs-10 all-caps text-primary">Exchange Rate</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading fs-10"></div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading fs-10 text-primary bold">{{(Math.round((this.parameters.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                        <div class="col">
+                                            <div class="font-heading fs-10 all-caps">Money Transfer Fee</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading fs-10">MYR</div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end p-t-10 p-b-10">
+                                        <div class="col text-right">
+                                            <div class="font-heading fs-10 all-caps">Sub-Total</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading fs-10">MYR</div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
+                                        <div class="col text-right">
+                                            <div class="font-heading fs-10 all-caps">Tax</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading fs-10">{{Math.round((this.parameters.calculation.tax + Number.EPSILON) * 100) / 100}}%</div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="row align-items-end p-t-10 p-b-10">
+                                        <div class="col text-right">
+                                            <div class="font-heading all-caps bold">Amount you are Paying</div>
+                                        </div>
+                                        <div class="col-1 no-padding text-center">
+                                            <div class="font-heading bold">MYR</div>
+                                        </div>
+                                        <div class="col-3 text-right">
+                                            <div class="font-heading text-success bold">{{(Math.round((this.parameters.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <confirm-booking-component :section="section" :data="data" v-if="parameters.bankAccount"></confirm-booking-component>
                 </div>
             </div>
-            <div class="row m-b-20">
+            <div class="row" v-else>
                 <div class="col">
-                    <div class="row m-b-15">
-                        <div class="col">
-                            <div class="font-heading all-caps bold fs-10">Transfer Amount and Charges</div>
-                            <div class="font-heading fs-8 muted all-caps">** These are the rate as of <span class="text-danger">{{this.parameters.calculation.date}}</span>, all charges and rates are subject to change when making payment</div>
-                        </div>
-                    </div>
-                    <div class="row align-items-end no-margin">
-                        <div class="col">
-                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
-                                <div class="col">
-                                    <div class="font-heading fs-10 all-caps">Amount you are Transferring</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading fs-10 bold">{{this.parameters.type === 0 ? 'MYR': parameters.serviceType.selectedCurrency.short_code}}</div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading fs-10 bold">{{(Math.round((parseFloat(this.parameters.amount.replace(",", ""))+ Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
-                                </div>
-                            </div>
-                            <div class="row align-items-end  p-t-10 p-b-10">
-                                <div class="col">
-                                    <div class="font-heading fs-10 all-caps text-primary">Exchange Rate</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading fs-10"></div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading fs-10 text-primary bold">{{(Math.round((this.parameters.calculation.rate + Number.EPSILON) * 100000) / 100000).toFixed(5)}}</div>
-                                </div>
-                            </div>
-                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
-                                <div class="col">
-                                    <div class="font-heading fs-10 all-caps">Money Transfer Fee</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading fs-10">MYR</div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
-                                </div>
-                            </div>
-                            <div class="row align-items-end p-t-10 p-b-10">
-                                <div class="col text-right">
-                                    <div class="font-heading fs-10 all-caps">Sub-Total</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading fs-10">MYR</div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.sub_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
-                                </div>
-                            </div>
-                            <div class="row align-items-end bg-master-lightest p-t-10 p-b-10">
-                                <div class="col text-right">
-                                    <div class="font-heading fs-10 all-caps">Tax</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading fs-10">{{Math.round((this.parameters.calculation.tax + Number.EPSILON) * 100) / 100}}%</div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading fs-10">{{(Math.round((this.parameters.calculation.tax_total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
-                                </div>
-                            </div>
-                            <div class="row align-items-end p-t-10 p-b-10">
-                                <div class="col text-right">
-                                    <div class="font-heading all-caps bold">Amount you are Paying</div>
-                                </div>
-                                <div class="col-1 no-padding text-center">
-                                    <div class="font-heading bold">MYR</div>
-                                </div>
-                                <div class="col-3 text-right">
-                                    <div class="font-heading text-success bold">{{(Math.round((this.parameters.calculation.total + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
-                                </div>
-                            </div>
-                        </div>
+                    <p>1. Alipay account must be real name verified (实名认证), linked (已绑定), and activated (已激活) to the 1688 account.</p>
+                    <p>2. Choose "secure transaction" (担保交易) and avoid using Angpao during order submission.</p>
+                    <p>3. Purchase invoice will be available in 1-2 days after payment.</p>
+                    <p>4. Our staff will request the OTP (验证码) for the first login to your 1688 after submitting the order.</p>
+                    <div class="btn btn-sm btn-primary b-rad-none all-caps d-block" @click="step++">
+                        I Agree
                     </div>
                 </div>
             </div>
-            <confirm-booking-component :section="section" :data="data" v-if="parameters.bankAccount"></confirm-booking-component>
         </div>
     </div>
 </template>
@@ -287,6 +302,8 @@
               recipientBanks: [],
               dropdownStatus: false,
               account_no: '',
+              step:1,
+            
           }
         },
         computed: {