@duffel/components 3.1.3 → 3.1.4

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

@@ -1,11 +0,0 @@
-import { Icon } from "@components/shared/Icon";
-import React, { ReactNode } from "react";
-
-export const CfarSelectionModalBodyListItem: React.FC<{
-  children: ReactNode;
-}> = ({ children }) => (
-  <li className="cfar-modal-list-item">
-    <Icon name="check" />
-    <p>{children}</p>
-  </li>
-);

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

@@ -1,74 +0,0 @@
-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: "var(--SECONDARY, rgb(var(--ACCENT)))" }}
-    />
-    Your trip is protected
-  </div>
-);

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

@@ -1,9 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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);
-
-  if (!seatMap || !seatMap.cabins || !seatMap.cabins.length) {
-    return <SeatMapUnavailable />;
-  }
-
-  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

@@ -1,21 +0,0 @@
-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>
-);