Update life quotes to use new policy API structure

- Update life quote types to use insured/buyer instead of client
- Update life fields: add coverage_type, coverage_amount, coverage_years, smoker, medications, surgeries, weight, height
- Remove deprecated fields: dateOfBirth, age, gender, preexistingConditions, preexistingDetails, beneficiaryName, beneficiaryRelationship
- Update life quote SetupStep component to use customer selection
- Add Insured and Buyer sections with customer search and selection
- Add health questionnaire with smoker, medications, surgeries, weight, height fields
- Add coverage_type field (banking | protection)
- Update life quote page to use new composables and API structure
- Update validation to use insured/buyer validation
- Update submission to use policy API with new structure
This commit is contained in:
2026-04-27 15:03:43 -05:00
parent a2eb1f3789
commit 6c411ce2b6
4 changed files with 289 additions and 153 deletions

View File

@@ -1,11 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
LIFE_GENDER_OPTIONS,
LIFE_COVERAGE_TERM_OPTIONS,
LIFE_COVERAGE_AMOUNT_OPTIONS, LIFE_COVERAGE_AMOUNT_OPTIONS,
LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS LIFE_COVERAGE_TERM_OPTIONS
} from '~/data/life-quote-intake' } from '~/data/life-quote-intake'
import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake' import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
import { useCustomerSelection } from '~/composables/useCustomerSelection'
const props = defineProps<{ const props = defineProps<{
draft: LifeQuoteDraft draft: LifeQuoteDraft
@@ -28,22 +27,54 @@ const showOrganization = computed(
() => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group' () => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group'
) )
/** Compute age from date of birth */ // Use customer selection composable
watch( const {
() => props.draft.life.dateOfBirth, selectedCustomer,
(dob) => { selectedBuyer,
if (!dob) { useSameForBuyer,
props.draft.life.age = '' insured,
return buyer,
} isInsuredValid,
const birth = new Date(dob) isBuyerValid,
const today = new Date() validationErrors
let age = today.getFullYear() - birth.getFullYear() } = useCustomerSelection()
const m = today.getMonth() - birth.getMonth()
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age-- // Customer selection
props.draft.life.age = String(age) 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
const showDetails = ref(false) const showDetails = ref(false)
onMounted(() => { onMounted(() => {
@@ -112,70 +143,188 @@ onMounted(() => {
</section> </section>
<section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10"> <section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
<!-- Insured basic info --> <!-- Insured Section -->
<h3 class="text-base font-semibold text-[var(--text-primary)]">Insured person</h3> <h3 class="text-base font-semibold text-[var(--text-primary)]">Insured</h3>
<p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p> <p class="mt-1 text-sm text-[var(--text-muted)]">Person or entity being insured we'll use this for carrier notifications.</p>
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
<UFormField label="Legal name" required> <div v-if="!selectedCustomer" class="mt-5">
<UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" /> <UInput
</UFormField> v-model="customerSearch"
<UFormField label="Email" required> icon="i-heroicons-magnifying-glass"
<UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" /> placeholder="Search by name, email, RUC..."
</UFormField> class="w-full max-w-sm mb-4"
<UFormField label="Phone"> />
<UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 ..." />
</UFormField> <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
<UFormField label="Government ID"> <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
<UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" /> </div>
</UFormField>
<UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required> <div v-else class="space-y-3 max-h-72 overflow-y-auto">
<UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" /> <div
</UFormField> 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>
<!-- Age & health screening --> <!-- Buyer Section -->
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3> <div class="mt-10 border-t border-[var(--sidebar-border)] pt-10">
<p class="mt-1 text-sm text-[var(--text-muted)]">Basic underwriting inputs carriers use these to determine eligibility and rate class.</p> <div class="flex items-center gap-3 mb-4">
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3"> <h3 class="text-base font-semibold text-[var(--text-primary)]">Buyer</h3>
<UFormField label="Date of birth" required> <div class="flex items-center gap-2">
<UInput v-model="draft.life.dateOfBirth" type="date" :class="inputPh" /> <UToggle v-model="useSameForBuyer" />
</UFormField> <span class="text-sm text-[var(--text-muted)]">Same as insured</span>
<UFormField label="Age"> </div>
<UInput :model-value="draft.life.age" disabled :class="inputPh" placeholder="Auto-calculated" /> </div>
</UFormField>
<UFormField label="Gender" required> <p v-if="useSameForBuyer" class="mt-1 text-sm text-[var(--text-muted)]">
<USelect Using same person as insured
v-model="draft.life.gender" </p>
:items="LIFE_GENDER_OPTIONS"
value-key="value" <div v-else class="mt-5">
label-key="label" <UInput
placeholder="Select one" v-model="customerSearch"
class="w-full" icon="i-heroicons-magnifying-glass"
placeholder="Search by name, email, RUC..."
class="w-full max-w-sm mb-4"
/> />
</UFormField>
<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>
<!-- Health Questionnaire -->
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Health Information</h3>
<p class="mt-1 text-sm text-[var(--text-muted)]">Basic underwriting inputs — carriers use these to determine eligibility and rate class.</p>
<div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4"> <div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
<UCheckbox v-model="draft.life.smoker" label="Smoker / tobacco user (within last 12 months)" /> <UCheckbox v-model="draft.life.smoker" label="Smoker / tobacco user (within last 12 months)" />
<UCheckbox v-model="draft.life.preexistingConditions" label="Preexisting medical conditions" />
<div v-if="draft.life.preexistingConditions" class="ml-6"> <UFormField label="Medications">
<UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc."> <UTextarea
<UTextarea v-model="draft.life.medications"
v-model="draft.life.preexistingDetails" :class="inputPh"
:class="inputPh" placeholder="List any current medications..."
placeholder="List conditions and approximate diagnosis dates" :rows="2"
:rows="3" />
/> </UFormField>
<UFormField label="Surgeries">
<UTextarea
v-model="draft.life.surgeries"
:class="inputPh"
placeholder="List any past surgeries..."
:rows="2"
/>
</UFormField>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<UFormField label="Weight (kg)">
<UInput v-model="draft.life.weight" type="number" :class="inputPh" placeholder="—" />
</UFormField>
<UFormField label="Height (cm)">
<UInput v-model="draft.life.height" type="number" :class="inputPh" placeholder="—" />
</UFormField> </UFormField>
</div> </div>
</div> </div>
<!-- Coverage parameters --> <!-- Coverage parameters -->
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3> <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage Details</h3>
<p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and beneficiary details.</p> <p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and coverage type.</p>
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
<UFormField label="Coverage amount" required> <UFormField label="Coverage type" required>
<USelect <USelect
v-model="draft.life.coverageAmount" v-model="draft.life.coverage_type"
:items="[
{ label: 'Banking', value: 'banking' },
{ label: 'Protection', value: 'protection' }
]"
placeholder="Select one"
class="w-full"
/>
</UFormField>
<UFormField label="Coverage amount (USD)" required>
<USelect
v-model="draft.life.coverage_amount"
:items="LIFE_COVERAGE_AMOUNT_OPTIONS" :items="LIFE_COVERAGE_AMOUNT_OPTIONS"
value-key="value" value-key="value"
label-key="label" label-key="label"
@@ -183,9 +332,9 @@ onMounted(() => {
class="w-full" class="w-full"
/> />
</UFormField> </UFormField>
<UFormField label="Coverage term" required> <UFormField label="Coverage years" required>
<USelect <USelect
v-model="draft.life.coverageTerm" v-model="draft.life.coverage_years"
:items="LIFE_COVERAGE_TERM_OPTIONS" :items="LIFE_COVERAGE_TERM_OPTIONS"
value-key="value" value-key="value"
label-key="label" label-key="label"
@@ -193,19 +342,6 @@ onMounted(() => {
class="w-full" class="w-full"
/> />
</UFormField> </UFormField>
<UFormField label="Beneficiary name">
<UInput v-model="draft.life.beneficiaryName" :class="inputPh" placeholder="Full legal name" />
</UFormField>
<UFormField label="Beneficiary relationship">
<USelect
v-model="draft.life.beneficiaryRelationship"
:items="LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS"
value-key="value"
label-key="label"
placeholder="Select one"
class="w-full"
/>
</UFormField>
</div> </div>
<!-- Forms --> <!-- Forms -->

View File

@@ -4,24 +4,17 @@ export function emptyLifeQuoteDraft(): LifeQuoteDraft {
return { return {
quoteMode: null, quoteMode: null,
segment: null, segment: null,
client: { insured: null,
fullName: '', buyer: null,
email: '',
phone: '',
documentId: '',
organizationName: ''
},
life: { life: {
dateOfBirth: '', coverage_type: 'banking',
age: '', coverage_amount: 0,
gender: '', coverage_years: 10,
smoker: false, smoker: false,
preexistingConditions: false, medications: '',
preexistingDetails: '', surgeries: '',
coverageAmount: '', weight: 0,
coverageTerm: '', height: 0
beneficiaryName: '',
beneficiaryRelationship: ''
}, },
forms: { forms: {
medicalQuestionnaire: false, medicalQuestionnaire: false,

View File

@@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { emptyLifeQuoteDraft } from '~/composables/useLifeQuoteDraft' import { emptyLifeQuoteDraft } from '~/composables/useLifeQuoteDraft'
import type { LifeQuoteIntakePayload, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake' import type { LifeQuoteIntakePayload, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
import { useCustomerSelection } from '~/composables/useCustomerSelection'
import { usePolicyApi } from '~/composables/usePolicyApi'
definePageMeta({ ssr: false }) definePageMeta({ ssr: false })
@@ -24,6 +26,18 @@ const draft = reactive(emptyLifeQuoteDraft())
const toast = useToast() const toast = useToast()
const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled() const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
// Use customer selection composable
const {
insured,
buyer,
isInsuredValid,
isBuyerValid,
validationErrors
} = useCustomerSelection()
// Use policy API composable
const { submitPolicyQuote } = usePolicyApi()
const modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[] = [ const modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[] = [
{ {
id: 'single', id: 'single',
@@ -60,19 +74,6 @@ const segmentCards: { id: LifeQuoteSegment; title: string; hint: string; icon: s
} }
] ]
function canProceedFromCustomer() {
const c = draft.client
if (!c.fullName.trim() || !c.email.trim()) {
toast.add({
title: 'Add legal name and email',
description: 'We need them for notifications and the quote file.',
color: 'warning'
})
return false
}
return true
}
function canProceedFromSetup() { function canProceedFromSetup() {
if (!draft.quoteMode) { if (!draft.quoteMode) {
toast.add({ title: 'Choose quote type', description: 'Single or comparative.', color: 'warning' }) toast.add({ title: 'Choose quote type', description: 'Single or comparative.', color: 'warning' })
@@ -82,30 +83,26 @@ function canProceedFromSetup() {
toast.add({ title: 'Choose policy type', description: 'Individual, corporate / key person, or group.', color: 'warning' }) toast.add({ title: 'Choose policy type', description: 'Individual, corporate / key person, or group.', color: 'warning' })
return false return false
} }
if (!canProceedFromCustomer()) return false if (!isInsuredValid.value) {
if (
(draft.segment === 'corporate_keyman' || draft.segment === 'group') &&
!draft.client.organizationName?.trim()
) {
toast.add({ toast.add({
title: 'Add organization', title: 'Complete insured information',
description: 'Required for corporate and group policies.', description: `Missing: ${validationErrors.value.insured.join(', ')}`,
color: 'warning' color: 'warning'
}) })
return false return false
} }
if (!draft.life.dateOfBirth || !draft.life.gender) { if (!isBuyerValid.value) {
toast.add({ toast.add({
title: 'Complete age & health screening', title: 'Complete buyer information',
description: 'Date of birth and gender are required for life underwriting.', description: `Missing: ${validationErrors.value.buyer.join(', ')}`,
color: 'warning' color: 'warning'
}) })
return false return false
} }
if (!draft.life.coverageAmount || !draft.life.coverageTerm) { if (!draft.life.coverage_type || !draft.life.coverage_amount || !draft.life.coverage_years) {
toast.add({ toast.add({
title: 'Complete coverage intent', title: 'Complete coverage details',
description: 'Select coverage amount and term.', description: 'Coverage type, amount, and years are required.',
color: 'warning' color: 'warning'
}) })
return false return false
@@ -170,17 +167,23 @@ function goNext() {
function buildPayload(): LifeQuoteIntakePayload { function buildPayload(): LifeQuoteIntakePayload {
return { return {
quoteMode: draft.quoteMode!, policy_type: 'life',
segment: draft.segment!, insured: insured.value,
client: { ...draft.client }, buyer: buyer.value,
life: { ...draft.life }, policy_details: { ...draft.life },
solicit: { selected_providers: draft.solicit.carrierIds.map(id => ({
carrierIds: [...draft.solicit.carrierIds], provider_id: id,
planIds: [...draft.solicit.planIds] email: getProviderEmail(id)
} }))
} }
} }
function getProviderEmail(providerId: string): string {
// This would come from the providers API
// For now, return a placeholder
return `quotes@${providerId}.com`
}
async function finalize() { async function finalize() {
if (!draft.quoteMode || !draft.segment) return if (!draft.quoteMode || !draft.segment) return
if (intakeBusy.value) return if (intakeBusy.value) return
@@ -204,6 +207,10 @@ async function finalize() {
}) })
return return
} }
// Submit to policy API
const data = await submitPolicyQuote(payload)
toast.add({ toast.add({
title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)', title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)',
description: emailOn description: emailOn
@@ -211,6 +218,9 @@ async function finalize() {
: 'Outbound provider email is off in Settings — this request stays in-app for tables, APIs, or AI.', : 'Outbound provider email is off in Settings — this request stays in-app for tables, APIs, or AI.',
color: 'success' color: 'success'
}) })
// Navigate to policy detail page
await navigateTo(`/policies/${data.application_id}`)
} finally { } finally {
intakeBusy.value = false intakeBusy.value = false
} }

View File

@@ -1,5 +1,3 @@
import type { AutoQuoteClient } from '~/types/auto-quote-intake'
export type LifeQuoteMode = 'single' | 'comparative_pdf' export type LifeQuoteMode = 'single' | 'comparative_pdf'
export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group' export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group'
@@ -7,19 +5,18 @@ export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group'
export type LifeQuoteDraft = { export type LifeQuoteDraft = {
quoteMode: LifeQuoteMode | null quoteMode: LifeQuoteMode | null
segment: LifeQuoteSegment | null segment: LifeQuoteSegment | null
client: AutoQuoteClient insured: any | null
buyer: any | null
/** Life-specific subscriber details */ /** Life-specific subscriber details */
life: { life: {
dateOfBirth: string coverage_type: 'banking' | 'protection'
age: string coverage_amount: number
gender: string coverage_years: number
smoker: boolean smoker: boolean
preexistingConditions: boolean medications: string
preexistingDetails: string surgeries: string
coverageAmount: string weight: number
coverageTerm: string height: number
beneficiaryName: string
beneficiaryRelationship: string
} }
/** Mock: forms marked complete to proceed */ /** Mock: forms marked complete to proceed */
forms: { forms: {
@@ -34,9 +31,9 @@ export type LifeQuoteDraft = {
} }
export type LifeQuoteIntakePayload = { export type LifeQuoteIntakePayload = {
quoteMode: LifeQuoteMode policy_type: 'life'
segment: LifeQuoteSegment insured: any
client: AutoQuoteClient buyer: any
life: LifeQuoteDraft['life'] policy_details: LifeQuoteDraft['life']
solicit: LifeQuoteDraft['solicit'] selected_providers: Array<{ provider_id: string; email: string }>
} }