### Run the example server

Source: https://github.com/duffelhq/duffel-components/blob/main/example/README.md

Command to start the TypeScript server for the example.

```sh
yarn run-example
```

--------------------------------

### Configure environment URLs

Source: https://github.com/duffelhq/duffel-components/blob/main/example/README.md

Default production URLs used by the example, which can be overridden in .env.local.

```sh
DUFFEL_API_URL=https://api.duffel.com
TOKEN_PROXY_URL=https://api.duffel.cards
```

--------------------------------

### Configure DUFFEL_API_TOKEN

Source: https://github.com/duffelhq/duffel-components/blob/main/example/README.md

Required environment variable for the example, defined in .env.local.

```sh
# .env.local

DUFFEL_API_TOKEN=duffel_test_...
```

--------------------------------

### Install @duffel/components package

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Use yarn or npm to add the package to your project dependencies.

```sh
yarn add @duffel/components
# -- or --
npm i @duffel/components
```

--------------------------------

### Run Storybook

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Launch the Storybook reference to view available components and visual states.

```sh
yarn storybook
```

--------------------------------

### Upload component to CDN

Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md

Execute the command to build the component and upload it to Google Cloud Platform storage.

```sh
yarn upload-to-cdn
```

--------------------------------

### Configure .env.build environment variables

Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md

Set the necessary API, CDN, and Sentry authentication variables for building the component.

```sh
# .env.build

# Include the base url for the Duffel API.
# This variable is here to give us the ability to build a dist version that points to a local environment.
# If no value is provided, the default `https://api.duffel.com` will be used.
DUFFEL_API_URL=https://api.duffel.com

# This is needed so the component knows the url base to use for its stylesheet
# This variable is here so we can release component versions that may point to local environments or bypass the cache.
# If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
COMPONENT_CDN=https://assets.duffel.com/components

# The auth token is so we send data
# to sentry during the build.
# This is helpful when CI is
# building releases, locally not as much.
# You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens
SENTRY_AUTH_TOKEN=
```

--------------------------------

### Build component for CDN

Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md

Build the component specifically for CDN deployment, outputting to the ./cdn-dist directory.

```sh
yarn cdn-build # Build will output to ./cdn-dist
```

--------------------------------

### Import and render React component

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Import the component and render it with required props like offer, seat_maps, and services.

```javascript
import { DuffelAncillaries } from "@duffel/components";
```

```jsx
<DuffelAncillaries
  offer={offerFromYourBackend} // The offer object from your backend
  seat_maps={seatMapsFromYourBackend}
  services={["bags", "seats"]}
  passengers={[...]}
  onPayloadReady={console.log}
/>
```

--------------------------------

### Build component for npm

Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md

Build the component for npm publishing, outputting to the ./react-dist directory.

```sh
yarn react-build # Build will output to ./react-dist
```

--------------------------------

### Configure environment variables

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Set the required API token in the .env.local file to authenticate requests.

```sh
DUFFEL_API_TOKEN=...
```

--------------------------------

### Render and Configure Duffel Ancillaries

Source: https://github.com/duffelhq/duffel-components/blob/main/example/index.html

Initializes the component with offer, seat map, and passenger data, and sets up an event listener for the payload.

```javascript
const duffelAncillariesElement = document.querySelector("duffel-ancillaries"); // 3. Render the component with the required data. You can safely call this // function again when passenger data or selected services change. duffelAncillariesElement.render({ offer: "__OFFER__", seat_maps: "__SEAT_MAPS__", passengers: "__PASSENGERS__", services: ["seats", "bags"], debug: true, }); // 4. Listen to the payload event. `event.detail.data` contains the payload // you send to your backend to create an order with the Duffel API. duffelAncillariesElement.addEventListener("onPayloadReady", (event) => { console.log("onPayloadReady\n", event.detail); const hasSelectedBaggage = Array.isArray(event.detail.metadata.baggage_services) && event.detail.metadata.baggage_services.length > 0; const hasSelectedSeats = Array.isArray(event.detail.metadata.seat_services) && event.detail.metadata.seat_services.length > 0; console.log({ hasSelectedBaggage, hasSelectedSeats, }); if (hasSelectedBaggage && hasSelectedSeats) { // 5. Send the order creation payload to your server. fetch("/create-order", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ data: event.detail.data }), }) .then((response) => response.json()) .then(({ data }) => console.log("Order created", data)) .catch((error) => console.error("Order creation failed", error)); } });
```

--------------------------------

### Integrate custom element in Node environment

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Import render functions and event listeners, then use the custom element in HTML and initialize it via JavaScript.

```javascript
import {
  renderDuffelAncillariesCustomElement,
  onDuffelAncillariesPayloadReady,
} from "@duffel/components/custom-elements";
```

```html
<duffel-ancillaries></duffel-ancillaries>
```

```javascript
renderDuffelAncillariesCustomElement({
  offer: offerFromYourBackend,
  seat_maps: seatMapsFromYourBackend,
  services: ["bags", "seats"],
  passengers: [...],
});
```

```javascript
onDuffelAncillariesPayloadReady((data, metadata) => {
  console.table(data);
  console.table(metadata);
});
```

--------------------------------

### Configure local CDN bundle

Source: https://github.com/duffelhq/duffel-components/blob/main/example/README.md

Override the default CDN URL to test a locally built bundle.

```sh
COMPONENT_CDN=https://localhost:3200
```

--------------------------------

### Integrate custom element via CDN

Source: https://github.com/duffelhq/duffel-components/blob/main/README.md

Include the component script via CDN, add the custom element tag, and interact with the element directly in the DOM.

```html
<!--
  Replace VERSION with the desired version.
  You can find them all on https://www.npmjs.com/package/@duffel/components?activeTab=versions

  Replace COMPONENT with the desired component you'd like to use.
  You can find the components available in the `./cdn-dist` directory after running `yarn build-and-publish --dry-run`

  For example, for the duffel ancillaries component on version 3.3.1, use:
  https://assets.duffel.com/components/3.3.1/duffel-ancillaries.js
-->

<script src="https://assets.duffel.com/components/VERSION/COMPONENT.js"></script>
```

```html
<duffel-ancillaries></duffel-ancillaries>
```

```javascript
const duffelAncillariesElement = document.querySelector("duffel-ancillaries");

duffelAncillariesElement.render({
  offer: offerFromYourBackend,
  seat_maps: seatMapsFromYourBackend,
  services: ["bags", "seats"],
  passengers: [...],
});
```

```javascript
const duffelAncillariesElement =
  document.querySelector("duffel-ancillaries");

duffelAncillariesElement.addEventListener("onPayloadReady", (event) =>
  console.log("onPayloadReady\n", event.detail),
);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.