Untitled
unknown
plain_text
2 years ago
66 kB
2
Indexable
<template>
<div>
<div class="modal modal-mask modal-mask-checkout" v-if="openModal">
<div class="modal-dialog modal-container modal-checkout">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" @click="step === 2 ? previousStep() : close()">
<i class="fa fa-chevron-left"></i>
</button>
<div class="text-left inline-block">
<h3 class="title ticket-selected-text">{{ event.title }}</h3>
</div>
<div class="text-right float-right">
<h3 class="title ticket-selected-text date">{{ changeDateFormat(this.booking_date, 'dddd LLL') }} {{ changeTimeFormat(this.start_time, 'hh:mm A') }}</h3>
</div>
</div>
<div class="container" v-html="form_payment_response"></div>
<div v-show="selecting_seat && !is_virtual_event">
<iframe
:src="src_ticket"
frame-id="my-ifram"
class="ticket-border"
name="my-frame"
width="100%"
height="85%"
/>
<div class="col-lg-1 col-xs-12 pull-right">
<button @click="checkout();" class="lgx-btn lgx-btn-red btn btn-block green-btn">{{ trans('em.checkout') }}</button>
</div>
</div>
<form v-show="!selecting_seat" ref="form" @submit.prevent="validateForm" method="POST" >
<!-- CUSTOM -->
<div class="form-group pl-3" v-if="is_admin > 0">
<input type="checkbox" class="custom-control-input" :value=1 name="is_bulk" v-model="is_bulk" >
<label class="custom-control-label" >{{ trans('em.complimentary_bookings') }}</label>
</div>
<!-- CUSTOM -->
<input type="hidden" class="form-control" name="event_id" :value="event.event_id" >
<input type="hidden" class="form-control" name="booking_date" :value="serverTimezone(booking_date+' '+start_time, 'dddd LL HH:mm a').format('YYYY-MM-DD')" >
<input type="hidden" class="form-control" name="booking_end_date"
:value="(booking_end_date != null && typeof(booking_end_date) != 'undefined') ?
serverTimezone(booking_end_date+' '+end_time, 'dddd LL HH:mm a').format('YYYY-MM-DD') : null"
>
<input type="hidden" class="form-control" name="start_time" :value="serverTimezone(booking_date+' '+start_time, 'dddd LL HH:mm a').format('HH:mm:ss')" >
<input type="hidden" class="form-control" name="end_time" :value="serverTimezone((booking_end_date == null ? booking_date : booking_end_date) +' '+end_time, 'dddd LL HH:mm a').format('HH:mm:ss')" >
<input type="hidden" class="form-control" name="merge_schedule" :value="event.merge_schedule" >
<!-- CUSTOM -->
<div class="row" v-if="is_twilio > 0">
<div class="col-md-12 mb-5" >
<input type="hidden" class="form-control" name="phone_t" v-model="phone_t" >
<div class="col-md-5" v-if="customer != null && customer.phone == null ">
<label>{{ trans('em.phone') + '('+ trans('em.required') +')' }}</label>
<input type="text" class="form-control" name="phone_t" v-model="phone_t" v-validate="'required'" :placeholder="trans('em.phone_info')">
<span v-show="errors.has('phone_t')" class="help text-danger">{{ errors.first('phone_t') }}</span>
</div>
</div>
</div>
<!-- CUSTOM -->
<div class="row">
<!-- only for admin & organizer -->
<!-- <div class="col-md-12 mb-5" v-if="is_customer <= 0"> -->
<!-- Booking Info -->
<div class="container">
<div v-if="(step === 2 && t_type === 2) || t_type === 1">
<div class="checkout_title">{{ trans('em.Event_Information') }}</div>
<table class="ui celled striped table">
<tr>
<th>{{ trans('em.Event_Name') }}</th>
<td>{{ event.title }}</td>
</tr>
<tr>
<th>{{ trans('em.Event_Date') }}</th>
<td>{{ changeDateFormat(moment(userTimezone(moment(booking_date,'dddd LL').format('YYYY-MM-DD') + ' ' + moment(start_time, 'hh:mm A').format('HH:mm:ss'), 'YYYY-MM-DD HH:mm:ss').format('YYYY-MMM-DD'))) }} {{ changeTimeFormat(start_time) }} {{ '('+ showTimezone() +')' }} </td>
</tr>
<tr v-if="!is_virtual_event">
<th>{{ trans('em.Event_Location') }}</th>
<td>{{ event.city }}, {{ event.venue }}</td>
</tr>
</table>
</div>
<div v-if="is_virtual_event">
<input type="hidden" class="form-control" name="ticket_id[]" :value="tickets[0].id" >
<input type="hidden" class="form-control" name="ticket_title[]" :value="tickets[0].title" >
<input type="hidden" class="form-control" name="quantity[]" :value="quantity[0]" >
</div>
<div class="tc_class" v-else>
<div v-if="t_type === 1">
<div class="checkout_title">{{ trans('em.Ticket_Information') }}</div>
</div>
<div v-if="(step === 1 && t_type === 2)">
<div class="checkout_title">{{ trans('em.tickets') }}</div>
</div>
<div v-if="t_type == 1">
<!-- CUSTOM -->
<table
v-for="(item, index) in quantity"
:key = "index"
class="ticket_type_checkout ui celled striped table"
>
<tbody v-if="quantity[index] > 0">
<input type="hidden" class="form-control" name="ticket_id[]" :value="tickets[index].id" >
<input type="hidden" class="form-control" name="ticket_title[]" :value="tickets[index].title" >
<input type="hidden" class="form-control" name="quantity[]" :value="quantity[index]" >
<tr>
<th>{{ trans('em.Ticket_Type') }}</th>
<td>{{ tickets[index].title }}</td>
</tr>
<tr>
<th>{{ trans('em.Seat_Number') }}</th>
<td class="seat_number"><p v-for="(seat, index) in ticket_info[tickets[index].id]"
:key = "index">{{ seat[1] }}</p></td>
</tr>
<tr>
<th>{{ trans('em.Quantity') }}</th>
<td>{{ ticket_info[tickets[index].id] ? ticket_info[tickets[index].id].length : 0 }}</td>
</tr>
<tr>
<th>{{trans('em.Price')}}</th>
<td class="price-convert" :data-currency="currency" :data-amount="tickets[index].price"></td>
</tr>
</tbody>
</table>
</div>
<div v-else-if="t_type === 2">
<div v-if="step === 1 && step !== 2">
<div class="col-md-12 nopm">
<ul class="list-group m-0">
<li class="list-group-item justify-content-between lh-condensed d-flex-wrap nopm"
v-for="(item, index) in tickets"
:key = "index"
>
<ul class="list-group m-0 list-group-flush">
<li class="list-group-item d-flex justify-content-between lh-condensed d-flex-wrap plr-none">
<input type="hidden" class="form-control" name="ticket_id[]" :value="item.id" >
<input type="hidden" class="form-control" name="ticket_title[]" :value="item.title" >
<div class="w-50">
<h6 class="my-0 item_title">{{ item.title }}</h6>
</div>
<div v-if="item.t_soldout > 0" class="w-10 w-20-mobile">
<p class="text-danger"><small><i class="fas fa-times-circle"></i> {{ trans('em.t_soldout') }}</small></p>
</div>
<div class="w-10 text-right item-price" v-if="item.t_soldout <= 0">
{{item.price}}
</div>
<div v-show="item.t_soldout <= 0" class="w-30 w-20-mobile">
<div v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0">
<p>{{ trans('em.quantity') }}: {{ quantity[index] }}</p>
</div>
<div v-if="is_bulk > 0 ">
<div v-if='typeof(booked_tickets[item.id+"-"+booked_date_server]) != "undefined"
'>
<input type="number" name="quantity[]"
v-model="quantity[index]" value="0" class="form-control form-input-sm"
min="0"
>
<!-- Show if vacant less than max_ticket_qty -->
<p class="text-info"
v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < max_ticket_qty && booked_tickets[item.id+'-'+booked_date_server].total_vacant > 0">
<small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
{{ booked_tickets[item.id+'-'+booked_date_server].total_vacant }}</small>
</p>
<p class="text-danger"
v-if="booked_tickets[item.id+'-'+booked_date_server].total_vacant < max_ticket_qty && booked_tickets[item.id+'-'+booked_date_server].total_vacant <= 0">
<small><i class="fas fa-times-circle"></i> {{ trans('em.vacant') }} 0</small>
</p>
</div>
<div v-else>
<input type="number" name="quantity[]" v-model="quantity[index]" value="0" class="form-control form-input-sm" min="0" >
<!-- Show if vacant less than max_ticket_qty -->
<p class="text-info"
v-if="item.quantity < max_ticket_qty && item.quantity > 0">
<small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
{{ item.quantity }}</small>
</p>
<p class="text-danger"
v-if="item.quantity <= 0">
<small><i class="fas fa-times-circle"></i> {{ trans('em.vacant') }} 0</small>
</p>
</div>
</div>
<div class="custom" :class="{'no-display': (item.seatchart != null && item.seatchart.status > 0)}">
<div class="custom-dropdown" v-click-outside="closeDropdown">
<div
class="custom-dropdown-selected"
:class="{ 'clicked': dropdownVisible[index] }"
@click="toggleDropdown(index)"
>
{{ displayText[index] || trans('em.Number_of_tickets') }}
</div>
<div class="custom-dropdown-options" :class="{ 'show': dropdownVisible[index] }">
<div
class="custom-dropdown-option"
:class="{ 'selected': quantity[index] === null }"
@click="selectOption(index, null)"
>
{{ trans('em.Number_of_tickets') }}
</div>
<div
class="custom-dropdown-option"
:class="{ 'selected': itm === quantity[index] }"
v-for="(itm, ind) in item.quantity > max_ticket_qty ? parseInt(max_ticket_qty) : parseInt(item.quantity)"
:key="ind"
@click="selectOption(index, itm)"
>
{{ itm }}
</div>
</div>
</div>
<p
class="text-info"
v-if="item.quantity < max_ticket_qty && item.quantity > 0"
>
<small><i class="fas fa-exclamation"></i> {{ trans('em.vacant') }}
{{ item.quantity }}</small>
</p>
<p class="text-danger" v-if="item.quantity <= 0">
<small><i class="fas fa-times-circle"></i> {{ trans('em.vacant') }} 0</small>
</p>
</div>
</div>
<div class="break-flex">
<p class="ticket-info" v-if="ticket_info[index]">{{ item.description }}</p>
<div class="ui horizontal divider">
<a
class="pointer ticket-info-toggle"
@click="toggleTicketInfo(index)"
>
<small v-if="ticket_info[index]">{{ trans('em.hide_info') }} <i class="fal fa-angle-down"></i></small>
<small v-else>{{ trans('em.show_info') }} <i class="fal fa-angle-up"></i></small>
</a>
</div>
</div>
<!-- *** CUSTOM *** start-->
<div style="overflow: auto;" class="break-flex" v-if="item.seatchart != null && item.seatchart.status > 0 && is_bulk <= 0 && item.t_soldout <= 0">
<seat-component :ticket="item" :ticket_index="index" :max_ticket_qty="max_ticket_qty" :quantity="quantity[index]" :event="event"></seat-component>
</div>
<div class="break-flex" v-show="item.promocodes && item.promocodes.length > 0">
<div class="input-group mt-5" v-show="item.price > 0 && item.t_soldout <= 0 && is_bulk <= 0">
<input type="text" name="promocode[]" class="form-control form-input-sm" :placeholder="trans('em.enter_promocode')"
v-model="promocode[index]"
:id="'pc_'+index"
>
<span class="input-group-btn">
<button class="btn lgx-btn lgx-btn-sm lgx-btn-success" type="button"
@click="pc_readonly[index] > 0 ? '' : applyPromocode(item.id, index)"
:id="'pcb_'+index"
>
{{ trans('em.apply') }}
</button>
</span>
</div>
<span class="text-success" :id="'pc_success_'+index"></span>
<span class="text-danger" :id="'pc_error_'+index"></span>
</div>
<!-- *** CUSTOM *** end-->
<!-- CUSTOM -->
</li>
</ul>
<!-- CUSTOM -->
</li>
</ul>
</div>
</div>
<!-- END LIST TICKET -->
</div>
</div>
<div class="checkout_title pt-20">{{ trans('em.Price_Information') }}</div>
<table class="ui celled striped table">
<tr>
<th>{{ trans('em.Total_Tickets_Price') }}</th>
<td class="price-convert" :data-currency="currency" :data-amount="totalExcludeTax()"></td>
</tr>
<tr>
<th>{{ trans('em.VAT') }}</th>
<td class="price-convert" :data-currency="currency" :data-amount="total_tax.reduce((a, b) => a+b, 0)"></td>
</tr>
<tr>
<th>{{ trans('em.Total_Price') }}</th>
<td class="price-convert" :data-currency="currency" :data-amount="total"></td>
</tr>
</table>
<div v-if="step === 1 && t_type === 2 && showNextButton">
<div class="col-md-2 col-sm-6 pull-right nopm">
<button @click="nextStep" class="lgx-btn lgx-btn-red btn btn-block green-btn">{{ trans('em.checkout') }}</button>
</div>
</div>
<div v-if="(step === 2 && t_type === 2) || t_type === 1">
<form class="coupon_form" ref="form_coupon" @submit.prevent="validateFormCoupon" method="POST">
<div class="ui action input">
<input type="text" name="coupon" :placeholder="trans('em.Coupon_Code')" required>
<button class="ui button" type="submit" :class="{ 'disabled' : disable }" :disabled="disable">{{ trans('em.apply') }}</button>
</div>
</form>
<div v-if="num_coupon > 0" :data-num-coupon="num_coupon">
<div class="checkout_title">{{ trans('em.Your_Guests_Details') }}</div>
<p>{{ trans('em.please_enter_your_guests_name') }}</p>
<div v-for="index in parseInt(num_coupon)" :key="index" :data-index="index" class="ui two column grid">
<div class="column">
<div class="ui input">
<input type="text" :placeholder="trans('em.Name_frind_gift')" class="custom-control-input" :name="`name_${index}`">
</div>
</div>
<div class="column">
<div class="ui input">
<input type="text" :placeholder="trans('em.Email_frind_gift')" class="custom-control-input" :name="`email_${index}`">
</div>
</div>
</div>
</div>
<div class="ui horizontal divider">{{ trans('em.Payment_method') }}</div>
<p>{{ trans('em.Please_select_a_payment_method') }}</p>
<!-- If not logged in -->
<div v-if="!register_user_id">
<div class="alert alert-danger">
{{ trans('em.please_login_signup') }}
</div>
</div>
<!-- Payments -->
<div v-if="bookedTicketsTotal() > 0 && register_user_id">
<!-- CUSTOM -->
<!-- Free -->
<!-- <div class="d-block my-3" v-if="total <= 0"> -->
<div class="d-block my-3" v-if="(parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) <= 0">
<div class="radio-inline">
<input id="free_order" name="free_order" type="radio" class="custom-control-input" checked v-model="payment_method" value="free">
<label class="custom-control-label" for="free_order"> <i class="fas fa-glass-cheers"></i> {{ trans('em.free') }} <small>({{ trans('em.rsvp') }} )</small></label>
</div>
</div>
<!-- Paid -->
<div class="d-block my-3" v-else-if="(parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0">
<!-- For Organizer & Customer -->
<div v-if="is_admin <= 0 && is_bulk <= 0" v-for="(method, index) in payment_methods" class="radio-inline">
<input type="radio" class="custom-control-input hidden-checkbox" :id="method.payment_method_slug" name="payment_method" v-model="payment_method" :value="method.payment_method_id">
<img :src="'/storage/payment/image_for_' + method.payment_method_slug + '.png'" alt="Payment Method" class="checkbox-image" @click="onSelectPaymentMethod(method); toggleCheckbox(method.payment_method_slug, method)">
</div>
<!-- CUSTOM -->
<!-- For Admin & Organizer & Customer -->
<div class="radio-inline"
v-if="(is_organiser > 0 && is_offline_payment_organizer > 0) || (is_customer > 0 && is_offline_payment_customer > 0) || (is_admin > 0) || (is_bulk > 0)">
<input type="radio" class="custom-control-input" id="payment_method_offline" name="payment_method" v-model="payment_method" value="offline">
<label class="custom-control-label" for="payment_method_offline">
<i class="fas fa-suitcase-rolling"></i> {{ trans('em.offline') }}
<small>({{ trans('em.cash_on_arrival') }})</small>
</label>
</div>
<p v-if="payment_method == 'offline'" class="text-info"><strong>{{ trans('em.offline_payment_info') }}: </strong><small v-html="event.offline_payment_info"></small></p>
<p class="text-mute" v-html="trans('em.order_terms')"></p>
</div>
</div>
<!-- CUSTOM -->
<stripe-component
ref="stripe"
v-if="payment_method == 2 && total > 0 && register_user_id && is_admin <= 0 && isStripe > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"
:payment_method="payment_method" :bookings_data="bookings_data"
:stripePublishableKey="stripePublishableKey"
:stripeSecretKey="stripe_secret_key"
></stripe-component>
<authorize-net v-if="total > 0 && register_user_id && is_admin <= 0 && isAuthorizeNet > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></authorize-net>
<tpay v-if="total > 0 && register_user_id && is_admin <= 0 && isTPay > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></tpay>
<wallet v-if="total > 0 && register_user_id && is_admin <= 0 && isWallet > 0 && (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></wallet>
<pay-stack ref="pay_stack" v-if="payment_method == 6 && total > 0 && register_user_id && is_admin <= 0 && is_pay_stack > 0 (parseFloat(total) - parseFloat(promocode_reward)).toFixed(2) > 0"></pay-stack>
<!-- CUSTOM -->
<div class="row">
<div class="col-md-2 col-sm-12" v-if="register_user_id">
<button :class="{ 'disabled' : disable }" :disabled="disable" type="submit" class="btn lgx-btn lgx-btn-red" ><i class="fas fa-cash-register"></i> {{ (total <= 0) ? trans('em.rsvp') : trans('em.checkout') }}</button>
</div>
<div class="col-xs-12" v-else>
</div>
</div>
</div>
</div> </div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations} from 'vuex';
import mixinsFilters from '../../../../mixins.js';
import _ from 'lodash';
// CUSTOM
import Stripe from './custom/Stripe.vue';
import RegisterUser from './custom/RegisterUser.vue';
import AuthorizeNet from './custom/AuthorizeNet.vue';
import AddAttendee from './custom/AddAttendee';
import VueCountdown from '@chenfengyuan/vue-countdown';
import AttendeeComponent from './custom/Attendee.vue';
import SeatComponent from './custom/Seat';
import PayStack from './custom/PayStack';
import TPay from './custom/TPay';
import Wallet from "./custom/Wallet";
// CUSTOM
Vue.directive("click-outside", {
bind(el, binding, vnode) {
el.clickOutsideEvent = function (event) {
if (!(el === event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener("mouseup", el.clickOutsideEvent);
},
unbind(el) {
document.body.removeEventListener("mouseup", el.clickOutsideEvent);
},
});
export default {
components: {
// CUSTOM
'stripe-component' : Stripe,
RegisterUser,
AuthorizeNet,
AddAttendee,
VueCountdown,
AttendeeComponent,
SeatComponent,
'pay-stack' : PayStack,
'tpay': TPay,
'wallet': Wallet,
// CUSTOM
},
mixins:[
mixinsFilters
],
props : [
'tickets',
'max_ticket_qty',
'event',
'currency',
'login_user_id',
'is_admin',
'is_organiser',
'is_pos',
'is_customer',
'is_paypal',
'is_fawry',
'is_offline_payment_organizer',
'is_offline_payment_customer',
'booked_tickets',
'is_virtual_event',
'payment_methods',
'wallet',
'num_coupon',
'index',
],
data() {
return {
openModal : false,
ticket_info : [],
moment : moment,
quantity : [1],
price : null,
total_price : [],
showNextButton: false,
customer_id : 0,
total : 0,
step: 1,
displayText: [],
eventListeners: [],
total_display : '',
total_tax : [],
total_tax_display : '',
disable : false,
payment_method : 'offline',
payment_method_slug : '',
form_payment_response : '',
phone_number: '',
displayText: [],
dropdownVisible: [],
// customers options
options : [],
//selected customer
customer : null,
/* CUSTOM */
//promocode
bookings_data : null,
stripePublishableKey : stripe_publishable_key,
stripe_secret_key : stripe_secret_key,
isStripe : is_stripe,
email : '',
register_user_id : this.login_user_id,
register_modal : 0,
//promocode
promocode : [],
ticket_promocodes : [],
pc_readonly : [],
promocode_reward : 0,
// cardName : "diep",
// cardNumber : "4005550000000001",
// cardMonth : "05",
// cardYear : "2025",
// cardCvv : "123",
cardName : "",
cardNumber : "",
cardMonth : "",
cardYear : "",
cardCvv : "",
isAuthorizeNet : false,
isTPay: false,
isWallet: false,
is_bitpay : is_bitpay,
is_stripe_direct : is_stripe_direct,
add_attendee : 0,
is_twilio : is_twilio,
phone_t : '',
name : [[],[]],
phone : [[],[]],
address : [[],[]],
is_bulk : 0,
is_donation : [],
pay_stack : 0,
is_pay_stack : is_pay_stack,
/* CUSTOM */
selecting_seat: true,
src_ticket: '',
t_type: 1,
}
},
computed: {
// get global variables
...mapState( ['booking_date', 'start_time', 'end_time', 'booking_end_date', 'booked_date_server', ]),
},
methods: {
// update global variables
...mapMutations(['add', 'update']),
checkout: function() {
let url = route('events_get_booking_seat');
let post_data = new FormData();
post_data.append('event_id', this.event.event_id);
post_data.append('tickets', JSON.stringify(this.tickets) );
post_data.append('post_id', this.event.post_id);
if (this.num_coupon > 0) {
post_data.append('buy_coupon', 1);
post_data.append('num_coupon', this.num_coupon);
}
// show loader
this.showLoaderNotification(trans('em.processing'));
axios.post(url, post_data).then(res => {
Swal.close();
var quantity = res.data.quantity.reduce((a, b) => a + b, 0);
if (quantity <= 0) {
window.app.$helpers.showToast('warning', 'Please select seat');
} else {
this.selecting_seat = this.is_virtual_event ? false : !this.selecting_seat;
this.quantity = res.data.quantity;
this.ticket_info = res.data.seat;
}
}).catch(e => {
Swal.close();
console.error(url, e);
})
},
toggleTicketInfo(index) {
this.$set(this.ticket_info, index, !this.ticket_info[index]);
},
closeDropdown() {
this.dropdownVisible = this.dropdownVisible.map(() => false);
},
toggleDropdown(index) {
this.$set(this.dropdownVisible, index, !this.dropdownVisible[index]);
},
selectOption(index, value) {
if (value === null) {
value = 0;
}
this.$set(this.quantity, index, value);
this.$set(
this.displayText,
index,
value === 0
? null
: `${this.trans('em.Edit_selection')} (${value})`
);
this.$set(this.dropdownVisible, index, false);
},
nextStep() {
this.step += 1;
},
previousStep() {
this.step -= 1;
},
getLinkSeatChartThenOpen: function() {
let url = route('events_get_link_seat_chart');
let post_data = new FormData();
post_data.append('event_id', this.event.event_id);
post_data.append('post_id', this.event.post_id);
post_data.append('start_date', moment(moment(this.booking_date,'dddd LL').format('YYYY-MM-DD') + ' ' + moment(this.start_time, 'hh:mm A').format('HH:mm:ss'), 'YYYY-MM-DD HH:mm:ss').locale('en').format('YYYY-MM-DD'));
post_data.append('start_time', moment(this.start_time, 'hh:mm A').locale('en').format('HH:mm:ss'));
// show loader
this.showLoaderNotification(trans('em.processing'));
axios.post(url, post_data).then(res => {
this.src_ticket = res.data.src_ticket;
this.selecting_seat = true;
Swal.close();
}).catch(e => {
Swal.close();
console.error(url, e);
})
},
// reset form and close modal
close: function () {
this.price = null;
this.quantity = [];
this.total_price = [];
this.add({
booking_date : null,
booked_date_server : null,
booking_end_date : null,
start_time : null,
end_time : null,
})
this.openModal = false;
},
toggleCheckbox(id, method) {
const checkbox = document.getElementById(id);
const allCheckboxes = document.getElementsByName(checkbox.name);
// Deselect all radio buttons
allCheckboxes.forEach(input => {
const img = input.nextElementSibling;
img.classList.remove('selected');
});
// Select the clicked radio button
checkbox.checked = true;
const image = checkbox.nextElementSibling;
image.classList.add('selected');
// Update the payment_method model value
this.payment_method = method.payment_method_id;
// Trigger the change event for the checkbox
checkbox.dispatchEvent(new Event('change'));
},
onSelectPaymentMethod(method) {
this.isAuthorizeNet = 0;
this.isTPay = 0;
this.isWallet = 0;
if (method.payment_method_slug == 'payfort') {
this.isAuthorizeNet = 1;
} else if (method.payment_method_slug == 'tpay') {
this.isTPay = 1;
} else if (method.payment_method_slug == 'wallet') {
this.isWallet = 1;
}
},
bookTickets(){
// show loader
// this.showLoaderNotification(trans('em.processing'));
// prepare form data for post request
// this.disable = true;
let post_url = route('eventmie.bookings_book_tickets');
let post_data = new FormData(this.$refs.form);
post_data.append("device_fingerprint", document.getElementById('device_fingerprint').value);
//CUSTOM
if (this.num_coupon > 0) {
post_data.append('buy_coupon', 1);
post_data.append('num_coupon', this.num_coupon);
}
/* CUSTOM */
// in case of Stripe
// if(this.payment_method == 2 && this.total > 0) {
// this.stripePayment(post_data);
// } else if(this.payment_method == 6 && this.total > 0){
// this.PayStack(post_data);
// } else {
/* CUSTOM */
// axios post request
axios.post(post_url, post_data)
.then(res => {
if(res.data.status && res.data.message != '' && typeof(res.data.message) != "undefined") {
// hide loader
Swal.hideLoading();
// close popup
this.close();
this.showNotification('success', res.data.message);
}
else if(!res.data.status && res.data.message != '' && res.data.url != '' && typeof(res.data.url) != "undefined"){
// hide loader
Swal.hideLoading();
// close popup
this.close();
this.showNotification('error', res.data.message);
setTimeout(() => {
window.location.href = res.data.url;
}, 1000);
}
if(res.data.url != '' && res.data.status && typeof(res.data.url) != "undefined") {
// hide loader
Swal.hideLoading();
setTimeout(() => {
window.location.href = res.data.url;
}, 1000);
}
if(res.data.form != '' && res.data.status && typeof(res.data.form) != "undefined") {
// hide loader
Swal.hideLoading();
this.form_payment_response = res.data.form;
setTimeout(() => {
document.getElementById('form-payfort-tokenization').submit();
}, 1000);
}
if(!res.data.status && res.data.message != '' && typeof(res.data.message) != "undefined") {
// hide loader
Swal.hideLoading();
// close popup
this.close();
this.showNotification('error', res.data.message);
}
})
.catch(error => {
this.disable = false;
let serrors = Vue.helpers.axiosErrors(error);
if (serrors.length) {
this.serverValidate(serrors);
}
});
// }
},
applyCoupon() {
// show loader
// this.showLoaderNotification(trans('em.processing'));
// prepare form data for post request
// this.disable = true;
let post_url = route('eventmie.bookings_apply_coupon');
let post_data = new FormData(this.$refs.form_coupon);
post_data.append("event_id", this.event.event_id);
axios.post(post_url, post_data)
.then(res => {
this.disable = false;
})
.catch(error => {
this.disable = false;
let serrors = Vue.helpers.axiosErrors(error);
if (serrors.length) {
this.serverValidate(serrors);
}
});
// }
},
// validate data on form submit
validateForm(e) {
this.$validator.validateAll().then((result) => {
if (result) {
this.disable = true;
// this.formSubmit(e);
//CUSTOM
this.bookTickets();
//CUSTOM
}
else{
this.disable = false;
}
});
},
validateFormCoupon(e) {
var _this = this;
this.$validator.validateAll().then((result) => {
if (result) {
_this.disable = true;
_this.applyCoupon(e);
}
else{
_this.disable = false;
}
});
},
// show server validation errors
serverValidate(serrors) {
this.disable = false;
this.$validator.validateAll().then((result) => {
this.$validator.errors.add(serrors);
});
},
// count total tax
countTax(price, tax, rate_type, net_price, quantity) {
price = parseFloat(price).toFixed(2);
tax = parseFloat(tax).toFixed(2);
var total_tax = parseFloat(quantity * tax).toFixed(2);
// in case of percentage
if(rate_type == 'percent')
{
if(isNaN((price * total_tax)/100))
return 0;
total_tax = (parseFloat((price*total_tax)/100)).toFixed(2);
if(net_price == 'excluding')
return total_tax+' '+this.currency+' ('+tax+'%'+' '+trans('em.exclusive')+')';
else
return total_tax+' '+this.currency+' ('+tax+'%'+' '+trans('em.inclusive')+')';
}
// for fixed tax
if(rate_type == 'fixed')
{
if(net_price == 'excluding')
return total_tax+' '+this.currency+' ('+tax+' '+this.currency+' '+trans('em.exclusive')+')';
else
return total_tax+' '+this.currency+' ('+tax+' '+this.currency+' '+trans('em.inclusive')+')';
}
return 0;
},
// count total price
totalPrice(){
if(this.quantity != null || this.quantity.length > 0)
{
let amount;
let tax;
let total_tax ;
this.quantity.forEach(function(value, key) {
total_tax = 0;
this.total_price[key] = [];
//CUSTOM
if (this.tickets[key]) {
if(this.tickets[key].is_donation <= 0){
amount = (parseFloat(value * this.tickets[key].price)).toFixed(2);
}else if( value > 0 && this.tickets[key].is_donation > 0){
amount = (parseFloat(1 * this.tickets[key].price)).toFixed(2);
}else if(value <= 0 && this.tickets[key].is_donation > 0){
this.$parent.tickets[key].price = 0;
this.is_donation[key] = 0;
amount = 0;
}
}
//CUSTOM
// amount = (parseFloat(value * this.tickets[key].price)).toFixed(2);
// when have no taxes set set total_price with actual ammount without taxes
if(Object.keys(this.total_price).length > 0)
{
this.total_price.forEach(function(v, k){
// if(Object.keys(v).length <= 0);
//CUSTOM
if(Object.keys(v).length <= 0 && !isNaN(v));
//CUSTOM
this.total_price[key] = amount;
}.bind(this))
}
if(this.tickets[key] &&
this.tickets[key].taxes &&
this.tickets[key].taxes.length > 0 &&
amount > 0) {
this.tickets[key].taxes.forEach(function(tax_v, tax_k) {
// in case of percentage
if(tax_v.rate_type == 'percent')
{
// in case of excluding
if(tax_v.net_price == 'excluding')
{
tax = isNaN((amount * tax_v.rate)/100) ? 0 : (parseFloat((amount*tax_v.rate)/100)).toFixed(2);
total_tax = parseFloat(total_tax) + parseFloat(tax);
}
}
// // in case of percentage
if(tax_v.rate_type == 'fixed')
{
tax = parseFloat(value *tax_v.rate);
// // in case of excluding
if(tax_v.net_price == 'excluding')
total_tax = parseFloat(total_tax) + parseFloat(tax);
}
}.bind(this))
}
this.total_price[key] = (parseFloat(amount) + parseFloat(total_tax)).toFixed(2);
this.total_tax[key] = total_tax;
}.bind(this));
}
},
updateItem() {
this.$emit('changeItem');
},
setDefaultQuantity() {
// only set default value once
var _this = this;
var promise = new Promise(function(resolve, reject) {
// only set default value once
if(_this.quantity.length == 1) {
_this.tickets.forEach(function(value, key) {
if(key == 0)
_this.quantity[key] = 0;
else
_this.quantity[key] = 0;
}.bind());
}
resolve(true);
});
promise.then(function(successMessage) {
_this.totalPrice();
_this.orderTotal();
/* CUSTOM start*/
_this.resetPromocode();
/* CUSTOM end*/
}, function(errorMessage) {
});
},
// count prise all booked tickets
orderTotal() {
this.total = 0
if(Object.keys(this.total_price).length > 0)
{
this.total_price.forEach(function(value, key){
//CUSTOM
if(isNaN(value))
value = 0;
//CUSTOM
this.total = (parseFloat(this.total) + parseFloat(value)).toFixed(2);
}.bind(this))
return this.total;
}
return 0;
},
totalExcludeTax() {
let total = 0
if(this.quantity != null && this.quantity.length > 0)
{
this.quantity.forEach(function(value, key){
total = parseInt(total) + parseInt(value) * parseInt(this.tickets[key].price);
}.bind(this))
return total;
}
return 0;
},
updateShowNextButton() {
const total = this.totalExcludeTax();
this.showNextButton = total > 0;
},
// total booked tickets
bookedTicketsTotal() {
let total = 0
if(this.quantity != null && this.quantity.length > 0)
{
this.quantity.forEach(function(value, key){
total = parseInt(total) + parseInt(value);
}.bind(this))
return total;
}
return 0;
},
defaultPaymentMethod() {
// if not admin
// total > 0
// if(this.is_admin <= 0 && this.bookedTicketsTotal() > 0)
// this.payment_method = 1;
//CUSTOM
// if premium order & not-admin
if(this.is_admin <= 0 && this.orderTotal() > 0 && (parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) > 0)
this.payment_method = default_payment_method;
// if premium order & admin
else if(this.is_admin >= 1 && this.orderTotal() > 0 && (parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) > 0)
this.payment_method = 'offline';
else
this.payment_method = default_payment_method;
if(this.is_bulk > 0)
{
this.payment_method = 'offline';
}
// for free
if((parseFloat(this.total) - parseFloat(this.promocode_reward)).toFixed(2) <= 0)
this.payment_method = 'free';
//CUSTOM
},
loginFirst() {
window.location.href = route('eventmie.login_first');
},
signupFirst() {
window.location.href = route('eventmie.signup_first');
},
// get customers
getCustomers(loading, search = null){
var postUrl = route('eventmie.get_customers');
var _this = this;
axios.post(postUrl,{
'search' :search,
}).then(res => {
var promise = new Promise(function(resolve, reject) {
_this.options = res.data.customers;
resolve(true);
})
promise
.then(function(successMessage) {
loading(false);
}, function(errorMessage) {
//error handler function is invoked
console.log(errorMessage);
})
})
.catch(error => {
let serrors = Vue.helpers.axiosErrors(error);
if (serrors.length) {
this.serverValidate(serrors);
}
});
},
// v-select methods
onSearch(search, loading) {
loading(true);
this.search(loading, search, this);
},
// v-select methods
search: _.debounce((loading, search, vm) => {
if(vm.validateEmail(search))
vm.getCustomers(loading, search);
else
loading(false);
}, 350),
validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
//CUSTOM
// stipe open modal
stripePayment(bookings_data = null) {
this.bookings_data = bookings_data;
this.$refs.stripe.stripeCheckout();
},
//apply promocode
applyPromocode(ticket_id = null, index = null){
if(this.register_user_id == null){
this.showNotification('error', trans('em.please_login'));
return true;
}
if((this.is_admin > 0 || this.is_organiser > 0) && this.customer == null){
this.showNotification('error', trans('em.select_customer'));
return true;
}
if(ticket_id != null && this.promocode[index] != null && this.promocode[index] != '' && this.promocode[index] != 'undefined'){
axios.post(route('apply_promocodes'),{
'ticket_id' : ticket_id,
'promocode' : this.promocode[index],
'customer_id' : (this.is_customer > 0) ? this.register_user_id : this.customer_id,
})
.then(res => {
if(res.data.status > 0) {
console.log('success');
var _this = this;
var promise = new Promise(function(resolve, reject) {
_this.ticket_promocodes[index] = res.data.promocode;
resolve(true);
});
promise
.then(function(successMessage) {
_this.promocodeReward();
}, function(errorMessage) {
console.log(errorMessage);
});
// success
this.pc_readonly[index] = 1;
// promocode apply button text change
document.getElementById('pcb_'+index).innerHTML = trans('em.applied');
// error field set null
document.getElementById('pc_error_'+index).innerHTML = '';
// show promocode's reward
document.getElementById('pc_success_'+index).innerHTML = res.data.promocode.reward+
(res.data.promocode.p_type == 'fixed' ? this.currency : '%')+' OFF!';
// promocode input field readonly
document.getElementById('pc_'+index).readOnly = true;
// promocode apply button disable
document.getElementById('pcb_'+index).disabled = true;
} else {
console.log('error');
// error
this.pc_readonly[index] = 0;
// promocode input field readonly
document.getElementById('pc_'+index).readOnly = false;
// error field set
document.getElementById('pc_error_'+index).innerHTML = res.data.message;
//success message set null
document.getElementById('pc_success_'+index).innerHTML = '';
// promocode input field clear
document.getElementById('pc_'+index).value = '';
// promocode v-model value set null
this.promocode[index] = '';
}
})
.catch(error => {
Vue.helpers.axiosErrors(error);
});
}
},
// promocode' reward
promocodeReward(){
this.promocode_reward = 0;
if(Object.keys(this.ticket_promocodes).length > 0){
this.ticket_promocodes.forEach(function(value, key){
if(value != 'undefined' && value != '' && value != null) {
if(value.p_type == 'fixed'){
this.promocode_reward = isNaN(parseFloat(this.promocode_reward) + parseFloat(value.reward)) ? this.promocode_reward :
(parseFloat(this.promocode_reward) + parseFloat(value.reward));
}
else {
if(this.total_price[key] > 0) {
this.promocode_reward = this.promocode_reward + (isNaN((this.total_price[key]*value.reward)/100) ? this.promocode_reward : parseFloat((this.total_price[key]*value.reward)/100));
}
}
}
}.bind(this))
}
this.defaultPaymentMethod();
return this.promocode_reward.toFixed(2);
},
// reset promocode fields
resetPromocode(){
this.quantity.forEach(function(value, key){
if(Number(value) <= 0 || value == '' || value == 'undefined' || value == null ) {
// promocode apply button disable
if (document.getElementById('pcb_'+key)) {
document.getElementById('pcb_'+key).disabled = false;
// promocode apply button text change
document.getElementById('pcb_'+key).innerHTML = trans('em.apply');
// promocode apply button disable
document.getElementById('pcb_'+key).disabled = true;
}
// promocode input field readonly
if (document.getElementById('pc_'+key)) {
document.getElementById('pc_'+key).readOnly = false;
document.getElementById('pc_'+key).value = '';
// promocode input field readonly
document.getElementById('pc_'+key).readOnly = true;
}
// success
this.pc_readonly[key] = 1;
//clear field
this.promocode[key] = '';
// error field set null
document.getElementById('pc_error_'+key) ? document.getElementById('pc_error_'+key).innerHTML = '' : '';
// show promocode's reward
document.getElementById('pc_success_'+key) ? document.getElementById('pc_success_'+key).innerHTML = '' : '';
this.ticket_promocodes[key] = '';
}
else{
if(this.promocode[key] == 'undefined' || this.promocode[key] == '') {
// promocode apply button disable
document.getElementById('pcb_'+key).disabled = false;
// promocode input field readonly
document.getElementById('pc_'+key).readOnly = false;
this.pc_readonly[key] = 0;
document.getElementById('pc_'+key).value = '';
// promocode apply button text change
document.getElementById('pcb_'+key).innerHTML = trans('em.apply');
// error field set null
document.getElementById('pc_error_'+key).innerHTML = '';
// show promocode's reward
document.getElementById('pc_success_'+key).innerHTML = '';
}
}
}.bind(this))
},
timerOnSale(sale_start_date = null, sale_end_date = null){
if(sale_start_date == null || sale_end_date == null)
return true;
var local_tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
var a = this.userTimezone(sale_end_date, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm:ss');
var b = moment().tz(local_tz).format('DD/MM/YYYY HH:mm:ss');
var ms = 0; // milliseconds
if(moment(a,"DD/MM/YYYY HH:mm:ss") > moment(b,"DD/MM/YYYY HH:mm:ss")){
ms = moment(a,"DD/MM/YYYY HH:mm:ss").tz(local_tz).diff(moment(b,"DD/MM/YYYY HH:mm:ss").tz(local_tz)); //milliseconds
}
return ms;
},
// create attenddes fields
createFields(){
this.tickets.forEach(function(v, k){
this.name[k] = [];
this.phone[k] = [];
this.address[k] = [];
}.bind(this))
},
// for input box
isDonation(){
if(this.tickets.length > 0)
{
this.tickets.forEach(function(value, key){
if(value.is_donation > 0 ){
if(this.is_donation[key] == undefined || this.is_donation[key] == ''){
this.is_donation[key] = parseFloat(0);
this.total_price[key] = parseFloat(0);
}
this.$parent.tickets[key].price = parseFloat(this.is_donation[key]).toFixed(2);
this.is_donation[key] = this.is_donation[key];
}
}.bind(this))
}
},
// for group button
setDonationValue(index = null, price = 0){
if(index == null)
return true;
if(this.tickets[index].is_donation > 0){
var id = 'donation_'+index;
document.getElementById(id).value = parseFloat(price);
this.is_donation[index] = parseFloat(price);
this.tickets[index].price = parseFloat(price);
this.quantity[index] = this.quantity[index];
this.isDonation();
this.totalPrice();
this.orderTotal();
this.$forceUpdate();
}
},
// accept only numeric value
NumbersOnly(evt) {
var evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
},
//paystack payment
PayStack(booking_data){
this.$refs.pay_stack.PayStack(booking_data)
}
//CUSTOM
},
watch: {
quantity: function () {
//CUSTOM
this.isDonation();
//CUSTOM
this.totalPrice();
this.orderTotal();
this.defaultPaymentMethod();
this.updateShowNextButton();
/* CUSTOM */
this.resetPromocode();
this.promocodeReward();
/* CUSTOM */
},
tickets: function() {
//CUSTOM
this.isDonation();
//CUSTOM
this.updateShowNextButton();
this.totalPrice();
this.orderTotal();
},
// active when customer search
customer: function () {
this.customer_id = this.customer != null ? this.customer.id : null;
},
// CUSTOM
is_donation: function() {
this.isDonation();
this.totalPrice();
this.orderTotal();
},
// CUSTOM
},
mounted() {
this.openModal = true;
if (this.register_user_id) {
console.log('register_user_id', this.register_user_id);
if (this.is_virtual_event) {
this.checkout();
} else {
if (this.tickets.length > 0 && (this.tickets[0].t_type == 2 || this.tickets[0].t_type == 3)) {
this.selecting_seat = false;
this.t_type = 2;
} else {
this.t_type = 1;
this.getLinkSeatChartThenOpen();
}
}
}
this.setDefaultQuantity();
this.defaultPaymentMethod();
// CUSTOM
this.createFields();
// CUSTOM
},
updated() {
window.reload_currency();
}
}
</script>