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'
import { useCustomerSelection } from '~/composables/useCustomerSelection'

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)]'

// Customer selection
const customerSearch = ref('')
const debouncedCustomerSearch = refDebounced(customerSearch, 300)
const customerPage = ref(1)

const { data: customersData, pending: customersPending } = useCustomer('/customers', {
  query: computed(() => ({
    'page[number]': customerPage.value,
    'page[size]': 12,
    ...(debouncedCustomerSearch.value && {
      'filters[0][field]': 'search',
      'filters[0][op]': '==',
      'filters[0][value]': debouncedCustomerSearch.value
    })
  }))
})

watch(debouncedCustomerSearch, () => { customerPage.value = 1 })

const customerItems = computed(() => customersData.value?.data ?? [])

function selectCustomer(customer: any) {
  selectedCustomer.value = customer
}

function selectBuyer(customer: any) {
  selectedBuyer.value = customer
}

const customerDisplayName = (c: any) =>
  c.customer_type === 'corporate'
    ? (c.commercial_name || c.legal_name)
    : `${c.first_name} ${c.last_name}`

const customerSubtitle = (c: any) =>
  c.customer_type === 'corporate' ? c.ruc : c.email

// Use customer selection composable
const {
  selectedCustomer,
  selectedBuyer,
  useSameForBuyer,
  insured,
  buyer,
  isInsuredValid,
  isBuyerValid,
  validationErrors
} = useCustomerSelection()
</script>

<template>
  <div class="space-y-8">
    <!-- Insured Section -->
    <div>
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Insured</h2>
      <p class="mt-1 text-sm text-[var(--text-muted)]">Person or entity being insured — we'll use this for carrier notifications.</p>
      
      <div v-if="!selectedCustomer" class="mt-5">
        <UInput
          v-model="customerSearch"
          icon="i-heroicons-magnifying-glass"
          placeholder="Search by name, email, RUC..."
          class="w-full max-w-sm mb-4"
        />
        
        <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
        </div>
        
        <div v-else class="space-y-3 max-h-72 overflow-y-auto">
          <div
            v-for="c in customerItems"
            :key="c.id"
            class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
            :class="selectedCustomer?.id === c.id
              ? 'border-primary-500 bg-primary-50'
              : 'border-gray-200 hover:border-gray-300 bg-white'"
            @click="selectCustomer(c)"
          >
            <UAvatar :alt="customerDisplayName(c)" size="sm" />
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <p class="font-medium text-sm text-slate-800 truncate">{{ customerDisplayName(c) }}</p>
                <UBadge
                  :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
                  variant="soft" size="xs" class="flex-shrink-0"
                >
                  {{ c.customer_type === 'corporate' ? 'Corp' : 'Ind' }}
                </UBadge>
              </div>
              <p class="text-xs text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
            </div>
            <UIcon
              v-if="selectedCustomer?.id === c.id"
              name="i-heroicons-check-circle"
              class="w-5 h-5 text-primary-500 flex-shrink-0"
            />
          </div>
          
          <div v-if="customerItems.length === 0" class="text-center py-6 text-gray-400 text-sm">
            No customers found.
          </div>
        </div>
      </div>
      
      <div v-else class="mt-5 p-4 bg-primary-50 border border-primary-200 rounded-lg">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <UAvatar :alt="customerDisplayName(selectedCustomer)" size="sm" />
            <div>
              <p class="font-medium text-primary-800">{{ customerDisplayName(selectedCustomer) }}</p>
              <p class="text-xs text-primary-600">{{ customerSubtitle(selectedCustomer) }}</p>
            </div>
          </div>
          <UButton size="sm" color="neutral" variant="ghost" @click="selectedCustomer = null">
            Change
          </UButton>
        </div>
      </div>
    </div>

    <!-- Buyer Section -->
    <div class="border-t border-[var(--sidebar-border)] pt-8">
      <div class="flex items-center gap-3 mb-4">
        <h2 class="text-lg font-semibold text-[var(--text-primary)]">Buyer</h2>
        <div class="flex items-center gap-2">
          <UToggle v-model="useSameForBuyer" />
          <span class="text-sm text-[var(--text-muted)]">Same as insured</span>
        </div>
      </div>
      
      <p v-if="useSameForBuyer" class="mt-1 text-sm text-[var(--text-muted)]">
        Using same person as insured
      </p>
      
      <div v-else class="mt-5">
        <UInput
          v-model="customerSearch"
          icon="i-heroicons-magnifying-glass"
          placeholder="Search by name, email, RUC..."
          class="w-full max-w-sm mb-4"
        />
        
        <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
        </div>
        
        <div v-else class="space-y-3 max-h-72 overflow-y-auto">
          <div
            v-for="c in customerItems"
            :key="c.id"
            class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
            :class="selectedBuyer?.id === c.id
              ? 'border-primary-500 bg-primary-50'
              : 'border-gray-200 hover:border-gray-300 bg-white'"
            @click="selectBuyer(c)"
          >
            <UAvatar :alt="customerDisplayName(c)" size="sm" />
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <p class="font-medium text-sm text-slate-800 truncate">{{ customerDisplayName(c) }}</p>
                <UBadge
                  :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
                  variant="soft" size="xs" class="flex-shrink-0"
                >
                  {{ c.customer_type === 'corporate' ? 'Corp' : 'Ind' }}
                </UBadge>
              </div>
              <p class="text-xs text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
            </div>
            <UIcon
              v-if="selectedBuyer?.id === c.id"
              name="i-heroicons-check-circle"
              class="w-5 h-5 text-primary-500 flex-shrink-0"
            />
          </div>
          
          <div v-if="customerItems.length === 0" class="text-center py-6 text-gray-400 text-sm">
            No customers found.
          </div>
        </div>
      </div>
    </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="RC limits">
          <UInput v-model="draft.vehicle.rc_limits" :class="inputPh" placeholder="e.g., 100,000" />
        </UFormField>
        <UFormField label="Market value" description="USD">
          <UInput v-model="draft.vehicle.market_value" :class="inputPh" inputmode="decimal" placeholder="—" />
        </UFormField>
        <UFormField label="Requested value" description="USD">
          <UInput v-model="draft.vehicle.requested_value" :class="inputPh" inputmode="decimal" placeholder="—" />
        </UFormField>
        <UFormField label="Chassis number" description="Optional">
          <UInput v-model="draft.vehicle.chassis_number" :class="inputPh" placeholder="—" />
        </UFormField>
        <UFormField label="Engine number" description="Optional">
          <UInput v-model="draft.vehicle.engine_number" :class="inputPh" placeholder="—" />
        </UFormField>
      </div>
    </div>
  </div>
</template>