@campxdev/campx-web-utils 2.0.14 → 2.0.16

package/dist/esm/types/src/components/Exotel/ExotelPhone.d.ts

@@ -1,4 +1,4 @@
-import { type DispositionFormData } from './CallDispositionForm';
+import { DispositionFormData } from './CallDispositionForm';
 interface ExotelPhoneProps {
     className?: string;
     prospectId?: string;
@@ -6,5 +6,5 @@ interface ExotelPhoneProps {
     prospectNumber?: string;
     onSaveDisposition?: (data: DispositionFormData) => Promise<any>;
 }
-declare const ExotelPhone: ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition }: ExotelPhoneProps) => import("react/jsx-runtime").JSX.Element;
+declare const ExotelPhone: ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition, }: ExotelPhoneProps) => import("react/jsx-runtime").JSX.Element;
 export default ExotelPhone;

package/dist/esm/types/src/services/exotel/api.d.ts

@@ -84,6 +84,7 @@ export interface SaveDispositionInput {
     prospectId?: string;
     callStatusDisposition?: 'connected' | 'not_connected';
     dispositionCategory: string;
+    prospectStatus?: string;
     dispositionReason?: string;
     dispositionNotes?: string;
     callbackScheduledAt?: string;

package/dist/index.d.ts

@@ -305,6 +305,7 @@ interface SaveDispositionInput {
     prospectId?: string;
     callStatusDisposition?: 'connected' | 'not_connected';
     dispositionCategory: string;
+    prospectStatus?: string;
     dispositionReason?: string;
     dispositionNotes?: string;
     callbackScheduledAt?: string;
@@ -491,7 +492,7 @@ interface ExotelPhoneProps {
     prospectNumber?: string;
     onSaveDisposition?: (data: DispositionFormData) => Promise<any>;
 }
-declare const ExotelPhone: ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition }: ExotelPhoneProps) => react_jsx_runtime.JSX.Element | null;
+declare const ExotelPhone: ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition, }: ExotelPhoneProps) => react_jsx_runtime.JSX.Element | null;
 
 interface CallButtonProps {
     phoneNumber?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "author": "CampX",
   "license": "MIT",
   "keywords": [

package/src/components/Exotel/CallButton.tsx

@@ -118,7 +118,41 @@ const CallButton = ({
       }
     } catch (err: any) {
       console.error('Failed to make call:', err)
-      setError(err.message || 'Failed to make call')
+
+      // Parse Exotel error response
+      let errorMessage = 'Failed to make call'
+
+      if (err?.Code || err?.Status === 'Failed') {
+        // Exotel API error response
+        const code = err.Code
+
+        // Try to parse the Error field if it's a JSON string
+        let errorDetails = null
+        if (err.Error && typeof err.Error === 'string') {
+          try {
+            errorDetails = JSON.parse(err.Error)
+          } catch (parseErr) {
+            // Not JSON, ignore
+          }
+        }
+
+        // Get description from parsed error or use default messages
+        const description = errorDetails?.response?.error_data?.description
+
+        if (code === 404) {
+          errorMessage = description || 'User device is currently busy or unavailable'
+        } else if (code >= 400 && code < 500) {
+          errorMessage = description || 'Unable to complete call. Please try again.'
+        } else if (code >= 500) {
+          errorMessage = description || 'Service temporarily unavailable. Please try again later.'
+        } else {
+          errorMessage = description || 'Failed to make call'
+        }
+      } else if (err?.message) {
+        errorMessage = err.message
+      }
+
+      setError(errorMessage)
     } finally {
       setIsDialing(false)
     }

package/src/components/Exotel/CallDispositionForm.tsx

@@ -69,7 +69,7 @@ const CallDispositionForm = ({
   const queryClient = useQueryClient();
   const isEditMode = !!existingData?.dispositionCategory;
 
-  // Simple state management instead of react-hook-form
+  // Simple state management
   const [callStatus, setCallStatus] = useState<CallStatusType | ''>(
     existingData?.callStatusDisposition || '',
   );

package/src/components/Exotel/ExotelPhone.tsx

@@ -1,37 +1,20 @@
-import { useState, useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { Button, Typography } from '@campxdev/react-blueprint';
+import { Mic, MicOff, Pause, Phone, PhoneIncoming, PhoneOff, PhoneOutgoing, Play, Volume2, VolumeX, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
-import { Button, Typography } from '@campxdev/react-blueprint'
-
-import {
-  X,
-  Mic,
-  MicOff,
-  Pause,
-  Play,
-  Volume2,
-  VolumeX,
-  Phone,
-  PhoneOff,
-  PhoneIncoming,
-  PhoneOutgoing,
-} from 'lucide-react'
-
-import { useExotel } from '../../providers/ExotelProvider'
-
-import { cancelCall, saveCallDisposition } from '../../services/exotel/api'
-
-import { formatDurationTimer } from '../../utils/exotel/formatters'
-import { EXOTEL_CONSTANTS } from '../../constants/exotel.constants'
-
-import CallDispositionForm, { type DispositionFormData } from './CallDispositionForm'
+import { EXOTEL_CONSTANTS } from '../../constants/exotel.constants';
+import { useExotel } from '../../providers/ExotelProvider';
+import { cancelCall, saveCallDisposition } from '../../services/exotel/api';
+import { formatDurationTimer } from '../../utils/exotel/formatters';
+import CallDispositionForm, { DispositionFormData } from './CallDispositionForm';
 
 interface ExotelPhoneProps {
-  className?: string
-  prospectId?: string
-  prospectName?: string
-  prospectNumber?: string
-  onSaveDisposition?: (data: DispositionFormData) => Promise<any>
+  className?: string;
+  prospectId?: string;
+  prospectName?: string;
+  prospectNumber?: string;
+  onSaveDisposition?: (data: DispositionFormData) => Promise<any>;
 }
 
 // CSS for pulsing animation
@@ -67,9 +50,15 @@ const pulseAnimationStyle = `
 .animate-pulse-dot {
   animation: pulse-dot 1.5s ease-in-out infinite;
 }
-`
-
-const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition }: ExotelPhoneProps) => {
+`;
+
+const ExotelPhone = ({
+  className,
+  prospectId,
+  prospectName,
+  prospectNumber,
+  onSaveDisposition,
+}: ExotelPhoneProps) => {
   const {
     callState,
     dispositionData,
@@ -80,22 +69,22 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
     toggleMute,
     toggleSpeaker,
     clearDisposition,
-  } = useExotel()
+  } = useExotel();
 
-  const [isAccepting, setIsAccepting] = useState(false)
-  const [isDeclining, setIsDeclining] = useState(false)
-  const declineTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [isAccepting, setIsAccepting] = useState(false);
+  const [isDeclining, setIsDeclining] = useState(false);
+  const declineTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Inject animation styles
   useEffect(() => {
-    const styleId = 'exotel-phone-animations'
+    const styleId = 'exotel-phone-animations';
     if (!document.getElementById(styleId)) {
-      const styleEl = document.createElement('style')
-      styleEl.id = styleId
-      styleEl.textContent = pulseAnimationStyle
-      document.head.appendChild(styleEl)
+      const styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      styleEl.textContent = pulseAnimationStyle;
+      document.head.appendChild(styleEl);
     }
-  }, [])
+  }, []);
 
   const {
     phase,
@@ -110,43 +99,43 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
     callActivityId,
     exotelCallSid,
     prospectUniqueId,
-  } = callState
+  } = callState;
 
   // Use props (from Prospect view) as primary, fall back to SDK values (for incoming calls)
-  const displayName = prospectName || sdkCallerName || 'Unknown'
-  const displayNumber = prospectNumber || sdkCallerNumber || 'No number'
+  const displayName = prospectName || sdkCallerName || 'Unknown';
+  const displayNumber = prospectNumber || sdkCallerNumber || 'No number';
 
   const handleAcceptCall = async () => {
-    setIsAccepting(true)
+    setIsAccepting(true);
     try {
-      await acceptCall()
+      await acceptCall();
     } catch (error: any) {
-      console.error('Accept call error:', error)
+      console.error('Accept call error:', error);
     } finally {
-      setIsAccepting(false)
+      setIsAccepting(false);
     }
-  }
+  };
 
   const handleDeclineCall = async () => {
-    setIsDeclining(true)
+    setIsDeclining(true);
     // Use rejectCall for incoming/ready_to_call (before accepting)
     // Use hangupCall for connected/calling (after accepting)
     if (phase === 'incoming' || phase === 'ready_to_call') {
-      rejectCall()
+      rejectCall();
     } else {
-      hangupCall()
+      hangupCall();
     }
 
     // Call backend API to update call activity status
     // Use exotelCallSid (from outbound_call API) for outbound calls
     // Use callActivityId as fallback identifier
-    const callSidForApi = exotelCallSid || callActivityId
+    const callSidForApi = exotelCallSid || callActivityId;
     if (callSidForApi) {
       try {
-        const reason = phase === 'connected' ? 'ended' : 'declined'
-        await cancelCall({ callSid: callSidForApi, reason })
+        const reason = phase === 'connected' ? 'ended' : 'declined';
+        await cancelCall({ callSid: callSidForApi, reason });
       } catch (error) {
-        console.error('Failed to cancel call in backend:', error)
+        console.error('Failed to cancel call in backend:', error);
       }
     }
 
@@ -154,27 +143,27 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
     // Set a timeout to force reset the declining state
     // Note: Don't clear disposition here - let the SDK's callEnded event handle it
     declineTimeoutRef.current = setTimeout(() => {
-      setIsDeclining(false)
-    }, EXOTEL_CONSTANTS.DECLINE_TIMEOUT_MS)
-  }
+      setIsDeclining(false);
+    }, EXOTEL_CONSTANTS.DECLINE_TIMEOUT_MS);
+  };
 
   // Clear decline timeout when phase changes (meaning SDK handled it)
   useEffect(() => {
     if (phase === 'idle' || phase === 'ended') {
       if (declineTimeoutRef.current) {
-        clearTimeout(declineTimeoutRef.current)
-        declineTimeoutRef.current = null
+        clearTimeout(declineTimeoutRef.current);
+        declineTimeoutRef.current = null;
       }
-      setIsDeclining(false)
+      setIsDeclining(false);
       // Note: Don't auto-clear disposition here - let user submit or close the form manually
     }
-  }, [phase])
+  }, [phase]);
 
   // Handle saving disposition to backend
   const handleSaveDisposition = async (data: DispositionFormData) => {
     // If custom handler is provided, use it
     if (onSaveDisposition) {
-      return onSaveDisposition(data)
+      return onSaveDisposition(data);
     }
 
     // Use the callStatusDisposition from the form (user selected)
@@ -184,29 +173,30 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
       callStatusDisposition: data.callStatusDisposition,
       dispositionCategory: data.dispositionCategory,
       dispositionNotes: data.remarks || undefined,
-    })
-  }
+    });
+  };
 
   // Cleanup timeout on unmount
   useEffect(() => {
     return () => {
       if (declineTimeoutRef.current) {
-        clearTimeout(declineTimeoutRef.current)
+        clearTimeout(declineTimeoutRef.current);
       }
-    }
-  }, [])
+    };
+  }, []);
 
   // Show disposition form after call ends
   if (dispositionData) {
     // Use prospect name from props, or from dispositionData (preserved from call), or fallback
-    const finalCallerName = prospectName || dispositionData.callerName || sdkCallerName || 'Unknown'
+    const finalCallerName =
+      prospectName || dispositionData.callerName || sdkCallerName || 'Unknown';
 
     // Override disposition data with prospect details
     const enrichedDispositionData = {
       ...dispositionData,
       callerName: finalCallerName,
       callerNumber: displayNumber,
-    }
+    };
 
     return (
       <CallDispositionForm
@@ -214,17 +204,18 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
         prospectId={prospectId}
         onClose={clearDisposition}
         onSave={handleSaveDisposition}
+        existingData={undefined}
       />
-    )
+    );
   }
 
   // Don't show anything if idle or ended
   if (phase === 'idle' || phase === 'ended') {
-    return null
+    return null;
   }
 
-  const isOutbound = callDirection === 'outbound'
-  const isInbound = callDirection === 'inbound'
+  const isOutbound = callDirection === 'outbound';
+  const isInbound = callDirection === 'inbound';
 
   // Get avatar color based on call direction
   const avatarBgColor =
@@ -232,31 +223,31 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
       ? 'bg-green-500'
       : isOutbound
         ? 'bg-blue-500'
-        : 'bg-orange-500'
+        : 'bg-orange-500';
 
   // Get status text
   const getStatusText = () => {
     switch (phase) {
       case 'ready_to_call':
-        return 'Ready to call...'
+        return 'Ready to call...';
       case 'calling':
-        return 'Calling...'
+        return 'Calling...';
       case 'incoming':
-        return 'Incoming call...'
+        return 'Incoming call...';
       case 'connected':
-        return null // Will show timer instead
+        return null; // Will show timer instead
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   // Get connecting text for calling state
   const getConnectingText = () => {
     if (phase === 'calling') {
-      return `Connecting to ${displayName}...`
+      return `Connecting to ${displayName}...`;
     }
-    return null
-  }
+    return null;
+  };
 
   const modalContent = (
     <>
@@ -273,14 +264,17 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
         style={{ zIndex: EXOTEL_CONSTANTS.MODAL_Z_INDEX }}
       >
         <div
-          className="bg-white shadow-2xl w-full max-w-md p-6 relative"
-          style={{ borderRadius: EXOTEL_CONSTANTS.MODAL_BORDER_RADIUS, border: '1px solid #e5e7eb' }}
+          className="relative w-full max-w-md p-6 bg-white shadow-2xl"
+          style={{
+            borderRadius: EXOTEL_CONSTANTS.MODAL_BORDER_RADIUS,
+            border: '1px solid #e5e7eb',
+          }}
           onClick={(e) => e.stopPropagation()}
         >
           {/* Close button */}
           <button
             onClick={handleDeclineCall}
-            className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-full transition-colors"
+            className="absolute p-1 transition-colors rounded-full top-4 right-4 hover:bg-gray-100"
           >
             <X className="w-5 h-5 text-gray-500" />
           </button>
@@ -321,20 +315,28 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
           </div>
 
           {/* Caller info */}
-          <div className="text-center mb-4">
-            <Typography variant="h3" className="text-xl font-semibold text-gray-900">
+          <div className="mb-4 text-center">
+            <Typography
+              variant="h3"
+              className="text-xl font-semibold text-gray-900"
+            >
               {displayName}
             </Typography>
             {prospectUniqueId && (
-              <Typography variant="small" className="text-blue-600 font-medium">ID: {prospectUniqueId}</Typography>
+              <Typography variant="small" className="font-medium text-blue-600">
+                ID: {prospectUniqueId}
+              </Typography>
             )}
             <Typography variant="muted">{displayNumber}</Typography>
           </div>
 
           {/* Status / Timer */}
-          <div className="text-center mb-6">
+          <div className="mb-6 text-center">
             {phase === 'connected' ? (
-              <Typography variant="p" className="text-green-500 text-lg font-medium">
+              <Typography
+                variant="p"
+                className="text-lg font-medium text-green-500"
+              >
                 {formatDurationTimer(callDuration)}
               </Typography>
             ) : (
@@ -361,7 +363,7 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
                     <Mic className="w-5 h-5 text-gray-600" />
                   )}
                 </button>
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="mt-1 text-xs text-gray-500">
                   {isMuted ? 'Unmute' : 'Mute'}
                 </p>
               </div>
@@ -382,7 +384,7 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
                     <Pause className="w-5 h-5 text-gray-600" />
                   )}
                 </button>
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="mt-1 text-xs text-gray-500">
                   {isOnHold ? 'Resume' : 'Hold'}
                 </p>
               </div>
@@ -403,7 +405,7 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
                     <Volume2 className="w-5 h-5 text-gray-600" />
                   )}
                 </button>
-                <p className="text-xs text-gray-500 mt-1">
+                <p className="mt-1 text-xs text-gray-500">
                   {isSpeakerOff ? 'Speaker On' : 'Speaker Off'}
                 </p>
               </div>
@@ -466,17 +468,20 @@ const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSa
 
           {/* Connecting text */}
           {getConnectingText() && (
-            <Typography variant="small" className="text-center text-gray-500 mt-4">
+            <Typography
+              variant="small"
+              className="mt-4 text-center text-gray-500"
+            >
               {getConnectingText()}
             </Typography>
           )}
         </div>
       </div>
     </>
-  )
+  );
 
   // Use portal to render at document body level to escape any parent stacking contexts
-  return createPortal(modalContent, document.body)
-}
+  return createPortal(modalContent, document.body);
+};
 
-export default ExotelPhone
+export default ExotelPhone;

package/src/providers/ExotelProvider.tsx

@@ -422,8 +422,16 @@ export const ExotelProvider: React.FC<ExotelProviderProps> = ({
         callDuration: 0,
       }))
 
-      const response = await exotelService.makeCall(phoneNumber) // Use actual number for calling
-      return response
+      try {
+        const response = await exotelService.makeCall(phoneNumber) // Use actual number for calling
+        return response
+      } catch (error: any) {
+        // If SDK call fails (4xx/5xx errors from Exotel API), reset state to idle
+        // This allows the user to retry the call
+        setCallState(initialCallState)
+        // Re-throw the error so CallButton can handle it
+        throw error
+      }
     },
     [defaultCallerName],
   )