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.
197 lines
6.7 KiB
197 lines
6.7 KiB
<template>
|
|
<client-only>
|
|
<div
|
|
class="purchaser-info tw-p-5 tw-mb-[20px] tw-bg-white 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 == 'Company'
|
|
? 'tw-bg-neutrals-800 tw-text-neutrals-0'
|
|
: 'tw-bg-neutrals-0 tw-text-neutrals-300',
|
|
]"
|
|
@click="$emit('type', 'Company')"
|
|
>
|
|
{{ $t('Company')}}
|
|
</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 == 'Individual'
|
|
? 'tw-bg-neutrals-800 tw-text-neutrals-0'
|
|
: 'tw-bg-neutrals-0 tw-text-neutrals-300',
|
|
]"
|
|
@click="$emit('type', 'Individual')"
|
|
>
|
|
{{ $t('Individual')}}
|
|
</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
|
|
>
|
|
<div class="tw-grid tw-grid-cols-[120px_auto] tw-gap-[5px]">
|
|
<elementCountryCodeSelect :select="{
|
|
required: true,
|
|
}" :userCodeSelect="userData.phone_code" :validation="validation.phone_code" @returnCode = "getReturnCode"></elementCountryCodeSelect>
|
|
<vue-phone-number-input v-model="userData.phone_number" :validation="validation.phone_number" color="#E5e5e5" error-color="#ef5a5a"
|
|
valid-color="#e5e5e5"
|
|
:error="error" :border-radius="5"
|
|
no-flags :no-country-selector="true" no-example @update="getPhoneData" :translations="translateOption">
|
|
</vue-phone-number-input></div>
|
|
</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>
|
|
</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(false)"
|
|
>
|
|
{{ $t("Next") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</client-only>
|
|
</template>>
|
|
|
|
<script>
|
|
import elementInput from "@/components/newComponent/form/ElementInput";
|
|
import elementSelect from "@/components/newComponent/form/ElementSelect";
|
|
import elementCountryCodeSelect from "@/components/newComponent/form/ElementCountryCodeSelect.vue";
|
|
import { IsNumber } from "~/utils/common";
|
|
import is from "is_js";
|
|
|
|
export default {
|
|
name: "OrderingPersonInfo",
|
|
components: {
|
|
elementInput,
|
|
elementSelect,
|
|
elementCountryCodeSelect,
|
|
IsNumber,
|
|
is
|
|
},
|
|
data() {
|
|
return {
|
|
validation: {
|
|
first_name: true,
|
|
last_name: true,
|
|
email: true,
|
|
phone_code: true,
|
|
phone_number: true,
|
|
country: true,
|
|
},
|
|
}
|
|
},
|
|
created() {},
|
|
watch: {},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|