You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.3 KiB
118 lines
4.3 KiB
<template>
|
|
<div
|
|
class="BookingInfo tw-flex tw-flex-col xl:tw-flex-row xl:tw-justify-between tw-bg-neutrals-0 tw-rounded-[20px] tw-text-base-primary tw-p-5"
|
|
>
|
|
<div class="tw-mb-[31px] md:tw-mb-[29px]">
|
|
<div
|
|
class="tw-body-4 tw-text-error-default tw-font-bold tw-mb-[12px] tw-mt-[4px] md:tw-body-2 md:tw-mt-[8px]"
|
|
>
|
|
<span :class="bookingColor(bookingStatusMap(BookingOrder.order_status))"
|
|
>{{ bookingStatusMap(BookingOrder.order_status) }}, </span
|
|
>
|
|
<span v-if="BookingOrder.order_payment != null" :class="bookingColor(paymentStatusMap(BookingOrder.order_payment[0].payment_status))">{{
|
|
paymentStatusMap(BookingOrder.order_payment[0].payment_status)
|
|
}}</span>
|
|
</div>
|
|
<div class="tw-flex tw-items-center tw-mb-[11px] md:tw-mb-[18px]">
|
|
<div class="tw-body-4 tw-text-neutrals-800 tw-mr-[11px] md:tw-body-3">
|
|
{{ BookingOrder.order_display_id }}
|
|
</div>
|
|
<button
|
|
class="tw-body-5 tw-py-[4px] tw-px-[10px] tw-rounded-[12px] tw-bg-complementary-3 tw-text-complementary-1 md:tw-body-4 hover:tw-text-[#A0B5FF]"
|
|
@click="copy(BookingOrder.order_display_id)"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="tw-body-4 tw-text-neutrals-800 tw-mb-[14px] md:tw-body-3 md:tw-mb-[18px]"
|
|
>
|
|
Booking Date: {{ BookingOrder.created_at }}
|
|
</div>
|
|
<div
|
|
class="tw-flex tw-flex-col md:tw-flex-row md:tw-flex-row-reverse md:tw-justify-end"
|
|
>
|
|
<div
|
|
v-if="BookingOrder.subTotal > 50000"
|
|
class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[4px] tw-items-center tw-mb-[14px]"
|
|
>
|
|
<img src="~/assets/svg/Alert.svg" />
|
|
<div class="tw-body-4 tw-text-warning-default">Remittance only</div>
|
|
</div>
|
|
<div class="tw-body-4 tw-flex md:tw-body-3">
|
|
<div class="tw-mr-[4px]">Awaiting Payment:</div>
|
|
<div
|
|
class="tw-text-primary-1 tw-font-bold tw-mr-[12px] md:tw-mr-[32px]"
|
|
>
|
|
{{ BookingOrder.subTotal }} {{ BookingOrder.currency }}
|
|
</div>
|
|
<button
|
|
class="tw-text-complementary-1 tw-flex md:tw-mr-[33px] hover:tw-text-[#A0B5FF]"
|
|
@click="$modal.show('ViewDetails')"
|
|
>
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tw-flex tw-flex-col lg:tw-pr-[0px]">
|
|
<div
|
|
class="tw-grid tw-cols-2 tw-gap-[10px] tw-body-3 tw-mb-[22px] lg:tw-cols-1"
|
|
>
|
|
<button
|
|
class="tw-col-span-2 tw-bg-primary-1 tw-py-[10px] tw-px-[121px] tw-rounded-[16px] tw-text-neutrals-0 hover:tw-bg-primary-2"
|
|
>
|
|
Go to Pay
|
|
</button>
|
|
<button
|
|
class="tw-py-[10px] tw-px-[19px] tw-rounded-[12px] tw-text-neutrals-400 tw-border-solid tw-border-neutrals-400 tw-border-[1px] xl:tw-col-span-2 hover:tw-bg-neutrals-100"
|
|
@click="$modal.show('CancelBooking')"
|
|
>
|
|
Cancel Booking
|
|
</button>
|
|
<button
|
|
class="tw-py-[10px] tw-px-[35px] tw-rounded-[12px] tw-text-primary-1 tw-border-solid tw-border-primary-1 tw-border-[1px] xl:tw-col-span-2 hover:tw-bg-primary-3"
|
|
@click="$modal.show('ContactUs')"
|
|
>
|
|
Contact Us
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-items-center tw-mb-[21px] lg:tw-mb-[9px] xl:tw-place-self-end"
|
|
>
|
|
<img src="~/assets/svg/fi_help-circle.svg" />
|
|
<button
|
|
class="tw-text-complementary-1 tw-flex md:tw-mr-[33px] hover:tw-text-[#A0B5FF]"
|
|
@click="$modal.show('CancellationPolicy')"
|
|
>
|
|
Cancellation Policy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { bookingStatusMap, paymentStatusMap, bookingColor } from '@/plugins/util.js'
|
|
export default {
|
|
props: {
|
|
BookingOrder: {
|
|
type: Object,
|
|
order_items:[],
|
|
order_payment: [],
|
|
order_as: [],
|
|
},
|
|
},
|
|
methods: {
|
|
bookingStatusMap,
|
|
paymentStatusMap,
|
|
bookingColor,
|
|
async copy(copyText){
|
|
window.navigator.clipboard.writeText(copyText);
|
|
}
|
|
},
|
|
created() {
|
|
console.log(this.BookingOrder);
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|