@tellescope/react-components 1.243.1 → 1.244.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.243.1",
+  "version": "1.244.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.243.1",
-    "@tellescope/sdk": "1.243.1",
-    "@tellescope/types-client": "1.243.1",
-    "@tellescope/types-models": "1.243.1",
-    "@tellescope/types-utilities": "1.243.1",
-    "@tellescope/utilities": "1.243.1",
-    "@tellescope/validation": "1.243.1",
+    "@tellescope/constants": "1.244.0",
+    "@tellescope/sdk": "1.244.0",
+    "@tellescope/types-client": "1.244.0",
+    "@tellescope/types-models": "1.244.0",
+    "@tellescope/types-utilities": "1.244.0",
+    "@tellescope/utilities": "1.244.0",
+    "@tellescope/validation": "1.244.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -84,7 +84,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": "79743fc317437cf64b992dce8f1a0a4e4a23032c",
+  "gitHead": "c524b1c2642980346683d5af72c92f6ebfa17f5f",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, CandidEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -17,6 +17,7 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   hideBg?: boolean,
   backgroundColor?: string,
   hideLogo?: boolean,
+  showLogo?: boolean,
   logoURL?: string,
   logoHeight?: number,
   language?: string,
@@ -186,6 +187,7 @@ export const QuestionForField = ({
   const RelatedContacts = customInputs?.['Related Contacts'] ?? RelatedContactsInput
   const Insurance = customInputs?.['Insurance'] ?? InsuranceInput
   const BridgeEligibility = customInputs?.['Bridge Eligibility'] ?? BridgeEligibilityInput
+  const CandidEligibility = customInputs?.['Candid Eligibility'] ?? CandidEligibilityInput
   const AppointmentBooking = customInputs?.['Appointment Booking'] ?? AppointmentBookingInput
   const Height = customInputs?.['Height'] ?? HeightInput
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
@@ -225,7 +227,7 @@ export const QuestionForField = ({
           fontSize: field.titleFontSize || (field.type === 'Question Group' ? 22 : 20), 
           fontWeight: field.type === 'Question Group' ? 'bold' : undefined,
         }}>
-          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility') ? '*' : ''}
+          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility' || field.type === 'Candid Eligibility') ? '*' : ''}
         </Typography>
       }
       {!field.title && (field.type === 'Question Group' || field.type === 'signature') && !form?.customization?.hideLogo &&
@@ -382,6 +384,12 @@ export const QuestionForField = ({
             onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
           />
         )
+        : field.type === 'Candid Eligibility' ? (
+          <CandidEligibility field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses} enduserId={enduserId}
+            onChange={onFieldChange as ChangeHandler<'Candid Eligibility'>}
+          />
+        )
         : field.type === 'Pharmacy Search' ? (
           <PharmacySearch field={field} value={value.answer.value as any} form={form}
             enduser={enduser} responses={responses}

package/src/Forms/forms.v2.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, WithTheme, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, CandidEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -17,6 +17,7 @@ export const TellescopeFormContainerV2 = ({ businessId, organizationIds, ...prop
   hideBg?: boolean,
   backgroundColor?: string,
   hideLogo?: boolean,
+  showLogo?: boolean,
   logoURL?: string,
   logoHeight?: number,
   language?: string,
@@ -36,7 +37,7 @@ export const TellescopeFormContainerV2 = ({ businessId, organizationIds, ...prop
   )
 }
 
-const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight, maxWidth }) => {
+const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, showLogo, logoURL, logoHeight, maxWidth }) => {
   const theme = useOrganizationTheme()
 
   // V2: No paper background by default, cleaner layout with light blue background
@@ -44,10 +45,13 @@ const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({
   const shouldUseCustomBg = backgroundColor && backgroundColor !== theme.themeColor && backgroundColor !== '#ffffff'
   const finalBgColor = shouldUseCustomBg ? backgroundColor : '#F4F3FA'
 
+  const resolvedLogoURL = logoURL || theme?.logoURL
+
   return (
     <Flex flex={1} column alignItems="center" style={{
       backgroundColor: finalBgColor,
       overflow: 'auto',
+      boxSizing: 'border-box',
       paddingTop: window.innerWidth < 600 ? 20 : 40,
       paddingBottom: window.innerWidth < 600 ? 20 : 40,
       ...style
@@ -68,6 +72,21 @@ const TellescopeFormContainerWithThemeV2: typeof TellescopeFormContainerV2 = ({
             <LanguageSelect value={language} onChange={onChangeLanguage} />
           </Flex>
         }
+        {showLogo && !hideLogo && (
+          resolvedLogoURL
+            ? (
+              <Flex alignItems="flex-start" style={{ marginBottom: '20px', marginTop: '10px' }}>
+                <img src={resolvedLogoURL} alt={theme?.name} style={{ height: logoHeight || LOGO_HEIGHT, maxWidth: 225 }} />
+              </Flex>
+            )
+            : theme?.name
+              ? (
+                <Typography style={{ fontSize: 22, marginBottom: '20px', marginTop: '10px', textAlign: 'left', fontWeight: 600 }}>
+                  {theme.name}
+                </Typography>
+              )
+              : null
+        )}
         {children}
       </Flex>
     </Flex>
@@ -177,6 +196,7 @@ export const QuestionForField = ({
   const RelatedContacts = customInputs?.['Related Contacts'] ?? RelatedContactsInput
   const Insurance = customInputs?.['Insurance'] ?? InsuranceInput
   const BridgeEligibility = customInputs?.['Bridge Eligibility'] ?? BridgeEligibilityInput
+  const CandidEligibility = customInputs?.['Candid Eligibility'] ?? CandidEligibilityInput
   const AppointmentBooking = customInputs?.['Appointment Booking'] ?? AppointmentBookingInput
   const Height = customInputs?.['Height'] ?? HeightInput
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
@@ -217,7 +237,7 @@ export const QuestionForField = ({
           fontSize: field.titleFontSize || (field.type === 'Question Group' ? 22 : 20),
           fontWeight: field.type === 'Question Group' ? 'bold' : undefined,
         }}>
-          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility') ? '*' : ''}
+          {field.title}{!(field.isOptional || field.type === 'description' || field.type === 'Question Group' || field.type === 'Insurance' || field.type === 'Bridge Eligibility' || field.type === 'Candid Eligibility') ? '*' : ''}
         </Typography>
       }
       {!field.title && (field.type === 'Question Group' || field.type === 'signature') && !form?.customization?.hideLogo &&
@@ -374,6 +394,12 @@ export const QuestionForField = ({
             onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
           />
         )
+        : field.type === 'Candid Eligibility' ? (
+          <CandidEligibility field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses} enduserId={enduserId}
+            onChange={onFieldChange as ChangeHandler<'Candid Eligibility'>}
+          />
+        )
         : field.type === 'Pharmacy Search' ? (
           <PharmacySearch field={field} value={value.answer.value as any} form={form}
             enduser={enduser} responses={responses}

package/src/Forms/hooks.tsx

@@ -9,7 +9,13 @@ import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, replace_form_field_template_values, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+import { MM_DD_YYYY_to_YYYY_MM_DD, append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, mm_dd_yyyy, object_is_empty, read_local_storage, replace_form_field_template_values, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+
+export const dateFromOffsetMs = (offsetMs: number): Date => {
+  const d = new Date()
+  d.setHours(0, 0, 0, 0)
+  return new Date(d.getTime() + offsetMs)
+}
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -1065,6 +1071,45 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       }
     }
 
+    if (value.answer.type === 'dateString' && value.answer.value) {
+      const dateStr = value.answer.value
+      if (field.options?.minDateOffsetMs !== undefined) {
+        const minDate = dateFromOffsetMs(field.options.minDateOffsetMs)
+        const parsed = new Date(MM_DD_YYYY_to_YYYY_MM_DD(dateStr))
+        parsed.setMinutes(parsed.getMinutes() + parsed.getTimezoneOffset())
+        parsed.setHours(0, 0, 0, 0)
+        if (parsed < minDate) {
+          return `Date must not be earlier than ${mm_dd_yyyy(minDate)}`
+        }
+      }
+      if (field.options?.maxDateOffsetMs !== undefined) {
+        const maxDate = dateFromOffsetMs(field.options.maxDateOffsetMs)
+        const parsed = new Date(MM_DD_YYYY_to_YYYY_MM_DD(dateStr))
+        parsed.setMinutes(parsed.getMinutes() + parsed.getTimezoneOffset())
+        parsed.setHours(0, 0, 0, 0)
+        if (parsed > maxDate) {
+          return `Date must not be later than ${mm_dd_yyyy(maxDate)}`
+        }
+      }
+    }
+
+    if (value.answer.type === 'date' && value.answer.value) {
+      const dateVal = new Date(value.answer.value)
+      if (field.options?.minDateOffsetMs !== undefined) {
+        const minDate = dateFromOffsetMs(field.options.minDateOffsetMs)
+        if (dateVal < minDate) {
+          return `Date must not be earlier than ${mm_dd_yyyy(minDate)}`
+        }
+      }
+      if (field.options?.maxDateOffsetMs !== undefined) {
+        const maxDate = dateFromOffsetMs(field.options.maxDateOffsetMs)
+        maxDate.setHours(23, 59, 59, 999)
+        if (dateVal > maxDate) {
+          return `Date must not be later than ${mm_dd_yyyy(maxDate)}`
+        }
+      }
+    }
+
     if (field.isOptional || (sessionType === 'user' && field.type === 'Appointment Booking' && !enduserId)) {
       return null 
     }

package/src/Forms/inputs.tsx

@@ -3,7 +3,7 @@ import axios from "axios"
 import { Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormLabel, Grid, IconButton as MuiIconButton, InputLabel, MenuItem, Paper, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
-import { CANVAS_TITLE, BRIDGE_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
+import { CANVAS_TITLE, BRIDGE_TITLE, CANDID_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
 import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, object_is_empty, replace_enduser_template_values, responses_satisfy_conditions, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, Pharmacy, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
@@ -25,7 +25,7 @@ import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, Emb
 import { loadStripe } from '@stripe/stripe-js'; 
 import { CheckCircleOutline, Delete, Edit, ExpandMore } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
-import { useConditionalChoices, Response } from "./hooks"
+import { dateFromOffsetMs, useConditionalChoices, Response } from "./hooks"
 
 // Bridge Eligibility - shared variable for storing most recent eligibility userIds
 const bridgeEligibilityResult = {
@@ -265,14 +265,17 @@ const CustomDateInput = forwardRef((props: TextFieldProps, ref) => (
     fullWidth inputRef={ref} {...props} 
   />
 ))
-export const DateInput = ({ 
-  field, value, onChange, placement='top', ...props 
+export const DateInput = ({
+  field, value, onChange, placement='top', ...props
 } : {
   field: FormField,
   placement?: 'top' | 'right' | 'bottom' | 'left'
 } & FormInputProps<'date'> & Styled) => {
   const inputRef = useRef(null);
 
+  const minDate = field.options?.minDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.minDateOffsetMs) : undefined
+  const maxDate = field.options?.maxDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.maxDateOffsetMs) : undefined
+
   return (
     <DatePicker // wrap in item to prevent movement on focused
       selected={value}
@@ -286,6 +289,8 @@ export const DateInput = ({
       customInput={<CustomDateInput inputRef={inputRef} {...props} />}
       // className={css`width: 100%;`}
       className={css`${datepickerCSS}`}
+      minDate={minDate}
+      maxDate={maxDate}
     />
   )
 }
@@ -436,6 +441,9 @@ const CustomDateStringInput = forwardRef((props: TextFieldProps & { inputProps?:
 export const DateStringInput = ({ field, value, onChange, form, ...props }: FormInputProps<'string'>) => {
   const inputRef = useRef(null);
 
+  const minDate = field.options?.minDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.minDateOffsetMs) : undefined
+  const maxDate = field.options?.maxDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.maxDateOffsetMs) : undefined
+
   // if (value && isDateString(value)) {
   //   console.log(value, new Date(
   //     new Date(MM_DD_YYYY_to_YYYY_MM_DD(value)).getTime()
@@ -459,11 +467,13 @@ export const DateStringInput = ({ field, value, onChange, form, ...props }: Form
           required={!field.isOptional}
           autoComplete="off"
           dateFormat={"MM-dd-yyyy"}
-          customInput={<CustomDateStringInput inputRef={inputRef} {...props} 
-            label={(!field.title && field.placeholder) ? field.placeholder : props.label} 
+          customInput={<CustomDateStringInput inputRef={inputRef} {...props}
+            label={(!field.title && field.placeholder) ? field.placeholder : props.label}
           />}
           // className={css`width: 100%;`}
           className={css`${datepickerCSS}`}
+          minDate={minDate}
+          maxDate={maxDate}
         />
       )
       : (
@@ -1418,6 +1428,294 @@ export const BridgeEligibilityInput = ({ field, value, onChange, responses, endu
   )
 }
 
+export const CandidEligibilityInput = ({ field, value, onChange, responses, enduser, inputProps, enduserId, form, ...props }: FormInputProps<'Candid Eligibility'> & {
+  inputProps?: { sx: SxProps },
+}) => {
+  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(() => {
+    const insuranceResponse = responses?.find(r => r.answer?.type === 'Insurance' && r.answer?.value?.payerId)
+    if (insuranceResponse?.answer?.type === 'Insurance') {
+      return [
+        insuranceResponse.answer.value?.payerId,
+        insuranceResponse.answer.value?.memberId,
+        insuranceResponse.answer.value?.payerName,
+      ]
+    }
+    return []
+  }, [responses])
+
+  const checkEligibility = useCallback(async () => {
+    setLoading(true)
+    setError(undefined)
+
+    try {
+      // Step 1: Initiate eligibility check (creates patient → coverage → check)
+      const { data } = await session.api.integrations.proxy_read({
+        id: enduserId,
+        integration: CANDID_TITLE,
+        type: 'candid-eligibility',
+        query: JSON.stringify({
+          serviceCode: field.options?.candidServiceCode,
+          npi: field.options?.candidNPI,
+          payerId,
+          memberId,
+          payerName,
+        }),
+      })
+
+      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
+      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])
+
+  // Auto-check eligibility for enduser sessions
+  const autoCheckRef = useRef(false)
+  useEffect(() => {
+    if (!isEnduserSession) return
+
+    // If we already have a result and the payer hasn't changed, use the cached result
+    if (value?.status && value?.payerId === payerId) {
+      return
+    }
+
+    if (autoCheckRef.current) return
+    autoCheckRef.current = true
+
+    checkEligibility()
+  }, [isEnduserSession, checkEligibility, value, payerId])
+
+  const errorComponent = useMemo(() => (
+    <Grid container spacing={2} direction="column" alignItems="center" style={{ padding: '20px 0' }}>
+      <Grid item>
+        <Paper style={{
+          padding: 16,
+          backgroundColor: '#ffebee',
+          border: '2px solid #f44336'
+        }}>
+          <Grid container spacing={2} direction="column" alignItems="center">
+            <Grid item>
+              <Typography variant="h2" style={{ color: '#f44336' }}>!</Typography>
+            </Grid>
+            <Grid item>
+              <Typography variant="h6" align="center" color="error">
+                Unable to Check Eligibility
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography variant="body2" align="center" style={{ color: '#d32f2f' }}>
+                {error}
+              </Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  ), [error])
+
+  const checkingEligibilityComponent = useMemo(() => (
+    <Grid container spacing={2} direction="column" alignItems="center" style={{ padding: '20px 0' }}>
+      <Grid item>
+        <CircularProgress size={40} />
+      </Grid>
+      <Grid item>
+        <Typography variant="body1">
+          {polling ? 'Verifying eligibility with insurance...' : 'Checking eligibility...'}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body2" color="textSecondary">
+          {polling ? 'This usually takes 15-30 seconds' : 'This may take a few moments'}
+        </Typography>
+      </Grid>
+    </Grid>
+  ), [polling])
+
+  const resultsComponent = useMemo(() => {
+    const isCompleted = value?.status === 'COMPLETED'
+    const isFailed = value?.status === 'FAILED'
+    return (
+      <Grid container spacing={2} direction="column">
+        <Grid item>
+          <Paper style={{
+            padding: 16,
+            backgroundColor: isCompleted ? '#e8f5e9' : '#ffebee',
+            border: `2px solid ${isCompleted ? '#4caf50' : '#f44336'}`
+          }}>
+            <Grid container spacing={2} direction="column" alignItems="center">
+              <Grid item>
+                {isCompleted ? (
+                  <CheckCircleOutline style={{ fontSize: 48, color: '#4caf50' }} />
+                ) : (
+                  <Typography variant="h2" style={{ color: '#f44336' }}>!</Typography>
+                )}
+              </Grid>
+              <Grid item>
+                <Typography variant="h6" align="center">
+                  {isCompleted
+                    ? `${payerName || 'Insurance'} eligibility verified`
+                    : isFailed
+                      ? 'Eligibility check failed'
+                      : 'Eligibility Status: ' + first_letter_capitalized((value?.status || 'Unknown').toLowerCase())
+                  }
+                </Typography>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    )
+  }, [value, payerName])
+
+  // Loading/polling state for enduser sessions
+  if (isEnduserSession) {
+    if (loading || polling) { return checkingEligibilityComponent }
+    if (error) {
+      return errorComponent
+    }
+    if (value?.status) {
+      return resultsComponent
+    }
+    return errorComponent
+  }
+
+  // User/admin interface (non-enduser sessions)
+  return (
+    <Grid container spacing={2} direction="column">
+      <Grid item>
+        <Typography variant="body2" color="textSecondary">
+          Service Code: {field.options?.candidServiceCode || 'Not configured'}
+        </Typography>
+        <Typography variant="body2" color="textSecondary">
+          Provider NPI: {field.options?.candidNPI || 'Not configured'}
+        </Typography>
+        {payerId && <Typography variant="body2" color="textSecondary">Payer ID: {payerId}</Typography>}
+        {memberId && <Typography variant="body2" color="textSecondary">Member ID: {memberId}</Typography>}
+      </Grid>
+
+      {error && (
+        <Grid item>
+          <Typography variant="body2" color="error">{error}</Typography>
+        </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}
+          />
+        </Grid>
+      </Grid>
+
+      {value && (
+        <Grid item>
+          <Typography variant="caption" color="textSecondary">
+            Current Answer:
+          </Typography>
+          <pre style={{ fontSize: 11, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+            {JSON.stringify(value, null, 2)}
+          </pre>
+        </Grid>
+      )}
+    </Grid>
+  )
+}
+
 export const PharmacySearchInput = ({
   field,
   value: rawValue,