new-ticket-ui.md

Metro/Bus Ticket Components Documentation

Overview

This documentation covers a set of React Native components that work together to create a sophisticated ticket display interface for public transportation (Metro and Bus services). The system consists of three main components:

1. TransitInfoCard - Main ticket information display
2. TicketSplit - Passenger count breakdown
3. TicketHeader - Ticket metadata display

Component Architecture

graph TD
    A[NewTicketUI] --> B[TransitInfoCard]
    A --> C[TicketSplit]
    A --> D[TicketHeader]
    B --> E[TransitInfoCardHeader]
    B --> F[PlaceCard]
    B --> G[TransformedText]

Loading

1. TransitInfoCard Component

Purpose

Displays detailed transit information for either Metro or Bus journeys, including route details, timings, and cost.

Props Interface

interface BaseTransitInfo {
    source: string;
    destination: string;
    regionalSourceTitle: string;
    regionalDestinationTitle: string;
    transitMessage: string;
    nextArrivalTime: string;
    validTill: string;
    transitMetaInfo: string;
    transitCost: number;
}

// Metro-specific interfaces
interface BaseMetroTransitInfo {
    mode: 'METRO';
    gateNo: number;
    platformNo: number;
}

interface DirectMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
    metroTransitType: 'DIRECT';
}

interface SwitchMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
    metroTransitType: 'SWITCH';
    sourceMessage: string;
    switchStation: string;
    switchStationRegionalTitle: string;
    sourceLine: string;
    sourceLineColorCode: string;
    switchPlatformNo: number;
    destinationMessage: string;
    destinationLine: string;
    destinationLineColorCode: string;
}

// Bus-specific interface
interface BusTransitInfo extends BaseTransitInfo {
    mode: 'BUS';
    busNo: string;
}

Key Features

• Supports both Metro and Bus transit types
• Handles direct metro routes and routes with line switches
• Displays bilingual information (English and regional language)
• Shows real-time transit information
• Includes visual indicators for metro lines
• Provides platform and gate information for metro journeys

Visual Elements

• Transit mode icon with color coding
• Cost display
• Source and destination cards
• Platform/Gate information
• Next arrival time
• Ticket validity period
• Line indicators for metro routes
• Switch station information for metro routes with transfers

2. TicketSplit Component

Purpose

Displays the breakdown of passengers by category (Adult and Child).

Props Interface

interface TicketSplitProps {
    adultCount: number;
    childCount: number;
}

Key Features

• Clean, two-column layout
• Separate counters for adults and children
• Consistent styling with the main ticket design

3. TicketHeader Component

Purpose

Displays essential ticket metadata and identification information.

Props Interface

interface TicketHeaderProps {
    title: string;
    regionalTitle: string;
    date: string;
    id: string;
    ticketCount: number;
}

Key Features

• Bilingual title display
• Date information
• Ticket ID
• Total passenger count with icon
• Centered layout with dividers

Styling Approach

The components use a consistent styling approach with:

• Tailwind CSS for styling
• Custom fonts (Area Normal, Departure Mono, Inter)
• Responsive layouts
• Consistent color scheme
• Proper spacing and alignment

Usage Examples

<TransitInfoCard
    mode="METRO"
    metroTransitType="SWITCH"
    source="Majestic"
    destination="Whitefield"
    gateNo={4}
    platformNo={2}
    transitCost={45}
    // ... other required props
/>

<TicketSplit
    adultCount={2}
    childCount={1}
/>

<TicketHeader
    title="Metro Ticket"
    regionalTitle="ಮೆಟ್ರೋ ಟಿಕೆಟ್"
    date="2024-03-21"
    id="MT123456"
    ticketCount={3}
/>

Usage Example inside the FLOW.tsx file

        <NewTicketUI
            ticketHeaderProps={{
                date: '10-07-2025',
                id: '123',
                ticketCount: 1,
                title: 'Namma Metro',
                regionalTitle: 'ನಮ್ಮ ಮೆಟ್ರೋ',
            }}
            transitInfoCardProps={{
                mode: 'METRO',
                source: 'Majestic',
                destination: 'MG Road',
                regionalSourceTitle: 'ಮಜೆಸ್ಟಿಕ್',
                regionalDestinationTitle: 'ಎಂ.ಜಿ ರಸ್ತೆ',
                transitMessage: 'Board Purple Line metro from Platform 2',
                nextArrivalTime: '10:30 AM',
                validTill: '11:30 AM',
                transitMetaInfo: 'SWITCH',
                transitCost: 30,
                gateNo: 2,
                platformNo: 2,
                metroTransitType: 'DIRECT',
                sourceMessage: 'Board Purple Line metro from Platform 2',
                switchStation: 'Majestic',
                switchStationRegionalTitle: 'ಮಜೆಸ್ಟಿಕ್',
                sourceLine: 'BLUE',
                sourceLineColorCode: '#016ACD',
                switchPlatformNo: 2,
                destinationMessage: 'Board Purple Line metro from Platform 2',
                destinationLine: 'PURPLE',
                destinationLineColorCode: '#800080',
            }}
            ticketSplitProps={{
                adultCount: 1,
                childCount: 0,
            }}
        />