@duffel/components 2.7.20 → 3.0.0

package/src/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalFooter.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@components/shared/Button";
+import { Icon } from "@components/shared/Icon";
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import React from "react";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
+
+export interface CfarSelectionModalFooterProps {
+  service: OfferAvailableServiceCancelForAnyReason;
+  selectedServices: CreateOrderPayloadServices;
+  onAddCfarService: () => void;
+  onRemoveCfarService: () => void;
+  onClose: () => void;
+}
+
+export const CfarSelectionModalFooter: React.FC<
+  CfarSelectionModalFooterProps
+> = ({
+  service,
+  selectedServices,
+  onAddCfarService,
+  onRemoveCfarService,
+  onClose,
+}) => {
+  const serviceIncluded = selectedServices.some(({ id }) => id == service.id);
+  const formattedPrice = moneyStringFormatter(service.total_currency)(
+    +service.total_amount
+  );
+
+  return (
+    <div className="cfar-modal-footer">
+      <Button
+        size={48}
+        variant={serviceIncluded ? "destructive" : "outlined"}
+        onClick={serviceIncluded ? onRemoveCfarService : onClose}
+      >
+        {serviceIncluded ? "Remove protection" : "Don’t protect trip"}
+      </Button>
+
+      {!serviceIncluded && (
+        <Button
+          size={48}
+          data-testid="confirm-selection-for-cfar"
+          onClick={onAddCfarService}
+        >
+          Add protection for {formattedPrice}
+        </Button>
+      )}
+
+      {serviceIncluded && <ProtectedTripBanner />}
+    </div>
+  );
+};
+
+const ProtectedTripBanner: React.FC = () => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      columnGap: "8px",
+      backgroundColor: "var(--GREY-100)",
+      padding: "var(--space-12)",
+      borderRadius: "var(--BUTTON-RADIUS)",
+    }}
+  >
+    <Icon
+      size={20}
+      name="shield_with_moon"
+      style={{ fill: "rgb(var(--ACCENT))" }}
+    />
+    Your trip is protected
+  </div>
+);

package/src/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalHeader.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const CfarSelectionModalHeader: React.FC = () => (
+  <div style={{ padding: "24px 24px 16px" }}>
+    <h2 className="h3--semibold" style={{ marginBlock: 0 }}>
+      Cancel for any reason
+    </h2>
+  </div>
+);

package/src/components/DuffelAncillaries/seats/Amenity.tsx

@@ -0,0 +1,21 @@
+import { Icon, IconName } from "@components/shared/Icon";
+import classNames from "classnames";
+import * as React from "react";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
+
+const amenitiesWithoutWrapper = ["bassinet", "exit_row"];
+
+export interface AmenityProps {
+  type: SeatMapCabinRowSectionElementAmenity;
+}
+
+export const Amenity: React.FC<AmenityProps> = ({ type }) => (
+  <div
+    className={classNames("map-element map-element--amenity", {
+      "map-element--wrapped": !amenitiesWithoutWrapper.includes(type),
+    })}
+    aria-label={type.toString()}
+  >
+    <Icon name={type as IconName} size={16} />
+  </div>
+);

package/src/components/DuffelAncillaries/seats/DeckSelect.tsx

@@ -0,0 +1,27 @@
+import { Tabs } from "@components/shared/Tabs";
+import * as React from "react";
+
+export interface DeckSelectProps {
+  /**
+   * The currently selected deck number
+   */
+  value: number;
+  /**
+   * What to do when the user selects a deck
+   */
+  setValue: (value: number) => void;
+}
+
+/**
+ * The deck selection component for the seat map.
+ */
+export const DeckSelect: React.FC<DeckSelectProps> = ({ value, setValue }) => {
+  const options = ["Lower deck", "Upper deck"];
+  return (
+    <Tabs
+      options={options}
+      value={options[value]}
+      onChange={(item) => setValue(options.indexOf(item))}
+    />
+  );
+};

package/src/components/DuffelAncillaries/seats/Element.tsx

@@ -0,0 +1,52 @@
+import { isSeatElement } from "@lib/isSeatElement";
+import * as React from "react";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
+import { Amenity } from "./Amenity";
+import { EmptyElement } from "./EmptyElement";
+import { ExitElement } from "./ExitElement";
+import { SeatElement } from "./SeatElement";
+
+interface ElementProps {
+  sectionIndex: number;
+  elementIndex: number;
+  element: SeatMapCabinRowSectionElement;
+  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+  currentPassengerId: string;
+  currentSegmentId: string;
+  currentPassengerName: string;
+}
+
+export const Element: React.FC<ElementProps> = ({
+  element,
+  elementIndex,
+  sectionIndex,
+  onSeatToggled,
+  selectedServicesMap,
+  currentPassengerId,
+  currentSegmentId,
+  currentPassengerName,
+}) => {
+  return (
+    <>
+      {isSeatElement(element) ? (
+        <SeatElement
+          currentSegmentId={currentSegmentId}
+          currentPassengerId={currentPassengerId}
+          currentPassengerName={currentPassengerName}
+          selectedServicesMap={selectedServicesMap}
+          key={elementIndex}
+          element={element}
+          onSeatToggled={onSeatToggled}
+        />
+      ) : element.type === "empty" ? (
+        <EmptyElement key={elementIndex} />
+      ) : element.type === "exit_row" ? (
+        <ExitElement key={elementIndex} isRight={sectionIndex > 0} />
+      ) : (
+        <Amenity key={elementIndex} type={element.type} />
+      )}
+    </>
+  );
+};

package/src/components/DuffelAncillaries/seats/EmptyElement.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export const EmptyElement: React.FC = () => (
+  <div className="map-element map-element--empty" />
+);

package/src/components/DuffelAncillaries/seats/ExitElement.tsx

@@ -0,0 +1,17 @@
+import { Icon } from "@components/shared/Icon";
+import classNames from "classnames";
+import * as React from "react";
+
+interface ExitElementProps {
+  isRight: boolean;
+}
+
+export const ExitElement: React.FC<ExitElementProps> = ({ isRight }) => (
+  <div
+    className={classNames("map-element map-element--exit", {
+      "map-element--exit--right": isRight,
+    })}
+  >
+    {isRight ? <Icon name="exit_row_right" /> : <Icon name="exit_row" />}
+  </div>
+);

package/src/components/DuffelAncillaries/seats/Legend.tsx

@@ -0,0 +1,60 @@
+import { Icon, IconName } from "@components/shared/Icon";
+import * as React from "react";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
+
+export interface LegendProps {
+  /**
+   * The set of additional symbols to display
+   */
+  symbols: Set<SeatMapCabinRowSectionElementAmenity>;
+}
+
+/**
+ * The legend for the seat map.
+ */
+export const Legend: React.FC<LegendProps> = ({ symbols }) => (
+  <div className="seat-map__legend">
+    <span className="seat-map__legend-item">
+      <span
+        className="seat-map__legend-seat seat-map__legend-seat--fee-payable"
+        aria-label="Additional cost for seat"
+      >
+        <Icon
+          name="seat_paid_indicator"
+          className="seat-map__legend-seat--fee-payable-indicator"
+          size={12}
+        />
+      </span>
+      Additional Cost
+    </span>
+    <span className="seat-map__legend-item">
+      <span
+        className="seat-map__legend-seat seat-map__legend-seat--included"
+        aria-label="Included seat"
+      />
+      Included
+    </span>
+    <span className="seat-map__legend-item">
+      <span
+        className="seat-map__legend-seat seat-map__legend-seat--selected"
+        aria-label="Selected seat"
+      />
+      Selected
+    </span>
+    <span className="seat-map__legend-item">
+      <span className="seat-map__legend-seat" aria-label="Unavailable seat">
+        <Icon name="close" size={14} />
+      </span>
+      Unavailable
+    </span>
+    {[...symbols].map((symbol) => (
+      <span
+        key={symbol}
+        className="seat-map__legend-item seat-map__legend-item--symbol"
+      >
+        <Icon name={symbol as IconName} size={20} />
+        {symbol.split("_")[0]}
+      </span>
+    ))}
+  </div>
+);

package/src/components/DuffelAncillaries/seats/Row.tsx

@@ -0,0 +1,47 @@
+import { getRowNumber } from "@lib/getRowNumber";
+import * as React from "react";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRow } from "../../../types/SeatMap";
+import { RowSection } from "./RowSection";
+
+export interface RowProps {
+  row: SeatMapCabinRow;
+  hasWings: boolean;
+  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+  currentPassengerId: string;
+  currentPassengerName: string;
+  currentSegmentId: string;
+}
+
+export const Row: React.FC<RowProps> = ({
+  row,
+  hasWings,
+  onSeatToggled,
+  selectedServicesMap,
+  currentPassengerId,
+  currentPassengerName,
+  currentSegmentId,
+}) => {
+  const rowNumber = getRowNumber(row);
+
+  return (
+    <>
+      {row.sections.map((section, sectionIndex) => (
+        <RowSection
+          key={sectionIndex}
+          row={row}
+          rowNumber={rowNumber}
+          hasWings={hasWings}
+          section={section}
+          sectionIndex={sectionIndex}
+          selectedServicesMap={selectedServicesMap}
+          onSeatToggled={onSeatToggled}
+          currentPassengerId={currentPassengerId}
+          currentPassengerName={currentPassengerName}
+          currentSegmentId={currentSegmentId}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/DuffelAncillaries/seats/RowSection.tsx

@@ -0,0 +1,78 @@
+import classNames from "classnames";
+import * as React from "react";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import {
+  SeatMapCabinRow,
+  SeatMapCabinRowSection,
+} from "../../../types/SeatMap";
+import { Element } from "./Element";
+import { EmptyElement } from "./EmptyElement";
+
+interface RowSectionProps {
+  row: SeatMapCabinRow;
+  rowNumber: string | null;
+  hasWings: boolean;
+  section: SeatMapCabinRowSection;
+  sectionIndex: number;
+  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+  currentPassengerId: string;
+  currentPassengerName: string;
+  currentSegmentId: string;
+}
+
+export const RowSection: React.FC<RowSectionProps> = ({
+  row,
+  rowNumber,
+  hasWings,
+  section,
+  sectionIndex,
+  onSeatToggled,
+  selectedServicesMap,
+  currentPassengerId,
+  currentPassengerName,
+  currentSegmentId,
+}) => {
+  const rowLength = Object.keys(row.sections).length;
+  const isOneSectionRow = rowLength === 1;
+
+  return (
+    <React.Fragment key={sectionIndex}>
+      <div
+        className={classNames("map-section", {
+          "map-section--left": sectionIndex === 0,
+          "map-section--right": !isOneSectionRow
+            ? sectionIndex === rowLength - 1
+            : false,
+          "map-section--wing": hasWings,
+        })}
+      >
+        {section.elements.length > 0 ? (
+          section.elements.map((element, elementIndex) => (
+            <React.Fragment key={elementIndex}>
+              <Element
+                sectionIndex={sectionIndex}
+                elementIndex={elementIndex}
+                element={element}
+                selectedServicesMap={selectedServicesMap}
+                onSeatToggled={onSeatToggled}
+                currentPassengerId={currentPassengerId}
+                currentSegmentId={currentSegmentId}
+                currentPassengerName={currentPassengerName}
+              />
+            </React.Fragment>
+          ))
+        ) : (
+          <EmptyElement />
+        )}
+      </div>
+      {(sectionIndex < rowLength - 1 ||
+        (isOneSectionRow && sectionIndex < rowLength)) && (
+        <span className="map-section__aisle">{rowNumber}</span>
+      )}
+      {isOneSectionRow && sectionIndex === row.sections.length - 1 && (
+        <EmptyElement />
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/DuffelAncillaries/seats/SeatElement.tsx

@@ -0,0 +1,120 @@
+import { Icon } from "@components/shared/Icon";
+import { getPassengerInitials } from "@lib/getPassengerInitials";
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import classNames from "classnames";
+import * as React from "react";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
+import { SeatInfo } from "./SeatInfo";
+import { SeatUnavailable } from "./SeatUnavailable";
+
+interface SeatElementProps {
+  element: SeatMapCabinRowSectionElementSeat;
+  currentSegmentId: string;
+  currentPassengerId: string;
+  currentPassengerName: string;
+  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+}
+
+export const SeatElement: React.FC<SeatElementProps> = ({
+  element,
+  currentPassengerId,
+  currentSegmentId,
+  currentPassengerName,
+  onSeatToggled,
+  selectedServicesMap,
+}) => {
+  const seatServiceFromElement = element.available_services.find(
+    (service) => service.passenger_id === currentPassengerId
+  );
+  if (!seatServiceFromElement) return <SeatUnavailable seat={element} />;
+
+  const selectedServiceFromMap = Object.values(selectedServicesMap).find(
+    (service) =>
+      service.serviceInformation?.designator === element.designator &&
+      service.serviceInformation?.segmentId === currentSegmentId
+  );
+
+  const isSeatSelected = selectedServiceFromMap != undefined;
+
+  const seatLabel = isSeatSelected
+    ? getPassengerInitials(
+        selectedServiceFromMap.serviceInformation?.passengerName
+      )
+    : element.designator.charAt(element.designator.length - 1);
+
+  const isFeePayable =
+    !isNaN(+seatServiceFromElement?.total_amount) &&
+    +seatServiceFromElement?.total_amount !== 0;
+
+  const isSeatSelectionAvaiable =
+    !isSeatSelected &&
+    seatServiceFromElement.passenger_id === currentPassengerId;
+
+  const isActionable =
+    !isSeatSelected ||
+    (isSeatSelected &&
+      currentSegmentId ===
+        selectedServiceFromMap.serviceInformation?.segmentId &&
+      currentPassengerId ===
+        selectedServiceFromMap.serviceInformation?.passengerId);
+
+  const seatClassName = classNames("map-element", "map-element__seat", {
+    "map-element--available": isSeatSelectionAvaiable,
+    "map-element--selected": isSeatSelected,
+    "map-element--actionable": isActionable,
+  });
+
+  const priceLabel = moneyStringFormatter(
+    seatServiceFromElement.total_currency
+  )(+seatServiceFromElement.total_amount);
+
+  const isSeatInfoDisplayed =
+    isSeatSelected &&
+    currentSegmentId === selectedServiceFromMap.serviceInformation?.segmentId &&
+    currentPassengerId ===
+      selectedServiceFromMap.serviceInformation?.passengerId;
+
+  return (
+    <>
+      <button
+        data-testid={`seat-${element.designator}`}
+        id={element.designator}
+        className={seatClassName}
+        onClick={() => {
+          if (!isActionable) return;
+          onSeatToggled({
+            quantity: isSeatSelected ? 0 : 1,
+            id: seatServiceFromElement.id,
+            serviceInformation: {
+              type: "seat",
+              segmentId: currentSegmentId,
+              passengerId: currentPassengerId,
+              passengerName: currentPassengerName,
+              designator: element.designator,
+              disclosures: element.disclosures,
+              total_amount: seatServiceFromElement.total_amount,
+              total_currency: seatServiceFromElement.total_currency,
+            },
+          });
+        }}
+        aria-label={`${element.designator} ${
+          element.name || "Seat"
+        } ${priceLabel}`}
+      >
+        {isFeePayable && (
+          <Icon
+            name="seat_paid_indicator"
+            className="map-element--fee-payable"
+            size={16}
+          />
+        )}
+        {seatLabel}
+      </button>
+      {isSeatInfoDisplayed && (
+        <SeatInfo seat={element} service={seatServiceFromElement} />
+      )}
+    </>
+  );
+};

package/src/components/DuffelAncillaries/seats/SeatInfo.tsx

@@ -0,0 +1,32 @@
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import * as React from "react";
+import {
+  SeatMapCabinRowSectionAvailableService,
+  SeatMapCabinRowSectionElementSeat,
+} from "../../../types/SeatMap";
+
+export interface SeatInfoProps {
+  seat: SeatMapCabinRowSectionElementSeat | null;
+  service: SeatMapCabinRowSectionAvailableService | undefined;
+}
+
+export const SeatInfo: React.FC<SeatInfoProps> = ({ seat, service }) => {
+  const price = service
+    ? moneyStringFormatter(service.total_currency)(+service.total_amount)
+    : "";
+
+  return (
+    <div className="seat-info">
+      <div className="seat-info__details">
+        <strong>{seat?.designator}</strong>
+        <span>{seat?.name || "Seat"} </span>
+        <strong>{price}</strong>
+      </div>
+      {seat?.disclosures.map((disclosure, index) => (
+        <div key={index} className="seat-info__disclosure">
+          {disclosure}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/DuffelAncillaries/seats/SeatMap.tsx

@@ -0,0 +1,81 @@
+import { getCabinsForSegmentAndDeck } from "@lib/getCabinsForSegmentAndDeck";
+import { getSymbols } from "@lib/getSymbols";
+import { hasWings } from "@lib/hasWings";
+import classNames from "classnames";
+import * as React from "react";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMap as SeatMapType } from "../../../types/SeatMap";
+import { DeckSelect } from "./DeckSelect";
+import { Legend } from "./Legend";
+import { Row } from "./Row";
+import { SeatMapUnavailable } from "./SeatMapUnavailable";
+
+export interface SeatMapProps {
+  seatMap: SeatMapType;
+  selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;
+  onSeatToggled: (seatService: CreateOrderPayloadSeatService) => void;
+  currentPassengerId: string;
+  currentPassengerName: string;
+  currentSegmentId: string;
+}
+
+export const SeatMap: React.FC<SeatMapProps> = ({
+  seatMap,
+  onSeatToggled,
+  selectedServicesMap,
+  currentPassengerId,
+  currentPassengerName,
+  currentSegmentId,
+}) => {
+  const [selectedDeck, setSelectedDeck] = React.useState(0);
+
+  const cabins = getCabinsForSegmentAndDeck(selectedDeck, seatMap);
+  const hasMultipleDecks = cabins.length !== seatMap.cabins.length;
+  const anyHasWings = seatMap.cabins.some((cabin) => cabin.wings);
+
+  if (!cabins || !cabins.length) {
+    return <SeatMapUnavailable />;
+  }
+
+  const symbols = getSymbols(cabins);
+
+  return (
+    <div
+      className={classNames("seat-map", {
+        "seat-map--wings": anyHasWings,
+      })}
+    >
+      {hasMultipleDecks && (
+        <DeckSelect
+          value={selectedDeck}
+          setValue={(value) => {
+            setSelectedDeck(value);
+          }}
+        />
+      )}
+      <div className="seat-map__legend-container">
+        <Legend symbols={symbols} />
+      </div>
+      {cabins.map((cabin, cabinIndex) => (
+        <div
+          key={`cabin-${cabinIndex}`}
+          className="seat-map__map-container"
+          style={{ "--CABIN-AISLES": cabin.aisles } as React.CSSProperties}
+        >
+          {cabin.rows.map((row, rowIndex) => (
+            <Row
+              key={rowIndex}
+              row={row}
+              hasWings={hasWings(cabin, rowIndex)}
+              onSeatToggled={onSeatToggled}
+              selectedServicesMap={selectedServicesMap}
+              currentPassengerId={currentPassengerId}
+              currentPassengerName={currentPassengerName}
+              currentSegmentId={currentSegmentId}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/DuffelAncillaries/seats/SeatMapUnavailable.tsx

@@ -0,0 +1,21 @@
+import { NonIdealState } from "@components/shared/NonIdealState";
+import * as React from "react";
+
+export const SeatMapUnavailable: React.FC = () => (
+  <NonIdealState>
+    <p style={{ marginBlock: "0" }} className="p1--semibold">
+      Seat selection unavailable
+    </p>
+    <p
+      className="p1--regular"
+      style={{
+        color: "var(--GREY-600)",
+        marginBlock: "12px",
+        textAlign: "center",
+      }}
+    >
+      Unfortunately seat selection is not available for this flight. A seat will
+      be allocated by the airline.
+    </p>
+  </NonIdealState>
+);