policy-ui/app/components/quotes/auto/CustomerVehicleStep.vue

<script setup lang="ts">
import {
  AUTO_CLASE_OPTIONS,
  AUTO_MARCA_OPTIONS,
  AUTO_MODELO_OPTIONS,
  AUTO_RAMO_LABEL,
  AUTO_SUB_RAMO_OPTIONS,
  AUTO_USO_OPTIONS,
  AUTO_YEAR_OPTIONS
} from '~/data/auto-quote-intake'
import type { AutoQuoteDraft, AutoQuoteSegment } from '~/types/auto-quote-intake'

const props = defineProps<{
  draft: AutoQuoteDraft
  /** Null until policy type is chosen — hides org field */
  segment: AutoQuoteSegment | null
}>()

const showInterfaseBadge = computed(() => props.draft.vehicle.subRamo === 'cobertura_completa')

const showOrganization = computed(
  () => props.segment === 'corporate' || props.segment === 'fleet'
)

const inputPh =
  'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
</script>

<template>
  <div class="space-y-8">
    <div>
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Client</h2>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Contact on file for this quote — we’ll use it for status and carrier emails.</p>
      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
        <UFormField label="Legal name" required>
          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on government ID" />
        </UFormField>
        <UFormField label="Email" required>
          <UInput
            v-model="draft.client.email"
            type="email"
            autocomplete="email"
            :class="inputPh"
            placeholder="name@company.com"
          />
        </UFormField>
        <UFormField label="Phone">
          <UInput v-model="draft.client.phone" type="tel" :class="inputPh" placeholder="+593 …" />
        </UFormField>
        <UFormField label="Government ID">
          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="Cédula, passport, or RUC" />
        </UFormField>
        <UFormField v-if="showOrganization" label="Organization" class="md:col-span-2">
          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Company or fleet name" />
        </UFormField>
      </div>
    </div>

    <div class="border-t border-[var(--sidebar-border)] pt-8">
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Vehicle</h2>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Risk details carriers use for auto rating.</p>

      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
        <UFormField label="Line">
          <UInput :model-value="AUTO_RAMO_LABEL" disabled class="w-full opacity-90" />
        </UFormField>
        <div class="relative pt-1">
          <UBadge
            v-if="showInterfaseBadge"
            color="info"
            variant="soft"
            size="xs"
            class="pointer-events-none absolute -top-0 right-0 z-[1]"
          >
            Interfase
          </UBadge>
          <UFormField label="Sub-line">
            <USelect
              v-model="draft.vehicle.subRamo"
              :items="AUTO_SUB_RAMO_OPTIONS"
              value-key="value"
              label-key="label"
              placeholder="Select one"
              class="w-full"
            />
          </UFormField>
        </div>
        <UFormField label="Class">
          <USelect
            v-model="draft.vehicle.clase"
            :items="AUTO_CLASE_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="Use">
          <USelect
            v-model="draft.vehicle.uso"
            :items="AUTO_USO_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
      </div>

      <p class="mb-4 mt-8 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Vehicle details</p>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <UFormField label="Make">
          <USelect
            v-model="draft.vehicle.marca"
            :items="AUTO_MARCA_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="Model">
          <USelect
            v-model="draft.vehicle.modelo"
            :items="AUTO_MODELO_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="License plate">
          <UInput v-model="draft.vehicle.placa" :class="inputPh" class="font-mono uppercase" placeholder="ABC-1234" />
        </UFormField>
        <UFormField label="Year">
          <USelect
            v-model="draft.vehicle.year"
            :items="AUTO_YEAR_OPTIONS"
            value-key="value"
            label-key="label"
            placeholder="Select one"
            class="w-full"
          />
        </UFormField>
        <UFormField label="Capacity" description="Passengers">
          <UInput v-model="draft.vehicle.capacidadPasajeros" :class="inputPh" inputmode="numeric" placeholder="—" />
        </UFormField>
        <UFormField label="Declared value" description="USD">
          <UInput v-model="draft.vehicle.valorVehiculo" :class="inputPh" inputmode="decimal" placeholder="—" />
        </UFormField>
      </div>
    </div>
  </div>
</template>