@contractspec/bundle.library 2.9.1 → 3.1.1

package/dist/node/components/docs/integrations/IntegrationsWhatsappTwilioPage.js

@@ -0,0 +1,164 @@
+// src/components/docs/integrations/IntegrationsWhatsappTwilioPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function IntegrationsWhatsappTwilioPage() {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "WhatsApp Twilio"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Twilio WhatsApp support provides a durable fallback channel with signature verification and outbox-backed outbound dispatch."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Required secrets and config"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `// secret payload
+{
+  "accountSid": "AC123",
+  "authToken": "..."
+}
+
+// optional connection config
+{
+  "fromNumber": "whatsapp:+15550002"
+}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Webhook ingress"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  "Inbound Twilio form payloads are accepted on",
+                  " ",
+                  /* @__PURE__ */ jsxDEV("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "/webhooks/whatsapp/twilio"
+                  }, undefined, false, undefined, this),
+                  "."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  "Signatures are validated with",
+                  " ",
+                  /* @__PURE__ */ jsxDEV("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "x-twilio-signature"
+                  }, undefined, false, undefined, this),
+                  " ",
+                  "and the configured auth token."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  "For deterministic verification, set the exact public webhook URL in",
+                  " ",
+                  /* @__PURE__ */ jsxDEV("code", {
+                    className: "bg-background/50 rounded px-2 py-1",
+                    children: "WHATSAPP_TWILIO_WEBHOOK_URL"
+                  }, undefined, false, undefined, this),
+                  "."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Workspace mapping"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `CHANNEL_WORKSPACE_MAP_WHATSAPP_TWILIO={"AC123":"workspace-acme"}`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Use Twilio as fallback when Meta WhatsApp is your primary route."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Keep account SID mapping explicit to avoid tenant misrouting."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: [
+                  "Protect internal dispatch endpoints with",
+                  /* @__PURE__ */ jsxDEV("code", {
+                    className: "bg-background/50 ml-1 rounded px-2 py-1",
+                    children: "CHANNEL_DISPATCH_TOKEN"
+                  }, undefined, false, undefined, this),
+                  "."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/integrations/whatsapp-meta",
+            className: "btn-ghost",
+            children: "Previous: WhatsApp Meta"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/integrations/health-routing",
+            className: "btn-primary",
+            children: [
+              "Next: Health Routing ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  IntegrationsWhatsappTwilioPage
+};