@duffel/components 3.1.3--prototype.3 → 3.1.3--prototype.6

package/src/components/DuffelAncillaries/Card.tsx

@@ -1,126 +0,0 @@
-import { Icon, IconName } from "@components/shared/Icon";
-import classNames from "classnames";
-import * as React from "react";
-
-export interface CardProps {
-  buttonTitle: string;
-  title: string;
-  icon: IconName;
-  onClick?: (() => void) | null;
-  children: React.ReactNode;
-  copy: string;
-  isLoading?: boolean;
-  disabled?: boolean;
-  isSelected?: boolean;
-}
-
-export const Card: React.FC<CardProps> = ({
-  buttonTitle,
-  title,
-  icon,
-  copy,
-  onClick,
-  children,
-  isLoading,
-  disabled,
-  isSelected,
-}) => {
-  const hasChildren = React.Children.toArray(children).length > 0;
-
-  return (
-    <button
-      title={buttonTitle}
-      {...(onClick && { onClick })}
-      disabled={disabled}
-      className={classNames(
-        "ancillary-card",
-        isLoading && "ancillary-card--loading"
-      )}
-      // We are using inline styles here because
-      // we don't want the cards to appear unstyled
-      // before the CSS stylesheet loads.
-      // This is important for this component since it
-      // be on visible on the page when it loads.
-      style={{
-        cursor: "pointer",
-        background: "transparent",
-        color: "var(--GREY-900)",
-        border: "solid 1px rgba(226, 226, 232, 1)",
-        display: "flex",
-        rowGap: "4px",
-        padding: "20px",
-        borderRadius: "8px",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        flexDirection: "column",
-        width: "100%",
-        boxSizing: "border-box",
-        fontSize: "16px",
-        fontWeight: "400",
-        lineHeight: "24px",
-        letterSpacing: "0em",
-        transition:
-          "border-color 0.3s var(--TRANSITION-CUBIC-BEZIER) background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          alignItems: "flex-start",
-          marginBlock: "0",
-          textAlign: "start",
-          marginTop: "2px",
-          columnGap: "12px",
-          width: "100%",
-        }}
-      >
-        <div>
-          {isSelected ? (
-            <Icon name="check" className="ancillary-card__selected-icon" />
-          ) : (
-            <Icon name={icon} />
-          )}
-        </div>
-
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "start",
-            width: "100%",
-          }}
-        >
-          <p
-            className="p1--semibold"
-            style={{
-              marginBlock: "0",
-            }}
-          >
-            {title}
-          </p>
-          <div className="ancillary-card__children">
-            {hasChildren ? (
-              children
-            ) : (
-              <Icon
-                name="expand_content"
-                className="ancillary-card__expand-icon"
-              />
-            )}
-          </div>
-        </div>
-      </div>
-      <p
-        className="p1--regular"
-        style={{
-          textAlign: "start",
-          color: "var(--GREY-600)",
-          marginLeft: "34px",
-          marginBlock: "0",
-        }}
-      >
-        {copy}
-      </p>
-    </button>
-  );
-};

package/src/components/DuffelAncillaries/Counter.tsx

@@ -1,40 +0,0 @@
-import { IconButton } from "@components/shared/IconButton";
-import * as React from "react";
-
-interface CounterProps {
-  id: string;
-  min: number;
-  max: number;
-  value: number;
-  onChange: (value: number) => void;
-}
-
-export const Counter: React.FC<CounterProps> = ({
-  id,
-  min,
-  max,
-  value,
-  onChange,
-}) => (
-  <div className="counter" id={id}>
-    <IconButton
-      icon="minus"
-      title="Remove one"
-      id={`${id}-minus`}
-      data-testid={`${id}-minus`}
-      variant="outlined"
-      disabled={value <= min}
-      onClick={() => onChange(Math.max(value - 1, min))}
-    />
-    <div className="counter__count-label">{value}</div>
-    <IconButton
-      icon="add"
-      title="Add one"
-      id={`${id}-plus`}
-      data-testid={`${id}-plus`}
-      variant="outlined"
-      disabled={value >= max}
-      onClick={() => onChange(Math.min(value + 1, max))}
-    />
-  </div>
-);

package/src/components/DuffelAncillaries/DuffelAncillaries.tsx

@@ -1,350 +0,0 @@
-import { ErrorBoundary } from "@components/shared/ErrorBoundary";
-import { FetchOfferErrorState } from "@components/shared/FetchOfferErrorState";
-import { compileCreateOrderPayload } from "@lib/compileCreateOrderPayload";
-import { createPriceFormatters } from "@lib/createPriceFormatters";
-import { formatAvailableServices } from "@lib/formatAvailableServices";
-import { formatSeatMaps } from "@lib/formatSeatMaps";
-import { hasHighLuminance } from "@lib/hasHighLuminance";
-import { isPayloadComplete } from "@lib/isPayloadComplete";
-import { initializeLogger, logGroup } from "@lib/logging";
-import { offerIsExpired } from "@lib/offerIsExpired";
-import { retrieveOffer } from "@lib/retrieveOffer";
-import { retrieveSeatMaps } from "@lib/retrieveSeatMaps";
-import {
-  areDuffelAncillariesPropsValid,
-  isDuffelAncillariesPropsWithClientKeyAndOfferId,
-  isDuffelAncillariesPropsWithOfferAndClientKey,
-  isDuffelAncillariesPropsWithOfferAndSeatMaps,
-  isDuffelAncillariesPropsWithOfferIdForFixture,
-} from "@lib/validateProps";
-import * as Sentry from "@sentry/browser";
-import * as React from "react";
-import {
-  CreateOrderPayloadPassengers,
-  CreateOrderPayloadService,
-} from "../../types/CreateOrderPayload";
-import { DuffelAncillariesProps } from "../../types/DuffelAncillariesProps";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { BaggageSelectionCard } from "./bags/BaggageSelectionCard";
-import { CfarSelectionCard } from "./cancel_for_any_reason/CfarSelectionCard";
-import { SeatSelectionCard } from "./seats/SeatSelectionCard";
-
-const COMPONENT_CDN = process.env.COMPONENT_CDN || "";
-const hrefToComponentStyles = `${COMPONENT_CDN}/global.css`;
-
-export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
-  initializeLogger(props.debug || false);
-
-  logGroup("Properties passed into the component:", props);
-
-  if (!areDuffelAncillariesPropsValid(props)) {
-    throw new Error(
-      `The props (${Object.keys(
-        props
-      )}) passed to DuffelAncillaries are invalid. ` +
-        "`onPayloadReady`, `passengers` and `services` are always required. " +
-        "Then, depending on your use case you may have one of the following combinations of required props: " +
-        "`offer_id` and `client_key`, `offer` and `seat_maps` or `offer` and `client_key`." +
-        "Please refer to the documentation for more information and working examples: " +
-        "https://duffel.com/docs/guides/ancillaries-component"
-    );
-  }
-  if (props.services.length === 0) {
-    throw new Error(
-      `You must provide at least one service in the "services" prop. Valid services: ["bags", "seats", "cancel_for_any_reason"]`
-    );
-  }
-
-  const isPropsWithOfferIdForFixture =
-    isDuffelAncillariesPropsWithOfferIdForFixture(props);
-
-  const isPropsWithClientKeyAndOfferId =
-    isDuffelAncillariesPropsWithClientKeyAndOfferId(props);
-
-  const isPropsWithOfferAndSeatMaps =
-    isDuffelAncillariesPropsWithOfferAndSeatMaps(props);
-
-  const isPropsWithOfferAndClientKey =
-    isDuffelAncillariesPropsWithOfferAndClientKey(props);
-
-  const shouldRetrieveSeatMaps =
-    props.services.includes("seats") &&
-    !("seat_maps" in props) &&
-    (isPropsWithOfferIdForFixture ||
-      isPropsWithClientKeyAndOfferId ||
-      isPropsWithOfferAndClientKey);
-
-  const [passengers, setPassengers] =
-    React.useState<CreateOrderPayloadPassengers>(props.passengers);
-
-  const [offer, setOffer] = React.useState<Offer | undefined>(
-    (props as any).offer
-  );
-
-  const [isOfferLoading, setIsOfferLoading] = React.useState(
-    isPropsWithClientKeyAndOfferId
-  );
-
-  const [seatMaps, setSeatMaps] = React.useState<SeatMap[] | undefined>(
-    isPropsWithOfferAndSeatMaps ? props.seat_maps : undefined
-  );
-  const [isSeatMapLoading, setIsSeatMapLoading] = React.useState(
-    shouldRetrieveSeatMaps
-  );
-
-  const [error, setError] = React.useState<null | string>(null);
-
-  const [baggageSelectedServices, setBaggageSelectedServices] = React.useState(
-    new Array<CreateOrderPayloadService>()
-  );
-  const [seatSelectedServices, setSeatSelectedServices] = React.useState(
-    new Array<CreateOrderPayloadService>()
-  );
-  const [cfarSelectedServices, setCfarSelectedServices] = React.useState(
-    new Array<CreateOrderPayloadService>()
-  );
-
-  const priceFormatters = createPriceFormatters(
-    props.markup,
-    props.priceFormatters
-  );
-
-  const updateOffer = (offer: Offer) => {
-    const expiryErrorMessage = "This offer has expired.";
-    if (offerIsExpired(offer)) {
-      setError(expiryErrorMessage);
-      return;
-    } else {
-      const msUntilExpiry = new Date(offer?.expires_at)?.getTime() - Date.now();
-
-      // Only show the expiry error message if the offer expires in less than a day,
-      // to prevent buffer overflows when showing offers for fixtures, which expire in
-      // years.
-      const milisecondsInOneDay = 1000 * 60 * 60 * 24;
-      if (msUntilExpiry < milisecondsInOneDay) {
-        setTimeout(() => setError(expiryErrorMessage), msUntilExpiry);
-      }
-    }
-
-    const offerWithFormattedServices = formatAvailableServices(
-      offer,
-      priceFormatters
-    );
-    setOffer(offerWithFormattedServices);
-  };
-
-  const updateSeatMaps = (seatMaps: SeatMap[]) => {
-    const formattedSeatMaps = formatSeatMaps(seatMaps, priceFormatters.seats);
-    setSeatMaps(formattedSeatMaps);
-  };
-
-  React.useEffect(() => {
-    // whenever the props change, we'll set the sentry context to thse values
-    // so that we can see them in the sentry logs and better support the users of the component library
-    Sentry.setContext("props", {
-      "props.services": props.services,
-      "props.passengers.length": (props as any).passengers.length,
-      "props.offer_id": (props as any).offer_id,
-      "props.client_key": (props as any).client_key,
-      "props.offer?.id": (props as any).offer?.id,
-      "props.seat_maps?.[0]?.id": (props as any).seat_maps?.[0]?.id,
-    });
-
-    if (isPropsWithClientKeyAndOfferId || isPropsWithOfferIdForFixture) {
-      retrieveOffer(
-        props.offer_id,
-        !isPropsWithOfferIdForFixture ? props.client_key : null,
-        setError,
-        setIsOfferLoading,
-        (offer) => {
-          updateOffer(offer);
-
-          if (offer.passengers.length !== passengers.length) {
-            throw new Error(
-              `The number of passengers given to \`duffel-ancillaries\` (${props.passengers.length}) doesn't match ` +
-                `the number of passengers on the given offer (${offer.passengers.length}).`
-            );
-          }
-
-          if (isPropsWithOfferIdForFixture) {
-            // There's no way the component users will know the passenger IDs for the fixture offer
-            // so we'll need to add them here
-            setPassengers(
-              props.passengers.map((passenger, index) => ({
-                ...passenger,
-                id: offer.passengers[index].id,
-              }))
-            );
-          }
-        }
-      );
-    }
-
-    if (shouldRetrieveSeatMaps) {
-      retrieveSeatMaps(
-        isPropsWithClientKeyAndOfferId || isPropsWithOfferIdForFixture
-          ? props.offer_id
-          : props.offer.id,
-        !isPropsWithOfferIdForFixture ? props.client_key : null,
-        () => updateSeatMaps([]),
-        setIsSeatMapLoading,
-        updateSeatMaps
-      );
-    }
-
-    if (isPropsWithOfferAndClientKey) {
-      updateOffer(props.offer);
-    }
-
-    if (isPropsWithOfferAndSeatMaps) {
-      updateOffer(props.offer);
-      updateSeatMaps(props.seat_maps);
-    }
-  }, [
-    // `as any` is needed here because the list
-    // of dependencies is different for each combination of props.
-    // To satisfy typescript, we'd need to conditionally assign
-    // the dependencies to the hook after checking its type,
-    // however that is not possible in a react hook.
-    (props as any).offer_id,
-    (props as any).client_key,
-    (props as any).offer?.id,
-    (props as any).seat_maps?.[0]?.id,
-  ]);
-
-  React.useEffect(() => {
-    if (!offer) return;
-
-    const createOrderPayload = compileCreateOrderPayload({
-      baggageSelectedServices,
-      seatSelectedServices,
-      cfarSelectedServices,
-      offer,
-      passengers,
-      seatMaps,
-    });
-
-    if (isPayloadComplete(createOrderPayload)) {
-      const metadata = {
-        offer_total_amount: offer.total_amount,
-        offer_total_currency: offer.total_currency,
-        offer_tax_amount: offer.tax_amount,
-        offer_tax_currency: offer.tax_currency,
-        baggage_services: baggageSelectedServices,
-        seat_services: seatSelectedServices,
-        cancel_for_any_reason_services: cfarSelectedServices,
-      };
-
-      logGroup("Payload ready", {
-        "Order creation payload": createOrderPayload,
-        "Services metadata": metadata,
-      });
-
-      props.onPayloadReady(createOrderPayload, metadata);
-    }
-  }, [baggageSelectedServices, seatSelectedServices, cfarSelectedServices]);
-
-  if (!areDuffelAncillariesPropsValid(props)) {
-    return null;
-  }
-
-  const nonIdealStateHeight = `${
-    // 72 (card height) + 32 gap between cards
-    72 * props.services.length + 32 * (props.services.length - 1)
-  }px`;
-
-  const duffelComponentsStyle = {
-    // Adding inline styles here to avoid the cards jumping down
-    // before the css is loaded duet to the missing "row gap".
-    display: "flex",
-    width: "100%",
-    flexDirection: "column",
-    rowGap: "12px",
-    ...(props.styles?.accentColor && {
-      "--ACCENT": props.styles.accentColor,
-    }),
-    ...(props.styles?.accentColor &&
-      hasHighLuminance(props.styles.accentColor) && {
-        "--SECONDARY": "var(--GREY-900)",
-        "--TERTIARY": "var(--GREY-400)",
-      }),
-    ...(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;
-
-  const state = {
-    isOfferLoading,
-    isSeatMapLoading,
-    baggageSelectedServices,
-    seatSelectedServices,
-    cfarSelectedServices,
-    offer,
-    seatMaps,
-    error,
-  };
-
-  logGroup("Component's internal state:", state);
-
-  return (
-    <>
-      <link rel="stylesheet" href={hrefToComponentStyles}></link>
-
-      <div className="duffel-components" style={duffelComponentsStyle}>
-        <ErrorBoundary>
-          {error && (
-            <FetchOfferErrorState
-              height={nonIdealStateHeight}
-              message={error}
-            />
-          )}
-
-          {!error &&
-            props.services.map((ancillaryName) => {
-              if (ancillaryName === "bags")
-                return (
-                  <BaggageSelectionCard
-                    key="bags"
-                    isLoading={isOfferLoading}
-                    offer={offer}
-                    passengers={passengers}
-                    selectedServices={baggageSelectedServices}
-                    setSelectedServices={setBaggageSelectedServices}
-                  />
-                );
-
-              if (ancillaryName === "seats")
-                return (
-                  <SeatSelectionCard
-                    key="seats"
-                    isLoading={isOfferLoading || isSeatMapLoading}
-                    seatMaps={seatMaps}
-                    offer={offer}
-                    passengers={passengers}
-                    selectedServices={seatSelectedServices}
-                    setSelectedServices={setSeatSelectedServices}
-                  />
-                );
-
-              if (ancillaryName === "cancel_for_any_reason")
-                return (
-                  <CfarSelectionCard
-                    key="cancel_for_any_reason"
-                    isLoading={isOfferLoading}
-                    offer={offer}
-                    selectedServices={cfarSelectedServices}
-                    setSelectedServices={setCfarSelectedServices}
-                  />
-                );
-            })}
-        </ErrorBoundary>
-      </div>
-    </>
-  );
-};

package/src/components/DuffelAncillaries/DuffelAncillariesCustomElement.tsx

@@ -1,124 +0,0 @@
-import { createRoot, Root } from "react-dom/client";
-import { CreateOrderPayload } from "../../types/CreateOrderPayload";
-import {
-  DuffelAncillariesPropsWithClientKeyAndOfferId,
-  DuffelAncillariesPropsWithOfferIdForFixture,
-  DuffelAncillariesPropsWithOffersAndSeatMaps,
-  DuffelAncillariesPropWithOfferAndClientKey,
-  OnPayloadReady,
-  OnPayloadReadyMetadata,
-} from "../../types/DuffelAncillariesProps";
-import { DuffelAncillaries } from "./DuffelAncillaries";
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      "duffel-ancillaries": React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>,
-        HTMLElement
-      >;
-    }
-  }
-}
-
-const CUSTOM_ELEMENT_TAG = "duffel-ancillaries";
-
-// A bit reptitive but typescript is not clever enough
-// to infer the correct type if we just use
-// `Omit<DuffelAncillariesProps, 'onPayloadReady'>`
-type DuffelAncillariesCustomElementRenderArguments =
-  | Omit<DuffelAncillariesPropsWithOfferIdForFixture, "onPayloadReady">
-  | Omit<DuffelAncillariesPropsWithClientKeyAndOfferId, "onPayloadReady">
-  | Omit<DuffelAncillariesPropWithOfferAndClientKey, "onPayloadReady">
-  | Omit<DuffelAncillariesPropsWithOffersAndSeatMaps, "onPayloadReady">;
-
-class DuffelAncillariesCustomElement 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.attachShadow({ mode: "open" }).appendChild(container);
-
-    this.root = createRoot(container);
-  }
-
-  /**
-   * When this function is called, it will render/re-render
-   * the `DuffelAncillaries` component with the given props.
-   */
-  public render(withProps: DuffelAncillariesCustomElementRenderArguments) {
-    if (!this.root) {
-      throw "It was not possible to render `duffel-ancillaries` because `this.root` is missing.";
-    }
-
-    this.root.render(
-      <DuffelAncillaries
-        {...withProps}
-        onPayloadReady={(data, metadata) => {
-          this.dispatchEvent(
-            new CustomEvent("onPayloadReady", {
-              detail: { data, metadata },
-              composed: true,
-            })
-          );
-        }}
-      />
-    );
-  }
-}
-
-window.customElements.get(CUSTOM_ELEMENT_TAG) ||
-  window.customElements.define(
-    CUSTOM_ELEMENT_TAG,
-    DuffelAncillariesCustomElement
-  );
-
-function tryToGetDuffelAncillariesCustomElement(
-  caller: string
-): DuffelAncillariesCustomElement {
-  const element =
-    document.querySelector<DuffelAncillariesCustomElement>(CUSTOM_ELEMENT_TAG);
-  if (!element) {
-    throw new Error(
-      `Could not find duffel-ancillaries element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
-    );
-  }
-  return element;
-}
-
-export function renderDuffelAncillariesCustomElement(
-  props: DuffelAncillariesCustomElementRenderArguments
-) {
-  const element = tryToGetDuffelAncillariesCustomElement(
-    "renderDuffelAncillariesCustomElement"
-  );
-  element.render(props);
-}
-
-type OnPayloadReadyCustomEvent = CustomEvent<{
-  data: CreateOrderPayload;
-  metadata: OnPayloadReadyMetadata;
-}>;
-
-export function onDuffelAncillariesPayloadReady(
-  onPayloadReady: OnPayloadReady
-) {
-  const element = tryToGetDuffelAncillariesCustomElement(
-    "onDuffelAncillariesPayloadReady"
-  );
-  const eventListener = (event: OnPayloadReadyCustomEvent) => {
-    onPayloadReady(event.detail.data, event.detail.metadata);
-  };
-
-  // 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);
-}