Day 11: Booking Integration

Day 11 focused on making it easy for potential clients to book consultations. Instead of scattered contact links, we now have a unified booking system powered by Cal.com that works seamlessly across desktop and mobile devices.

Update

  • Created a dedicated /book page with Cal.com integration using @calcom/embed-react
  • Unified all consultation CTAs across the site to point to the new booking page
  • Implemented mobile-optimized full-screen modal experience with loading states
  • Added URL validation utility for secure booking URL construction (XSS prevention)
  • Fixed Lighthouse CI accessibility failures on /assessment and /about pages caused by CSS animations
  • Added comprehensive test coverage including property tests, unit tests, and design system tests
  • Refactored booking component for better accessibility and user experience

What Shipped

1. Dedicated Booking Page

The new /book page (src/pages/book.astro) provides a focused booking experience:

  • Cal.com Integration: Uses @calcom/embed-react widget loaded on demand (not an iframe)
  • Direct Link Fallback: Includes a direct Cal.com link as backup if the embed fails
  • Loading States: Shows loading overlay while the embed initializes
  • Mobile Optimization: Full-screen modal experience on mobile devices
  • Accessibility: Proper ARIA labels and keyboard navigation support

The booking page connects to the Cal.com event yoren-chang/30min for 30-minute consultation bookings.

2. Unified Consultation CTAs

All consultation CTAs across the site now point to /book:

  • Hero Component: Updated CTA to link to booking page
  • Assessment Page: Consultation CTA redirects to booking
  • Results Pages: All “Free 30-Minute Call” CTAs unified
  • How We Work Page: Consultation links updated
  • About Page: Consultation CTAs consolidated
  • ClosingCTA Component: Standardized across all pages

This creates a consistent user journey regardless of where users enter the site.

3. Mobile-Optimized Experience

The booking experience received special attention for mobile users:

Full-Screen Modal:

  • Calendar opens in a full-screen modal on mobile devices
  • Better use of limited screen space
  • Prevents accidental navigation away from booking flow

Scrollable and Resettable:

  • Modal content is scrollable for long calendar views
  • Users can easily reset and start over if needed
  • Smooth transitions between states

Loading Overlay:

  • Shows loading indicator while Cal embed initializes
  • Prevents interaction with incomplete UI
  • Provides clear feedback during load

4. URL Validation Utility

Created a new src/utils/urlValidation.ts utility for secure booking URL construction:

  • Type Checking: Validates URL types and formats
  • Normalization: Ensures consistent URL structure
  • XSS Prevention: Prevents malicious URL injection
  • Error Handling: Clear feedback on invalid inputs
  • Fallback Logic: Safe default if validation fails

This utility is used throughout the booking flow to ensure security and reliability.

5. Lighthouse CI Accessibility Fixes

Fixed critical Lighthouse CI failures that were causing null and NaN performance scores on /assessment and /about pages:

The Problem:

  • CSS animations on both pages started with opacity: 0, hiding content initially
  • Lighthouse measured Largest Contentful Paint (LCP) before animations completed
  • Result: NO_LCP errors → NaN performance scores → CI failures

Root Causes:

  1. Assessment Page: Header section had opacity: 0 with fadeInUp animation, hiding the H1 and intro text
  2. About Page: Hero section used backwards animation logic that hid content when prefers-reduced-motion: no-preference (default in headless Chrome)
  3. Server Readiness: CI workflow used unreliable sleep 5 instead of proper polling
  4. Chrome Flags: Configuration issues prevented proper headless Chrome execution

Solutions Implemented:

  • Removed problematic animations: Ensured content is immediately visible by default
  • Fixed server readiness: Implemented robust polling mechanism with curl checks
  • Fixed Chrome flags: Configured as array in .lighthouserc.ci.json (not string)
  • Simplified CI config: Removed parameter overrides that prevented Chrome flags from applying

Key Learning: Content-first beats animation-first. For Lighthouse and accessibility, always prioritize immediate content visibility over fancy animations. Progressive enhancement (show content by default, enhance with animations when safe) is the better approach.

All pages now pass Lighthouse CI with 90%+ scores across all categories. ✅

6. Enhanced Animations (Post-Fix)

After fixing the Lighthouse issues, we refined animations with a content-first approach:

  • Hero Component: Content visible by default, animations enhance when safe
  • Assessment Page: Removed blocking animations, content renders immediately
  • Consistent Timing: Aligned animation timing with design system where appropriate

7. Comprehensive Test Coverage

Following the testing patterns from previous days, we added extensive test coverage:

Booking CTA Tests:

  • booking-cta-interface.property.test.ts - Validates CTA interface consistency
  • booking-cta-link.property.test.ts - Ensures all CTAs link correctly
  • booking-cta.unit.test.ts - Unit tests for CTA components

Design System Tests:

  • Animation timing tests
  • Touch target size validation
  • Font loading optimization tests
  • CSS purging effectiveness tests

Performance Tests:

  • Lighthouse performance property tests
  • Expanded Lighthouse coverage and assertions

Component Tests:

  • Updated ClosingCTA component tests
  • Updated CallToAction component tests

8. Component Refactoring

CalInlineEmbed Component:

  • Rearranged button and link layout for improved accessibility
  • Updated styles for consistent primary/secondary button design
  • Enhanced error handling and user feedback
  • Better component organization and maintainability

Design Decisions

On-Demand Loading

Instead of loading the Cal.com embed on every page, we load it only when needed:

  • Performance: Reduces initial page load time
  • Bundle Size: Smaller JavaScript bundle for pages that don’t need booking
  • User Experience: Faster page loads, embed loads when user is ready to book

Mobile-First Modal Approach

The full-screen modal for mobile was chosen over inline embedding:

  • Screen Real Estate: Better use of limited mobile screen space
  • Focus: Reduces distractions during booking flow
  • Consistency: Familiar mobile pattern users expect

Unified CTA Strategy

All CTAs point to /book rather than directly to Cal.com:

  • Consistency: Single booking entry point across the site
  • Analytics: Easier to track booking conversions
  • Flexibility: Can update booking system without changing all CTAs
  • User Experience: Clear, predictable path to booking

Security-First URL Validation

The URL validation utility prevents:

  • XSS Attacks: Validates and sanitizes URLs before use
  • Malicious Redirects: Ensures URLs point to trusted domains
  • Data Integrity: Normalizes URLs for consistent behavior

Try It