@duffel/components 2.7.19 → 3.0.0-canary

package/src/lib/getServicePriceMapById.ts

@@ -0,0 +1,20 @@
+import { OfferAvailableService } from "../types/Offer";
+
+export type ServicePriceMapById = Record<
+  OfferAvailableService["id"],
+  Pick<OfferAvailableService, "total_amount" | "total_currency">
+>;
+
+export const getServicePriceMapById = (
+  availableServices: OfferAvailableService[]
+): ServicePriceMapById =>
+  availableServices.reduce(
+    (all, { id, total_amount, total_currency }) => ({
+      [id]: {
+        total_amount,
+        total_currency,
+      },
+      ...all,
+    }),
+    {} as ServicePriceMapById
+  );

package/src/lib/getSymbols.ts

@@ -0,0 +1,22 @@
+import {
+  SeatMapCabin,
+  SeatMapCabinRowSectionElementAmenity,
+} from "../types/SeatMap";
+
+export const getSymbols = (
+  cabins: SeatMapCabin[]
+): Set<SeatMapCabinRowSectionElementAmenity> => {
+  const results: Set<SeatMapCabinRowSectionElementAmenity> = new Set();
+  for (const cabin of cabins) {
+    for (const row of cabin.rows) {
+      for (const section of row.sections) {
+        for (const element of section.elements) {
+          if (element.type !== "seat" && element.type !== "empty") {
+            results.add(element.type);
+          }
+        }
+      }
+    }
+  }
+  return results;
+};

package/src/lib/getTotalAmountForServices.ts

@@ -0,0 +1,72 @@
+import { CreateOrderPayloadServices } from "../types/CreateOrderPayload";
+import { Offer } from "../types/Offer";
+import { SeatMap } from "../types/SeatMap";
+import { captureErrorInSentry } from "./captureErrorInSentry";
+import {
+  ServicePriceMapById,
+  getServicePriceMapById,
+} from "./getServicePriceMapById";
+
+export const getTotalAmountForServices = (
+  offer: Offer,
+  selectedServices: CreateOrderPayloadServices,
+  seatMaps?: SeatMap[]
+): number => {
+  if (!offer || selectedServices.length === 0) return 0;
+  const servicePriceMap = getServicePriceMapById(offer.available_services);
+  return getTotalAmountForServicesWithPriceMap(
+    servicePriceMap,
+    selectedServices,
+    seatMaps
+  );
+};
+
+export const getTotalAmountForServicesWithPriceMap = (
+  servicePriceMap: ServicePriceMapById,
+  selectedServices: CreateOrderPayloadServices,
+  seatMaps?: SeatMap[]
+) =>
+  selectedServices.reduce(
+    (total, { quantity, id }) => {
+      let newTotal = total;
+
+      if (id in servicePriceMap) {
+        newTotal += quantity * +servicePriceMap[id].total_amount;
+      } else if (seatMaps) {
+        newTotal += quantity * getTotalAmountFromSeatMaps(id, seatMaps);
+      } else {
+        captureErrorInSentry(
+          new Error(
+            `The service id provided could not be found in neither the offer nor the seat maps. Service id: ${id}`
+          )
+        );
+      }
+
+      return newTotal;
+    },
+
+    0
+  );
+
+const getTotalAmountFromSeatMaps = (serviceId: string, seatMaps: SeatMap[]) => {
+  for (const seatMap of seatMaps) {
+    for (const cabin of seatMap.cabins) {
+      for (const row of cabin.rows) {
+        for (const section of row.sections) {
+          for (const element of section.elements) {
+            if (
+              element.type === "seat" &&
+              Array.isArray(element.available_services)
+            ) {
+              const serviceMatch = element.available_services.find(
+                (service) => service.id === serviceId
+              );
+              if (serviceMatch) return +serviceMatch.total_amount;
+            }
+          }
+        }
+      }
+    }
+  }
+  return 0;
+};

package/src/lib/getTotalQuantity.ts

@@ -0,0 +1,5 @@
+import { CreateOrderPayloadServices } from "../types/CreateOrderPayload";
+
+export const getTotalQuantity = (
+  fromSelectedServices: CreateOrderPayloadServices
+) => fromSelectedServices.reduce((total, { quantity }) => total + quantity, 0);

package/src/lib/hasService.ts

@@ -0,0 +1,24 @@
+import { Offer, OfferAvailableServiceType } from "../types/Offer";
+import { isBaggageService } from "./isBaggageService";
+import { isCancelForAnyReasonService } from "./isCancelForAnyReasonService";
+
+const checkFunctionsMap = {
+  baggage: isBaggageService,
+  cancel_for_any_reason: isCancelForAnyReasonService,
+};
+
+export const hasService = (
+  offer: Offer | undefined,
+  type: OfferAvailableServiceType
+) => {
+  const checkFunction = checkFunctionsMap[type];
+  if (!checkFunction) throw new Error(`Unknown service type: ${type}`);
+
+  return (
+    offer &&
+    Array.isArray(offer.available_services) &&
+    offer.available_services.some(
+      (service) => checkFunction(service) && service.maximum_quantity > 0
+    )
+  );
+};

package/src/lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected.ts

@@ -0,0 +1,35 @@
+import { CreateOrderPayloadServices } from "../types/CreateOrderPayload";
+import { OfferAvailableServiceBaggage } from "../types/Offer";
+
+export const hasServiceOfSameMetadataTypeAlreadyBeenSelected = (
+  selectedServices: CreateOrderPayloadServices,
+  segmentId: string,
+  passengerId: string,
+  availableService: OfferAvailableServiceBaggage
+) =>
+  selectedServices.some((selectedService) => {
+    if (selectedService.id === availableService.id) {
+      // if the selected service is the one on the counter, don't disable it
+      // the max quantity will be availableService.maximum_quantity
+      return false;
+    } else if (
+      selectedService.serviceInformation?.type !== "carry_on" &&
+      selectedService.serviceInformation?.type !== "checked"
+    ) {
+      return false;
+    } else if (selectedService.serviceInformation?.segmentId !== segmentId) {
+      // if the selected service doesn't belong to the same segment, don't disable it
+      return false;
+    } else if (
+      // if the selected service doesn't belong to the same passenger, don't disable it
+      selectedService.serviceInformation?.passengerId !== passengerId
+    ) {
+      return false;
+    } else {
+      // if this service selection controller is for the same passenger and segment, disable it
+      return (
+        selectedService.serviceInformation?.type ===
+        availableService.metadata.type
+      );
+    }
+  });

package/src/lib/hasWings.ts

@@ -0,0 +1,8 @@
+import { SeatMapCabin } from "../types/SeatMap";
+
+export const hasWings = (cabin: SeatMapCabin, rowIndex: number) =>
+  Boolean(
+    cabin.wings &&
+      cabin.wings.first_row_index <= rowIndex &&
+      cabin.wings.last_row_index >= rowIndex
+  );

package/src/lib/isBaggageService.ts

@@ -0,0 +1,8 @@
+import {
+  OfferAvailableBaggageService,
+  OfferAvailableService,
+} from "../types/Offer";
+
+export const isBaggageService = (
+  service: OfferAvailableService
+): service is OfferAvailableBaggageService => service.type === "baggage";

package/src/lib/isCancelForAnyReasonService.ts

@@ -0,0 +1,9 @@
+import {
+  OfferAvailableService,
+  OfferAvailableServiceCancelForAnyReason,
+} from "../types/Offer";
+
+export const isCancelForAnyReasonService = (
+  service: OfferAvailableService
+): service is OfferAvailableServiceCancelForAnyReason =>
+  service.type === "cancel_for_any_reason";

package/src/lib/isFixtureOfferId.ts

@@ -0,0 +1,4 @@
+import { Offer } from "../types/Offer";
+
+export const isFixtureOfferId = (offerId: Offer["id"]): boolean =>
+  offerId.startsWith("fixture_off_");

package/src/lib/isPayloadComplete.ts

@@ -0,0 +1,11 @@
+import { CreateOrderPayload } from "../types/CreateOrderPayload";
+
+export const isPayloadComplete = (
+  payload: Partial<CreateOrderPayload>
+): payload is CreateOrderPayload =>
+  "selected_offers" in payload &&
+  "passengers" in payload &&
+  "services" in payload &&
+  "payments" in payload &&
+  "type" in payload &&
+  "metadata" in payload;

package/src/lib/isSeatElement.ts

@@ -0,0 +1,10 @@
+import {
+  SeatMapCabinRowSectionElement,
+  SeatMapCabinRowSectionElementSeat,
+} from "../types/SeatMap";
+
+export function isSeatElement(
+  element: SeatMapCabinRowSectionElement
+): element is SeatMapCabinRowSectionElementSeat {
+  return element.type === "seat";
+}

package/src/lib/logging.ts

@@ -0,0 +1,100 @@
+import { createContext, useContext } from "react";
+
+/**
+ * The functions in this file are used to enable logging.
+ *
+ * Usage:
+ *
+ * In your app's outermost container, import the LogContext and wrap your app in it:
+ *
+ * ```jsx
+ * import { LogContext, initializeLogger } from '@lib/logging'
+ *
+ * const logger = initializeLogger(props.debugMode || false)
+ *
+ * <LogContext.Provider value={logger}>
+ *  ...
+ * </LogContext.Provider>
+ * ```
+ *
+ * Then in your components nested within the above container, import the useLog hook and use it:
+ *
+ * import { useLog } from '@lib/logging'
+ *
+ * const { log, logGroup } = useLog()
+ * log('This is a log message')
+ * logGroup('These messages will be grouped together', ['This is a log message', 'This is another log message'])
+ */
+
+const initializeLogger = (debugMode: boolean) => {
+  if (debugMode) {
+    log(
+      `\n\nDebug mode is enabled. Information about your setup will be printed to the console.\n\nIf you do not want to enable debug mode (for example in a production environment), pass "debug: false" when initializing this component.\n\nLearn more about the Ancillaries component:\nhttp://duffel.com/docs/guides/ancillaries-component`
+    );
+  }
+
+  // We return functions that do nothing because it allows consumers
+  // of this function to not have to check if the logger is enabled or not.
+  // If we returned undefined, consumers would have to do something like:
+  // if (log) { log('message') }
+  //
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const noop = () => {};
+
+  return {
+    log: debugMode ? log : noop,
+    logGroup: debugMode ? logGroup : noop,
+  };
+};
+
+const MESSAGE_PREFIX = "[Duffel Ancillaries] ";
+
+/**
+ * Log a message to the console. Messages will be prefixed with "[Duffel Ancillaries]".
+ * @param message The message to print to the console.
+ */
+const log = (message: any) => {
+  console.log(MESSAGE_PREFIX, message);
+};
+
+/**
+ * Log a series of messages to the console inside a collapsible group.
+ * @param groupName The name of the group of messages. This will be prefixed with "[Duffel Ancillaries]".
+ * @param messages An array of messages to print to the console, inside the group.
+ */
+function logGroup(groupName: string, messages: any[]): void;
+
+/**
+ * Log a series of messages to the console inside a collapsible group.
+ * @param groupName The name of the group of messages. This will be prefixed with "[Duffel Ancillaries]".
+ * @param object An object to print to the console, inside the group.
+ */
+function logGroup(groupName: string, object: { [key: string]: any }): void;
+
+// Overloaded function implementation.
+// https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads
+function logGroup(
+  groupName: string,
+  messagesOrObject: any[] | { [key: string]: any }
+): void {
+  console.groupCollapsed(MESSAGE_PREFIX, groupName);
+
+  let transformedMessagesOrObject = [];
+  if (Array.isArray(messagesOrObject)) {
+    transformedMessagesOrObject = messagesOrObject;
+  } else {
+    transformedMessagesOrObject = Object.entries(messagesOrObject).map(
+      ([key, value]) => ({ property: key, value })
+    );
+  }
+  transformedMessagesOrObject.forEach((message) => {
+    console.log(message);
+  });
+
+  console.groupEnd();
+}
+
+const LogContext = createContext(initializeLogger(false));
+const useLog = () => useContext(LogContext);
+
+export { LogContext, initializeLogger, useLog };

package/src/lib/moneyStringFormatter.ts

@@ -0,0 +1,34 @@
+/**
+ * Return a function to format a number into a money amount for a given currency
+ *
+ * @param currency The ISO-4217 currency code to be used by the formatter
+ */
+export const moneyStringFormatter = (
+  currency: string,
+  locale = "en-GB",
+  options: { [option: string]: string } = {}
+) => {
+  return (value: number) => {
+    try {
+      const formatter = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        ...options,
+      });
+      const numberFormatted = formatter.format(value);
+      const signFormatted =
+        options &&
+        options["signDisplay"] &&
+        (options["signDisplay"] === "always" ||
+          (options["signDisplay"] === "exceptZero" && value !== 0))
+          ? numberFormatted.replace(/^([+-])/, "$1 ")
+          : numberFormatted;
+
+      return signFormatted;
+    } catch (error) {
+      // If the currency is not supported by the browser, we return the value with the currency code.
+      // This allows us to support made-up currencies, like "1000 Duffel Points"
+      return `${value} ${currency}`;
+    }
+  };
+};

package/src/lib/offerIsExpired.ts

@@ -0,0 +1,5 @@
+import { Offer } from "../types/Offer";
+
+export const offerIsExpired = (offer: Offer) => {
+  return offer.expires_at && new Date(offer.expires_at) < new Date();
+};

package/src/lib/retrieveOffer.ts

@@ -0,0 +1,49 @@
+import { Offer } from "../types/Offer";
+import { captureErrorInSentry } from "./captureErrorInSentry";
+import { importFromOfferFixtures } from "./fetchFromFixtures";
+import { isFixtureOfferId } from "./isFixtureOfferId";
+import { retrieveOfferFromDuffelAPI } from "./retrieveOfferFromDuffelAPI";
+
+export async function retrieveOffer(
+  offer_id: string,
+  client_key: string | null,
+  onError: (error: string) => void,
+  setIsLoading: (isLoading: boolean) => void,
+  onOfferReady: (offer: Offer) => void
+) {
+  setIsLoading(true);
+  const useFixture = isFixtureOfferId(offer_id);
+  offer_id = useFixture ? offer_id.replace("fixture_", "") : offer_id;
+
+  if (useFixture) {
+    return importFromOfferFixtures(offer_id).then((offer) => {
+      setIsLoading(false);
+      onOfferReady(offer);
+    });
+  }
+
+  if (!client_key) {
+    throw new Error(
+      "Attemptted to retrieve seat maps but the client key is missing"
+    );
+  }
+
+  try {
+    const data = await retrieveOfferFromDuffelAPI(offer_id, client_key);
+    return onOfferReady(data);
+  } catch (error) {
+    let message = "An unknown error occurred while retrieving the offer.";
+    if (error instanceof Error) {
+      message = error.message;
+      if (error.message.includes("ECONNREFUSED")) {
+        message = "The Duffel API is not available. Please try again later.";
+      }
+      captureErrorInSentry(error, { offer_id });
+    } else {
+      captureErrorInSentry(new Error(message), { offer_id });
+    }
+    onError(message);
+  } finally {
+    setIsLoading(false);
+  }
+}

package/src/lib/retrieveOfferFromDuffelAPI.ts

@@ -0,0 +1,13 @@
+import { fetchFromDuffelAPI } from "./fetchFromDuffelAPI";
+
+export async function retrieveOfferFromDuffelAPI(
+  offer_id: string,
+  client_key: string
+) {
+  const getOfferResponse = await fetchFromDuffelAPI(
+    client_key,
+    `offers/${offer_id}?return_available_services=true`
+  );
+
+  return getOfferResponse.data;
+}

package/src/lib/retrieveSeatMaps.ts

@@ -0,0 +1,50 @@
+import { SeatMap } from "../types/SeatMap";
+import { captureErrorInSentry } from "./captureErrorInSentry";
+import { importFromSeatMapsFixtures } from "./fetchFromFixtures";
+import { isFixtureOfferId } from "./isFixtureOfferId";
+import { retrieveSeatMapsFromDuffelAPI } from "./retrieveSeatMapsFromDuffelAPI";
+
+export async function retrieveSeatMaps(
+  offer_id: string,
+  client_key: string | null,
+  onError: (error: string) => void,
+  setIsLoading: (isLoading: boolean) => void,
+  onSeatMapReady: (seatMaps: SeatMap[]) => void
+) {
+  setIsLoading(true);
+
+  const useFixture = isFixtureOfferId(offer_id);
+  offer_id = useFixture ? offer_id.replace("fixture_", "") : offer_id;
+
+  if (useFixture) {
+    return importFromSeatMapsFixtures(offer_id).then((seatMaps) => {
+      setIsLoading(false);
+      onSeatMapReady(seatMaps);
+    });
+  }
+
+  if (!client_key) {
+    throw new Error(
+      "Attemptted to retrieve seat maps but the client key is missing"
+    );
+  }
+
+  try {
+    const data = await retrieveSeatMapsFromDuffelAPI(offer_id, client_key);
+    onSeatMapReady(data);
+  } catch (error) {
+    let message = "An unknown error occurred while retrieving the offer.";
+    if (error instanceof Error) {
+      message = error.message;
+      if (error.message.includes("ECONNREFUSED")) {
+        message = "The Duffel API is not available. Please try again later.";
+      }
+      captureErrorInSentry(error, { offer_id });
+    } else {
+      captureErrorInSentry(new Error(message), { offer_id });
+    }
+    onError(message);
+  } finally {
+    setIsLoading(false);
+  }
+}

package/src/lib/retrieveSeatMapsFromDuffelAPI.ts

@@ -0,0 +1,13 @@
+import { fetchFromDuffelAPI } from "./fetchFromDuffelAPI";
+
+export async function retrieveSeatMapsFromDuffelAPI(
+  offer_id: string,
+  client_key: string
+) {
+  const getSeatMapResponse = await fetchFromDuffelAPI(
+    client_key,
+    `offers/${offer_id}/seat_maps`
+  );
+
+  return getSeatMapResponse.data;
+}

package/src/lib/setBodyScrollability.ts

@@ -0,0 +1,7 @@
+export const setBodyScrollability = (shouldScroll: boolean) => {
+  if (shouldScroll) {
+    document.body.style.overflow = "";
+  } else {
+    document.body.style.overflow = "hidden";
+  }
+};

package/src/lib/validateProps.ts

@@ -0,0 +1,37 @@
+import {
+  DuffelAncillariesProps,
+  DuffelAncillariesPropsWithClientKeyAndOfferId,
+  DuffelAncillariesPropsWithOfferIdForFixture,
+  DuffelAncillariesPropsWithOffersAndSeatMaps,
+  DuffelAncillariesPropWithOfferAndClientKey,
+} from "../types/DuffelAncillariesProps";
+
+export const areDuffelAncillariesPropsValid = (props: DuffelAncillariesProps) =>
+  hasCommonRequiredProps(props) &&
+  (isDuffelAncillariesPropsWithOfferIdForFixture(props) ||
+    isDuffelAncillariesPropsWithClientKeyAndOfferId(props) ||
+    isDuffelAncillariesPropsWithOfferAndSeatMaps(props) ||
+    isDuffelAncillariesPropsWithOfferAndClientKey(props));
+
+export const hasCommonRequiredProps = (props: DuffelAncillariesProps) =>
+  "onPayloadReady" in props && "passengers" in props && "services" in props;
+
+export const isDuffelAncillariesPropsWithOfferIdForFixture = (
+  props: DuffelAncillariesProps
+): props is DuffelAncillariesPropsWithOfferIdForFixture =>
+  "offer_id" in props && props.offer_id.startsWith("fixture_");
+
+export const isDuffelAncillariesPropsWithClientKeyAndOfferId = (
+  props: DuffelAncillariesProps
+): props is DuffelAncillariesPropsWithClientKeyAndOfferId =>
+  "offer_id" in props && "client_key" in props;
+
+export const isDuffelAncillariesPropsWithOfferAndSeatMaps = (
+  props: DuffelAncillariesProps
+): props is DuffelAncillariesPropsWithOffersAndSeatMaps =>
+  "offer" in props && "seat_maps" in props;
+
+export const isDuffelAncillariesPropsWithOfferAndClientKey = (
+  props: DuffelAncillariesProps
+): props is DuffelAncillariesPropWithOfferAndClientKey =>
+  "offer" in props && "client_key" in props;

package/src/lib/withPlural.ts

@@ -0,0 +1,8 @@
+export const withPlural = (
+  totalQuantity: number,
+  singular: string,
+  plural: string
+) => {
+  if (totalQuantity == 1) return `${totalQuantity} ${singular}`;
+  else return `${totalQuantity} ${plural}`;
+};

package/src/stories/BaggageSelectionModalHeader.stories.tsx

@@ -0,0 +1,21 @@
+import { BaggageSelectionModalHeader } from "@components/bags/BaggageSelectionModalHeader";
+import type { Meta, StoryObj } from "@storybook/react";
+import { OfferSliceSegment } from "../types/Offer";
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const offer = require("../fixtures/offers/off_0000AUde3KwTztSRK1cznH.json");
+
+export default {
+  title: "BaggageSelectionModalHeader",
+  component: BaggageSelectionModalHeader,
+} as Meta;
+
+type Story = StoryObj<typeof BaggageSelectionModalHeader>;
+
+export const FirstStory: Story = {
+  args: {
+    segmentCount: 2,
+    currentSegmentIndex: 0,
+    currentSegment: offer.slices[0].segments[0] as OfferSliceSegment,
+    setCurrentSegmentIndex: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  },
+};

package/src/stories/Button.stories.tsx

@@ -0,0 +1,60 @@
+import { Button, ButtonProps } from "@components/Button";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+export default {
+  title: "Button",
+  component: Button,
+} as Meta;
+
+type ButtonStory = StoryObj<typeof Button>;
+
+const defaultProps: ButtonProps = {
+  children: "Click me",
+  onClick: () => 0,
+};
+
+export const Default: ButtonStory = { args: defaultProps };
+
+export const Disabled: ButtonStory = {
+  args: { ...defaultProps, disabled: true },
+};
+
+export const WithIconBefore: ButtonStory = {
+  args: { ...defaultProps, iconBefore: "autorenew" },
+};
+
+export const WithOutlinedVariant: ButtonStory = {
+  args: { ...defaultProps, variant: "outlined" },
+};
+
+export const DisabledWithOutlinedVariant: ButtonStory = {
+  args: { ...defaultProps, variant: "outlined", disabled: true },
+};
+
+export const WithDestructiveVariant: ButtonStory = {
+  args: {
+    ...defaultProps,
+    children: "Click to delete something important",
+    variant: "destructive",
+  },
+};
+
+export const WithSize32: ButtonStory = {
+  args: { ...defaultProps, size: 32, iconBefore: "autorenew" },
+};
+
+export const WithSize48: ButtonStory = {
+  args: { ...defaultProps, size: 48, iconBefore: "autorenew" },
+};
+
+export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+  <div
+    style={
+      {
+        "--ACCENT": "29, 78, 216",
+      } as any
+    }
+  >
+    <Button {...defaultProps} />
+  </div>
+);