You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
599 lines
19 KiB
599 lines
19 KiB
<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 + ", "
|
|
: "") +
|
|
(item.customer_plan_name
|
|
? item.customer_plan_name + ", "
|
|
: "") +
|
|
item.specification_name +
|
|
" x " +
|
|
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 + " x " + 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>
|