@tellescope/react-components 1.234.0 → 1.235.0

package/src/Forms/inputs.v2.tsx

@@ -544,368 +544,17 @@ export const NumberInput = ({ field, value, onChange, form, ...props }: FormInpu
   )
 }
 
-export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form, responses, enduser, ...props }: FormInputProps<'Insurance'>) => {
-  const session = useResolvedSession()
-
-  const [payers, setPayers] = useState<{ id: string, name: string, databaseRecord?: DatabaseRecord, type?: string, state?: string }[]>([])
-  const [query, setQuery] = useState('')
-
-  const addressQuestion = useMemo(() => responses?.find(r => {
-    if (r.answer.type !== 'Address') return false
-    if (r.field.intakeField !== 'Address') return false
-
-    // make sure state is actually defined (in case of multiple address questions, where 1+ are blank)
-    if (!r.answer.value?.state) return false
-
-    return true
-  }), [responses])
-
-  const state = useMemo(() => (
-    (addressQuestion?.answer?.type === 'Address' ? addressQuestion?.answer?.value?.state : undefined) || enduser?.state
-  ), [enduser?.state, addressQuestion])
-
-  const loadRef = useRef(false) // so session changes don't cause
-  useEffect(() => {
-    if (field?.options?.dataSource === CANVAS_TITLE) return // instead, look-up while typing against Canvas Search API
-    if (loadRef.current) return
-    loadRef.current = true
-
-    // just load all at once, should be reasonably performant compared to paging
-    session.api.form_fields.load_choices_from_database({ fieldId: field.id, limit: 10000 })
-    .then(({ choices }) => setPayers(
-      choices
-      .map(c => ({
-        id: c.values.find(v => v.label?.trim()?.toLowerCase() === 'id')?.value?.toString() || '',
-        name: c.values.find(v => v.label?.trim()?.toLowerCase() === 'name')?.value?.toString() || '',
-        state: c.values.find(v => v.label?.trim()?.toLowerCase() === 'state')?.value?.toString() || '',
-        type: c.values.find(v => v.label?.trim()?.toLowerCase() === 'type')?.value?.toString() || '',
-        databaseRecord: c,
-      }))
-      .filter(c => !c.state || !state || (c.state === state))
-    ))
-    .catch(console.error)
-  }, [session, state, field?.options?.dataSource])
-
-  const searchRef = useRef(query)
-  useEffect(() => {
-    if (field?.options?.dataSource !== CANVAS_TITLE) { return }
-    if (!query) return
-    if (searchRef.current === query) return
-    searchRef.current = query
-
-    session.api.integrations.proxy_read({
-      integration: CANVAS_TITLE,
-      query,
-      type: 'organizations',
-    })
-    .then(({ data }) => {
-      try {
-        setPayers(data.map((d: any) => ({
-          id: d.resource.id,
-          name: d.resource.name,
-        })))
-      } catch(err) { console.error }
-    })
-    .catch(console.error)
-  }, [session, field?.options?.dataSource, query])
-
-  return (
-    <Grid container spacing={2} sx={{ mt: '0' }}>
-      <Grid item xs={12} sm={6}>
-      <Autocomplete freeSolo={!field.options?.requirePredefinedInsurer} options={payers.map(p => p.name)}
-        value={value?.payerName || ''}
-        onChange={(e, v) => onChange({ 
-          ...value, 
-          payerName: v || '',
-          payerId: payers.find(p => p.name === v)?.id || '',
-          payerType: payers.find(p => p.name === v)?.type || '',
-        }, field.id)}  
-        onInputChange={
-          field.options?.requirePredefinedInsurer 
-            ? (e, v) => { if (v) { setQuery(v) } }
-            : (e, v) => {
-              if (v) { setQuery(v) }
-
-              const databaseRecord = payers.find(p => p.name === v)?.databaseRecord
-              if (databaseRecord) {
-                onDatabaseSelect?.([databaseRecord])
-              }
-
-              onChange({ 
-                ...value, 
-                payerName: v || '',
-                payerId: payers.find(p => p.name === v)?.id || '',
-                payerType: payers.find(p => p.name === v)?.type || '',
-              }, field.id)
-            }
-          }
-        renderInput={(params) => (
-          <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-            required={!field.isOptional} size="small" label={"Insurer"}
-            placeholder={field.options?.dataSource === CANVAS_TITLE ? "Search insurer..." : "Insurer"}
-          />
-        )}
-      />
-      </Grid>
-      <Grid item xs={12} sm={6}>
-      <TextField InputProps={defaultInputProps} required={!field.isOptional} fullWidth value={value?.memberId ?? ''} 
-        onChange={e => onChange({ ...value, memberId: e.target.value }, field.id)}  
-        label={form_display_text_for_language(form, "Member ID", '')}
-        size="small"
-      />
-      </Grid>
-
-      <Grid item xs={12} sm={6}>
-      <TextField InputProps={defaultInputProps} required={false} fullWidth value={value?.planName ?? ''} 
-        onChange={e => onChange({ ...value, planName: e.target.value }, field.id)}  
-        label={form_display_text_for_language(form, "Plan Name", '')}
-        size="small"
-      />
-      </Grid>
-
-      <Grid item xs={12} sm={6}>
-        <DateStringInput size="small" label="Plan Start Date"
-          field={{
-            ...field,
-            isOptional: true, //field.isOptional || field.options?.billingProvider === 'Candid'
-          }} 
-          value={value?.startDate || ''} 
-          onChange={startDate => 
-            onChange({ 
-              ...value, 
-              startDate,
-            }, field.id)
-          }
-        />
-      </Grid>
-
-      {field.options?.includeGroupNumber &&
-        <Grid item xs={12}>
-          <TextField InputProps={defaultInputProps} fullWidth value={value?.groupNumber ?? ''} 
-            onChange={e => onChange({ ...value, groupNumber: e.target.value }, field.id)}  
-            label={form_display_text_for_language(form, "Group Number", '')}
-            size="small"
-          />
-        </Grid>
-      }
+// InsuranceInput, BridgeEligibilityInput, and AppointmentBookingInput logic is shared with inputs.tsx to avoid duplication
+import { InsuranceInput as SharedInsuranceInput, BridgeEligibilityInput as SharedBridgeEligibilityInput, AppointmentBookingInput as SharedAppointmentBookingInput } from './inputs'
 
-      <Grid item xs={12}>
-        <StringSelector size="small" label="Relationship to Policy Owner"
-          options={
-            (
-              (field.options?.billingProvider === CANVAS_TITLE || field.options?.dataSource === CANVAS_TITLE )
-                ? INSURANCE_RELATIONSHIPS_CANVAS 
-                : INSURANCE_RELATIONSHIPS
-            )
-            .sort((x, y) => x.localeCompare(y))
-          }
-          value={value?.relationship || 'Self'} 
-          onChange={relationship => 
-            onChange({ ...value, relationship: relationship as InsuranceRelationship || 'Self' }, field.id)
-          }
-        />
-      </Grid>
-
-      {(value?.relationship || 'Self') !== 'Self' &&
-      <>
-        <Grid item xs={12}>
-          <Typography sx={{ fontWeight: 'bold' }}>Policy Owner Details</Typography>
-        </Grid>
-
-        <Grid item xs={6}>
-          <TextField label="First Name" size="small" InputProps={defaultInputProps} fullWidth
-            value={value?.relationshipDetails?.fname || ''} 
-            required={!field.isOptional}
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, fname: e.target.value }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <TextField label="Last Name" size="small" InputProps={defaultInputProps} fullWidth
-            value={value?.relationshipDetails?.lname || ''} 
-            required={!field.isOptional}
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, lname: e.target.value }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <StringSelector options={TELLESCOPE_GENDERS} size="small" label="Gender"
-            value={value?.relationshipDetails?.gender || ''} 
-            required={!field.isOptional}
-            onChange={v => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, gender: v as TellescopeGender }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <DateStringInput size="small" label="Date of Birth"
-            field={{
-              ...field,
-              isOptional: field.isOptional || field.options?.billingProvider === 'Candid'
-            }} 
-            value={value?.relationshipDetails?.dateOfBirth || ''} 
-            onChange={dateOfBirth => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, dateOfBirth }
-              }, field.id)
-            }
-          />
-        </Grid>
-
-
-        {/* <Grid item xs={6}>
-          <TextField label="Email" type="email" size="small" InputProps={defaultInputProps} fullWidth
-            value={value?.relationshipDetails?.email || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, email: e.target.value }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <TextField label="Cell Phone" size="small" InputProps={defaultInputProps} fullWidth
-            value={value?.relationshipDetails?.phone || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { ...value?.relationshipDetails, phone: e.target.value }
-              }, field.id)
-            }
-          />
-        </Grid>
-
-        <Grid item xs={12}>
-          <AddressInput field={field} value={{
-            addressLineOne: value?.relationshipDetails?.address?.lineOne || '',
-            addressLineTwo: value?.relationshipDetails?.address?.lineTwo || '',
-            city: value?.relationshipDetails?.address?.city || '',
-            state: value?.relationshipDetails?.address?.state || '',
-            zipCode: value?.relationshipDetails?.address?.zipCode || '',
-          }} 
-            onChange={v => {
-              const { addressLineOne='', addressLineTwo='', ...address } = v || {}
-              onChange({ 
-                ...value, 
-                relationshipDetails: { 
-                  ...value?.relationshipDetails, 
-                  address: {
-                    lineOne: addressLineOne,
-                    lineTwo: addressLineTwo,
-                    ...address,
-                  },
-                }
-              }, field.id)
-            }}
-          />
-        </Grid> */}
-
-        {/* <Grid item xs={6}>
-          <TextField label="Address"
-            value={value?.relationshipDetails?.address?.lineOne || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { 
-                  ...value?.relationshipDetails, 
-                  address: {
-                    ...value?.relationshipDetails?.address,
-                    lineOne: e.target.value
-                  }
-                }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <TextField label="Line Two"
-            value={value?.relationshipDetails?.address?.lineTwo || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { 
-                  ...value?.relationshipDetails, 
-                  address: {
-                    ...value?.relationshipDetails?.address,
-                    lineTwo: e.target.value
-                  }
-                }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={6}>
-          <TextField label="City"
-            value={value?.relationshipDetails?.address?.city || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { 
-                  ...value?.relationshipDetails, 
-                  address: {
-                    ...value?.relationshipDetails?.address,
-                    city: e.target.value
-                  }
-                }
-              }, field.id)
-            }
-          />
-        </Grid>
-        <Grid item xs={2}>
-          <TextField label="State"
-            value={value?.relationshipDetails?.address?.state || ''} 
-            onChange={e => 
-              onChange({ 
-                ...value, 
-                relationshipDetails: { 
-                  ...value?.relationshipDetails, 
-                  address: {
-                    ...value?.relationshipDetails?.address,
-                    state: e.target.value
-                  }
-                }
-              }, field.id)
-            }
-          />
-        </Grid>
+// Wrap the shared InsuranceInput component with v2-specific props
+export const InsuranceInput = (props: FormInputProps<'Insurance'>) => {
+  return <SharedInsuranceInput {...props} inputProps={defaultInputProps} />
+}
 
-        <Grid item xs={4}> 
-          <Autocomplete value={value?.state}
-            options={VALID_STATES}
-            sx={{ width: 100 }}
-            disablePortal
-            onChange={(e, v) => v && 
-              onChange({
-                ...value as any,
-                state: v ?? '',
-              }, 
-              field.id
-            )}
-            renderInput={(params) => (
-              <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-                size={'small'} label={"State"} required={!field.isOptional}  
-              />
-            )}
-            {...props}
-          />
-        </Grid> */}
-      </>
-      }
-    </Grid>
-  )
+// Wrap the shared BridgeEligibilityInput component with v2-specific props
+export const BridgeEligibilityInput = (props: FormInputProps<'Bridge Eligibility'>) => {
+  return <SharedBridgeEligibilityInput {...props} inputProps={defaultInputProps} />
 }
 
 
@@ -2667,239 +2316,9 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
   )
 }
 
-export const AppointmentBookingInput = ({ formResponseId, field, value, onChange, form, responses, goToPreviousField, isPreviousDisabled, enduserId, ...props }: FormInputProps<'Appointment Booking'>) => {
-  const session = useResolvedSession()
-
-  const [loaded, setLoaded] = useState<Awaited<ReturnType<typeof session['api']['form_fields']['booking_info']>>>()
-  const [error, setError] = useState('')
-  const [acknowledgedWarning, setAcknowledgedWarning] = useState(false)
-  const [height, setHeight] = useState(450)
-  const [confirming, setConfirming] = useState(false)
-
-  const bookingPageId = field?.options?.bookingPageId
-
-
-  const downloadICS = useCallback(async (event : Pick<CalendarEvent, 'id'>) => {
-    try {
-      downloadFile(
-        await session.api.calendar_events.download_ics_file({ calendarEventId: event.id, excludeAttendee: true }) as any, 
-        { name: "event.ics", dataIsURL: true, type: 'text/calendar'}
-      )
-    } catch(err) {
-      console.error(err)
-    }
-  }, [session])
-
-  const addressQuestion = useMemo(() => responses?.find(r => {
-    if (r.answer.type !== 'Address') return false
-    if (r.field.intakeField !== 'Address') return false
-
-    // make sure state is actually defined (in case of multiple address questions, where 1+ are blank)
-    if (!r.answer.value?.state) return false
-
-    return true
-  }), [responses])
-  const state = useMemo(() => (
-    addressQuestion?.answer?.type === 'Address' ? addressQuestion?.answer?.value?.state : undefined
-  ), [addressQuestion])
-
-  const loadBookingInfo = useCallback(() => {
-    if (!bookingPageId) return
-
-    setError('')
-    session.api.form_fields.booking_info({ 
-      enduserId,
-      bookingPageId,
-      enduserFields: { state }
-    })
-    .then(setLoaded)
-    .catch(e => setError(e?.message || e?.toString() || 'Error loading appointment details'))
-  }, [enduserId, bookingPageId, session, state])
-
-  const fetchRef = useRef(false)
-  useEffect(() => {
-    if (value) return
-    if (!bookingPageId) return
-    if (fetchRef.current) return
-    fetchRef.current = true
-
-    loadBookingInfo()
-  }, [bookingPageId, loadBookingInfo, value])
-
-  useEffect(() => {
-    const handleMessage = (m: MessageEvent) => {
-      // entropy to separate from other booking pages rendered on the same screen
-      if (
-        m?.data?.type === 'Booking Success' 
-        && typeof m?.data?.bookedEventId === 'string' 
-        && (!m?.data?.entropy || m?.data?.entropy === loaded?.entropy)
-      ) {
-        onChange(m.data.bookedEventId, field.id)
-        emit_gtm_event({ event: 'form_progress', fieldId: field.id, formId: field.formId, title: field.title, status: "Appointment Booked" })
-      }
-      if (m?.data?.type === 'CalendarPicker') {
-        setHeight(750)
-      }
-      if (m?.data?.type === 'UsersPicker') {
-        setHeight(450)
-      }
-      if (m?.data?.type === 'Confirmation') {
-        setConfirming(true)
-      } 
-      if (m?.data?.type === 'Join Link' && m?.data?.link) {
-        update_local_storage('tellescope_last_booking_page_join_link', m.data.link)
-      }
-      else {
-        setConfirming(false)
-      }
-    }
-
-    window.addEventListener('message', handleMessage)
-    return () => { window.removeEventListener('message', handleMessage) }
-  }, [field?.id, field?.formId, field?.title, onChange, acknowledgedWarning, value, loaded?.entropy])
-
-  if (value) {
-    return (
-      <Grid container direction="column" spacing={1}>
-        <Grid item>
-        <Grid container alignItems="center" wrap="nowrap">
-          <CheckCircleOutline color="success" />
-
-          <Typography sx={{ ml: 1, fontSize: 20 }}>
-            Your appointment has been booked
-          </Typography>
-        </Grid>
-        </Grid>
-
-        <Grid item sx={{ maxWidth: 250 }}>
-          <LoadingButton variant="contained" style={{ maxWidth: 250 }}
-            submitText="Add to Calendar" submittingText="Downloading..."
-            onClick={() => downloadICS({ id: value })}
-          />
-        </Grid>
-      </Grid>
-    )
-  }
-  if (!bookingPageId) {
-    return <Typography>No booking page specified</Typography>
-  }
-  if (error) {
-    return (
-      <Grid container direction="column" spacing={1}>
-        <Grid item>
-          <Typography color="error">Error: {error}</Typography>
-        </Grid>
-
-        <Grid item>
-          <LoadingButton disabled={!bookingPageId} style={{ maxWidth: 300 }}
-            variant="contained" onClick={loadBookingInfo}
-            submitText="Try Again" submittingText="Loading..."
-          />
-        </Grid>
-      </Grid>
-    )
-  }  
-  if (!loaded?.bookingURL) {
-    return <LinearProgress />
-  }
-
-  let bookingURL = loaded.bookingURL
-  if (field.options?.userTags?.length) {
-    bookingURL += `&userTags=${
-      field.options.userTags
-      .flatMap(t => {
-        // set dynamic tags if found
-        if (t === '{{logic}}') {
-          return new URL(window.location.href).searchParams.get('logic') || '{{logic}}'
-        }
-        if (t.startsWith("{{field.") && t.endsWith(".value}}")) {
-          const fieldId = t.replace('{{field.', '').replace(".value}}", '')
-
-          const answer = responses?.find(r => r.fieldId === fieldId)?.answer
-          if (!answer?.value) return t
-
-          if (answer.type === 'Insurance') {
-            return answer.value.payerName || ''
-          }
-          if (Array.isArray(answer.value) && typeof answer.value?.[0] === 'string') {
-            return answer.value as string[]
-          }
-          return form_response_value_to_string(answer.value)
-        }
-        return t
-      })
-      .join(',')
-    }`
-  }
-  if (field.options?.userFilterTags?.length) {
-    bookingURL += `&userFilterTags=${
-      field.options.userFilterTags
-      .flatMap(t => {
-        // set dynamic tags if found
-        if (t === '{{logic}}') {
-          return new URL(window.location.href).searchParams.get('logic') || '{{logic}}'
-        }
-        if (t.startsWith("{{field.") && t.endsWith(".value}}")) {
-          const fieldId = t.replace('{{field.', '').replace(".value}}", '')
-
-          const answer = responses?.find(r => r.fieldId === fieldId)?.answer
-          if (!answer?.value) return t
-
-          if (answer.type === 'Insurance') {
-            return answer.value.payerName || ''
-          }
-          if (Array.isArray(answer.value) && typeof answer.value?.[0] === 'string') {
-            return answer.value as string[]
-          }
-          return form_response_value_to_string(answer.value)
-        }
-        return t
-      })
-      .join(',')
-    }`
-  }
-  // need to use form?.id for internally-submitted forms because formResponseId isn't generated until initial submission or saved draft
-  if (field.options?.holdAppointmentMinutes && (formResponseId || field?.id)) {
-    bookingURL += `&formResponseId=${formResponseId || field?.id}`
-    bookingURL += `&holdAppointmentMinutes=${field.options.holdAppointmentMinutes}`
-  }
-
-  return (
-    <Grid container direction="column" spacing={1} sx={{ mt: 1 }}>
-      {/* When skipping user selection, include a back button at the top for clearer navigation on mobile */}
-      {!!field.options?.userFilterTags?.length && !field.options.userTags?.length && !isPreviousDisabled?.() && !confirming &&
-        <Grid item alignSelf="flex-start" >
-        <Button variant="outlined" onClick={goToPreviousField} sx={{ height: 25, p: 0.5, px: 1 }}>
-          Back
-        </Button>
-        </Grid>
-      }
-
-      {loaded.warningMessage &&
-        <Grid item>
-          <Typography color="error" sx={{ fontSize: 20, fontWeight: 'bold' }}>
-            {loaded.warningMessage}
-          </Typography>
-        </Grid>
-      }
-
-      <Grid item>
-      {(!loaded.warningMessage || acknowledgedWarning)
-        ? (
-          <iframe title="Appointment Booking Embed" 
-            src={bookingURL}
-            style={{ border: 'none', width: '100%', height }}
-          />
-        )
-        : (
-          <Button variant="outlined" onClick={() => setAcknowledgedWarning(true)}>
-            Show Booking Page Preview
-          </Button>
-        )
-      }
-      </Grid>
-    </Grid>
-  )
+// AppointmentBookingInput logic is shared with inputs.tsx to avoid duplication
+export const AppointmentBookingInput = (props: FormInputProps<'Appointment Booking'>) => {
+  return <SharedAppointmentBookingInput {...props} />
 }
 
 export const HeightInput = ({ field, value={} as any, onChange, ...props }: FormInputProps<'Height'>) => (

package/src/Forms/types.ts

@@ -2,6 +2,7 @@ import { AnswerForType, FormResponseValue } from "@tellescope/types-models";
 import { DatabaseRecord, Enduser, Form, FormField } from "@tellescope/types-client";
 import { FileBlob, TreeNode } from "@tellescope/types-utilities";
 import { JSXElementConstructor } from "react";
+import { SxProps } from "@mui/material";
 import { Response } from "./hooks";
 
 export type FormFieldNode = TreeNode<FormField>
@@ -23,8 +24,8 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   enduserId?: string,
   enduser?: Partial<Enduser>
   error?: boolean,
-  goToPreviousField?: () => void, 
-  goToNextField?: (response?: FormResponseValue['answer']) => void, 
+  goToPreviousField?: () => void,
+  goToNextField?: (response?: FormResponseValue['answer']) => void,
   isPreviousDisabled?: () => boolean,
   formResponseId?: string,
   rootResponseId?: string,
@@ -37,6 +38,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   uploadingFiles?: { fieldId: string }[]
   setUploadingFiles?: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
+  inputProps?: { sx: SxProps },
 }
 
 export type FormInputs = {