@duffel/components 3.0.0-canary → 3.0.0

package/src/components/{seats → DuffelAncillaries/seats}/RowSection.tsx

@@ -1,7 +1,10 @@
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow, SeatMapCabinRowSection } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import {
+  SeatMapCabinRow,
+  SeatMapCabinRowSection,
+} from "../../../types/SeatMap";
 import { Element } from "./Element";
 import { EmptyElement } from "./EmptyElement";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatElement.tsx

@@ -1,10 +1,10 @@
+import { Icon } from "@components/shared/Icon";
 import { getPassengerInitials } from "@lib/getPassengerInitials";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 import { SeatInfo } from "./SeatInfo";
 import { SeatUnavailable } from "./SeatUnavailable";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatInfo.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import {
   SeatMapCabinRowSectionAvailableService,
   SeatMapCabinRowSectionElementSeat,
-} from "../../types/SeatMap";
+} from "../../../types/SeatMap";
 
 export interface SeatInfoProps {
   seat: SeatMapCabinRowSectionElementSeat | null;

package/src/components/{seats → DuffelAncillaries/seats}/SeatMap.tsx

@@ -3,8 +3,8 @@ import { getSymbols } from "@lib/getSymbols";
 import { hasWings } from "@lib/hasWings";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMap as SeatMapType } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMap as SeatMapType } from "../../../types/SeatMap";
 import { DeckSelect } from "./DeckSelect";
 import { Legend } from "./Legend";
 import { Row } from "./Row";

package/src/components/{seats → DuffelAncillaries/seats}/SeatMapUnavailable.tsx

@@ -1,4 +1,4 @@
-import { NonIdealState } from "@components/NonIdealState";
+import { NonIdealState } from "@components/shared/NonIdealState";
 import * as React from "react";
 
 export const SeatMapUnavailable: React.FC = () => (

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionCard.tsx

@@ -1,3 +1,5 @@
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
@@ -8,12 +10,10 @@ import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { AnimatedLoaderEllipsis } from "../AnimatedLoaderEllipsis";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { Card } from "../Card";
-import { Stamp } from "../Stamp";
 import { SeatSelectionModal } from "./SeatSelectionModal";
 
 export interface SeatSelectionCardProps {

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModal.tsx

@@ -1,3 +1,4 @@
+import { Modal } from "@components/shared/Modal";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getPassengerBySegmentList } from "@lib/getPassengerBySegmentList";
 import { getPassengerMapById } from "@lib/getPassengerMapById";
@@ -8,10 +9,9 @@ import React from "react";
 import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { Modal } from "../Modal";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { SeatSelectionModalBody } from "./SeatSelectionModalBody";
 import { SeatSelectionModalFooter } from "./SeatSelectionModalFooter";
 import { SeatSelectionModalHeader } from "./SeatSelectionModalHeader";

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalBody.tsx

@@ -1,4 +1,4 @@
-import { ModalBody } from "@components/Modal";
+import { ModalBody } from "@components/shared/Modal";
 import React from "react";
 import { SeatMap, SeatMapProps } from "./SeatMap";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalFooter.tsx

@@ -1,12 +1,12 @@
+import { Button } from "@components/shared/Button";
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import { getTotalAmountForServicesWithPriceMap } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import { withPlural } from "@lib/withPlural";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { SeatMap } from "../../types/SeatMap";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { SeatMap } from "../../../types/SeatMap";
 
 export interface SeatSelectionModalFooterProps {
   currency: string;

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalHeader.tsx

@@ -1,6 +1,6 @@
 import { formatDateString } from "@lib/formatDate";
 import React from "react";
-import { OfferSliceSegment } from "../../types/Offer";
+import { OfferSliceSegment } from "../../../types/Offer";
 
 export interface SeatSelectionModalHeaderProps {
   segmentAndPassengerPermutationsCount: number;

package/src/components/{seats → DuffelAncillaries/seats}/SeatUnavailable.tsx

@@ -1,6 +1,6 @@
+import { Icon } from "@components/shared/Icon";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 
 export const SeatUnavailable: React.FC<{
   seat: SeatMapCabinRowSectionElementSeat;

package/src/components/DuffelPayments/DuffelPayments.tsx

@@ -0,0 +1,218 @@
+import { ErrorBoundary } from "@components/shared/ErrorBoundary";
+import { initializeLogger } from "@lib/logging";
+import {
+  CardElement,
+  Elements,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import { StripeCardElement, StripeError, loadStripe } from "@stripe/stripe-js";
+import * as React from "react";
+import { CustomStyles } from "../../types";
+import { Button } from "../shared/Button";
+
+const COMPONENT_CDN = process.env.COMPONENT_CDN || "";
+const hrefToComponentStyles = `${COMPONENT_CDN}/global.css`;
+
+const STRIPE_CARD_ELEMENT = "card";
+const COMPONENT_VERSION = process.env.COMPONENT_VERSION;
+
+export interface DuffelPaymentsProps {
+  paymentIntentClientToken: string;
+  onSuccessfulPayment: () => void;
+  onFailedPayment: (error: StripeError) => void;
+
+  styles?: CustomStyles;
+  debug?: boolean;
+}
+
+const CARD_ELEMENT_STYLE_BASE = {
+  color: "var(--GREY-900)",
+  fontFamily:
+    '"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"',
+  fontSmoothing: "antialiased",
+  fontSize: "16px",
+  "::placeholder": {
+    color: "#ababb4",
+  },
+};
+
+const CARD_ELEMENT_STYLE_INVALID = {
+  color: "#ef4444",
+  iconColor: "#ef4444",
+};
+
+const CardPaymentComponent: React.FC<DuffelPaymentsProps> = ({
+  styles,
+  paymentIntentClientToken,
+  onSuccessfulPayment,
+  onFailedPayment,
+}) => {
+  const [cardElement, setCardElement] =
+    React.useState<StripeCardElement | null>(null);
+  const [isComplete, setIsComplete] = React.useState<boolean>(false);
+  const [isInvalid, setIsInvalid] = React.useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = React.useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
+  const stripe = useStripe();
+  const elements = useElements();
+
+  React.useEffect(() => {
+    if (elements && !cardElement) {
+      const maybeCard = elements?.getElement(STRIPE_CARD_ELEMENT);
+      maybeCard && setCardElement(maybeCard as StripeCardElement);
+    }
+  }, [elements, cardElement]);
+
+  React.useEffect(() => {
+    if (cardElement) {
+      cardElement.on("change", (event) => {
+        const { error, complete } = event;
+
+        if (error) {
+          setIsInvalid(true);
+          setErrorMessage(error.message);
+        } else {
+          setIsInvalid(false);
+        }
+        complete ? setIsComplete(true) : setIsComplete(false);
+      });
+    }
+  }, [cardElement]);
+
+  // User is responsible for handling outcome of payment.
+  const handleSubmit = async (
+    e: React.MouseEvent<HTMLFormElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+
+    if (cardElement) {
+      setIsProcessing(true);
+      const decodedDuffelPaymentIntentClientToken = atob(
+        paymentIntentClientToken
+      );
+      const parsedDuffelPaymentIntentClientToken = JSON.parse(
+        decodedDuffelPaymentIntentClientToken
+      );
+      const { client_secret: clientSecret } =
+        parsedDuffelPaymentIntentClientToken;
+
+      const result = await stripe.confirmCardPayment(clientSecret, {
+        payment_method: {
+          card: cardElement,
+          metadata: {
+            duffel_components_version:
+              COMPONENT_VERSION || "failed-to-get-version",
+          },
+        },
+      });
+
+      setIsProcessing(false);
+      if (result.error) {
+        const { error } = result;
+        onFailedPayment(error);
+      } else {
+        onSuccessfulPayment();
+      }
+    }
+  };
+
+  return paymentIntentClientToken ? (
+    <div className="card-payment__container">
+      <form onSubmit={handleSubmit}>
+        {isProcessing && (
+          <div
+            className="card-payment--in-progress"
+            aria-live="polite"
+            aria-busy="true"
+          />
+        )}
+        <CardElement
+          className="card-details"
+          options={{
+            style: {
+              base: {
+                ...CARD_ELEMENT_STYLE_BASE,
+                ...(styles?.fontFamily && {
+                  fontFamily: styles.fontFamily,
+                }),
+              },
+              invalid: { ...CARD_ELEMENT_STYLE_INVALID },
+            },
+          }}
+        />
+        <div className="card-payment__container--invalid" role="alert">
+          {isInvalid && errorMessage}
+        </div>
+        <Button
+          className="card-payment__pay-button"
+          type="submit"
+          disabled={!isComplete || isProcessing}
+          aria-label="Pay"
+        >
+          {isProcessing ? "Processing..." : "Pay"}
+        </Button>
+      </form>
+    </div>
+  ) : null;
+};
+
+export const DuffelPayments: React.FC<DuffelPaymentsProps> = (props) => {
+  const [stripe, setStripe] = React.useState<Promise<any> | null>(null);
+  initializeLogger(props.debug || false);
+
+  const decodedDuffelPaymentIntentClientToken = atob(
+    props.paymentIntentClientToken
+  );
+
+  let parsedDuffelPaymentIntentClientToken;
+
+  try {
+    parsedDuffelPaymentIntentClientToken = JSON.parse(
+      decodedDuffelPaymentIntentClientToken
+    );
+  } catch (error) {
+    throw new Error("Invalid Duffel payment intent client token provided");
+  }
+
+  const { publishable_key: duffelPublishableKey } =
+    parsedDuffelPaymentIntentClientToken;
+
+  React.useEffect(() => {
+    if (!stripe && duffelPublishableKey) {
+      const stripe = loadStripe(duffelPublishableKey);
+      stripe && setStripe(stripe);
+    }
+  }, [stripe, duffelPublishableKey]);
+
+  const duffelComponentsStyle: React.CSSProperties = {
+    ...(props.styles?.accentColor && {
+      "--ACCENT": props.styles.accentColor,
+    }),
+    ...(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;
+
+  return (
+    <>
+      <link rel="stylesheet" href={hrefToComponentStyles}></link>
+
+      <div className="duffel-components" style={duffelComponentsStyle}>
+        <ErrorBoundary>
+          <Elements stripe={stripe}>
+            <CardPaymentComponent {...props} />
+          </Elements>
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+};

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/{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 */
@@ -109,7 +110,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

@@ -0,0 +1,13 @@
+/**
+ * This file is one of the entry points for the library -- `@duffel/components/custom-elements`.
+ * If you'd like to expose other custom element functions, please add them here.
+ */
+export {
+  onDuffelAncillariesPayloadReady,
+  renderDuffelAncillariesCustomElement,
+} from "./components/DuffelAncillaries/DuffelAncillariesCustomElement";
+export {
+  onDuffelPaymentsFailedPayment,
+  onDuffelPaymentsSuccessfulPayment,
+  renderDuffelPaymentsCustomElement,
+} from "./components/DuffelPayments/DuffelPaymentsCustomElement";

package/src/examples/client-side/README.md

@@ -0,0 +1,30 @@
+# duffel-components client-side example
+
+## Setup
+
+```sh
+# .env.local
+
+# The Duffel API environment we want to make requests to.
+# Remember to update the key below if this value changes.
+# DUFFEL_API_URL=https://api.duffel.com # production
+DUFFEL_API_URL=https://localhost:4000 # development (for Duffel engineers only)
+
+# Used to authenticate our
+# example server to talk to Duffel
+# DUFFEL_API_TOKEN=duffel_test_**** # production
+DUFFEL_API_TOKEN=test_duffel_dev_rw # development (for Duffel engineers only)
+
+
+# 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
+
+This is a basic example that doesn't rely on the Duffel API, from the root of the repository run `yarn run-example:client-side`. This command will:
+
+1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
+2. Host a basic `index.html` with `http-server`. The example page will be ready on port `6262`. This can be done with `yarn run-client-side-server`

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

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

package/src/examples/full-stack/README.md

@@ -0,0 +1,34 @@
+# duffel-components full-stack example
+
+## Setup
+
+```sh
+# .env.local
+
+# The Duffel API environment we want to make requests to.
+# Remember to update the key below if this value changes.
+# DUFFEL_API_URL=https://api.duffel.com # production
+DUFFEL_API_URL=https://localhost:4000 # development (for Duffel engineers only)
+
+# Used to authenticate our
+# example server to talk to Duffel
+# DUFFEL_API_TOKEN=duffel_test_**** # production (find it on https://app.duffel.com/YOUR_ORG/test/developers/tokens)
+DUFFEL_API_TOKEN=test_duffel_dev_rw # development (for Duffel engineers only)
+
+
+# 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
+
+This example has a server that will reach out to the Duffel API to search and retrieve an offer.
+To talk to the API we'll define the url to the API environment we want and .
+Please add the following to `.env.local`:
+
+This is a 'real life' example, where it uses a real offer ID and client key retrieved from the Duffel API. To run this, use `yarn run-example:full-stack`. This command will:
+
+1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
+2. Run the full stack server using node. The example page will be ready on port `6262`. This can be done with `yarn run-full-stack-server`