@duffel/components 3.0.0-canary → 3.0.0

package/src/lib/logging.ts

@@ -1,4 +1,14 @@
-import { createContext, useContext } from "react";
+import * as Sentry from "@sentry/browser";
+
+const MESSAGE_PREFIX = "[Duffel Ancillaries] ";
+const LOCAL_STORAGE_KEY = "duffel-ancillaries-logger-state";
+let LOG_INITIALISED = false;
+
+const storeLoggerState = (shouldLog: boolean) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, shouldLog.toString());
+};
+
+const shouldLog = () => localStorage.getItem(LOCAL_STORAGE_KEY) === "true";
 
 /**
  * The functions in this file are used to enable logging.
@@ -25,36 +35,37 @@ import { createContext, useContext } from "react";
  * 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`
+const initializeLogger = (debugMode: boolean): void => {
+  storeLoggerState(debugMode);
+  if (debugMode && !LOG_INITIALISED) {
+    // eslint-disable-next-line
+    console.info(
+      MESSAGE_PREFIX,
+      `\n\nDebug mode is enabled. Information about your setup will be printed to the console.
+    
+    If you do not want to enable debug mode (for example in a production environment), pass "debug: false" when initializing this component.
+    
+    Learn more about the Ancillaries component:
+    http://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,
-  };
+  LOG_INITIALISED = true;
 };
 
-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);
+  if (shouldLog()) {
+    // eslint-disable-next-line
+    console.info(MESSAGE_PREFIX, message);
+  } else {
+    Sentry.addBreadcrumb({
+      category: "log",
+      message,
+    });
+  }
 };
 
 /**
@@ -77,8 +88,6 @@ function logGroup(
   groupName: string,
   messagesOrObject: any[] | { [key: string]: any }
 ): void {
-  console.groupCollapsed(MESSAGE_PREFIX, groupName);
-
   let transformedMessagesOrObject = [];
   if (Array.isArray(messagesOrObject)) {
     transformedMessagesOrObject = messagesOrObject;
@@ -87,14 +96,25 @@ function logGroup(
       ([key, value]) => ({ property: key, value })
     );
   }
-  transformedMessagesOrObject.forEach((message) => {
-    console.log(message);
-  });
 
-  console.groupEnd();
-}
+  if (shouldLog()) {
+    // eslint-disable-next-line
+    console.groupCollapsed(MESSAGE_PREFIX, groupName);
 
-const LogContext = createContext(initializeLogger(false));
-const useLog = () => useContext(LogContext);
+    transformedMessagesOrObject.forEach((message) => {
+      // eslint-disable-next-line
+      console.info(message);
+    });
+
+    // eslint-disable-next-line
+    console.groupEnd();
+  } else {
+    Sentry.addBreadcrumb({
+      category: "log.group",
+      message: groupName,
+      data: messagesOrObject,
+    });
+  }
+}
 
-export { LogContext, initializeLogger, useLog };
+export { initializeLogger, logGroup, log };

package/src/lib/retrieveOffer.ts

@@ -1,5 +1,6 @@
 import { Offer } from "../types/Offer";
 import { captureErrorInSentry } from "./captureErrorInSentry";
+import { isErrorResponse } from "./fetchFromDuffelAPI";
 import { importFromOfferFixtures } from "./fetchFromFixtures";
 import { isFixtureOfferId } from "./isFixtureOfferId";
 import { retrieveOfferFromDuffelAPI } from "./retrieveOfferFromDuffelAPI";
@@ -24,24 +25,28 @@ export async function retrieveOffer(
 
   if (!client_key) {
     throw new Error(
-      "Attemptted to retrieve seat maps but the client key is missing"
+      "Attemptted to retrieve seat maps but the client key is missing."
     );
   }
 
   try {
     const data = await retrieveOfferFromDuffelAPI(offer_id, client_key);
-    return onOfferReady(data);
+    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")) {
+      if (error.message.includes("Load failed")) {
         message = "The Duffel API is not available. Please try again later.";
       }
-      captureErrorInSentry(error, { offer_id });
-    } else {
-      captureErrorInSentry(new Error(message), { offer_id });
+    } else if (isErrorResponse(error)) {
+      if (error.status === 404) {
+        message =
+          "The offer you are looking for does not exist or has expired.";
+      }
     }
+
+    captureErrorInSentry(new Error(message));
     onError(message);
   } finally {
     setIsLoading(false);

package/src/lib/retrieveSeatMaps.ts

@@ -1,5 +1,6 @@
 import { SeatMap } from "../types/SeatMap";
 import { captureErrorInSentry } from "./captureErrorInSentry";
+import { isErrorResponse } from "./fetchFromDuffelAPI";
 import { importFromSeatMapsFixtures } from "./fetchFromFixtures";
 import { isFixtureOfferId } from "./isFixtureOfferId";
 import { retrieveSeatMapsFromDuffelAPI } from "./retrieveSeatMapsFromDuffelAPI";
@@ -7,7 +8,7 @@ import { retrieveSeatMapsFromDuffelAPI } from "./retrieveSeatMapsFromDuffelAPI";
 export async function retrieveSeatMaps(
   offer_id: string,
   client_key: string | null,
-  onError: (error: string) => void,
+  onError: () => void,
   setIsLoading: (isLoading: boolean) => void,
   onSeatMapReady: (seatMaps: SeatMap[]) => void
 ) {
@@ -25,7 +26,7 @@ export async function retrieveSeatMaps(
 
   if (!client_key) {
     throw new Error(
-      "Attemptted to retrieve seat maps but the client key is missing"
+      "Attemptted to retrieve seat maps but the client key is missing."
     );
   }
 
@@ -33,17 +34,21 @@ export async function retrieveSeatMaps(
     const data = await retrieveSeatMapsFromDuffelAPI(offer_id, client_key);
     onSeatMapReady(data);
   } catch (error) {
-    let message = "An unknown error occurred while retrieving the offer.";
+    let message = "An unknown error occurred while retrieving the seat maps.";
+
     if (error instanceof Error) {
       message = error.message;
-      if (error.message.includes("ECONNREFUSED")) {
+      if (error.message.includes("Load failed")) {
         message = "The Duffel API is not available. Please try again later.";
       }
-      captureErrorInSentry(error, { offer_id });
-    } else {
-      captureErrorInSentry(new Error(message), { offer_id });
+    } else if (isErrorResponse(error)) {
+      message =
+        error.data.errors[0]?.message ||
+        "Received an unknown error from the Duffel API.";
     }
-    onError(message);
+
+    captureErrorInSentry(new Error(message));
+    onError();
   } finally {
     setIsLoading(false);
   }

package/src/stories/BaggageSelectionModalHeader.stories.tsx

@@ -1,5 +1,5 @@
-import { BaggageSelectionModalHeader } from "@components/bags/BaggageSelectionModalHeader";
 import type { Meta, StoryObj } from "@storybook/react";
+import { BaggageSelectionModalHeader } from "../components/DuffelAncillaries/bags/BaggageSelectionModalHeader";
 import { OfferSliceSegment } from "../types/Offer";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const offer = require("../fixtures/offers/off_0000AUde3KwTztSRK1cznH.json");

package/src/stories/Button.stories.tsx

@@ -1,5 +1,6 @@
-import { Button, ButtonProps } from "@components/Button";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button, ButtonProps } from "../components/shared/Button";
 
 export default {
   title: "Button",
@@ -47,7 +48,9 @@ export const WithSize48: ButtonStory = {
   args: { ...defaultProps, size: 48, iconBefore: "autorenew" },
 };
 
-export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+const AccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
   <div
     style={
       {
@@ -55,6 +58,12 @@ export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
       } as any
     }
   >
-    <Button {...defaultProps} />
+    {children}
   </div>
 );
+
+export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+  <AccentColorWrapper>
+    <Button {...defaultProps} />
+  </AccentColorWrapper>
+);

package/src/stories/DuffelAncillaries.stories.tsx

@@ -1,5 +1,5 @@
-import { DuffelAncillaries } from "@components/DuffelAncillaries";
 import type { Meta, StoryObj } from "@storybook/react";
+import { DuffelAncillaries } from "../components/DuffelAncillaries/DuffelAncillaries";
 import mockPassengers from "../fixtures/passengers/mock_passengers";
 import { DuffelAncillariesPropsWithOffersAndSeatMaps } from "../types/DuffelAncillariesProps";
 import { Offer } from "../types/Offer";

package/src/stories/DuffelPayments.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DuffelPayments,
+  DuffelPaymentsProps,
+} from "../components/DuffelPayments/DuffelPayments";
+
+export default {
+  title: "DuffelPayments",
+  component: DuffelPayments,
+} as Meta;
+
+type DuffelPaymentsStory = StoryObj<typeof DuffelPayments>;
+
+const defaultProps: DuffelPaymentsProps = {
+  paymentIntentClientToken:
+    "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=",
+  onSuccessfulPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  onFailedPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+};
+
+export const Default: DuffelPaymentsStory = {
+  args: defaultProps,
+};
+
+export const WithCustomStyles: DuffelPaymentsStory = {
+  args: {
+    ...defaultProps,
+    styles: {
+      accentColor: "29, 78, 216",
+      fontFamily: "monospace",
+      buttonCornerRadius: "15px",
+    },
+  },
+};

package/src/stories/Icon.stories.tsx

@@ -1,12 +1,13 @@
-import { Icon, ICON_MAP, IconName } from "@components/Icon";
 import { Meta } from "@storybook/react";
+import React from "react";
+import { Icon, ICON_MAP, IconName } from "../components/shared/Icon";
 
 export default {
   title: "Icon",
   component: Icon,
 } as Meta;
 
-export const FullList = () => (
+export const FullList: React.FC = () => (
   <div
     style={{
       display: "grid",

package/src/stories/IconButton.stories.tsx

@@ -1,5 +1,5 @@
-import { IconButton, IconButtonProps } from "@components/IconButton";
 import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton, IconButtonProps } from "../components/shared/IconButton";
 
 export default {
   title: "IconButton",

package/src/styles/components/DuffelPayments.css

@@ -0,0 +1,42 @@
+.card-payment__container {
+  width: 480px;
+  height: auto;
+  max-width: 480px;
+  box-sizing: border-box;
+  margin: var(--SPACING-XS-3);
+}
+
+.card-payment__container--invalid {
+  margin-top: var(--SPACING-SM-1);
+  font-size: var(--FONT-SIZES-C2);
+  color: var(--RED);
+}
+
+.card-payment__container--invalid {
+  height: 16px;
+}
+
+.card-details {
+  background-color: rgb(var(--WHITE));
+  border: 1px solid var(--GREY-200);
+  border-radius: 5px;
+  padding: var(--SPACING-SM-2);
+  width: auto;
+}
+
+.card-details.StripeElement--invalid {
+  border: 1px solid var(--RED);
+}
+
+.card-payment__pay-button {
+  width: 100%;
+  margin-top: var(--SPACING-SM-3);
+}
+
+.card-payment--in-progress {
+  display: block;
+  z-index: 3;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}

package/src/styles/components/Modal.css

@@ -27,7 +27,8 @@
 
 .modal--open,
 .modal--open .modal--content {
-  opacity: 1;
+  /* important needed to override inline style */
+  opacity: 1 !important;
   pointer-events: all;
 }
 

package/src/styles/global.css

@@ -12,6 +12,7 @@
 @import "./components/CfarSelectionModal.css";
 @import "./components/Card.css";
 @import "./components/Counter.css";
+@import "./components/DuffelPayments.css";
 @import "./components/IconButton.css";
 @import "./components/Legend.css";
 @import "./components/Loader.css";

package/src/tests/components/DuffelAncillaries.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from "@testing-library/react";
 import React from "react";
-import { DuffelAncillaries } from "../../components/DuffelAncillaries";
+import { DuffelAncillaries } from "../../components/DuffelAncillaries/DuffelAncillaries";
 import mockPassengers from "../../fixtures/passengers/mock_passengers";
 import {
   DuffelAncillariesPropsWithOffersAndSeatMaps,

package/src/tests/lib/createPriceFormatters.test.tsx

@@ -1,4 +1,4 @@
-import { createPriceFormatters } from "@lib/createPriceFormatters";
+import { createPriceFormatters } from "../../lib/createPriceFormatters";
 
 describe("createPriceFormatters", () => {
   it("should return an empty object if neither markup nor priceFormatters are supplied", () => {

package/src/tests/lib/formatAvailableServices.test.tsx

@@ -1,4 +1,4 @@
-import { formatAvailableServices } from "@lib/formatAvailableServices";
+import { formatAvailableServices } from "../../lib/formatAvailableServices";
 import { OfferAvailableServiceBaggage } from "../../types/Offer";
 
 /* eslint-disable @typescript-eslint/no-var-requires */

package/src/tests/lib/formatSeatMaps.test.tsx

@@ -1,5 +1,5 @@
-import { formatSeatMaps } from "@lib/formatSeatMaps";
-import { getFirstSeatElementMatchingCriteria } from "@lib/getFirstSeatElementMatchingCriteria";
+import { formatSeatMaps } from "../../lib/formatSeatMaps";
+import { getFirstSeatElementMatchingCriteria } from "../../lib/getFirstSeatElementMatchingCriteria";
 import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
 
 /* eslint-disable @typescript-eslint/no-var-requires */

package/src/tests/lib/getCurrencyForServices.test.tsx

@@ -1,4 +1,4 @@
-import { getCurrencyForServices } from "@lib/getCurrencyForServices";
+import { getCurrencyForServices } from "../../lib/getCurrencyForServices";
 import { Offer } from "../../types/Offer";
 
 describe("getCurrencyForServices", () => {

package/src/tests/lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected.test.ts

@@ -1,4 +1,4 @@
-import { hasServiceOfSameMetadataTypeAlreadyBeenSelected } from "@lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected";
+import { hasServiceOfSameMetadataTypeAlreadyBeenSelected } from "../../lib/hasServiceOfSameMetadataTypeAlreadyBeenSelected";
 import { CreateOrderPayloadService } from "../../types/CreateOrderPayload";
 import { OfferAvailableBaggageService } from "../../types/Offer";
 

package/src/tests/lib/logging.test.tsx

@@ -1,32 +1,32 @@
-import { initializeLogger } from "@lib/logging";
+import { initializeLogger, log, logGroup } from "../../lib/logging";
 
 const consoleSpies = {
-  log: jest.spyOn(console, "log"),
+  log: jest.spyOn(console, "info"),
   groupCollapsed: jest.spyOn(console, "groupCollapsed"),
   groupEnd: jest.spyOn(console, "groupEnd"),
 };
 
-describe("initializeLogger", () => {
+describe("logging", () => {
   it("should return functions that do nothing when debugMode is false", () => {
-    const logger = initializeLogger(false);
-    logger.log("This should not be logged");
+    initializeLogger(false);
+    log("This should not be logged");
     expect(consoleSpies.log).not.toHaveBeenCalled();
   });
 
   it("should return functions that log a message when debugMode is true", () => {
-    const logger = initializeLogger(true);
-    logger.log("This should be logged");
+    initializeLogger(true);
+    log("This should be logged");
 
-    // Twice because initializeLogger logs a message when it's called,
-    // and then the message we're testing.
-    expect(consoleSpies.log).toHaveBeenCalledTimes(2);
+    // Once because initializeLogger was initialised on the test above
+    // And so, the initialisation message would not show up twice.
+    expect(consoleSpies.log).toHaveBeenCalledTimes(1);
 
-    logger.logGroup("This should be logged", ["one", "two"]);
+    logGroup("This should be logged", ["one", "two"]);
     expect(consoleSpies.groupCollapsed).toHaveBeenCalledTimes(1);
     expect(consoleSpies.groupEnd).toHaveBeenCalledTimes(1);
 
-    // Four times: once for the initializeLogger message, once for the
-    // earlier message, and twice for the array passed to logGroup.
-    expect(consoleSpies.log).toHaveBeenCalledTimes(4);
+    // once for the call to `log` above and then
+    // twice for the array passed to logGroup
+    expect(consoleSpies.log).toHaveBeenCalledTimes(3);
   });
 });

package/src/tests/lib/moneyStringFormatter.test.tsx

@@ -1,4 +1,4 @@
-import { moneyStringFormatter } from "@lib/moneyStringFormatter";
+import { moneyStringFormatter } from "../../lib/moneyStringFormatter";
 
 describe("moneyStringFormatter", () => {
   it("should format known currencies correctly", () => {

package/src/tests/lib/validateProps.test.tsx

@@ -4,7 +4,7 @@
  * that we can test functions with invalid props.
  */
 
-import { hasCommonRequiredProps } from "@lib/validateProps";
+import { hasCommonRequiredProps } from "../../lib/validateProps";
 import { Ancillaries } from "../../types/DuffelAncillariesProps";
 
 describe("hasCommonRequiredProps", () => {

package/src/types/DuffelAncillariesProps.ts

@@ -75,7 +75,7 @@ export type DuffelAncillariesPriceFormatterForCancelForAnyReason = (
   amount: number,
   currency: string,
   service: OfferAvailableServiceCancelForAnyReason
-) => { amount: number; currency: string };
+) => { amount: number; currency?: string };
 
 export interface DuffelAncillariesPriceFormatters {
   bags?: DuffelAncillariesPriceFormatterForBags;

package/tsconfig.json

@@ -42,7 +42,7 @@
   "exclude": [
     "node_modules",
     "**/**.css.js",
-    "./dist/**/*",
+    "./cdn-dist/**/*",
     "./react-dist/**/*",
     "./src/examples/**/*",
     "./src/stories/**/*",