@taximiami/booking-form

A 6-step booking wizard for taxi/transfer services. Framework-agnostic React component.

Installation

npm install @taximiami/booking-form

Quick Start

import { BookingProvider, BookingForm } from '@taximiami/booking-form';
import '@taximiami/booking-form/styles';

function App() {
  return (
    <BookingProvider config={{
      api: {
        baseUrl: 'https://your-api.com'
      },
      googleMaps: {
        apiKey: 'YOUR_GOOGLE_MAPS_KEY'
      },
      callbacks: {
        onBookingComplete: (booking) => {
          console.log('Booking completed:', booking);
        }
      }
    }}>
      <BookingForm />
    </BookingProvider>
  );
}

Tailwind Setup

Add the preset to your tailwind.config.js:

import bookingPreset from '@taximiami/booking-form/tailwind-preset';

export default {
  presets: [bookingPreset],
  content: [
    './src/**/*.{js,tsx}',
    './node_modules/@taximiami/booking-form/dist/**/*.js',
  ],
};

Configuration

BookingProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | api.baseUrl | string | Yes | Base URL for the booking API | | api.sessionEndpoint | string | No | Endpoint for chat session handoff | | googleMaps.apiKey | string | No | Google Maps API key for Places | | googleMaps.region | string | No | Region bias for places (default: 'us') | | googleMaps.bounds | object | No | Location bias bounds | | stripe.publishableKey | string | No | Stripe key for payments | | flight.validationEndpoint | string | No | Endpoint for flight validation | | callbacks.onBookingComplete | function | No | Called when booking is completed | | callbacks.onStepChange | function | No | Called when step changes | | callbacks.onError | function | No | Called on errors |

BookingForm Props

| Prop | Type | Description | |------|------|-------------| | onComplete | (booking: BookingResponse) => void | Callback when booking completes | | className | string | Additional CSS classes |

API Requirements

Your booking API should implement these endpoints:

• GET /car-types - Returns available vehicle types
• POST /quote - Returns price quotes
• GET /booking-extras - Returns available extras
• POST /booking/add - Creates a booking

Customization

Using Individual Components

You can import and use individual components for custom layouts:

import {
  Step1Locations,
  Step2DateTime,
  Step3Vehicle,
  ProgressBar,
  Button,
  Input,
} from '@taximiami/booking-form';

Custom Styling

Override CSS variables in your stylesheet:

:root {
  --accent: 200 90% 50%;  /* Your brand color */
  --radius: 0.75rem;      /* Border radius */
}

License

MIT