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:
@@ -1,11 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LIFE_GENDER_OPTIONS,
|
||||
LIFE_COVERAGE_TERM_OPTIONS,
|
||||
LIFE_COVERAGE_AMOUNT_OPTIONS,
|
||||
LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS
|
||||
LIFE_COVERAGE_TERM_OPTIONS
|
||||
} from '~/data/life-quote-intake'
|
||||
import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
|
||||
import { useCustomerSelection } from '~/composables/useCustomerSelection'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: LifeQuoteDraft
|
||||
@@ -28,22 +27,54 @@ const showOrganization = computed(
|
||||
() => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group'
|
||||
)
|
||||
|
||||
/** Compute age from date of birth */
|
||||
watch(
|
||||
() => props.draft.life.dateOfBirth,
|
||||
(dob) => {
|
||||
if (!dob) {
|
||||
props.draft.life.age = ''
|
||||
return
|
||||
}
|
||||
const birth = new Date(dob)
|
||||
const today = new Date()
|
||||
let age = today.getFullYear() - birth.getFullYear()
|
||||
const m = today.getMonth() - birth.getMonth()
|
||||
if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
|
||||
props.draft.life.age = String(age)
|
||||
}
|
||||
)
|
||||
// Use customer selection composable
|
||||
const {
|
||||
selectedCustomer,
|
||||
selectedBuyer,
|
||||
useSameForBuyer,
|
||||
insured,
|
||||
buyer,
|
||||
isInsuredValid,
|
||||
isBuyerValid,
|
||||
validationErrors
|
||||
} = useCustomerSelection()
|
||||
|
||||
// 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
|
||||
|
||||
const showDetails = ref(false)
|
||||
onMounted(() => {
|
||||
@@ -112,70 +143,188 @@ onMounted(() => {
|
||||
</section>
|
||||
|
||||
<section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
|
||||
<!-- Insured basic info -->
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Insured person</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</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 ID" />
|
||||
</UFormField>
|
||||
<UFormField label="Email" required>
|
||||
<UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
|
||||
</UFormField>
|
||||
<UFormField label="Phone">
|
||||
<UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 ..." />
|
||||
</UFormField>
|
||||
<UFormField label="Government ID">
|
||||
<UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
|
||||
</UFormField>
|
||||
<UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
|
||||
<UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
|
||||
</UFormField>
|
||||
<!-- Insured Section -->
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Insured</h3>
|
||||
<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>
|
||||
|
||||
<!-- Age & health screening -->
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</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 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Date of birth" required>
|
||||
<UInput v-model="draft.life.dateOfBirth" type="date" :class="inputPh" />
|
||||
</UFormField>
|
||||
<UFormField label="Age">
|
||||
<UInput :model-value="draft.life.age" disabled :class="inputPh" placeholder="Auto-calculated" />
|
||||
</UFormField>
|
||||
<UFormField label="Gender" required>
|
||||
<USelect
|
||||
v-model="draft.life.gender"
|
||||
:items="LIFE_GENDER_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
<!-- Buyer Section -->
|
||||
<div class="mt-10 border-t border-[var(--sidebar-border)] pt-10">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Buyer</h3>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<!-- 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">
|
||||
<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="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
|
||||
<UTextarea
|
||||
v-model="draft.life.preexistingDetails"
|
||||
:class="inputPh"
|
||||
placeholder="List conditions and approximate diagnosis dates"
|
||||
:rows="3"
|
||||
/>
|
||||
|
||||
<UFormField label="Medications">
|
||||
<UTextarea
|
||||
v-model="draft.life.medications"
|
||||
:class="inputPh"
|
||||
placeholder="List any current medications..."
|
||||
:rows="2"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coverage parameters -->
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and beneficiary details.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<UFormField label="Coverage amount" required>
|
||||
<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 coverage type.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Coverage type" required>
|
||||
<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"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
@@ -183,9 +332,9 @@ onMounted(() => {
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Coverage term" required>
|
||||
<UFormField label="Coverage years" required>
|
||||
<USelect
|
||||
v-model="draft.life.coverageTerm"
|
||||
v-model="draft.life.coverage_years"
|
||||
:items="LIFE_COVERAGE_TERM_OPTIONS"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
@@ -193,19 +342,6 @@ onMounted(() => {
|
||||
class="w-full"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<!-- Forms -->
|
||||
|
||||
Reference in New Issue
Block a user