WIP jordan
This commit is contained in:
Jordan Weingarten
250
app/components/quotes/health/SetupStep.vue
Normal file
250
app/components/quotes/health/SetupStep.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
HEALTH_AGE_BAND_REFERENCE,
|
||||
HEALTH_COVERAGE_AREA,
|
||||
HEALTH_DEDUCTIBLE,
|
||||
HEALTH_NETWORK_TIER,
|
||||
HEALTH_QUOTE_CARRIERS
|
||||
} from '~/data/health-quote-intake'
|
||||
import type { HealthQuoteDraft, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
|
||||
|
||||
const props = defineProps<{
|
||||
draft: HealthQuoteDraft
|
||||
modeCards: { id: HealthQuoteMode; title: string; hint: string; icon: string }[]
|
||||
segmentCards: { id: HealthQuoteSegment; title: string; hint: string; icon: string }[]
|
||||
}>()
|
||||
|
||||
function setMode(m: HealthQuoteMode) {
|
||||
props.draft.quoteMode = m
|
||||
}
|
||||
|
||||
function setSegment(s: HealthQuoteSegment) {
|
||||
props.draft.segment = s
|
||||
}
|
||||
|
||||
const showPublishedTable = computed(() =>
|
||||
HEALTH_QUOTE_CARRIERS.some((c) => c.hasPublishedRateTable)
|
||||
)
|
||||
|
||||
const inputPh =
|
||||
'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
|
||||
|
||||
const showOrganization = computed(
|
||||
() => props.draft.segment === 'corporate' || props.draft.segment === 'group'
|
||||
)
|
||||
|
||||
/** Compute age from date of birth */
|
||||
watch(
|
||||
() => props.draft.health.dateOfBirth,
|
||||
(dob) => {
|
||||
if (!dob) {
|
||||
props.draft.health.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.health.age = String(age)
|
||||
}
|
||||
)
|
||||
|
||||
const showDetails = ref(false)
|
||||
onMounted(() => {
|
||||
requestAnimationFrame(() => {
|
||||
showDetails.value = true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-10">
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="card in modeCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.quoteMode === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setMode(card.id)"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
|
||||
<UIcon :name="card.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">Individual, employer corporate, or group policy.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<button
|
||||
v-for="card in segmentCards"
|
||||
:key="card.id"
|
||||
type="button"
|
||||
class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
|
||||
:class="
|
||||
draft.segment === card.id
|
||||
? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
|
||||
: 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
|
||||
"
|
||||
@click="setSegment(card.id)"
|
||||
>
|
||||
<UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
|
||||
<p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
|
||||
<p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Subscriber & contact</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>
|
||||
</div>
|
||||
|
||||
<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 information carriers use for eligibility and rate bands.</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.health.dateOfBirth" type="date" :class="inputPh" />
|
||||
</UFormField>
|
||||
<UFormField label="Age">
|
||||
<UInput :model-value="draft.health.age" disabled :class="inputPh" placeholder="Auto-calculated" />
|
||||
</UFormField>
|
||||
<div />
|
||||
</div>
|
||||
<div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.health.preexistingConditions" label="Preexisting medical conditions" />
|
||||
<div v-if="draft.health.preexistingConditions" class="ml-6">
|
||||
<UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
|
||||
<UTextarea
|
||||
v-model="draft.health.preexistingDetails"
|
||||
:class="inputPh"
|
||||
placeholder="List conditions and approximate diagnosis dates"
|
||||
:rows="3"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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)]">Product parameters carriers use before underwriting.</p>
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<UFormField label="Coverage area">
|
||||
<USelect
|
||||
v-model="draft.health.coverageArea"
|
||||
:items="HEALTH_COVERAGE_AREA"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Network tier">
|
||||
<USelect
|
||||
v-model="draft.health.networkTier"
|
||||
:items="HEALTH_NETWORK_TIER"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Deductible preference">
|
||||
<USelect
|
||||
v-model="draft.health.deductible"
|
||||
:items="HEALTH_DEDUCTIBLE"
|
||||
value-key="value"
|
||||
label-key="label"
|
||||
placeholder="Select one"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Confirm required templates are completed (uploads wire to the forms library later).
|
||||
</p>
|
||||
<div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
|
||||
<UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaración de salud)" />
|
||||
<UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation" />
|
||||
<UCheckbox
|
||||
v-model="draft.forms.groupCensus"
|
||||
label="Group census / employee roster (required for group policies)"
|
||||
:disabled="draft.segment !== 'group'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showPublishedTable" class="mt-10">
|
||||
<h3 class="text-base font-semibold text-[var(--text-primary)]">Published rate reference (age bands)</h3>
|
||||
<p class="mt-1 text-sm text-[var(--text-muted)]">
|
||||
Some carriers publish indicative premiums by age band. Use as a guide; final quotes may still require
|
||||
underwriting. When your tenant uses table pricing or AI instead of email, turn off outbound emails under
|
||||
Settings → Quote requests.
|
||||
</p>
|
||||
<div class="mt-4 overflow-x-auto rounded-xl border border-[var(--sidebar-border)]">
|
||||
<table class="min-w-full text-left text-sm text-[var(--text-primary)]">
|
||||
<thead class="bg-[var(--page-bg)] text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
|
||||
<tr>
|
||||
<th class="px-3 py-2">Age band</th>
|
||||
<th class="px-3 py-2">Employee</th>
|
||||
<th class="px-3 py-2">Spouse</th>
|
||||
<th class="px-3 py-2">Child</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in HEALTH_AGE_BAND_REFERENCE" :key="row.ageBand" class="border-t border-[var(--sidebar-border)]">
|
||||
<td class="px-3 py-2 font-medium">{{ row.ageBand }}</td>
|
||||
<td class="px-3 py-2">${{ row.employee }}</td>
|
||||
<td class="px-3 py-2">${{ row.spouse }}</td>
|
||||
<td class="px-3 py-2">${{ row.children }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
v-else
|
||||
class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
|
||||
aria-busy="true"
|
||||
aria-label="Loading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user