@campxdev/campx-web-utils 2.0.13 → 2.0.14

package/src/components/Exotel/CallButton.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react'
+import { Button } from '@campxdev/react-blueprint'
+import { Phone, MicOff } from 'lucide-react'
+import { useExotelSafe } from '../../providers/ExotelProvider'
+import ExotelService from '../../services/exotel/ExotelService'
+import { initiateCallActivity } from '../../services/exotel/api'
+import CryptoService from '../../services/crypto/CryptoService'
+
+interface CallButtonProps {
+  phoneNumber?: string
+  encryptedPhoneNumber?: string
+  callerName?: string
+  prospectId?: string
+  className?: string
+  disabled?: boolean
+}
+
+const CallButton = ({
+  phoneNumber,
+  encryptedPhoneNumber,
+  callerName,
+  prospectId,
+  className,
+  disabled,
+}: CallButtonProps) => {
+  const exotel = useExotelSafe()
+  const [isDialing, setIsDialing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // If Exotel is not available (not within provider), don't render the button
+  if (!exotel) {
+    return null
+  }
+
+  const {
+    makeCall,
+    isConnected,
+    callState,
+    permissionStatus,
+    requestMicrophoneAccess,
+    setCallActivityId,
+    setExotelCallSid,
+  } = exotel
+
+  const handleCall = async () => {
+    // Allow calling from 'idle' or 'ended' states
+    if (!isConnected || (callState.phase !== 'idle' && callState.phase !== 'ended')) return
+
+    setError(null)
+
+    // Decrypt phone number if encrypted version is provided
+    let actualPhoneNumber = phoneNumber
+    if (encryptedPhoneNumber && !actualPhoneNumber) {
+      try {
+        actualPhoneNumber = CryptoService.decryptData(encryptedPhoneNumber)
+        if (!actualPhoneNumber) {
+          setError('Failed to decrypt phone number')
+          return
+        }
+      } catch (err) {
+        console.error('Decryption error:', err)
+        setError('Failed to decrypt phone number')
+        return
+      }
+    }
+
+    if (!actualPhoneNumber) {
+      setError('No phone number available')
+      return
+    }
+
+    // Create masked number for display in call popup
+    const maskedNumber = CryptoService.maskMobile(actualPhoneNumber)
+
+    // Check microphone permissions first
+    const hasPermission =
+      await ExotelService.getInstance().checkAudioPermissions()
+    if (!hasPermission) {
+      const granted = await requestMicrophoneAccess()
+      if (!granted) {
+        setError('Microphone access is required to make calls')
+        return
+      }
+    }
+
+    try {
+      setIsDialing(true)
+
+      // Step 1: Initiate call via SDK - this triggers Exotel's outbound_call API
+      // SDK returns response containing Data.CallSid
+      const sdkResponse = await makeCall(actualPhoneNumber, callerName, undefined, maskedNumber)
+
+      // Step 2: Extract CallSid from SDK response and store it immediately
+      // This is needed for cancel API if user declines before initiateCallActivity completes
+      const exotelCallSid = sdkResponse?.Data?.CallSid
+      if (exotelCallSid) {
+        setExotelCallSid(exotelCallSid)
+      }
+
+      // Step 3: Create call activity record in backend WITH the CallSid
+      // This allows webhook data to be matched with the call activity
+      if (prospectId && exotelCallSid) {
+        try {
+          const response = await initiateCallActivity({
+            prospectId,
+            toNumber: actualPhoneNumber,
+            callSid: exotelCallSid, // Pass CallSid when creating the record
+          })
+          // Update call state with the database ID for disposition
+          const callActivityId = response.data?.id
+          if (callActivityId) {
+            setCallActivityId(callActivityId)
+          }
+        } catch (apiError) {
+          console.error('[CallButton] Failed to create call activity record:', apiError)
+          // Continue even if record creation fails - call is already initiated
+        }
+      }
+    } catch (err: any) {
+      console.error('Failed to make call:', err)
+      setError(err.message || 'Failed to make call')
+    } finally {
+      setIsDialing(false)
+    }
+  }
+
+  // 'idle' and 'ended' both mean no active call - button should be enabled
+  const isCallInProgress = callState.phase !== 'idle' && callState.phase !== 'ended'
+
+  const hasPhoneNumber = phoneNumber || encryptedPhoneNumber
+  const isDisabled =
+    disabled || !hasPhoneNumber || !isConnected || isCallInProgress || isDialing
+
+  const getButtonTitle = () => {
+    if (!isConnected) return 'VoIP not connected'
+    if (isCallInProgress) return 'Call in progress'
+    if (!hasPhoneNumber) return 'No phone number'
+    if (permissionStatus === 'denied') return 'Microphone access denied'
+    return `Call ${callerName || 'prospect'}`
+  }
+
+  return (
+    <div className={className}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleCall}
+        disabled={isDisabled}
+        title={getButtonTitle()}
+        className="gap-1.5"
+      >
+        {permissionStatus === 'denied' ? (
+          <MicOff className="w-4 h-4" />
+        ) : (
+          <Phone className="w-4 h-4" />
+        )}
+        {isDialing ? 'Calling...' : 'Call'}
+      </Button>
+      {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+    </div>
+  )
+}
+
+export default CallButton

package/src/components/Exotel/CallDispositionForm.tsx

@@ -0,0 +1,213 @@
+import { Button, Dialog, RadioGroup, SingleSelect, Textarea, Typography } from '@campxdev/react-blueprint';
+import { useState } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+
+import type { CallDispositionData } from '../../providers/ExotelProvider';
+import { formatDurationVerbose } from '../../utils/exotel/formatters';
+
+type CallStatusType = 'connected' | 'not_connected';
+
+const CALL_STATUS_OPTIONS = [
+  { label: 'Connected', value: 'connected' },
+  { label: 'Not Connected', value: 'not_connected' },
+];
+
+const CONNECTED_DISPOSITIONS = [
+  { label: 'Interested', value: 'interested' },
+  { label: 'Not Interested', value: 'not_interested' },
+  { label: 'Not Sure', value: 'not_sure' },
+  { label: 'Not Eligible', value: 'not_eligible' },
+  { label: 'Wrong Number', value: 'wrong_number' },
+  { label: 'Campus Visit', value: 'campus_visit' },
+  { label: 'Call Back', value: 'call_back' },
+  { label: 'After JEE Mains', value: 'after_jee_mains' },
+  { label: 'After IPE', value: 'after_ipe' },
+  { label: 'After EAPCET', value: 'after_eapcet' },
+];
+
+const NOT_CONNECTED_DISPOSITIONS = [
+  { label: 'Not Answering', value: 'not_answering' },
+  { label: 'Not Connected', value: 'not_connected' },
+  { label: 'Fail to Call', value: 'fail_to_call' },
+];
+
+export interface DispositionFormData {
+  prospectId?: string;
+  callId: string;
+  channel: string;
+  direction: string;
+  duration: number;
+  callStatusDisposition: CallStatusType;
+  dispositionReason?: string;
+  dispositionCategory: string;
+  remarks: string;
+  callerName: string;
+  callerNumber: string;
+}
+
+export interface ExistingDispositionData {
+  callStatusDisposition?: CallStatusType;
+  dispositionCategory?: string;
+  dispositionNotes?: string;
+}
+
+interface CallDispositionFormProps {
+  dispositionData: CallDispositionData;
+  prospectId?: string;
+  onClose: () => void;
+  onSave: (data: DispositionFormData) => Promise<any>;
+  existingData?: ExistingDispositionData;
+}
+
+const CallDispositionForm = ({
+  dispositionData,
+  prospectId,
+  onClose,
+  onSave,
+  existingData,
+}: CallDispositionFormProps) => {
+  const queryClient = useQueryClient();
+  const isEditMode = !!existingData?.dispositionCategory;
+
+  // Simple state management instead of react-hook-form
+  const [callStatus, setCallStatus] = useState<CallStatusType | ''>(
+    existingData?.callStatusDisposition || '',
+  );
+  const [dispositionCategory, setDispositionCategory] = useState<string>(
+    existingData?.dispositionCategory || '',
+  );
+  const [remarks, setRemarks] = useState<string>(
+    existingData?.dispositionNotes || '',
+  );
+
+  const { mutate, isLoading } = useMutation(
+    (data: DispositionFormData) => onSave(data),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('getOneProspect');
+        queryClient.invalidateQueries('callHistory');
+        onClose();
+      },
+    },
+  );
+
+  const handleCallStatusChange = (value: string) => {
+    setCallStatus(value as CallStatusType);
+    // Reset disposition when call status changes
+    setDispositionCategory('');
+  };
+
+  const handleDispositionChange = (value: string) => {
+    setDispositionCategory(value);
+  };
+
+  const handleSubmit = () => {
+    if (!callStatus || !dispositionCategory) {
+      return;
+    }
+
+    const submitData: DispositionFormData = {
+      prospectId,
+      callId: dispositionData.callId,
+      channel: 'phone',
+      direction: dispositionData.callDirection,
+      duration: dispositionData.callDuration,
+      callStatusDisposition: callStatus,
+      dispositionCategory: dispositionCategory,
+      remarks: remarks || '',
+      callerName: dispositionData.callerName || '',
+      callerNumber: dispositionData.callerNumber || '',
+    };
+
+    mutate(submitData);
+  };
+
+  const dispositionOptions =
+    callStatus === 'connected'
+      ? CONNECTED_DISPOSITIONS
+      : callStatus === 'not_connected'
+        ? NOT_CONNECTED_DISPOSITIONS
+        : [];
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      title={isEditMode ? 'Edit Disposition' : 'Call Disposition'}
+      maxWidth="md"
+      content={() => (
+        <div className="flex flex-col gap-4 p-4">
+          <Typography variant="muted">
+            {isEditMode
+              ? 'Update the disposition details'
+              : `Add details about your call with ${dispositionData.callerName || 'Unknown'}`}
+          </Typography>
+
+          {/* Call Duration */}
+          <div className="flex items-center justify-between p-3 bg-gray-100 rounded-lg">
+            <Typography variant="small" className="text-gray-600">
+              Call Duration
+            </Typography>
+            <Typography variant="small" className="font-semibold">
+              {formatDurationVerbose(dispositionData.callDuration)}
+            </Typography>
+          </div>
+
+          {/* Call Status */}
+          <RadioGroup
+            name="callStatusDisposition"
+            label="Call Status"
+            required
+            options={CALL_STATUS_OPTIONS}
+            direction="row"
+            value={callStatus}
+            onChange={handleCallStatusChange}
+          />
+
+          {/* Call Disposition */}
+          {callStatus && (
+            <SingleSelect
+              key={callStatus}
+              name="dispositionCategory"
+              label="Call Disposition"
+              required
+              fullWidth
+              placeholder="Search disposition..."
+              options={dispositionOptions}
+              value={dispositionCategory}
+              onChange={handleDispositionChange}
+            />
+          )}
+
+          {/* Remarks */}
+          <Textarea
+            name="remarks"
+            label="Remarks"
+            placeholder="Add any additional notes about this call..."
+            rows={3}
+            fullWidth
+            value={remarks}
+            onChange={(e) => setRemarks(e.target.value)}
+            className="break-all"
+          />
+
+          {/* Action Buttons */}
+          <div className="flex justify-start gap-2 pt-4 border-t">
+            <Button
+              onClick={handleSubmit}
+              disabled={!callStatus || !dispositionCategory}
+              loading={isLoading}
+            >
+              {isEditMode ? 'Update Disposition' : 'Save Disposition'}
+            </Button>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+    />
+  );
+};
+
+export default CallDispositionForm;