ShowEasyFrontEnd/FrontEnd/components/booking/BookingInfoItem.vue

<template>
  <div
    class="BookingInfoItem booking-info-item tw-p-[20px] tw-mb-[20px] tw-bg-white tw-rounded-xl xl:tw-p-[20px]"
    v-if="info.OnSiteService"
  >
    <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 v-if="info.OnSiteService.Logo">
        <img class="tw-ml-[6px] tw-px-[2px] tw-w-[48px] tw-h-[40px] tw-rounded-[8px] xl:tw-w-[100px] xl:tw-h-[80px]" :src="info.OnSiteService.Logo"/>
      </div>
      <div v-else>
        <img src="~/assets/svg/noLogo.svg" class="md:tw-max-w-[100px] md:tw-max-h-[80px]" alt="" />
      </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.OnSiteService.ServiceName }}
        </div>
        <div
          class="tw-grid tw-grid-cols-[40px_auto] tw-gap-[10px] tw-items-center tw-mb-[12px]"
        >
          <div v-if="info.OnSiteService.Provider.Logo"><img :src="info.OnSiteService.Provider.Logo" /></div>
          <div v-else><img src="~/assets/svg/noLogo.svg" class="tw-w-[40px]" alt="" /></div>
          <div class="id tw-body-5 lg:tw-body-3 tw-text-hint">
            {{ info.OnSiteService.Provider.ProviderName }}
          </div>
        </div>
        <div v-for="(item, key) in info.BookingDetail" :key="key" class="detail tw-body-5 tw-mb-[10px]">
          {{ item }}
        </div>
        <div class="date tw-body-5 tw-mb-[10px]">
        {{ new Date(info.OnSiteService.ServiceStartDate).toLocaleString() }} - {{ new Date(info.OnSiteService.ServiceEndDate).toLocaleString() }} (Local time)
        </div>
        <button 
          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 no-print"
          @click="$emit('other-details')"
        >
          {{ $t('Other Details') }}
        </button>
      </div>
    </div>
    <div v-if="info.NoticeDetail"
      class="tw-grid tw-grid-rows-[18px_auto_32px] tw-gap-[15px] tw-border-solid tw-border 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 md:t12 lg:t16"
        >
          {{ $t('Notice') }}
        </div>
      </div>
      <div v-html="info.NoticeDetail">
      </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 no-print"
        @click="$emit('notice-details')"
      >
        {{ $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 {};
    },
    created(){
    },
    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>