@duffel/react-native-components-assistant 0.2.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Duffel
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @duffel/react-native-components-assistant
+
+UI component for getting travel support in your react native app with the Duffel Assistant.
+
+## Installation
+
+```sh
+yarn add @duffel/react-native-components-assistant
+```
+
+## Usage
+
+```tsx
+import { DuffelAssistant } from '@duffel/react-native-components-assistant';
+
+function App() {
+  const [isDuffelAssistantOpen, setIsDuffelAssistantOpen] = useState(false);
+
+  return (
+    <DuffelAssistant
+      isOpen={isDuffelAssistantOpen}
+      onClose={() => setIsDuffelAssistantOpen(false)}
+      clientKey="<USER_CLIENT_KEY>"
+    />
+  );
+}
+```
+
+For documentation and help integrating with this component please visit https://duffel.com/docs/guides/integrating-the-duffel-assistant

package/lib/module/DuffelAssistantProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=DuffelAssistantProps.js.map

package/lib/module/DuffelAssistantProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["DuffelAssistantProps.ts"],"mappings":"","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import React from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { hasJsonWebTokenFormat } from "./lib/hasJsonWebTokenFormat.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DuffelAssistant = ({
+  isOpen,
+  onClose,
+  ...properties
+}) => {
+  if (!hasJsonWebTokenFormat(properties.clientKey)) {
+    throw new Error('Duffel Assistant client key format must be a valid JWT.');
+  }
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: isOpen,
+    onRequestClose: () => onClose(),
+    animationType: "slide",
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: Platform.OS === 'ios' ? /*#__PURE__*/_jsx(WebView, {
+        injectedJavaScriptObject: properties,
+        source: {
+          uri: 'https://assets.duffel.com/assistant/iframe.html'
+        },
+        onMessage: event => {
+          if (event.nativeEvent.data === 'duffel-assistant-close') {
+            onClose();
+          }
+        }
+      }) : /*#__PURE__*/_jsx(WebView
+      // Required for Android
+      , {
+        injectedJavaScript: `
+          postMessage(
+            {
+              type: "duffel-assistant-open",
+              properties: ${JSON.stringify(properties)},
+            },
+            "*",
+            );
+          true;`,
+        source: {
+          uri: 'https://assets.duffel.com/assistant/iframe.html'
+        },
+        onMessage: event => {
+          if (event.nativeEvent.data === 'duffel-assistant-close') {
+            onClose();
+          }
+        }
+      })
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    paddingHorizontal: 12,
+    paddingTop: 50,
+    paddingBottom: 30
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Modal","Platform","StyleSheet","View","WebView","hasJsonWebTokenFormat","jsx","_jsx","DuffelAssistant","isOpen","onClose","properties","clientKey","Error","visible","onRequestClose","animationType","children","style","styles","container","OS","injectedJavaScriptObject","source","uri","onMessage","event","nativeEvent","data","injectedJavaScript","JSON","stringify","create","height","width","paddingHorizontal","paddingTop","paddingBottom"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAChE,SAASC,OAAO,QAAQ,sBAAsB;AAE9C,SAASC,qBAAqB,QAAQ,gCAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIpE,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,MAAM;EACNC,OAAO;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,IAAI,CAACN,qBAAqB,CAACM,UAAU,CAACC,SAAS,CAAC,EAAE;IAChD,MAAM,IAAIC,KAAK,CAAC,yDAAyD,CAAC;EAC5E;EAEA,oBACEN,IAAA,CAACP,KAAK;IACJc,OAAO,EAAEL,MAAO;IAChBM,cAAc,EAAEA,CAAA,KAAML,OAAO,CAAC,CAAE;IAChCM,aAAa,EAAC,OAAO;IAAAC,QAAA,eAErBV,IAAA,CAACJ,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;MAAAH,QAAA,EAC3BhB,QAAQ,CAACoB,EAAE,KAAK,KAAK,gBACpBd,IAAA,CAACH,OAAO;QACNkB,wBAAwB,EAAEX,UAAW;QACrCY,MAAM,EAAE;UAAEC,GAAG,EAAE;QAAkD,CAAE;QACnEC,SAAS,EAAGC,KAAK,IAAK;UACpB,IAAIA,KAAK,CAACC,WAAW,CAACC,IAAI,KAAK,wBAAwB,EAAE;YACvDlB,OAAO,CAAC,CAAC;UACX;QACF;MAAE,CACH,CAAC,gBAEFH,IAAA,CAACH;MACC;MAAA;QACAyB,kBAAkB,EAAE;AAChC;AACA;AACA;AACA,4BAA4BC,IAAI,CAACC,SAAS,CAACpB,UAAU,CAAC;AACtD;AACA;AACA;AACA,gBAAiB;QACLY,MAAM,EAAE;UAAEC,GAAG,EAAE;QAAkD,CAAE;QACnEC,SAAS,EAAGC,KAAK,IAAK;UACpB,IAAIA,KAAK,CAACC,WAAW,CAACC,IAAI,KAAK,wBAAwB,EAAE;YACvDlB,OAAO,CAAC,CAAC;UACX;QACF;MAAE,CACH;IACF,CACG;EAAC,CACF,CAAC;AAEZ,CAAC;AAED,MAAMS,MAAM,GAAGjB,UAAU,CAAC8B,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/lib/hasJsonWebTokenFormat.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export function hasJsonWebTokenFormat(maybe_jwt) {
+  return typeof maybe_jwt === 'string' && maybe_jwt.match(/^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/) !== null;
+}
+//# sourceMappingURL=hasJsonWebTokenFormat.js.map

package/lib/module/lib/hasJsonWebTokenFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasJsonWebTokenFormat","maybe_jwt","match"],"sourceRoot":"../../../src","sources":["lib/hasJsonWebTokenFormat.ts"],"mappings":";;AAAA,OAAO,SAASA,qBAAqBA,CAACC,SAAiB,EAAE;EACvD,OACE,OAAOA,SAAS,KAAK,QAAQ,IAC7BA,SAAS,CAACC,KAAK,CAAC,kDAAkD,CAAC,KAAK,IAAI;AAEhF","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/DuffelAssistantProps.d.ts

@@ -0,0 +1,32 @@
+export interface DuffelAssistantProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /**
+     * This is used to authenticate requests to the Duffel API.
+     *
+     * [Learn about creating a client key on the Duffel API documentation](https://duffel.com/docs/api/v2/component-client-keys/create-component-client-key)
+     *
+     * This value may be undefined when using fixtures.
+     */
+    clientKey: string;
+    /**
+     * The primary color of the widget.
+     * You can customise this to better align with your brand.
+     */
+    primaryColor?: string;
+    /**
+     * For Duffel engineers to work with staging environment for the deployed and built assistant code.
+     *
+     * @default "production"
+     */
+    environment?: 'staging' | 'production' | 'development';
+    /**
+     * When the clientKey include both the user and resource IDs, the assistant will open directly on the chat window.
+     * You may use `issueType` to immediately open a support case with a specific issue type.
+     * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+     *
+     * @default undefined
+     */
+    issueType?: 'cancellation' | 'change' | 'other';
+}
+//# sourceMappingURL=DuffelAssistantProps.d.ts.map

package/lib/typescript/src/DuffelAssistantProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DuffelAssistantProps.d.ts","sourceRoot":"","sources":["../../../src/DuffelAssistantProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IAEvD;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjD"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type DuffelAssistantProps as DuffelAssistantPropsImported } from './DuffelAssistantProps';
+export type DuffelAssistantProps = DuffelAssistantPropsImported;
+export declare const DuffelAssistant: React.FC<DuffelAssistantProps>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,oBAAoB,IAAI,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAGnG,MAAM,MAAM,oBAAoB,GAAG,4BAA4B,CAAC;AAEhE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiD1D,CAAC"}

package/lib/typescript/src/lib/hasJsonWebTokenFormat.d.ts

@@ -0,0 +1,2 @@
+export declare function hasJsonWebTokenFormat(maybe_jwt: string): boolean;
+//# sourceMappingURL=hasJsonWebTokenFormat.d.ts.map

package/lib/typescript/src/lib/hasJsonWebTokenFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasJsonWebTokenFormat.d.ts","sourceRoot":"","sources":["../../../../src/lib/hasJsonWebTokenFormat.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,WAKtD"}

package/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "@duffel/react-native-components-assistant",
+  "version": "0.2.0",
+  "description": "Duffel Assistant component in React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace duffel-react-native-components-assistant-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://duffel.com.git"
+  },
+  "author": "Duffel <hello@duffel.com> (https://duffel.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://duffel.com/issues"
+  },
+  "homepage": "https://duffel.com#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.12",
+    "react-native-webview": "^13.16.0",
+    "release-it": "^17.10.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.51.1"
+  }
+}

package/src/DuffelAssistantProps.ts

@@ -0,0 +1,35 @@
+export interface DuffelAssistantProps {
+  isOpen: boolean;
+  onClose: () => void;
+
+  /**
+   * This is used to authenticate requests to the Duffel API.
+   *
+   * [Learn about creating a client key on the Duffel API documentation](https://duffel.com/docs/api/v2/component-client-keys/create-component-client-key)
+   *
+   * This value may be undefined when using fixtures.
+   */
+  clientKey: string;
+
+  /**
+   * The primary color of the widget.
+   * You can customise this to better align with your brand.
+   */
+  primaryColor?: string;
+
+  /**
+   * For Duffel engineers to work with staging environment for the deployed and built assistant code.
+   *
+   * @default "production"
+   */
+  environment?: 'staging' | 'production' | 'development';
+
+  /**
+   * When the clientKey include both the user and resource IDs, the assistant will open directly on the chat window.
+   * You may use `issueType` to immediately open a support case with a specific issue type.
+   * When no issue type is provided, the user will be able to select the issue type in the chat UI.
+   *
+   * @default undefined
+   */
+  issueType?: 'cancellation' | 'change' | 'other';
+}

package/src/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { type DuffelAssistantProps as DuffelAssistantPropsImported } from './DuffelAssistantProps';
+import { hasJsonWebTokenFormat } from './lib/hasJsonWebTokenFormat';
+
+export type DuffelAssistantProps = DuffelAssistantPropsImported;
+
+export const DuffelAssistant: React.FC<DuffelAssistantProps> = ({
+  isOpen,
+  onClose,
+  ...properties
+}) => {
+  if (!hasJsonWebTokenFormat(properties.clientKey)) {
+    throw new Error('Duffel Assistant client key format must be a valid JWT.');
+  }
+
+  return (
+    <Modal
+      visible={isOpen}
+      onRequestClose={() => onClose()}
+      animationType="slide"
+    >
+      <View style={styles.container}>
+        {Platform.OS === 'ios' ? (
+          <WebView
+            injectedJavaScriptObject={properties}
+            source={{ uri: 'https://assets.duffel.com/assistant/iframe.html' }}
+            onMessage={(event) => {
+              if (event.nativeEvent.data === 'duffel-assistant-close') {
+                onClose();
+              }
+            }}
+          />
+        ) : (
+          <WebView
+            // Required for Android
+            injectedJavaScript={`
+          postMessage(
+            {
+              type: "duffel-assistant-open",
+              properties: ${JSON.stringify(properties)},
+            },
+            "*",
+            );
+          true;`}
+            source={{ uri: 'https://assets.duffel.com/assistant/iframe.html' }}
+            onMessage={(event) => {
+              if (event.nativeEvent.data === 'duffel-assistant-close') {
+                onClose();
+              }
+            }}
+          />
+        )}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    paddingHorizontal: 12,
+    paddingTop: 50,
+    paddingBottom: 30,
+  },
+});

package/src/lib/hasJsonWebTokenFormat.ts

@@ -0,0 +1,6 @@
+export function hasJsonWebTokenFormat(maybe_jwt: string) {
+  return (
+    typeof maybe_jwt === 'string' &&
+    maybe_jwt.match(/^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/) !== null
+  );
+}