@tellescope/react-components 1.252.3 → 1.253.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.252.3",
+  "version": "1.253.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.252.3",
-    "@tellescope/sdk": "1.252.3",
-    "@tellescope/types-client": "1.252.3",
-    "@tellescope/types-models": "1.252.3",
-    "@tellescope/types-utilities": "1.252.3",
-    "@tellescope/utilities": "1.252.3",
-    "@tellescope/validation": "1.252.3",
+    "@tellescope/constants": "1.253.0",
+    "@tellescope/sdk": "1.253.0",
+    "@tellescope/types-client": "1.253.0",
+    "@tellescope/types-models": "1.253.0",
+    "@tellescope/types-utilities": "1.253.0",
+    "@tellescope/utilities": "1.253.0",
+    "@tellescope/validation": "1.253.0",
     "@twilio/video-processors": "3.2.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
@@ -85,7 +85,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "004949a08adaebc009d5f3f1d9fe4385d634da85",
+  "gitHead": "b99e2fae181b67bab736660f9e4b8f47acc276da",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1439,18 +1439,9 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
 }) => {
   const session = useResolvedSession()
   const [loading, setLoading] = useState(false)
-  const [polling, setPolling] = useState(false)
   const [error, setError] = useState<string>()
 
   const isEnduserSession = session.type === 'enduser'
-  const pollTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-  // Clean up polling timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (pollTimeoutRef.current) clearTimeout(pollTimeoutRef.current)
-    }
-  }, [])
 
   // Extract payerId from Insurance question response
   const [payerId, memberId, payerName] = useMemo(() => {
@@ -1470,7 +1461,7 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
     setError(undefined)
 
     try {
-      // Step 1: Initiate eligibility check (creates patient → coverage → check)
+      // Single synchronous eligibility check
       const { data } = await session.api.integrations.proxy_read({
         id: enduserId,
         integration: CANDID_TITLE,
@@ -1484,76 +1475,17 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
         }),
       })
 
-      const coverageId = data?.coverageId
-      const checkId = data?.checkId
-      const initialStatus = data?.status
-
-      if (!coverageId || !checkId) {
-        throw new Error('No coverage ID or check ID returned from eligibility check')
-      }
-
-      // If already completed, update answer immediately
-      if (initialStatus === 'COMPLETED' || initialStatus === 'FAILED' || initialStatus === 'UNKNOWN') {
-        onChange({
-          payerId,
-          status: initialStatus,
-          coverageId,
-        }, field.id)
-        setLoading(false)
-        return
-      }
-
-      // Step 2: Poll for results
+      onChange({
+        payerId,
+        status: data?.status,
+        benefits: data?.benefits,
+        planMetadata: data?.planMetadata,
+      }, field.id)
       setLoading(false)
-      setPolling(true)
-
-      const maxAttempts = 60 // 2 minutes at 2s intervals
-      let attempts = 0
-
-      const pollForResult = async (): Promise<void> => {
-        if (attempts >= maxAttempts) {
-          setError('Eligibility check timed out. Please try again.')
-          setPolling(false)
-          return
-        }
-
-        attempts++
-
-        try {
-          const { data: pollData } = await session.api.integrations.proxy_read({
-            id: coverageId,
-            integration: CANDID_TITLE,
-            type: 'candid-eligibility-poll',
-            query: JSON.stringify({ checkId }),
-          })
-
-          const status = pollData?.status
-          // Terminal statuses: COMPLETED, FAILED, or UNKNOWN (Candid returns UNKNOWN when eligibility cannot be determined)
-          if (status === 'COMPLETED' || status === 'FAILED' || status === 'UNKNOWN') {
-            onChange({
-              payerId,
-              status,
-              coverageId,
-              benefits: pollData?.benefits,
-            }, field.id)
-            setPolling(false)
-            return
-          }
-
-          // Still pending, poll again
-          pollTimeoutRef.current = setTimeout(pollForResult, 2000)
-        } catch (err: any) {
-          setError(err?.message || 'Failed to check eligibility status')
-          setPolling(false)
-        }
-      }
-
-      pollForResult()
     } catch (err: any) {
       setError(err?.message || 'Failed to check eligibility')
       console.error('Candid eligibility check failed:', err)
       setLoading(false)
-      setPolling(false)
     }
   }, [session, field, payerId, memberId, payerName, onChange, enduserId])
 
@@ -1608,43 +1540,40 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
       </Grid>
       <Grid item>
         <Typography variant="body1">
-          {polling ? 'Verifying eligibility with insurance...' : 'Checking eligibility...'}
+          Checking eligibility...
         </Typography>
       </Grid>
       <Grid item>
         <Typography variant="body2" color="textSecondary">
-          {polling ? 'This usually takes 15-30 seconds' : 'This may take a few moments'}
+          This may take a few moments
         </Typography>
       </Grid>
     </Grid>
-  ), [polling])
+  ), [])
 
   const resultsComponent = useMemo(() => {
-    const isCompleted = value?.status === 'COMPLETED'
-    const isFailed = value?.status === 'FAILED'
+    const isActive = value?.status === 'ACTIVE'
     return (
       <Grid container spacing={2} direction="column">
         <Grid item>
           <Paper style={{
             padding: 16,
-            backgroundColor: isCompleted ? '#e8f5e9' : '#ffebee',
-            border: `2px solid ${isCompleted ? '#4caf50' : '#f44336'}`
+            backgroundColor: isActive ? '#e8f5e9' : '#fff8e1',
+            border: `2px solid ${isActive ? '#4caf50' : '#ffa000'}`
           }}>
             <Grid container spacing={2} direction="column" alignItems="center">
               <Grid item>
-                {isCompleted ? (
+                {isActive ? (
                   <CheckCircleOutline style={{ fontSize: 48, color: '#4caf50' }} />
                 ) : (
-                  <Typography variant="h2" style={{ color: '#f44336' }}>!</Typography>
+                  <Typography variant="h2" style={{ color: '#ffa000' }}>!</Typography>
                 )}
               </Grid>
               <Grid item>
                 <Typography variant="h6" align="center">
-                  {isCompleted
+                  {isActive
                     ? `${payerName || 'Insurance'} eligibility verified`
-                    : isFailed
-                      ? 'Eligibility check failed'
-                      : 'Eligibility Status: ' + first_letter_capitalized((value?.status || 'Unknown').toLowerCase())
+                    : 'Eligibility Status: ' + first_letter_capitalized((value?.status || 'Unknown').toLowerCase())
                   }
                 </Typography>
               </Grid>
@@ -1655,9 +1584,9 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
     )
   }, [value, payerName])
 
-  // Loading/polling state for enduser sessions
+  // Loading state for enduser sessions
   if (isEnduserSession) {
-    if (loading || polling) { return checkingEligibilityComponent }
+    if (loading) { return checkingEligibilityComponent }
     if (error) {
       return errorComponent
     }
@@ -1687,23 +1616,15 @@ export const CandidEligibilityInput = ({ field, value, onChange, responses, endu
         </Grid>
       )}
 
-      {polling && (
-        <Grid item>
-          <Typography variant="body2" color="primary">
-            {form_display_text_for_language(form, "Polling for results... (this may take 15-30 seconds)")}
-          </Typography>
-        </Grid>
-      )}
-
       <Grid item container spacing={2}>
         <Grid item>
           <LoadingButton
             variant="outlined"
             onClick={checkEligibility}
             submitText={form_display_text_for_language(form, "Check Eligibility")}
-            submittingText={polling ? form_display_text_for_language(form, "Polling...") : form_display_text_for_language(form, "Checking...")}
-            submitting={loading || polling}
-            disabled={loading || polling}
+            submittingText={form_display_text_for_language(form, "Checking...")}
+            submitting={loading}
+            disabled={loading}
           />
         </Grid>
       </Grid>

package/src/TwilioVideo/TwilioControls.tsx

@@ -1,5 +1,16 @@
-import React from 'react'
-import { Box, IconButton, Button, CircularProgress } from '@mui/material'
+import React, { useState } from 'react'
+import {
+  Box,
+  IconButton,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  FormControlLabel,
+  Checkbox,
+} from '@mui/material'
 import {
   Mic as MicIcon,
   MicOff as MicOffIcon,
@@ -43,6 +54,24 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
     room,
   } = useTwilioVideo()
 
+  const [shareDialogOpen, setShareDialogOpen] = useState(false)
+  const [shareAudio, setShareAudio] = useState(true)
+
+  const handleScreenShareClick = () => {
+    if (isScreenSharing) {
+      // Already sharing — stop immediately, no dialog
+      toggleScreenShare()
+    } else {
+      setShareDialogOpen(true)
+    }
+  }
+
+  const handleConfirmShare = () => {
+    // This click is a user gesture, so getDisplayMedia is allowed
+    toggleScreenShare({ shareAudio })
+    setShareDialogOpen(false)
+  }
+
   const handleLeave = () => {
     disconnect()
     onLeave?.()
@@ -58,6 +87,7 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
     && typeof navigator.mediaDevices.getDisplayMedia === 'function'
 
   return (
+    <>
     <Box
       sx={{
         display: 'flex',
@@ -115,7 +145,7 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
 
       {showScreenShareProp && supportsScreenShare && (
         <IconButton
-          onClick={toggleScreenShare}
+          onClick={handleScreenShareClick}
           disabled={!room}
           sx={{
             color: isScreenSharing ? '#4caf50' : 'white',
@@ -162,5 +192,25 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
         </Button>
       )}
     </Box>
+
+    <Dialog open={shareDialogOpen} onClose={() => setShareDialogOpen(false)}>
+      <DialogTitle>Share your screen</DialogTitle>
+      <DialogContent>
+        <FormControlLabel
+          control={(
+            <Checkbox
+              checked={shareAudio}
+              onChange={e => setShareAudio(e.target.checked)}
+            />
+          )}
+          label="Also share audio"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => setShareDialogOpen(false)}>Cancel</Button>
+        <Button variant="contained" onClick={handleConfirmShare}>Share</Button>
+      </DialogActions>
+    </Dialog>
+    </>
   )
 }

package/src/TwilioVideo/TwilioParticipant.tsx

@@ -4,6 +4,7 @@ import {
   LocalParticipant,
   VideoTrack,
   AudioTrack,
+  RemoteAudioTrack,
   RemoteTrackPublication,
   LocalTrackPublication,
 } from 'twilio-video'
@@ -20,6 +21,23 @@ export interface TwilioParticipantProps {
   showScreenShare?: boolean
 }
 
+/** Renders a single remote audio track into its own <audio> element. */
+const RemoteAudioTrackElement: React.FC<{ track: AudioTrack }> = ({ track }) => {
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  useEffect(() => {
+    if (audioRef.current) {
+      const el = audioRef.current
+      track.attach(el)
+      return () => {
+        track.detach(el)
+      }
+    }
+  }, [track])
+
+  return <audio ref={audioRef} autoPlay />
+}
+
 export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
   participant,
   isLocal = false,
@@ -28,10 +46,9 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
   showScreenShare = false,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
-  const audioRef = useRef<HTMLAudioElement>(null)
   const [cameraTrack, setCameraTrack] = useState<VideoTrack | null>(null)
   const [screenTrack, setScreenTrack] = useState<VideoTrack | null>(null)
-  const [audioTrack, setAudioTrack] = useState<AudioTrack | null>(null)
+  const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([])
 
   useEffect(() => {
     const handleTrackSubscribed = (track: VideoTrack | AudioTrack) => {
@@ -42,7 +59,9 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
           setCameraTrack(track as VideoTrack)
         }
       } else if (track.kind === 'audio') {
-        setAudioTrack(track as AudioTrack)
+        // Support multiple simultaneous audio tracks (e.g. microphone + screen-share audio).
+        // Add by identity, deduping so the same track isn't attached twice.
+        setAudioTracks(prev => (prev.includes(track as AudioTrack) ? prev : [...prev, track as AudioTrack]))
       }
     }
 
@@ -54,7 +73,7 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
           setCameraTrack(null)
         }
       } else if (track.kind === 'audio') {
-        setAudioTrack(null)
+        setAudioTracks(prev => prev.filter(t => t !== (track as AudioTrack)))
       }
     }
 
@@ -107,17 +126,6 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
     }
   }, [activeVideoTrack])
 
-  // Attach audio track (not for local participant to avoid echo)
-  useEffect(() => {
-    if (audioTrack && audioRef.current && !isLocal) {
-      const el = audioRef.current
-      audioTrack.attach(el)
-      return () => {
-        audioTrack.detach(el)
-      }
-    }
-  }, [audioTrack, isLocal])
-
   const shouldMirror = isLocal && !showScreenShare
 
   return (
@@ -144,7 +152,10 @@ export const TwilioParticipant: React.FC<TwilioParticipantProps> = ({
           transform: shouldMirror ? 'scaleX(-1)' : 'none',
         }}
       />
-      {!isLocal && <audio ref={audioRef} autoPlay />}
+      {/* Render one audio element per track so simultaneous tracks (mic + screen-share audio) all play */}
+      {!isLocal && audioTracks.map(track => (
+        <RemoteAudioTrackElement key={(track as RemoteAudioTrack).sid} track={track} />
+      ))}
       {(() => {
         const label = resolveIdentity(participant.identity)
         if (!label && !isLocal) return null

package/src/TwilioVideo/TwilioVideoContext.tsx

@@ -11,6 +11,7 @@ import Video, {
 import type { GaussianBlurBackgroundProcessor as GaussianBlurBackgroundProcessorType } from '@twilio/video-processors'
 
 export const SCREEN_SHARE_TRACK_NAME = 'screen-share'
+export const SCREEN_SHARE_AUDIO_TRACK_NAME = 'screen-share-audio'
 
 export const BLUR_BACKGROUND_STORAGE_KEY = 'tellescope.twilio.blurBackground'
 export const BLUR_BACKGROUND_ASSETS_PATH = '/twilio-video-processors'
@@ -64,7 +65,7 @@ export interface TwilioVideoActions {
   disconnect: () => void
   toggleVideo: () => Promise<void>
   toggleAudio: () => void
-  toggleScreenShare: () => Promise<void>
+  toggleScreenShare: (options?: { shareAudio?: boolean }) => Promise<void>
   toggleBlur: () => void
   setIsHost: (isHost: boolean) => void
 }
@@ -103,6 +104,7 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
   const [isBlurLoading, setIsBlurLoading] = useState(false)
 
   const localTracksRef = useRef<(LocalVideoTrack | LocalAudioTrack)[]>([])
+  const screenAudioTrackRef = useRef<LocalAudioTrack | null>(null)
   const blurProcessorRef = useRef<GaussianBlurBackgroundProcessorType | null>(null)
   const blurAttachedTrackRef = useRef<LocalVideoTrack | null>(null)
 
@@ -170,6 +172,7 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
           track.stop()
         })
         localTracksRef.current = []
+        screenAudioTrackRef.current = null
         setRoom(null)
         setLocalVideoTrack(null)
         setLocalAudioTrack(null)
@@ -197,6 +200,7 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
       track.stop()
     })
     localTracksRef.current = []
+    screenAudioTrackRef.current = null
 
     setRoom(null)
     setLocalVideoTrack(null)
@@ -239,16 +243,27 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
       setLocalScreenTrack(null)
       setIsScreenSharing(false)
     }
+
+    // Tear down the accompanying screen-share audio track, if any
+    if (screenAudioTrackRef.current) {
+      const audioTrack = screenAudioTrackRef.current
+      if (room) {
+        room.localParticipant.unpublishTrack(audioTrack)
+      }
+      audioTrack.stop()
+      localTracksRef.current = localTracksRef.current.filter(t => t !== audioTrack)
+      screenAudioTrackRef.current = null
+    }
   }, [localScreenTrack, room])
 
-  const toggleScreenShare = useCallback(async () => {
+  const toggleScreenShare = useCallback(async (options?: { shareAudio?: boolean }) => {
     if (isScreenSharing) {
       stopScreenShare()
       return
     }
 
     try {
-      const stream = await navigator.mediaDevices.getDisplayMedia({ video: true })
+      const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: !!options?.shareAudio })
       const mediaStreamTrack = stream.getVideoTracks()[0]
       const screenTrack = new LocalVideoTrack(mediaStreamTrack, { name: SCREEN_SHARE_TRACK_NAME })
 
@@ -260,6 +275,18 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
       setLocalScreenTrack(screenTrack)
       setIsScreenSharing(true)
 
+      // Capture & publish screen/tab audio if the browser provided an audio track
+      const audioMediaStreamTrack = stream.getAudioTracks()[0]
+      let screenAudioTrack: LocalAudioTrack | null = null
+      if (audioMediaStreamTrack) {
+        screenAudioTrack = new LocalAudioTrack(audioMediaStreamTrack, { name: SCREEN_SHARE_AUDIO_TRACK_NAME })
+        if (room) {
+          await room.localParticipant.publishTrack(screenAudioTrack)
+        }
+        localTracksRef.current.push(screenAudioTrack)
+        screenAudioTrackRef.current = screenAudioTrack
+      }
+
       // Handle browser "Stop sharing" button
       mediaStreamTrack.onended = () => {
         if (room) {
@@ -269,6 +296,15 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
         localTracksRef.current = localTracksRef.current.filter(t => t !== screenTrack)
         setLocalScreenTrack(null)
         setIsScreenSharing(false)
+
+        if (screenAudioTrack) {
+          if (room) {
+            room.localParticipant.unpublishTrack(screenAudioTrack)
+          }
+          screenAudioTrack.stop()
+          localTracksRef.current = localTracksRef.current.filter(t => t !== screenAudioTrack)
+          screenAudioTrackRef.current = null
+        }
       }
     } catch (err) {
       // User cancelled the screen share picker — not an error

package/src/TwilioVideo/index.ts

@@ -2,6 +2,7 @@ export {
   TwilioVideoProvider,
   useTwilioVideo,
   SCREEN_SHARE_TRACK_NAME,
+  SCREEN_SHARE_AUDIO_TRACK_NAME,
   type TwilioVideoState,
   type TwilioVideoActions,
   type TwilioVideoContextType,