npm - @duffel/components - Versions diffs - 3.0.7-canary → 3.1.2--prototype - Mend

@duffel/components 3.0.7-canary → 3.1.2--prototype

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/src/examples/payments-just-typescript/README.md ADDED Viewed

@@ -0,0 +1,37 @@
+# payments-just-typescript example
+## TL;DR
+Start on the root of the `duffel-components` repository:
+```sh
+# build duffel-components for react env:
+yarn react-build
+# change directory to example folder
+cd src/examples/payments-just-typescript
+# cleanup last install and build
+rm -rf node_modules && rm -rf dist
+# install new version
+yarn
+# build and watch example
+yarn build
+# open example
+open src/index.html -a "Safari"
+```
+## Build duffel-components
+First, navigate to the root folder of the duffel-components repository and run `yarn react-build` to build the package. It should output a react-dist folder on the root. This folder is the one we reference on `src/examples/payments-just-typescript/package.json` dependencies under `duffel-components`
+## Install dependencies
+Once the package is built, you can cd into this directory and run `yarn` to install all dependencies. If there are changes to `react-dist` since your last install, you'll need to `rm -rf node_modules`, otherwise the updates build will not be installed.
+## Run example
+Finally, run `yarn dev` to build `src/examples/payments-just-typescript/src/index.tsx`. This will produce `src/examples/payments-just-typescript/dist` folder that is referenced by `src/examples/payments-just-typescript/src/index.html`. You can then open `src/examples/payments-just-typescript/src/index.html` on your browser to see the example up and running.

package/src/examples/payments-just-typescript/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "just-typescript",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "esbuild src/index.ts --bundle --outfile=dist/index.js"
+  },
+  "dependencies": {
+    "@types/node": "20.2.5",
+    "typescript": "5.0.4",
+    "duffel-components": "../../../../duffel-components/react-dist"
+  },
+  "devDependencies": {
+    "esbuild": "^0.17.19"
+  }
+}

package/src/examples/payments-just-typescript/src/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="https://duffel.com/images/favicon/favicon-96x96.png"
+    />
+    <script src="../dist/index.js" defer></script>
+    <title>Duffel payments component just typescript example</title>
+  </head>
+  <body>
+    <h1 style="margin-bottom: 2rem">
+      Duffel payments component just typescript example
+    </h1>
+    <duffel-payments></duffel-payments>
+  </body>
+</html>

package/src/examples/payments-just-typescript/src/index.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import {
+  onDuffelPaymentsFailedPayment,
+  onDuffelPaymentsSuccessfulPayment,
+  renderDuffelPaymentsCustomElement,
+} from "duffel-components/custom-elements";
+window.onload = () => {
+  renderDuffelPaymentsCustomElement({
+    paymentIntentClientToken:
+      "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=",
+  });
+  // eslint-disable-next-line
+  onDuffelPaymentsFailedPayment((error) => console.error(error));
+  // eslint-disable-next-line
+  onDuffelPaymentsSuccessfulPayment(() => console.log("Payment successful"));
+};

package/src/examples/react-app/src/index.tsx CHANGED Viewed

@@ -1,12 +1,10 @@
-import { DuffelAncillaries } from "duffel-components";
+import { DuffelAncillaries, DuffelPayments } from "duffel-components";
 import React from "react";
 import { createRoot } from "react-dom/client";
 const App: React.FC = () => (
-  <>
-    <h1 style={{ marginBottom: "2rem" }}>
-      Duffel ancillaries component react-app example
-    </h1>
+  <div style={{ display: "grid", gridTemplateColumns: "1fr", rowGap: "2rem" }}>
+    <h1>Duffel ancillaries component react-app example</h1>
     <DuffelAncillaries
       offer_id="fixture_off_1"
@@ -31,9 +29,16 @@ const App: React.FC = () => (
           born_on: "1942-10-17",
         },
       ]}
+      // eslint-disable-next-line
       onPayloadReady={console.log}
     />
-  </>
+    <DuffelPayments
+      paymentIntentClientToken="eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0="
+      onSuccessfulPayment={console.log}
+      onFailedPayment={console.log}
+    />
+  </div>
 );
 const rootElement = document.getElementById("root");

package/src/fixtures/offers/off_1.json CHANGED Viewed

@@ -33,16 +33,7 @@
               "fare_basis_code": "Y20LGTN2",
               "cabin_class_marketing_name": "Economy",
               "cabin_class": "economy",
-              "baggages": [
-                {
-                  "type": "checked",
-                  "quantity": 1
-                },
-                {
-                  "type": "carry_on",
-                  "quantity": 1
-                }
-              ]
+              "baggages": []
             }
           ],
           "origin_terminal": "2",

package/src/index.ts CHANGED Viewed

@@ -2,5 +2,7 @@
  * This file is the main entry point for the library -- `@duffel/components`.
  * If you'd like to expose other react components, please add them here.
  */
-export * from "./components/DuffelAncillaries";
+export * from "./components/DuffelAncillaries/DuffelAncillaries";
+export * from "./components/DuffelPayments/DuffelPayments";
+export * from "./components/PlacesLookup/PlacesLookup";
 export * from "./types";

package/src/lib/captureErrorInSentry.ts CHANGED Viewed

@@ -1,8 +1,5 @@
 import * as Sentry from "@sentry/browser";
-/* eslint-disable-next-line @typescript-eslint/no-var-requires */
-const PACKAGE_DOT_JSON = require("../../package.json");
 let hasSentryInitiated = false;
 function initiateSentry() {
   Sentry.init({
@@ -13,7 +10,7 @@ function initiateSentry() {
      * this value to allow Sentry to resolve the correct source maps when
      * processing events.
      */
-    release: `${PACKAGE_DOT_JSON.name}@${PACKAGE_DOT_JSON.version}`,
+    release: process.env.COMPONENT_VERSION,
     /**
      * List of integrations that should be installed after SDK was initialized.
@@ -36,25 +33,10 @@ function initiateSentry() {
   hasSentryInitiated = true;
 }
-export const captureErrorInSentry = (
-  error: Error,
-  context?: Record<string, any>
-) => {
+export const captureErrorInSentry = (error: Error) => {
   if (!hasSentryInitiated) {
     initiateSentry();
   }
-  Sentry.configureScope((scope) => {
-    if (error.message) {
-      scope.setFingerprint([error.message]);
-    }
-    if (context) {
-      Object.entries(context).forEach(([key, value]) =>
-        scope.setExtra(key, value)
-      );
-    }
-  });
   return Sentry.captureException(error);
 };

package/src/lib/fetchFromDuffelAPI.ts CHANGED Viewed

@@ -1,3 +1,12 @@
+import { logGroup } from "./logging";
+export interface ErrorResponse extends Response {
+  data: { meta: any; errors: any[] };
+}
+export const isErrorResponse = (response: any): response is ErrorResponse => {
+  return "data" in response && Array.isArray(response.data.errors);
+};
 const DUFFEL_API_URL = process.env.DUFFEL_API_URL;
 const COMPONENT_VERSION = process.env.COMPONENT_VERSION;
@@ -7,9 +16,11 @@ export async function fetchFromDuffelAPI(
   method = "GET",
   body?: string
 ) {
-  const response = await fetch(
-    `${DUFFEL_API_URL}/ancillaries-component/${path}`,
-    {
+  logGroup("Making request to the Duffel API", { path, method });
+  const fullUrl = `${DUFFEL_API_URL}/ancillaries-component/${path}`;
+  let response: Response | null = null;
+  try {
+    response = await fetch(fullUrl, {
       method,
       body,
       headers: {
@@ -17,8 +28,27 @@ export async function fetchFromDuffelAPI(
         Authorization: `Bearer ${withClientKey}`,
         "User-Agent": `Duffel/ancillaries-component@${COMPONENT_VERSION}`,
       },
-    }
-  );
+    });
+  } catch (error) {
+    logGroup("Failed to make request to the Duffel API", { error });
+    throw error;
+  }
+  const data = await response.json();
+  if (Array.isArray(data.errors)) {
+    logGroup("Request to the Duffel API failed", {
+      operation: `${method} ${fullUrl}`,
+      method,
+      request_id: data?.meta?.request_id,
+      errors: data.errors,
+      status: response.status,
+    });
+    throw { ...response, data };
+  } else {
+    logGroup("Request to the Duffel succeeded", {
+      request_id: data?.meta?.request_id,
+    });
+  }
-  return await response.json();
+  return data;
 }

package/src/lib/formatDate.ts CHANGED Viewed

@@ -5,10 +5,9 @@ export const formatDateString = (dateString: string) => {
   if (!isNaN(date.valueOf())) return formatDate(date);
   else {
     captureErrorInSentry(
-      new Error("formatDateString attempted to parse an invalid date string"),
-      {
-        dateString,
-      }
+      new Error(
+        `formatDateString attempted to parse an invalid date string: ${dateString}`
+      )
     );
   }
 };

package/src/lib/getBaggageServiceDescription.ts CHANGED Viewed

@@ -6,8 +6,7 @@ export const getBaggageServiceDescription = (
 ) => {
   if (!metadata) {
     captureErrorInSentry(
-      new Error("getBaggageServiceDescription was not given any metadata"),
-      { metadata }
+      new Error("getBaggageServiceDescription was not given any metadata")
     );
     return null;
   }
@@ -18,10 +17,6 @@ export const getBaggageServiceDescription = (
     !metadata.maximum_height_cm &&
     !metadata.maximum_depth_cm
   ) {
-    captureErrorInSentry(
-      new Error("getBaggageServiceDescription metadata doesn't have any data"),
-      { metadata }
-    );
     return null;
   }

package/src/lib/getPassengerName.ts CHANGED Viewed

@@ -6,6 +6,10 @@ export const getPassengerName = (
   offerPassenger: OfferPassenger | undefined,
   fallbackIndex: number
 ): string => {
+  if (!createOrderPayloadPassenger) {
+    return `Passenger ${fallbackIndex}`;
+  }
   if (
     createOrderPayloadPassenger.given_name &&
     createOrderPayloadPassenger.family_name

package/src/lib/getTotalAmountForServices.ts CHANGED Viewed

@@ -37,7 +37,7 @@ export const getTotalAmountForServicesWithPriceMap = (
       } else {
         captureErrorInSentry(
           new Error(
-            `The service id provided could not be found in neither the offer nor the seat maps. Service id: ${id}`
+            `The service id (${id}) provided could not be found in neither the offer nor the seat maps.`
           )
         );
       }

package/src/lib/hasHighLuminance.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/*
+ * Use relative-luminance to determine whether the color is dark enough or not.
+ * See also: https://www.w3.org/WAI/GL/wiki/Relative_luminance
+ */
+export const hasHighLuminance = (accentColor: string) => {
+  const rgb = accentColor.split(", ").map((x) => parseInt(x));
+  const luminance = (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]) / 255;
+  return luminance > 0.5;
+};

package/src/lib/logging.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,23 +25,29 @@ export async function retrieveOffer(
   if (!client_key) {
     throw new Error(
-      "Attemptted to retrieve seat maps but the client key is missing"
+      "Attempted 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.";
+      }
+    }
+    if (isErrorResponse(error) && error.status >= 500 && error.status < 600) {
+      captureErrorInSentry(new Error(message));
     }
     onError(message);
   } finally {

package/src/lib/retrieveSeatMaps.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,34 @@ export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
       } as any
     }
   >
+    {children}
+  </div>
+);
+export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+  <AccentColorWrapper>
     <Button {...defaultProps} />
+  </AccentColorWrapper>
+);
+const WhiteAccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div
+    style={
+      {
+        "--ACCENT": "255, 255, 255",
+        "--SECONDARY": "black",
+        "--TERTIARY": "grey",
+      } as any
+    }
+  >
+    {children}
   </div>
 );
+export const WithWhiteAccentColorSet: StoryFn<ButtonProps> = () => (
+  <WhiteAccentColorWrapper>
+    <Button {...defaultProps} />
+  </WhiteAccentColorWrapper>
+);

package/src/stories/DuffelAncillaries.stories.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import { DuffelAncillaries } from "@components/DuffelAncillaries";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, 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";
@@ -62,6 +62,28 @@ export const ExpiredOffer: DuffelAncillariesStory = {
   },
 };
+export const OneWayOnePassengerOffer: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    offer: {
+      ...offer,
+      slices: [
+        {
+          ...offer.slices[0],
+          segments: [
+            {
+              ...offer.slices[0].segments[0],
+              passengers: [offer.slices[0].segments[0].passengers[0]],
+            },
+          ],
+        },
+      ],
+      passengers: [offer.passengers[0]],
+      available_services: [offer.available_services[0]],
+    },
+  },
+};
 export const WithCustomStyles: DuffelAncillariesStory = {
   args: {
     ...defaultProps,
@@ -124,3 +146,21 @@ export const MarkupUsingPriceFormattersWithCustomCurrency: DuffelAncillariesStor
       },
     },
   };
+export const WithAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "29, 78, 216" }}
+  />
+);
+export const WithWhiteAccentColorSet: StoryFn<
+  DuffelAncillariesPropsWithOffersAndSeatMaps
+> = () => (
+  <DuffelAncillaries
+    {...defaultProps}
+    styles={{ accentColor: "255, 255, 255" }}
+  />
+);