@duffel/components 2.7.20 → 3.0.0

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

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

@@ -0,0 +1,142 @@
+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(selectedServicesState)}>
+      <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

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

@@ -0,0 +1,82 @@
+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);
+
+  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={{
+          marginTop: "16px",
+          display: "grid",
+          columnGap: "12px",
+          gridTemplateColumns: "repeat(2, 1fr)",
+        }}
+      >
+        <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>
+  );
+};

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

@@ -0,0 +1,87 @@
+import { formatDateString } from "@lib/formatDate";
+import React from "react";
+import { OfferSliceSegment } from "../../../types/Offer";
+
+export interface SeatSelectionModalHeaderProps {
+  segmentAndPassengerPermutationsCount: number;
+  currentSegment: OfferSliceSegment;
+  currentPassengerName: string;
+
+  currentSegmentAndPassengerPermutationsIndex: number;
+  setCurrentSegmentAndPassengerPermutationsIndex: (index: number) => void;
+}
+
+export const SeatSelectionModalHeader: React.FC<
+  SeatSelectionModalHeaderProps
+> = ({
+  segmentAndPassengerPermutationsCount,
+  currentSegmentAndPassengerPermutationsIndex,
+  currentSegment,
+  currentPassengerName,
+  setCurrentSegmentAndPassengerPermutationsIndex,
+}) => (
+  <div style={{ padding: "24px 24px 16px" }}>
+    <div style={{ display: "flex", columnGap: "4px" }}>
+      {Array(segmentAndPassengerPermutationsCount)
+        .fill(0)
+        .map((_, index) =>
+          index === currentSegmentAndPassengerPermutationsIndex ? (
+            <ActiveSegment key={`segment_${index}`} />
+          ) : (
+            <InactiveSegment
+              key={`segment_${index}`}
+              onClick={() =>
+                setCurrentSegmentAndPassengerPermutationsIndex(index)
+              }
+            />
+          )
+        )}
+    </div>
+    <h2 className="h3--semibold" style={{ marginBlock: "12px 0px" }}>
+      Flight to {currentSegment.destination.iata_code}
+      <span
+        className="p2--regular"
+        style={{
+          color: "var(--GREY-600)",
+          marginLeft: "8px",
+        }}
+      >
+        {formatDateString(currentSegment.departing_at)}
+      </span>
+    </h2>
+    <p
+      className="h3--semibold"
+      style={{ color: `var(--GREY-600)`, marginBlock: "0 4px" }}
+    >
+      {currentPassengerName}
+    </p>
+  </div>
+);
+
+const InactiveSegment: React.FC<{
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({ onClick, style }) => (
+  <button
+    onClick={onClick}
+    style={{
+      border: "none",
+      width: "4px",
+      height: "4px",
+      padding: "0",
+      borderRadius: "4px",
+      backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
+      transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
+      ...style,
+    }}
+  />
+);
+
+const ActiveSegment = () => (
+  <InactiveSegment
+    onClick={undefined}
+    style={{
+      backgroundColor: "rgb(var(--ACCENT))",
+    }}
+  />
+);

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

@@ -0,0 +1,14 @@
+import { Icon } from "@components/shared/Icon";
+import * as React from "react";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
+
+export const SeatUnavailable: React.FC<{
+  seat: SeatMapCabinRowSectionElementSeat;
+}> = ({ seat }) => (
+  <span
+    className="map-element map-element__seat"
+    aria-label={`${seat.designator} ${seat.name || "Seat"} Unavailable`}
+  >
+    <Icon name="close" size={14} />
+  </span>
+);

package/src/components/DuffelPayments/DuffelPayments.tsx

@@ -0,0 +1,218 @@
+import { ErrorBoundary } from "@components/shared/ErrorBoundary";
+import { initializeLogger } from "@lib/logging";
+import {
+  CardElement,
+  Elements,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import { StripeCardElement, StripeError, loadStripe } from "@stripe/stripe-js";
+import * as React from "react";
+import { CustomStyles } from "../../types";
+import { Button } from "../shared/Button";
+
+const COMPONENT_CDN = process.env.COMPONENT_CDN || "";
+const hrefToComponentStyles = `${COMPONENT_CDN}/global.css`;
+
+const STRIPE_CARD_ELEMENT = "card";
+const COMPONENT_VERSION = process.env.COMPONENT_VERSION;
+
+export interface DuffelPaymentsProps {
+  paymentIntentClientToken: string;
+  onSuccessfulPayment: () => void;
+  onFailedPayment: (error: StripeError) => void;
+
+  styles?: CustomStyles;
+  debug?: boolean;
+}
+
+const CARD_ELEMENT_STYLE_BASE = {
+  color: "var(--GREY-900)",
+  fontFamily:
+    '"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"',
+  fontSmoothing: "antialiased",
+  fontSize: "16px",
+  "::placeholder": {
+    color: "#ababb4",
+  },
+};
+
+const CARD_ELEMENT_STYLE_INVALID = {
+  color: "#ef4444",
+  iconColor: "#ef4444",
+};
+
+const CardPaymentComponent: React.FC<DuffelPaymentsProps> = ({
+  styles,
+  paymentIntentClientToken,
+  onSuccessfulPayment,
+  onFailedPayment,
+}) => {
+  const [cardElement, setCardElement] =
+    React.useState<StripeCardElement | null>(null);
+  const [isComplete, setIsComplete] = React.useState<boolean>(false);
+  const [isInvalid, setIsInvalid] = React.useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = React.useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
+  const stripe = useStripe();
+  const elements = useElements();
+
+  React.useEffect(() => {
+    if (elements && !cardElement) {
+      const maybeCard = elements?.getElement(STRIPE_CARD_ELEMENT);
+      maybeCard && setCardElement(maybeCard as StripeCardElement);
+    }
+  }, [elements, cardElement]);
+
+  React.useEffect(() => {
+    if (cardElement) {
+      cardElement.on("change", (event) => {
+        const { error, complete } = event;
+
+        if (error) {
+          setIsInvalid(true);
+          setErrorMessage(error.message);
+        } else {
+          setIsInvalid(false);
+        }
+        complete ? setIsComplete(true) : setIsComplete(false);
+      });
+    }
+  }, [cardElement]);
+
+  // User is responsible for handling outcome of payment.
+  const handleSubmit = async (
+    e: React.MouseEvent<HTMLFormElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+
+    if (cardElement) {
+      setIsProcessing(true);
+      const decodedDuffelPaymentIntentClientToken = atob(
+        paymentIntentClientToken
+      );
+      const parsedDuffelPaymentIntentClientToken = JSON.parse(
+        decodedDuffelPaymentIntentClientToken
+      );
+      const { client_secret: clientSecret } =
+        parsedDuffelPaymentIntentClientToken;
+
+      const result = await stripe.confirmCardPayment(clientSecret, {
+        payment_method: {
+          card: cardElement,
+          metadata: {
+            duffel_components_version:
+              COMPONENT_VERSION || "failed-to-get-version",
+          },
+        },
+      });
+
+      setIsProcessing(false);
+      if (result.error) {
+        const { error } = result;
+        onFailedPayment(error);
+      } else {
+        onSuccessfulPayment();
+      }
+    }
+  };
+
+  return paymentIntentClientToken ? (
+    <div className="card-payment__container">
+      <form onSubmit={handleSubmit}>
+        {isProcessing && (
+          <div
+            className="card-payment--in-progress"
+            aria-live="polite"
+            aria-busy="true"
+          />
+        )}
+        <CardElement
+          className="card-details"
+          options={{
+            style: {
+              base: {
+                ...CARD_ELEMENT_STYLE_BASE,
+                ...(styles?.fontFamily && {
+                  fontFamily: styles.fontFamily,
+                }),
+              },
+              invalid: { ...CARD_ELEMENT_STYLE_INVALID },
+            },
+          }}
+        />
+        <div className="card-payment__container--invalid" role="alert">
+          {isInvalid && errorMessage}
+        </div>
+        <Button
+          className="card-payment__pay-button"
+          type="submit"
+          disabled={!isComplete || isProcessing}
+          aria-label="Pay"
+        >
+          {isProcessing ? "Processing..." : "Pay"}
+        </Button>
+      </form>
+    </div>
+  ) : null;
+};
+
+export const DuffelPayments: React.FC<DuffelPaymentsProps> = (props) => {
+  const [stripe, setStripe] = React.useState<Promise<any> | null>(null);
+  initializeLogger(props.debug || false);
+
+  const decodedDuffelPaymentIntentClientToken = atob(
+    props.paymentIntentClientToken
+  );
+
+  let parsedDuffelPaymentIntentClientToken;
+
+  try {
+    parsedDuffelPaymentIntentClientToken = JSON.parse(
+      decodedDuffelPaymentIntentClientToken
+    );
+  } catch (error) {
+    throw new Error("Invalid Duffel payment intent client token provided");
+  }
+
+  const { publishable_key: duffelPublishableKey } =
+    parsedDuffelPaymentIntentClientToken;
+
+  React.useEffect(() => {
+    if (!stripe && duffelPublishableKey) {
+      const stripe = loadStripe(duffelPublishableKey);
+      stripe && setStripe(stripe);
+    }
+  }, [stripe, duffelPublishableKey]);
+
+  const duffelComponentsStyle: React.CSSProperties = {
+    ...(props.styles?.accentColor && {
+      "--ACCENT": props.styles.accentColor,
+    }),
+    ...(props.styles?.fontFamily && {
+      "--FONT-FAMILY": props.styles.fontFamily,
+    }),
+    ...(props.styles?.buttonCornerRadius && {
+      "--BUTTON-RADIUS": props.styles.buttonCornerRadius,
+    }),
+    // `as any` is needed here is needed because we want to set css variables
+    // that are not part of the css properties type
+  } as any;
+
+  return (
+    <>
+      <link rel="stylesheet" href={hrefToComponentStyles}></link>
+
+      <div className="duffel-components" style={duffelComponentsStyle}>
+        <ErrorBoundary>
+          <Elements stripe={stripe}>
+            <CardPaymentComponent {...props} />
+          </Elements>
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+};