FlightSearchForm

/* once, in your global stylesheet */
@import '@sheriph/fk-ui/tailwind.css';

'use client';

import type { ReactNode } from 'react';
import { FlightKitProvider } from '@sheriph/fk-ui/core';

export function Providers({ children, agencyId }: { children: ReactNode; agencyId: string }) {
  return (
    // A same-origin path: your route handler attaches the API key there, so it
    // never reaches the browser.
    <FlightKitProvider agencyId={agencyId} apiBase="/api/flight-kit">
      {children}
    </FlightKitProvider>
  );
}

'use client';

import { selectSearchRequest, useFlightKitStore } from '@sheriph/fk-ui/core';
import { FlightSearchForm, FlightSearchSummary } from '@sheriph/fk-ui/search';

export function SearchStage() {
  // What the next stage will fetch with. The form writes it; the results read it.
  const request = useFlightKitStore(selectSearchRequest);

  return (
    <section className="space-y-6">
      <FlightSearchForm
        onSearch={(criteria) => {
          // Fires after the store is updated, so the handoff has happened.
          // Route to your results page here — the whole of it is step 5.
          console.log('published', criteria);
        }}
      />

      <FlightSearchSummary />

      {request ? <p>Request #{request.requestId}</p> : null}
    </section>
  );
}

'use client';

import { useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { FlightSearchForm, type SearchCriteria } from '@sheriph/fk-ui/search';

/** Where the results composite is mounted. Pick one path and keep it. */
const RESULTS_PATH = '/search-result';

/**
 * `YYYY-MM-DD` in the visitor's own timezone.
 *
 * Never `toISOString().slice(0, 10)`: that is UTC, so a visitor east or west of
 * Greenwich would share a link that books the day before or after.
 */
function toWireDate(date: Date): string {
  const month = `${date.getMonth() + 1}`.padStart(2, '0');
  const day = `${date.getDate()}`.padStart(2, '0');
  return `${date.getFullYear()}-${month}-${day}`;
}

/**
 * A submitted search as a shareable query string.
 *
 * The params mirror what `POST /flights/search` receives, so the results page can
 * rebuild the request from the URL alone — which is what makes a link work on a
 * cold load, before any store state exists.
 */
function toQuery(criteria: SearchCriteria): string {
  const query = new URLSearchParams();

  if (criteria.from) query.set('origin', criteria.from.iataCode);
  if (criteria.to) query.set('destination', criteria.to.iataCode);
  if (criteria.dates.start) query.set('departureDate', toWireDate(criteria.dates.start));
  if (criteria.tripType === 'round-trip' && criteria.dates.end) {
    query.set('returnDate', toWireDate(criteria.dates.end));
  }

  query.set('adults', String(criteria.passengers.adults));
  query.set('children', String(criteria.passengers.children));
  query.set('infants', String(criteria.passengers.infants));
  query.set('cabin', criteria.cabin);

  return query.toString();
}

export function LandingHero() {
  const router = useRouter();

  return (
    <FlightSearchForm
      onSearch={useCallback(
        (criteria: SearchCriteria) => {
          // The form has already published to the store by now, so the results
          // page has everything it needs before it looks at the URL. The URL is
          // what makes the search shareable.
          router.push(`${RESULTS_PATH}?${toQuery(criteria)}`);
        },
        [router],
      )}
    />
  );
}

'use client';

import { useCallback, useState } from 'react';
import { mapTravelportOfferings } from '@sheriph/flight-kit-shared/transformers';
import { FlightKitApiError, useFlightKit, useFlightKitStore } from '@sheriph/fk-ui/core';
import { FlightSearchForm } from '@sheriph/fk-ui/search';

/**
 * The other half of the handoff: the form publishes, YOU fetch.
 *
 * `onSearch` fires *after* the store is updated, so the store is the source of
 * truth for what to send — `requestId` included, which is what makes two
 * identical searches two searches rather than one.
 */
export function SearchStage() {
  const client = useFlightKit();
  const [error, setError] = useState<string | null>(null);

  const onSearch = useCallback(() => {
    const published = useFlightKitStore.getState().searchRequest;
    if (!published) return;

    // Always abort the in-flight search. A slow first response landing after a
    // faster second one would show offers for a search already replaced.
    const controller = new AbortController();

    client
      .searchOffers(published.params, controller.signal)
      .then((response) => {
        const offers = mapTravelportOfferings(response);

        // A console is the only place a payload this size can be read whole.
        console.log('offers', offers);

        // Never put the catalog in the store. Persist searchId + offerRefs and
        // let the server re-resolve it from its cache.
      })
      .catch((cause) => {
        // An abort is not a failure — it is a newer search replacing this one.
        if (controller.signal.aborted) return;

        setError(cause instanceof FlightKitApiError ? cause.message : 'Search failed');
      });
  }, [client]);

  return (
    <>
      <FlightSearchForm onSearch={onSearch} />
      {error ? <p role="alert">{error}</p> : null}
      {/* Mount TaskProgress here while the request is in flight — see /task-progress. */}
    </>
  );
}