@duffel/components 3.1.3 → 3.1.4

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

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

@@ -1,101 +0,0 @@
-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) => {
-          // We need to do a deep copy here because otherwise the modal changing the quantity
-          // will affect the selected services regardless of whether it's saved or not
-          const newSelectedServicesDeepCopy = JSON.parse(
-            JSON.stringify(newSelectedServices)
-          );
-          setSelectedServices(newSelectedServicesDeepCopy);
-          setIsOpen(false);
-        }}
-        selectedServices={selectedServices}
-      />
-    </>
-  );
-};

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

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