WIP jordan

app/components/quotes/auto/CustomerVehicleStep.vue

@@ -0,0 +1,154 @@
+<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>