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

package/src/components/DuffelPayments/DuffelPaymentsCustomElement.tsx

@@ -0,0 +1,130 @@
+import { StripeError } from "@stripe/stripe-js";
+import { createRoot, Root } from "react-dom/client";
+import { DuffelPayments, DuffelPaymentsProps } from "./DuffelPayments";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "duffel-payments": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+const CUSTOM_ELEMENT_TAG = "duffel-payments";
+
+type DuffelPaymentsCustomElementRenderArguments = Pick<
+  DuffelPaymentsProps,
+  "paymentIntentClientToken" | "styles"
+>;
+
+class DuffelPaymentsCustomElement 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.appendChild(container);
+
+    this.root = createRoot(container);
+  }
+
+  /**
+   * When this function is called, it will render/re-render
+   * the `DuffelPayments` component with the given props.
+   */
+  public render(withProps: DuffelPaymentsCustomElementRenderArguments) {
+    if (!this.root) {
+      throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
+    }
+
+    this.root.render(
+      <DuffelPayments
+        {...withProps}
+        onSuccessfulPayment={() => {
+          this.dispatchEvent(
+            new CustomEvent("onSuccessfulPayment", {
+              composed: true,
+            })
+          );
+        }}
+        onFailedPayment={(error: StripeError) => {
+          this.dispatchEvent(
+            new CustomEvent("onFailedPayment", {
+              detail: { error },
+              composed: true,
+            })
+          );
+        }}
+      />
+    );
+  }
+}
+
+window.customElements.get(CUSTOM_ELEMENT_TAG) ||
+  window.customElements.define(CUSTOM_ELEMENT_TAG, DuffelPaymentsCustomElement);
+
+function tryToGetDuffelPaymentsCustomElement(
+  caller: string
+): DuffelPaymentsCustomElement {
+  const element =
+    document.querySelector<DuffelPaymentsCustomElement>(CUSTOM_ELEMENT_TAG);
+  if (!element) {
+    throw new Error(
+      `Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
+    );
+  }
+  return element;
+}
+
+export function renderDuffelPaymentsCustomElement(
+  props: DuffelPaymentsCustomElementRenderArguments
+) {
+  const element = tryToGetDuffelPaymentsCustomElement(
+    "renderDuffelPaymentsCustomElement"
+  );
+  element.render(props);
+}
+
+export function onDuffelPaymentsSuccessfulPayment(
+  onSuccessfulPayment: DuffelPaymentsProps["onSuccessfulPayment"]
+) {
+  const element = tryToGetDuffelPaymentsCustomElement(
+    "onDuffelPaymentsPayloadReady"
+  );
+
+  // 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",
+    onSuccessfulPayment as EventListener
+  );
+}
+
+type OnFailedPaymentCustomEvent = CustomEvent<{
+  error: StripeError;
+}>;
+export function onDuffelPaymentsFailedPayment(
+  onFailedPayment: DuffelPaymentsProps["onFailedPayment"]
+) {
+  const element = tryToGetDuffelPaymentsCustomElement(
+    "onDuffelPaymentsPayloadReady"
+  );
+  const eventListener = (event: OnFailedPaymentCustomEvent) => {
+    onFailedPayment(event.detail.error);
+  };
+
+  // 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/PlacesLookup/PlacesLookup.tsx

@@ -0,0 +1,123 @@
+import Fuse from "fuse.js";
+import { debounce } from "lodash";
+import fetch from "node-fetch";
+import React from "react";
+import { Icon } from "../shared/Icon";
+
+const DATA_SOURCE = "https://assets.duffel.com/data/iata-lookup-v2.json";
+
+interface City {
+  type: "city";
+  name: string;
+  iata_code: string;
+}
+interface Airport {
+  type: "airport";
+  name: string;
+  iata_code: string;
+  latitude: string;
+  longitude: string;
+}
+type Place = City | Airport;
+
+const mapDataRowsIntoObjects = (data: string[]): Place[] =>
+  data.map((row) => {
+    const [type, name, iata_code, latitude, longitude] = row.split(",");
+    if (type === "C") return { type: "city", name, iata_code } as City;
+    else
+      return {
+        type: "airport",
+        name,
+        iata_code,
+        latitude,
+        longitude,
+      } as Airport;
+  });
+
+export interface PlacesLookupProps {
+  onPlaceSelected: (selection: Place) => void;
+  placeholder?: string;
+}
+
+export const PlacesLookup: React.FC<PlacesLookupProps> = ({
+  onPlaceSelected,
+  placeholder = "Lookup city or airport",
+}) => {
+  const [shouldShowPopover, setShouldShowPopover] =
+    React.useState<boolean>(true);
+  const [inputValue, setInputValue] = React.useState<string>("");
+  const [lookupData, setLookupData] = React.useState<Fuse<Place>>(new Fuse([]));
+  const [lookupResults, setLookupResults] = React.useState<
+    Fuse.FuseResult<Place>[]
+  >([]);
+
+  const runLookup = debounce((newInputValue: string) => {
+    setLookupResults(
+      lookupData.search(newInputValue, {
+        limit: 10,
+      })
+    );
+  }, 300);
+
+  React.useEffect(() => {
+    fetch(DATA_SOURCE)
+      .then((response) => response.json())
+      .then((data) =>
+        setLookupData(
+          new Fuse<Place>(mapDataRowsIntoObjects(data), {
+            threshold: 0.2,
+            keys: ["name", "iata_code"],
+          })
+        )
+      );
+  }, []);
+
+  return (
+    <div className="places-lookup">
+      <input
+        className="places-lookup-input"
+        placeholder={placeholder}
+        type="text"
+        value={inputValue}
+        onChange={(e) => {
+          if (!shouldShowPopover) setShouldShowPopover(true);
+          setInputValue(e.target.value);
+          runLookup(e.target.value);
+        }}
+      />
+      {shouldShowPopover &&
+        inputValue.length > 0 &&
+        lookupResults.length > 0 && (
+          <div
+            className="places-lookup-popover"
+            style={{ display: "flex", flexDirection: "column" }}
+          >
+            {lookupResults.map(({ item }, index) => (
+              <button
+                className="places-lookup-popover__item"
+                key={item.iata_code + index}
+                onClick={() => {
+                  setShouldShowPopover(false);
+                  onPlaceSelected(item);
+                  setInputValue(item.name);
+                }}
+              >
+                <span className="places-lookup-popover__icon-and-name-container">
+                  <Icon
+                    style={{ fill: "var(--GREY-400)", marginTop: "-2px" }}
+                    name={
+                      item.type === "airport" ? "flight_takeoff" : "apartment"
+                    }
+                  />
+                  {item.name}
+                </span>{" "}
+                <span style={{ color: "var(--GREY-600)", fontSize: "12px" }}>
+                  {item.iata_code}
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+    </div>
+  );
+};

package/src/components/ShowData/ShowData.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@components/shared/Button";
+import React from "react";
+
+function isJsonString(dataString: string) {
+  try {
+    JSON.parse(dataString);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+export interface ShowDataProps {
+  data: any;
+  onFinished: (newData: any) => void;
+}
+
+export const ShowData: React.FC<ShowDataProps> = ({ data, onFinished }) => {
+  const [textareaData, setTextareaData] = React.useState("{}");
+  const isValid = isJsonString(textareaData);
+
+  return (
+    <div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <textarea
+        value={textareaData}
+        onChange={(e) => setTextareaData(e.target.value)}
+      />
+      <Button
+        disabled={!isValid}
+        onClick={() => onFinished(JSON.parse(textareaData))}
+      >
+        Click me to trigger `onFinished` event
+      </Button>
+      {!isValid && <p style={{ color: "tomato" }}>Invalid JSON</p>}
+    </div>
+  );
+};

package/src/components/ShowData/ShowDataCustomElement.tsx

@@ -0,0 +1,85 @@
+import { createRoot, Root } from "react-dom/client";
+import { ShowData, ShowDataProps } from "./ShowData";
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "show-data": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+const CUSTOM_ELEMENT_TAG = "show-data";
+
+type ShowDataRenderArguments = Pick<ShowDataProps, "data">;
+
+class ShowDataCustomElement 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.appendChild(container);
+
+    this.root = createRoot(container);
+  }
+
+  /**
+   * When this function is called, it will render/re-render
+   * the `DuffelPayments` component with the given props.
+   */
+  public render(withProps: ShowDataRenderArguments) {
+    if (!this.root) {
+      throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
+    }
+
+    this.root.render(
+      <ShowData
+        {...withProps}
+        onFinished={() => {
+          this.dispatchEvent(
+            new CustomEvent("onFinished", {
+              composed: true,
+            })
+          );
+        }}
+      />
+    );
+  }
+}
+
+window.customElements.get(CUSTOM_ELEMENT_TAG) ||
+  window.customElements.define(CUSTOM_ELEMENT_TAG, ShowDataCustomElement);
+
+function tryToGetShowData(caller: string): ShowDataCustomElement {
+  const element =
+    document.querySelector<ShowDataCustomElement>(CUSTOM_ELEMENT_TAG);
+  if (!element) {
+    throw new Error(
+      `Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
+    );
+  }
+  return element;
+}
+
+export function renderShowData(props: ShowDataRenderArguments) {
+  const element = tryToGetShowData("renderShowData");
+  element.render(props);
+}
+
+export function onShowDataFinished(onFinished: ShowDataProps["onFinished"]) {
+  const element = tryToGetShowData("onShowDataFinished");
+
+  // 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("onFinished", onFinished as EventListener);
+}

package/src/components/{Button.tsx → shared/Button.tsx}

@@ -1,4 +1,4 @@
-import { Icon, IconName } from "@components/Icon";
+import { Icon, IconName } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
 
@@ -25,7 +25,7 @@ type NativeButtonProps = React.DetailedHTMLProps<
 export interface ButtonProps
   extends Pick<
     NativeButtonProps,
-    "id" | "onClick" | "disabled" | "children" | "className"
+    "id" | "onClick" | "disabled" | "children" | "className" | "type"
   > {
   "data-testid"?: string;
   iconBefore?: IconName;
@@ -39,10 +39,11 @@ export const Button: React.FC<ButtonProps> = ({
   size = 40,
   children,
   className,
+  type = "button",
   ...nativeButtonProps
 }) => (
   <button
-    type="button"
+    type={type}
     className={classNames(
       "button",
       BUTTON_VARIANTS[variant],

package/src/components/{ErrorBoundary.tsx → shared/ErrorBoundary.tsx}

@@ -13,9 +13,9 @@ export class ErrorBoundary extends React.Component<{
     return { hasError: true };
   }
 
-  componentDidCatch(error: Error, context: Record<any, any>) {
+  componentDidCatch(error: Error) {
     // You can also log the error to an error reporting service
-    captureErrorInSentry(error, context);
+    captureErrorInSentry(error);
   }
 
   render() {

package/src/components/{Icon.tsx → shared/Icon.tsx}

@@ -1,3 +1,4 @@
+import { log } from "@lib/logging";
 import * as React from "react";
 
 /* eslint-disable react/no-unknown-property */
@@ -6,6 +7,9 @@ export const ICON_MAP = {
   add: (
     <path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z" />
   ),
+  apartment: (
+    <path d="M3.8496 19.9752V7.2744H7.4496V3.6744H15.9504V10.8744H20.1504V19.9752H13.4496V16.3752H10.5504V19.9752H3.8496ZM5.1504 18.6744H7.4496V16.3752H5.1504V18.6744ZM5.1504 14.7744H7.4496V12.4752H5.1504V14.7744ZM5.1504 10.8744H7.4496V8.5752H5.1504V10.8744ZM8.7504 14.7744H11.0496V12.4752H8.7504V14.7744ZM8.7504 10.8744H11.0496V8.5752H8.7504V10.8744ZM8.7504 7.2744H11.0496V4.9752H8.7504V7.2744ZM12.3504 14.7744H14.6496V12.4752H12.3504V14.7744ZM12.3504 10.8744H14.6496V8.5752H12.3504V10.8744ZM12.3504 7.2744H14.6496V4.9752H12.3504V7.2744ZM16.5504 18.6744H18.8496V16.3752H16.5504V18.6744ZM16.5504 14.7744H18.8496V12.4752H16.5504V14.7744Z" />
+  ),
   arrow_forward: (
     <path d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" />
   ),
@@ -15,6 +19,7 @@ export const ICON_MAP = {
   arrow_right: (
     <path d="M15 19L13.6 17.6L18.2 13H2V11H18.2L13.6 6.4L15 5L22 12L15 19Z" />
   ),
+
   autorenew: (
     <path d="M5.69728 14.4104C5.49326 13.9833 5.32604 13.5257 5.19562 13.0374C5.06521 12.5492 5 12.0367 5 11.5C5 9.56481 5.69083 7.91679 7.07249 6.55591C8.45416 5.19504 10.147 4.53946 12.1511 4.58918H12.7613L11.0742 2.92359L12.0097 2L15.2869 5.23549L12.0097 8.47099L11.0742 7.54739L12.7613 5.88181H12.1511C10.5021 5.84866 9.11624 6.38632 7.99347 7.49479C6.87069 8.60326 6.30931 9.93833 6.30931 11.5C6.30931 11.8455 6.33804 12.1824 6.3955 12.5106C6.45296 12.8389 6.53915 13.1573 6.65407 13.4658L5.69728 14.4104ZM11.9903 21L8.71309 17.7645L11.9903 14.529L12.9258 15.4526L11.2387 17.1182H11.8489C13.4979 17.1513 14.8838 16.6137 16.0065 15.5052C17.1293 14.3967 17.6907 13.0617 17.6907 11.5C17.6907 11.1545 17.662 10.8176 17.6045 10.4894C17.547 10.1611 17.4609 9.84273 17.3459 9.53421L18.3027 8.58959C18.5067 9.01665 18.674 9.47431 18.8044 9.96256C18.9348 10.4508 19 10.9633 19 11.5C19 13.4186 18.3092 15.0625 16.9275 16.4317C15.5458 17.8008 13.853 18.4605 11.8489 18.4108H11.2387L12.9258 20.0764L11.9903 21Z" />
   ),
@@ -52,6 +57,9 @@ export const ICON_MAP = {
   flight_class: (
     <path d="M14.2596 12.5C13.7737 12.5 13.3606 12.3298 13.0202 11.9894C12.6798 11.649 12.5096 11.2359 12.5096 10.75V6.25C12.5096 5.7641 12.6798 5.35096 13.0202 5.01058C13.3606 4.67019 13.7737 4.5 14.2596 4.5H15.75C16.2359 4.5 16.649 4.67019 16.9894 5.01058C17.3298 5.35096 17.5 5.7641 17.5 6.25V10.75C17.5 11.2359 17.3298 11.649 16.9894 11.9894C16.649 12.3298 16.2359 12.5 15.75 12.5H14.2596ZM14.2596 11H15.75C15.8205 11 15.8798 10.9759 15.9278 10.9279C15.9759 10.8798 16 10.8205 16 10.75V6.25C16 6.17948 15.9759 6.12018 15.9278 6.0721C15.8798 6.02402 15.8205 5.99998 15.75 5.99998H14.2596C14.1891 5.99998 14.1298 6.02402 14.0817 6.0721C14.0336 6.12018 14.0096 6.17948 14.0096 6.25V10.75C14.0096 10.8205 14.0336 10.8798 14.0817 10.9279C14.1298 10.9759 14.1891 11 14.2596 11ZM9.5673 17.5C9.21345 17.5 8.89678 17.398 8.6173 17.1942C8.33782 16.9903 8.14423 16.7198 8.03655 16.3827L5.5 8.02883V4.5H6.99997V7.99998L9.49997 16H17.7596V17.5H9.5673ZM8.25 20.5V19H17.75V20.5H8.25ZM14.2596 5.99998H16H14.0096H14.2596Z" />
   ),
+  flight_takeoff: (
+    <path d="M3.77521 20.1498V18.849H20.0748V20.1498H3.77521ZM5.45041 15.2742L2.94961 11.0994L4.05001 10.8246L5.90041 12.399L10.05 11.2998L6.27481 4.89902L7.72561 4.62422L14.1 10.1994L19.4004 8.77382C19.75 8.67462 20.0832 8.72062 20.4 8.91182C20.7168 9.10382 20.9252 9.37462 21.0252 9.72422C21.1084 10.0746 21.0624 10.4038 20.8872 10.7118C20.7128 11.0198 20.4504 11.2242 20.1 11.325L5.45041 15.2742Z" />
+  ),
   galley: (
     <path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z" />
   ),
@@ -68,20 +76,12 @@ export const ICON_MAP = {
     <path d="M14.6674 10.0001V2.66675C14.6674 1.56008 13.7741 0.666748 12.6674 0.666748C11.5607 0.666748 10.6674 1.56008 10.6674 2.66675V7.57341L21.1074 18.0134L25.3341 19.3334V16.6667L14.6674 10.0001ZM1.33407 5.02675L7.9874 11.6801L0.000732422 16.6667V19.3334L10.6674 16.0001V23.3334L8.00073 25.3334V27.3334L12.6674 26.0001L17.3341 27.3334V25.3334L14.6674 23.3334V18.3601L22.3074 26.0001L24.0007 24.3067L3.0274 3.33341L1.33407 5.02675Z" />
   ),
   no_bag: (
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M16.8992 6.12037H14.9392V3.18101C14.9385 2.92148 14.8351 2.67278 14.6516 2.48926C14.4681 2.30574 14.2194 2.20234 13.9599 2.20166H10.0399C9.78034 2.20234 9.53163 2.30574 9.34811 2.48926C9.16459 2.67278 9.06119 2.92148 9.06051 3.18101V6.12037H8.20711L8.34715 6.25804L14.3973 12.0871V9.06102H15.9676V13.6L17.3022 14.8859L18.8592 16.4748V8.08037C18.8579 7.56096 18.6509 7.06322 18.2836 6.69594C17.9164 6.32867 17.4186 6.12173 16.8992 6.12037ZM5.14051 8.09559L3.77173 6.71825L5.00821 5.48945L7.16586 7.6606L13.9581 14.4953L15.8932 16.4426L19.7441 20.3175L20.2279 20.8043L18.9914 22.0331L17.635 20.6683C17.4035 20.7625 17.154 20.8126 16.8992 20.8133C16.904 20.945 16.8822 21.0763 16.8351 21.1993C16.788 21.3224 16.7166 21.4347 16.6251 21.5296C16.5336 21.6244 16.424 21.6999 16.3027 21.7514C16.1814 21.8029 16.051 21.8295 15.9192 21.8295C15.7874 21.8295 15.657 21.8029 15.5357 21.7514C15.4145 21.6999 15.3048 21.6244 15.2133 21.5296C15.1219 21.4347 15.0504 21.3224 15.0034 21.1993C14.9563 21.0763 14.9344 20.945 14.9392 20.8133H9.06051C9.06529 20.945 9.04348 21.0763 8.99638 21.1993C8.94929 21.3224 8.87787 21.4347 8.7864 21.5296C8.69492 21.6244 8.58527 21.6999 8.46399 21.7514C8.34271 21.8029 8.21229 21.8295 8.08051 21.8295C7.94874 21.8295 7.81832 21.8029 7.69703 21.7514C7.57575 21.6999 7.4661 21.6244 7.37463 21.5296C7.28316 21.4347 7.21174 21.3224 7.16464 21.1993C7.11754 21.0763 7.09573 20.945 7.10051 20.8133C6.58222 20.8119 6.08545 20.6059 5.71835 20.24C5.35126 19.8741 5.14357 19.378 5.14051 18.8597V8.09559ZM14.8632 17.8791L14.3973 17.4103V17.8791H14.8632ZM9.596 12.579V17.8791H8.03083V11.004L9.596 12.579ZM10.5302 3.67134H13.4695V6.12295H10.5302V3.67134Z"
-    />
+    <path d="M16.8992 6.12037H14.9392V3.18101C14.9385 2.92148 14.8351 2.67278 14.6516 2.48926C14.4681 2.30574 14.2194 2.20234 13.9599 2.20166H10.0399C9.78034 2.20234 9.53163 2.30574 9.34811 2.48926C9.16459 2.67278 9.06119 2.92148 9.06051 3.18101V6.12037H8.20711L8.34715 6.25804L14.3973 12.0871V9.06102H15.9676V13.6L17.3022 14.8859L18.8592 16.4748V8.08037C18.8579 7.56096 18.6509 7.06322 18.2836 6.69594C17.9164 6.32867 17.4186 6.12173 16.8992 6.12037ZM5.14051 8.09559L3.77173 6.71825L5.00821 5.48945L7.16586 7.6606L13.9581 14.4953L15.8932 16.4426L19.7441 20.3175L20.2279 20.8043L18.9914 22.0331L17.635 20.6683C17.4035 20.7625 17.154 20.8126 16.8992 20.8133C16.904 20.945 16.8822 21.0763 16.8351 21.1993C16.788 21.3224 16.7166 21.4347 16.6251 21.5296C16.5336 21.6244 16.424 21.6999 16.3027 21.7514C16.1814 21.8029 16.051 21.8295 15.9192 21.8295C15.7874 21.8295 15.657 21.8029 15.5357 21.7514C15.4145 21.6999 15.3048 21.6244 15.2133 21.5296C15.1219 21.4347 15.0504 21.3224 15.0034 21.1993C14.9563 21.0763 14.9344 20.945 14.9392 20.8133H9.06051C9.06529 20.945 9.04348 21.0763 8.99638 21.1993C8.94929 21.3224 8.87787 21.4347 8.7864 21.5296C8.69492 21.6244 8.58527 21.6999 8.46399 21.7514C8.34271 21.8029 8.21229 21.8295 8.08051 21.8295C7.94874 21.8295 7.81832 21.8029 7.69703 21.7514C7.57575 21.6999 7.4661 21.6244 7.37463 21.5296C7.28316 21.4347 7.21174 21.3224 7.16464 21.1993C7.11754 21.0763 7.09573 20.945 7.10051 20.8133C6.58222 20.8119 6.08545 20.6059 5.71835 20.24C5.35126 19.8741 5.14357 19.378 5.14051 18.8597V8.09559ZM14.8632 17.8791L14.3973 17.4103V17.8791H14.8632ZM9.596 12.579V17.8791H8.03083V11.004L9.596 12.579ZM10.5302 3.67134H13.4695V6.12295H10.5302V3.67134Z" />
   ),
   no_seat: (
     <>
       <path d="M25.1667 21.9733L23.4733 23.6667L2.5 2.69333L4.19333 1L7.16667 3.97333L16.5267 13.3333L19.1933 16L24.5 21.3067L25.1667 21.9733Z" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.16667 24H3.16667V16H19.1933L24.5 21.3067V24H20.5V20H7.16667V24ZM27.1667 9.33333H23.1667V13.3333H27.1667V9.33333ZM4.5 9.33333H0.5V13.3333H4.5V9.33333ZM20.3333 13.3333H20.5V2.66667C20.5 1.2 19.3 0 17.8333 0H9.83333C9.05784 0 8.3569 0.335483 7.86848 0.868484L20.3333 13.3333ZM16.5267 13.3333L7.16667 3.97333V13.3333H16.5267Z"
-      />
+      <path d="M7.16667 24H3.16667V16H19.1933L24.5 21.3067V24H20.5V20H7.16667V24ZM27.1667 9.33333H23.1667V13.3333H27.1667V9.33333ZM4.5 9.33333H0.5V13.3333H4.5V9.33333ZM20.3333 13.3333H20.5V2.66667C20.5 1.2 19.3 0 17.8333 0H9.83333C9.05784 0 8.3569 0.335483 7.86848 0.868484L20.3333 13.3333ZM16.5267 13.3333L7.16667 3.97333V13.3333H16.5267Z" />
     </>
   ),
   north_east: (
@@ -109,7 +109,7 @@ export type IconName = keyof typeof ICON_MAP;
 
 const getIconPath = (name: IconName) => {
   if (!(name in ICON_MAP)) {
-    console.warn(`The icon "${name}" is missing from ICON_MAP`);
+    log(`The icon "${name}" is missing from ICON_MAP`);
     return null;
   }
   return ICON_MAP[name];

package/src/components/{IconButton.tsx → shared/IconButton.tsx}

@@ -1,6 +1,6 @@
-import { Icon, IconName } from "@components/Icon";
 import classNames from "classnames";
 import * as React from "react";
+import { Icon, IconName } from "./Icon";
 
 const ICON_BUTTON_VARIANTS = {
   primary: "icon-button--primary",

package/src/components/{Modal.tsx → shared/Modal.tsx}

@@ -16,7 +16,11 @@ export const Modal: React.FC<ModalProps> = ({ children, onClose, isOpen }) => {
   }, [isOpen]);
 
   return (
-    <div className={classNames("modal", isOpen && "modal--open")}>
+    <div
+      className={classNames("modal", isOpen && "modal--open")}
+      // setting inline style to avoid modal content to flash unstyled before stylesheet is loaded
+      style={{ opacity: 0 }}
+    >
       <div role="presentation" className={"modal--content"}>
         {children}
 

package/src/components/{NonIdealState.tsx → shared/NonIdealState.tsx}

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 export const NonIdealState: React.FC<
   React.PropsWithChildren<{ style?: React.CSSProperties }>

package/src/custom-elements.ts

@@ -5,4 +5,9 @@
 export {
   onDuffelAncillariesPayloadReady,
   renderDuffelAncillariesCustomElement,
-} from "./components/DuffelAncillariesCustomElement";
+} from "./components/DuffelAncillaries/DuffelAncillariesCustomElement";
+export {
+  onDuffelPaymentsFailedPayment,
+  onDuffelPaymentsSuccessfulPayment,
+  renderDuffelPaymentsCustomElement,
+} from "./components/DuffelPayments/DuffelPaymentsCustomElement";

package/src/examples/client-side/index.html

@@ -11,7 +11,7 @@
     />
 
     <!-- 1. This script loads duffel-components -->
-    <script src="http://localhost:8000/index.js"></script>
+    <script src="http://localhost:8000/duffel-ancillaries.js"></script>
   </head>
 
   <body style="font-family: sans-serif">

package/src/examples/full-stack/index.html

@@ -11,7 +11,7 @@
     />
 
     <!-- 1. This script loads duffel-components -->
-    <script src="http://localhost:8000/index.js"></script>
+    <script src="http://localhost:8000/duffel-ancillaries.js"></script>
   </head>
 
   <body style="font-family: sans-serif">

package/src/examples/full-stack/server.mjs

@@ -154,4 +154,5 @@ http
   })
   .listen(6262);
 
+// eslint-disable-next-line
 console.log(`\n🐄 Serving example on http://localhost:6262`);

package/src/examples/just-typescript/src/index.html

@@ -11,11 +11,11 @@
     />
 
     <script src="../dist/index.js" defer></script>
-    <title>React app example</title>
+    <title>ancillaries component just typescript example</title>
   </head>
   <body>
     <h1 style="margin-bottom: 2rem">
-      Duffel ancillaries component react-app example
+      Duffel ancillaries component just typescript example
     </h1>
 
     <duffel-ancillaries></duffel-ancillaries>

package/src/examples/just-typescript/src/index.ts

@@ -1,7 +1,7 @@
 import {
   onDuffelAncillariesPayloadReady,
   renderDuffelAncillariesCustomElement,
-} from "duffel-components";
+} from "duffel-components/custom-elements";
 
 window.onload = () => {
   renderDuffelAncillariesCustomElement({
@@ -29,6 +29,7 @@ window.onload = () => {
     ],
   });
   onDuffelAncillariesPayloadReady((data, metadata) => {
+    /* eslint-disable */
     console.table(data);
     console.table(metadata);
   });

package/src/examples/payments-custom-element/README.md

@@ -0,0 +1,17 @@
+# Duffel payments custom element example
+
+## Setup
+
+```sh
+# .env.local
+
+# The url for the component CDN.
+# This is used to load both the styles an
+# COMPONENT_CDN=https://assets.duffel.com/components/ancillaries/VERSION # production
+COMPONENT_CDN=http://localhost:8000 # development
+```
+
+## Run the example
+
+1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000` using `yarn dev`.
+2. Open `src/examples/payments-custom-element/index.html` on your browser.

package/src/examples/payments-custom-element/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Payment page example</title>
+    <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"
+    />
+
+    <!-- 1. This script loads duffel-components -->
+    <script src="http://localhost:8000/duffel-payments.js"></script>
+  </head>
+
+  <body style="font-family: sans-serif">
+    <h1 style="margin-bottom: 2rem">Payment page example</h1>
+
+    <!-- 2. Add the custom element to your markup where you want to render the payments card -->
+    <duffel-payments></duffel-payments>
+  </body>
+  <script>
+    const duffelpaymentsElement = document.querySelector("duffel-payments");
+
+    // 3. Render the component with the required data, you can safely call this function as many times as you want.
+    duffelpaymentsElement.render({
+      paymentIntentClientToken:
+        "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=",
+      debug: true,
+    });
+
+    // 4. Listen to 'onSuccessfulPayment' event on the component:
+    duffelpaymentsElement.addEventListener("onSuccessfulPayment", () =>
+      console.log("onPayloadReady\n")
+    );
+
+    // 5. If we run into an issue with the payment, you can listen to 'onFailedPayment' event:
+    duffelpaymentsElement.addEventListener("onFailedPayment", (event) =>
+      console.log("onPayloadReady\n", event.detail)
+    );
+  </script>
+</html>