@duffel/components 3.1.3--prototype.4 → 3.1.3--prototype.7

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>
-);

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

@@ -1,103 +0,0 @@
-import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
-import { Stamp } from "@components/shared/Stamp";
-import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
-import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
-import { getTotalQuantity } from "@lib/getTotalQuantity";
-import { moneyStringFormatter } from "@lib/moneyStringFormatter";
-import { withPlural } from "@lib/withPlural";
-import React from "react";
-import {
-  CreateOrderPayload,
-  CreateOrderPayloadSeatService,
-  CreateOrderPayloadServices,
-} from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-import { SeatMap } from "../../../types/SeatMap";
-import { Card } from "../Card";
-import { SeatSelectionModal } from "./SeatSelectionModal";
-
-export interface SeatSelectionCardProps {
-  isLoading: boolean;
-  offer?: Offer;
-  seatMaps?: SeatMap[];
-  passengers: CreateOrderPayload["passengers"];
-  selectedServices: CreateOrderPayloadServices;
-  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
-}
-
-export const SeatSelectionCard: React.FC<SeatSelectionCardProps> = ({
-  isLoading,
-  offer,
-  seatMaps,
-  passengers,
-  selectedServices,
-  setSelectedServices,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const containsSeatService = Array.isArray(seatMaps) && seatMaps.length > 0;
-  const totalQuantity = getTotalQuantity(selectedServices);
-  const areSeatsAdded = totalQuantity > 0;
-
-  const totalAmount = getTotalAmountForServices(
-    offer!,
-    selectedServices,
-    seatMaps
-  );
-  let currencyToUse = offer?.base_currency ?? "";
-  if (seatMaps) {
-    currencyToUse = getCurrencyForSeatMaps(seatMaps) ?? currencyToUse;
-  }
-
-  const totalAmountFormatted = offer
-    ? moneyStringFormatter(currencyToUse)(totalAmount)
-    : "0";
-
-  const copy =
-    containsSeatService && areSeatsAdded
-      ? `${withPlural(
-          totalQuantity,
-          "seat",
-          "seats"
-        )} selected for ${totalAmountFormatted}`
-      : "Specify where on the plane you’d like to sit";
-
-  return (
-    <>
-      <Card
-        buttonTitle="Select seats"
-        title="Seat selection"
-        copy={copy}
-        icon="flight_class"
-        onClick={containsSeatService ? () => setIsOpen(true) : null}
-        isLoading={isLoading}
-        disabled={isLoading && !containsSeatService}
-        isSelected={areSeatsAdded}
-      >
-        {isLoading && (
-          <Stamp color="var(--GREY-900)" backgroundColor="var(--GREY-100)">
-            Loading
-            <AnimatedLoaderEllipsis />
-          </Stamp>
-        )}
-        {!isLoading && !containsSeatService && (
-          <Stamp color="var(--GREY-700)" backgroundColor="var(--GREY-200)">
-            Not available
-          </Stamp>
-        )}
-      </Card>
-
-      <SeatSelectionModal
-        isOpen={Boolean(offer && seatMaps && isOpen)}
-        seatMaps={seatMaps}
-        offer={offer}
-        passengers={passengers}
-        selectedServices={selectedServices as CreateOrderPayloadSeatService[]}
-        onClose={(services) => {
-          setSelectedServices(services);
-          setIsOpen(false);
-        }}
-      />
-    </>
-  );
-};

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

@@ -1,142 +0,0 @@
-import { Modal } from "@components/shared/Modal";
-import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
-import { getPassengerBySegmentList } from "@lib/getPassengerBySegmentList";
-import { getPassengerMapById } from "@lib/getPassengerMapById";
-import { getPassengerName } from "@lib/getPassengerName";
-import { getSegmentList } from "@lib/getSegmentList";
-import { getServicePriceMapById } from "@lib/getServicePriceMapById";
-import React from "react";
-import {
-  CreateOrderPayload,
-  CreateOrderPayloadSeatService,
-} from "../../../types/CreateOrderPayload";
-import { Offer } from "../../../types/Offer";
-import { SeatMap } from "../../../types/SeatMap";
-import { SeatSelectionModalBody } from "./SeatSelectionModalBody";
-import { SeatSelectionModalFooter } from "./SeatSelectionModalFooter";
-import { SeatSelectionModalHeader } from "./SeatSelectionModalHeader";
-
-export interface SeatSelectionModalProps {
-  isOpen: boolean;
-  offer?: Offer;
-  seatMaps?: SeatMap[];
-  selectedServices: CreateOrderPayloadSeatService[];
-  passengers: CreateOrderPayload["passengers"];
-  onClose: (selectedServices: CreateOrderPayloadSeatService[]) => void;
-}
-
-export const SeatSelectionModal: React.FC<SeatSelectionModalProps> = ({
-  isOpen,
-  offer,
-  passengers,
-  seatMaps,
-  selectedServices,
-  onClose,
-}) => {
-  const [currentPermutationIndex, setCurrentPermutationIndex] =
-    React.useState(0);
-
-  const [selectedServicesState, setSelectedServicesState] =
-    React.useState<CreateOrderPayloadSeatService[]>(selectedServices);
-  const selectedServicesStateMap = selectedServicesState.reduce(
-    (all, service) => ({ ...all, [service.id]: service }),
-    {} as Record<string, CreateOrderPayloadSeatService>
-  );
-
-  if (!offer || !seatMaps) return null;
-
-  const segments = getSegmentList(offer);
-  const passengerMapById = getPassengerMapById(passengers);
-  const servicePricesMap = getServicePriceMapById(offer.available_services);
-  const segmentAndPassengerPermutations = getPassengerBySegmentList(segments);
-  const {
-    passenger: { passenger_id: currentPassengerId },
-    passengerIndex: currentPassengerIndex,
-    segment: { id: currentSegmentId },
-  } = segmentAndPassengerPermutations[currentPermutationIndex];
-
-  const currentSegment = segments.find(({ id }) => id === currentSegmentId)!;
-  const currentPassenger = passengerMapById[currentPassengerId];
-  const currentSeatMap = seatMaps.find(
-    (seatMap) => seatMap.segment_id === currentSegmentId
-  )!;
-
-  const currentPassengerName = getPassengerName(
-    currentPassenger,
-    offer.passengers[currentPassengerIndex],
-    currentPassengerIndex + 1
-  );
-
-  const onSeatToggle = (seatServiceToToggle: CreateOrderPayloadSeatService) => {
-    let newSeatServices = new Array<CreateOrderPayloadSeatService>();
-
-    for (const selectedServiceFromState of selectedServicesState) {
-      const hasClickedSeatToToggleOff =
-        selectedServiceFromState.id === seatServiceToToggle.id &&
-        seatServiceToToggle.quantity === 0;
-
-      const isSelectedServiceFromStateForTheSameSegmentAndPassengerPermutation =
-        selectedServiceFromState.serviceInformation?.segmentId ===
-          currentSegmentId &&
-        selectedServiceFromState.serviceInformation?.passengerId ===
-          currentPassengerId;
-
-      if (
-        !hasClickedSeatToToggleOff &&
-        !isSelectedServiceFromStateForTheSameSegmentAndPassengerPermutation
-      ) {
-        newSeatServices = [...newSeatServices, selectedServiceFromState];
-      }
-    }
-
-    if (seatServiceToToggle.quantity > 0) {
-      newSeatServices = [...newSeatServices, seatServiceToToggle];
-    }
-
-    setSelectedServicesState(newSeatServices);
-  };
-
-  const currencyToUse =
-    getCurrencyForSeatMaps(seatMaps) ?? offer.total_currency;
-
-  return (
-    <Modal isOpen={isOpen} onClose={() => onClose(selectedServices)}>
-      <SeatSelectionModalHeader
-        segmentAndPassengerPermutationsCount={
-          segmentAndPassengerPermutations.length
-        }
-        currentSegment={currentSegment}
-        currentPassengerName={currentPassengerName}
-        currentSegmentAndPassengerPermutationsIndex={currentPermutationIndex}
-        setCurrentSegmentAndPassengerPermutationsIndex={
-          setCurrentPermutationIndex
-        }
-      />
-      <SeatSelectionModalBody
-        selectedServicesMap={selectedServicesStateMap}
-        seatMap={currentSeatMap}
-        onSeatToggled={onSeatToggle}
-        currentPassengerId={currentPassengerId}
-        currentPassengerName={currentPassengerName}
-        currentSegmentId={currentSegmentId}
-      />
-      <SeatSelectionModalFooter
-        seatMaps={seatMaps}
-        currency={currencyToUse}
-        selectedServices={selectedServicesState}
-        servicePrices={servicePricesMap}
-        isFirstSegment={currentPermutationIndex === 0}
-        isLastSegment={
-          currentPermutationIndex + 1 === segmentAndPassengerPermutations.length
-        }
-        onNextSegmentButtonClicked={() => {
-          setCurrentPermutationIndex(currentPermutationIndex + 1);
-        }}
-        onPreviousSegmentButtonClicked={() => {
-          setCurrentPermutationIndex(currentPermutationIndex - 1);
-        }}
-        onClose={() => onClose(selectedServicesState)}
-      />
-    </Modal>
-  );
-};

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

@@ -1,13 +0,0 @@
-import { ModalBody } from "@components/shared/Modal";
-import React from "react";
-import { SeatMap, SeatMapProps } from "./SeatMap";
-
-export type SeatSelectionModalBodyProps = SeatMapProps;
-
-export const SeatSelectionModalBody: React.FC<SeatSelectionModalBodyProps> = (
-  props
-) => (
-  <ModalBody>
-    <SeatMap {...props} />
-  </ModalBody>
-);

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

@@ -1,89 +0,0 @@
-import { Button } from "@components/shared/Button";
-import { ServicePriceMapById } from "@lib/getServicePriceMapById";
-import { getTotalAmountForServicesWithPriceMap } from "@lib/getTotalAmountForServices";
-import { getTotalQuantity } from "@lib/getTotalQuantity";
-import { moneyStringFormatter } from "@lib/moneyStringFormatter";
-import { withPlural } from "@lib/withPlural";
-import React from "react";
-import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
-import { SeatMap } from "../../../types/SeatMap";
-
-export interface SeatSelectionModalFooterProps {
-  currency: string;
-  selectedServices: CreateOrderPayloadServices;
-  servicePrices: ServicePriceMapById;
-
-  isFirstSegment: boolean;
-  isLastSegment: boolean;
-
-  onNextSegmentButtonClicked: () => void;
-  onPreviousSegmentButtonClicked: () => void;
-  onClose: () => void;
-  seatMaps: SeatMap[];
-}
-
-export const SeatSelectionModalFooter: React.FC<
-  SeatSelectionModalFooterProps
-> = ({
-  selectedServices,
-  servicePrices,
-  currency,
-  isFirstSegment,
-  isLastSegment,
-  onNextSegmentButtonClicked,
-  onPreviousSegmentButtonClicked,
-  onClose,
-  seatMaps,
-}) => {
-  const totalQuantity = getTotalQuantity(selectedServices);
-  const totalAmount = getTotalAmountForServicesWithPriceMap(
-    servicePrices,
-    selectedServices,
-    seatMaps
-  );
-  const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
-  const isOneWay = isFirstSegment && isLastSegment;
-
-  return (
-    <div style={{ padding: "16px 24px 24px" }}>
-      <div className="flex--space-between">
-        <div>Price for {withPlural(totalQuantity, "seat", "seats")}</div>
-        <div className="h3--semibold">+ {totalAmountLabel}</div>
-      </div>
-
-      <div
-        style={
-          isOneWay
-            ? { marginTop: "16px", display: "grid" }
-            : {
-                marginTop: "16px",
-                display: "grid",
-                columnGap: "12px",
-                gridTemplateColumns: "repeat(2, 1fr)",
-              }
-        }
-      >
-        {!isOneWay && (
-          <Button
-            size={48}
-            disabled={isFirstSegment}
-            variant="outlined"
-            onClick={() => onPreviousSegmentButtonClicked()}
-          >
-            Back
-          </Button>
-        )}
-
-        <Button
-          size={48}
-          data-testid="confirm-selection-for-seats"
-          onClick={() =>
-            isLastSegment ? onClose() : onNextSegmentButtonClicked()
-          }
-        >
-          {isLastSegment ? "Confirm" : "Next"}
-        </Button>
-      </div>
-    </div>
-  );
-};