React Js, Next Js Technology Upgradation (R&D)

implemented react day picker with 2 UI components date picker and range picker

1. Flight Date Picker System Documentation

1. Overview

The Flight Date Picker system is a flexible, highly customizable set of components designed to handle various flight booking scenarios: OneWay, RoundTrip (TwoWay), and MultiCity.

It separates business logic (Core) from UI presentation (View), allowing diverse visual implementations (e.g., Home Page Search vs. Modify Search) while maintaining consistent validation and state management.

1. Architecture

1. 1. Core Component (`DatePickerCore.tsx`)

• Role: The logical brain.
• Responsibilities: * Connects to `useFlightSearch` hook to read/write global state. * Determines `minDate`, `maxDate`, and `disabled` states based on the flight type and current selection context. * Decides whether to render a Single picker or a Range picker. * Handles "Waterfall" logic for MultiCity (e.g., Leg 2 Min Date >= Leg 1 Date).
• Props: * `viewComponent`: The UI component to render (`React.ComponentType`). * `type`: `'departure' | 'return'` - The field type. * `index`: Journey index (for MultiCity, 0 for others). * `isMultiCity`: Flag to toggle specific behaviors/UI for MultiCity.

1. 2. View Components
   The system supports pluggable view components. The default ones are:

• `DatePicker` (Single): * Wraps `react-day-picker` in a `Popover`. * Used for OneWay departure, MultiCity legs, and explicitly separated fields.
• `DateRangePicker` (Range): * Handles `from` and `to` date selection in a single calendar view. * Used primarily for RoundTrip searches to allow selecting departure and return dates in one flow.
• `HomeDatePickerView` (Custom Orchestrator): * A specialized wrapper used on the Home Page. * It decides whether to render `DatePicker` or `DateRangePicker` based on the `flightType`. * Custom Features: Implements a highly customized, dual-calender trigger design for RoundTrip.

1. 3. State Management (`useFlightSearch.ts`)

• Centralizes all flight search data.
• Validation: Ensures `Return Date` >= `Departure Date`.
• Syncing: In RoundTrip mode, if `Departure Date` updates to be later than `Return Date`, the `Return Date` is automatically updated to match.

1. Integration Guide

1. Basic Usage

```tsx
import DatePickerCore from "/components/core/flight/datepicker/DatePickerCore";
import DatePickerView from "/components/client/book-sulthan/flight/search/homeSearch/HomeDatePickerView"; // Or your custom view

// Inside your Search Component
<DatePickerCore
index={0}
type="departure"
viewComponent={DatePickerView}
containerClassName="my-custom-class"
/>
```

1. Handling Round Trip (Range Mode)
   For Round Trip, you typically want two inputs (Departure & Return) that might open the same range picker logic.

```tsx
// Departure Field
<DatePickerCore
index={0}
type="departure"
viewComponent={DatePickerView} // Internal logic handles "Range" mode automatically
/>

// Return Field
<DatePickerCore
index={0}
type="return"
viewComponent={DatePickerView}
/>
```

1. Component API

1. `DatePickerCoreProps`

1. `DatePickerViewProps` (Received by your View Component)

1. Customization

1. 1. Custom Trigger Design
   You can completely replace the standard button with any JSX by using the `trigger` prop. This is useful for complex designs showing "Day", "Month", "Weekday" separately.

Example (from `HomeDatePickerView.tsx`):
```tsx
// Pass a custom trigger function to the View Component
<DateRangePicker
// ... props
trigger={
<div className="custom-trigger">
<h3>{format(date, 'dd')}</h3>
<span>{format(date, 'MMMM')}</span>
</div>
}
/>
```

1. 2. Styling

• Tailwind: The components accept `className` props that are merged using `clsx/tailwind-merge`.
• Inline Styles: For `react-day-picker` internals that are hard to reach with utility classes (e.g., specific calendar grid alignment), use the `styles` prop passed specifically to the `Calendar` component.

1. Best Practices

• Avoid Local State: Try to rely on `DatePickerCore` to provide the value. If you need local UI state (like `isFocused`), keep it inside your View component.
• MultiCity: Always pass the correct `index`. Leg 2's min date depends on Leg 1's date.
• Range Reset: If switching from OneWay to RoundTrip, ensure the `to` date is handled correctly (Core handles this validation).

1. Troubleshooting

• "Return date is disabled": Check if `flightType` is OneWay. In OneWay, the return date picker is purposely disabled or hidden logic-wise.
• "Calendar styles look broken": Ensure `react-day-picker` CSS is not conflicting with global styles (like Bootstrap). We use a custom `Calendar` wrapper with inline style overrides to prevent this.
• "Date not updating": Ensure `handleDateChange` in `useFlightSearch` is receiving the date string in `yyyy-MM-dd` format.