@duffel/components 2.7.20 → 3.0.0

package/react-dist/types/Order.d.ts

@@ -0,0 +1,8 @@
+export type Order = {
+    id: string;
+    [any: string]: any;
+    slices: {
+        segments: any[];
+    }[];
+};
+export type OrderAvailableService = any;

package/react-dist/types/Place.d.ts

@@ -0,0 +1,8 @@
+import { Airport } from "./Airport";
+import { City } from "./City";
+export type Place = (Airport & {
+    type?: "airport";
+    airports?: Airport[] | null;
+}) | (City & {
+    type?: "city";
+});

package/react-dist/types/SeatMap.d.ts

@@ -0,0 +1,190 @@
+/**
+ * Seat maps are used to build a rich experience for your customers so they can select a seat as part of an order.
+ * A seat map includes the data for rendering seats in the relevant cabins, along with their total cost and other information such as disclosures.
+ * @link https://duffel.com/docs/api/seat-maps/schema
+ */
+export interface SeatMap {
+    /**
+     * Duffel's unique identifier for the seat map
+     */
+    id: string;
+    /**
+     * Duffel's unique identifier for the slice. It identifies the slice of an offer (i.e. the same slice across offers will have different ids.)
+     */
+    slice_id: string;
+    /**
+     * Duffel's unique identifier for the segment. It identifies the segment of an offer (i.e. the same segment across offers will have different ids).
+     */
+    segment_id: string;
+    /**
+     * The list of cabins in this seat map.
+     * Cabins are ordered by deck from lowest to highest, and then within each deck from the front to back of the aircraft.
+     */
+    cabins: SeatMapCabin[];
+}
+export interface SeatMapCabin {
+    /**
+     * Level 0 is the main deck and level 1 is the upper deck above that, which is found on some large aircraft.
+     */
+    deck: number;
+    /**
+     * The cabin class that the passenger will travel in on this segment
+     */
+    cabin_class: string;
+    /**
+     * Where the wings of the aircraft are in relation to rows in the cabin.
+     * The numbers correspond to the indices of the first and the last row which are overwing. You can use this to draw a visual representation of the wings to help users get a better idea of what they will see outside their window.
+     * The indices are 0 th-based and are for all rows, not just those that have seats.
+     * This is null when no rows of the cabin are overwing.
+     */
+    wings: {
+        /**
+         * The index of the first row which is overwing, starting from the front of the aircraft.
+         */
+        first_row_index: number;
+        /**
+         * The index of the last row which is overwing, starting from the front of the aircraft.
+         */
+        last_row_index: number;
+    } | null;
+    /**
+     * The number of aisles in this cabin.
+     * If this is set to 1, each row of the cabin is split into two sections. If this is set to 2, each row of the cabin is split into three section.
+     */
+    aisles: number;
+    /**
+     * A list of rows in this cabin.
+     * Row sections are broken up by aisles. Rows are ordered from front to back of the aircraft.
+     */
+    rows: SeatMapCabinRow[];
+}
+export interface SeatMapCabinRow {
+    /**
+     * A list of sections.
+     * Each row is divided into sections by one or more aisles.
+     */
+    sections: SeatMapCabinRowSection[];
+}
+export interface SeatMapCabinRowSection {
+    /**
+     * The elements that make up this section.
+     */
+    elements: SeatMapCabinRowSectionElement[];
+}
+/**
+ * A seat for a passenger. If the available_services list is empty (which will be represented as an empty list : []), the seat is unavailable.
+ * For display, all seats should be displayed with the same static width.
+ */
+export interface SeatMapCabinRowSectionElementSeat {
+    /**
+     * The type of this element.
+     */
+    type: "seat";
+    /**
+     * The designator used to uniquely identify the seat, usually made up of a row number and a column letter
+     */
+    designator: string;
+    /**
+     * A name which describes the type of seat, which you can display in your user interface to help customers to understand its features
+     */
+    name?: string;
+    /**
+     * Each disclosure is text, in English, provided by the airline that describes the terms and conditions of this seat. We recommend showing this in your user interface to make sure that customers understand any restrictions and limitations.
+     */
+    disclosures: string[];
+    /**
+     * Seats are considered a special kind of service. There will be at most one service per seat per passenger. A seat can only be booked for one passenger. If a seat has no available services (which will be represented as an empty list : []) then it's unavailable.
+     */
+    available_services: SeatMapCabinRowSectionAvailableService[];
+}
+export interface SeatMapCabinRowSectionAvailableService {
+    /**
+     * Duffel's unique identifier for the service
+     */
+    id: string;
+    /**
+     * The passenger that this seat is for
+     */
+    passenger_id: string;
+    /**
+     * The total price of the seat, including taxes
+     */
+    total_amount: string;
+    /**
+     * The currency of the total_amount, as an ISO 4217 currency code
+     */
+    total_currency: string;
+}
+/**
+ * A bassinet is a child's cradle. This element will be aligned with the corresponding seat in the following row.
+ * For display, this element should have the same width as a seat for proper alignment.
+ */
+export interface SeatMapCabinRowSectionElementBassinet {
+    /**
+     * The type of this element.
+     */
+    type: "bassinet";
+}
+/**
+ * An empty space used for padding in some non-standard seat arrangements.
+ * For display, this element should have the same dimensions as a seat for proper alignment.
+ */
+export interface SeatMapCabinRowSectionElementEmpty {
+    /**
+     * The type of this element.
+     */
+    type: "empty";
+}
+/**
+ * An exit row represents the extra wide legroom used to reach aircraft exits. There is one exit_row element per row section.
+ * Exit row elements only occur in their own row, so they can be displayed as one element across the whole row. Displaying an exit row element filling all available space in its section or using the same width as the seat is also reasonable.
+ */
+export interface SeatMapCabinRowSectionElementExitRow {
+    /**
+     * The type of this element.
+     */
+    type: "exit_row";
+}
+/**
+ * A lavatory for use by passengers.
+ * For display, this element should ideally fill or shrink to available space in a row section. Displaying it with the same width as seat is also reasonable.
+ */
+export interface SeatMapCabinRowSectionElementLavatory {
+    /**
+     * The type of this element.
+     */
+    type: "lavatory";
+}
+/**
+ * A galley is the compartment where food is cooked or prepared. These are conventionally marked with a teacup symbol.
+ * For display, this element should ideally fill or shrink to available space in a row section. Displaying it with the same width as seat is also reasonable.
+ */
+export interface SeatMapCabinRowSectionElementGalley {
+    /**
+     * The type of this element.
+     */
+    type: "galley";
+}
+/**
+ * A closet used for storage. These are conventionally marked with a clothes hanger symbol.
+ * For display, this element should ideally fill or shrink to available space in a row section. Displaying it with the same width as seat is also reasonable.
+ */
+export interface SeatMapCabinRowSectionElementCloset {
+    /**
+     * The type of this element.
+     */
+    type: "closet";
+}
+/**
+ * A set of stairs to another deck.
+ * For display, this element should ideally fill or shrink to available space in a row section. Displaying it with the same width as seat is also reasonable.
+ */
+export interface SeatMapCabinRowSectionElementStairs {
+    /**
+     * The type of this element.
+     */
+    type: "stairs";
+}
+export type SeatMapCabinRowSectionElement = SeatMapCabinRowSectionElementSeat | SeatMapCabinRowSectionElementBassinet | SeatMapCabinRowSectionElementEmpty | SeatMapCabinRowSectionElementExitRow | SeatMapCabinRowSectionElementLavatory | SeatMapCabinRowSectionElementGalley | SeatMapCabinRowSectionElementCloset | SeatMapCabinRowSectionElementStairs;
+export type SeatMapCabinRowSectionElementType = SeatMapCabinRowSectionElement["type"];
+export type SeatMapCabinRowSectionElementAmenity = Exclude<SeatMapCabinRowSectionElementType, "empty" | "seat">;

package/react-dist/types/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./Aircraft";
+export * from "./Airline";
+export * from "./Airport";
+export * from "./City";
+export * from "./CreateOrderPayload";
+export * from "./CurrencyConversion";
+export * from "./DuffelAncillariesProps";
+export * from "./Offer";
+export * from "./Order";
+export * from "./Place";
+export * from "./SeatMap";

package/scripts/generate-fixture.ts

@@ -0,0 +1,200 @@
+import { config } from "dotenv";
+import fs from "fs";
+import prompts from "prompts";
+import { withPlural } from "../src/lib/withPlural";
+import { Offer } from "../src/types/Offer";
+
+config({ path: ".env.local" });
+
+const DUFFEL_API_TOKEN = process.env.DUFFEL_API_TOKEN || "";
+const DUFFEL_API_URL = process.env.DUFFEL_API_URL || "";
+const VERBOSE = process.env.VERBOSE === "true";
+
+// eslint-disable-next-line
+const log = console.log;
+
+if (DUFFEL_API_URL.includes("localhost"))
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+
+const duffelHeaders = {
+  "Duffel-Version": "v1",
+  "Accept-Encoding": "gzip",
+  Accept: "application/json",
+  "Content-Type": "application/json",
+  Authorization: `Bearer ${DUFFEL_API_TOKEN}`,
+};
+
+export const makeMockDateInTheFuture = (daysAhead) => {
+  const now = new Date(Date.now());
+  now.setDate(now.getDate() + daysAhead);
+  return now;
+};
+
+const createOfferRequest = async (
+  sliceInput: [string, string][],
+  adults: number,
+  requestedSources?: string[]
+) => {
+  const data = {
+    slices: sliceInput.map(([origin, destination], index) => ({
+      origin,
+      destination,
+      departure_date: makeMockDateInTheFuture(7 * (index + 1))
+        .toISOString()
+        .split("T")[0],
+    })),
+    passengers: Array(adults).fill({ type: "adult" }),
+    ...(requestedSources && { requested_sources: requestedSources }),
+  };
+
+  const response = await fetch(
+    DUFFEL_API_URL + "/air/offer_requests?return_offers=true",
+    {
+      method: "POST",
+      headers: duffelHeaders,
+      body: JSON.stringify({ data }),
+    }
+  );
+
+  return await response.json();
+};
+
+const getOffer = async (offerId: string): Promise<{ data: Offer }> => {
+  const response = await fetch(
+    process.env.DUFFEL_API_URL +
+      `/air/offers/${offerId}/?return_available_services=true`,
+    { headers: duffelHeaders }
+  );
+
+  return await response.json();
+};
+
+const getSeatMaps = async (offerId: string) => {
+  const response = await fetch(
+    process.env.DUFFEL_API_URL + `/air/seat_maps?offer_id=${offerId}`,
+    { headers: duffelHeaders }
+  );
+
+  return await response.json();
+};
+
+const main = async () => {
+  try {
+    // prompt user for how many slices they want
+    const { sliceCount } = await prompts({
+      type: "number",
+      name: "sliceCount",
+      message: "How many slices do you want?",
+      initial: 2,
+    });
+
+    // for each slice, prompt for origin and destination
+    const sliceInput = new Array<[string, string]>(sliceCount);
+    for (let i = 0; i < sliceCount; i++) {
+      let origin = sliceInput[i - 1]?.[0];
+
+      log(`\nSlice #${i + 1}`);
+      const { value } = await prompts({
+        type: "text",
+        name: "value",
+        message: "What is the origin?",
+        limit: 3,
+      });
+      origin = value;
+
+      const { destination } = await prompts({
+        type: "text",
+        name: "destination",
+        message: "What is the destination?",
+        limit: 3,
+      });
+      sliceInput[i] = [origin, destination];
+    }
+
+    // ask how many adults
+    log(`\n`);
+    const { adultCount } = await prompts({
+      type: "number",
+      name: "adultCount",
+      message: "How many adults traveling?",
+      initial: 1,
+    });
+
+    // ask for requested sources
+    log(`\n`);
+    const { requestedSources } = await prompts({
+      type: "text",
+      name: "requestedSources",
+      message: "What sources do you want to request?",
+      initial: "duffel_airways",
+    });
+
+    // run search
+    const { data: offerRequest } = await createOfferRequest(
+      sliceInput,
+      adultCount,
+      requestedSources ? requestedSources.split(",") : undefined
+    );
+    if (VERBOSE) {
+      const airlines = new Set(
+        offerRequest.offers.map((offer) => offer.owner.iata_code)
+      );
+      log(
+        `Received ${withPlural(
+          offerRequest.offers.length,
+          "offer",
+          "offers"
+        )} back ` +
+          `from ${withPlural(
+            airlines.size,
+            "airline",
+            "airlines"
+          )}(${Array.from(airlines.values()).join(",")})`
+      );
+      log(
+        `Search completed, offer request ID: ${offerRequest.id}.\nUsing first offer to get services: ${offerRequest.offers[0].id}\n`
+      );
+    }
+
+    // get offer
+    const { data: firstOffer } = await getOffer(offerRequest.offers[0].id);
+
+    // save to src/fixtures/offer
+    const _description =
+      `This fixture was generated by scripts/generate-fixture.ts. ` +
+      `It includes an offer with ${withPlural(
+        adultCount,
+        "passenger",
+        "passengers"
+      )} and ` +
+      `${withPlural(sliceCount, "slice", "slices")}: ${sliceInput.join(" ⇢ ")}`;
+
+    // Set offer to expire in 10 years so that this fixture won't trigger the
+    // "expired" error in the future.
+    const expires_at = makeMockDateInTheFuture(365 * 10).toISOString();
+
+    fs.writeFileSync(
+      `src/fixtures/offers/${firstOffer.id}.json`,
+      JSON.stringify({ _description, ...firstOffer, expires_at }, null, 2)
+    );
+
+    // get seat maps
+    const { data: seatMaps } = await getSeatMaps(firstOffer.id);
+
+    // save to src/fixtures/seat-maps
+    fs.writeFileSync(
+      `src/fixtures/seat-maps/${firstOffer.id}.json`,
+      JSON.stringify(seatMaps, null, 2)
+    );
+
+    log(`\n🐄 Fixtures saved for ${firstOffer.id}`);
+    log(`  ↳ /src/fixtures/offer/${firstOffer.id}.json`);
+    log(`  ↳ /src/fixtures/seat-maps/${firstOffer.id}.json\n`);
+  } catch (err) {
+    // eslint-disable-next-line
+    console.error(err);
+    process.exit(1);
+  }
+};
+
+export default main();

package/scripts/upload-to-cdn.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+
+# Exit if a command fails
+set -e
+
+# Define where to upload files too
+GCP_PREFIX=gs://duffel-assets/components
+
+# Gets current version from package.json 
+VERSION=$(jq '.version' package.json -r)
+
+# Check if version is empty
+if [ -z "$VERSION" ]; then
+  echo "Error: version is empty"
+  exit 1
+fi
+
+# Check if folder exists
+if gsutil -q stat "$GCP_PREFIX/$VERSION/duffel-ancillaries.js"; then
+  # Confirm with user before overriding
+  read -p "Version \`$VERSION\` already exists. Do you want to override it? (\`Y\` to continue) " -n 1 -r
+  echo
+  if [[ $REPLY =~ ^[Yy]$ ]]; then
+    # Delete old version from GCP
+    gcloud storage rm -r "$GCP_PREFIX/$VERSION"
+  else
+    echo "Aborting script."
+    exit 1
+  fi
+fi
+ 
+# Uploads fixtures
+gcloud storage cp -r cdn-dist "$GCP_PREFIX/$VERSION"
+ 

package/scripts.tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "commonjs",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["scripts/**/*", "src/**/*"]
+}

package/src/components/DuffelAncillaries/Card.tsx

@@ -0,0 +1,126 @@
+import { Icon, IconName } from "@components/shared/Icon";
+import classNames from "classnames";
+import * as React from "react";
+
+export interface CardProps {
+  buttonTitle: string;
+  title: string;
+  icon: IconName;
+  onClick?: (() => void) | null;
+  children: React.ReactNode;
+  copy: string;
+  isLoading?: boolean;
+  disabled?: boolean;
+  isSelected?: boolean;
+}
+
+export const Card: React.FC<CardProps> = ({
+  buttonTitle,
+  title,
+  icon,
+  copy,
+  onClick,
+  children,
+  isLoading,
+  disabled,
+  isSelected,
+}) => {
+  const hasChildren = React.Children.toArray(children).length > 0;
+
+  return (
+    <button
+      title={buttonTitle}
+      {...(onClick && { onClick })}
+      disabled={disabled}
+      className={classNames(
+        "ancillary-card",
+        isLoading && "ancillary-card--loading"
+      )}
+      // We are using inline styles here because
+      // we don't want the cards to appear unstyled
+      // before the CSS stylesheet loads.
+      // This is important for this component since it
+      // be on visible on the page when it loads.
+      style={{
+        cursor: "pointer",
+        background: "transparent",
+        color: "var(--GREY-900)",
+        border: "solid 1px rgba(226, 226, 232, 1)",
+        display: "flex",
+        rowGap: "4px",
+        padding: "20px",
+        borderRadius: "8px",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        flexDirection: "column",
+        width: "100%",
+        boxSizing: "border-box",
+        fontSize: "16px",
+        fontWeight: "400",
+        lineHeight: "24px",
+        letterSpacing: "0em",
+        transition:
+          "border-color 0.3s var(--TRANSITION-CUBIC-BEZIER) background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          marginBlock: "0",
+          textAlign: "start",
+          marginTop: "2px",
+          columnGap: "12px",
+          width: "100%",
+        }}
+      >
+        <div>
+          {isSelected ? (
+            <Icon name="check" className="ancillary-card__selected-icon" />
+          ) : (
+            <Icon name={icon} />
+          )}
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "start",
+            width: "100%",
+          }}
+        >
+          <p
+            className="p1--semibold"
+            style={{
+              marginBlock: "0",
+            }}
+          >
+            {title}
+          </p>
+          <div className="ancillary-card__children">
+            {hasChildren ? (
+              children
+            ) : (
+              <Icon
+                name="expand_content"
+                className="ancillary-card__expand-icon"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      <p
+        className="p1--regular"
+        style={{
+          textAlign: "start",
+          color: "var(--GREY-600)",
+          marginLeft: "34px",
+          marginBlock: "0",
+        }}
+      >
+        {copy}
+      </p>
+    </button>
+  );
+};

package/src/components/DuffelAncillaries/Counter.tsx

@@ -0,0 +1,40 @@
+import { IconButton } from "@components/shared/IconButton";
+import * as React from "react";
+
+interface CounterProps {
+  id: string;
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export const Counter: React.FC<CounterProps> = ({
+  id,
+  min,
+  max,
+  value,
+  onChange,
+}) => (
+  <div className="counter" id={id}>
+    <IconButton
+      icon="minus"
+      title="Remove one"
+      id={`${id}-minus`}
+      data-testid={`${id}-minus`}
+      variant="outlined"
+      disabled={value <= min}
+      onClick={() => onChange(Math.max(value - 1, min))}
+    />
+    <div className="counter__count-label">{value}</div>
+    <IconButton
+      icon="add"
+      title="Add one"
+      id={`${id}-plus`}
+      data-testid={`${id}-plus`}
+      variant="outlined"
+      disabled={value >= max}
+      onClick={() => onChange(Math.min(value + 1, max))}
+    />
+  </div>
+);