ShowEasyFrontEnd/FrontEnd/components/service/BookingInfoItem.vue

<template>
  <div
    class="booking-info-item tw-p-[15px] lg:tw-p-[20px] tw-mb-[30px] tw-bg-neutrals-0 tw-rounded-xl md:tw-mb-[40px]"
  >
    <div
      :class="[
        'info-content',
        'collapse',
        'tw-cursor-pointer',
        'tw-grid tw-items-start tw-grid-cols-[52px_auto] tw-gap-[15px] md:tw-grid-cols-[160px_auto] md:tw-gap-[20px] xl:tw-grid-cols-[56px_105px_520px_30px] xl:tw-gap-[16px] xl:tw-items-center',
        show ? 'show' : 'hide',
      ]"
      @click="show = !show"
    >
      <img
        class="element content-img tw-rounded-[4px] tw-h-1/5 md:tw-rounded-[12px] md:tw-h-3/5 xl:tw-h-3/5"
        :src="content.preview_image"
      />
      <div class="element content-text">
        <h3
          class="t12 tw-font-bold tw-mb-[10px] tw-text-base-primary md:tw-text-[16px] md:tw-leading-[21px] xl:tw-mb-[12px]"
        >
          {{ info.service_name }}
        </h3>
        <div v-for="(item, key) in info.order_item" :key="key"
          class="detail tw-body-5 tw-mb-[10px] xl:tw-text-neutrals-600 xl:tw-mb-[4px]"
        >
          {{
            (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"
          class="detail tw-body-5 tw-mb-[10px] xl:tw-mb-0 xl:tw-text-neutrals-600"
        >
          {{ item.as_name + "&nbsp;x&nbsp;" + item.quantity }}
        </div>
        <div
          class="date tw-body-5 tw-mb-[10px] xl:tw-mt-[12px]"
          v-if="info.service_date != null || info.service_time != null"
        >
          Service Date: {{ info.service_date + info.service_time }}
        </div>
        <div
          class="total t14 tw-font-bold tw-text-primary-1 tw-mb-[10px] xl:tw-hidden"
        >
          $3,500 {{ info.currency
          }}<span class="tw-font-normal tw-text-neutrals-400 tw-ml-[10px]"
            >(Tax included)</span
          >
        </div>
        <div class="element xl:tw-hidden">
          <button
            class="tw-transition tw-flex 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-w-full tw-rounded-xl hover:tw-bg-primary-3"
          >
            {{ $t("Enter Required info") }}
            <span
              v-if="questionValidation == true"
              class="status-check-icon tw-inline-block tw-items-center tw-w-[16px] tw-h-[16px] tw-ml-[10px]"
            ></span>
          </button>
        </div>
      </div>
      <div class="element content-status tw-hidden xl:tw-block xl:tw-ml-[20px]">
        <span
          v-if="questionValidation == true"
          class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]"
        ></span>
      </div>
    </div>

    <Transition name="bounce">
      <div v-show="show" :class="['info-form']">
        <div
          :class="[
            'bookingdetails',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[40px]">{{ $t("Booking Details") }}</h3>
          <div
            v-for="(item, key) in content.booking_questions" :key="key"
            class="element tw-mb-[20px]"
          >
            <elementTextarea
              :input="{
                id: item.question_id,
                label: item.question,
                required:
                  item.required === 1 || item.required === 'required'
                    ? true
                    : false,
                placeholder: '',
              }"
              :default="''"
              :validation="question[key].validation"
              @change="setQuestion($event, key, item)"
            ></elementTextarea>
          </div>
        </div>
        <div
          :class="[
            'contact-info',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[20px]">{{ $t("Contact Info") }}</h3>
          <div
            class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
          >
            <button
              v-for="(item, index) in contact"
              :key="index"
              :class="[
                'tw-transition',
                'tw-btn-md',
                'tw-text-[14px]',
                'tw-leading-[18px]',
                'tw-text-complementary-1',
                'tw-bg-neutrals-0',
                'tw-px-[12px]',
                'tw-py-[11px]',
                'tw-mx-[8px]',
                'tw-mb-[16px]',
                'tw-rounded-2xl',
                'tw-border tw-border-solid',
                'tw-bg-complementary-3',
                activeLabel == index + 1
                  ? 'tw-border-complementary-1 tw-bg-complementary-1/20'
                  : 'tw-border-transparent',
              ]"
              @click="onLabelClick(index + 1, item)"
            >
              {{ item.first_name }} {{ item.last_name }}
            </button>
            <button
              class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
              @click="$modal.show('add-contact-modal')"
            >
              {{ $t("Add") }}
            </button>
          </div>
          <div class="company-info-list">
            <template v-for="(item, index) in contact">
              <div
                :key="index"
                v-if="index + 1 === activeLabel"
                class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
              >
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("First Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.first_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("Last Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.last_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
                  <div class="content tw-body-4">
                    {{ item.email }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
                  <div class="content tw-body-4">
                    {{ item.phone_number }}
                  </div>
                </div>
                <button
                  class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
                  @click="$modal.show('edit-contact-modal')"
                ></button>
              </div>
            </template>
          </div>
        </div>
        <div
          :class="[
            'promo-code',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
          <elementPromoCode></elementPromoCode>
        </div>
        <div class="element tw-text-right tw-mt-[40px]">
          <button
            class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
            @click="updateInfo()"
          >
            {{ $t("Next") }}
          </button>
        </div>
      </div>
    </Transition>
    <!-- <Transition name="bounce">
      <div v-show="show" :class="['info-form']">
        <div
          :class="[
            'bookingdetails',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          {{ content.booking_questions }}
          <h3 class="tw-mb-[40px]">{{ $t("Booking Details") }}</h3>
          <div
            v-for="(item, key) in content.booking_questions"
            class="element tw-mb-[20px]"
          >
            <elementTextarea
              :input="{
                id: item.question_id,
                label: item.question,
                required:
                  item.required === 1 || item.required === 'required'
                    ? true
                    : false,
                placeholder: '',
              }"
              :default="''"
              :validation="true"
              @change="
                setQuestion($event, key, item.question_id, item.question)
              "
            ></elementTextarea>
          </div>
        </div>
        <div
          :class="[
            'contact-info',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[20px]">{{ $t("Contact Info") }}</h3>
          <div
            class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
          >
            <button
              v-for="(item, index) in contact"
              :key="index"
              :class="[
                'tw-transition',
                'tw-btn-md',
                'tw-text-[14px]',
                'tw-leading-[18px]',
                'tw-text-complementary-1',
                'tw-bg-neutrals-0',
                'tw-px-[12px]',
                'tw-py-[11px]',
                'tw-mx-[8px]',
                'tw-mb-[16px]',
                'tw-rounded-2xl',
                'tw-border tw-border-solid',
                'tw-bg-complementary-3',
                activeLabel == index + 1
                  ? 'tw-border-complementary-1 tw-bg-complementary-1/20'
                  : 'tw-border-transparent',
              ]"
              @click="onLabelClick(index + 1, item)"
            >
              {{ item.first_name }} {{ item.last_name }}
            </button>
            <button
              class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
              @click="$modal.show('add-contact-modal')"
            >
              {{ $t("Add") }}
            </button>
          </div>
          <div class="company-info-list">
            <template v-for="(item, index) in contact">
              <div
                :key="index"
                v-if="index + 1 === activeLabel"
                class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
              >
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("First Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.first_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">
                    {{ $t("Last Name") }}
                  </div>
                  <div class="content tw-body-4">
                    {{ item.last_name }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
                  <div class="content tw-body-4">
                    {{ item.email }}
                  </div>
                </div>
                <div
                  class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
                >
                  <div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
                  <div class="content tw-body-4">
                    {{ item.phone_number }}
                  </div>
                </div>
                <button
                  class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
                  @click="$modal.show('edit-contact-modal')"
                ></button>
              </div>
            </template>
          </div>
        </div>
        <div
          :class="[
            'promo-code',
            'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
            'tw-pt-[20px] tw-mt-[20px]',
          ]"
        >
          <h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
          <elementPromoCode></elementPromoCode>
        </div>
        <div class="element tw-text-right tw-mt-[40px]">
          <button
            class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
            @click="updateInfo()"
          >
            {{ $t("Next") }}
          </button>
        </div>
      </div>
    </Transition> -->
  </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 is from "is_js";
export default {
  components: {
    elementTextarea,
    elementPromoCode,
    elementTimePicker,
    is,
  },
  props: {
    info: {
      type: Object,
    },
    content: {
      type: Object,
    },
    questions: {
      type: Array,
      default: [],
    },
    contact: {
      type: Array,
    },
    active: {
      type: Number,
    },
  },
  data() {
    return {
      show: false,
      question: [],
      contactData: {
        first_name: "",
        last_name: "",
        email: "",
        phone_number: "",
      },
      questionValidation: false,
      errors: null,
    };
  },

  computed: {
    activeLabel() {
      return this.active;
    },
  },

  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      if (vm.contact.length > 0) {
        vm.contactData.first_name = vm.contact[0].first_name;
        vm.contactData.last_name = vm.contact[0].last_name;
        vm.contactData.email = vm.contact[0].email;
        vm.contactData.phone_number = vm.contact[0].phone_number;
      }
    });
  },

  watch: {
    contact: {
      handler: function () {
        let vm = this;
        if (vm.contact.length > 0) {
          vm.contactData.first_name = vm.contact[0].first_name;
          vm.contactData.last_name = vm.contact[0].last_name;
          vm.contactData.email = vm.contact[0].email;
          vm.contactData.phone_number = vm.contact[0].phone_number;
        }
      },
    },
    questions: {
      handler: function () {
        this.getContent();
      },
    },
    questionValidation: {
      handler: function () {
        if (this.questionValidation == true) {
          this.show = false;
        }
      },
    },
  },

  methods: {
    onLabelClick(label) {
      let index = label - 1;

      if (index <= 0) {
        index = 0;
      }
      this.contactData.first_name = this.contact[index].first_name;
      this.contactData.last_name = this.contact[index].last_name;
      this.contactData.email = this.contact[index].email;
      this.contactData.phone_number = this.contact[index].phone_number;
      this.$emit("changeActiveLabel", label);
    },
    updateInfo() {
      this.question.forEach((item) => {
        if (item.required !== "") {
          if (item.answer == "") {
            item.validation = false;
          } else {
            item.validation = true;
            this.$emit("answer", this.question);
            this.$emit("contact", this.contactData);
          }
        } else {
          if (item.required !== "") {
            item.validation = true;
            this.$emit("answer", this.question);
            this.$emit("contact", this.contactData);
          }
        }
      });
      this.questionValidation = this.question.every(function (item) {
        return item.validation == true;
      });
      this.$emit("bookingDetail_validation", this.questionValidation);
    },

    getContent() {
      this.questions.forEach((item) => {
        item.validation = true;
      });
      this.question = JSON.parse(JSON.stringify(this.questions));
      this.question.forEach((item) => {
        item.answer = "";
      });
    },

    setQuestion(val, index, item) {
      this.question[index].answer = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.collapse {
  @media (min-width: 1366px) {
    &::before {
      content: "";
      display: inline-block;
      position: relative;
      padding-left: auto;
      padding-right: auto;
      left: 25px;
      top: 0;
      background-image: url("~/assets/svg/down-arrow.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      width: 16px;
      height: 10px;
      margin-right: 45px;
      transform: rotate(-90deg);
      transition: all 0.2s linear;
    }

    &.disabled {
      pointer-events: none;

      &::before {
        background-image: url("~/assets/svg/down-arrow-disabled.svg");
      }
    }

    &.show {
      &::before {
        transform: rotate(0);
        transition: all 0.2s linear;
      }
    }
  }
}

.status-check-icon {
  background-image: url("~/assets/svg/status-check.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-add-icon {
  background-image: url("~/assets/svg/plus-blue.svg");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px 16px;
}

.btn-edit-icon {
  background-image: url("~/assets/svg/edit-info.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.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>