webapp/app/components/KYCFormRussia.vue

<template>
  <div class="p-0 sm:p-2">
    <form @submit.prevent="submitKYC" class="space-y-6">
      <!-- Company Section -->
      <div class="card bg-base-100 border border-base-300 shadow-sm">
        <div class="card-body gap-4">
          <h3 class="card-title text-base-content">Company details</h3>

          <div class="space-y-4">
            <!-- Company search with DADATA -->
            <div>
              <label class="block text-sm font-medium text-base-content mb-2">
                Organization search
              </label>
              <CompanySearchRussia v-model="formData.company" @select="onCompanySelect" />
            </div>

            <!-- Company details (auto-filled from DADATA) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">INN</label>
                <input
                  v-model="formData.company.inn"
                  class="input input-bordered w-full"
                  readonly
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">KPP</label>
                <input
                  v-model="formData.company.kpp"
                  class="input input-bordered w-full"
                  readonly
                />
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-base-content mb-2">OGRN</label>
              <input
                v-model="formData.company.ogrn"
                class="input input-bordered w-full"
                readonly
              />
            </div>

            <div>
              <label class="block text-sm font-medium text-base-content mb-2">Address</label>
              <textarea
                v-model="formData.company.address"
                class="textarea textarea-bordered w-full min-h-[120px]"
                rows="3"
                readonly
              ></textarea>
            </div>
          </div>
        </div>
      </div>

      <!-- Bank Section -->
      <div class="card bg-base-100 border border-base-300 shadow-sm">
        <div class="card-body gap-4">
          <h3 class="card-title text-base-content">Bank details</h3>

          <div class="space-y-4">
            <!-- Bank search with DADATA -->
            <div>
              <label class="block text-sm font-medium text-base-content mb-2">
                Bank search
              </label>
              <BankSearchRussia v-model="formData.bank" @select="onBankSelect" />
            </div>

            <!-- Bank details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">BIC</label>
                <input
                  v-model="formData.bank.bik"
                  class="input input-bordered w-full"
                  readonly
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">Corr. account</label>
                <input
                  v-model="formData.bank.correspondentAccount"
                  class="input input-bordered w-full"
                  readonly
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Contact Section -->
      <div class="card bg-base-100 border border-base-300 shadow-sm">
        <div class="card-body gap-4">
          <h3 class="card-title text-base-content">Contact details</h3>

          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-base-content mb-2">
                Contact person *
              </label>
              <input
                v-model="formData.contact.person"
                type="text"
                required
                class="input input-bordered w-full"
                placeholder="Full name of company representative"
              />
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">Email *</label>
                <input
                  v-model="formData.contact.email"
                  type="email"
                  required
                  class="input input-bordered w-full"
                  placeholder="email@company.ru"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-base-content mb-2">Phone *</label>
                <input
                  v-model="formData.contact.phone"
                  type="tel"
                  required
                  class="input input-bordered w-full"
                  placeholder="+7 (xxx) xxx-xx-xx"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="flex justify-end">
        <button
          type="submit"
          :disabled="loading || !isFormValid"
          class="btn btn-primary"
        >
          {{ loading ? 'Sending...' : 'Submit for review' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  submit: [data: any]
}>()

const loading = ref(false)

const formData = ref({
  company: {
    companyName: '',
    companyFullName: '',
    inn: '',
    kpp: '',
    ogrn: '',
    address: ''
  },
  bank: {
    bankName: '',
    bik: '',
    correspondentAccount: ''
  },
  contact: {
    person: '',
    email: '',
    phone: ''
  }
})

// Form validation
const isFormValid = computed(() => {
  return formData.value.company.companyName && 
         formData.value.company.inn && 
         formData.value.bank.bankName && 
         formData.value.bank.bik &&
         formData.value.contact.person &&
         formData.value.contact.email &&
         formData.value.contact.phone
})

// Handlers
const onCompanySelect = (company: any) => {
  formData.value.company = {
    companyName: company.value,
    companyFullName: company.unrestricted_value,
    inn: company.data.inn,
    kpp: company.data.kpp || '',
    ogrn: company.data.ogrn || '',
    address: company.data.address?.value || ''
  }
}

const onBankSelect = (bank: any) => {
  formData.value.bank = {
    bankName: bank.value,
    bik: bank.data.bic,
    correspondentAccount: bank.data.correspondent_account || ''
  }
}

const submitKYC = async () => {
  if (!isFormValid.value) return
  
  loading.value = true
  try {
    const submitData = {
      company_name: formData.value.company.companyName,
      company_full_name: formData.value.company.companyFullName,
      inn: formData.value.company.inn,
      kpp: formData.value.company.kpp,
      ogrn: formData.value.company.ogrn,
      address: formData.value.company.address,
      bank_name: formData.value.bank.bankName,
      bik: formData.value.bank.bik,
      correspondent_account: formData.value.bank.correspondentAccount,
      contact_person: formData.value.contact.person,
      contact_email: formData.value.contact.email,
      contact_phone: formData.value.contact.phone
    }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('Error submitting KYC:', error)
  } finally {
    loading.value = false
  }
}
</script>