@duffel/components 2.7.20 → 3.0.0-canary

package/src/components/seats/SeatSelectionModal.tsx

@@ -0,0 +1,142 @@
+import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
+import { getPassengerBySegmentList } from "@lib/getPassengerBySegmentList";
+import { getPassengerMapById } from "@lib/getPassengerMapById";
+import { getPassengerName } from "@lib/getPassengerName";
+import { getSegmentList } from "@lib/getSegmentList";
+import { getServicePriceMapById } from "@lib/getServicePriceMapById";
+import React from "react";
+import {
+  CreateOrderPayload,
+  CreateOrderPayloadSeatService,
+} from "../../types/CreateOrderPayload";
+import { Offer } from "../../types/Offer";
+import { SeatMap } from "../../types/SeatMap";
+import { Modal } from "../Modal";
+import { SeatSelectionModalBody } from "./SeatSelectionModalBody";
+import { SeatSelectionModalFooter } from "./SeatSelectionModalFooter";
+import { SeatSelectionModalHeader } from "./SeatSelectionModalHeader";
+
+export interface SeatSelectionModalProps {
+  isOpen: boolean;
+  offer?: Offer;
+  seatMaps?: SeatMap[];
+  selectedServices: CreateOrderPayloadSeatService[];
+  passengers: CreateOrderPayload["passengers"];
+  onClose: (selectedServices: CreateOrderPayloadSeatService[]) => void;
+}
+
+export const SeatSelectionModal: React.FC<SeatSelectionModalProps> = ({
+  isOpen,
+  offer,
+  passengers,
+  seatMaps,
+  selectedServices,
+  onClose,
+}) => {
+  const [currentPermutationIndex, setCurrentPermutationIndex] =
+    React.useState(0);
+
+  const [selectedServicesState, setSelectedServicesState] =
+    React.useState<CreateOrderPayloadSeatService[]>(selectedServices);
+  const selectedServicesStateMap = selectedServicesState.reduce(
+    (all, service) => ({ ...all, [service.id]: service }),
+    {} as Record<string, CreateOrderPayloadSeatService>
+  );
+
+  if (!offer || !seatMaps) return null;
+
+  const segments = getSegmentList(offer);
+  const passengerMapById = getPassengerMapById(passengers);
+  const servicePricesMap = getServicePriceMapById(offer.available_services);
+  const segmentAndPassengerPermutations = getPassengerBySegmentList(segments);
+  const {
+    passenger: { passenger_id: currentPassengerId },
+    passengerIndex: currentPassengerIndex,
+    segment: { id: currentSegmentId },
+  } = segmentAndPassengerPermutations[currentPermutationIndex];
+
+  const currentSegment = segments.find(({ id }) => id === currentSegmentId)!;
+  const currentPassenger = passengerMapById[currentPassengerId];
+  const currentSeatMap = seatMaps.find(
+    (seatMap) => seatMap.segment_id === currentSegmentId
+  )!;
+
+  const currentPassengerName = getPassengerName(
+    currentPassenger,
+    offer.passengers[currentPassengerIndex],
+    currentPassengerIndex + 1
+  );
+
+  const onSeatToggle = (seatServiceToToggle: CreateOrderPayloadSeatService) => {
+    let newSeatServices = new Array<CreateOrderPayloadSeatService>();
+
+    for (const selectedServiceFromState of selectedServicesState) {
+      const hasClickedSeatToToggleOff =
+        selectedServiceFromState.id === seatServiceToToggle.id &&
+        seatServiceToToggle.quantity === 0;
+
+      const isSelectedServiceFromStateForTheSameSegmentAndPassengerPermutation =
+        selectedServiceFromState.serviceInformation?.segmentId ===
+          currentSegmentId &&
+        selectedServiceFromState.serviceInformation?.passengerId ===
+          currentPassengerId;
+
+      if (
+        !hasClickedSeatToToggleOff &&
+        !isSelectedServiceFromStateForTheSameSegmentAndPassengerPermutation
+      ) {
+        newSeatServices = [...newSeatServices, selectedServiceFromState];
+      }
+    }
+
+    if (seatServiceToToggle.quantity > 0) {
+      newSeatServices = [...newSeatServices, seatServiceToToggle];
+    }
+
+    setSelectedServicesState(newSeatServices);
+  };
+
+  const currencyToUse =
+    getCurrencyForSeatMaps(seatMaps) ?? offer.total_currency;
+
+  return (
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServicesState)}>
+      <SeatSelectionModalHeader
+        segmentAndPassengerPermutationsCount={
+          segmentAndPassengerPermutations.length
+        }
+        currentSegment={currentSegment}
+        currentPassengerName={currentPassengerName}
+        currentSegmentAndPassengerPermutationsIndex={currentPermutationIndex}
+        setCurrentSegmentAndPassengerPermutationsIndex={
+          setCurrentPermutationIndex
+        }
+      />
+      <SeatSelectionModalBody
+        selectedServicesMap={selectedServicesStateMap}
+        seatMap={currentSeatMap}
+        onSeatToggled={onSeatToggle}
+        currentPassengerId={currentPassengerId}
+        currentPassengerName={currentPassengerName}
+        currentSegmentId={currentSegmentId}
+      />
+      <SeatSelectionModalFooter
+        seatMaps={seatMaps}
+        currency={currencyToUse}
+        selectedServices={selectedServicesState}
+        servicePrices={servicePricesMap}
+        isFirstSegment={currentPermutationIndex === 0}
+        isLastSegment={
+          currentPermutationIndex + 1 === segmentAndPassengerPermutations.length
+        }
+        onNextSegmentButtonClicked={() => {
+          setCurrentPermutationIndex(currentPermutationIndex + 1);
+        }}
+        onPreviousSegmentButtonClicked={() => {
+          setCurrentPermutationIndex(currentPermutationIndex - 1);
+        }}
+        onClose={() => onClose(selectedServicesState)}
+      />
+    </Modal>
+  );
+};

package/src/components/seats/SeatSelectionModalBody.tsx

@@ -0,0 +1,13 @@
+import { ModalBody } from "@components/Modal";
+import React from "react";
+import { SeatMap, SeatMapProps } from "./SeatMap";
+
+export type SeatSelectionModalBodyProps = SeatMapProps;
+
+export const SeatSelectionModalBody: React.FC<SeatSelectionModalBodyProps> = (
+  props
+) => (
+  <ModalBody>
+    <SeatMap {...props} />
+  </ModalBody>
+);

package/src/components/seats/SeatSelectionModalFooter.tsx

@@ -0,0 +1,82 @@
+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";
+
+export interface SeatSelectionModalFooterProps {
+  currency: string;
+  selectedServices: CreateOrderPayloadServices;
+  servicePrices: ServicePriceMapById;
+
+  isFirstSegment: boolean;
+  isLastSegment: boolean;
+
+  onNextSegmentButtonClicked: () => void;
+  onPreviousSegmentButtonClicked: () => void;
+  onClose: () => void;
+  seatMaps: SeatMap[];
+}
+
+export const SeatSelectionModalFooter: React.FC<
+  SeatSelectionModalFooterProps
+> = ({
+  selectedServices,
+  servicePrices,
+  currency,
+  isFirstSegment,
+  isLastSegment,
+  onNextSegmentButtonClicked,
+  onPreviousSegmentButtonClicked,
+  onClose,
+  seatMaps,
+}) => {
+  const totalQuantity = getTotalQuantity(selectedServices);
+  const totalAmount = getTotalAmountForServicesWithPriceMap(
+    servicePrices,
+    selectedServices,
+    seatMaps
+  );
+  const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
+
+  return (
+    <div style={{ padding: "16px 24px 24px" }}>
+      <div className="flex--space-between">
+        <div>Price for {withPlural(totalQuantity, "seat", "seats")}</div>
+        <div className="h3--semibold">+ {totalAmountLabel}</div>
+      </div>
+
+      <div
+        style={{
+          marginTop: "16px",
+          display: "grid",
+          columnGap: "12px",
+          gridTemplateColumns: "repeat(2, 1fr)",
+        }}
+      >
+        <Button
+          size={48}
+          disabled={isFirstSegment}
+          variant="outlined"
+          onClick={() => onPreviousSegmentButtonClicked()}
+        >
+          Back
+        </Button>
+
+        <Button
+          size={48}
+          data-testid="confirm-selection-for-seats"
+          onClick={() =>
+            isLastSegment ? onClose() : onNextSegmentButtonClicked()
+          }
+        >
+          {isLastSegment ? "Confirm" : "Next"}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/seats/SeatSelectionModalHeader.tsx

@@ -0,0 +1,87 @@
+import { formatDateString } from "@lib/formatDate";
+import React from "react";
+import { OfferSliceSegment } from "../../types/Offer";
+
+export interface SeatSelectionModalHeaderProps {
+  segmentAndPassengerPermutationsCount: number;
+  currentSegment: OfferSliceSegment;
+  currentPassengerName: string;
+
+  currentSegmentAndPassengerPermutationsIndex: number;
+  setCurrentSegmentAndPassengerPermutationsIndex: (index: number) => void;
+}
+
+export const SeatSelectionModalHeader: React.FC<
+  SeatSelectionModalHeaderProps
+> = ({
+  segmentAndPassengerPermutationsCount,
+  currentSegmentAndPassengerPermutationsIndex,
+  currentSegment,
+  currentPassengerName,
+  setCurrentSegmentAndPassengerPermutationsIndex,
+}) => (
+  <div style={{ padding: "24px 24px 16px" }}>
+    <div style={{ display: "flex", columnGap: "4px" }}>
+      {Array(segmentAndPassengerPermutationsCount)
+        .fill(0)
+        .map((_, index) =>
+          index === currentSegmentAndPassengerPermutationsIndex ? (
+            <ActiveSegment key={`segment_${index}`} />
+          ) : (
+            <InactiveSegment
+              key={`segment_${index}`}
+              onClick={() =>
+                setCurrentSegmentAndPassengerPermutationsIndex(index)
+              }
+            />
+          )
+        )}
+    </div>
+    <h2 className="h3--semibold" style={{ marginBlock: "12px 0px" }}>
+      Flight to {currentSegment.destination.iata_code}
+      <span
+        className="p2--regular"
+        style={{
+          color: "var(--GREY-600)",
+          marginLeft: "8px",
+        }}
+      >
+        {formatDateString(currentSegment.departing_at)}
+      </span>
+    </h2>
+    <p
+      className="h3--semibold"
+      style={{ color: `var(--GREY-600)`, marginBlock: "0 4px" }}
+    >
+      {currentPassengerName}
+    </p>
+  </div>
+);
+
+const InactiveSegment: React.FC<{
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({ onClick, style }) => (
+  <button
+    onClick={onClick}
+    style={{
+      border: "none",
+      width: "4px",
+      height: "4px",
+      padding: "0",
+      borderRadius: "4px",
+      backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
+      transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
+      ...style,
+    }}
+  />
+);
+
+const ActiveSegment = () => (
+  <InactiveSegment
+    onClick={undefined}
+    style={{
+      backgroundColor: "rgb(var(--ACCENT))",
+    }}
+  />
+);

package/src/components/seats/SeatUnavailable.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
+import { Icon } from "../Icon";
+
+export const SeatUnavailable: React.FC<{
+  seat: SeatMapCabinRowSectionElementSeat;
+}> = ({ seat }) => (
+  <span
+    className="map-element map-element__seat"
+    aria-label={`${seat.designator} ${seat.name || "Seat"} Unavailable`}
+  >
+    <Icon name="close" size={14} />
+  </span>
+);

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

@@ -0,0 +1,57 @@
+<!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/ancillaries/index.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/index.html

@@ -0,0 +1,48 @@
+<!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/ancillaries/index.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

@@ -0,0 +1,157 @@
+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);
+
+console.log(`\n🐄 Serving example on http://localhost:6262`);

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

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

@@ -0,0 +1,16 @@
+{
+  "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

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