@campxdev/campx-web-utils 2.0.13 → 2.0.14

package/src/constants/exotel.constants.ts

@@ -0,0 +1,7 @@
+export const EXOTEL_CONSTANTS = {
+  MODAL_Z_INDEX: 999999,
+  MODAL_BACKDROP_Z_INDEX: 999998,
+  MODAL_BORDER_RADIUS: '16px',
+  DECLINE_TIMEOUT_MS: 2000,
+  TIMER_INTERVAL_MS: 1000,
+}

package/src/providers/ExotelProvider.tsx

@@ -0,0 +1,526 @@
+
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import ExotelService, {
+  PermissionStatus,
+} from '../services/exotel/ExotelService'
+
+import { registerIncomingCall } from '../services/exotel/api'
+
+// Global context key for cross-module-federation sharing
+const EXOTEL_CONTEXT_KEY = '__EXOTEL_CONTEXT__'
+
+// Get or create a shared context across module federation boundaries
+const getSharedContext = () => {
+  if (!(window as any)[EXOTEL_CONTEXT_KEY]) {
+    ;(window as any)[EXOTEL_CONTEXT_KEY] = createContext<
+      ExotelContextType | undefined
+    >(undefined)
+  }
+  return (window as any)[EXOTEL_CONTEXT_KEY] as React.Context<
+    ExotelContextType | undefined
+  >
+}
+
+export interface CallEventData {
+  callId: string
+  remoteId: string
+  remoteDisplayName: string
+  callDirection: string
+  callState: string
+  callDuration: string
+  callStartedTime: string
+  callEstablishedTime: string
+  callEndedTime: string
+  callAnswerTime: string
+  callEndReason: string
+  sessionId: string
+  callFromNumber?: string
+  status?: string
+}
+
+export type CallPhase =
+  | 'idle'
+  | 'ready_to_call' // Outbound: User clicked call, waiting to accept
+  | 'calling' // Outbound: Connecting to lead
+  | 'incoming' // Inbound: Ringing
+  | 'connected' // Call is active
+  | 'ended' // Call ended, show disposition
+
+export interface CallState {
+  phase: CallPhase
+  callData: CallEventData | null
+  isOnHold: boolean
+  isMuted: boolean
+  isSpeakerOff: boolean
+  callDirection: 'outbound' | 'inbound' | null
+  callStartTime: number | null // Timestamp when call connected
+  callDuration: number // Duration in seconds
+  callerName: string | null
+  callerNumber: string | null
+  callActivityId: string | null // Database ID from backend call activity record
+  exotelCallSid: string | null // CallSid from Exotel outbound_call API response
+  prospectUniqueId: number | null // Prospect unique ID number
+  wasAccepted: boolean // Track if user clicked Accept (for disposition logic)
+}
+
+export interface CallDispositionData {
+  callId: string // Database ID from backend (for API calls)
+  exotelCallId: string // Exotel SIP call ID (for reference)
+  callDirection: 'outbound' | 'inbound'
+  callDuration: number
+  callerName: string | null
+  callerNumber: string | null
+}
+
+export interface ExotelContextType {
+  isInitialized: boolean
+  isConnected: boolean
+  callState: CallState
+  permissionStatus: PermissionStatus
+  dispositionData: CallDispositionData | null
+  makeCall: (phoneNumber: string, callerName?: string, callActivityId?: string, maskedNumber?: string) => Promise<any>
+  acceptCall: () => Promise<void>
+  hangupCall: () => void
+  rejectCall: () => void // For declining incoming calls before accepting
+  toggleHold: () => void
+  toggleMute: () => void
+  toggleSpeaker: () => void
+  sendDTMF: (digit: string) => void
+  registerDevice: () => Promise<void>
+  unregisterDevice: () => void
+  requestMicrophoneAccess: () => Promise<boolean>
+  clearDisposition: () => void
+  setCallActivityId: (callActivityId: string) => void // Update callActivityId after record creation
+  setExotelCallSid: (callSid: string) => void // Update exotelCallSid from SDK response
+}
+
+export interface ExotelProviderProps {
+  children: ReactNode
+  accessToken: string
+  agentUserId: string
+  autoConnectVOIP?: boolean
+  callerName?: string
+  callerNumber?: string
+}
+
+const initialCallState: CallState = {
+  phase: 'idle',
+  callData: null,
+  isOnHold: false,
+  isMuted: false,
+  isSpeakerOff: false,
+  callDirection: null,
+  callStartTime: null,
+  callDuration: 0,
+  callerName: null,
+  callerNumber: null,
+  callActivityId: null,
+  exotelCallSid: null,
+  prospectUniqueId: null,
+  wasAccepted: false,
+}
+
+/**
+ * Mask mobile number for display (first 2 and last 2 of actual number visible)
+ * Handles country code prefix (+91)
+ * e.g., "+919876543210" -> "+9198******10"
+ * e.g., "9876543210" -> "98******10"
+ */
+const maskMobile = (mobile: string): string => {
+  if (!mobile || mobile.length < 4) return '**********'
+
+  // Check for country code prefix
+  let prefix = ''
+  let number = mobile
+
+  if (mobile.startsWith('+91')) {
+    prefix = '+91'
+    number = mobile.substring(3)
+  } else if (mobile.startsWith('91') && mobile.length > 10) {
+    prefix = '91'
+    number = mobile.substring(2)
+  }
+
+  const cleaned = number.replace(/\D/g, '')
+  if (cleaned.length < 4) return prefix + '**********'
+
+  return prefix + cleaned.substring(0, 2) + '*'.repeat(cleaned.length - 4) + cleaned.substring(cleaned.length - 2)
+}
+
+// Use shared context for cross-module-federation compatibility
+const ExotelContext = getSharedContext()
+
+export const ExotelProvider: React.FC<ExotelProviderProps> = ({
+  children,
+  accessToken,
+  agentUserId,
+  autoConnectVOIP = true,
+  callerName: defaultCallerName,
+  callerNumber: defaultCallerNumber,
+}) => {
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [isConnected, setIsConnected] = useState(false)
+  const [permissionStatus, setPermissionStatus] =
+    useState<PermissionStatus>('unknown')
+  const [callState, setCallState] = useState<CallState>(initialCallState)
+  const [dispositionData, setDispositionData] =
+    useState<CallDispositionData | null>(null)
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const callStateRef = useRef<CallState>(callState)
+  const exotelService = ExotelService.getInstance()
+
+  // Keep ref in sync with state for use in event handlers
+  useEffect(() => {
+    callStateRef.current = callState
+  }, [callState])
+
+  // Timer for call duration
+  useEffect(() => {
+    if (callState.phase === 'connected' && callState.callStartTime) {
+      timerRef.current = setInterval(() => {
+        setCallState((prev) => ({
+          ...prev,
+          callDuration: Math.floor((Date.now() - prev.callStartTime!) / 1000),
+        }))
+      }, 1000)
+    } else {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+        timerRef.current = null
+      }
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+    }
+  }, [callState.phase, callState.callStartTime])
+
+  // Request microphone permission before initializing
+  useEffect(() => {
+    const requestPermission = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        })
+        stream.getTracks().forEach((track) => track.stop())
+        setPermissionStatus('granted')
+      } catch (error) {
+        console.warn('Microphone permission denied:', error)
+        setPermissionStatus('denied')
+      }
+    }
+
+    if (navigator.permissions && navigator.permissions.query) {
+      navigator.permissions
+        .query({ name: 'microphone' as PermissionName })
+        .then((status) => {
+          setPermissionStatus(status.state as 'granted' | 'denied' | 'prompt')
+
+          status.onchange = () => {
+            setPermissionStatus(status.state as 'granted' | 'denied' | 'prompt')
+          }
+
+          if (status.state === 'prompt') {
+            requestPermission()
+          }
+        })
+        .catch((error) => {
+          console.warn('Could not query permission status:', error)
+          requestPermission()
+        })
+    } else {
+      requestPermission()
+    }
+  }, [])
+
+  // Initialize the SDK
+  useEffect(() => {
+    if (!accessToken || !agentUserId || isInitialized) return
+
+    const initializeExotel = async () => {
+      const success = await exotelService.initialize(
+        accessToken,
+        agentUserId,
+        autoConnectVOIP,
+      )
+      setIsInitialized(success)
+    }
+
+    initializeExotel()
+  }, [accessToken, agentUserId, autoConnectVOIP])
+
+  // Setup event listeners
+  useEffect(() => {
+    if (!isInitialized) return
+
+    const handleCallEvent = (event: string, data: CallEventData) => {
+      switch (event) {
+        case 'incoming': {
+          // Check current state to determine if this is a genuine incoming call
+          // or just the agent callback for an outbound click-to-call
+          const isOutboundCall = callStateRef.current.callDirection === 'outbound'
+
+          if (isOutboundCall) {
+            // For outbound calls (click-to-call), Exotel first calls the agent
+            // This triggers 'incoming' event but we should NOT overwrite the outbound call state
+            setCallState((prev) => ({
+              ...prev,
+              callData: data,
+              isOnHold: false,
+              isMuted: false,
+            }))
+          } else {
+            // This is a genuine incoming call - update state
+            const incomingNumber = data.callFromNumber || data.remoteId || null
+            setCallState((prev) => ({
+              ...prev,
+              phase: 'incoming',
+              callData: data,
+              callDirection: 'inbound',
+              callerName: data.remoteDisplayName || null,
+              callerNumber: incomingNumber ? maskMobile(incomingNumber) : null,
+              isOnHold: false,
+              isMuted: false,
+            }))
+
+            // Register incoming call in the backend and get prospect details
+            if (data.callId || data.sessionId) {
+              registerIncomingCall({
+                callSid: data.callId || data.sessionId,
+                fromNumber: data.callFromNumber || data.remoteId || '',
+                toNumber: data.remoteDisplayName || '',
+              })
+                .then((response) => {
+                  // Update call state with prospect details and call activity ID
+                  const prospectMobile = response.prospect?.mobile
+                  setCallState((prev) => ({
+                    ...prev,
+                    callActivityId: response.data?.id || prev.callActivityId,
+                    callerName: response.prospect?.name || prev.callerName,
+                    callerNumber: prospectMobile ? maskMobile(prospectMobile) : prev.callerNumber,
+                    prospectUniqueId: response.prospect?.uniqueId || prev.prospectUniqueId,
+                  }))
+                })
+                .catch((err) => {
+                  console.error('Failed to register incoming call:', err)
+                })
+            }
+          }
+          break
+        }
+
+        case 'connected':
+          setCallState((prev) => ({
+            ...prev,
+            phase: 'connected',
+            callData: data,
+            callStartTime: Date.now(),
+            callDuration: 0,
+          }))
+          break
+
+        case 'callEnded':
+          setCallState((prev) => {
+            // Show disposition form if:
+            // 1. User accepted the call (wasAccepted = true), OR
+            // 2. Call was connected, OR
+            // 3. Call had some duration
+            // Do NOT show if user declined before accepting
+            const shouldShowDisposition = prev.wasAccepted || prev.phase === 'connected' || prev.callDuration > 0
+
+            if (shouldShowDisposition) {
+              const dispositionDataObj = {
+                // Use database callActivityId for API calls, fall back to Exotel callId
+                callId: prev.callActivityId || data.callId || prev.callData?.callId || '',
+                exotelCallId: data.callId || prev.callData?.callId || '',
+                callDirection: prev.callDirection || 'outbound',
+                callDuration: prev.callDuration,
+                callerName: prev.callerName,
+                callerNumber: prev.callerNumber,
+              }
+              setDispositionData(dispositionDataObj)
+            }
+
+            return {
+              ...initialCallState,
+              phase: 'ended',
+              callData: data,
+            }
+          })
+          break
+
+        case 'holdtoggle':
+          setCallState((prev) => ({
+            ...prev,
+            isOnHold: !prev.isOnHold,
+            callData: data,
+          }))
+          break
+
+        case 'mutetoggle':
+          setCallState((prev) => ({
+            ...prev,
+            isMuted: !prev.isMuted,
+            callData: data,
+          }))
+          break
+      }
+    }
+
+    const handleRegisterEvent = (state: string) => {
+      setIsConnected(state === 'registered')
+    }
+
+    const handleSessionEvent = (state: string, data: any) => {
+      // Handle session events if needed
+    }
+
+    exotelService.addCallListener(handleCallEvent)
+    exotelService.addRegisterListener(handleRegisterEvent)
+    exotelService.addSessionListener(handleSessionEvent)
+
+    return () => {
+      exotelService.removeCallListener(handleCallEvent)
+      exotelService.removeRegisterListener(handleRegisterEvent)
+      exotelService.removeSessionListener(handleSessionEvent)
+    }
+  }, [isInitialized])
+
+  // Update permission status when it changes in the service
+  useEffect(() => {
+    if (isInitialized) {
+      setPermissionStatus(exotelService.getPermissionStatus())
+    }
+  }, [isInitialized])
+
+  const makeCall = useCallback(
+    async (phoneNumber: string, callerName?: string, callActivityId?: string, maskedNumber?: string) => {
+      // Set initial state - ready to call (agent needs to accept first)
+      // Use masked number for display, actual number for the call
+      setCallState((prev) => ({
+        ...prev,
+        phase: 'ready_to_call',
+        callDirection: 'outbound',
+        callerName: callerName || defaultCallerName || null,
+        callerNumber: maskedNumber || phoneNumber, // Show masked number in UI
+        callActivityId: callActivityId || null, // Store the database ID for disposition
+        isOnHold: false,
+        isMuted: false,
+        callStartTime: null,
+        callDuration: 0,
+      }))
+
+      const response = await exotelService.makeCall(phoneNumber) // Use actual number for calling
+      return response
+    },
+    [defaultCallerName],
+  )
+
+  const acceptCall = useCallback(async () => {
+    await exotelService.acceptCall()
+    // For outbound calls, accepting means we're now calling the lead
+    // Mark wasAccepted = true so we know to show disposition form on end
+    setCallState((prev) => {
+      if (prev.callDirection === 'outbound') {
+        return {
+          ...prev,
+          phase: 'calling',
+          wasAccepted: true,
+        }
+      }
+      // For inbound calls, also mark as accepted
+      return {
+        ...prev,
+        wasAccepted: true,
+      }
+    })
+  }, [])
+
+  const hangupCall = useCallback(() => {
+    exotelService.hangupCall()
+  }, [])
+
+  const toggleSpeaker = useCallback(() => {
+    setCallState((prev) => ({
+      ...prev,
+      isSpeakerOff: !prev.isSpeakerOff,
+    }))
+    // Note: Actual speaker toggle would need WebRTC audio output device switching
+  }, [])
+
+  const clearDisposition = useCallback(() => {
+    setDispositionData(null)
+    setCallState(initialCallState)
+  }, [])
+
+  // Update callActivityId after creating the record (for outbound calls)
+  const setCallActivityIdFn = useCallback((callActivityId: string) => {
+    setCallState((prev) => ({
+      ...prev,
+      callActivityId,
+    }))
+  }, [])
+
+  // Update exotelCallSid from SDK response (for outbound calls)
+  const setExotelCallSidFn = useCallback((callSid: string) => {
+    setCallState((prev) => ({
+      ...prev,
+      exotelCallSid: callSid,
+    }))
+  }, [])
+
+  const value: ExotelContextType = {
+    isInitialized,
+    isConnected,
+    callState,
+    permissionStatus,
+    dispositionData,
+    makeCall,
+    acceptCall,
+    hangupCall,
+    rejectCall: () => exotelService.rejectCall(),
+    toggleHold: () => exotelService.toggleHold(),
+    toggleMute: () => exotelService.toggleMute(),
+    toggleSpeaker,
+    sendDTMF: (digit: string) => exotelService.sendDTMF(digit),
+    registerDevice: () => exotelService.registerDevice(),
+    unregisterDevice: () => exotelService.unregisterDevice(),
+    requestMicrophoneAccess: () => exotelService.requestMicrophoneAccess(),
+    clearDisposition,
+    setCallActivityId: setCallActivityIdFn,
+    setExotelCallSid: setExotelCallSidFn,
+  }
+
+  return (
+    <ExotelContext.Provider value={value}>{children}</ExotelContext.Provider>
+  )
+}
+
+export const useExotel = () => {
+  const context = useContext(ExotelContext)
+  if (context === undefined) {
+    throw new Error('useExotel must be used within an ExotelProvider')
+  }
+  return context
+}
+
+/**
+ * Safe version of useExotel that returns null when outside the provider
+ * Use this in components that may render outside of ExotelProvider
+ */
+export const useExotelSafe = (): ExotelContextType | null => {
+  const context = useContext(ExotelContext)
+  return context ?? null
+}

package/src/providers/VoIPProvider.tsx

@@ -0,0 +1,143 @@
+import React, { ReactNode, useCallback, useEffect, useState } from 'react'
+import { ExotelProvider } from './ExotelProvider'
+import { ExotelPhone, DispositionFormData } from '../components/Exotel'
+import { checkVoIPEnabled, getActiveVoiceToken, saveCallDisposition } from '../services/exotel'
+import { isVoIPEnabledForWorkspace } from '../config/voip.config'
+
+// Re-export for consumers
+export type { DispositionFormData } from '../components/Exotel'
+
+interface VoIPProviderProps {
+  children: ReactNode
+  workspace: string
+  agentUserId?: string // Exotel App User ID from user profile
+  prospectId?: string
+  prospectName?: string
+  prospectNumber?: string
+  onSaveDisposition?: (data: DispositionFormData) => Promise<any>
+}
+
+/**
+ * VoIPProvider - Workspace-level VoIP/Exotel integration
+ *
+ * This provider checks if VoIP is enabled for the current workspace AND tenant
+ * and initializes the Exotel SDK if enabled.
+ *
+ * VoIP is enabled only when ALL conditions are met:
+ * 1. Workspace is in VOIP_ENABLED_WORKSPACES (common-workspace, tele-caller-workspace)
+ * 2. Tenant has enableVoice: true in notification config
+ * 3. Tenant has at least one enabled voice config (voiceConfigs[].isEnabled: true)
+ * 4. Active token is available
+ *
+ * Features:
+ * - Workspace-level VoIP enablement
+ * - Tenant-level VoIP configuration check
+ * - Automatic token fetching from backend
+ * - Microphone permission handling
+ * - Floating phone UI for active calls
+ */
+export const VoIPProvider: React.FC<VoIPProviderProps> = ({
+  children,
+  workspace,
+  agentUserId,
+  prospectId,
+  prospectName,
+  prospectNumber,
+  onSaveDisposition,
+}) => {
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const isWorkspaceVoIPEnabled = isVoIPEnabledForWorkspace(workspace)
+  const hasAgentUserId = !!agentUserId
+
+  // Default disposition handler that calls the API
+  const handleSaveDisposition = useCallback(async (data: DispositionFormData) => {
+    // If custom handler is provided, use it
+    if (onSaveDisposition) {
+      return onSaveDisposition(data)
+    }
+
+    // Default: call the saveCallDisposition API
+    return saveCallDisposition({
+      callId: data.callId,
+      prospectId: data.prospectId,
+      callStatusDisposition: data.callStatusDisposition,
+      dispositionCategory: data.dispositionCategory,
+      dispositionReason: data.dispositionReason || undefined,
+      dispositionNotes: data.remarks || undefined,
+    })
+  }, [onSaveDisposition])
+
+  useEffect(() => {
+    // Skip if workspace doesn't support VoIP or user doesn't have Exotel App User ID
+    if (!isWorkspaceVoIPEnabled || !hasAgentUserId) {
+      setIsLoading(false)
+      return
+    }
+
+    const initializeVoIP = async () => {
+      try {
+        setIsLoading(true)
+        setError(null)
+
+        // Step 1: Check if tenant has VoIP enabled in notification config
+        const voipStatus = await checkVoIPEnabled()
+
+        if (!voipStatus.enabled) {
+          // VoIP not enabled for this tenant
+          setError('Voice calling not enabled for this tenant')
+          setIsLoading(false)
+          return
+        }
+
+        // Step 2: Fetch the active token
+        const tokenData = await getActiveVoiceToken()
+
+        if (tokenData?.token) {
+          setAccessToken(tokenData.token)
+        } else {
+          // No active token available
+          setError('Voice calling token not available')
+        }
+      } catch (err: any) {
+        console.error('Failed to initialize VoIP:', err)
+        setError(err.message || 'Failed to initialize calling')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    initializeVoIP()
+  }, [isWorkspaceVoIPEnabled, hasAgentUserId])
+
+  // If workspace doesn't support VoIP or user doesn't have Exotel ID, just render children
+  if (!isWorkspaceVoIPEnabled || !hasAgentUserId) {
+    return <>{children}</>
+  }
+
+  // If loading or error or no token, render children without VoIP
+  if (isLoading || error || !accessToken) {
+    return <>{children}</>
+  }
+
+  // Render with Exotel provider and floating phone UI
+  return (
+    <ExotelProvider
+      accessToken={accessToken}
+      agentUserId={agentUserId}
+      autoConnectVOIP={true}
+    >
+      {children}
+      <ExotelPhone
+        prospectId={prospectId}
+        prospectName={prospectName}
+        prospectNumber={prospectNumber}
+        onSaveDisposition={handleSaveDisposition}
+      />
+    </ExotelProvider>
+  )
+}
+
+export default VoIPProvider

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './ExotelProvider'
+export * from './VoIPProvider'

package/src/selectors/ResearchStageSelector.tsx

@@ -7,6 +7,7 @@ export const ResearchStageSelector = (props: SingleSelectProps) => {
     <SingleSelect
       dbValueProps={{
         valueKey: 'id',
+        isInt: true,
       }}
       dbLabelProps={{
         labelKey: 'name',