@duffel/components 3.1.2--prototype.2 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/package.json +1 -1
- package/react-dist/index.js +18 -47
- package/src/custom-elements.ts +0 -4
- package/src/examples/next/README.md +28 -0
- package/src/examples/next/next-env.d.ts +5 -0
- package/src/examples/next/next.config.js +4 -0
- package/src/examples/next/package.json +24 -0
- package/src/examples/next/src/app/DuffelComponents.tsx +40 -0
- package/src/examples/next/src/app/layout.tsx +18 -0
- package/src/examples/next/src/app/page.tsx +9 -0
- package/src/examples/next/tsconfig.json +27 -0
- package/src/examples/react-app/src/index.tsx +1 -1
- package/src/index.ts +0 -2
- package/src/components/ShowData/ShowData.tsx +0 -38
- package/src/components/ShowData/ShowDataCustomElement.tsx +0 -85
- package/src/stories/ShowData.stories.tsx +0 -16
package/src/custom-elements.ts
CHANGED
|
@@ -11,7 +11,3 @@ export {
|
|
|
11
11
|
onDuffelPaymentsSuccessfulPayment,
|
|
12
12
|
renderDuffelPaymentsCustomElement,
|
|
13
13
|
} from "./components/DuffelPayments/DuffelPaymentsCustomElement";
|
|
14
|
-
export {
|
|
15
|
-
onShowDataFinished,
|
|
16
|
-
renderShowDataCustomElement,
|
|
17
|
-
} from "./components/ShowData/ShowDataCustomElement";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
|
2
|
+
|
|
3
|
+
## Getting Started
|
|
4
|
+
|
|
5
|
+
First, run the development server:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run dev
|
|
9
|
+
# or
|
|
10
|
+
yarn dev
|
|
11
|
+
# or
|
|
12
|
+
pnpm dev
|
|
13
|
+
# or
|
|
14
|
+
bun dev
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
18
|
+
|
|
19
|
+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
|
20
|
+
|
|
21
|
+
## Learn More
|
|
22
|
+
|
|
23
|
+
To learn more about Next.js, take a look at the following resources:
|
|
24
|
+
|
|
25
|
+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
26
|
+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
27
|
+
|
|
28
|
+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "my-app",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "next dev",
|
|
7
|
+
"build": "next build",
|
|
8
|
+
"start": "next start",
|
|
9
|
+
"lint": "next lint"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"duffel-components": "../../../../duffel-components/react-dist",
|
|
13
|
+
"next": "13.5.6",
|
|
14
|
+
"react": "^18",
|
|
15
|
+
"react-dom": "^18"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@types/node": "~18",
|
|
19
|
+
"@types/react": "^18",
|
|
20
|
+
"@types/react-dom": "^18",
|
|
21
|
+
"next-transpile-modules": "^10.0.1",
|
|
22
|
+
"typescript": "^5"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { DuffelAncillaries, DuffelPayments } from "duffel-components";
|
|
4
|
+
|
|
5
|
+
export const DuffelComponents = () => (
|
|
6
|
+
<>
|
|
7
|
+
<DuffelAncillaries
|
|
8
|
+
debug={true}
|
|
9
|
+
offer_id="fixture_off_1"
|
|
10
|
+
services={["bags", "seats"]}
|
|
11
|
+
passengers={[
|
|
12
|
+
{
|
|
13
|
+
id: "pas_0000AUde3KY1SptM6ABSfU",
|
|
14
|
+
given_name: "Mae",
|
|
15
|
+
family_name: "Jemison",
|
|
16
|
+
gender: "F",
|
|
17
|
+
title: "dr",
|
|
18
|
+
born_on: "1956-10-17",
|
|
19
|
+
email: "m.jemison@nasa.gov",
|
|
20
|
+
phone_number: "+16177562626",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: "pas_0000AUde3KY1SptM6ABSfT",
|
|
24
|
+
given_name: "Dorothy",
|
|
25
|
+
family_name: "Green",
|
|
26
|
+
gender: "F",
|
|
27
|
+
title: "dr",
|
|
28
|
+
born_on: "1942-10-17",
|
|
29
|
+
},
|
|
30
|
+
]}
|
|
31
|
+
onPayloadReady={console.log}
|
|
32
|
+
/>
|
|
33
|
+
|
|
34
|
+
<DuffelPayments
|
|
35
|
+
paymentIntentClientToken="eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0="
|
|
36
|
+
onSuccessfulPayment={console.log}
|
|
37
|
+
onFailedPayment={console.log}
|
|
38
|
+
/>
|
|
39
|
+
</>
|
|
40
|
+
);
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Metadata } from "next";
|
|
2
|
+
|
|
3
|
+
export const metadata: Metadata = {
|
|
4
|
+
title: "Create Next App",
|
|
5
|
+
description: "Generated by create next app",
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default function RootLayout({
|
|
9
|
+
children,
|
|
10
|
+
}: {
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
}) {
|
|
13
|
+
return (
|
|
14
|
+
<html lang="en">
|
|
15
|
+
<body>{children}</body>
|
|
16
|
+
</html>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es5",
|
|
4
|
+
"lib": ["dom", "dom.iterable", "esnext"],
|
|
5
|
+
"allowJs": true,
|
|
6
|
+
"skipLibCheck": true,
|
|
7
|
+
"strict": true,
|
|
8
|
+
"noEmit": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"module": "esnext",
|
|
11
|
+
"moduleResolution": "node",
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"jsx": "preserve",
|
|
15
|
+
"incremental": true,
|
|
16
|
+
"plugins": [
|
|
17
|
+
{
|
|
18
|
+
"name": "next"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"paths": {
|
|
22
|
+
"@/*": ["./src/*"]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
|
26
|
+
"exclude": ["node_modules"]
|
|
27
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { Button } from "@components/shared/Button";
|
|
2
|
-
import React from "react";
|
|
3
|
-
|
|
4
|
-
function isJsonString(dataString: string) {
|
|
5
|
-
try {
|
|
6
|
-
JSON.parse(dataString);
|
|
7
|
-
} catch (e) {
|
|
8
|
-
return false;
|
|
9
|
-
}
|
|
10
|
-
return true;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export interface ShowDataProps {
|
|
14
|
-
data: any;
|
|
15
|
-
onFinished: (newData: any) => void;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const ShowData: React.FC<ShowDataProps> = ({ data, onFinished }) => {
|
|
19
|
-
const [textareaData, setTextareaData] = React.useState("{}");
|
|
20
|
-
const isValid = isJsonString(textareaData);
|
|
21
|
-
|
|
22
|
-
return (
|
|
23
|
-
<div>
|
|
24
|
-
<pre>{JSON.stringify(data, null, 2)}</pre>
|
|
25
|
-
<textarea
|
|
26
|
-
value={textareaData}
|
|
27
|
-
onChange={(e) => setTextareaData(e.target.value)}
|
|
28
|
-
/>
|
|
29
|
-
<Button
|
|
30
|
-
disabled={!isValid}
|
|
31
|
-
onClick={() => onFinished(JSON.parse(textareaData))}
|
|
32
|
-
>
|
|
33
|
-
Click me to trigger `onFinished` event
|
|
34
|
-
</Button>
|
|
35
|
-
{!isValid && <p style={{ color: "tomato" }}>Invalid JSON</p>}
|
|
36
|
-
</div>
|
|
37
|
-
);
|
|
38
|
-
};
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { createRoot, Root } from "react-dom/client";
|
|
2
|
-
import { ShowData, ShowDataProps } from "./ShowData";
|
|
3
|
-
declare global {
|
|
4
|
-
// eslint-disable-next-line @typescript-eslint/no-namespace
|
|
5
|
-
namespace JSX {
|
|
6
|
-
interface IntrinsicElements {
|
|
7
|
-
"show-data": React.DetailedHTMLProps<
|
|
8
|
-
React.HTMLAttributes<HTMLElement>,
|
|
9
|
-
HTMLElement
|
|
10
|
-
>;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const CUSTOM_ELEMENT_TAG = "show-data";
|
|
16
|
-
|
|
17
|
-
type ShowDataRenderArguments = Pick<ShowDataProps, "data">;
|
|
18
|
-
|
|
19
|
-
class ShowDataCustomElement extends HTMLElement {
|
|
20
|
-
/**
|
|
21
|
-
* The React root for displaying content inside a browser DOM element.
|
|
22
|
-
*/
|
|
23
|
-
private root!: Root;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* `connectedCallback` is called to initialise the custom element
|
|
27
|
-
*/
|
|
28
|
-
connectedCallback() {
|
|
29
|
-
const container = document.createElement("div");
|
|
30
|
-
this.appendChild(container);
|
|
31
|
-
|
|
32
|
-
this.root = createRoot(container);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* When this function is called, it will render/re-render
|
|
37
|
-
* the `DuffelPayments` component with the given props.
|
|
38
|
-
*/
|
|
39
|
-
public render(withProps: ShowDataRenderArguments) {
|
|
40
|
-
if (!this.root) {
|
|
41
|
-
throw "It was not possible to render `duffel-payments` because `this.root` is missing.";
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
this.root.render(
|
|
45
|
-
<ShowData
|
|
46
|
-
{...withProps}
|
|
47
|
-
onFinished={() => {
|
|
48
|
-
this.dispatchEvent(
|
|
49
|
-
new CustomEvent("onFinished", {
|
|
50
|
-
composed: true,
|
|
51
|
-
})
|
|
52
|
-
);
|
|
53
|
-
}}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
window.customElements.get(CUSTOM_ELEMENT_TAG) ||
|
|
60
|
-
window.customElements.define(CUSTOM_ELEMENT_TAG, ShowDataCustomElement);
|
|
61
|
-
|
|
62
|
-
function tryToGetShowData(caller: string): ShowDataCustomElement {
|
|
63
|
-
const element =
|
|
64
|
-
document.querySelector<ShowDataCustomElement>(CUSTOM_ELEMENT_TAG);
|
|
65
|
-
if (!element) {
|
|
66
|
-
throw new Error(
|
|
67
|
-
`Could not find duffel-payments element in the DOM. Maybe you need to call ${caller} after 'window.onload'?`
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
return element;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export function renderShowDataCustomElement(props: ShowDataRenderArguments) {
|
|
74
|
-
const element = tryToGetShowData("renderShowData");
|
|
75
|
-
element.render(props);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export function onShowDataFinished(onFinished: ShowDataProps["onFinished"]) {
|
|
79
|
-
const element = tryToGetShowData("onShowDataFinished");
|
|
80
|
-
|
|
81
|
-
// using `as EventListener` here because typescript doesn't know the event type for `onPayloadReady`
|
|
82
|
-
// There's a few different suggestions to resolve this seemed good enough
|
|
83
|
-
// You can learn more here: https://github.com/microsoft/TypeScript/issues/28357
|
|
84
|
-
element.addEventListener("onFinished", onFinished as EventListener);
|
|
85
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { ShowData, ShowDataProps } from "../components/ShowData/ShowData";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "ShowData",
|
|
6
|
-
component: ShowData,
|
|
7
|
-
} as Meta;
|
|
8
|
-
|
|
9
|
-
const defaultProps: ShowDataProps = {
|
|
10
|
-
data: { heres: "some test data" },
|
|
11
|
-
onFinished: console.log,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export const AllServices: StoryObj<typeof ShowData> = {
|
|
15
|
-
args: defaultProps,
|
|
16
|
-
};
|