@duffel/components 3.1.3 → 3.1.4

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

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

@@ -1,97 +0,0 @@
-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" }}>
-    {segmentAndPassengerPermutationsCount > 1 && (
-      <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={
-        segmentAndPassengerPermutationsCount > 1
-          ? { 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:
-        "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
-      transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
-      ...style,
-    }}
-  />
-);
-
-const ActiveSegment = () => (
-  <InactiveSegment
-    onClick={undefined}
-    style={{
-      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
-    }}
-  />
-);

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

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

@@ -1,224 +0,0 @@
-import { ErrorBoundary } from "@components/shared/ErrorBoundary";
-import { hasHighLuminance } from "@lib/hasHighLuminance";
-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?.accentColor &&
-      hasHighLuminance(props.styles.accentColor) && {
-        "--SECONDARY": "black",
-        "--TERTIARY": "grey",
-      }),
-    ...(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>
-    </>
-  );
-};