|
|
<template> <div class="purchaser-info tw-p-5 tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl" > <div class="tw-flex tw-flex-row tw-justify-between tw-items-center"> <h3 :class="[ 'collapse', 't16', 'tw-relative', 'tw-cursor-pointer', 'xl:tw-text-[18px]', show ? 'show' : 'hide', disabled ? 'disabled' : '', disabled ? 'tw-text-neutrals-300' : 'tw-text-black', ]" @click="show = !show" > {{ $t("Purchaser Info") }} </h3> <div class="element content-status xl:tw-ml-[20px]"> <span v-if="purchaserValidation == true" class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]" ></span> </div> </div>
<Transition name="bounce"> <div v-show="show"> <div class="tw-mt-[32px] md:tw-ml-[60px]"> <div class="element element-tabs tw-mb-[20px]"> <button :class="[ 'tw-transition', 'tw-btn-md', 'tw-border', 'tw-border-solid', 'tw-border-neutrals-300', 'tw-px-[30px]', ' tw-py-[9.5px]', ' tw-rounded-2xl', infoType == 'Individual' ? 'tw-bg-neutrals-800 tw-text-neutrals-0' : 'tw-bg-neutrals-0 tw-text-neutrals-300', ]" @click="$emit('type', 'Individual')" > Individual </button> <button :class="[ 'tw-transition', 'tw-btn-md', 'tw-border', 'tw-border-solid', 'tw-border-neutrals-300', 'tw-px-[30px]', ' tw-py-[9.5px]', ' tw-rounded-2xl', infoType == 'Company' ? 'tw-bg-neutrals-800 tw-text-neutrals-0' : 'tw-bg-neutrals-0 tw-text-neutrals-300', ]" @click="$emit('type', 'Company')" > Company </button> </div> <div v-show="infoType == 'Individual'"> <div class="element element-form tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-gap-y-[20px] md:tw-max-w-[580px]" > <div class="element"> <elementInput :input="{ id: 'FirstName', label: 'First name', required: true, type: 'text', }" :default="userData.first_name" :validation="validation.first_name" @change="userData.first_name = $event" ></elementInput> </div> <div class="element"> <elementInput :input="{ id: 'LastName', label: 'Last Name', required: true, type: 'text', }" :default="userData.last_name" :validation="validation.last_name" @change="userData.last_name = $event" ></elementInput> </div> <div class="element"> <elementInput :input="{ id: 'ContactEmail', label: 'Contact Email', required: true, type: 'email', }" :default="userData.email" :validation="validation.email" @change="userData.email = $event" > </elementInput> </div> <div class="element"> <label class="tw-block tw-mb-[10px]" ><span >{{ $t("Phone") }}<span class="required">*</span></span ></label > <vue-country-code class="d-none" enabledCountryCode :enabledFlags="false" ></vue-country-code> <vue-phone-number-input color="#e5e5e5" :border-radius="5" error-color="#ef5a5a" valid-color="#e5e5e5" :error="error" required no-flags no-example :validation="validation.phone_number" v-model="userData.phone_number" ></vue-phone-number-input> </div> <div class="element"> <elementSelect :select="{ id: 'Country', label: 'Country/Region', required: true, }" :selectList="countryOptions" :default="userData.country" :validation="validation.country" @change="userData.country = $event" ></elementSelect> </div> <div class="element md:tw-col-span-2 tw-mt-[30px]"> <elementCheckBox :input="{ id: 'SaveInfo', label: 'Update personal info in your account', }" @update="updatePersonalInfo = $event" ></elementCheckBox> </div> </div> </div> <div v-show="infoType == 'Company'"> <div class="element element-form tw-grid tw-grid-cols-1 tw-gap-y-[20px]" > <div class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]" > <button v-for="(item, index) in userCompanyList" :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.company_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-modal')" > {{ $t("Add") }} </button> </div> <div class="company-info-list"> <template v-for="(item, index) in userCompanyList"> <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("Company Name") }} </div> <div class="content tw-body-4"> {{ item.company_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("Tax Number") }} </div> <div class="content tw-body-4"> {{ item.company_tax_no }} </div> </div> <div class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]" > <div class="label t14 tw-font-bold"> {{ $t("Street Address") }} </div> <div class="content tw-body-4"> {{ item.company_address1 }}{{ item.company_address2 }} </div> </div> <div class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]" > <div class="label t14 tw-font-bold">{{ $t("City") }}</div> <div class="content tw-body-4"> {{ item.company_city }} </div> </div> <div class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]" > <div class="label t14 tw-font-bold"> {{ $t("State/Province") }} </div> <div class="content tw-body-4"> {{ item.company_state }} </div> </div> <div class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]" > <div class="label t14 tw-font-bold"> {{ $t("Country") }} </div> <div class="content tw-body-4"> {{ item.company_country_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("ZIP/Postal Code") }} </div> <div class="content tw-body-4"> {{ item.company_zipcode }} </div> </div> <button class="btn-edit-icon tw-w-[28px] tw-h-[28px]" @click="$modal.show('edit-modal')" ></button> </div> </template> </div> </div> </div> <div class="element tw-mt-[40px] tw-text-right"> <button class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2" @click="updatePurchaserInfo" > {{ $t("Next") }} </button> </div> </div> </div> </Transition> </div></template><script>import elementInput from "@/components/newComponent/form/ElementInput";import elementSelect from "@/components/newComponent/form/ElementSelect";import elementCheckBox from "@/components/newComponent/form/ElementCheckBox";import is from "is_js";export default { name: "PurchaserInfo", props: { userCompanyList: { type: Array, }, countryOptions: { type: Array, }, infoType: { type: String, }, bookingDetail_Validation: { type: Boolean, }, }, components: { elementInput, elementSelect, elementCheckBox, is, }, data() { return { show: false, disabled: false, completed: false, userData: { first_name: "", last_name: "", email: "", phone_number: "", country: 0, country_code: "", UserCompany: [], }, updatePersonalInfo: false, userContactList: [], activeLabel: 0, Individual: { FirstName: "", LastName: "", Email: "", phone_number: "", Country: "", }, Company: { company_name: "", company_tax_no: "", company_address1: "", company_address2: "", company_city: "", company_state: "", company_country: "", company_zipcode: "", }, validation: { first_name: true, last_name: true, email: true, phone_number: true, country: true, }, errors: null, purchaserValidation: false, error: true, isValid: false, }; }, async created() { if (this.$auth.loggedIn) { await this.getUser(); } }, watch: { userCompanyList: { handler: function () { if (this.userCompanyList) { this.activeLabel = this.userCompanyList.length > 0 ? 1 : 0; this.Company.company_name = this.userCompanyList[0].company_name; this.Company.company_tax_no = this.userCompanyList[0].company_tax_no; this.Company.company_address1 = this.userCompanyList[0].company_address1; this.Company.company_address2 = this.userCompanyList[0].company_address2; this.Company.company_city = this.userCompanyList[0].company_city; this.Company.company_state = this.userCompanyList[0].company_state; this.Company.company_country = this.userCompanyList[0].company_country_name; this.Company.company_zipcode = this.userCompanyList[0].company_zipcode; } }, }, bookingDetail_Validation: { handler: function () { if (this.bookingDetail_Validation) { this.show = true; } else { this.show = false; } }, }, purchaserValidation: { handler: function () { if (this.purchaserValidation) { this.show = false; } }, }, }, methods: { onLabelClick(label, item) { this.activeLabel = label; this.$emit("active", this.activeLabel); this.Company.company_name = item.company_name; this.Company.company_tax_no = item.company_tax_no; this.Company.company_address1 = item.company_address1; this.Company.company_address2 = item.company_address2; this.Company.company_city = item.company_city; this.Company.company_state = item.company_state; this.Company.company_country = item.company_country_name; this.Company.company_zipcode = item.company_zipcode; }, async getUser() { await this.$axios .get( `/member/users/${ this.$auth.$storage.getUniversal("jwt").user_id }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
) .then((result) => { this.userData.first_name = result.data.first_name; this.userData.last_name = result.data.last_name; this.userData.email = result.data.email; this.userData.phone_number = result.data.phone; this.userData.country = result.data.country; this.userData.country_code = result.data.country_code; this.userData.UserCompany = result.data.UserCompany; }) .catch((err) => { console.log(err); }); }, updateIndividual() { const patchData = JSON.parse(JSON.stringify(this.userData)); delete patchData.UserCompany; this.$axios .put( `/member/users/${ this.$auth.$storage.getUniversal("jwt").user_id }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`,
patchData ) .then((result) => { console.log(result); }) .catch((err) => { console.log(err); }); }, updatePurchaserInfo() { switch (this.infoType) { case "Individual": this.validators();
if (this.validators()) { this.updateIndividual(); this.$emit("type", "Individual"); this.$emit("individual", this.userData); this.$emit("company", {}); this.purchaserValidation = true; this.$emit("purchaserInfo_validation", this.purchaserValidation); } else { this.purchaserValidation = false; this.$emit("purchaserInfo_validation", this.purchaserValidation); }
break; case "Company": this.$emit("type", "Company"); this.$emit("company", this.Company); this.$emit("individual", {}); break; } }, validators() { if (is.empty(this.userData.first_name)) { this.validation.first_name = false; } else { this.validation.first_name = true; } if (is.empty(this.userData.last_name)) { this.validation.last_name = false; } else { this.validation.last_name = true; } if (is.empty(this.userData.email) || is.not.email(this.userData.email)) { this.validation.email = false; } else { this.validation.email = true; } if ( this.userData.phone_number == null
// is.empty(this.userData.phone_number) &&
// is.number(this.userData.phone_number)
) { this.validation.phone_number = false; this.error = true; } else { this.validation.phone_number = true; this.error = false; } if (is.empty(this.userData.country) || this.userData.country == 0) { this.validation.country = false; } else { this.validation.country = true; } this.errors = Object.entries(this.validation).filter( (e) => e[1] == false ); if (this.errors.length > 0) { return false; } else { return true; } }, },};</script><style lang="scss" scoped>.collapse { &::before { content: ""; display: inline-block; position: relative; left: 0; 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: 40px; 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; } }}
.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); }}
.status-check-icon { background-image: url("~/assets/svg/status-check.svg"); background-size: 100%; background-repeat: no-repeat; background-position: center;}</style>
|
