Flea Flicker
2e99ed520f
- New analytics utility (src/lib/analytics.ts) with ANALYTICS_EVENTS constants and fireAnalyticsEvent() – thin wrapper over window.dispatchEvent, no-op safe Built for Plausible/GTM integration later. - Public booking wizard (Book.tsx): fires step-transition events at each step (service → time → contact → submit) plus booking_confirmed on the dedicated confirmation page. - Portal BookingFlow (Appointments.tsx): fires equivalent events for the portal booking flow. booking_confirmed fires via useEffect when the inline success state is shown. - BookingErrorPage: fires booking_error on mount (no PII in payload). Events include step name and flow type (public/portal) but contain no PII: no names, emails, phone numbers, or pet names in any payload. Co-Authored-By: Paperclip <noreply@paperclip.ing>
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { useEffect } from "react";
|
|
import { ANALYTICS_EVENTS, fireAnalyticsEvent } from "../lib/analytics";
|
|
|
|
export function BookingConfirmedPage() {
|
|
useEffect(() => {
|
|
fireAnalyticsEvent(ANALYTICS_EVENTS.BOOKING_CONFIRMED, { step: "confirmed", flow: "public" });
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minHeight: "100vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontFamily: "system-ui, sans-serif",
|
|
background: "#f0fdf4",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
borderRadius: 12,
|
|
padding: "2.5rem 3rem",
|
|
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
|
textAlign: "center",
|
|
maxWidth: 420,
|
|
}}
|
|
>
|
|
<div style={{ fontSize: 56, marginBottom: "0.5rem" }}>✓</div>
|
|
<h1 style={{ color: "#15803d", fontSize: 24, margin: "0 0 0.5rem" }}>
|
|
Appointment Confirmed
|
|
</h1>
|
|
<p style={{ color: "#4b5563", margin: "0 0 1.5rem" }}>
|
|
Thank you! Your appointment is confirmed. We look forward to seeing you
|
|
and your furry friend.
|
|
</p>
|
|
<a
|
|
href="/"
|
|
style={{
|
|
display: "inline-block",
|
|
padding: "0.6rem 1.5rem",
|
|
background: "#16a34a",
|
|
color: "#fff",
|
|
borderRadius: 6,
|
|
textDecoration: "none",
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
Back to Portal
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|