ShowEasyFrontEnd/FrontEnd/components/service/OrderingPersonInfo.vue

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