@duffel/components 3.0.0-canary → 3.0.0

package/config/esbuild.dev.config.js

@@ -27,7 +27,7 @@ const COMPONENT_CDN = process.env.COMPONENT_CDN.startsWith("http://localhost:")
       // the component will attempt to fetch it from the hosted folder.
       require("esbuild-copy-static-files")({
         src: "src/fixtures",
-        dest: "dist/ancillaries/fixtures",
+        dest: "cdn-dist/fixtures",
         dereference: true,
         recursive: true,
       }),
@@ -36,10 +36,11 @@ const COMPONENT_CDN = process.env.COMPONENT_CDN.startsWith("http://localhost:")
 
   let { host, port } = await esbuildContext.serve({
     host: "localhost",
-    servedir: "dist",
+    servedir: "cdn-dist",
     port: 8000,
   });
+  await esbuildContext.watch();
 
+  // eslint-disable-next-line
   console.log(`\n🐄 Serving component on http://${host}:${port}`);
-  await esbuildContext.watch();
 })();

package/config/esbuild.react.config.js

@@ -20,11 +20,11 @@ const envVariablesToDefine = {
 esbuild
   .build({
     define: envVariablesToDefine,
-    entryPoints: ["src/index.ts"],
+    entryPoints: ["src/index.ts", "src/custom-elements.ts"],
     bundle: true,
     minify: true,
     sourcemap: true,
-    outfile: `react-dist/index.js`,
+    outdir: "react-dist",
     format: "cjs",
     external: ["react", "react-dom"],
     plugins: [
@@ -35,7 +35,7 @@ esbuild
         include: `./react-dist`,
         authToken: process.env.SENTRY_AUTH_TOKEN,
         logLevel: "info",
-        release: `react-${VERSION}`,
+        release: VERSION,
       }),
     ],
   })

package/package.json

@@ -1,9 +1,20 @@
 {
   "name": "@duffel/components",
-  "version": "3.0.0-canary",
+  "version": "3.0.0",
   "private": false,
   "license": "MIT",
   "main": "react-dist/index.js",
+  "exports": {
+    ".": "./react-dist/index.js",
+    "./custom-elements": "./react-dist/custom-elements.js"
+  },
+  "maintainers": [
+    {
+      "name": "Duffel",
+      "email": "hello@duffel.com",
+      "url": "https://duffel.com"
+    }
+  ],
   "scripts": {
     "precdn-build": "rm -rf ./cdn-dist",
     "cdn-build": "node config/esbuild.cdn.config.js",
@@ -49,6 +60,8 @@
   },
   "dependencies": {
     "@sentry/browser": "^7.43.0",
+    "@stripe/react-stripe-js": "^2.1.0",
+    "@stripe/stripe-js": "^1.54.0",
     "classnames": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -130,7 +143,7 @@
       "main"
     ]
   },
-  "description": "## What is this?",
+  "description": "Component library to build your travel product with Duffel.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/duffelhq/duffel-checkout.git"
@@ -139,12 +152,10 @@
     "Duffel",
     "ancillaries",
     "seats",
-    "seat",
-    "map",
+    "seat maps",
     "baggage",
     "travel"
   ],
-  "author": "duffel.com",
   "bugs": {
     "url": "https://github.com/duffelhq/duffel-checkout/issues"
   },

package/react-dist/components/{Card.d.ts → DuffelAncillaries/Card.d.ts}

@@ -1,5 +1,5 @@
+import { IconName } from "@components/shared/Icon";
 import * as React from "react";
-import { IconName } from "./Icon";
 export interface CardProps {
     buttonTitle: string;
     title: string;

package/react-dist/components/{DuffelAncillaries.d.ts → DuffelAncillaries/DuffelAncillaries.d.ts}

@@ -1,3 +1,3 @@
 import * as React from "react";
-import { DuffelAncillariesProps } from "../types/DuffelAncillariesProps";
+import { DuffelAncillariesProps } from "../../types/DuffelAncillariesProps";
 export declare const DuffelAncillaries: React.FC<DuffelAncillariesProps>;

package/react-dist/components/{DuffelAncillariesCustomElement.d.ts → DuffelAncillaries/DuffelAncillariesCustomElement.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DuffelAncillariesPropsWithClientKeyAndOfferId, DuffelAncillariesPropsWithOfferIdForFixture, DuffelAncillariesPropsWithOffersAndSeatMaps, DuffelAncillariesPropWithOfferAndClientKey, OnPayloadReady } from "../types/DuffelAncillariesProps";
+import { DuffelAncillariesPropsWithClientKeyAndOfferId, DuffelAncillariesPropsWithOfferIdForFixture, DuffelAncillariesPropsWithOffersAndSeatMaps, DuffelAncillariesPropWithOfferAndClientKey, OnPayloadReady } from "../../types/DuffelAncillariesProps";
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionCard.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
+import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 export interface BaggageSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionController.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceBaggage } from "../../../types/Offer";
 interface BaggageSelectionControllerProps {
     segmentId: string;
     passengerId: string;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
+import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 export interface BaggageSelectionModalProps {
     isOpen: boolean;
     offer?: Offer;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalBody.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadPassenger, CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer, OfferSliceSegment } from "../../types/Offer";
+import { CreateOrderPayloadPassenger, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer, OfferSliceSegment } from "../../../types/Offer";
 export interface BaggageSelectionModalBodyProps {
     offer: Offer;
     segment: OfferSliceSegment;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalBodyPassenger.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceBaggage, OfferSliceSegmentPassengerBaggage } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceBaggage, OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
 export interface BaggageSelectionModalBodyPassengerProps {
     segmentId: string;
     passengerId: string;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalFooter.d.ts

@@ -1,6 +1,6 @@
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
 export interface BaggageSelectionModalFooterProps {
     currency: string;
     selectedServices: CreateOrderPayloadServices;

package/react-dist/components/{bags → DuffelAncillaries/bags}/BaggageSelectionModalHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OfferSliceSegment } from "../../types/Offer";
+import { OfferSliceSegment } from "../../../types/Offer";
 export interface BaggageSelectionModalHeaderProps {
     segmentCount: number;
     currentSegmentIndex: number;

package/react-dist/components/{bags → DuffelAncillaries/bags}/IncludedBaggageBanner.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OfferSliceSegmentPassengerBaggage } from "../../types/Offer";
+import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
 interface IncludedBaggageBannerProps {
     includedBaggage: OfferSliceSegmentPassengerBaggage[];
 }

package/react-dist/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionCard.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 export interface CfarSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;

package/react-dist/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
 export interface CfarSelectionModalProps {
     isOpen: boolean;
     offerCurrency?: Offer["base_currency"];

package/react-dist/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModalBody.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
+import { Offer, OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
 export interface CfarSelectionModalBodyProps {
     offerCurrency: Offer["base_currency"];
     service: OfferAvailableServiceCancelForAnyReason;

package/react-dist/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModalFooter.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
 export interface CfarSelectionModalFooterProps {
     service: OfferAvailableServiceCancelForAnyReason;
     selectedServices: CreateOrderPayloadServices;

package/react-dist/components/{seats → DuffelAncillaries/seats}/Amenity.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 export interface AmenityProps {
     type: SeatMapCabinRowSectionElementAmenity;
 }

package/react-dist/components/{seats → DuffelAncillaries/seats}/Element.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElement } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
 interface ElementProps {
     sectionIndex: number;
     elementIndex: number;

package/react-dist/components/{seats → DuffelAncillaries/seats}/Legend.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 export interface LegendProps {
     /**
      * The set of additional symbols to display

package/react-dist/components/{seats → DuffelAncillaries/seats}/Row.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRow } from "../../../types/SeatMap";
 export interface RowProps {
     row: SeatMapCabinRow;
     hasWings: boolean;

package/react-dist/components/{seats → DuffelAncillaries/seats}/RowSection.d.ts

@@ -1,6 +1,6 @@
 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";
 interface RowSectionProps {
     row: SeatMapCabinRow;
     rowNumber: string | null;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 interface SeatElementProps {
     element: SeatMapCabinRowSectionElementSeat;
     currentSegmentId: string;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatInfo.d.ts

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

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatMap.d.ts

@@ -1,6 +1,6 @@
 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";
 export interface SeatMapProps {
     seatMap: SeatMapType;
     selectedServicesMap: Record<string, CreateOrderPayloadSeatService>;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatSelectionCard.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
+import { CreateOrderPayload, CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 export interface SeatSelectionCardProps {
     isLoading: boolean;
     offer?: Offer;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatSelectionModal.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CreateOrderPayload, CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
+import { CreateOrderPayload, CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 export interface SeatSelectionModalProps {
     isOpen: boolean;
     offer?: Offer;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalFooter.d.ts

@@ -1,7 +1,7 @@
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { SeatMap } from "../../types/SeatMap";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { SeatMap } from "../../../types/SeatMap";
 export interface SeatSelectionModalFooterProps {
     currency: string;
     selectedServices: CreateOrderPayloadServices;

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalHeader.d.ts

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

package/react-dist/components/{seats → DuffelAncillaries/seats}/SeatUnavailable.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 export declare const SeatUnavailable: React.FC<{
     seat: SeatMapCabinRowSectionElementSeat;
 }>;

package/react-dist/components/DuffelPayments/DuffelPayments.d.ts

@@ -0,0 +1,11 @@
+import { StripeError } from "@stripe/stripe-js";
+import * as React from "react";
+import { CustomStyles } from "../../types";
+export interface DuffelPaymentsProps {
+    paymentIntentClientToken: string;
+    onSuccessfulPayment: () => void;
+    onFailedPayment: (error: StripeError) => void;
+    styles?: CustomStyles;
+    debug?: boolean;
+}
+export declare const DuffelPayments: React.FC<DuffelPaymentsProps>;

package/react-dist/components/DuffelPayments/DuffelPaymentsCustomElement.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { DuffelPaymentsProps } from "./DuffelPayments";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "duffel-payments": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+type DuffelPaymentsCustomElementRenderArguments = Pick<DuffelPaymentsProps, "paymentIntentClientToken" | "styles">;
+export declare function renderDuffelPaymentsCustomElement(props: DuffelPaymentsCustomElementRenderArguments): void;
+export declare function onDuffelPaymentsSuccessfulPayment(onSuccessfulPayment: DuffelPaymentsProps["onSuccessfulPayment"]): void;
+export declare function onDuffelPaymentsFailedPayment(onFailedPayment: DuffelPaymentsProps["onFailedPayment"]): void;
+export {};

package/react-dist/components/{Button.d.ts → shared/Button.d.ts}

@@ -1,4 +1,4 @@
-import { IconName } from "@components/Icon";
+import { IconName } from "@components/shared/Icon";
 import * as React from "react";
 declare const BUTTON_VARIANTS: {
     primary: string;
@@ -13,7 +13,7 @@ declare const BUTTON_SIZES: {
 };
 type ButtonSizes = keyof typeof BUTTON_SIZES;
 type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-export interface ButtonProps extends Pick<NativeButtonProps, "id" | "onClick" | "disabled" | "children" | "className"> {
+export interface ButtonProps extends Pick<NativeButtonProps, "id" | "onClick" | "disabled" | "children" | "className" | "type"> {
     "data-testid"?: string;
     iconBefore?: IconName;
     variant?: ButtonVariants;

package/react-dist/components/{ErrorBoundary.d.ts → shared/ErrorBoundary.d.ts}

@@ -8,6 +8,6 @@ export declare class ErrorBoundary extends React.Component<{
     static getDerivedStateFromError(): {
         hasError: boolean;
     };
-    componentDidCatch(error: Error, context: Record<any, any>): void;
+    componentDidCatch(error: Error): void;
     render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/react-dist/components/{IconButton.d.ts → shared/IconButton.d.ts}

@@ -1,5 +1,5 @@
-import { IconName } from "@components/Icon";
 import * as React from "react";
+import { IconName } from "./Icon";
 declare const ICON_BUTTON_VARIANTS: {
     primary: string;
     outlined: string;

package/react-dist/components/{NonIdealState.d.ts → shared/NonIdealState.d.ts}

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare const NonIdealState: React.FC<React.PropsWithChildren<{
     style?: React.CSSProperties;
 }>>;

package/react-dist/custom-elements.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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";