@dora-cell/sdk-react 4.1.0 → 4.1.3

package/README.md

@@ -81,8 +81,17 @@ A slide-over interface that handles the entire call lifecycle (Ringing, Connecti
 > [!TIP]
 > This component handles audio playback (remote stream and ringtones) automatically. You just need to ensure it's rendered in your tree when a call is active.
 
+#### Props
+
+- `isOpen?: boolean` - Controls if the interface is visible.
+- `onOpenChange?: (open: boolean) => void` - Callback when the interface requests to open/close.
+- `onCallEnded?: () => void` - Callback fired when a call ends.
+- `maximizeIcon?: React.ReactNode` - Custom icon for the maximize button.
+- `minimizeIcon?: React.ReactNode` - Custom icon for the minimize button.
+
 ```tsx
 import { CallInterface } from "@dora-cell/sdk-react";
+import { Maximize, Minimize2 } from "lucide-react";
 
 function Dashboard() {
   const [isOpen, setIsOpen] = useState(false);
@@ -93,7 +102,13 @@ function Dashboard() {
         This should be rendered globally (e.g., in your root layout) 
         to handle incoming calls even when the dialer is closed.
       */}
-      <CallInterface isOpen={isOpen} onOpenChange={setIsOpen} />
+      <CallInterface 
+        isOpen={isOpen} 
+        onOpenChange={setIsOpen} 
+        onCallEnded={() => console.log('Call ended')}
+        maximizeIcon={<Maximize size={18} />}
+        minimizeIcon={<Minimize2 size={16} />}
+      />
     </>
   );
 }
@@ -101,7 +116,32 @@ function Dashboard() {
 
 ### `Dialpad`
 
-A flexible keypad for entering numbers and initiating calls. It automatically fetches available Caller IDs (extensions) and allows switching between them.
+A flexible keypad for entering numbers and initiating calls. It automatically fetches available Caller IDs (extensions) and allows switching between them. If you prefer to manage the extensions in your own state, you can pass them as props.
+
+#### Props
+
+- `initialNumber?: string` - Pre-fill the dialpad input.
+- `showKeys?: boolean` - Whether to show the numeric keypad by default (default: `true`).
+- `className?: string` - Custom CSS classes for styling.
+- `availableExtensions?: Array<{ label: string; value: string }>` - Override the automatically fetched caller IDs.
+- `selectedExtension?: string` - Manually select the active caller ID.
+- `onExtensionChange?: (ext: string) => void` - Callback fired when the user selects a different caller ID.
+- `onCallInitiated?: (number: string) => void` - Callback fired right after a call starts.
+
+```tsx
+import { Dialpad } from "@dora-cell/sdk-react";
+
+function Dialer() {
+  return (
+    <Dialpad 
+      initialNumber="+2348000000000"
+      showKeys={true}
+      className="my-custom-class"
+      onCallInitiated={(number) => console.log('Calling', number)}
+    />
+  );
+}
+```
 
 ### `CreditBalance`
 

package/dist/index.d.mts

@@ -64,6 +64,7 @@ declare function useCall(): {
     isMuted: boolean;
     currentCall: Call | null;
     callError: string | undefined;
+    isInitialized: boolean;
 };
 /**
  * Hook for connection status

package/dist/index.d.ts

@@ -64,6 +64,7 @@ declare function useCall(): {
     isMuted: boolean;
     currentCall: Call | null;
     callError: string | undefined;
+    isInitialized: boolean;
 };
 /**
  * Hook for connection status

package/dist/index.js

@@ -197,7 +197,8 @@ function CallInterface({
     hangup,
     answerCall,
     toggleMute,
-    callError
+    callError,
+    isInitialized
   } = useCall();
   const [isMinimized, setIsMinimized] = react.useState(false);
   const [wasConnected, setWasConnected] = react.useState(false);
@@ -387,8 +388,8 @@ function CallInterface({
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex-1 dora-border-t dora-border-[#282828] dora-mt-2 dora-mb-2" }),
-          callError && callStatus === "ended" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-red-900/20 dora-border dora-border-red-500/30 dora-rounded-lg dora-p-2 md:dora-p-3 dora-mb-2 md:dora-mb-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-red-400 dora-text-xs md:dora-text-sm dora-font-medium", children: "Call Failed" }),
+          callError && (callStatus === "ended" || !isInitialized) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-red-900/20 dora-border dora-border-red-500/30 dora-rounded-lg dora-p-2 md:dora-p-3 dora-mb-2 md:dora-mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-red-400 dora-text-xs md:dora-text-sm dora-font-medium", children: !isInitialized ? "Configuration Error" : "Call Failed" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-red-300 dora-text-xs dora-mt-0.5 md:dora-mt-1", children: callError }),
             closeCountdown !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-mt-1.5 md:dora-mt-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-w-full dora-bg-red-900/30 dora-rounded-full dora-h-1.5 dora-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -446,7 +447,7 @@ function Dialpad({
   selectedExtension: providedSelectedExtension,
   onExtensionChange
 }) {
-  const { call, callStatus } = useCall();
+  const { call, callStatus, callError, isInitialized } = useCall();
   const { isConnected } = useConnectionStatus();
   const { extensions: fetchedExtensions, setExtension } = useExtensions();
   const [number, setNumber] = react.useState(initialNumber);
@@ -505,6 +506,13 @@ function Dialpad({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-bg-emerald-500 dora-text-white dora-px-3 dora-py-1.5 dora-rounded-lg dora-text-xs md:dora-text-sm dora-font-semibold dora-shadow-sm", children: "Dora-cell" }),
       /* @__PURE__ */ jsxRuntime.jsx(CreditBalance, {})
     ] }),
+    callError && !isInitialized && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-mb-4 dora-p-3 dora-bg-red-50 dora-border dora-border-red-100 dora-rounded-xl dora-flex dora-items-start dora-gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-w-5 dora-h-5 dora-rounded-full dora-bg-red-500 dora-flex-shrink-0 dora-flex dora-items-center dora-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(X, { size: 12, className: "dora-text-white" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-xs dora-font-bold dora-text-red-700 dora-mt-0.5", children: "Configuration Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "dora-text-[11px] dora-text-red-600 dora-mt-0.5 dora-leading-tight", children: callError })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-zinc-50 dora-p-6 dora-rounded-3xl dora-border dora-border-zinc-100 dora-shadow-inner", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-zinc-500 dora-font-medium dora-text-sm dora-tracking-tight", children: "Caller ID" }),
@@ -640,6 +648,8 @@ function DoraCellProvider({
       }
       if (state.error) {
         setError(new Error(state.error));
+      } else if (state.status === "registered" || state.status === "connected" || state.status === "connecting") {
+        setError(null);
       }
     };
     const handleIncomingCall = (call2) => {
@@ -770,7 +780,7 @@ function useDoraCell() {
   return context;
 }
 function useCall() {
-  const { sdk, call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error } = useDoraCell();
+  const { sdk, call, hangup, toggleMute, answerCall, callStatus, callDuration, isMuted, currentCall, error, isInitialized } = useDoraCell();
   return {
     sdk,
     call,
@@ -781,7 +791,8 @@ function useCall() {
     callDuration,
     isMuted,
     currentCall,
-    callError: error?.message
+    callError: error?.message,
+    isInitialized
   };
 }
 function useConnectionStatus() {