@sendoracloud/sdk-react-native 1.1.0 → 1.2.0

package/dist/contact-widget.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/contact-widget.tsx
+var contact_widget_exports = {};
+__export(contact_widget_exports, {
+  ContactWidget: () => ContactWidget,
+  useContactWidget: () => useContactWidget
+});
+module.exports = __toCommonJS(contact_widget_exports);
+var React = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var import_react_native_webview = require("react-native-webview");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ContactWidget({
+  visible,
+  widgetId,
+  workerHost = "https://go.sendoracloud.com",
+  theme = "auto",
+  prefillName,
+  prefillEmail,
+  onClose
+}) {
+  const didFire = React.useRef(false);
+  React.useEffect(() => {
+    if (visible) didFire.current = false;
+  }, [visible]);
+  if (!widgetId) return null;
+  const params = new URLSearchParams({ widgetId, theme });
+  if (prefillName) params.set("prefillName", prefillName);
+  if (prefillEmail) params.set("prefillEmail", prefillEmail);
+  const uri = `${workerHost}/embed/contact?${params.toString()}`;
+  const handleClose = (result) => {
+    if (didFire.current) return;
+    didFire.current = true;
+    onClose(result);
+  };
+  const onNav = (req) => {
+    const url = req.url || "";
+    if (url.startsWith("sendora://close")) {
+      const queryStart = url.indexOf("?");
+      const params2 = queryStart >= 0 ? new URLSearchParams(url.slice(queryStart + 1)) : new URLSearchParams();
+      const ticketId = params2.get("ticketId") || "";
+      const portalUrl = params2.get("portalUrl") || null;
+      handleClose({ ticketId, portalUrl, submitted: ticketId !== "" });
+      return false;
+    }
+    if (!url.startsWith("https://") && !url.startsWith("about:")) {
+      return false;
+    }
+    return true;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.Modal,
+    {
+      visible,
+      animationType: "slide",
+      presentationStyle: "pageSheet",
+      onRequestClose: () => handleClose({ ticketId: "", portalUrl: null, submitted: false }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native_webview.WebView,
+        {
+          source: { uri },
+          onShouldStartLoadWithRequest: onNav,
+          originWhitelist: ["https://*", "about:*", "sendora://*"],
+          setSupportMultipleWindows: false,
+          javaScriptEnabled: true,
+          domStorageEnabled: true,
+          allowsBackForwardNavigationGestures: false
+        }
+      ) })
+    }
+  );
+}
+function useContactWidget(widgetId, defaults) {
+  const [visible, setVisible] = React.useState(false);
+  const [lastResult, setLastResult] = React.useState(null);
+  const open = React.useCallback(() => setVisible(true), []);
+  const close = React.useCallback(() => setVisible(false), []);
+  const View2 = React.useCallback(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ContactWidget,
+      {
+        ...defaults,
+        widgetId,
+        visible,
+        onClose: (r) => {
+          setLastResult(r);
+          setVisible(false);
+        }
+      }
+    ),
+    [defaults, widgetId, visible]
+  );
+  return { open, close, View: View2, lastResult };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContactWidget,
+  useContactWidget
+});

package/dist/contact-widget.d.cts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+export { WebViewMessageEvent } from 'react-native-webview';
+
+/**
+ * Wave 66 — ContactWidget for React Native apps.
+ *
+ * Renders the worker-hosted embed at
+ * `https://go.sendoracloud.com/embed/contact?widgetId=…` inside a
+ * `<WebView>` from `react-native-webview`. The form posts to
+ * `POST /widgets/:id/submit` server-side.
+ *
+ * On submit success the embed page navigates to
+ * `sendora://close?ticketId=…&portalUrl=…`. WebView's
+ * `onShouldStartLoadWithRequest` catches the scheme + fires
+ * `onClose(result)` so the host can hide the modal.
+ *
+ * Single source of truth = the worker route. UI updates = redeploy
+ * worker. Zero SDK release.
+ *
+ * Import from subpath so customers without react-native-webview can
+ * still use the main SDK without Metro choking on a missing dep:
+ *
+ *   import { ContactWidget } from "@sendoracloud/sdk-react-native/contact-widget";
+ */
+
+interface ContactWidgetResult {
+    /** UUID of the ticket created server-side, or empty if user closed without submitting. */
+    ticketId: string;
+    /** Operator's tracking-portal URL string, or null. */
+    portalUrl: string | null;
+    /** True if the user submitted the form; false if they closed without submitting. */
+    submitted: boolean;
+}
+interface ContactWidgetProps {
+    /** Whether the modal sheet is visible. */
+    visible: boolean;
+    /** UUID of the widget configured in the Sendora dashboard. */
+    widgetId: string;
+    /** Worker host. Defaults to production. */
+    workerHost?: string;
+    /** `"auto"` | `"light"` | `"dark"`. Default `"auto"`. */
+    theme?: "auto" | "light" | "dark";
+    /** Pre-fill name field for signed-in users. */
+    prefillName?: string;
+    /** Pre-fill email field for signed-in users. */
+    prefillEmail?: string;
+    /**
+     * Fired when the user closes the sheet — either after a successful
+     * submit (`submitted = true`) or via the close button
+     * (`submitted = false`). Host should set `visible = false` here.
+     */
+    onClose: (result: ContactWidgetResult) => void;
+}
+declare function ContactWidget({ visible, widgetId, workerHost, theme, prefillName, prefillEmail, onClose, }: ContactWidgetProps): React.ReactElement | null;
+/**
+ * Helper hook so the host doesn't have to wire visibility state by
+ * hand.
+ *
+ *   const contact = useContactWidget("widget-uuid");
+ *   <Button onPress={contact.open} title="Contact us" />
+ *   <contact.View />
+ */
+declare function useContactWidget(widgetId: string, defaults?: Omit<ContactWidgetProps, "visible" | "widgetId" | "onClose">): {
+    open: () => void;
+    close: () => void;
+    View: () => React.ReactElement | null;
+    lastResult: ContactWidgetResult | null;
+};
+
+export { ContactWidget, type ContactWidgetProps, type ContactWidgetResult, useContactWidget };

package/dist/contact-widget.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+export { WebViewMessageEvent } from 'react-native-webview';
+
+/**
+ * Wave 66 — ContactWidget for React Native apps.
+ *
+ * Renders the worker-hosted embed at
+ * `https://go.sendoracloud.com/embed/contact?widgetId=…` inside a
+ * `<WebView>` from `react-native-webview`. The form posts to
+ * `POST /widgets/:id/submit` server-side.
+ *
+ * On submit success the embed page navigates to
+ * `sendora://close?ticketId=…&portalUrl=…`. WebView's
+ * `onShouldStartLoadWithRequest` catches the scheme + fires
+ * `onClose(result)` so the host can hide the modal.
+ *
+ * Single source of truth = the worker route. UI updates = redeploy
+ * worker. Zero SDK release.
+ *
+ * Import from subpath so customers without react-native-webview can
+ * still use the main SDK without Metro choking on a missing dep:
+ *
+ *   import { ContactWidget } from "@sendoracloud/sdk-react-native/contact-widget";
+ */
+
+interface ContactWidgetResult {
+    /** UUID of the ticket created server-side, or empty if user closed without submitting. */
+    ticketId: string;
+    /** Operator's tracking-portal URL string, or null. */
+    portalUrl: string | null;
+    /** True if the user submitted the form; false if they closed without submitting. */
+    submitted: boolean;
+}
+interface ContactWidgetProps {
+    /** Whether the modal sheet is visible. */
+    visible: boolean;
+    /** UUID of the widget configured in the Sendora dashboard. */
+    widgetId: string;
+    /** Worker host. Defaults to production. */
+    workerHost?: string;
+    /** `"auto"` | `"light"` | `"dark"`. Default `"auto"`. */
+    theme?: "auto" | "light" | "dark";
+    /** Pre-fill name field for signed-in users. */
+    prefillName?: string;
+    /** Pre-fill email field for signed-in users. */
+    prefillEmail?: string;
+    /**
+     * Fired when the user closes the sheet — either after a successful
+     * submit (`submitted = true`) or via the close button
+     * (`submitted = false`). Host should set `visible = false` here.
+     */
+    onClose: (result: ContactWidgetResult) => void;
+}
+declare function ContactWidget({ visible, widgetId, workerHost, theme, prefillName, prefillEmail, onClose, }: ContactWidgetProps): React.ReactElement | null;
+/**
+ * Helper hook so the host doesn't have to wire visibility state by
+ * hand.
+ *
+ *   const contact = useContactWidget("widget-uuid");
+ *   <Button onPress={contact.open} title="Contact us" />
+ *   <contact.View />
+ */
+declare function useContactWidget(widgetId: string, defaults?: Omit<ContactWidgetProps, "visible" | "widgetId" | "onClose">): {
+    open: () => void;
+    close: () => void;
+    View: () => React.ReactElement | null;
+    lastResult: ContactWidgetResult | null;
+};
+
+export { ContactWidget, type ContactWidgetProps, type ContactWidgetResult, useContactWidget };

package/dist/contact-widget.js

@@ -0,0 +1,91 @@
+// src/contact-widget.tsx
+import * as React from "react";
+import { Modal, View } from "react-native";
+import { WebView } from "react-native-webview";
+import { jsx } from "react/jsx-runtime";
+function ContactWidget({
+  visible,
+  widgetId,
+  workerHost = "https://go.sendoracloud.com",
+  theme = "auto",
+  prefillName,
+  prefillEmail,
+  onClose
+}) {
+  const didFire = React.useRef(false);
+  React.useEffect(() => {
+    if (visible) didFire.current = false;
+  }, [visible]);
+  if (!widgetId) return null;
+  const params = new URLSearchParams({ widgetId, theme });
+  if (prefillName) params.set("prefillName", prefillName);
+  if (prefillEmail) params.set("prefillEmail", prefillEmail);
+  const uri = `${workerHost}/embed/contact?${params.toString()}`;
+  const handleClose = (result) => {
+    if (didFire.current) return;
+    didFire.current = true;
+    onClose(result);
+  };
+  const onNav = (req) => {
+    const url = req.url || "";
+    if (url.startsWith("sendora://close")) {
+      const queryStart = url.indexOf("?");
+      const params2 = queryStart >= 0 ? new URLSearchParams(url.slice(queryStart + 1)) : new URLSearchParams();
+      const ticketId = params2.get("ticketId") || "";
+      const portalUrl = params2.get("portalUrl") || null;
+      handleClose({ ticketId, portalUrl, submitted: ticketId !== "" });
+      return false;
+    }
+    if (!url.startsWith("https://") && !url.startsWith("about:")) {
+      return false;
+    }
+    return true;
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      animationType: "slide",
+      presentationStyle: "pageSheet",
+      onRequestClose: () => handleClose({ ticketId: "", portalUrl: null, submitted: false }),
+      children: /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+        WebView,
+        {
+          source: { uri },
+          onShouldStartLoadWithRequest: onNav,
+          originWhitelist: ["https://*", "about:*", "sendora://*"],
+          setSupportMultipleWindows: false,
+          javaScriptEnabled: true,
+          domStorageEnabled: true,
+          allowsBackForwardNavigationGestures: false
+        }
+      ) })
+    }
+  );
+}
+function useContactWidget(widgetId, defaults) {
+  const [visible, setVisible] = React.useState(false);
+  const [lastResult, setLastResult] = React.useState(null);
+  const open = React.useCallback(() => setVisible(true), []);
+  const close = React.useCallback(() => setVisible(false), []);
+  const View2 = React.useCallback(
+    () => /* @__PURE__ */ jsx(
+      ContactWidget,
+      {
+        ...defaults,
+        widgetId,
+        visible,
+        onClose: (r) => {
+          setLastResult(r);
+          setVisible(false);
+        }
+      }
+    ),
+    [defaults, widgetId, visible]
+  );
+  return { open, close, View: View2, lastResult };
+}
+export {
+  ContactWidget,
+  useContactWidget
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendoracloud/sdk-react-native",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Sendora Cloud React Native + Expo SDK — analytics, identity, push-token registration, auth, deep links (Branch / Firebase Dynamic Links parity). Auth + analytics + deep links work in Expo Go; push token registration requires a Dev Client (EAS Build or `npx expo prebuild`).",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -11,6 +11,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./contact-widget": {
+      "types": "./dist/contact-widget.d.ts",
+      "import": "./dist/contact-widget.js",
+      "require": "./dist/contact-widget.cjs"
     }
   },
   "files": [
@@ -32,7 +37,8 @@
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.17.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=13.0.0"
   },
   "peerDependenciesMeta": {
     "@react-native-async-storage/async-storage": {
@@ -40,13 +46,19 @@
     },
     "react-native": {
       "optional": false
+    },
+    "react-native-webview": {
+      "optional": true
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "build": "tsup src/index.ts src/contact-widget.tsx --format esm,cjs --dts --clean --external react --external react-native --external react-native-webview",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
+    "@types/react": "^19.2.16",
+    "react-native": "^0.85.3",
+    "react-native-webview": "^13.16.1",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },