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

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

package/src/components/DuffelPayments/DuffelPaymentsCustomElement.tsx

@@ -1,130 +0,0 @@
-import { StripeError } from "@stripe/stripe-js";
-import { createRoot, Root } from "react-dom/client";
-import { DuffelPayments, DuffelPaymentsProps } from "./DuffelPayments";
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      "duffel-payments": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
-    }
-  }
-}
-
-const CUSTOM_ELEMENT_TAG = "duffel-payments";
-
-type DuffelPaymentsCustomElementRenderArguments = Pick<
-  DuffelPaymentsProps,
-  "paymentIntentClientToken" | "styles"
->;
-
-class DuffelPaymentsCustomElement extends HTMLElement {
-  /**
-   * The React root for displaying content inside a browser DOM element.
-   */
-  private root!: Root;
-
-  /**
-   * `connectedCallback` is called to initialise the custom element
-   */
-  connectedCallback() {
-    const container = document.createElement("div");
-    this.appendChild(container);
-
-    this.root = createRoot(container);
-  }
-
-  /**
-   * When this function is called, it will render/re-render
-   * the `DuffelPayments` component with the given props.
-   */
-  public render(withProps: DuffelPaymentsCustomElementRenderArguments) {
-    if (!this.root) {
-      throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
-    }
-
-    this.root.render(
-      <DuffelPayments
-        {...withProps}
-        onSuccessfulPayment={() => {
-          this.dispatchEvent(
-            new CustomEvent("onSuccessfulPayment", {
-              composed: true,
-            })
-          );
-        }}
-        onFailedPayment={(error: StripeError) => {
-          this.dispatchEvent(
-            new CustomEvent("onFailedPayment", {
-              detail: { error },
-              composed: true,
-            })
-          );
-        }}
-      />
-    );
-  }
-}
-
-window.customElements.get(CUSTOM_ELEMENT_TAG) ||
-  window.customElements.define(CUSTOM_ELEMENT_TAG, DuffelPaymentsCustomElement);
-
-function tryToGetDuffelPaymentsCustomElement(
-  caller: string
-): DuffelPaymentsCustomElement {
-  const element =
-    document.querySelector<DuffelPaymentsCustomElement>(CUSTOM_ELEMENT_TAG);
-  if (!element) {
-    throw new Error(
-      `Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
-    );
-  }
-  return element;
-}
-
-export function renderDuffelPaymentsCustomElement(
-  props: DuffelPaymentsCustomElementRenderArguments
-) {
-  const element = tryToGetDuffelPaymentsCustomElement(
-    "renderDuffelPaymentsCustomElement"
-  );
-  element.render(props);
-}
-
-export function onDuffelPaymentsSuccessfulPayment(
-  onSuccessfulPayment: DuffelPaymentsProps["onSuccessfulPayment"]
-) {
-  const element = tryToGetDuffelPaymentsCustomElement(
-    "onDuffelPaymentsPayloadReady"
-  );
-
-  // using `as EventListener` here because typescript doesn't know the event type for `onPayloadReady`
-  // There's a few different suggestions to resolve this seemed good enough
-  // You can learn more here: https://github.com/microsoft/TypeScript/issues/28357
-  element.addEventListener(
-    "onPayloadReady",
-    onSuccessfulPayment as EventListener
-  );
-}
-
-type OnFailedPaymentCustomEvent = CustomEvent<{
-  error: StripeError;
-}>;
-export function onDuffelPaymentsFailedPayment(
-  onFailedPayment: DuffelPaymentsProps["onFailedPayment"]
-) {
-  const element = tryToGetDuffelPaymentsCustomElement(
-    "onDuffelPaymentsPayloadReady"
-  );
-  const eventListener = (event: OnFailedPaymentCustomEvent) => {
-    onFailedPayment(event.detail.error);
-  };
-
-  // using `as EventListener` here because typescript doesn't know the event type for `onPayloadReady`
-  // There's a few different suggestions to resolve this seemed good enough
-  // You can learn more here: https://github.com/microsoft/TypeScript/issues/28357
-  element.addEventListener("onPayloadReady", eventListener as EventListener);
-}

package/src/components/PlacesLookup/PlacesLookup.tsx

@@ -1,122 +0,0 @@
-import Fuse from "fuse.js";
-import { debounce } from "lodash";
-import React from "react";
-import { Icon } from "../shared/Icon";
-
-const DATA_SOURCE = "https://assets.duffel.com/data/iata-lookup-v2.json";
-
-interface City {
-  type: "city";
-  name: string;
-  iata_code: string;
-}
-interface Airport {
-  type: "airport";
-  name: string;
-  iata_code: string;
-  latitude: string;
-  longitude: string;
-}
-type Place = City | Airport;
-
-const mapDataRowsIntoObjects = (data: string[]): Place[] =>
-  data.map((row) => {
-    const [type, name, iata_code, latitude, longitude] = row.split(",");
-    if (type === "C") return { type: "city", name, iata_code } as City;
-    else
-      return {
-        type: "airport",
-        name,
-        iata_code,
-        latitude,
-        longitude,
-      } as Airport;
-  });
-
-export interface PlacesLookupProps {
-  onPlaceSelected: (selection: Place) => void;
-  placeholder?: string;
-}
-
-export const PlacesLookup: React.FC<PlacesLookupProps> = ({
-  onPlaceSelected,
-  placeholder = "Lookup city or airport",
-}) => {
-  const [shouldShowPopover, setShouldShowPopover] =
-    React.useState<boolean>(true);
-  const [inputValue, setInputValue] = React.useState<string>("");
-  const [lookupData, setLookupData] = React.useState<Fuse<Place>>(new Fuse([]));
-  const [lookupResults, setLookupResults] = React.useState<
-    Fuse.FuseResult<Place>[]
-  >([]);
-
-  const runLookup = debounce((newInputValue: string) => {
-    setLookupResults(
-      lookupData.search(newInputValue, {
-        limit: 10,
-      })
-    );
-  }, 300);
-
-  React.useEffect(() => {
-    fetch(DATA_SOURCE)
-      .then((response: Response) => response.json())
-      .then((data: string[]) =>
-        setLookupData(
-          new Fuse<Place>(mapDataRowsIntoObjects(data), {
-            threshold: 0.2,
-            keys: ["name", "iata_code"],
-          })
-        )
-      );
-  }, []);
-
-  return (
-    <div className="places-lookup">
-      <input
-        className="places-lookup-input"
-        placeholder={placeholder}
-        type="text"
-        value={inputValue}
-        onChange={(e) => {
-          if (!shouldShowPopover) setShouldShowPopover(true);
-          setInputValue(e.target.value);
-          runLookup(e.target.value);
-        }}
-      />
-      {shouldShowPopover &&
-        inputValue.length > 0 &&
-        lookupResults.length > 0 && (
-          <div
-            className="places-lookup-popover"
-            style={{ display: "flex", flexDirection: "column" }}
-          >
-            {lookupResults.map(({ item }, index) => (
-              <button
-                className="places-lookup-popover__item"
-                key={item.iata_code + index}
-                onClick={() => {
-                  setShouldShowPopover(false);
-                  onPlaceSelected(item);
-                  setInputValue(item.name);
-                }}
-              >
-                <span className="places-lookup-popover__icon-and-name-container">
-                  <Icon
-                    style={{ fill: "var(--GREY-400)", marginTop: "-2px" }}
-                    name={
-                      item.type === "airport" ? "flight_takeoff" : "apartment"
-                    }
-                  />
-                  {item.name}
-                </span>{" "}
-                <span style={{ color: "var(--GREY-600)", fontSize: "12px" }}>
-                  {item.iata_code}
-                </span>
-              </button>
-            ))}
-          </div>
-        )}
-    </div>
-  );
-};

package/src/components/shared/AnimatedLoaderEllipsis.tsx

@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export const AnimatedLoaderEllipsis: React.FC = () => (
-  <span className="textual-loading-indicator" aria-hidden="true" />
-);

package/src/components/shared/Button.tsx

@@ -1,63 +0,0 @@
-import { Icon, IconName } from "@components/shared/Icon";
-import classNames from "classnames";
-import * as React from "react";
-
-const BUTTON_VARIANTS = {
-  primary: "button--primary",
-  outlined: "button--outlined",
-  destructive: "button--destructive",
-};
-type ButtonVariants = keyof typeof BUTTON_VARIANTS;
-
-const BUTTON_SIZES = {
-  32: "button--32",
-  40: "button--40",
-  48: "button--48",
-};
-
-type ButtonSizes = keyof typeof BUTTON_SIZES;
-
-type NativeButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->;
-
-export interface ButtonProps
-  extends Pick<
-    NativeButtonProps,
-    "id" | "onClick" | "disabled" | "children" | "className" | "type"
-  > {
-  "data-testid"?: string;
-  iconBefore?: IconName;
-  variant?: ButtonVariants;
-  size?: ButtonSizes;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  iconBefore,
-  variant = "primary",
-  size = 40,
-  children,
-  className,
-  type = "button",
-  ...nativeButtonProps
-}) => (
-  <button
-    type={type}
-    className={classNames(
-      "button",
-      BUTTON_VARIANTS[variant],
-      BUTTON_SIZES[size],
-      className
-    )}
-    {...nativeButtonProps}
-  >
-    {iconBefore && (
-      <Icon
-        className="duffel-button__icon duffel-button__icon--before"
-        name={iconBefore}
-      />
-    )}
-    {children}
-  </button>
-);