@duffel/components 2.7.20 → 3.0.0

package/src/components/DuffelAncillaries/DuffelAncillaries.tsx

@@ -0,0 +1,344 @@
+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 { 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?.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

@@ -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/DuffelAncillaries/bags/BaggageSelectionCard.tsx

@@ -0,0 +1,96 @@
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
+import { getCurrencyForServices } from "@lib/getCurrencyForServices";
+import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
+import { getTotalQuantity } from "@lib/getTotalQuantity";
+import { hasService } from "@lib/hasService";
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import { withPlural } from "@lib/withPlural";
+import React from "react";
+import {
+  CreateOrderPayload,
+  CreateOrderPayloadServices,
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { Card } from "../Card";
+import { BaggageSelectionModal } from "./BaggageSelectionModal";
+
+export interface BaggageSelectionCardProps {
+  isLoading: boolean;
+  offer?: Offer;
+  passengers: CreateOrderPayload["passengers"];
+  selectedServices: CreateOrderPayloadServices;
+  setSelectedServices: (selectedServices: CreateOrderPayloadServices) => void;
+}
+
+export const BaggageSelectionCard: React.FC<BaggageSelectionCardProps> = ({
+  isLoading,
+  offer,
+  passengers,
+  selectedServices,
+  setSelectedServices,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const containsBaggageService = hasService(offer, "baggage");
+  const totalQuantity = getTotalQuantity(selectedServices);
+  const isBaggageAdded = totalQuantity > 0;
+
+  const totalAmount = getTotalAmountForServices(offer!, selectedServices);
+
+  let currencyToUse = offer?.base_currency || "";
+  if (containsBaggageService) {
+    currencyToUse = getCurrencyForServices(offer!, "baggage");
+  }
+
+  const totalAmountFormatted = offer
+    ? moneyStringFormatter(currencyToUse)(totalAmount)
+    : "0";
+
+  const copy =
+    containsBaggageService && isBaggageAdded
+      ? `${withPlural(
+          totalQuantity,
+          "bag",
+          "bags"
+        )} added for ${totalAmountFormatted}`
+      : "Add any extra baggage you need for your trip";
+
+  return (
+    <>
+      <Card
+        buttonTitle="Select extra baggage"
+        title="Extra baggage"
+        copy={copy}
+        icon="cabin_bag"
+        onClick={containsBaggageService ? () => setIsOpen(true) : null}
+        isLoading={isLoading}
+        disabled={!isLoading && !containsBaggageService}
+        isSelected={isBaggageAdded}
+      >
+        {isLoading && (
+          <Stamp color="var(--GREY-900)" backgroundColor="var(--GREY-100)">
+            Loading
+            <AnimatedLoaderEllipsis />
+          </Stamp>
+        )}
+        {!isLoading && !containsBaggageService && (
+          <Stamp color="var(--GREY-700)" backgroundColor="var(--GREY-200)">
+            Not available
+          </Stamp>
+        )}
+      </Card>
+
+      <BaggageSelectionModal
+        isOpen={Boolean(isOpen && offer)}
+        offer={offer}
+        passengers={passengers}
+        onClose={(newSelectedServices) => {
+          setSelectedServices(newSelectedServices);
+          setIsOpen(false);
+        }}
+        selectedServices={selectedServices}
+      />
+    </>
+  );
+};

package/src/components/DuffelAncillaries/bags/BaggageSelectionController.tsx

@@ -0,0 +1,88 @@
+import { getBaggageServiceDescription } from "@lib/getBaggageServiceDescription";
+import { hasServiceOfSameMetadataTypeAlreadyBeenSelected } from "@lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected";
+import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import React from "react";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceBaggage } from "../../../types/Offer";
+import { Counter } from "../Counter";
+
+interface BaggageSelectionControllerProps {
+  segmentId: string;
+  passengerId: string;
+  availableService: OfferAvailableServiceBaggage;
+  selectedServices: CreateOrderPayloadServices;
+  quantity: number;
+  onQuantityChanged: (quantity: number) => void;
+}
+
+export const BaggageSelectionController: React.FC<
+  BaggageSelectionControllerProps
+> = ({
+  segmentId,
+  passengerId,
+  availableService,
+  quantity,
+  onQuantityChanged,
+  selectedServices,
+}) => {
+  const serviceName =
+    availableService.metadata.type === "carry_on" ? "Cabin bag" : "Checked bag";
+
+  const servicePrice = moneyStringFormatter(availableService.total_currency)(
+    +availableService.total_amount
+  );
+  const serviceDescription = getBaggageServiceDescription(
+    availableService.metadata
+  );
+
+  const shouldDisableController =
+    hasServiceOfSameMetadataTypeAlreadyBeenSelected(
+      selectedServices,
+      segmentId,
+      passengerId,
+      availableService
+    );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <div>
+        <p style={{ margin: 0 }} className="p2--regular">
+          {serviceName}
+          <span
+            style={{
+              marginInline: "4px",
+              color: "var(--GREY-400)",
+            }}
+          >
+            •
+          </span>
+          <span
+            className="p2--semibold"
+            data-testid={`price-label--${availableService.id}--${passengerId}`}
+          >
+            {servicePrice}
+          </span>
+        </p>
+        <p
+          style={{ margin: 0, color: "var(--GREY-600)" }}
+          className="p3--regular"
+        >
+          {serviceDescription}
+        </p>
+      </div>
+      <Counter
+        id={`counter--${availableService.id}--${passengerId}`}
+        min={0}
+        value={quantity}
+        onChange={onQuantityChanged}
+        max={shouldDisableController ? 0 : availableService.maximum_quantity}
+      />
+    </div>
+  );
+};