@duffel/components 2.7.19 → 3.0.0-canary

package/src/components/Counter.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { IconButton } from "./IconButton";
+
+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.tsx

@@ -0,0 +1,346 @@
+import { compileCreateOrderPayload } from "@lib/compileCreateOrderPayload";
+import { createPriceFormatters } from "@lib/createPriceFormatters";
+import { formatAvailableServices } from "@lib/formatAvailableServices";
+import { formatSeatMaps } from "@lib/formatSeatMaps";
+import { isPayloadComplete } from "@lib/isPayloadComplete";
+import { LogContext, initializeLogger } 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 { ErrorBoundary } from "./ErrorBoundary";
+import { FetchOfferErrorState } from "./FetchOfferErrorState";
+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) => {
+  const logger = initializeLogger(props.debug || false);
+
+  logger.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,
+        setError,
+        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,
+      };
+
+      logger.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?.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,
+  };
+
+  logger.logGroup("Component's internal state:", state);
+
+  return (
+    <>
+      <link rel="stylesheet" href={hrefToComponentStyles}></link>
+
+      <LogContext.Provider value={logger}>
+        <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>
+      </LogContext.Provider>
+    </>
+  );
+};

package/src/components/DuffelAncillariesCustomElement.tsx

@@ -0,0 +1,124 @@
+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);
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+import { captureErrorInSentry } from "@lib/captureErrorInSentry";
+import React from "react";
+import { Button } from "./Button";
+import { NonIdealState } from "./NonIdealState";
+
+export class ErrorBoundary extends React.Component<{
+  children: React.ReactNode | React.ReactNode[];
+}> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, context: Record<any, any>) {
+    // You can also log the error to an error reporting service
+    captureErrorInSentry(error, context);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <NonIdealState>
+          <p style={{ marginBlock: "0" }} className="p1--semibold">
+            We ran into an error
+          </p>
+          <p
+            className="p1--regular"
+            style={{
+              color: "var(--GREY-600)",
+              marginBlock: "12px",
+              textAlign: "center",
+            }}
+          >
+            Please try reloading. If the problem persists reach out to our
+            support team.
+          </p>
+          <div>
+            <Button
+              variant="outlined"
+              iconBefore="autorenew"
+              onClick={() => location.reload()}
+            >
+              Try again
+            </Button>
+          </div>
+        </NonIdealState>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/FetchOfferErrorState.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Button } from "./Button";
+import { NonIdealState } from "./NonIdealState";
+
+export const FetchOfferErrorState: React.FC<{
+  height: string;
+  message: string;
+}> = ({ height, message }) => (
+  <NonIdealState style={{ minHeight: height }}>
+    <p style={{ marginBlock: "0" }} className="p1--semibold">
+      Failed to load extras
+    </p>
+    <p
+      className="p2--regular"
+      style={{
+        color: "var(--GREY-600)",
+        marginBlock: "12px",
+        textAlign: "center",
+      }}
+    >
+      {message
+        ? message
+        : "Please try reloading. If the problem persists reach out to our support team."}
+    </p>
+    <div>
+      <Button
+        variant="outlined"
+        onClick={() => location.reload()}
+        iconBefore="autorenew"
+      >
+        Try again
+      </Button>
+    </div>
+  </NonIdealState>
+);