exchange-2.0/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-20 text-center" v-if="($store.getters.isSuperAdmin || $store.getters.getUserId === 2231)&& creditable">
                <div class="col">
                    <div class="row">
                        <div class="col p-r-5">
                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'bg-success': parameters.transaction_type === 1, 'text-white': parameters.transaction_type === 1, 'b-grey': parameters.transaction_type !== 1 }"  @click="parameters.transaction_type !== 1 ? parameters.transaction_type = 1 : parameters.transaction_type = 0">
                                <p class="no-margin bold">Credit</p>
                            </div>
                        </div>
                        <div class="col p-l-5">
                            <div class="b-a b-grey bg-white p-t-20 p-b-20 p-l-45 p-r-45 pointer" :class="{ 'bg-danger': parameters.transaction_type === 2, 'text-white': parameters.transaction_type === 2, 'b-grey': parameters.transaction_type !== 2 }"  @click="parameters.transaction_type !== 2 ? parameters.transaction_type = 2 : parameters.transaction_type = 0">
                                <p class="no-margin bold">Debit</p>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10" v-if="parameters.transaction_type !== 0">
                        <div class="col text-left">
                            <validation-wrapper-component :validator="$v.parameters.reference">
                                <label>Reference</label>
                                <input class="form-control" v-model="parameters.reference">
                            </validation-wrapper-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component :validator="$v.parameters.amount">
                        <label>{{parameters.transaction_type == 'debit' ? 'Withdraw' : 'Top Up'}} Amount (MYR)</label>
                        <input class="form-control" v-model.lazy="parameters.amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
                    </validation-wrapper-component>
                </div>
            </div>
            <div class="row m-t-15 m-l-0 m-r-0">
                <div class="col p-l-0 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '500.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 500}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 500}]">MYR<br>500</div>
                </div>
                <div class="col p-l-5 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '1000.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 1000}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 1000}]">MYR<br>1,000</div>
                </div>
                <div class="col p-l-5 p-r-0">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '3000.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 3000}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 3000}]">MYR<br>3,000</div>
                </div>
            </div>
            <div class="row m-t-10 m-l-0 m-r-0">
                <div class="col p-l-0 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '5000.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 5000}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 5000}]">MYR<br>5,000</div>
                </div>
                <div class="col p-l-5 p-r-5">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '10000.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 10000}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 10000}]">MYR<br>10,000</div>
                </div>
                <div class="col p-l-5 p-r-0">
                    <div class="btn btn-block btn-sm b-rad-none p-t-10 p-b-10 lh-15" @click="parameters.amount = '50000.00'" :class="[{'btn-complete': parseInt(parameters.amount.replace(/\,/g,'')) === 50000}, {'btn-default': parseInt(parameters.amount.replace(/\,/g,'')) !== 50000}]">MYR<br>50,000</div>
                </div>
            </div>
            <div class="row m-t-15 justify-content-center parentContainer" v-if="parseFloat(parameters.amount.replace(/\,/g,'')) > 0" >
                <div class="col-10">
                    <div class="btn btn-sm btn-complete btn-block b-rad-none requestModal" data-type="paymentSummary">Reload Credit</div>
                </div>
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="paymentSummary">
                    <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                    <div class="row" v-show="!isLoading">
                        <div class="col bg-white padding-25">
                            <div class="row m-b-20">
                                <div class="col">
                                    <div class="font-heading fs-11">You will be redirected to your bank to complete the payment of <span class="text-success bold">{{parameters.amount}} MYR</span> for wallet credit top up. After clicking on the confirm button below. please follow your bank instruction to complete the payment</div>
                                </div>
                            </div>
                            <div class="row m-b-5">
                                <div class="col">
                                    <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter" data-dismiss="modal">Cancel</button>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-sm all-caps b-rad-none btn-success" @click="submitForm()">Confirm & Proceed</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </modal-component>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import {VMoney} from 'v-money'
    import { required, requiredIf, minValue} from "vuelidate/lib/validators";

    export default {
        props: {
            amount: {
                type: String,
                default: '0.00'
            },
            creditable: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                isLoading: false,
                parameters: {
                    company_id: this.data.id,
                    amount: '0.00',
                    transaction_type: 0,
                    reference: ''
                },
            }
        },
        created(){
           this.parameters.amount = this.amount
        },
        validations () {
            return {
                parameters: {
                    amount: {
                        required,
                        minValue: 0,
                    },
                    reference: {
                        required: requiredIf(function () { return this.parameters.transaction_type !== 0 })
                    }
                }
            }
        },
        computed: {
            minValue()
            {
                return this.transaction_type === 0 ? 10.0000 : 0;
            }
        },
        methods: {
            successHandler(response){
                if (this.parameters.transaction_type === 0) {
                    window.location.href = this.route('billplz.bill', response.payload.data.reference) + '?auto_submit=true';
                    return;
                }
                location.reload();
            },
            submitForm() {
                this.isLoading = true;

                if (this.parameters.transaction_type !== 0 && this.creditable) {
                    this.submit(this.route('api.wallet.credit'), 'post', '', true, true);
                    return;
                }

                this.submit(this.route('api.wallet.topup'), 'post', '', true, true);
            }
        },
        mixins: [componentHandler],
        directives: {money: VMoney}
    }
</script>