@duffel/components 3.1.3 → 3.1.4

package/src/components/shared/NonIdealState.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-export const NonIdealState: React.FC<
-  React.PropsWithChildren<{ style?: React.CSSProperties }>
-> = ({ style, children }) => (
-  <div
-    style={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      border: "dashed 1px var(--GREY-300)",
-      borderRadius: "4px",
-      paddingBlock: "32px",
-      ...style,
-    }}
-  >
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        maxWidth: "470px",
-      }}
-    >
-      {children}
-    </div>
-  </div>
-);

package/src/components/shared/Stamp.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-
-export interface StampProps {
-  backgroundColor: React.CSSProperties["backgroundColor"];
-  color: React.CSSProperties["color"];
-  children: React.ReactNode;
-}
-
-export const Stamp: React.FC<StampProps> = ({
-  backgroundColor,
-  color,
-  children,
-}) => (
-  <div
-    style={{
-      backgroundColor,
-      color,
-      padding: "2px 8px",
-      whiteSpace: "nowrap",
-      borderRadius: "4px",
-      fontWeight: "600",
-      fontSize: "14px",
-      lineHeight: "20px",
-      textAlign: "center",
-    }}
-  >
-    {children}
-  </div>
-);

package/src/components/shared/Tabs.tsx

@@ -1,36 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-export interface TabsProps {
-  /**
-   * The currently selected tab option
-   */
-  value: string;
-
-  /**
-   * Callback for when a new tab option is selected
-   */
-  onChange: (value: string) => void;
-
-  /**
-   * The options you want to render on the tabs
-   */
-  options: string[];
-}
-
-export const Tabs: React.FC<TabsProps> = ({ value, onChange, options }) => (
-  <div className="seat-map__tab-select">
-    {options.map((option) => (
-      <button
-        key={option}
-        type="button"
-        className={classNames("seat-map__tab-select-option", {
-          "seat-map__tab-select-option--selected": option === value,
-        })}
-        onClick={() => value !== option && onChange(option)}
-      >
-        {option}
-      </button>
-    ))}
-  </div>
-);

package/src/custom-elements.ts

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Checkout 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-ancillaries.js"></script>
-  </head>
-
-  <body style="font-family: sans-serif">
-    <h1>Checkout page</h1>
-
-    <!-- 2. Add the custom element to your markup where you want to render the ancillaries card -->
-    <duffel-ancillaries></duffel-ancillaries>
-  </body>
-  <script>
-    const duffelAncillariesElement =
-      document.querySelector("duffel-ancillaries");
-
-    // 3. Render the component with the required data, you can safely call this function as many times as you want. E.g. when your passenger data changes.
-    duffelAncillariesElement.render({
-      offer_id: "fixture_off_1",
-      services: ["bags", "seats", "cancel_for_any_reason"],
-      passengers: [
-        {
-          given_name: "Mae",
-          family_name: "Jemison",
-          gender: "F",
-          title: "dr",
-          born_on: "1956-10-17",
-          email: "m.jemison@nasa.gov",
-          phone_number: "+16177562626",
-        },
-        {
-          given_name: "Dorothy",
-          family_name: "Green",
-          gender: "F",
-          title: "dr",
-          born_on: "1942-10-17",
-        },
-      ],
-      debug: true,
-    });
-
-    // 4. Listen to 'onPayloadReady' event on the component. `event.detail.data` contains the payload you need to send to Duffel's API to create an order.
-    duffelAncillariesElement.addEventListener("onPayloadReady", (event) =>
-      console.log("onPayloadReady\n", event.detail)
-    );
-  </script>
-</html>

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

@@ -1,34 +0,0 @@
-# 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`

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

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Checkout 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-ancillaries.js"></script>
-  </head>
-
-  <body style="font-family: sans-serif">
-    <h1>Checkout page</h1>
-
-    <!-- 2. Add the custom element to your markup where you want to render the ancillaries card -->
-    <duffel-ancillaries></duffel-ancillaries>
-  </body>
-  <script>
-    const duffelAncillariesElement =
-      document.querySelector("duffel-ancillaries");
-
-    // 3. Render the component with the required data, you can safely call this function as many times as you want. E.g. when your passenger data changes.
-    duffelAncillariesElement.render({
-      offer_id: "__OFFER_ID__",
-      client_key: "__CLIENT_KEY__",
-      passengers: "__PASSENGERS__",
-      services: ["seats", "bags", "cancel_for_any_reason"],
-      debug: true,
-    });
-
-    // 4. Listen to 'onPayloadReady' event on the component. `event.detail.data` contains the payload you need to send to Duffel's API to create an order.
-    duffelAncillariesElement.addEventListener("onPayloadReady", (event) => {
-      console.log("onPayloadReady\n", event.detail);
-      const body = JSON.stringify({ data: event.detail.data });
-
-      // 5. Send the order creation payload to your server to create an order with the Duffel API.
-      fetch("/book", { method: "POST", body })
-        .then((response) => response.json())
-        .then(({ data }) => console.log("Order created", data))
-        .catch((error) => console.error("Order creation failed", error));
-    });
-  </script>
-</html>

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

@@ -1,158 +0,0 @@
-import dotenv from "dotenv";
-import { readFileSync } from "fs";
-import http from "http";
-
-/* https://nodejs.org/api/cli.html#node_tls_reject_unauthorizedvalue */
-process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
-
-dotenv.config({ path: ".env.local" });
-
-if (process.env.DUFFEL_API_URL === undefined) {
-  throw new Error("process.env.DUFFEL_API_URL is required but missing");
-}
-
-if (process.env.DUFFEL_API_TOKEN === undefined) {
-  throw new Error("process.env.DUFFEL_API_TOKEN is required but missing");
-}
-
-const makeMockDateInTheFuture = (daysAhead) => {
-  const now = new Date(Date.now());
-  now.setDate(now.getDate() + daysAhead);
-  return now;
-};
-
-const duffelHeaders = {
-  "Duffel-Version": "v1",
-  "Accept-Encoding": "gzip",
-  Accept: "application/json",
-  "Content-Type": "application/json",
-  Authorization: `Bearer ${process.env.DUFFEL_API_TOKEN}`,
-};
-
-let searchRoundTripOnDuffelResultCache = null;
-const searchRoundTripOnDuffel = async (origin, destination) => {
-  if (searchRoundTripOnDuffelResultCache !== null) {
-    return searchRoundTripOnDuffelResultCache;
-  }
-
-  const payload = {
-    data: {
-      slices: [
-        {
-          origin,
-          destination,
-          departure_date: makeMockDateInTheFuture(7)
-            .toISOString()
-            .split("T")[0],
-        },
-        {
-          origin: destination,
-          destination: origin,
-          departure_date: makeMockDateInTheFuture(14)
-            .toISOString()
-            .split("T")[0],
-        },
-      ],
-      passengers: [{ type: "adult" }],
-      requested_sources: ["duffel_airways"],
-    },
-  };
-
-  const { data: offerRequest } = await (
-    await fetch(
-      process.env.DUFFEL_API_URL + "/air/offer_requests?return_offers=true",
-      {
-        method: "POST",
-        body: JSON.stringify(payload),
-        headers: duffelHeaders,
-      }
-    )
-  ).json();
-
-  searchRoundTripOnDuffelResultCache = offerRequest;
-  return searchRoundTripOnDuffelResultCache;
-};
-
-const createOrderOnDuffel = async (request, response) => {
-  const createOrderOnDuffelResponse = await fetch(
-    process.env.DUFFEL_API_URL + "/air/orders",
-    {
-      method: "POST",
-      headers: duffelHeaders,
-      body: request,
-      duplex: "half",
-    }
-  );
-
-  response.writeHead(createOrderOnDuffelResponse.status, {
-    "Content-type": "application/json",
-  });
-  response.write(await createOrderOnDuffelResponse.text());
-  response.end();
-};
-
-const ROUTES = {
-  "/": async function index(request, response) {
-    const offerRequest = await searchRoundTripOnDuffel("JFK", "MIA");
-    const offer = offerRequest.offers[0];
-
-    if (!offer) {
-      response.writeHead(404);
-      response.end(http.STATUS_CODES[404]);
-      return;
-    }
-
-    const passengers = [
-      {
-        id: offer.passengers[0].id,
-        given_name: "Mae",
-        family_name: "Jemison",
-        gender: "F",
-        title: "dr",
-        born_on: "1956-10-17",
-        email: "m.jemison@nasa.gov",
-        phone_number: "+16177562626",
-      },
-    ];
-
-    const template = readFileSync("src/examples/full-stack/index.html", {
-      encoding: "utf-8",
-    });
-
-    const withOfferId = template.replace("__OFFER_ID__", offer.id);
-    const withclientKey = withOfferId.replace(
-      "__CLIENT_KEY__",
-      offerRequest.client_key
-    );
-    const withPassengers = withclientKey.replace(
-      `"__PASSENGERS__"`,
-      `${JSON.stringify(passengers)}`
-    );
-
-    response.writeHead(200);
-    response.end(withPassengers);
-  },
-  "/book": async function book(request, response) {
-    if (request.method != "POST") {
-      response.writeHead(404);
-      response.end(http.STATUS_CODES[404]);
-      return;
-    }
-
-    await createOrderOnDuffel(request, response);
-  },
-};
-
-http
-  .createServer(function (request, response) {
-    if (request.url in ROUTES) {
-      return ROUTES[request.url](request, response);
-    }
-
-    response.writeHead(404);
-    response.end(http.STATUS_CODES[404]);
-  })
-  .listen(6262);
-
-// eslint-disable-next-line
-console.log(`\n🐄 Serving example on http://localhost:6262`);

package/src/examples/just-typescript/README.md

@@ -1,37 +0,0 @@
-# duffel-components 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/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/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/just-typescript/src/index.tsx`. This will produce `src/examples/just-typescript/dist` folder that is referenced by `src/examples/just-typescript/src/index.html`. You can then open `src/examples/just-typescript/src/index.html` on your browser to see the example up and running.

package/src/examples/just-typescript/package.json

@@ -1,16 +0,0 @@
-{
-  "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/just-typescript/src/index.html

@@ -1,23 +0,0 @@
-<!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>ancillaries component just typescript example</title>
-  </head>
-  <body>
-    <h1 style="margin-bottom: 2rem">
-      Duffel ancillaries component just typescript example
-    </h1>
-
-    <duffel-ancillaries></duffel-ancillaries>
-  </body>
-</html>

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

@@ -1,36 +0,0 @@
-import {
-  onDuffelAncillariesPayloadReady,
-  renderDuffelAncillariesCustomElement,
-} from "duffel-components/custom-elements";
-
-window.onload = () => {
-  renderDuffelAncillariesCustomElement({
-    offer_id: "fixture_off_1",
-    services: ["bags", "seats", "cancel_for_any_reason"],
-    passengers: [
-      {
-        id: "pas_0000AUde3KY1SptM6ABSfT",
-        given_name: "Mae",
-        family_name: "Jemison",
-        gender: "F",
-        title: "dr",
-        born_on: "1956-10-17",
-        email: "m.jemison@nasa.gov",
-        phone_number: "+16177562626",
-      },
-      {
-        id: "pas_0000AUde3KY1SptM6ABSfU",
-        given_name: "Dorothy",
-        family_name: "Green",
-        gender: "F",
-        title: "dr",
-        born_on: "1942-10-17",
-      },
-    ],
-  });
-  onDuffelAncillariesPayloadReady((data, metadata) => {
-    /* eslint-disable */
-    console.table(data);
-    console.table(metadata);
-  });
-};

package/src/examples/next/README.md

@@ -1,28 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

package/src/examples/next/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package/src/examples/next/next.config.js

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = nextConfig;

package/src/examples/next/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "my-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "duffel-components": "../../../../duffel-components/react-dist",
-    "next": "13.5.6",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "devDependencies": {
-    "@types/node": "~18",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "next-transpile-modules": "^10.0.1",
-    "typescript": "^5"
-  }
-}

package/src/examples/next/src/app/DuffelComponents.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { DuffelAncillaries, DuffelPayments } from "duffel-components";
-
-export const DuffelComponents = () => (
-  <>
-    <DuffelAncillaries
-      debug={true}
-      offer_id="fixture_off_1"
-      services={["bags", "seats"]}
-      passengers={[
-        {
-          id: "pas_0000AUde3KY1SptM6ABSfU",
-          given_name: "Mae",
-          family_name: "Jemison",
-          gender: "F",
-          title: "dr",
-          born_on: "1956-10-17",
-          email: "m.jemison@nasa.gov",
-          phone_number: "+16177562626",
-        },
-        {
-          id: "pas_0000AUde3KY1SptM6ABSfT",
-          given_name: "Dorothy",
-          family_name: "Green",
-          gender: "F",
-          title: "dr",
-          born_on: "1942-10-17",
-        },
-      ]}
-      onPayloadReady={console.log}
-    />
-
-    <DuffelPayments
-      paymentIntentClientToken="eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0="
-      onSuccessfulPayment={console.log}
-      onFailedPayment={console.log}
-    />
-  </>
-);