Jetsetgo Departure Selection App

A React component library for handling departure selection and add-ons in travel booking applications.

Installation

npm install jetsetgo-departure-selection-addon

Requirements

This package has the following peer dependencies:

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.22.1"
}

Make sure these are installed in your project.

Usage

1. Import the necessary components and styles:

import { App, setDepartureData } from 'jetsetgo-departure-selection-addon';
import 'jetsetgo-departure-selection-addon/style.css';

2. Set the departure data before rendering the component:

// Example data structure for outbound and return data
const outboundData = {
  status: 'ok',
  data: [
    {
      service_id: 'service1',
      can_accept: true,
      resource_name: 'Ferry 1',
      route_name: 'Route A',
      departing_from: 'Port A',
      travelling_to: 'Port B',
      departure_time: '09:00',
      arrival_time: '11:00',
      departure_date: '2024-03-01',
      total_cost: 100,
      pats: [],
      flags: [],
      options: {
        // Options data for add-ons
        variations: [
          {
            id: 1,
            variation_name: 'Basic',
            // ... other variation properties
          }
        ]
      }
    }
  ]
};

const returnData = {
  status: 'ok',
  data: [
    // Similar structure to outboundData
  ]
};

// Set the data
setDepartureData(outboundData, returnData);

3. Use the component in your application:

function YourApp() {
  return (
    <Router> {/* Required for React Router */}
      <App />
    </Router>
  );
}

Data Structure

Outbound and Return Data

Both outbound and return data should follow this structure:

interface DepartureData {
  status: 'ok';
  data: Array<{
    service_id: string;
    can_accept: boolean;
    resource_name: string;
    route_name: string;
    departing_from: string;
    travelling_to: string;
    departure_time: string;
    arrival_time: string;
    departure_date: string;
    total_cost: number;
    pats: Array<any>;
    flags: Array<{
      flag_name?: string;
      flag_url?: string;
    }>;
    options: {
      variations: Array<{
        id: number;
        cancellation_policy_id: number;
        sort_key: number;
        default_variation: boolean;
        variation_name: string;
        variation_description: string;
        cancellation_policy_name: string;
        cancellation_policy_description: string;
        icon: string;
        icon_color: string;
        behaviour_id: number;
        total_price: number;
        price_before_addons: number;
        can_accept: boolean;
        passengers: Array<PassengerData>;
        addons: Array<AddonData>;
      }>;
    };
  }>;
}

Development Mode

When developing locally or using the package in standalone mode, it will use the data from globalOutbound.json and globalReturn.json files. When using the package in a parent application, use setDepartureData to provide the data dynamically.

API Reference

Components

App

The main component that renders the departure selection interface.

Functions

setDepartureData(outboundData, returnData)

Sets the departure data for the application.

• outboundData: Object containing outbound journey data
• returnData: Object containing return journey data

getOutboundDepartures()

Returns the current outbound departures data.

getReturnDepartures()

Returns the current return departures data.

License

MIT