@duffel/components 3.4.1 → 3.4.3--canary.0

package/README.md

@@ -125,7 +125,7 @@ If you are not in a node environment and can't rely on npm to install the packag
      document.querySelector("duffel-ancillaries");
 
    duffelAncillariesElement.addEventListener("onPayloadReady", (event) =>
-     console.log("onPayloadReady\n", event.detail)
+     console.log("onPayloadReady\n", event.detail),
    );
    ```
 

package/components/DuffelCardForm/DuffelCardForm.d.ts

@@ -1,3 +1,4 @@
 import * as React from "react";
 import { DuffelCardFormProps } from "./lib/types";
-export declare const DuffelCardForm: React.FC<DuffelCardFormProps>;
+import { DuffelCardFormActions } from "./lib/useDuffelCardFormActions";
+export declare const DuffelCardForm: React.ForwardRefExoticComponent<DuffelCardFormProps & React.RefAttributes<DuffelCardFormActions>>;

package/components/DuffelCardForm/lib/getIFrameEventListener.d.ts

@@ -2,6 +2,6 @@ import { DuffelCardFormProps } from "./types";
 type Inputs = {
     setIFrameHeight: (height: string) => void;
     postMessageWithStyles: () => void;
-} & Pick<DuffelCardFormProps, "onValidateSuccess" | "onValidateFailure" | "onCreateCardForTemporaryUseSuccess" | "onCreateCardForTemporaryUseFailure">;
-export declare function getIFrameEventListener(baseUrl: string, { postMessageWithStyles, setIFrameHeight, onValidateSuccess, onValidateFailure, onCreateCardForTemporaryUseSuccess, onCreateCardForTemporaryUseFailure, }: Inputs): (event: MessageEvent) => void;
+} & Pick<DuffelCardFormProps, "onValidateSuccess" | "onValidateFailure" | "onCreateCardForTemporaryUseSuccess" | "onCreateCardForTemporaryUseFailure" | "onSaveCardSuccess" | "onSaveCardFailure">;
+export declare function getIFrameEventListener(iFrameURL: URL, { postMessageWithStyles, setIFrameHeight, onValidateSuccess, onValidateFailure, onCreateCardForTemporaryUseSuccess, onCreateCardForTemporaryUseFailure, onSaveCardSuccess, onSaveCardFailure, }: Inputs): (event: MessageEvent) => void;
 export {};

package/components/DuffelCardForm/lib/getIFrameOriginForEnvironment.d.ts

@@ -0,0 +1,2 @@
+import { DuffelCardFormProps } from "./types";
+export declare function getIFrameOriginForEnvironment(tokenProxyEnvironment: DuffelCardFormProps["tokenProxyEnvironment"]): string;

package/components/DuffelCardForm/lib/getIframeURL.d.ts

@@ -0,0 +1,2 @@
+import { DuffelCardFormProps } from "./types";
+export declare function getIframeURL(tokenProxyEnvironment: DuffelCardFormProps["tokenProxyEnvironment"], intent: DuffelCardFormProps["intent"], clientKey: DuffelCardFormProps["clientKey"], savedCardData: DuffelCardFormProps["savedCardData"]): URL;

package/components/DuffelCardForm/lib/getPathnameForIntent.d.ts

@@ -0,0 +1,2 @@
+import { DuffelCardFormIntent } from "./types";
+export declare function getPathnameForIntent(intent: DuffelCardFormIntent): string;

package/components/DuffelCardForm/lib/postMessageToCreateCardForTemporaryUse.d.ts

@@ -0,0 +1 @@
+export declare function postMessageToCreateCardForTemporaryUse(iFrameReference: React.RefObject<HTMLIFrameElement>, baseUrl: URL): void;

package/components/DuffelCardForm/lib/postMessageToSaveCard.d.ts

@@ -0,0 +1 @@
+export declare function postMessageToSaveCard(iFrameReference: React.RefObject<HTMLIFrameElement>, baseUrl: URL): void;

package/components/DuffelCardForm/lib/postMessageWithStyles.d.ts

@@ -0,0 +1,2 @@
+import { DuffelCardFormStyles } from "./types";
+export declare function postMessageWithStyles(iFrameReference: React.RefObject<HTMLIFrameElement>, baseUrl: URL, styles: DuffelCardFormStyles | undefined): void;

package/components/DuffelCardForm/lib/types.d.ts

@@ -1,11 +1,23 @@
-export interface CreateCardForTemporaryUseData {
+interface CommonCardData {
     id: string;
+    last_4_digits: string;
     live_mode: false;
 }
-export interface CreateCardForTemporaryUseError {
+interface CardActionError {
     status: number;
     message: string;
 }
+export interface CreateCardForTemporaryUseData extends CommonCardData {
+    saved: false;
+    /** The card will no longer be available for use after this time. */
+    unavailable_at: string;
+}
+export interface SaveCardData extends CommonCardData {
+    saved: true;
+    unavailable_at: null;
+}
+export type SaveCardError = CardActionError;
+export type CreateCardForTemporaryUseError = CardActionError;
 /**
  * An object where each key value pair is a style to be applied.
  * e.g. { 'background-image': 'red', 'color': '#000', 'margin-inline': '8px' }
@@ -28,10 +40,11 @@ export interface DuffelCardFormStyles {
     sectionTitle?: StylesMap;
     layoutGrid?: StylesMap;
 }
-export type DuffelCardFormActions = "validate" | "create-card-for-temporary-use";
+export type DuffelCardFormAction = "validate" | "save-card" | "create-card-for-temporary-use";
+export type DuffelCardFormIntent = "to-create-card-for-temporary-use" | "to-use-saved-card" | "to-save-card";
 export interface DuffelCardFormProps {
     /**
-     * The client key present in the Quote object.
+     * The client key retrieved from the Duffel API.
      */
     clientKey: string;
     /**
@@ -45,37 +58,67 @@ export interface DuffelCardFormProps {
      */
     tokenProxyEnvironment?: "development" | "staging" | "production";
     /**
-     * The actions you'd like the component to perform.
-     *
-     * This prop is a dependecy of a useEffect hook in the component
-     * and so when it's changed it will perform the action you specify.
-     *
-     * The action `create-card-for-temporary-use` will only happen once `validate` has been successful.
+     * The card intent defines what the form is meant to look like.
+     * It can be one of:
      *
+     * - `to-create-card-for-temporary-use`: The full form will be shown. You may also use this intent for the use case of using and saving the card.
+     * - `to-use-saved-card`: When using this intent also provide the saved card ID. Only a cvv field will be rendered.
+     * - `to-save-card`: The form will be shown without the cvv field. This only allows you to save a card for future use,
+     *    but not create an id for immediate, temporary use. For the use case of saving during checkout or save + use, use the `to-create-card-for-temporary-use` intent.
+     */
+    intent: DuffelCardFormIntent;
+    /**
+     * Once a card is saved, in order to use it, travellers need to enter its cvv.
+     * When using the `use-saved-card` intent, you must provide the card ID.
      */
-    actions: DuffelCardFormActions[];
+    savedCardData?: {
+        id: string;
+        brand: string;
+    };
     /**
      * This function will be called when the card form validation has been successful.
      */
-    onValidateSuccess: () => void;
+    onValidateSuccess?: () => void;
     /**
      * If the card form validation is successful but data is changed afterwards,
      * making it invalid, this function will be called.
      */
-    onValidateFailure: () => void;
+    onValidateFailure?: () => void;
     /**
      * This function will be called when the card has been created for temporary use.
      *
      * This callback will only be triggered if the `create-card-for-temporary-use`
-     * action is present in the `actions` prop.
+     * action is present in the `actions` prop. Alternatively,
+     * you may use the `triggerCreateCardForTemporaryUse` function from the
+     * `useDuffelCardFormActions` hook.
      */
-    onCreateCardForTemporaryUseSuccess: (data: CreateCardForTemporaryUseData) => void;
+    onCreateCardForTemporaryUseSuccess?: (data: CreateCardForTemporaryUseData) => void;
     /**
      * This function will be called when the component has failed to create the card for temporary use.
      *
      * This callback will only be triggered if the `create-card-for-temporary-use`
-     * action is present in the `actions` prop.
+     * action is present in the `actions` prop. Alternatively,
+     * you may use the `triggerCreateCardForTemporaryUse` function from the
+     * `useDuffelCardFormActions` hook.
+     */
+    onCreateCardForTemporaryUseFailure?: (error: CreateCardForTemporaryUseError) => void;
+    /**
+     * This function will be called when the card has been saved.
+     *
+     * This callback will only be triggered if the `save-card`
+     * action is present in the `actions` prop. Alternatively,
+     * you may use the `triggerSaveCard` function from the
+     * `useDuffelCardFormActions` hook.
+     */
+    onSaveCardSuccess?: (data: SaveCardData) => void;
+    /**
+     * This function will be called when saving the card has failed.
+     *
+     * This callback will only be triggered if the `save-card`
+     * action is present in the `actions` prop. Alternatively,
+     * you may use the `triggerSaveCard` function from the
+     * `useDuffelCardFormActions` hook.
      */
-    onCreateCardForTemporaryUseFailure: (error: CreateCardForTemporaryUseError) => void;
+    onSaveCardFailure?: (error: SaveCardError) => void;
 }
 export {};

package/components/DuffelCardForm/lib/useDuffelCardFormActions.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface DuffelCardFormActions {
+    saveCard: () => void;
+    createCardForTemporaryUse: () => void;
+}
+export interface UseDuffelCardFormActionsHook {
+    /**
+     * The ref you should pass to the DuffelCardForm component.
+     */
+    ref: React.RefObject<DuffelCardFormActions>;
+    /**
+     *  Call this function to tell the component to save the card.
+     */
+    saveCard: () => void;
+    /**
+     *  Call this function to tell the component to create a card for temporary use.
+     */
+    createCardForTemporaryUse: () => void;
+}
+/**
+ * This hook abstracts the ref for convenience and readability.
+ * Add `ref` to the `DuffelCardForm` `ref` prop and call the functions to trigger the actions you'd like.
+ */
+export declare function useDuffelCardFormActions(): UseDuffelCardFormActionsHook;

package/components/DuffelNGSView/DuffelNGSView.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { OfferWithNGS } from "./lib";
+export interface DuffelNGSViewProps {
+    offers: OfferWithNGS[];
+    sliceIndex: number;
+}
+export declare const DuffelNGSView: React.FC<DuffelNGSViewProps>;

package/components/DuffelNGSView/NGSShelfInfoCard.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { NGSShelf } from "./lib";
+export interface NGSShelfInfoCardProps {
+    ngs_shelf: NGSShelf;
+    className?: string;
+}
+export declare const NGSShelfInfoCard: React.FC<NGSShelfInfoCardProps>;

package/components/DuffelNGSView/NGSSliceFareCard.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { OfferWithNGS } from "./lib";
+export interface NGSSliceFareCardProps {
+    offer: OfferWithNGS;
+    sliceIndex: number;
+    selected?: boolean;
+    onSelect?: () => void;
+    compareToAmount?: number;
+    className?: string;
+}
+export declare const NGSSliceFareCard: React.FC<NGSSliceFareCardProps>;

package/components/DuffelNGSView/SliceSummary.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="@duffel/api" />
+import { OfferSlice } from "@duffel/api/types";
+import React from "react";
+export interface SliceSummaryProps {
+    slice: OfferSlice;
+}
+export declare const SliceSummary: React.FC<SliceSummaryProps>;

package/components/DuffelNGSView/lib/get-max-baggages-for-offer-slice.d.ts

@@ -0,0 +1,8 @@
+import { OfferAvailableServiceBaggageMetadata, OfferSlice, OfferSliceSegmentPassenger } from "@duffel/api/types";
+/**
+ * Returns the passenger baggages object with the largest quantity of baggages
+ * of a specified type for a slice. Baggage quantity can (very occasionally)
+ * vary across passengers  and segments in a slice, so the 'max' baggages can
+ * be used as the baseline for a slice.
+ */
+export declare const getMaxBaggagesForOfferSlice: (offerSlice: OfferSlice, type: OfferAvailableServiceBaggageMetadata["type"]) => OfferSliceSegmentPassenger["baggages"];

package/components/DuffelNGSView/lib/group-offers-for-ngs-view.d.ts

@@ -0,0 +1,3 @@
+import { NGSShelf, OfferSliceWithNGS, OfferWithNGS } from ".";
+export type NGSOfferRow = Record<"slice", OfferSliceWithNGS> & Record<NGSShelf, OfferWithNGS | null>;
+export declare const groupOffersForNGSView: (offers: OfferWithNGS[], sliceIndex: number) => NGSOfferRow[];

package/components/DuffelNGSView/lib/index.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="@duffel/api" />
+import { IconName } from "@components/shared/Icon";
+import { Offer, OfferSlice, OfferSliceSegment, OfferSliceSegmentPassenger } from "@duffel/api/types";
+export declare const NGS_SHELVES: readonly ["1", "2", "3", "4", "5"];
+export type NGSShelf = (typeof NGS_SHELVES)[number];
+type SeatWithNGS = {
+    type: string;
+    flatness: string;
+};
+type CabinWithNGS = {
+    amenities: {
+        seat: SeatWithNGS;
+        power: {
+            available: boolean;
+        };
+        wifi: {
+            available: boolean;
+            cost: "free" | "paid" | "free or paid" | "n/a";
+        };
+    };
+    layout: {
+        type: string;
+    };
+};
+type OfferSliceSegmentPassengerWithNGS = OfferSliceSegmentPassenger & {
+    cabin: CabinWithNGS;
+    ticket_attributes: {
+        advanced_selection_available: boolean;
+    };
+};
+export type OfferSliceSegmentWithNGS = OfferSliceSegment & {
+    passengers: OfferSliceSegmentPassengerWithNGS[];
+};
+export type OfferSliceWithNGS = OfferSlice & {
+    segments: OfferSliceSegmentWithNGS[];
+    ngs_shelf: NGSShelf;
+};
+export type OfferWithNGS = Offer & {
+    slices: OfferSliceWithNGS[];
+};
+type SeatType = "Standard seat" | "Extra legroom" | "Larger seat" | "Lie flat bed" | "Lie flat suite";
+type ShelfInfo = {
+    short_title: string;
+    full_title: string;
+    description: string;
+    seat: {
+        description: SeatType;
+        icon: IconName;
+    };
+    checked_bag: boolean;
+    seat_selection: boolean;
+    icon: IconName;
+};
+export declare const SEAT_ICONS_MAP: Record<SeatType, IconName>;
+export declare const NGS_SHELF_INFO: Record<NGSShelf, ShelfInfo>;
+export {};

package/components/DuffelNGSView/lib/sort-ngs-rows.d.ts

@@ -0,0 +1,4 @@
+import { NGSShelf } from ".";
+import { NGSOfferRow } from "./group-offers-for-ngs-view";
+export type SortDirection = "asc" | "desc";
+export declare const sortNGSRows: (rows: NGSOfferRow[], sortShelf: NGSShelf, sortDirection: SortDirection) => NGSOfferRow[];

package/components/shared/Icon.d.ts

@@ -3,10 +3,18 @@ import * as React from "react";
 export declare const ICON_MAP: {
     accessible: import("react/jsx-runtime").JSX.Element;
     add: import("react/jsx-runtime").JSX.Element;
+    airline_seat_flat: import("react/jsx-runtime").JSX.Element;
+    airline_seat_individual_suite: import("react/jsx-runtime").JSX.Element;
+    airline_seat_legroom_extra: import("react/jsx-runtime").JSX.Element;
+    airline_seat_recline_extra: import("react/jsx-runtime").JSX.Element;
+    airline_seat_recline_normal: import("react/jsx-runtime").JSX.Element;
+    airplane_ticket: import("react/jsx-runtime").JSX.Element;
     apartment: import("react/jsx-runtime").JSX.Element;
+    arrow_downward: import("react/jsx-runtime").JSX.Element;
     arrow_forward: import("react/jsx-runtime").JSX.Element;
     arrow_left: import("react/jsx-runtime").JSX.Element;
     arrow_right: import("react/jsx-runtime").JSX.Element;
+    arrow_upward: import("react/jsx-runtime").JSX.Element;
     atm: import("react/jsx-runtime").JSX.Element;
     autorenew: import("react/jsx-runtime").JSX.Element;
     bakery_dining: import("react/jsx-runtime").JSX.Element;
@@ -14,8 +22,10 @@ export declare const ICON_MAP: {
     bedroom_parent: import("react/jsx-runtime").JSX.Element;
     brunch_dining: import("react/jsx-runtime").JSX.Element;
     cabin_bag: import("react/jsx-runtime").JSX.Element;
+    carry_on_bag_inactive: import("react/jsx-runtime").JSX.Element;
     check: import("react/jsx-runtime").JSX.Element;
     check_circle: import("react/jsx-runtime").JSX.Element;
+    check_small: import("react/jsx-runtime").JSX.Element;
     checked_bag: import("react/jsx-runtime").JSX.Element;
     chevron: import("react/jsx-runtime").JSX.Element;
     child_care: import("react/jsx-runtime").JSX.Element;
@@ -23,6 +33,7 @@ export declare const ICON_MAP: {
     closet: import("react/jsx-runtime").JSX.Element;
     concierge: import("react/jsx-runtime").JSX.Element;
     credit_card: import("react/jsx-runtime").JSX.Element;
+    currency_exchange: import("react/jsx-runtime").JSX.Element;
     dinner_dining: import("react/jsx-runtime").JSX.Element;
     exit_row: import("react/jsx-runtime").JSX.Element;
     exit_row_right: import("react/jsx-runtime").JSX.Element;
@@ -40,6 +51,7 @@ export declare const ICON_MAP: {
     local_bar: import("react/jsx-runtime").JSX.Element;
     local_parking: import("react/jsx-runtime").JSX.Element;
     loyalty: import("react/jsx-runtime").JSX.Element;
+    luggage: import("react/jsx-runtime").JSX.Element;
     meeting_room: import("react/jsx-runtime").JSX.Element;
     minus: import("react/jsx-runtime").JSX.Element;
     no_airplane: import("react/jsx-runtime").JSX.Element;
@@ -55,9 +67,11 @@ export declare const ICON_MAP: {
     seat: import("react/jsx-runtime").JSX.Element;
     seat_paid_indicator: import("react/jsx-runtime").JSX.Element;
     shield_with_moon: import("react/jsx-runtime").JSX.Element;
+    shopping_bag: import("react/jsx-runtime").JSX.Element;
     spa: import("react/jsx-runtime").JSX.Element;
     stairs: import("react/jsx-runtime").JSX.Element;
     star: import("react/jsx-runtime").JSX.Element;
+    unfold_more: import("react/jsx-runtime").JSX.Element;
     wallet: import("react/jsx-runtime").JSX.Element;
     warning: import("react/jsx-runtime").JSX.Element;
     wifi: import("react/jsx-runtime").JSX.Element;

package/components/shared/RadioButton.d.ts

@@ -2,5 +2,6 @@ import * as React from "react";
 export interface RadioButtonProps {
     value: string;
     checked?: boolean;
+    className?: string;
 }
 export declare const RadioButton: React.FC<RadioButtonProps>;

package/components/shared/SliceCarriersTitle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="@duffel/api" />
+import { OfferSlice } from "@duffel/api/types";
+import * as React from "react";
+export interface SliceCarriersTitleProps {
+    slice: OfferSlice;
+}
+export declare const SliceCarriersTitle: React.FC<SliceCarriersTitleProps>;