@citizenplane/pimp 18.10.2 → 18.11.0

package/src/stories/CpSeatMap.stories.ts

@@ -0,0 +1,357 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { action } from 'storybook/actions'
+import { computed, ref, watch } from 'vue'
+
+import type { CpSeatMapSeatSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+import type { Seat } from '@/constants/seatMap/Seat'
+import type { SeatMap } from '@/constants/seatMap/SeatMap'
+import type { SeatMapZone } from '@/constants/seatMap/SeatMapZone'
+import type { SeatRow } from '@/constants/seatMap/SeatRow'
+import type { SeatRowFacilityFlags } from '@/constants/seatMap/SeatRowFacilityFlags'
+
+import CpSeatMap from '@/components/CpSeatMap.vue'
+import CpSelect from '@/components/CpSelect.vue'
+
+import { IataTravelerTypes } from '@/constants/seatMap/IataTravelerTypes'
+import { SeatStatuses } from '@/constants/seatMap/SeatStatuses'
+import { displaySeat } from '@/helpers/seatMap'
+
+const meta = {
+  title: 'Business/CpSeatMap',
+  component: CpSeatMap,
+  parameters: {
+    layout: 'padded',
+  },
+  // The plane wings sit 180px outside the cabin, so the story needs side room.
+  decorators: [
+    () => ({
+      template:
+        '<div style="margin: 0 auto; padding: 40px; border-radius: 8px; background-color: #fff;"><story/></div>',
+    }),
+  ],
+} satisfies Meta<typeof CpSeatMap>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const EXTRA_LEGROOM = {
+  amount: 12,
+  color: '#f5a623',
+  data_id: 1,
+  eligible_traveler_ids: [],
+  formatted_amount: '€12',
+  label: 'Extra legroom',
+}
+
+let seatId = 0
+
+const makeSeat = (column: string, status: SeatStatuses, isExitRow: boolean): Seat => {
+  seatId += 1
+
+  return {
+    characteristics: [],
+    column,
+    eligible_ancillaries: [],
+    has_specific_message: false,
+    id: seatId,
+    is_exit_row: isExitRow,
+    occupied_traveler_id: status === SeatStatuses.OCCUPIED ? seatId : 0,
+    status,
+    type: 'seat',
+    ...(status === SeatStatuses.PAYABLE ? { selected_ancillary: EXTRA_LEGROOM } : {}),
+    ...(status === SeatStatuses.BLOCKED ? { blocking_code: 'CREW' } : {}),
+  }
+}
+
+interface CabinFacilities {
+  bottom?: SeatRowFacilityFlags
+  top?: SeatRowFacilityFlags
+}
+
+interface CabinInput {
+  columns: string[]
+  exitRows?: number[]
+  /** Row number -> galleys and lavatories sitting above or below that row. */
+  facilities?: Record<number, CabinFacilities>
+  id: string
+  /** `null` marks an aisle. */
+  layout: (string | null)[]
+  /** Share of seats already taken, scattered deterministically. */
+  occupancy?: number
+  rowNumbers: number[]
+  /** Row number -> column -> status, overriding everything else. */
+  statuses?: Record<number, Record<string, SeatStatuses>>
+  title: string
+}
+
+/**
+ * Deterministic scatter so a story always renders the same cabin — Math.random
+ * would reshuffle the map on every reload and make screenshots useless.
+ */
+const seatHash = (row: number, column: string) => (row * 31 + column.charCodeAt(0) * 17) % 100
+
+const resolveStatus = (row: number, column: string, isExit: boolean, occupancy: number) => {
+  // Exit rows sell as extra legroom.
+  if (isExit) return SeatStatuses.PAYABLE
+
+  const hash = seatHash(row, column)
+  if (hash < occupancy * 100) return SeatStatuses.OCCUPIED
+  if (hash > 97) return SeatStatuses.BLOCKED
+
+  return SeatStatuses.FREE
+}
+
+const makeCabinRows = ({
+  columns,
+  id,
+  rowNumbers,
+  exitRows = [],
+  facilities = {},
+  occupancy = 0,
+  statuses = {},
+}: CabinInput): SeatRow[] => {
+  return rowNumbers.map((number) => {
+    const isExit = exitRows.includes(number)
+    const rowStatuses = statuses[number] ?? {}
+    const rowFacilities = facilities[number] ?? {}
+
+    const seats = columns.reduce<Record<string, Seat>>((accumulator, column) => {
+      const status = rowStatuses[column] ?? resolveStatus(number, column, isExit, occupancy)
+      accumulator[column] = makeSeat(column, status, isExit)
+      return accumulator
+    }, {})
+
+    return {
+      has_exit_back: false,
+      has_exit_front: false,
+      has_exit_left: isExit,
+      has_exit_right: isExit,
+      is_exit: isExit,
+      number,
+      seats,
+      zone: id,
+      ...(rowFacilities.top ? { top: rowFacilities.top } : {}),
+      ...(rowFacilities.bottom ? { bottom: rowFacilities.bottom } : {}),
+    }
+  })
+}
+
+const makeSeatMap = (aircraft: string, cabins: CabinInput[]): SeatMap => {
+  const zones = cabins.reduce<Record<string, SeatMapZone>>((accumulator, cabin) => {
+    accumulator[cabin.id] = { layout: cabin.layout, prbds: [], title: cabin.title }
+    return accumulator
+  }, {})
+
+  const rows = cabins.flatMap(makeCabinRows)
+
+  return {
+    aircraft,
+    ref_id_segment: `segment-${aircraft.toLowerCase()}`,
+    exit_row_warning_child_max_age: 12,
+    zones,
+    rows,
+  }
+}
+
+const rowRange = (from: number, to: number) => Array.from({ length: to - from + 1 }, (_, index) => from + index)
+
+/** Seats the stories hand back as selected, kept free so they read as assignable. */
+const FREE_FOR_SELECTION = { B: SeatStatuses.FREE, C: SeatStatuses.FREE }
+
+/**
+ * ATR 72-600: 72 seats in a single 2+2 cabin, forward galley, rear lavatory,
+ * overwing exits at row 12.
+ */
+const atr72 = makeSeatMap('ATR 72', [
+  {
+    id: 'cabin',
+    title: 'Cabin',
+    layout: ['A', 'B', null, 'C', 'D'],
+    columns: ['A', 'B', 'C', 'D'],
+    rowNumbers: rowRange(1, 18),
+    exitRows: [12],
+    occupancy: 0.34,
+    statuses: { 7: FREE_FOR_SELECTION, 8: FREE_FOR_SELECTION },
+    facilities: {
+      1: { top: { galley_left: true } },
+      18: { bottom: { lavatory_right: true } },
+    },
+  },
+])
+
+/**
+ * A320: 2+2 business over three rows, then 3+3 economy to row 32. Forward galley
+ * and lavatory between the cabins, an overwing exit row, two lavatories aft.
+ */
+const a320 = makeSeatMap('A320', [
+  {
+    id: 'business',
+    title: 'Business',
+    layout: ['A', 'B', null, 'C', 'D'],
+    columns: ['A', 'B', 'C', 'D'],
+    rowNumbers: rowRange(1, 3),
+    occupancy: 0.4,
+  },
+  {
+    id: 'economy',
+    title: 'Economy',
+    layout: ['A', 'B', 'C', null, 'D', 'E', 'F'],
+    columns: ['A', 'B', 'C', 'D', 'E', 'F'],
+    rowNumbers: rowRange(7, 32),
+    exitRows: [11],
+    occupancy: 0.38,
+    statuses: { 7: FREE_FOR_SELECTION, 8: FREE_FOR_SELECTION },
+    facilities: {
+      7: { top: { galley_left: true, lavatory_right: true } },
+      32: { bottom: { lavatory_left: true, lavatory_right: true } },
+    },
+  },
+])
+
+/**
+ * B777-300ER: 2+2+2 business to row 8, then 3+4+3 economy from row 20 to 48.
+ * Ten seats across trips the component's large-plane treatment, which narrows
+ * seats and aisles. Mid-cabin lavatories sit ahead of the second exit row.
+ * No `I` column — aviation skips it to avoid reading it as a 1.
+ */
+const b777 = makeSeatMap('B777', [
+  {
+    id: 'business',
+    title: 'Business',
+    layout: ['A', 'B', null, 'C', 'D', null, 'E', 'F'],
+    columns: ['A', 'B', 'C', 'D', 'E', 'F'],
+    rowNumbers: rowRange(1, 8),
+    occupancy: 0.45,
+    statuses: { 7: FREE_FOR_SELECTION, 8: FREE_FOR_SELECTION },
+    facilities: {
+      1: { top: { galley_left: true, galley_right: true } },
+      8: { bottom: { lavatory_left: true, lavatory_right: true } },
+    },
+  },
+  {
+    id: 'economy',
+    title: 'Economy',
+    layout: ['A', 'B', 'C', null, 'D', 'E', 'F', 'G', null, 'H', 'J', 'K'],
+    columns: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
+    rowNumbers: rowRange(20, 48),
+    exitRows: [20, 35],
+    occupancy: 0.36,
+    facilities: {
+      34: { bottom: { lavatory_left: true, lavatory_right: true } },
+      48: { bottom: { galley_left: true, lavatory_right: true } },
+    },
+  },
+])
+
+const AIRCRAFT: Record<string, SeatMap> = {
+  'atr-72': atr72,
+  a320,
+  b777,
+}
+
+const AIRCRAFT_OPTIONS = [
+  { label: 'ATR 72 — 2+2', value: 'atr-72' },
+  { label: 'A320 — 3+3', value: 'a320' },
+  { label: 'B777 — 3+4+3', value: 'b777' },
+]
+
+const selection = (
+  row: number,
+  column: string,
+  value: CpSeatMapSeatSelection,
+): Record<string, CpSeatMapSeatSelection> => ({
+  [displaySeat({ row, column })]: value,
+})
+
+/**
+ * Every story picks its aircraft, so one map can be compared against another.
+ *
+ * `isInteractive` wires the click back into `selections`, which is what a consumer
+ * has to do: the map only reports the seat, it never remembers it.
+ */
+const withAircraftPicker =
+  (isInteractive = false) =>
+  (args: NonNullable<Story['args']>) => ({
+    components: { CpSeatMap, CpSelect },
+    setup() {
+      const aircraft = ref('a320')
+      const seatMap = computed(() => AIRCRAFT[aircraft.value] as SeatMap)
+
+      const ownSelections = ref<Record<string, CpSeatMapSeatSelection>>({})
+      const selections = computed(() => (isInteractive ? ownSelections.value : args.selections))
+
+      // A seat key from one aircraft rarely exists on the next one.
+      watch(aircraft, () => {
+        ownSelections.value = {}
+      })
+
+      const handleSelect = (seat: Seat, rowNumber: number) => {
+        action('select')(seat, rowNumber)
+        if (!isInteractive) return
+
+        const key = displaySeat({ row: rowNumber, column: seat.column })
+        // Clicking the seat again frees it; clicking another moves the traveler over.
+        ownSelections.value = key in ownSelections.value ? {} : { [key]: { initials: 'RN' } }
+      }
+
+      return { args, aircraft, seatMap, selections, handleSelect, aircraftOptions: AIRCRAFT_OPTIONS }
+    },
+    // The plane nose bleeds upwards out of the cabin, so the picker is lifted above it.
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; width:fit-content; margin: 0 auto;">
+        <div style="position: absolute; top: 24px; left: 24px; z-index: 1; max-width: 280px; background-color: #fff;">
+          <cp-select v-model="aircraft" hide-default-value label="Aircraft" :options="aircraftOptions" />
+        </div>
+        <cp-seat-map v-bind="args" :seat-map="seatMap" :selections="selections" @select="handleSelect" />
+      </div>
+    `,
+  })
+
+/**
+ * Nothing assigned yet, and the story does the seating itself: click a free seat
+ * to take it, click it again to give it up, click another to move over. Occupied,
+ * blocked and paid-for seats read from the map.
+ */
+export const Default: Story = {
+  args: {
+    seatMap: a320,
+  },
+  render: withAircraftPicker(true),
+}
+
+/**
+ * The consumer has seated two travelers and hands their initials back through
+ * `selections`, keyed by seat (`7B`).
+ */
+export const WithSelection: Story = {
+  args: {
+    seatMap: a320,
+    selections: {
+      ...selection(7, 'B', { initials: 'JD' }),
+      ...selection(8, 'C', { initials: 'AM' }),
+    },
+    onSelect: action('select'),
+  },
+  render: withAircraftPicker(),
+}
+
+/**
+ * One of the seated travelers carries a lap infant: `hasLinkedTraveler` shows the
+ * badge and `linkedTravelerType` picks its icon.
+ */
+export const WithLinkedInfant: Story = {
+  args: {
+    seatMap: a320,
+    selections: {
+      ...selection(7, 'B', {
+        initials: 'JD',
+        hasLinkedTraveler: true,
+        linkedTravelerType: IataTravelerTypes.INFANT,
+      }),
+      ...selection(8, 'C', { initials: 'AM' }),
+    },
+    onSelect: action('select'),
+  },
+  render: withAircraftPicker(),
+}