Seats SDK

A React SDK for integrating seat selection functionality into transportation booking applications. This library provides a complete seat selection modal with support for both bus and train bookings.

Features

• Seat Selection Modal: Complete modal interface for selecting seats on buses and trains
• Internationalization: Built-in i18n support for multiple locales
• Environment Configuration: Support for demo, playground, and production environments

Components

SeatsModal

The main component that provides the seat selection interface. Supports various transportation modes and booking flows.

Key Props:

• retailerPartnerNumber: Partner identification number
• locale: Language locale (e.g., "en", "de")
• currency: Currency code (e.g., "EUR", "USD")
• env: Environment ("demo", "production", "playground")
• passengers: Array of passenger configurations
• connections: Journey connection details
• flowType: Optional flow type ("two_step")
• selectedFares: Selected fare information for two-step flow

Installation

# Using npm
npm install @distribusion/seats-sdk

Usage

Basic Usage

import React, { useState } from 'react';
import { SeatsModal, type SeatsModalProps } from '@distribusion/seats-sdk';
import type { Seat } from '@distribusion/seats-sdk';

function App() {
  const [selectedSeats, setSelectedSeats] = useState<Seat.SubmitData>();
  const [modalOpen, setModalOpen] = useState(false);

  const handleSeatsSubmit = (data: Seat.SubmitData) => {
    setSelectedSeats(data);
    setModalOpen(false);
  };

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Select Seats</button>
      
      <SeatsModal
        retailerPartnerNumber={222222}
        locale="en"
        currency="EUR"
        env="demo"
        passengers={[{ type: 'PNOS', pax: 1, maxAge: 65 }]}
        connections={{
          outbound: {
            marketingCarrierCode: 'APBE',
            departureStation: 'FRPARLDE',
            arrivalStation: 'FRPARPBE',
            departureStartTime: '07:00',
            departureEndTime: '07:00',
            departureDate: '2025-09-03',
          }
        }}
        opened={modalOpen}
        onSubmit={handleSeatsSubmit}
        onClose={() => setModalOpen(false)}
      />
    </div>
  );
}

Two-Step Flow (Train Bookings)

For train bookings with fare selection:

<SeatsModal
  retailerPartnerNumber={222222}
  locale="en"
  currency="EUR"
  env="production"
  flowType="two_step"
  passengers={[{ type: 'PNOS', pax: 1, maxAge: 65 }]}
  selectedFares={{ outbound: 'FARE-1', inbound: 'FARE-1' }}
  connections={{
    outbound: {
      departureStation: 'DEMUCMHU',
      arrivalStation: 'DEBEROST',
      departureStartTime: '00:00',
      departureEndTime: '00:00',
      departureDate: '2025-09-01',
    },
    inbound: {
      departureStation: 'DEBEROST',
      arrivalStation: 'DEMUCMHU',
      departureStartTime: '03:01',
      departureEndTime: '03:01',
      departureDate: '2025-10-02',
    },
  }}
  opened={modalOpen}
  onSubmit={handleSeatsSubmit}
  onClose={() => setModalOpen(false)}
/>

Using Selected Seats in API Calls

After users select seats through the SeatsModal, you need to transform the returned seat data for use in your booking and reservation API calls to the Distribusion API.

Seat Data Format

The SeatsModal returns seat selections through the onSubmit callback in this format:

interface Seat.SubmitData {
  seats: {
    outbound?: Record<number, Seat.Selected[]>  // Seats by segment index
    inbound?: Record<number, Seat.Selected[]>   // Seats by segment index  
  }
  passengerCard?: DiscountCard.Item | null
}

interface Seat.Selected {
  code: string           // Seat identifier (e.g., "1A", "SEAT-0-3-0")
  fareClass: string | null
  price?: number | null
  label?: string
  carIndex?: number
  segmentIndex?: number  // Journey segment index (0-based)
  limitations?: Discount[]
}

Transforming Seat Data for API Calls

The Distribusion API expects seat codes to be specified per passenger. You'll need to transform the SDK data:

const handleSeatsSubmit = async (seatData: Seat.SubmitData) => {
  // Transform SDK seat data to API format
  const transformedSeats: Array<{ seatCode: string, segmentIndex: number }> = []
  
  // Process outbound seats
  if (seatData.seats.outbound) {
    Object.entries(seatData.seats.outbound).forEach(([segmentIndex, seats]) => {
      seats.forEach(seat => {
        transformedSeats.push({
          seatCode: seat.code,
          segmentIndex: parseInt(segmentIndex)
        })
      })
    })
  }
  
  // Process inbound seats  
  if (seatData.seats.inbound) {
    Object.entries(seatData.seats.inbound).forEach(([segmentIndex, seats]) => {
      seats.forEach(seat => {
        transformedSeats.push({
          seatCode: seat.code,
          segmentIndex: parseInt(segmentIndex)
        })
      })
    })
  }
  
  // Use in booking/reservation request
  const bookingRequest = {
    // ... other booking fields
    passengers: [
      {
        type: 'PNOS',
        seats: transformedSeats,
        // ... other passenger fields
      }
    ]
  }
}

Integration Examples

For Bookings API (/bookings/create):

const handleSeatsSubmit = async (seatData: Seat.SubmitData) => {
  const bookingRequest = {
    passengers: [{
      type: 'PNOS',
      seats: extractSeatCodes(seatData), // Use transformation function above
      // ... other passenger fields
    }]
  }
  
  const response = await fetch('/api/bookings/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(bookingRequest)
  })
}

For Reservations API (/reservations/create):

const createReservation = async (seatData: Seat.SubmitData) => {
  const reservationRequest = {
    passengers: [{
      type: 'PNOS',
      seats: extractSeatCodes(seatData), // Use transformation function above  
      // ... other passenger fields
    }]
  }
  
  const response = await fetch('/api/reservations/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(reservationRequest)
  })
}

Important Notes

• Data Transformation Required: The SDK returns a complex nested structure that must be flattened for API use
• Multi-Segment Support: For journeys with multiple segments, seats are organized by segment index
• Direction-Based: Seats are separated by trip direction (outbound/inbound)
• Seat Codes: The code property contains the actual seat identifier needed by the API
• Carrier Support: Not all carriers support seat selection - verify support via the marketing carrier endpoint

For complete API documentation and seat selection workflow, visit the Distribusion API docs.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Built by the Distribusion Whitelabel team.