@duffel/components 3.1.6 → 3.1.8--canary.1

package/README.md

@@ -0,0 +1,68 @@
+# @duffel/components
+
+This package is a component library to help you build your travel product using the [Duffel API](https://duffel.com/docs).
+
+## Get started
+
+### Installing
+
+```sh
+yarn add @duffel/components
+# -- or --
+npm i @duffel/components
+```
+
+### (alternative) Load from CDN:
+
+```html
+<script src="https://assets.duffel.com/components/VERSION/duffel-ancillaries.js"></script>
+<script src="https://assets.duffel.com/components/VERSION/duffel-payments.js"></script>
+```
+
+## How do I integrate this into my website?
+
+1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
+
+## Integration examples
+
+1. **client-side** | This example loads a local version of the components using a `script` tag. It uses a fixture for the offer and seat maps.
+
+   - [Find it on src/examples/client-side](src/examples/client-side)
+
+2. **full-stack** | This example loads a local version of the components using a `script` tag. It will search and retrieve an offer from the Duffel API and render the ancillaries component custom element with its `offer_id` and `client_key`. As soon as a service modal is closed it will create a test order with the given payload.
+
+   - [Find it on src/examples/full-stack](src/examples/full-stack)
+
+3. **just-typescript** | This example imports a local version of `@duffel/components` and renders the custom element with an offer fixture once the page loads.
+
+   - [Find it on src/examples/just-typescript](src/examples/just-typescript)
+
+4. **react-app** | This example imports a local version of `@duffel/components` and renders the a react element with an offer fixture.
+
+   - [Find it on src/examples/react-app](src/examples/react-app)
+
+5. **payments-custom-element** | This example demonstrates the use of the payments component loaded through a script tag
+
+- [Find it on src/examples/payments-custom-element](src/examples/payments-custom-element)
+
+6. **payments-just-typescript** | This example imports a local version of `@duffel/components` and renders the payments custom element with a fixture of the payment intent.
+
+   - [Find it on src/examples/payments-just-typescript](src/examples/payments-just-typescript)
+
+7. **next** | This example imports and renders `@duffel/components` into a `next.js` project.
+
+   - [Find it on src/examples/payments-just-typescript](src/examples/next)
+
+## What components are available?
+
+### Ancillaries component
+
+The ancillaries component allows your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand. This component is avaiable through npm and our cdn.
+
+- [Find live demo on codesandbox.io&nbsp;&nbsp;↗](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
+
+### Payments component
+
+The payments component provides a [PCI-compliant](https://help.duffel.com/hc/en-gb/articles/4409049543058) way for you to collect card payments for online bookings from your customers. To learn more about how to work with Duffel payments please visit the [Collecting customer card payments guide](https://duffel.com/docs/guides/collecting-customer-card-payments).
+
+#### more coming soon...

package/components/DuffelCardForm/DuffelCardForm.d.ts

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

package/components/DuffelCardForm/DuffelCardFormCustomElement.d.ts

@@ -0,0 +1,13 @@
+import { DuffelCardFormProps } from "./DuffelCardForm";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "duffel-card-form": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+type DuffelCardFormCustomElementRenderArguments = Pick<DuffelCardFormProps, "clientKey" | "styles" | "shouldUseLocalTokenProxy">;
+export declare function renderDuffelCardFormCustomElement(props: DuffelCardFormCustomElementRenderArguments): void;
+export declare function onDuffelCardFormCardIdCreated(onCardIdCreated: DuffelCardFormProps["onStoreForTemporaryUseSuccess"]): void;
+export declare function onDuffelCardFormCardIdCreationError(onCardIdCreationError: DuffelCardFormProps["onStoreForTemporaryUseFailure"]): void;
+export {};

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

@@ -0,0 +1,6 @@
+import { DuffelCardFormProps } from "./types";
+type Inputs = {
+    setIFrameHeight: (height: string) => void;
+} & Pick<DuffelCardFormProps, "onValidateSuccess" | "onValidateFailure" | "onStoreForTemporaryUseSuccess" | "onStoreForTemporaryUseFailure">;
+export declare function getIFrameEventListener(baseUrl: string, { setIFrameHeight, onStoreForTemporaryUseSuccess, onStoreForTemporaryUseFailure, }: Inputs): (event: MessageEvent) => void;
+export {};

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

@@ -0,0 +1 @@
+export declare function getTokenFromClientKey(clientKey: string): string;

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

@@ -0,0 +1,60 @@
+import { CustomStyles } from "src/types";
+export interface StoreForTemporaryUseData {
+    id: string;
+    live_mode: false;
+}
+export interface StoreForTemporaryUseError {
+    status: number;
+    message: string;
+}
+export type DuffelCardFormStyles = Pick<CustomStyles, "fontFamily"> & {
+    stylesheetUrl?: string;
+};
+export type DuffelCardFormActions = "validate" | "store-for-temporary-use";
+export interface DuffelCardFormProps {
+    /**
+     * The client key present in the Quote object.
+     */
+    clientKey: string;
+    /**
+     * The styles to apply to the iframe input elements.
+     */
+    styles?: DuffelCardFormStyles;
+    /**
+     * If you want to develop with a local deployment of the token proxy on port 8000. Set this flag to true.
+     */
+    shouldUseLocalTokenProxy?: boolean;
+    /**
+     * 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 `store-for-temporary-use` will only happen once `validate` has been successful.
+     *
+     */
+    actions: DuffelCardFormActions[];
+    /**
+     * This function will be called when the card form validation has been successful.
+     */
+    onValidateSuccess: () => void;
+    /**
+     * If the card form validation is successful but data is changed afterwards,
+     * making it invalid, this function will be called.
+     */
+    onValidateFailure: () => void;
+    /**
+     * This function will be called when the card has been stored for temporary use.
+     *
+     * This callback will only be triggered if the `store-for-temporary-use`
+     * action is present in the `actions` prop.
+     */
+    onStoreForTemporaryUseSuccess: (data: StoreForTemporaryUseData) => void;
+    /**
+     * This function will be called when the component has failed to store the card for temporary use.
+     *
+     * This callback will only be triggered if the `store-for-temporary-use`
+     * action is present in the `actions` prop.
+     */
+    onStoreForTemporaryUseFailure: (error: StoreForTemporaryUseError) => void;
+}

package/custom-elements.d.ts

@@ -4,3 +4,4 @@
  */
 export { onDuffelAncillariesPayloadReady, renderDuffelAncillariesCustomElement, } from "./components/DuffelAncillaries/DuffelAncillariesCustomElement";
 export { onDuffelPaymentsFailedPayment, onDuffelPaymentsSuccessfulPayment, renderDuffelPaymentsCustomElement, } from "./components/DuffelPayments/DuffelPaymentsCustomElement";
+export { renderDuffelCardFormCustomElement, onDuffelCardFormCardIdCreated, onDuffelCardFormCardIdCreationError, } from "./components/DuffelCardForm/DuffelCardFormCustomElement";