ShowEasyFrontEnd/FrontEnd/components/booking/BookingInfoItem.vue

<template>
  <div
    class="BookingInfoItem booking-info-item tw-p-[20px] tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl xl:tw-p-[20px]"
  >
    <div class="tw-body-3 tw-font-bold md:tw-body-2 tw-mb-[21.5px]">
      {{ $t('Booking Details') }}
    </div>
    <div
      :class="[
        'info-content',
        ' tw-flex',
        'tw-items-start',
        'tw-mb-[10px]',
        'md:tw-mb-[15px]',
        ' -tw-mx-[7px]',
        'xl:-tw-mx-[8px]',
      ]"
    >
      <div>
        <img
          class="tw-rounded tw-ml-[6px] tw-px-[2px] md:tw-rounded-[8px]"
          :src="Img"
        />
      </div>
      <div
        class="element content-text tw-ml-[13px] md:tw-ml-[17px] tw-text-black"
      >
        <div class="t14 tw-font-bold tw-mb-[10px] md:t16 xl:tw-leading-[21px]">
          {{ info.service_name}}
        </div>
        <div
          class="tw-grid tw-grid-cols-[40px_auto] tw-gap-[10px] tw-items-center tw-mb-[12px]"
        >
          <img :src="Supplier.logo" />
          <div class="id tw-body-5 lg:tw-body-3 tw-text-hint">
            {{ Supplier.brand }}
          </div>
        </div>
        <div class="detail tw-body-5 tw-mb-[10px]" v-for="(item, key) in info.order_item" :key="key">
          {{ (item.package_name && item.package_name!='' ? item.package_name + ",&nbsp;" : "") + (item.customer_plan_name ? item.customer_plan_name + ",&nbsp;" : "") + item.specification_name +
          "&nbsp;x&nbsp;" + item.quantity }}
        </div>
        <div class="date tw-body-5 tw-mb-[10px]" v-for="(item, key) in info.order_as" :key="key">{{ item.as_name  + "&nbsp;x&nbsp;" + item.quantity }}
        </div>
        <div v-if="info.service_date != null || info.service_time != null" class="date tw-body-5 tw-mb-[10px]">
         {{info.service_date}} {{info.service_time}} (Local time)
        </div>
        <div
          class="total t14 tw-text-primary-1 tw-mb-[10px] md:tw-mb-[20px] md:t16"
        >
          ${{ info.subTotal }} {{ info.currency }}
        </div>
        <button
            v-if="info.order_question_answer.length  > 0 "
          class="t14 tw-font-bold tw-p-[11px] tw-bg-complementary-1 tw-bg-opacity-10 tw-rounded-[10px] tw-text-complementary-1 hover:tw-text-secondary-light"
          @click="$modal.show('OtherDetails')"
        >
          {{ $t('Other Details') }}
        </button>
      </div>
    </div>
    <div
      class="tw-grid tw-grid-rows-[18px_auto_32px] tw-gap-[15px] tw-border-solid tw-border-neutrals-200 tw-rounded-[20px] tw-p-[20px] lg:tw-ml-[120px]"
    >
      <div
        class="tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-items-center tw-mb-[15px]"
      >
        <img src="~/assets/svg/Vector.svg" />
        <div
          class="t14 tw-font-bold tw-text-warning-default tw-items-center tw-font-bold md:t12 lg:t16"
        >
          {{ $t('Notice') }}
        </div>
      </div>
      <div v-html="NoticeDetails.message_content">
        </div>
      <button
        class="tw-body-3 tw-text-warning-default tw-border-solid tw-border-warning-default tw-border-[1px] tw-rounded-[12px] tw-place-self-center tw-py-[7px] tw-px-[16px] md:t14 lg:tw-body-3 lg:tw-place-self-start hover:tw-bg-success-background"
        @click="$modal.show('NoticeDetails')"
      >
        {{ $t('Notice Details') }}
      </button>
    </div>
  </div>
</template>
<script>
  import elementTextarea from "@/components/newComponent/form/ElementTextarea";
  import elementPromoCode from "@/components/newComponent/form/ElementPromoCode";
  import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
  export default {
    components: {
      elementTextarea,
      elementPromoCode,
      elementTimePicker,
    },
    props: {
      info: {
        type: Object,
      },
      NoticeDetails: {
        type: Object,
      },
      Supplier: {
        type: Object,
      },
      Img: {
        type: String,
      }
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>
<style lang="scss" scoped>
  .bounce-enter-active {
    animation: bounce-in 0.3s ease-out;
  }
  .bounce-leave-active {
    animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    50% {
      opacity: 0.5;
      transform: translateY(-5px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>