@citizenplane/pimp 18.14.3 → 18.16.0

package/src/stories/CpTripDetails.stories.ts

@@ -0,0 +1,134 @@
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { Flight } from '@/constants/tripDetails/Flight'
+
+import CpTripDetails from '@/components/CpTripDetails.vue'
+
+const parisAirport = {
+  city_name: 'Paris',
+  iata_code: 'CDG',
+  name: 'Paris Charles de Gaulle Airport',
+  timezone: 'Europe/Paris',
+}
+
+const munichAirport = {
+  city_name: 'Munich',
+  iata_code: 'MUC',
+  name: 'Franz Josef Strauss Airport',
+  timezone: 'Europe/Berlin',
+}
+
+const newYorkAirport = {
+  city_name: 'New York',
+  iata_code: 'JFK',
+  name: 'John F. Kennedy International Airport',
+  timezone: 'America/New_York',
+}
+
+const directFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T17:40:00',
+      departure_date: '2026-06-10T09:00:00',
+      destination: newYorkAirport,
+      destination_terminal: { label: 'Terminal 1', terminal_code: '1' },
+      flight_number: 'AF008',
+      origin: parisAirport,
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+    },
+  ],
+}
+
+const oneStopFlight: Flight = {
+  segments: [
+    {
+      airline: { iata_code: 'AF', name: 'Air France' },
+      arrival_date: '2026-06-10T11:10:00',
+      departure_date: '2026-06-10T09:00:00',
+      destination: munichAirport,
+      flight_number: 'AF1234',
+      origin: parisAirport,
+      origin_terminal: { label: 'Terminal 2E', terminal_code: '2E' },
+      via_airport: { city_name: 'Munich', iata_code: 'MUC' },
+    },
+    {
+      airline: { iata_code: 'KL', name: 'KLM' },
+      arrival_date: '2026-06-10T20:25:00',
+      departure_date: '2026-06-10T13:20:00',
+      destination: newYorkAirport,
+      destination_terminal: { label: 'Terminal 4', terminal_code: '4' },
+      flight_number: 'KL5678',
+      origin: munichAirport,
+    },
+  ],
+}
+
+/** Luxon formats times and durations through `Intl`, so any BCP 47 tag works. */
+const localeOptions = ['en', 'fr', 'de', 'es', 'it', 'nl', 'pt']
+
+const localeLabels: Record<string, string> = {
+  de: 'Deutsch (de)',
+  en: 'English (en)',
+  es: 'Español (es)',
+  fr: 'Français (fr)',
+  it: 'Italiano (it)',
+  nl: 'Nederlands (nl)',
+  pt: 'Português (pt)',
+}
+
+const meta = {
+  title: 'Business/CpTripDetails',
+  component: CpTripDetails,
+  argTypes: {
+    flight: {
+      control: 'object',
+      description: 'Raw flight data (segments) the leg-by-leg route detail is built from',
+    },
+    config: {
+      control: 'object',
+      description: 'Static label overrides — Pimp has no i18n, so the consumer supplies its own translations',
+    },
+    locale: {
+      control: { type: 'select', labels: localeLabels },
+      options: localeOptions,
+      description: 'Locale used to format durations and the date tooltips. Does not translate the `config` labels.',
+      table: { defaultValue: { summary: 'en' } },
+    },
+  },
+} satisfies Meta<typeof CpTripDetails>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpTripDetails },
+  setup() {
+    return { args }
+  },
+  template: `<CpTripDetails v-bind="args" />`,
+})
+
+/**
+ * Direct flight: a single segment, no layover section.
+ */
+export const DirectFlight: Story = {
+  args: {
+    flight: directFlight,
+    locale: 'en',
+  },
+  render: defaultRender,
+}
+
+/**
+ * One-stop itinerary: the layover section appears between the two segments,
+ * and the technical-stop row is visible in the connection details.
+ */
+export const OneStop: Story = {
+  args: {
+    flight: oneStopFlight,
+    locale: 'en',
+  },
+  render: defaultRender,
+}