@tellescope/react-components 1.152.0 → 1.153.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.152.0",
+  "version": "1.153.1",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.152.0",
-    "@tellescope/sdk": "^1.152.0",
-    "@tellescope/types-client": "^1.152.0",
-    "@tellescope/types-models": "^1.152.0",
-    "@tellescope/types-utilities": "^1.152.0",
-    "@tellescope/utilities": "^1.152.0",
-    "@tellescope/validation": "^1.152.0",
+    "@tellescope/constants": "^1.153.1",
+    "@tellescope/sdk": "^1.153.1",
+    "@tellescope/types-client": "^1.153.1",
+    "@tellescope/types-models": "^1.153.1",
+    "@tellescope/types-utilities": "^1.153.1",
+    "@tellescope/utilities": "^1.153.1",
+    "@tellescope/validation": "^1.153.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,7 +80,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "b3357e0456b1aa63a08d1927e2f61bff96fc24fb",
+  "gitHead": "0ad06bdf4ec4ea7871d68bedfc10fd1154fc742b",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, Flex, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AppointmentBookingInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddressInput, AllergiesInput, AppointmentBookingInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, 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"
@@ -168,6 +168,8 @@ export const QuestionForField = ({
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
   const HiddenValue = customInputs?.['Hidden Value'] ?? HiddenValueInput
   const Emotii = customInputs?.['Emotii'] ?? EmotiiInput
+  const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
+  const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
 
   const validationMessage = validateField(field)
 
@@ -242,6 +244,12 @@ export const QuestionForField = ({
         : field.type === 'Emotii' ? (
           <Emotii enduser={enduser} enduserId={enduserId} field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
+        : field.type === 'Allergies' ? (
+          <Allergies enduser={enduser} enduserId={enduserId} field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+        )
+        : field.type === 'Conditions' ? (
+          <Conditions enduser={enduser} enduserId={enduserId} field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+        )
         : field.type === 'Height' ? (
           <Height field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
@@ -431,6 +439,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   }, [])
 
   const [uploading, setUploading] = useState(false)
+  const [autosubmitting, setAutoSubmitting] = useState(false)
 
   useEffect(() => {
     // ensure redirect question doesn't trip this alert
@@ -445,6 +454,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
       return onSuccess?.({} as any)
     } 
 
+
     await submit({ 
       onSuccess,
       ...options,
@@ -457,13 +467,18 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
     })
   }, [isPreview, onSuccess, submit, beforeunloadHandler])
 
+  const autoSubmitRef = useRef(false)
   useEffect(() => {
     if (!activeField.value.options?.autoSubmit) {
       return  
     }
+    if (autoSubmitRef.current) return
 
     if (responses.find(r => r.fieldId === activeField.value.id && field_can_autosubmit(activeField.value) && r.answer.value)) {
+      autoSubmitRef.current = true
+      setAutoSubmitting(true)
       handleSubmit()
+      .finally(() => setAutoSubmitting(false))
     }
   }, [handleSubmit, responses, activeField])
 
@@ -547,7 +562,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                   setUploading(!!selectedFiles.find(r => !!r.blobs?.length))
                   return handleSubmit({ onFileUploadsDone: () => setUploading(false) })
                 }} 
-                disabled={!!validationMessage || currentValue.field?.options?.disableNext === true}
+                disabled={!!validationMessage || currentValue.field?.options?.disableNext === true || autosubmitting}
                 submitText={form_display_text_for_language(form, "Submit")}
                 submittingText={
                   submittingStatus === 'uploading-files' 

package/src/Forms/hooks.tsx

@@ -668,7 +668,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
     selectedFiles.find(f => f.fieldId === activeField.value.id)
   )
 
-  const handleDatabaseSelect = useCallback((databaseRecords: DatabaseRecord[]) => {
+  const handleDatabaseSelect = useCallback((databaseRecords: Pick<DatabaseRecord, "values" | "databaseId">[]) => {
     try {
       // no need to update if there's no prepopulation
       if (!fields?.find(f => f.prepopulateFromDatabase?.databaseId && f.prepopulateFromDatabase?.field)) return

package/src/Forms/inputs.tsx

@@ -3,9 +3,9 @@ import axios from "axios"
 import { Autocomplete, Box, Button, Checkbox, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
-import { EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
+import { CANVAS_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, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities"
-import { Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
+import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -1661,7 +1661,7 @@ const choicesForDatabase: {
 } = {}
 
 const LOAD_CHOICES_LIMIT = 500
-const useDatabaseChoices = ({ databaseId='', field } : { databaseId?: string, field: FormField }) => {
+const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
   const session = useResolvedSession()
   const [renderCount, setRenderCount] = useState(0)
 
@@ -1697,13 +1697,20 @@ const useDatabaseChoices = ({ databaseId='', field } : { databaseId?: string, fi
 
   return {
     doneLoading: choicesForDatabase[databaseId]?.done ?? false,
-    choices: choicesForDatabase[databaseId]?.records ?? [],
+    choices: [
+      ...choicesForDatabase[databaseId]?.records ?? [],
+      ...(otherAnswers || []).map(v => ({
+        id: v.text,
+        databaseId,
+        values: [{ label: field.options?.databaseLabel || '', type: 'Text', value: v.text }],
+      }) as Pick<DatabaseRecord, 'id' | 'values' | 'databaseId'>)
+    ],
     renderCount,
   }
 }
 
 
-const label_for_database_record = (field: FormField, record?: DatabaseRecord) => {
+const label_for_database_record = (field: FormField, record?: Pick<DatabaseRecord, 'values'>) => {
   if (!record) return ''
 
   const addedLabels = (
@@ -1722,14 +1729,34 @@ const label_for_database_record = (field: FormField, record?: DatabaseRecord) =>
   )
 }
 
+const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) => {
+  try { 
+    const existing = (
+      (_value || [])
+      .filter(v => typeof v === 'string' || v.recordId === v.text)
+      .map(v => typeof v === 'string' ? { databaseId: '', recordId: v, text: v } : v)
+    )
+    if (typing) {
+      existing.push({ text: typing, databaseId: '', recordId: typing })
+    }
+
+    return existing
+  } catch(err) { console.error(err) }
+
+  return []
+}
+
 export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
 }) => {
+  const [typing, setTyping] = useState('')
   const { choices, doneLoading } = useDatabaseChoices({ 
     databaseId: field.options?.databaseId,
     field,
+    otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
   })
 
+  console.log(choices, _value)
   const value = React.useMemo(() => {
     try {
       // if the value is a string (some single answer that was save), make sure we coerce to array
@@ -1797,7 +1824,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
   }, [choices, filterResponse, field.options?.databaseFilter, value])
 
   const filteredChoices = useMemo(() => {
-    const filtered: typeof filteredChoicesWithPotentialDuplicates = [] 
+    const filtered = [] 
 
     const uniques = new Set<string>([])
     for (const c of filteredChoicesWithPotentialDuplicates) {
@@ -1842,6 +1869,8 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
           field.id,
         )
       }}
+      inputValue={typing}
+      onInputChange={(e, v) => e && setTyping(v)}
       renderInput={params => <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} />}
     />
   )
@@ -2781,8 +2810,6 @@ export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, on
   const [data, setData] = useState<{ surveyRequestId: string, surveyUrl: string }>()
   const [loadCount, setLoadCount] = useState(0)
 
-  console.log(props.enduserId, props.enduser)
-
   const fetchRef = useRef(false)
   useEffect(() => {
     if (value) return
@@ -2823,4 +2850,105 @@ export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, on
       onLoad={() => setLoadCount(l => l + 1)} 
     />
   )
+}
+
+type AllergyResult = {
+  entry?: { resource: { code: { coding: { system: "http://www.fdbhealth.com/", code: string, display: string } []}} }[]
+}
+
+export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'Allergies'>) => {
+  const session = useResolvedSession()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<{ code: string, display: string }[]>([])
+
+  const fetchRef = useRef(query)
+  useEffect(() => {
+    if (fetchRef.current === query) return
+    fetchRef.current = query
+
+    if (!query) return
+
+    const t = setTimeout(() => {
+      session.api.integrations
+      .proxy_read({ 
+        integration: CANVAS_TITLE, 
+        type: 'allergies', 
+        query,
+      })
+      .then((r : { data: AllergyResult }) => {
+        const deduped: typeof results = []
+        const totalResults = (
+          (r.data.entry || [])
+          .flatMap(v => v?.resource?.code?.coding || [])
+          .filter(v => v.system.includes('fdbhealth'))
+          .map(v => ({ code: v.code, display: v.display, system: v.system }))
+        )
+        for (const v of totalResults) {
+          if (deduped.find(d => d.display === v.display)) { continue }
+
+          deduped.push(v)
+        }
+        setResults(deduped)
+      })
+    }, 200)
+
+    return () => { clearTimeout(t) }
+  }, [session, query])
+
+  return (
+    <Autocomplete multiple value={value || []} options={[...results, ...(value || [])]} style={{ marginTop: 5 }}
+      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+      onChange={(e, v) => v && onChange(v, field.id)}
+      getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
+      inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
+      renderInput={(params) => (
+        <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
+          required={!field.isOptional} size="small" label="" placeholder="Search allergies..."
+        />
+      )}
+    /> 
+  )
+}
+
+export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'Conditions'>) => {
+  const session = useResolvedSession()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<{ code: string, display: string }[]>([])
+
+  const fetchRef = useRef(query)
+  useEffect(() => {
+    if (fetchRef.current === query) return
+    fetchRef.current = query
+
+    if (!query) return
+
+    const t = setTimeout(() => {
+      session.api.diagnosis_codes.getSome({ search: { query } })
+      .then(codes => {
+        const deduped: typeof results = []
+        for (const v of codes) {
+          if (deduped.find(d => d.display === v.display)) { continue }
+
+          deduped.push(v)
+        }
+        setResults(deduped)
+      })
+    }, 200)
+
+    return () => { clearTimeout(t) }
+  }, [session, query])
+
+  return (
+    <Autocomplete multiple value={value || []} options={[...results, ...(value || [])]} style={{ marginTop: 5 }}
+      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+      onChange={(e, v) => v && onChange(v, field.id)}
+      getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
+      inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
+      renderInput={(params) => (
+        <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
+          required={!field.isOptional} size="small" label="" placeholder="Search conditions..."
+        />
+      )}
+    /> 
+  )
 }

package/src/Forms/types.ts

@@ -17,7 +17,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   size?: 'small',
   label?: string,
   fullWidth?: boolean,
-  onDatabaseSelect?: (r: DatabaseRecord[]) => void,
+  onDatabaseSelect?: (r: Pick<DatabaseRecord, "values" | "databaseId">[]) => void,
   responses?: Response[]
   title?: string,
   enduserId?: string,

package/src/inputs_shared.tsx

@@ -5,8 +5,8 @@ import { LoadFunction, LoadFunctionArguments } from "@tellescope/sdk"
 import { ALL_ACCESS, UNSEARCHABLE_FIELDS } from "@tellescope/constants"
 import { SearchAPIProps, useSearchAPI } from "./hooks"
 import { TextFieldProps } from "./mui"
-import { AppointmentBookingPage, AppointmentLocation, AutomationTrigger, CalendarEventTemplate, CallHoldQueue, ChatRoom, Database, DatabaseRecord, Enduser, EnduserOrder, FaxLog, File, Form, FormGroup, Forum, Journey, ManagedContentRecord, MessageTemplateSnippet, Organization, PrescriptionRoute, SuggestedContact, Template, Ticket, TicketQueue, User, UserNotification } from "@tellescope/types-client"
-import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, LoadingLinear, ScrollingList, SearchTextInput, Typography, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, value_is_loaded } from "."
+import { AppointmentBookingPage, AppointmentLocation, AutomationTrigger, CalendarEventTemplate, CallHoldQueue, ChatRoom, Database, DatabaseRecord, DiagnosisCode, Enduser, EnduserOrder, FaxLog, File, Form, FormGroup, Forum, Journey, ManagedContentRecord, MessageTemplateSnippet, Organization, PrescriptionRoute, SuggestedContact, Template, Ticket, TicketQueue, User, UserNotification } from "@tellescope/types-client"
+import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, LoadingLinear, ScrollingList, SearchTextInput, Typography, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserOrders, useEndusers, useFaxLogs, useFiles, useFormGroups, useForms, useForums, useJourneys, useManagedContentRecords, useMessageTemplateSnippets, useNotifications, useOrganization, useOrganizations, usePrescriptionRoutes, useResolvedSession, useSession, useSuggestedContacts, useTemplates, useTicketQueues, useTickets, useUsers, value_is_loaded } from "."
 import { SxProps } from "@mui/material"
 import { AccessPermissions } from "@tellescope/types-models"
 
@@ -618,6 +618,17 @@ export const SuggestedContactSearch = (props: Omit<GenericSearchProps<SuggestedC
   )
 }
 
+export const DiagnosisCodeSearch = (props: Omit<GenericSearchProps<DiagnosisCode>, 'filterKey'> & { filterKey?: string }) => {
+  const session = useSession()
+  const [, { addLocalElements }] = useDiagnosisCodes({ dontFetch: true })
+  return (
+    <ModelSearchInput filterKey="diagnoses-code" {...props} 
+      searchAPI={session.api.diagnosis_codes.getSome}
+      onLoad={addLocalElements}
+    />
+  )
+}
+
 export const CallHoldQueueSearch = (props: Omit<GenericSearchProps<CallHoldQueue>, 'filterKey'> & { filterKey?: string }) => {
   const session = useSession()
   const [, { addLocalElements }] = useCallHoldQueues({ dontFetch: true })

package/src/state.tsx

@@ -93,6 +93,7 @@ import {
   FaxLog,
   CallHoldQueue,
   SuggestedContact,
+  DiagnosisCode,
 } from "@tellescope/types-client"
 
 import {
@@ -107,7 +108,7 @@ import {
 } from '@tellescope/sdk'
 import { value_is_loaded } from './loading'
 import { matches_organization, object_is_empty, objects_equivalent } from '@tellescope/utilities'
-import { ModelName, ReadFilter, SortBy } from '@tellescope/types-models'
+import { Diagnosis, ModelName, ReadFilter, SortBy } from '@tellescope/types-models'
 
 const RESET_CACHE_TYPE = "cache/reset" as const
 export const resetStateAction = createAction(RESET_CACHE_TYPE)
@@ -353,6 +354,7 @@ const portalBrandingsSlice = createSliceForList<PortalBranding, 'portal_branding
 const messageTemplateSnippetsSlice = createSliceForList<MessageTemplateSnippet, 'message_template_snippets'>('message_template_snippets')
 const faxLogsSlice = createSliceForList<FaxLog, 'fax_logs'>('fax_logs')
 const suggestedContactsSlice = createSliceForList<SuggestedContact, 'suggested_contacts'>('suggested_contacts')
+const diagnosisCodesSlice = createSliceForList<DiagnosisCode, 'diagnosis_codes'>('diagnosis_codes')
 
 const roleBasedAccessPermissionsSlice = createSliceForList<RoleBasedAccessPermission, 'role_based_access_permissions'>('role_based_access_permissions')
 
@@ -440,6 +442,7 @@ export const sharedConfig = {
     fax_logs: faxLogsSlice.reducer,
     call_hold_queues: callHoldQueuesSlice.reducer,
     suggested_contacts: suggestedContactsSlice.reducer,
+    diagnosis_codes: diagnosisCodesSlice.reducer,
   },
 }
 
@@ -1256,6 +1259,24 @@ export const usePortalBrandings = (options={} as HookOptions<PortalBranding>) =>
     },
   )
 }
+export const useDiagnosisCodes = (options={} as HookOptions<DiagnosisCode>) => {
+  const session = useResolvedSession()
+
+  return useListStateHook('diagnosis_codes', useTypedSelector(s => s.diagnosis_codes), session, diagnosisCodesSlice,
+    { 
+      loadQuery: session.api.diagnosis_codes.getSome,
+      findOne: session.api.diagnosis_codes.getOne,
+      findByIds: session.api.diagnosis_codes.getByIds,
+      addOne: session.api.diagnosis_codes.createOne,
+      addSome: session.api.diagnosis_codes.createSome,
+      deleteOne: session.api.diagnosis_codes.deleteOne,
+      updateOne: session.api.diagnosis_codes.updateOne,
+    },
+    { 
+      ...options,
+    },
+  )
+}
 export const useEnduserProblems = (options={} as HookOptions<EnduserProblem>) => {
   const session = useResolvedSession()