98 lines
3.7 KiB
Vue
98 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
|
|
|
|
const props = defineProps<{
|
|
draft: AutoQuoteDraft
|
|
modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[]
|
|
segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[]
|
|
}>()
|
|
|
|
function setMode(m: AutoQuoteMode) {
|
|
props.draft.quoteMode = m
|
|
}
|
|
|
|
function setSegment(s: AutoQuoteSegment) {
|
|
props.draft.segment = s
|
|
}
|
|
|
|
/** Mount vehicle + selects after first paint — avoids blocking the main thread when the route opens */
|
|
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 — same workflow; comparative opens the comparison sheet after you send requests.</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)]">Who is this policy for?</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 class="border-t border-[var(--sidebar-border)] pt-10">
|
|
<QuotesAutoCustomerVehicleStep v-if="showDetails" :draft="draft" :segment="draft.segment" />
|
|
<div
|
|
v-else
|
|
class="min-h-[14rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
|
|
aria-busy="true"
|
|
aria-label="Loading form"
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|