98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
import { AUTO_COVERAGE_PLANS, AUTO_QUOTE_CARRIERS } from '~/data/auto-quote-intake'
|
||
import type { AutoQuoteDraft, AutoQuoteMode } from '~/types/auto-quote-intake'
|
||
|
||
const props = defineProps<{
|
||
draft: AutoQuoteDraft
|
||
quoteMode: AutoQuoteMode
|
||
}>()
|
||
|
||
function setCarrier(id: string, checked: boolean) {
|
||
const xs = props.draft.solicit.carrierIds
|
||
if (checked && !xs.includes(id)) xs.push(id)
|
||
if (!checked) {
|
||
const i = xs.indexOf(id)
|
||
if (i !== -1) xs.splice(i, 1)
|
||
}
|
||
}
|
||
|
||
function carrierChecked(id: string) {
|
||
return props.draft.solicit.carrierIds.includes(id)
|
||
}
|
||
|
||
function setPlan(id: string, checked: boolean) {
|
||
const xs = props.draft.solicit.planIds
|
||
if (checked && !xs.includes(id)) xs.push(id)
|
||
if (!checked) {
|
||
const i = xs.indexOf(id)
|
||
if (i !== -1) xs.splice(i, 1)
|
||
}
|
||
}
|
||
|
||
function planChecked(id: string) {
|
||
return props.draft.solicit.planIds.includes(id)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<p class="text-sm text-[var(--text-muted)]">
|
||
Choose carriers (quoting emails are maintained per provider in Settings). Pick coverage packages to request.
|
||
</p>
|
||
<UAlert
|
||
v-if="quoteMode === 'comparative_pdf'"
|
||
color="info"
|
||
variant="soft"
|
||
class="mt-4"
|
||
title="Comparative quote"
|
||
description="We’ll prepare side-by-side comparisons using your predetermined plans. When premiums arrive by email, you can enter them into the comparative sheet."
|
||
/>
|
||
<UAlert
|
||
v-else
|
||
color="neutral"
|
||
variant="soft"
|
||
class="mt-4"
|
||
title="Single quote"
|
||
description="We’ll email each selected carrier’s quoting address on file. Attach the same vehicle and coverage ask in each request."
|
||
/>
|
||
</div>
|
||
|
||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Insurance companies</p>
|
||
<ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
|
||
<li
|
||
v-for="c in AUTO_QUOTE_CARRIERS"
|
||
:key="c.id"
|
||
class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
|
||
>
|
||
<UCheckbox
|
||
:model-value="carrierChecked(c.id)"
|
||
:label="c.name"
|
||
@update:model-value="(v: boolean) => setCarrier(c.id, v)"
|
||
/>
|
||
<span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverages / plans</p>
|
||
<ul class="mt-3 space-y-3">
|
||
<li
|
||
v-for="p in AUTO_COVERAGE_PLANS"
|
||
:key="p.id"
|
||
class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
|
||
>
|
||
<UCheckbox
|
||
:model-value="planChecked(p.id)"
|
||
:label="p.label"
|
||
@update:model-value="(v: boolean) => setPlan(p.id, v)"
|
||
/>
|
||
<span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|