Use latest Call Widget in the docs

website/package.json

@@ -45,8 +45,8 @@
     "@double-great/alt-text": "^3.1.0",
     "@material/web": "^2.3.0",
     "@mdx-js/react": "^3.0.1",
-    "@niravcodes/call-widget": "^3.0.0",
     "@popperjs/core": "^2.11.8",
+    "@signalwire/call-widget": "^3.15.0",
     "@signalwire/docusaurus-plugin-llms-txt": "1.2.1",
     "canvas": "^3.1.2",
     "clsx": "^2.1.1",

website/src/components/Sigmond/C2CWidgetInternal.tsx

@@ -15,9 +15,14 @@ export default function C2CWidgetInternal({
   token: string;
 }) {
   const rootRef = useRef<HTMLDivElement>(null);
+  const showContactFormRef = useRef<any>(null);
 
   useEffect(() => {
-    import("@niravcodes/call-widget");
+    const loadWidget = async () => {
+      const module = await import("@signalwire/call-widget");
+      showContactFormRef.current = module.showContactForm;
+    };
+    loadWidget();
   }, []);
 
   // react doesn't like other scripts controlling the DOM,
@@ -27,19 +32,50 @@ export default function C2CWidgetInternal({
   useEffect(() => {
     if (rootRef.current) {
       rootRef.current.innerHTML = "";
-      const widget = document.createElement("c2c-widget");
-
-      widget.setAttribute("buttonId", buttonId);
-      widget.setAttribute(
-        "callDetails",
-        JSON.stringify({
-          destination,
-          supportsVideo,
-          supportsAudio,
-        }),
-      );
+      const widget = document.createElement("call-widget");
+
+      widget.setAttribute("button-id", buttonId);
       widget.setAttribute("token", token);
+      widget.setAttribute("support-video", supportsVideo.toString());
+      widget.setAttribute("support-audio", supportsAudio.toString());
+      widget.setAttribute("destination", destination);
+
+      const handleBeforeDial = (event: any) => {
+        const approve = event.detail.approve;
+        const reject = event.detail.reject;
+
+        event.detail.hasListeners = true;
+
+        if (!showContactFormRef.current) {
+          console.error("showContactForm not loaded yet");
+          reject();
+          return;
+        }
+
+        showContactFormRef.current(
+          {
+            onSubmit: (data: any) => {
+              (widget as any).newCallVariable({
+                email: data.email,
+                name: data.name,
+                phone: data.number,
+              });
+              approve();
+            },
+            onCancel: () => {
+              reject();
+            },
+          },
+          widget,
+        );
+      };
+
+      widget.addEventListener("beforeDial", handleBeforeDial);
       rootRef.current.appendChild(widget);
+
+      return () => {
+        widget.removeEventListener("beforeDial", handleBeforeDial);
+      };
     }
     return () => {
       if (rootRef.current) {

website/src/types/signalwire-call-widget.d.ts

@@ -0,0 +1 @@
+declare module "@signalwire/call-widget";

yarn.lock

@@ -2591,14 +2591,6 @@
     "@emnapi/runtime" "^1.4.5"
     "@tybys/wasm-util" "^0.10.0"
 
-"@niravcodes/call-widget@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/@niravcodes/call-widget/-/call-widget-3.0.0.tgz"
-  integrity sha512-byP0+XLwmMBYSiQ+APiO6//Y1OlthJQiR6ZbSQ3yqMHE+s/BZxdk0J9a2svCm7rCtDmKTXYw0xl5frmoyzzkUw==
-  dependencies:
-    "@signalwire/js" dev
-    nanomorph "^5.4.3"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2929,6 +2921,15 @@
   resolved "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
+"@signalwire/call-widget@^3.15.0":
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/@signalwire/call-widget/-/call-widget-3.15.0.tgz#cb93d5c2d38e34ae9c9304e9ab85ef904ac8dd2a"
+  integrity sha512-pQRNtEsYHPpSf6KZFpPjR1vMQNzJKQiaUHJvWJURcc9U6esuEMoR5XzYLFbMNsohKA4YZI7E05hhVMk3hfsKFw==
+  dependencies:
+    "@signalwire/js" "3.29.1"
+    nanomorph "^5.4.3"
+    showdown "^2.1.0"
+
 "@signalwire/core@4.3.1":
   version "4.3.1"
   resolved "https://registry.npmjs.org/@signalwire/core/-/core-4.3.1.tgz"
@@ -2958,7 +2959,7 @@
     unified "^11"
     unist-util-visit "^5"
 
-"@signalwire/js@3.29.1", "@signalwire/js@dev":
+"@signalwire/js@3.29.1":
   version "3.29.1"
   resolved "https://registry.yarnpkg.com/@signalwire/js/-/js-3.29.1.tgz#d39def63d80942aa35abcd1504a13e9476255298"
   integrity sha512-YIu1NTul4zaFk0yNXve3k41GaAlYChopbjSTmB4skyCUDNtRAdasc+xOqEcSWzDFpkKQTeIYXPC4mWA8kliwcg==
@@ -4982,6 +4983,11 @@ commander@^8.3.0:
   resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 common-path-prefix@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz"
@@ -11459,6 +11465,13 @@ should@^13.2.1:
     should-type-adaptors "^1.0.1"
     should-util "^1.0.0"
 
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
+  dependencies:
+    commander "^9.0.0"
+
 shx@^0.3.4:
   version "0.3.4"
   resolved "https://registry.npmjs.org/shx/-/shx-0.3.4.tgz"