mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Dillon Ngo
171 lines
8.6 KiB
Vue
171 lines
8.6 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-20 text-center" v-if="(authStore.isSuperAdmin || authStore.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 === 2 ? 'Withdraw' : 'Top Up' }} Amount (MYR)</label>
|
|
<input class="form-control" v-model.lazy="parameters.amount" v-money3="moneyConfig">
|
|
</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': getCleanAmount(parameters.amount) === 500}, {'btn-default': getCleanAmount(parameters.amount) !== 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': getCleanAmount(parameters.amount) === 1000}, {'btn-default': getCleanAmount(parameters.amount) !== 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': getCleanAmount(parameters.amount) === 3000}, {'btn-default': getCleanAmount(parameters.amount) !== 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': getCleanAmount(parameters.amount) === 5000}, {'btn-default': getCleanAmount(parameters.amount) !== 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': getCleanAmount(parameters.amount) === 10000}, {'btn-default': getCleanAmount(parameters.amount) !== 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': getCleanAmount(parameters.amount) === 50000}, {'btn-default': getCleanAmount(parameters.amount) !== 50000}]">MYR<br>50,000</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-15 justify-content-center parentContainer" v-if="getCleanAmount(parameters.amount) > 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" />
|
|
<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 setup lang="ts">
|
|
import { computed, onMounted } from 'vue';
|
|
import { useComponentHandler } from '@/composables/useComponentHandler';
|
|
import { useFormHandler } from '@/composables/useFormHandler';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { useVuelidate } from '@vuelidate/core';
|
|
import { required, requiredIf } from '@vuelidate/validators';
|
|
import route from '@/general/functions/router';
|
|
|
|
interface Props {
|
|
amount?: string;
|
|
creditable?: boolean;
|
|
data?: any;
|
|
section?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
amount: '0.00',
|
|
creditable: false,
|
|
section: ''
|
|
});
|
|
|
|
const { item } = useComponentHandler(props);
|
|
const authStore = useAuthStore();
|
|
|
|
const moneyConfig = { decimal: '.', thousands: ',', precision: 2 };
|
|
const { parameters, submit, isLoading } = useFormHandler({
|
|
section: props.section,
|
|
data: {
|
|
company_id: props.data?.id,
|
|
amount: props.amount,
|
|
transaction_type: 0,
|
|
reference: ''
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
parameters.value.amount = props.amount;
|
|
});
|
|
|
|
const minAllowedAmount = computed(() => {
|
|
return parameters.value.transaction_type === 0 ? 10.0000 : 0;
|
|
});
|
|
|
|
const rules = computed(() => ({
|
|
parameters: {
|
|
amount: {
|
|
required,
|
|
minValue: 0
|
|
},
|
|
reference: {
|
|
required: requiredIf(() => parameters.value.transaction_type !== 0)
|
|
}
|
|
}
|
|
}));
|
|
|
|
const v$ = useVuelidate(rules, { parameters });
|
|
|
|
const getCleanAmount = (val: any) => {
|
|
if (typeof val === 'string') {
|
|
return parseInt(val.replace(/,/g, ''));
|
|
}
|
|
return val;
|
|
};
|
|
|
|
const submitForm = async () => {
|
|
const isValid = await v$.value.$validate();
|
|
if (!isValid) return;
|
|
|
|
const endpoint = (parameters.value.transaction_type !== 0 && props.creditable)
|
|
? route('api.wallet.credit')
|
|
: route('api.wallet.topup');
|
|
|
|
submit(endpoint, 'post', props.section, true, true, parameters.value, {
|
|
successHandler: (response: any) => {
|
|
if (parameters.value.transaction_type === 0) {
|
|
window.location.href = route('billplz.bill', response.payload.data.reference) + '?auto_submit=true';
|
|
return;
|
|
}
|
|
location.reload();
|
|
}
|
|
});
|
|
};
|
|
</script>
|