ShowEasyFrontEnd/FrontEnd/components/user/userServiceItem.vue

<template>
  <div
    class="booking-info-item xl:tw-border xl:tw-border-solid xl:tw-border-neutral-200 tw-p-[15px] tw-mb-[20px] tw-bg-white tw-rounded-xl xl:tw-p-[20px]"
  >
    <div
      class="tw-grid tw-grid-cols-[16%_82%] lg:tw-grid-cols-[13%_84%] tw-gap-x-2 lg:tw-gap-x-5"
    >
      <div>
        <nuxt-link :to="localePath('/user/booking/' + info.order_display_id)"
          ><img class="tw-rounded-md" :src="img"
        /></nuxt-link>
      </div>
      <div class="element content-text">
        <div class="tw-body-4 tw-py-1 tw-mb-2">
          <span :class="bookingColor(bookingStatusMap(info.order_status))"
            >{{ bookingStatusMap(info.order_status) }},&nbsp;</span
          >
          <span
            :class="
              bookingColor(
                paymentStatusMap(info.order_payment[0].payment_status)
              )
            "
            >{{ paymentStatusMap(info.order_payment[0].payment_status) }}</span
          >
        </div>
        <h3
          class="t12 tw-font-bold tw-mb-2 md:tw-text[16px] md:tw-leading-[21px]"
        >
          {{ info.service_name }}
        </h3>
        <div class="order-id tw-body-5 tw-mb-1 xl:tw-text-neutrals-800">
          #{{ info.order_display_id }}
        </div>
        <div class="detail tw-body-5 tw-mb-1 xl:tw-text-neutrals-800">
          <div 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 v-for="(item, key) in info.order_as" :key="key">
            {{ item.as_name + "&nbsp;x&nbsp;" + item.quantity }}
          </div>
        </div>
        <div
          v-if="info.service_date != null || info.service_time != null"
          class="service-date tw-body-5 tw-mb-1 xl:tw-text-neutrals-800"
        >
          {{ $t("Service Date:")
          }}{{
            (info.service_date != null ? info.service_date : "") +
            " " +
            (info.service_time != null ? info.service_time : "")
          }}
        </div>
        <div class="booking-date tw-body-5 tw-mb-2 xl:tw-text-neutrals-800">
          {{ $t("Booking Date:")
          }}{{ new Date(info.created_at).toLocaleString() }}
        </div>
        <div
          class="total tw-mb-[10px] md:tw-flex md:tw-justify-between md:tw-items-center"
        >
          <span class="t14 tw-font-bold tw-text-primary-1">
            ${{ formatTotal(info.amount) }}&nbsp;{{ info.currency }}
          </span>
          <div class="tw-mt-[10px] tw-flex">
            <button
              @click="$emit('contact-us')"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl hover:tw-bg-primary-3 tw-hidden md:tw-flex tw-w-fit tw-h-fit tw-mr-[10px]"
            >
              {{ $t("Contact Us") }}
            </button>
            <button
              v-if="
                bookingStatusMap(info.order_status) === 'Confirmed' &&
                paymentStatusMap(info.order_payment[0].payment_status) ===
                  'Unpaid'
              "
              @click="$emit('upload-remittance-slip')"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
            >
              {{ $t("Upload Remittance Slip") }}
            </button>
            <button
              v-if="bookingStatusMap(info.order_status) === 'Unpaid'"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
              @click="goToPay()"
            >
              {{ $t("Go To Pay") }}
            </button>
            <button
              v-if="bookingStatusMap(info.order_status) === 'Completed'"
              class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit"
            >
              {{ $t("Write a Review") }}
            </button>
          </div>
        </div>
      </div>
    </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";
import {
  bookingStatusMap,
  paymentStatusMap,
  bookingColor,
} from "@/plugins/util.js";
export default {
  components: {
    elementTextarea,
    elementPromoCode,
    elementTimePicker,
  },
  props: {
    info: {
      type: Object,
    },
    active: {
      type: Number,
    },
  },
  data() {
    return {
      apiUrl: process.env.SERVICE_CONSOLE,
      img:"",
    };
  },
  computed: {
    activeLabel() {
      return this.active;
    },
    formatTotal() {
      return function (total) {
        return total.toLocaleString("en-US");
      };
    },
  },
  mounted() {
    this.getServiceData(this.info);
  },
  methods: {
    onLabelClick(label) {
      this.$emit("changeActiveLabel", label);
    },
    bookingStatusMap,
    paymentStatusMap,
    bookingColor,
    goToPay() {
      this.$router.push(
        this.localePath("/service/rePay/" + this.info.order_display_id)
      );
    },
    async getServiceData(object) {
      this.$axios
        .get(
          `${this.apiUrl}/user-services/content?service_id=${object.service_id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&currency=${object.currency}`
        )
        .then((res) => {
          this.img = res.data.preview_image;
          console.log(this.img);
        })
        .catch((error) => console.log(error));
    },
  },
};
</script>
<style lang="scss" scoped></style>