JSG Simple Passenger Selection

A React component for selecting passenger types and quantities with a clean, modern UI.

Installation

npm install jsg_simple_pat_selection

Importing

import 'jsg_simple_pat_selection/dist/index.css';
import { SimpleSelection } from 'jsg_simple_pat_selection';

Features

• 🎨 Modern, clean UI with animations
• 📱 Fully responsive
• 🎯 Built-in validation
• 🔧 Highly customizable
• 🧪 Test mode for debugging

Data Flow

Inputs

The component accepts the following props:

1. cart_id (required): Active cart ID (provided by parent)
2. cart_group_id (required): Cart group ID (provided by parent)
3. resource_id (required): Resource ID (provided by parent)
4. stage_id (required): Workflow stage key (provided by parent)
5. tenant (required): Tenant/brand identifier (provided by parent)
6. mode (required): Run mode ("api"/"mock") (provided by parent)
7. pat_type_id (required): Passenger type ID (provided by parent)
8. setup_simpleSelection (optional): Optional UI overrides (embedded mode only)

   {
     title?: string;              // Main heading
     subtitle?: string;           // Subheading text
     descriptorSingular?: string; // Single item descriptor
     descriptorPlural?: string;   // Multiple items descriptor
   }

9. onComplete: Callback function receiving selection data

   (data: {
     passengers: Array<{
       type: string;    // Passenger type name
       id: number;      // Unique identifier
       quantity: number // Selected quantity
     }>
   }) => void

10. onBack: Callback function for back navigation

    () => void

Initial Data Structure

The store accepts an array of passenger types:

interface PassengerType {
  pat_sub_type: string;   // Display name
  id: number;             // Unique identifier
  description?: string;   // Optional tooltip text
  quantity: number;       // Initial quantity
  icon?: string;         // Icon identifier
}

Supported icons: 'user', 'users', 'baby', 'graduation-cap', 'heart', 'package', 'luggage', 'briefcase', 'warehouse', 'bike', 'surf', 'music', 'car', 'bus', 'truck', 'caravan', 'ship', 'dog'

Usage

Embedded Integration

import 'jsg_simple_pat_selection/dist/index.css';
import { SimpleSelection } from 'jsg_simple_pat_selection';

<SimpleSelection
  cart_id={/* number */}
  cart_group_id={/* number */}
  resource_id={/* number */}
  stage_id={/* string */}
  tenant="string"
  mode="api"
  pat_type_id={/* number */}
  setup_simpleSelection={{
    title: 'Select Passengers',
    subtitle: 'Select the number of passengers for your journey',
    descriptorSingular: 'Passenger',
    descriptorPlural: 'Passengers'
  }}
  onComplete={(data) => console.log('Complete:', data)}
  onBack={() => console.log('Back')}
/> 

Props

| Prop | Type | Default | Description | |------------------------|--------------------------------------------------------------------|------------------|--------------------------------------------------------| | cart_id | number | — | Active cart ID (provided by parent) | | cart_group_id | number | — | Cart group ID (provided by parent) | | resource_id | number | — | Resource ID (provided by parent) | | stage_id | string | — | Workflow stage key (provided by parent) | | tenant | string | — | Tenant/brand identifier (provided by parent) | | mode | string | — | Run mode ("api"/"mock") (provided by parent) | | pat_type_id | number | — | Passenger type ID (provided by parent) | | setup_simpleSelection? | { title?, subtitle?, descriptorSingular?, descriptorPlural? } | setup.json | Optional UI overrides (embedded mode only) | | onComplete | (data:{passengers:Array<{ type:string; id:number; quantity:number }>}) => void | () => {} | Callback when Continue clicked | | onBack | () => void | () => {} | Callback when Back clicked |

Default Setup Values (setup.json)

{
  "title": "Select Luggage",
  "subtitle": "Select the number of passengers for your journey",
  "descriptorSingular": "Luggage",
  "descriptorPlural": "Luggage Items"
}