@citizenplane/pimp 18.10.3 → 18.11.0

package/src/components/icons/IconPlaneWing.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg fill="none" preserveAspectRatio="xMaxYMid meet" viewBox="0 0 180 509" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 87.8 L180 0 L180 490.1 L0 508.7 Z" fill="url(#paint0_linear_23056_30266)" />
+    <defs>
+      <linearGradient id="paint0_linear_23056_30266" x1="1" x2="0" y1="0.5" y2="0.5">
+        <stop offset="0.5" stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

package/src/components/icons/IconSparkle.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg fill="none" height="13" viewBox="0 0 13 13" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.64966 0.826416C5.81077 0.391202 6.42605 0.3912 6.58716 0.826416L7.65063 3.70044C7.80258 4.11068 8.12614 4.43424 8.53638 4.58618L11.4104 5.64966C11.8456 5.81077 11.8456 6.42605 11.4104 6.58716L8.53638 7.65063C8.12614 7.80258 7.80258 8.12614 7.65063 8.53638L6.58716 11.4104C6.42605 11.8456 5.81077 11.8456 5.64966 11.4104L4.58618 8.53638C4.43424 8.12614 4.11068 7.80258 3.70044 7.65063L0.826416 6.58716C0.391202 6.42605 0.3912 5.81077 0.826416 5.64966L3.70044 4.58618C4.05951 4.45319 4.35244 4.18883 4.52173 3.84985L4.58618 3.70044L5.64966 0.826416Z"
+      stroke="#D1D3E6"
+    />
+  </svg>
+</template>

package/src/components/index.ts

@@ -43,6 +43,15 @@ import CpMultiselect from './CpMultiselect.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
 import CpRadioNew from './CpRadioNew.vue'
+import CpSeatMap from './CpSeatMap.vue'
+import CpSeatMapEmergencyExitDialog from './CpSeatMapEmergencyExitDialog.vue'
+import CpSeatMapGrid from './CpSeatMapGrid.vue'
+import CpSeatMapPlane from './CpSeatMapPlane.vue'
+import CpSeatMapRow from './CpSeatMapRow.vue'
+import CpSeatMapRowFacility from './CpSeatMapRowFacility.vue'
+import CpSeatMapSeat from './CpSeatMapSeat.vue'
+import CpSeatMapSeatWrapper from './CpSeatMapSeatWrapper.vue'
+import CpSeatMapZone from './CpSeatMapZone.vue'
 import CpSelect from './CpSelect.vue'
 import CpSelectableButton from './CpSelectableButton.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
@@ -132,6 +141,15 @@ const Components = {
   CpTransitionSlide,
   CpTransitionTabContent,
   CpTrip,
+  CpSeatMap,
+  CpSeatMapEmergencyExitDialog,
+  CpSeatMapGrid,
+  CpSeatMapPlane,
+  CpSeatMapRow,
+  CpSeatMapRowFacility,
+  CpSeatMapSeat,
+  CpSeatMapSeatWrapper,
+  CpSeatMapZone,
 }
 
 const Pimp: Plugin = {
@@ -152,6 +170,30 @@ const Pimp: Plugin = {
   },
 }
 
+export type {
+  CpSeatMapConfig,
+  CpSeatMapSeatSelection,
+  Seat,
+  SeatAncillary,
+  SeatCharacteristic,
+  SeatMap,
+  SeatMapZone,
+  SeatRow,
+  SeatRowFacilityFlags,
+} from '@/constants/seatMap'
+export type { CpSeatMapSeatSelection as CpSeatMapSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+
+export {
+  CpSeatMapTransitionDirections,
+  DEFAULT_CP_SEAT_MAP_CONFIG,
+  IataTravelerTypes,
+  SeatCharacteristicCodes,
+  SeatRowFacilities,
+  SeatRowFacilityPosition,
+  SeatStatuses,
+} from '@/constants/seatMap'
+// Consumers key `selections` with this, so it has to be the very same helper.
+export { displaySeat } from '@/helpers/seatMap'
 export {
   CpAccordion,
   CpAccordionGroup,
@@ -182,6 +224,15 @@ export {
   CpRadio,
   CpRadioGroup,
   CpRadioNew,
+  CpSeatMap,
+  CpSeatMapEmergencyExitDialog,
+  CpSeatMapGrid,
+  CpSeatMapPlane,
+  CpSeatMapRow,
+  CpSeatMapRowFacility,
+  CpSeatMapSeat,
+  CpSeatMapSeatWrapper,
+  CpSeatMapZone,
   CpSelect,
   CpSelectableButton,
   CpSelectMenu,

package/src/constants/seatMap/CpSeatMapConfig.ts

@@ -0,0 +1,47 @@
+import { SeatStatuses } from './SeatStatuses'
+
+export interface CpSeatMapConfig {
+  emergencyExit: {
+    close: string
+    confirm: string
+    disclaimerContent: string
+    disclaimerTitle: string
+    subtitle: string
+    title: string
+  }
+  facility: {
+    galley: string
+    lavatory: string
+  }
+  seatStatuses: Record<SeatStatuses, string> & {
+    selected: string
+    selectedForLinkedTraveler: string
+    selectTravelerFirst: string
+  }
+}
+
+export const DEFAULT_CP_SEAT_MAP_CONFIG: CpSeatMapConfig = {
+  seatStatuses: {
+    [SeatStatuses.FREE]: 'Available',
+    [SeatStatuses.OCCUPIED]: 'Occupied',
+    [SeatStatuses.OCCUPIED_BY_CURRENT_PAX]: 'Selected',
+    [SeatStatuses.BLOCKED]: 'Unavailable',
+    [SeatStatuses.PAYABLE]: 'Extra fee',
+    selected: 'Selected',
+    selectedForLinkedTraveler: 'Selected for this traveler and their linked traveler',
+    selectTravelerFirst: 'Select a traveler first',
+  },
+  facility: {
+    galley: 'Galley',
+    lavatory: 'Lavatory',
+  },
+  emergencyExit: {
+    close: 'Close',
+    confirm: 'Confirm',
+    disclaimerContent:
+      'You must be able to assist the crew in an evacuation. Passengers who cannot are not allowed in these rows.',
+    disclaimerTitle: 'Emergency exit row requirements',
+    subtitle: 'This seat is located in an emergency exit row.',
+    title: 'Emergency exit row',
+  },
+}

package/src/constants/seatMap/CpSeatMapSeatSelection.ts

@@ -0,0 +1,12 @@
+import type { IataTravelerTypes } from './IataTravelerTypes'
+
+/**
+ * What the consumer knows about a seat it has assigned. Pimp holds no selection
+ * state of its own — it only renders what it is handed.
+ */
+export interface CpSeatMapSeatSelection {
+  hasLinkedTraveler?: boolean
+  initials: string
+  /** Drives the linked-traveler badge icon; without it the badge falls back to infant. */
+  linkedTravelerType?: IataTravelerTypes
+}

package/src/constants/seatMap/CpSeatMapTransitionDirections.ts

@@ -0,0 +1,4 @@
+export enum CpSeatMapTransitionDirections {
+  BACKWARD = 'backward',
+  FORWARD = 'forward',
+}

package/src/constants/seatMap/IataTravelerTypes.ts

@@ -0,0 +1,6 @@
+export enum IataTravelerTypes {
+  ADULT = 'ad',
+  CHILD = 'ch',
+  INFANT = 'inf',
+  UNACCOMPANIED_MINOR = 'um',
+}

package/src/constants/seatMap/Seat.ts

@@ -0,0 +1,18 @@
+import type { SeatAncillary } from './SeatAncillary'
+import type { SeatCharacteristic } from './SeatCharacteristic'
+import type { SeatStatuses } from './SeatStatuses'
+
+export interface Seat {
+  blocking_code?: string
+  characteristics: SeatCharacteristic[]
+  column: string
+  eligible_ancillaries: SeatAncillary[]
+  has_specific_message: boolean
+  id: number
+  is_exit_row: boolean
+  occupied_traveler_id: number
+  selected_ancillary?: SeatAncillary
+  status: SeatStatuses
+  traveler_eligibility?: Record<string, boolean>
+  type: string
+}

package/src/constants/seatMap/SeatAncillary.ts

@@ -0,0 +1,8 @@
+export interface SeatAncillary {
+  amount: number
+  color: string
+  data_id: number
+  eligible_traveler_ids: number[]
+  formatted_amount: string
+  label: string
+}

package/src/constants/seatMap/SeatCharacteristic.ts

@@ -0,0 +1,7 @@
+import type { SeatCharacteristicCodes } from './SeatCharacteristicCodes'
+
+export interface SeatCharacteristic {
+  code: SeatCharacteristicCodes
+  data_id: number
+  label: string
+}

package/src/constants/seatMap/SeatCharacteristicCodes.ts

@@ -0,0 +1,9 @@
+export enum SeatCharacteristicCodes {
+  WINDOW = 'W',
+  AISLE = 'A',
+  BULKHEAD = 'K',
+  EMERGENCY_EXIT = 'E',
+  NO_SMOKING = 'N',
+  CENTER = '9',
+  CHARGEABLE = 'CH',
+}

package/src/constants/seatMap/SeatMap.ts

@@ -0,0 +1,10 @@
+import type { SeatMapZone } from './SeatMapZone'
+import type { SeatRow } from './SeatRow'
+
+export interface SeatMap {
+  aircraft: string
+  exit_row_warning_child_max_age?: number
+  ref_id_segment: string
+  rows: SeatRow[]
+  zones: Record<string, SeatMapZone>
+}

package/src/constants/seatMap/SeatMapZone.ts

@@ -0,0 +1,5 @@
+export interface SeatMapZone {
+  layout: (string | null)[]
+  prbds: string[]
+  title: string
+}

package/src/constants/seatMap/SeatRow.ts

@@ -0,0 +1,15 @@
+import type { Seat } from './Seat'
+import type { SeatRowFacilityFlags } from './SeatRowFacilityFlags'
+
+export interface SeatRow {
+  bottom?: SeatRowFacilityFlags
+  has_exit_back: boolean
+  has_exit_front: boolean
+  has_exit_left: boolean
+  has_exit_right: boolean
+  is_exit: boolean
+  number: number
+  seats: Record<string, Seat>
+  top?: SeatRowFacilityFlags
+  zone: string
+}

package/src/constants/seatMap/SeatRowFacilities.ts

@@ -0,0 +1,10 @@
+export enum SeatRowFacilities {
+  LAVATORY = 'lavatory',
+  GALLEY = 'galley',
+  CURTAIN = 'curtain',
+}
+
+export enum SeatRowFacilityPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/src/constants/seatMap/SeatRowFacilityFlags.ts

@@ -0,0 +1,7 @@
+export interface SeatRowFacilityFlags {
+  curtain?: boolean
+  galley_left?: boolean
+  galley_right?: boolean
+  lavatory_left?: boolean
+  lavatory_right?: boolean
+}

package/src/constants/seatMap/SeatStatuses.ts

@@ -0,0 +1,7 @@
+export enum SeatStatuses {
+  FREE = 'free',
+  OCCUPIED = 'occupied',
+  OCCUPIED_BY_CURRENT_PAX = 'occupiedByCurrentPax',
+  BLOCKED = 'blocked',
+  PAYABLE = 'payable',
+}

package/src/constants/seatMap/index.ts

@@ -0,0 +1,16 @@
+export type { CpSeatMapConfig } from './CpSeatMapConfig'
+export type { CpSeatMapSeatSelection } from './CpSeatMapSeatSelection'
+export type { Seat } from './Seat'
+export type { SeatAncillary } from './SeatAncillary'
+export type { SeatCharacteristic } from './SeatCharacteristic'
+export type { SeatMap } from './SeatMap'
+export type { SeatMapZone } from './SeatMapZone'
+export type { SeatRow } from './SeatRow'
+export type { SeatRowFacilityFlags } from './SeatRowFacilityFlags'
+
+export { DEFAULT_CP_SEAT_MAP_CONFIG } from './CpSeatMapConfig'
+export { CpSeatMapTransitionDirections } from './CpSeatMapTransitionDirections'
+export { IataTravelerTypes } from './IataTravelerTypes'
+export { SeatCharacteristicCodes } from './SeatCharacteristicCodes'
+export { SeatRowFacilities, SeatRowFacilityPosition } from './SeatRowFacilities'
+export { SeatStatuses } from './SeatStatuses'

package/src/helpers/seatMap.ts

@@ -0,0 +1,76 @@
+import type { SeatMap } from '@/constants/seatMap/SeatMap'
+import type { SeatRow } from '@/constants/seatMap/SeatRow'
+
+import { IataTravelerTypes } from '@/constants/seatMap/IataTravelerTypes'
+
+export type SeatMapLayout = (string | null)[]
+
+export interface FormattedSeatMapZone {
+  id: string
+  layout: SeatMapLayout
+  title: string
+}
+
+/** A zone wider than this many columns switches the map to its compact treatment. */
+const LARGE_PLANE_COLUMNS = 6
+
+export const displaySeat = (seat: { column: string; row: number }) => `${seat.row}${seat.column}`
+
+export const getSeatMapZones = (seatMap: SeatMap): FormattedSeatMapZone[] => {
+  return Object.keys(seatMap.zones).map((zoneId) => {
+    const zone = seatMap.zones[zoneId]
+
+    return {
+      id: zoneId,
+      title: zone?.title || '',
+      layout: zone?.layout || [],
+    }
+  })
+}
+
+export const getZoneRows = (seatMap: SeatMap, zoneId: string): SeatRow[] => {
+  return seatMap.rows.filter((row) => row.zone === zoneId).sort((a, b) => a.number - b.number)
+}
+
+export const isLargeSeatMap = (zones: FormattedSeatMapZone[]) => {
+  return zones.some((zone) => zone.layout.length > LARGE_PLANE_COLUMNS)
+}
+
+/** A `null` column is an aisle; it gets a named grid area so row numbers can sit in it. */
+export const getGridTemplateAreas = (layout: SeatMapLayout) => {
+  let hallwayIndex = 0
+
+  return layout
+    .map((column) => {
+      if (column === null) {
+        hallwayIndex++
+        return `HALLWAY-${hallwayIndex}`
+      }
+
+      return column
+    })
+    .join(' ')
+}
+
+export const getGridTemplateColumns = (layout: SeatMapLayout) => {
+  return layout.map((column) => (column === null ? 'var(--hallway-width)' : 'var(--seat-width)')).join(' ')
+}
+
+/** Number of columns before the first aisle, used to span row facilities. */
+export const getSeatBlockSize = (layout: SeatMapLayout) => {
+  const firstNullIndex = layout.indexOf(null)
+  return firstNullIndex > 0 ? firstNullIndex + 1 : layout.length
+}
+
+export const hasHallway = (layout: SeatMapLayout) => layout.includes(null)
+
+export const getHallways = (layout: SeatMapLayout) => {
+  return layout.filter((column) => column === null).map((column, index) => ({ column, index: index + 1 }))
+}
+
+export const getTravelerIcon = (passengerType?: IataTravelerTypes) => {
+  if (!passengerType || passengerType === IataTravelerTypes.ADULT) return ''
+  if ([IataTravelerTypes.CHILD, IataTravelerTypes.UNACCOMPANIED_MINOR].includes(passengerType)) return 'child'
+
+  return 'infant'
+}