@citizenplane/pimp 18.10.2 → 18.11.0

package/src/components/CpSeatMapRow.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="cpSeatMapRow">
+    <template v-if="hasExit">
+      <div
+        v-for="exit in activeExits"
+        :key="exit.direction"
+        class="cpSeatMapRow__exit"
+        :class="getExitDynamicClass(exit.direction)"
+      >
+        exit
+      </div>
+    </template>
+    <template v-if="hasTopFacilities">
+      <cp-seat-map-row-facility
+        v-for="(facility, index) in formattedTopFacilities"
+        :key="index"
+        :columns-count="columnsCount"
+        :config="config"
+        is-top
+        :position="facility.position"
+        :seat-block-size="seatBlockSize"
+        :type="facility.type"
+      />
+    </template>
+    <slot />
+    <template v-if="hasBottomFacilities">
+      <cp-seat-map-row-facility
+        v-for="(facility, index) in formattedBottomFacilities"
+        :key="index"
+        :columns-count="columnsCount"
+        :config="config"
+        :position="facility.position"
+        :seat-block-size="seatBlockSize"
+        :type="facility.type"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'
+import type { SeatRow } from '@/constants/seatMap/SeatRow'
+import type { SeatRowFacilityFlags } from '@/constants/seatMap/SeatRowFacilityFlags'
+
+import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
+import { SeatRowFacilities, SeatRowFacilityPosition } from '@/constants/seatMap/SeatRowFacilities'
+import { capitalizeFirstLetter } from '@/helpers'
+import CpSeatMapRowFacility from './CpSeatMapRowFacility.vue'
+
+interface Props {
+  config?: CpSeatMapConfig
+  row: SeatRow
+  seatBlockSize: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
+})
+
+enum ExitDirections {
+  FRONT = 'front',
+  BACK = 'back',
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+interface Exit {
+  active: boolean
+  direction: ExitDirections
+}
+
+interface FormattedFacility {
+  position: SeatRowFacilityPosition
+  type: SeatRowFacilities
+}
+
+const allExits = computed<Exit[]>(() => [
+  { active: props.row.has_exit_back, direction: ExitDirections.BACK },
+  { active: props.row.has_exit_front, direction: ExitDirections.FRONT },
+  { active: props.row.has_exit_left, direction: ExitDirections.LEFT },
+  { active: props.row.has_exit_right, direction: ExitDirections.RIGHT },
+])
+
+const activeExits = computed(() => allExits.value.filter(({ active }) => active))
+
+const columnsCount = computed(() => Object.keys(props.row.seats).length + 1) // +1 for the hallway
+
+const hasExit = computed(() => !!allExits.value.length)
+
+const getFacilityType = (facility: SeatRowFacilityFlags, position: SeatRowFacilityPosition) => {
+  if (position === SeatRowFacilityPosition.LEFT) {
+    if (facility.lavatory_left) return SeatRowFacilities.LAVATORY
+    if (facility.galley_left) return SeatRowFacilities.GALLEY
+  }
+
+  if (position === SeatRowFacilityPosition.RIGHT) {
+    if (facility.lavatory_right) return SeatRowFacilities.LAVATORY
+    if (facility.galley_right) return SeatRowFacilities.GALLEY
+  }
+
+  return null
+}
+
+const getFormattedFacilities = (facility: SeatRowFacilityFlags): FormattedFacility[] => {
+  const positions = [
+    { position: SeatRowFacilityPosition.LEFT, hasFacility: facility.lavatory_left || facility.galley_left },
+    { position: SeatRowFacilityPosition.RIGHT, hasFacility: facility.lavatory_right || facility.galley_right },
+  ]
+
+  return positions.reduce<FormattedFacility[]>((facilities, { position, hasFacility }) => {
+    if (!hasFacility) return facilities
+
+    const type = getFacilityType(facility, position)
+    if (!type) return facilities
+
+    return [...facilities, { position, type }]
+  }, [])
+}
+
+const formattedTopFacilities = computed<FormattedFacility[]>(() => {
+  if (!props.row.top) return []
+  return getFormattedFacilities(props.row.top)
+})
+
+const formattedBottomFacilities = computed<FormattedFacility[]>(() => {
+  if (!props.row.bottom) return []
+  return getFormattedFacilities(props.row.bottom)
+})
+
+const hasTopFacilities = computed(() => !!formattedTopFacilities.value.length)
+const hasBottomFacilities = computed(() => !!formattedBottomFacilities.value.length)
+
+const getExitDynamicClass = (direction: ExitDirections) => [
+  `cpSeatMapRow__exit--is${capitalizeFirstLetter(direction)}`,
+]
+</script>
+
+<style lang="scss">
+.cpSeatMapRow {
+  position: relative;
+  display: grid;
+  gap: var(--cp-spacing-md);
+  place-items: center center;
+
+  &__exit {
+    position: absolute;
+    z-index: 1;
+    color: var(--cp-text-error-primary);
+    font-size: fn.px-to-em(12);
+    font-weight: 700;
+    letter-spacing: fn.px-to-rem(2);
+    line-height: fn.px-to-rem(24);
+    place-self: start;
+    text-transform: uppercase;
+
+    &--isLeft,
+    &--isFront,
+    &--isBack {
+      left: fn.px-to-rem(-80);
+      text-orientation: sideways;
+      writing-mode: sideways-lr;
+    }
+
+    &--isRight {
+      right: fn.px-to-rem(-80);
+      text-orientation: sideways;
+      writing-mode: sideways-rl;
+    }
+  }
+}
+
+@include mx.media-query-max(551px) {
+  .cpSeatMapRow {
+    gap: var(--cp-spacing-sm);
+
+    &__exit {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/CpSeatMapRowFacility.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    v-tooltip="facilityTooltip"
+    class="cpSeatMapRowFacility"
+    :class="facilityDynamicClass"
+    :style="facilityDynamicStyle"
+  >
+    <cp-icon class="cpSeatMapRowFacility__icon" size="16" :type="facilityIcon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { vTooltip } from 'floating-vue'
+import { computed } from 'vue'
+
+import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'
+
+import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
+import { SeatRowFacilities, SeatRowFacilityPosition } from '@/constants/seatMap/SeatRowFacilities'
+import CpIcon from './CpIcon.vue'
+
+interface Props {
+  columnsCount: number
+  config?: CpSeatMapConfig
+  isTop?: boolean
+  position: SeatRowFacilityPosition
+  seatBlockSize: number
+  type: SeatRowFacilities
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
+  isTop: false,
+})
+
+const isLavatory = computed(() => props.type === SeatRowFacilities.LAVATORY)
+const isGalley = computed(() => props.type === SeatRowFacilities.GALLEY)
+
+const facilityIcon = computed(() => {
+  if (isGalley.value) return 'coffee'
+  return 'handshake'
+})
+
+const isLeftFacility = computed(() => props.position === SeatRowFacilityPosition.LEFT)
+const isRightFacility = computed(() => props.position === SeatRowFacilityPosition.RIGHT)
+
+const facilityDynamicStyle = computed(() => {
+  const columnStart = isLeftFacility.value ? 1 : props.seatBlockSize + 1
+  const columnEnd = isRightFacility.value ? props.columnsCount + 1 : props.seatBlockSize
+
+  return {
+    gridColumn: `${columnStart} / ${columnEnd}`,
+  }
+})
+
+const facilityDynamicClass = computed(() => {
+  return {
+    'cpSeatMapRowFacility--isTop': props.isTop,
+  }
+})
+
+const facilityTooltip = computed(() => {
+  if (isLavatory.value) return props.config.facility.lavatory
+  if (isGalley.value) return props.config.facility.galley
+
+  return ''
+})
+</script>
+
+<style lang="scss">
+.cpSeatMapRowFacility {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cp-spacing-xl);
+  border-radius: var(--cp-spacing-sm);
+  background-color: var(--cp-background-accent-secondary);
+
+  &:is(.v-popper--has-tooltip) {
+    cursor: help;
+  }
+
+  &__icon {
+    color: var(--cp-foreground-accent-secondary);
+  }
+}
+</style>

package/src/components/CpSeatMapSeat.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="cpSeatMapSeat" :class="seatDynamicClass">
+    <transition name="fade">
+      <cp-icon v-if="isUnavailable" size="16" type="x" />
+      <div v-else>
+        <icon-sparkle v-if="isFree" />
+        <span v-else-if="isOccupiedByCurrentPax">
+          <slot />
+        </span>
+        <span v-else-if="isPayable">{{ seatAmount }}</span>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { SeatAncillary } from '@/constants/seatMap/SeatAncillary'
+
+import { SeatStatuses } from '@/constants/seatMap/SeatStatuses'
+import CpIcon from './CpIcon.vue'
+import IconSparkle from './icons/IconSparkle.vue'
+
+interface Props {
+  seat: {
+    selected_ancillary?: SeatAncillary
+    status: SeatStatuses
+  }
+}
+
+const props = defineProps<Props>()
+
+const seatStatus = computed(() => props.seat.status)
+
+const isOccupied = computed(() => [SeatStatuses.OCCUPIED, SeatStatuses.BLOCKED].includes(seatStatus.value))
+const isOccupiedByCurrentPax = computed(() => seatStatus.value === SeatStatuses.OCCUPIED_BY_CURRENT_PAX)
+const isUnavailable = computed(() => isOccupied.value)
+const isPayable = computed(() => seatStatus.value === SeatStatuses.PAYABLE)
+const isFree = computed(() => seatStatus.value === SeatStatuses.FREE)
+
+const seatDynamicClass = computed(() => {
+  return {
+    'cpSeatMapSeat--isOccupied': isOccupied.value,
+    'cpSeatMapSeat--isOccupiedByCurrentPax': isOccupiedByCurrentPax.value,
+    'cpSeatMapSeat--isUnavailable': isUnavailable.value,
+    'cpSeatMapSeat--isPayable': isPayable.value,
+    'cpSeatMapSeat--isFree': isFree.value,
+  }
+})
+
+// The API already ships a localised, currency-aware string, so no formatting here.
+const seatAmount = computed(() => {
+  if (!isPayable.value) return ''
+  return props.seat.selected_ancillary?.formatted_amount || '€'
+})
+</script>
+
+<style lang="scss">
+.cpSeatMapSeat {
+  position: relative;
+  display: flex;
+  width: var(--seat-width);
+  height: var(--seat-width);
+  align-items: center;
+  justify-content: center;
+  border-radius: fn.px-to-rem(4);
+  aspect-ratio: 1 / 1;
+  font-size: fn.px-to-em(10);
+  font-weight: 700;
+  line-height: fn.px-to-rem(24);
+  text-transform: uppercase;
+  transition:
+    background-color 200ms ease,
+    color 200ms ease;
+
+  &--isFree {
+    border: fn.px-to-rem(1) solid var(--cp-border-strong);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    color: var(--cp-border-strong);
+  }
+
+  &--isFree::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: fn.px-to-rem(8);
+    border: fn.px-to-rem(1) solid var(--cp-border-strong);
+    border-radius: fn.px-to-rem(6) fn.px-to-rem(6) 0 0;
+    border-bottom: none;
+    content: '';
+    pointer-events: none;
+  }
+
+  &--isOccupiedByCurrentPax {
+    background-color: var(--cp-background-accent-solid);
+    color: var(--cp-text-white);
+  }
+
+  &--isUnavailable {
+    background-color: var(--cp-utility-neutral-100);
+
+    i {
+      color: var(--cp-foreground-disabled);
+    }
+  }
+
+  &--isPayable {
+    border: fn.px-to-rem(1) solid var(--cp-border-warning-primary);
+    color: var(--cp-text-warning-primary);
+    font-weight: 500;
+  }
+
+  &--isPayable:is(&--isOccupiedByCurrentPax) {
+    background-color: var(--cp-background-warning-solid);
+    color: var(--cp-text-white);
+  }
+
+  &--isPayable::after {
+    position: absolute;
+    right: var(--cp-spacing-xs);
+    bottom: var(--cp-spacing-xs);
+    border-radius: var(--cp-radius-xs);
+    border-bottom: fn.px-to-rem(10) solid var(--cp-border-warning-solid);
+    border-left: fn.px-to-rem(10) solid transparent;
+    content: '';
+  }
+}
+
+@include mx.media-query-max(551px) {
+  .cpSeatMapSeat {
+    width: var(--seat-mobile-width);
+    height: var(--seat-mobile-width);
+  }
+}
+</style>

package/src/components/CpSeatMapSeatWrapper.vue

@@ -0,0 +1,189 @@
+<template>
+  <button
+    :id="seatId"
+    ref="seatWrapper"
+    v-tooltip="dynamicSeatTooltip"
+    class="cpSeatMapSeatWrapper"
+    :class="seatWrapperDynamicClass"
+    :disabled="isSeatDisabled"
+    type="button"
+    @click="handleSelectSeat"
+  >
+    <cp-seat-map-seat class="cpSeatMapSeatWrapper__seat" :seat="seatProperties">
+      {{ seatValue }}
+      <cp-badge
+        v-if="hasLinkedTraveler"
+        class="cpSeatMapSeatWrapper__additionalTraveler"
+        color="accent"
+        :leading-icon="linkedTravelerIcon"
+        size="xs"
+        variant="outline"
+      />
+    </cp-seat-map-seat>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { vTooltip } from 'floating-vue'
+import { computed, useTemplateRef, watch } from 'vue'
+
+import type { CpSeatMapConfig } from '@/constants/seatMap/CpSeatMapConfig'
+import type { CpSeatMapSeatSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
+import type { Seat } from '@/constants/seatMap/Seat'
+
+import { DEFAULT_CP_SEAT_MAP_CONFIG } from '@/constants/seatMap/CpSeatMapConfig'
+import { SeatStatuses } from '@/constants/seatMap/SeatStatuses'
+import { displaySeat, getTravelerIcon } from '@/helpers/seatMap'
+import CpBadge from './CpBadge.vue'
+import CpSeatMapSeat from './CpSeatMapSeat.vue'
+
+interface Props {
+  config?: CpSeatMapConfig
+  isHighlighted?: boolean
+  isSelectionEnabled?: boolean
+  rowNumber: number
+  seat: Seat
+  selection?: CpSeatMapSeatSelection | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: () => DEFAULT_CP_SEAT_MAP_CONFIG,
+  isHighlighted: false,
+  isSelectionEnabled: true,
+  selection: null,
+})
+
+const emit = defineEmits<{ select: [seat: Seat, rowNumber: number] }>()
+
+const HIGHLIGHT_DURATION = 500
+
+const seatWrapperRef = useTemplateRef<HTMLButtonElement>('seatWrapper')
+
+const seatId = computed(() => `seat-${displaySeat({ row: props.rowNumber, column: props.seat.column })}`)
+
+const isSeatSelected = computed(() => props.selection !== null)
+
+const isSeatOccupied = computed(() => props.seat.status === SeatStatuses.OCCUPIED)
+const isSeatBlocked = computed(() => props.seat.status === SeatStatuses.BLOCKED)
+const isSeatUnavailable = computed(() => isSeatBlocked.value || isSeatOccupied.value)
+const isSeatPayable = computed(() => props.seat.status === SeatStatuses.PAYABLE)
+
+const highlightSeat = () => {
+  seatWrapperRef.value?.classList.add('cpSeatMapSeatWrapper--isHighlighted')
+
+  setTimeout(() => {
+    seatWrapperRef.value?.classList.remove('cpSeatMapSeatWrapper--isHighlighted')
+  }, HIGHLIGHT_DURATION)
+}
+
+watch(
+  () => props.isHighlighted,
+  (isHighlighted) => {
+    if (isHighlighted) highlightSeat()
+  },
+)
+
+const seatWrapperDynamicClass = computed(() => {
+  return {
+    'cpSeatMapSeatWrapper--isPayable': isSeatPayable.value,
+  }
+})
+
+const isSeatDisabled = computed(() => {
+  if (!props.isSelectionEnabled) return true
+  return isSeatUnavailable.value
+})
+
+const dynamicSeatStatus = computed(() => {
+  if (!isSeatSelected.value) {
+    if (isSeatUnavailable.value || isSeatPayable.value) return props.seat.status
+    return SeatStatuses.FREE
+  }
+
+  return SeatStatuses.OCCUPIED_BY_CURRENT_PAX
+})
+
+const seatProperties = computed(() => ({
+  ...props.seat,
+  status: dynamicSeatStatus.value,
+}))
+
+const hasLinkedTraveler = computed(() => !!props.selection?.hasLinkedTraveler)
+
+const linkedTravelerIcon = computed(() => {
+  if (!hasLinkedTraveler.value) return ''
+  return getTravelerIcon(props.selection?.linkedTravelerType) || 'infant'
+})
+
+const dynamicSeatTooltip = computed(() => {
+  const { seatStatuses } = props.config
+
+  if (isSeatSelected.value) {
+    if (hasLinkedTraveler.value) return seatStatuses.selectedForLinkedTraveler
+
+    return seatStatuses.selected
+  }
+
+  if (!props.isSelectionEnabled) return seatStatuses.selectTravelerFirst
+
+  const seatLabel = displaySeat({ row: props.rowNumber, column: props.seat.column })
+
+  return `${seatLabel} • ${seatStatuses[props.seat.status]}`
+})
+
+const seatValue = computed(() => props.selection?.initials || '')
+
+const handleSelectSeat = () => {
+  if (isSeatDisabled.value) return
+  emit('select', props.seat, props.rowNumber)
+}
+</script>
+
+<style lang="scss">
+.cpSeatMapSeatWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms ease;
+
+  &:focus-visible {
+    @extend %u-focus-outline;
+
+    border-radius: var(--cp-radius-sm);
+    outline-offset: fn.px-to-rem(1);
+  }
+
+  &--isPayable:focus-visible {
+    outline-color: var(--cp-border-warning-primary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &--isHighlighted {
+    transform: scale(1.15);
+
+    > * {
+      outline: fn.px-to-rem(1) solid var(--cp-background-accent-solid-hover);
+      outline-offset: fn.px-to-rem(1);
+    }
+  }
+
+  &__additionalTraveler {
+    position: absolute;
+
+    // stylelint-disable-next-line custom-property-pattern
+    top: calc(var(--cp-dimensions-1_5) * -1);
+
+    // stylelint-disable-next-line custom-property-pattern
+    right: calc(var(--cp-dimensions-1_5) * -1);
+    padding: var(--cp-spacing-xs);
+
+    .cpBadge__icon {
+      width: fn.px-to-rem(12);
+    }
+  }
+}
+</style>

package/src/components/CpSeatMapZone.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="cpSeatMapZone">
+    <cp-heading class="cpSeatMapZone__title" heading-level="h6">{{ title }}</cp-heading>
+    <div class="cpSeatMapZone__layout">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CpHeading from './CpHeading.vue'
+
+interface Props {
+  title: string
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss">
+.cpSeatMapZone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cp-spacing-md);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: fn.px-to-em(12);
+    font-weight: 700;
+    gap: var(--cp-spacing-xl);
+    letter-spacing: fn.px-to-rem(2);
+    line-height: fn.px-to-rem(24);
+    text-transform: uppercase;
+
+    &::before,
+    &::after {
+      display: block;
+      width: 100%;
+      height: fn.px-to-rem(1);
+      flex: 1;
+      background-color: var(--cp-border-soft);
+      content: '';
+    }
+  }
+
+  &__layout {
+    padding-inline: fn.px-to-rem(20);
+  }
+}
+
+@include mx.media-query-max(551px) {
+  .cpSeatMapZone {
+    &__layout {
+      padding-inline: 0;
+    }
+  }
+}
+</style>