From 09e3dc03ba99b32b55e40d1370b0e75b96f5d76c Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Fri, 11 Mar 2022 19:52:18 +0800
Subject: [PATCH] update bank account form component for ali pay

---
 .../banks/forms/BankAccountFormComponent.vue  |   9 +-
 .../banks/forms/PhoneAccountFormComponent.vue | 157 ++++++++++++++++++
 .../elements/BookingConfirmationComponent.vue |   5 +-
 3 files changed, 167 insertions(+), 4 deletions(-)
 create mode 100644 resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue

diff --git a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
index c91cf482..7e529be8 100644
--- a/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
+++ b/resources/assets/vue/components/banks/forms/BankAccountFormComponent.vue
@@ -33,12 +33,12 @@
                     <div class="row m-b-10">
                         <div class="col">
                             <validation-wrapper-component :validator="$v.parameters.account_no">
-                                <label>Account No.</label>
+                                <label>{{ serviceType.id === 6 ? 'Email / Phone No.' : 'Account No.' }}</label>
                                 <input type="text" class="form-control" v-model="parameters.account_no" :disabled="disabled">
                             </validation-wrapper-component>
                         </div>
                     </div>
-                    <div class="row"  v-if="type === 2">
+                    <div class="row" v-if="type === 2 && serviceType.id !== 6">
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
@@ -117,6 +117,11 @@
             country_id: {
                 type: Number,
                 default: 1
+            },
+            serviceType: {
+                type: Object,
+                required: false,
+                default: null
             }
         },
         data(){
diff --git a/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue b/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue
new file mode 100644
index 00000000..dffc1b2d
--- /dev/null
+++ b/resources/assets/vue/components/banks/forms/PhoneAccountFormComponent.vue
@@ -0,0 +1,157 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-20" v-if="type !== 2">
+                        <div class="col">
+                            <h6 class="all-caps m-b-5 bold no-margin">Add Bank Account</h6>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row m-b-10" v-if="type === 2">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.reference">
+                                <label>Reference</label>
+                                <input type="text" class="form-control" v-model="parameters.reference" :disabled="disabled">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.account_no">
+                                <label>{{ serviceType.id === 6 ? 'Email / Phone No.' : 'Account No.' }}</label>
+                                <input type="text" class="form-control" v-model="parameters.account_no" :disabled="disabled">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.holder_name">
+                                <label>Account Holder Name</label>
+                                <input type="text" class="form-control" v-model="parameters.holder_name" @keyup="onlyChinese($event)" :disabled="disabled">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row" v-show="englishTextWarning === true">
+                        <div class="col">
+                            <div class="fs-11 text-danger m-b-10" v-if="!confirmProceedEnglishText">Warning: We do not encourage to transfer to non-chinese receipient Ali Pay account ! <span class="text-danger bold pointer text-underline" @click="confirmProceedEnglishText = !confirmProceedEnglishText">Procced Anyway.</span></div>
+                            <div class="row" v-if="confirmProceedEnglishText">
+                                <div class="col text-danger bold">
+                                    <ul>
+                                        <li>Double Confirm your account transfer limit.</li>
+                                        <li>Your account may get frozen.</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="text-danger m-b-10" v-if="confirmProceedEnglishText">The risk is too high. <span class="text-danger bold pointer text-underline" @click="confirmProceedEnglishText = !confirmProceedEnglishText">I changed my mind.</span></div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" :data-dismiss="closable ? 'modal' : ''" @click="$emit('close')">{{disabled ? 'Change Recipient Account' : 'Cancel'}}</div>
+                        </div>
+                        <div class="col p-l-5" v-if="!disabled">
+                            <button class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()" :disabled="!confirmProceedEnglishText">Add Account</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import FormHandler from '../../../general/mixins/formHandler';
+    import { required, requiredIf } from "vuelidate/lib/validators";
+    export default {
+        props : {
+            company_id: {
+                type: Number,
+                default: 1
+            },
+            type: {
+                type: Number,
+                default: 1
+            },
+            closable: {
+                type: Boolean,
+                default: true
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            country_id: {
+                type: Number,
+                default: 1
+            },
+            serviceType: {
+                type: Object,
+                required: false,
+                default: null
+            }
+        },
+        data(){
+            return {
+                parameters: {
+                    company_id: this.company_id,
+                    account_type: 3,
+                    reference: '',
+                    bank_name: '-',
+                    holder_name: '',
+                    account_no: '',
+                    bank_branch: '-',
+                    country_id: this.country_id,
+                },
+                englishTextWarning: false,
+                confirmProceedEnglishText: false,
+            }
+        },
+        validations: {
+            parameters: {
+                holder_name: {
+                    required
+                },
+                account_no: {
+                    required
+                },
+                reference: {
+                    required: requiredIf(function () { return this.parameters.type === 2 })
+                }
+            }
+        },
+        methods: {
+            submitForm(){
+                this.parameters.account_type = 3,
+                this.parameters.bank_name = '-',
+                this.submit(route('api.bank.create'), 'post', this.section, true, false);
+            },
+            successHandler(response){
+                this.type !== 2 ? this.closeModal() : this.$emit('createdBank', response.payload.data);
+                this.formHandler();
+                this.resetForm();
+            },
+            errorHandler(error){
+                this.formHandler(error.message);
+            },
+            onlyChinese(event){
+                let value = event.target.value,
+                    regex = /^[^~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
+
+                event.preventDefault();
+
+                this.englishTextWarning = false;
+                if(regex.test(value) === false){
+                    this.englishTextWarning = true;
+                }
+            },
+        },
+        mixins: [FormHandler]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index dbb106e5..6d98fa3c 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -79,7 +79,7 @@
                                                     <div class="row">
                                                         <div class="col">
                                                             <div class="form-group no-margin form-group-default">
-                                                                <label>Account No.</label>
+                                                                <label>{{ data.serviceType.id === 6 ? 'Email / Phone No.' : 'Account No.' }}</label>
                                                                 <input type="text" class="form-control" v-model="account_no" @keyup="parameters.bankAccount = {}" @focus="dropdownStatus = true">
                                                             </div>
                                                         </div>
@@ -124,7 +124,8 @@
                                             </div>
                                             <div class="row" v-show="createBank">
                                                 <div class="col">
-                                                    <bank-account-form-component 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)" :closable=false v-on:close="clearAccount()"></bank-account-form-component>
+                                                    <bank-account-form-component v-if="data.serviceType.id !== 6" 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()"></bank-account-form-component>
+                                                    <phone-account-form-component v-if="data.serviceType.id === 6" 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>