From 6c411ce2b62dc461568d7efda2a39bf32eab582e Mon Sep 17 00:00:00 2001
From: HaimKortovich <haimkortovich88@gmail.com>
Date: Mon, 27 Apr 2026 15:03:43 -0500
Subject: [PATCH] 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
---
 app/components/quotes/life/SetupStep.vue | 308 ++++++++++++++++-------
 app/composables/useLifeQuoteDraft.ts     |  25 +-
 app/pages/quotes/life/index.vue          |  78 +++---
 app/types/life-quote-intake.ts           |  31 ++-
 4 files changed, 289 insertions(+), 153 deletions(-)

diff --git a/app/components/quotes/life/SetupStep.vue b/app/components/quotes/life/SetupStep.vue
index 6dee215..bcc3d9f 100644
--- a/app/components/quotes/life/SetupStep.vue
+++ b/app/components/quotes/life/SetupStep.vue
@@ -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 -->
diff --git a/app/composables/useLifeQuoteDraft.ts b/app/composables/useLifeQuoteDraft.ts
index 3dc0327..1a014f0 100644
--- a/app/composables/useLifeQuoteDraft.ts
+++ b/app/composables/useLifeQuoteDraft.ts
@@ -4,24 +4,17 @@ export function emptyLifeQuoteDraft(): LifeQuoteDraft {
   return {
     quoteMode: null,
     segment: null,
-    client: {
-      fullName: '',
-      email: '',
-      phone: '',
-      documentId: '',
-      organizationName: ''
-    },
+    insured: null,
+    buyer: null,
     life: {
-      dateOfBirth: '',
-      age: '',
-      gender: '',
+      coverage_type: 'banking',
+      coverage_amount: 0,
+      coverage_years: 10,
       smoker: false,
-      preexistingConditions: false,
-      preexistingDetails: '',
-      coverageAmount: '',
-      coverageTerm: '',
-      beneficiaryName: '',
-      beneficiaryRelationship: ''
+      medications: '',
+      surgeries: '',
+      weight: 0,
+      height: 0
     },
     forms: {
       medicalQuestionnaire: false,
diff --git a/app/pages/quotes/life/index.vue b/app/pages/quotes/life/index.vue
index 310f401..126d864 100644
--- a/app/pages/quotes/life/index.vue
+++ b/app/pages/quotes/life/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { emptyLifeQuoteDraft } from '~/composables/useLifeQuoteDraft'
 import type { LifeQuoteIntakePayload, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
+import { useCustomerSelection } from '~/composables/useCustomerSelection'
+import { usePolicyApi } from '~/composables/usePolicyApi'
 
 definePageMeta({ ssr: false })
 
@@ -24,6 +26,18 @@ const draft = reactive(emptyLifeQuoteDraft())
 const toast = useToast()
 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 }[] = [
   {
     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() {
   if (!draft.quoteMode) {
     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' })
     return false
   }
-  if (!canProceedFromCustomer()) return false
-  if (
-    (draft.segment === 'corporate_keyman' || draft.segment === 'group') &&
-    !draft.client.organizationName?.trim()
-  ) {
+  if (!isInsuredValid.value) {
     toast.add({
-      title: 'Add organization',
-      description: 'Required for corporate and group policies.',
+      title: 'Complete insured information',
+      description: `Missing: ${validationErrors.value.insured.join(', ')}`,
       color: 'warning'
     })
     return false
   }
-  if (!draft.life.dateOfBirth || !draft.life.gender) {
+  if (!isBuyerValid.value) {
     toast.add({
-      title: 'Complete age & health screening',
-      description: 'Date of birth and gender are required for life underwriting.',
+      title: 'Complete buyer information',
+      description: `Missing: ${validationErrors.value.buyer.join(', ')}`,
       color: 'warning'
     })
     return false
   }
-  if (!draft.life.coverageAmount || !draft.life.coverageTerm) {
+  if (!draft.life.coverage_type || !draft.life.coverage_amount || !draft.life.coverage_years) {
     toast.add({
-      title: 'Complete coverage intent',
-      description: 'Select coverage amount and term.',
+      title: 'Complete coverage details',
+      description: 'Coverage type, amount, and years are required.',
       color: 'warning'
     })
     return false
@@ -170,17 +167,23 @@ function goNext() {
 
 function buildPayload(): LifeQuoteIntakePayload {
   return {
-    quoteMode: draft.quoteMode!,
-    segment: draft.segment!,
-    client: { ...draft.client },
-    life: { ...draft.life },
-    solicit: {
-      carrierIds: [...draft.solicit.carrierIds],
-      planIds: [...draft.solicit.planIds]
-    }
+    policy_type: 'life',
+    insured: insured.value,
+    buyer: buyer.value,
+    policy_details: { ...draft.life },
+    selected_providers: draft.solicit.carrierIds.map(id => ({
+      provider_id: id,
+      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() {
   if (!draft.quoteMode || !draft.segment) return
   if (intakeBusy.value) return
@@ -204,6 +207,10 @@ async function finalize() {
       })
       return
     }
+
+    // Submit to policy API
+    const data = await submitPolicyQuote(payload)
+    
     toast.add({
       title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)',
       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.',
       color: 'success'
     })
+    
+    // Navigate to policy detail page
+    await navigateTo(`/policies/${data.application_id}`)
   } finally {
     intakeBusy.value = false
   }
diff --git a/app/types/life-quote-intake.ts b/app/types/life-quote-intake.ts
index 5cc7b20..4ae9885 100644
--- a/app/types/life-quote-intake.ts
+++ b/app/types/life-quote-intake.ts
@@ -1,5 +1,3 @@
-import type { AutoQuoteClient } from '~/types/auto-quote-intake'
-
 export type LifeQuoteMode = 'single' | 'comparative_pdf'
 
 export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group'
@@ -7,19 +5,18 @@ export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group'
 export type LifeQuoteDraft = {
   quoteMode: LifeQuoteMode | null
   segment: LifeQuoteSegment | null
-  client: AutoQuoteClient
+  insured: any | null
+  buyer: any | null
   /** Life-specific subscriber details */
   life: {
-    dateOfBirth: string
-    age: string
-    gender: string
+    coverage_type: 'banking' | 'protection'
+    coverage_amount: number
+    coverage_years: number
     smoker: boolean
-    preexistingConditions: boolean
-    preexistingDetails: string
-    coverageAmount: string
-    coverageTerm: string
-    beneficiaryName: string
-    beneficiaryRelationship: string
+    medications: string
+    surgeries: string
+    weight: number
+    height: number
   }
   /** Mock: forms marked complete to proceed */
   forms: {
@@ -34,9 +31,9 @@ export type LifeQuoteDraft = {
 }
 
 export type LifeQuoteIntakePayload = {
-  quoteMode: LifeQuoteMode
-  segment: LifeQuoteSegment
-  client: AutoQuoteClient
-  life: LifeQuoteDraft['life']
-  solicit: LifeQuoteDraft['solicit']
+  policy_type: 'life'
+  insured: any
+  buyer: any
+  policy_details: LifeQuoteDraft['life']
+  selected_providers: Array<{ provider_id: string; email: string }>
 }