ShowEasyFrontEnd/FrontEnd/components/booking/BookingInfo.vue

<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) }},&nbsp;</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>