Quote Page
The quote page (app/cotizacion/page.tsx) is where users submit insurance quote requests. It integrates the CotizacionForm component and supports pre-filled form values through URL query parameters.
Route
- Path:
/cotizacion
- File:
app/cotizacion/page.tsx
- Type: Server Component (async)
Page Purpose
The quote page serves as the primary conversion point where users:
- Select their insurance type
- Choose coverage level (for automotive insurance)
- Provide contact information
- Submit a quote request
URL Parameters
The page accepts two optional query parameters for pre-filling the form:
Parameters
| Parameter | Type | Description | Example |
|---|
tipo | string | Insurance type selection | automotor, hogar, vida |
subtipo | string | Coverage subtype (URL-encoded) | Responsabilidad%20Civil, Todo%20Riesgo |
Parameter Handling
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ tipo?: string; subtipo?: string }>;
}) {
const params = await searchParams;
return (
<CotizacionForm
tipoInicial={params.tipo}
coberturaInicial={params.subtipo ? decodeURIComponent(params.subtipo) : undefined}
/>
);
}
The subtipo parameter is URL-decoded using decodeURIComponent() to handle spaces and special characters in coverage names.
Complete Implementation
import CotizacionForm from "@/app/components/CotizacionForm";
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ tipo?: string; subtipo?: string }>;
}) {
const params = await searchParams;
return (
<CotizacionForm
tipoInicial={params.tipo}
// Pass the decoded "subtipo" value to the form
coberturaInicial={params.subtipo ? decodeURIComponent(params.subtipo) : undefined}
/>
);
}
The page renders the CotizacionForm component, passing URL parameters as props:
Props Passed
<CotizacionForm
tipoInicial={params.tipo} // Insurance type from URL
coberturaInicial={params.subtipo} // Coverage level from URL (decoded)
/>
Component Import
import CotizacionForm from "@/app/components/CotizacionForm";
app/components/CotizacionForm.tsx and handles all form UI, validation, and submission logic.
URL Parameter Examples
Basic Insurance Type Selection
URL: /cotizacion?tipo=automotorPre-fills the form with:
- Insurance type: “Automotor”
- Coverage: User selects from dropdown
// Resulting props
<CotizacionForm
tipoInicial="automotor"
coberturaInicial={undefined}
/>
URL: /cotizacion?tipo=hogarPre-fills the form with:// Resulting props
<CotizacionForm
tipoInicial="hogar"
coberturaInicial={undefined}
/>
URL: /cotizacion?tipo=vidaPre-fills the form with:// Resulting props
<CotizacionForm
tipoInicial="vida"
coberturaInicial={undefined}
/>
Insurance Type with Coverage Level
Responsabilidad Civil
Terceros Completos
Todo Riesgo
URL: /cotizacion?tipo=automotor&subtipo=Responsabilidad%20CivilPre-fills the form with:
- Insurance type: “Automotor”
- Coverage: “Responsabilidad Civil”
// URL parameter
subtipo=Responsabilidad%20Civil
// After decoding
decodeURIComponent("Responsabilidad%20Civil")
// => "Responsabilidad Civil"
// Resulting props
<CotizacionForm
tipoInicial="automotor"
coberturaInicial="Responsabilidad Civil"
/>
URL: /cotizacion?tipo=automotor&subtipo=Terceros%20CompletosPre-fills the form with:
- Insurance type: “Automotor”
- Coverage: “Terceros Completos”
// Resulting props
<CotizacionForm
tipoInicial="automotor"
coberturaInicial="Terceros Completos"
/>
URL: /cotizacion?tipo=automotor&subtipo=Todo%20RiesgoPre-fills the form with:
- Insurance type: “Automotor”
- Coverage: “Todo Riesgo”
// Resulting props
<CotizacionForm
tipoInicial="automotor"
coberturaInicial="Todo Riesgo"
/>
User Flow
Direct Navigation
- User clicks “Solicitar Cotización” from navigation or hero
- Lands on
/cotizacion with no parameters
- Selects insurance type and coverage manually
- Fills in contact information
- Submits quote request
Pre-filled Flow (from Home Page)
- User clicks service card (e.g., “Cotizar ahora” on Automotor)
- Navigates to
/cotizacion?tipo=automotor
- Form loads with insurance type pre-selected
- User selects coverage level
- Fills remaining fields and submits
Fully Pre-filled Flow (from Coverage Cards)
- User clicks coverage tier button (e.g., “Cotizar Terceros”)
- Navigates to
/cotizacion?tipo=automotor&subtipo=Terceros%20Completos
- Form loads with both type and coverage pre-selected
- User only needs to provide contact information
- Submits quote request
Server Component Pattern
The page uses Next.js 13+ server component patterns:
Async/Await for searchParams
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ tipo?: string; subtipo?: string }>;
}) {
// Await the promise to access parameters
const params = await searchParams;
// Use the parameters
return <CotizacionForm tipoInicial={params.tipo} />;
}
In Next.js 13+, searchParams is a Promise that must be awaited in server components.
Type Safety
Both tipo and subtipo are typed as optional strings:
searchParams: Promise<{
tipo?: string; // Optional insurance type
subtipo?: string; // Optional coverage subtype
}>
Integration Points
Incoming Links from Home Page
The home page links to this page with various parameter combinations:
Service Cards:
<a href="/cotizacion?tipo=automotor">Cotizar ahora →</a>
<a href="/cotizacion?tipo=hogar">Cotizar ahora →</a>
<a href="/cotizacion?tipo=vida">Cotizar ahora →</a>
<a href="/cotizacion?tipo=responsabilidad civil">Cotizar ahora →</a>
<a href="/cotizacion?tipo=accidentes personales">Cotizar ahora →</a>
<a href="/cotizacion?tipo=incendio">Cotizar ahora →</a>
<a href="/cotizacion?tipo=automotor&subtipo=Responsabilidad Civil">
Cotizar RC
</a>
<a href="/cotizacion?tipo=automotor&subtipo=Terceros Completos">
Cotizar Terceros
</a>
<a href="/cotizacion?tipo=automotor&subtipo=Todo Riesgo">
Cotizar Todo Riesgo
</a>
Navigation Links
The page is accessible from:
- Main navigation header
- Hero section CTA button
- Service card links (6 insurance types)
- Coverage tier buttons (3 automotive levels)
URL Encoding Examples
Spaces in Parameters
// Original text
"Responsabilidad Civil"
// URL encoded (browser does this automatically)
"Responsabilidad%20Civil"
// Decoded in component
decodeURIComponent("Responsabilidad%20Civil")
// => "Responsabilidad Civil"
Multiple Word Parameters
// "accidentes personales" becomes
"accidentes%20personales"
// "responsabilidad civil" becomes
"responsabilidad%20civil"
Best Practices
Always Decode URL Parameters
// ✅ Correct - decode the parameter
coberturaInicial={params.subtipo ? decodeURIComponent(params.subtipo) : undefined}
// ❌ Incorrect - will have %20 instead of spaces
coberturaInicial={params.subtipo}
Handle Missing Parameters
// ✅ Pass undefined when parameter is missing
tipoInicial={params.tipo}
// If params.tipo is undefined, form shows default state
// ✅ Conditional decoding
coberturaInicial={params.subtipo ? decodeURIComponent(params.subtipo) : undefined}
// Only decode if parameter exists
File Location
source/
└── app/
└── cotizacion/
└── page.tsx # This page
