@campxdev/campx-web-utils 2.0.13 → 2.0.14

package/src/components/Exotel/ExotelPhone.tsx

@@ -0,0 +1,482 @@
+import { useState, useEffect, useRef } 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'
+
+interface ExotelPhoneProps {
+  className?: string
+  prospectId?: string
+  prospectName?: string
+  prospectNumber?: string
+  onSaveDisposition?: (data: DispositionFormData) => Promise<any>
+}
+
+// CSS for pulsing animation
+const pulseAnimationStyle = `
+@keyframes pulse-ring {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-dot {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 20px rgba(249, 115, 22, 0);
+  }
+}
+
+.animate-pulse-ring {
+  animation: pulse-ring 1.5s ease-in-out infinite;
+}
+
+.animate-pulse-dot {
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+`
+
+const ExotelPhone = ({ className, prospectId, prospectName, prospectNumber, onSaveDisposition }: ExotelPhoneProps) => {
+  const {
+    callState,
+    dispositionData,
+    acceptCall,
+    hangupCall,
+    rejectCall,
+    toggleHold,
+    toggleMute,
+    toggleSpeaker,
+    clearDisposition,
+  } = useExotel()
+
+  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'
+    if (!document.getElementById(styleId)) {
+      const styleEl = document.createElement('style')
+      styleEl.id = styleId
+      styleEl.textContent = pulseAnimationStyle
+      document.head.appendChild(styleEl)
+    }
+  }, [])
+
+  const {
+    phase,
+    callData,
+    isOnHold,
+    isMuted,
+    isSpeakerOff,
+    callDirection,
+    callDuration,
+    callerName: sdkCallerName,
+    callerNumber: sdkCallerNumber,
+    callActivityId,
+    exotelCallSid,
+    prospectUniqueId,
+  } = 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 handleAcceptCall = async () => {
+    setIsAccepting(true)
+    try {
+      await acceptCall()
+    } catch (error: any) {
+      console.error('Accept call error:', error)
+    } finally {
+      setIsAccepting(false)
+    }
+  }
+
+  const handleDeclineCall = async () => {
+    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()
+    } else {
+      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
+    if (callSidForApi) {
+      try {
+        const reason = phase === 'connected' ? 'ended' : 'declined'
+        await cancelCall({ callSid: callSidForApi, reason })
+      } catch (error) {
+        console.error('Failed to cancel call in backend:', error)
+      }
+    }
+
+    // If the call wasn't connected yet, SDK might not fire 'callEnded' event
+    // 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)
+  }
+
+  // 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
+      }
+      setIsDeclining(false)
+      // Note: Don't auto-clear disposition here - let user submit or close the form manually
+    }
+  }, [phase])
+
+  // Handle saving disposition to backend
+  const handleSaveDisposition = async (data: DispositionFormData) => {
+    // If custom handler is provided, use it
+    if (onSaveDisposition) {
+      return onSaveDisposition(data)
+    }
+
+    // Use the callStatusDisposition from the form (user selected)
+    return saveCallDisposition({
+      callId: data.callId,
+      prospectId: data.prospectId || prospectId || '',
+      callStatusDisposition: data.callStatusDisposition,
+      dispositionCategory: data.dispositionCategory,
+      dispositionNotes: data.remarks || undefined,
+    })
+  }
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (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'
+
+    // Override disposition data with prospect details
+    const enrichedDispositionData = {
+      ...dispositionData,
+      callerName: finalCallerName,
+      callerNumber: displayNumber,
+    }
+
+    return (
+      <CallDispositionForm
+        dispositionData={enrichedDispositionData}
+        prospectId={prospectId}
+        onClose={clearDisposition}
+        onSave={handleSaveDisposition}
+      />
+    )
+  }
+
+  // Don't show anything if idle or ended
+  if (phase === 'idle' || phase === 'ended') {
+    return null
+  }
+
+  const isOutbound = callDirection === 'outbound'
+  const isInbound = callDirection === 'inbound'
+
+  // Get avatar color based on call direction
+  const avatarBgColor =
+    phase === 'connected'
+      ? 'bg-green-500'
+      : isOutbound
+        ? 'bg-blue-500'
+        : 'bg-orange-500'
+
+  // Get status text
+  const getStatusText = () => {
+    switch (phase) {
+      case 'ready_to_call':
+        return 'Ready to call...'
+      case 'calling':
+        return 'Calling...'
+      case 'incoming':
+        return 'Incoming call...'
+      case 'connected':
+        return null // Will show timer instead
+      default:
+        return null
+    }
+  }
+
+  // Get connecting text for calling state
+  const getConnectingText = () => {
+    if (phase === 'calling') {
+      return `Connecting to ${displayName}...`
+    }
+    return null
+  }
+
+  const modalContent = (
+    <>
+      {/* Backdrop - rendered first, appears behind */}
+      <div
+        className="fixed inset-0 bg-black/50"
+        style={{ zIndex: EXOTEL_CONSTANTS.MODAL_BACKDROP_Z_INDEX }}
+        onClick={handleDeclineCall}
+      />
+
+      {/* Modal - rendered second, appears on top */}
+      <div
+        className={`fixed inset-0 flex items-center justify-center p-4 ${className}`}
+        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' }}
+          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"
+          >
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+
+          {/* Call type badge */}
+          <div className="flex justify-center mb-6">
+            <span
+              className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium border ${
+                isOutbound
+                  ? 'text-blue-600 border-blue-200 bg-blue-50'
+                  : 'text-green-600 border-green-200 bg-green-50'
+              }`}
+            >
+              {isOutbound ? (
+                <PhoneOutgoing className="w-4 h-4" />
+              ) : (
+                <PhoneIncoming className="w-4 h-4" />
+              )}
+              {isOutbound ? 'Outgoing Call' : 'Incoming Call'}
+            </span>
+          </div>
+
+          {/* Avatar */}
+          <div className="flex justify-center mb-4">
+            <div
+              className={`w-24 h-24 rounded-full ${avatarBgColor} flex items-center justify-center ${
+                phase === 'incoming' || phase === 'ready_to_call'
+                  ? 'animate-pulse-ring animate-pulse-dot'
+                  : ''
+              }`}
+            >
+              {isInbound && phase === 'incoming' ? (
+                <PhoneIncoming className="w-10 h-10 text-white" />
+              ) : (
+                <Phone className="w-10 h-10 text-white" />
+              )}
+            </div>
+          </div>
+
+          {/* Caller info */}
+          <div className="text-center mb-4">
+            <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="muted">{displayNumber}</Typography>
+          </div>
+
+          {/* Status / Timer */}
+          <div className="text-center mb-6">
+            {phase === 'connected' ? (
+              <Typography variant="p" className="text-green-500 text-lg font-medium">
+                {formatDurationTimer(callDuration)}
+              </Typography>
+            ) : (
+              <Typography variant="muted">{getStatusText()}</Typography>
+            )}
+          </div>
+
+          {/* Call controls - shown when connected */}
+          {phase === 'connected' && (
+            <div className="flex justify-center gap-6 mb-6">
+              {/* Mute */}
+              <div className="text-center">
+                <button
+                  onClick={toggleMute}
+                  className={`w-12 h-12 rounded-full border-2 flex items-center justify-center transition-colors ${
+                    isMuted
+                      ? 'bg-gray-200 border-gray-300'
+                      : 'bg-white border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  {isMuted ? (
+                    <MicOff className="w-5 h-5 text-gray-600" />
+                  ) : (
+                    <Mic className="w-5 h-5 text-gray-600" />
+                  )}
+                </button>
+                <p className="text-xs text-gray-500 mt-1">
+                  {isMuted ? 'Unmute' : 'Mute'}
+                </p>
+              </div>
+
+              {/* Hold */}
+              <div className="text-center">
+                <button
+                  onClick={toggleHold}
+                  className={`w-12 h-12 rounded-full border-2 flex items-center justify-center transition-colors ${
+                    isOnHold
+                      ? 'bg-gray-200 border-gray-300'
+                      : 'bg-white border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  {isOnHold ? (
+                    <Play className="w-5 h-5 text-gray-600" />
+                  ) : (
+                    <Pause className="w-5 h-5 text-gray-600" />
+                  )}
+                </button>
+                <p className="text-xs text-gray-500 mt-1">
+                  {isOnHold ? 'Resume' : 'Hold'}
+                </p>
+              </div>
+
+              {/* Speaker */}
+              <div className="text-center">
+                <button
+                  onClick={toggleSpeaker}
+                  className={`w-12 h-12 rounded-full border-2 flex items-center justify-center transition-colors ${
+                    isSpeakerOff
+                      ? 'bg-gray-200 border-gray-300'
+                      : 'bg-white border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  {isSpeakerOff ? (
+                    <VolumeX className="w-5 h-5 text-gray-600" />
+                  ) : (
+                    <Volume2 className="w-5 h-5 text-gray-600" />
+                  )}
+                </button>
+                <p className="text-xs text-gray-500 mt-1">
+                  {isSpeakerOff ? 'Speaker On' : 'Speaker Off'}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex justify-center gap-4">
+            {/* Ready to call / Incoming - show Accept & Decline */}
+            {(phase === 'ready_to_call' || phase === 'incoming') && (
+              <>
+                <Button
+                  variant="destructive"
+                  onClick={handleDeclineCall}
+                  disabled={isDeclining}
+                  className="gap-2 px-6"
+                >
+                  <PhoneOff className="w-4 h-4" />
+                  {isDeclining ? 'Declining...' : 'Decline'}
+                </Button>
+                <Button
+                  variant="default"
+                  onClick={handleAcceptCall}
+                  disabled={isAccepting || isDeclining}
+                  style={{ backgroundColor: '#22c55e' }}
+                  className="gap-2 px-6 hover:bg-green-600"
+                >
+                  <Phone className="w-4 h-4" />
+                  Accept
+                </Button>
+              </>
+            )}
+
+            {/* Calling - show End Call only */}
+            {phase === 'calling' && (
+              <Button
+                variant="destructive"
+                onClick={handleDeclineCall}
+                disabled={isDeclining}
+                className="gap-2 px-6"
+              >
+                <PhoneOff className="w-4 h-4" />
+                {isDeclining ? 'Ending...' : 'End Call'}
+              </Button>
+            )}
+
+            {/* Connected - show End Call */}
+            {phase === 'connected' && (
+              <Button
+                variant="destructive"
+                onClick={handleDeclineCall}
+                disabled={isDeclining}
+                className="gap-2 px-8"
+              >
+                <PhoneOff className="w-4 h-4" />
+                {isDeclining ? 'Ending...' : 'End Call'}
+              </Button>
+            )}
+          </div>
+
+          {/* Connecting text */}
+          {getConnectingText() && (
+            <Typography variant="small" className="text-center text-gray-500 mt-4">
+              {getConnectingText()}
+            </Typography>
+          )}
+        </div>
+      </div>
+    </>
+  )
+
+  // Use portal to render at document body level to escape any parent stacking contexts
+  return createPortal(modalContent, document.body)
+}
+
+export default ExotelPhone

package/src/components/Exotel/ExotelWrapper.tsx

@@ -0,0 +1,80 @@
+import { ReactNode, useEffect, useState } from 'react'
+
+import { ExotelProvider } from '../../providers/ExotelProvider'
+import { getActiveVoiceToken } from '../../services/exotel/api'
+import ExotelPhone from './ExotelPhone'
+
+interface ExotelWrapperProps {
+  children: ReactNode
+  enabled?: boolean
+  prospectId?: string
+  prospectName?: string
+  prospectNumber?: string
+}
+
+/**
+ * Wrapper component that initializes Exotel VoIP functionality
+ * Fetches the access token from backend and provides the Exotel context to children
+ */
+const ExotelWrapper = ({
+  children,
+  enabled = true,
+  prospectId,
+  prospectName,
+  prospectNumber,
+}: ExotelWrapperProps) => {
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false)
+      return
+    }
+
+    const fetchToken = async () => {
+      try {
+        setIsLoading(true)
+        // Fetch token from backend - credentials are managed securely on server
+        const tokenData = await getActiveVoiceToken()
+        if (tokenData?.token) {
+          setAccessToken(tokenData.token)
+        } else {
+          // No active voice config - Exotel not configured for this tenant
+          setError('Voice calling not configured')
+        }
+      } catch (err: any) {
+        console.error('Failed to fetch Exotel token:', err)
+        setError(err.message || 'Failed to initialize calling')
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchToken()
+  }, [enabled])
+
+  // If Exotel is not enabled or failed to load, just render children
+  if (!enabled || error || !accessToken) {
+    return <>{children}</>
+  }
+
+  // Render with Exotel provider and floating phone UI
+  return (
+    <ExotelProvider
+      accessToken={accessToken}
+      agentUserId="0047"
+      autoConnectVOIP={true}
+    >
+      {children}
+      <ExotelPhone
+        prospectId={prospectId}
+        prospectName={prospectName}
+        prospectNumber={prospectNumber}
+      />
+    </ExotelProvider>
+  )
+}
+
+export default ExotelWrapper

package/src/components/Exotel/MicrophonePermission.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { Button } from '@campxdev/react-blueprint'
+import { Mic, MicOff, AlertCircle } from 'lucide-react'
+import { useExotel } from '../../providers/ExotelProvider'
+
+interface MicrophonePermissionProps {
+  onPermissionGranted?: () => void
+  onPermissionDenied?: () => void
+}
+
+const MicrophonePermission = ({
+  onPermissionGranted,
+  onPermissionDenied,
+}: MicrophonePermissionProps) => {
+  const { permissionStatus, requestMicrophoneAccess } = useExotel()
+  const [isRequesting, setIsRequesting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleRequestPermission = async () => {
+    setIsRequesting(true)
+    setError(null)
+
+    try {
+      const granted = await requestMicrophoneAccess()
+      if (granted) {
+        onPermissionGranted?.()
+      } else {
+        setError('Microphone access was denied')
+        onPermissionDenied?.()
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to request microphone access')
+      onPermissionDenied?.()
+    } finally {
+      setIsRequesting(false)
+    }
+  }
+
+  if (permissionStatus === 'granted') {
+    return (
+      <div className="flex items-center gap-2 text-green-600">
+        <Mic className="w-4 h-4" />
+        <span className="text-sm">Microphone access granted</span>
+      </div>
+    )
+  }
+
+  if (permissionStatus === 'denied') {
+    return (
+      <div className="p-4 bg-red-50 rounded-lg border border-red-200">
+        <div className="flex items-center gap-2 text-red-600 mb-2">
+          <MicOff className="w-5 h-5" />
+          <span className="font-medium">Microphone Access Denied</span>
+        </div>
+        <p className="text-sm text-red-600 mb-3">
+          To use the calling feature, you need to enable microphone access in
+          your browser settings.
+        </p>
+        <div className="text-xs text-gray-600">
+          <p className="font-medium mb-1">How to enable:</p>
+          <ol className="list-decimal list-inside space-y-1">
+            <li>Click the lock/info icon in your browser's address bar</li>
+            <li>Find "Microphone" in the permissions list</li>
+            <li>Change the setting to "Allow"</li>
+            <li>Refresh the page</li>
+          </ol>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
+      <div className="flex items-center gap-2 text-blue-600 mb-2">
+        <AlertCircle className="w-5 h-5" />
+        <span className="font-medium">Microphone Permission Required</span>
+      </div>
+      <p className="text-sm text-gray-600 mb-3">
+        To make and receive calls, we need access to your microphone. Click the
+        button below to grant permission.
+      </p>
+      <Button
+        variant="default"
+        size="sm"
+        onClick={handleRequestPermission}
+        loading={isRequesting}
+        className="gap-1.5"
+      >
+        <Mic className="w-4 h-4" />
+        Allow Microphone Access
+      </Button>
+      {error && <p className="text-red-500 text-xs mt-2">{error}</p>}
+    </div>
+  )
+}
+
+export default MicrophonePermission

package/src/components/Exotel/index.ts

@@ -0,0 +1,10 @@
+export { default as ExotelPhone } from './ExotelPhone'
+export { default as CallButton } from './CallButton'
+export { default as CallDispositionForm } from './CallDispositionForm'
+export { default as MicrophonePermission } from './MicrophonePermission'
+export { default as ExotelWrapper } from './ExotelWrapper'
+
+export type {
+  DispositionFormData,
+  ExistingDispositionData,
+} from './CallDispositionForm'

package/src/config/index.ts

@@ -1,3 +1,4 @@
 export * from './axios';
 export * from './createRsbuildSharedConfig';
 export * from './nonWorkspaceAxios';
+export * from './voip.config';

package/src/config/voip.config.ts

@@ -0,0 +1,26 @@
+
+/**
+ * VoIP Configuration Module
+ *
+ * This module manages VoIP/Exotel configuration for workspaces.
+ * Only workspaces listed in VOIP_ENABLED_WORKSPACES will have VoIP functionality.
+ */
+
+/**
+ * List of workspaces that have VoIP/Exotel calling enabled.
+ * Add workspace names here to enable VoIP for that workspace.
+ */
+export const VOIP_ENABLED_WORKSPACES: string[] = [
+  'admissions-officer-workspace',
+  'tele-counsellor-workspace',
+]
+
+/**
+ * Check if VoIP is enabled for a given workspace
+ *
+ * @param workspaceName - The name of the workspace to check
+ * @returns boolean indicating if VoIP is enabled for the workspace
+ */
+export function isVoIPEnabledForWorkspace(workspaceName: string): boolean {
+  return VOIP_ENABLED_WORKSPACES.includes(workspaceName)
+}