@tellescope/react-components 1.172.1 → 1.174.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.172.1",
+  "version": "1.174.0",
   "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.172.0",
-    "@tellescope/sdk": "^1.172.0",
-    "@tellescope/types-client": "^1.172.0",
-    "@tellescope/types-models": "^1.172.0",
-    "@tellescope/types-utilities": "^1.172.0",
-    "@tellescope/utilities": "^1.172.0",
-    "@tellescope/validation": "^1.172.0",
+    "@tellescope/constants": "^1.174.0",
+    "@tellescope/sdk": "^1.174.0",
+    "@tellescope/types-client": "^1.174.0",
+    "@tellescope/types-models": "^1.174.0",
+    "@tellescope/types-utilities": "^1.174.0",
+    "@tellescope/utilities": "^1.174.0",
+    "@tellescope/validation": "^1.174.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,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": "91a22b59bb059b03006713f1c20d9746850bfe53",
+  "gitHead": "b18cb31c80f3294f01abeb2bcb2d73c19441f738",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -967,7 +967,10 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
   const includedFieldIds = (
-    Array.from(new Set([...list.map(f => f.id), ...(existingResponses ?? []).map(e => e.fieldId)])) 
+    Array.from(new Set([
+      ...list.map(f => f.id), 
+      ...(existingResponses ?? []).filter(e => !e.isPrepopulatedFromEnduserField).map(e => e.fieldId)
+    ]))
   )
 
   const handleSubmit = useCallback(async () => {

package/src/Forms/hooks.tsx

@@ -348,7 +348,7 @@ interface UseTellescopeFormOptions {
   automationStepId?: string,
   form?: Form,
   fields: FormField[],
-  existingResponses?: FormResponse['responses'],
+  existingResponses?: (FormResponseValue & { isPrepopulatedFromEnduserField?: boolean })[],
   formResponseId?: string,
   isInternalNote?: boolean,
   formTitle?: string,
@@ -1213,7 +1213,12 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
             responses: [
               ...responsesToSubmit,
               // include existing responses in case previously saved as draft
-              ...(existingResponses ?? []).filter(r => !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)),
+              ...(existingResponses ?? []).filter(r => 
+                !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)
+                // but don't include responses which were populated from a patient field and not a prior response
+                // if these are edited, they would be included in responsesToSubmit
+                && !r.isPrepopulatedFromEnduserField
+              ),
             ],
             automationStepId,
             customerId,

package/src/Forms/inputs.tsx

@@ -355,6 +355,23 @@ export const TableInput = ({ field, value=[], onChange, ...props }: FormInputPro
                     </Select>
                   </FormControl>
                 )
+              : (v.type === 'Database' && v.info.databaseId && v.info.databaseLabel) ? (
+                <DatabaseSelectInput responses={[]} size="small"
+                  field={{
+                    ...field,
+                    options: { databaseId: v.info.databaseId, databaseLabel: v.info.databaseLabel },
+                    title: v.label,
+                  }}
+                  value={row.find((_, _i) => columnIndex === _i)?.entry ? [{
+                    text: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').text || '',
+                    databaseId: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').databaseId || '',
+                    recordId: JSON.parse(row.find((_, _i) => columnIndex === _i)?.entry || '{}').recordId || '',
+                  }] : []}
+                  onChange={
+                    (records) => handleChange(i, columnIndex, { label: v.label, entry: JSON.stringify(records?.[0] ?? '') })
+                  }
+                />
+              )
               : null
               } 
             </Grid>
@@ -1761,6 +1778,7 @@ const choicesForDatabase: {
     lastId?: string,
   }
 } = {}
+const preventRefetch: Record<string, boolean> = {}
 
 const LOAD_CHOICES_LIMIT = 500
 const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
@@ -1774,11 +1792,14 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     const choices = choicesForDatabase[databaseId]?.records ?? []
     const lastId = choicesForDatabase[databaseId]?.lastId
 
+    if (preventRefetch[databaseId + field.id + lastId]) return
+    preventRefetch[databaseId + field.id + lastId] = true
+
     session.api.form_fields.load_choices_from_database({
       fieldId: field.id,
       lastId,
       limit: LOAD_CHOICES_LIMIT,
-      databaseId, // doesn't do anything now, but avoids cache hit when editing to change databaseId for same field
+      databaseId, // overrides fieldId, supports using Database question in Table Input
     })
     .then(({ choices: newChoices }) => {
       choicesForDatabase[databaseId] = {
@@ -1795,6 +1816,7 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     })
     .catch(err => {
       console.error(err)
+      preventRefetch[databaseId + field.id + lastId] = false
     })
   }, [session, field, databaseId, renderCount])
 
@@ -1849,7 +1871,7 @@ const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) =
   return []
 }
 
-export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses }: FormInputProps<'Database Select'> & {
+export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses, size }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
 }) => {
   const [typing, setTyping] = useState('')
@@ -1944,7 +1966,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
 
   if (!doneLoading) return <LinearProgress />
   return (
-    <Autocomplete id={field.id} freeSolo={false}
+    <Autocomplete id={field.id} freeSolo={false} size={size}
       componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
       options={filteredChoices} multiple={true}
       getOptionLabel={o => (

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 { AgentRecord, AllergyCode, 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, useAgentRecords, useAllergyCodes, 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 { AgentRecord, AllergyCode, 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, Waitlist } from "@tellescope/types-client"
+import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, LoadingLinear, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, 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, useWaitlists, 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 WaitlistSearch = (props: Omit<GenericSearchProps<Waitlist>, 'filterKey'> & { filterKey?: string }) => {
+  const session = useSession()
+  const [, { addLocalElements }] = useWaitlists({ dontFetch: true })
+  return (
+    <ModelSearchInput filterKey="waitlist" {...props} 
+      searchAPI={session.api.waitlists.getSome}
+      onLoad={addLocalElements}
+    />
+  )
+}
+
 export const AgentRecordSearch = (props: Omit<GenericSearchProps<AgentRecord>, 'filterKey'> & { filterKey?: string }) => {
   const session = useSession()
   const [, { addLocalElements }] = useAgentRecords({ dontFetch: true })

package/src/state.tsx

@@ -98,6 +98,7 @@ import {
   IntegrationLog,
   EnduserEligibilityResult,
   AgentRecord,
+  Waitlist,
 } from "@tellescope/types-client"
 
 import {
@@ -363,6 +364,7 @@ const allergyCodesSlice = createSliceForList<AllergyCode, 'allergy_codes'>('alle
 const integrationLogsSlice = createSliceForList<IntegrationLog, 'integration_logs'>('integration_logs')
 const enduserEligibilityResultsSlice = createSliceForList<EnduserEligibilityResult, 'enduser_eligibility_results'>('enduser_eligibility_results')
 const agentRecordsSlice = createSliceForList<AgentRecord, 'agent_records'>('agent_records')
+const waitlistsSlice = createSliceForList<Waitlist, 'waitlists'>('waitlists')
 
 const roleBasedAccessPermissionsSlice = createSliceForList<RoleBasedAccessPermission, 'role_based_access_permissions'>('role_based_access_permissions')
 
@@ -455,6 +457,7 @@ export const sharedConfig = {
     suggested_contacts: suggestedContactsSlice.reducer,
     diagnosis_codes: diagnosisCodesSlice.reducer,
     allergy_codes: allergyCodesSlice.reducer,
+    waitlists: waitlistsSlice.reducer,
   },
 }
 
@@ -528,10 +531,13 @@ export interface LoadMoreFunctions<T> {
 
 export const INACTIVE_SYNC_INTERVAL_IN_MS = 30000
 export const DEFAULT_SYNC_INTERVAL_IN_MS  = 15000
+export const MEDIUM_SYNC_INTERAVL         = 10000
 export const FAST_SYNC_INTERVAL           = 5000
 
 export const lastActiveForSync = { at: new Date(0), hasFocus: true }
 
+export const lastDataSync = { current : { numResults: 0, at: new Date(0), from: new Date(0), latency: 0, duration: 0 } }
+
 export const useDataSync____internal = () => {
   const session = useSession()
   const lastFetch = React.useRef(new Date())
@@ -576,11 +582,31 @@ export const useDataSync____internal = () => {
         ...Object.values(loadTimings.current).filter(v => v > 999)
       )
 
+      const handleLoadedData = () => {
+        for (const handler of Object.values(handlers.current)) {
+          try {
+            handler?.()
+          } catch(err) { console.error(err) }
+        }
+      }
+
       if (lastFetch.current.getTime() + pollDurationInMS > Date.now()) {
         return
       }
 
-      session.sync({ from: lastFetch.current }).then(({ results }) => {
+      // ensure we don't miss updates due to latency
+      const from = new Date(lastFetch.current.getTime() - 1000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
+      lastFetch.current = new Date() // update before syncing, not after it returns
+
+      session
+      .sync({ from })
+      .then(({ results }) => {
+        lastDataSync.current = { 
+          numResults: results.length, at: lastFetch.current, from, 
+          latency: Date.now() - lastFetch.current.getTime(),
+          duration: pollDurationInMS,
+        }
+
         for (const r of results) {
           if (r.data === 'deleted') {
             if (!deleted.current[r.modelName]) {
@@ -599,14 +625,11 @@ export const useDataSync____internal = () => {
           }
         }
       })
-      .then(() => {
-        for (const handler of Object.values(handlers.current)) {
-          handler?.()
-        }
+      .then(handleLoadedData)
+      .catch(err => {
+        console.error('Sync error', err)
+        lastFetch.current = from // don't skip this interval yet
       })
-      .catch(console.error)
-
-      lastFetch.current = new Date()
     }, 1000)
 
     return () => { clearInterval(i) }
@@ -631,12 +654,31 @@ export const useDataSync____internal = () => {
   }, [])
 
   const setHandler = useCallback((key: string, handler: undefined | (() => void)) => {
+    // call handler when initially set in case results were loaded when there was no handler
+    if (!handlers.current[key] && handler) {
+      try {
+        // console.log("handle on add", key)
+        handler?.() 
+      } 
+      catch(err) { 
+        console.error(err) 
+      }
+    }
+
+    // console.log('setting handler', key)
     handlers.current[key] = handler
   }, [])
 
+  const removeHandler = useCallback((key: string, handler: () => void) => {
+    if (handlers.current[key] !== handler) return // if a handler was overwritten, don't remove it
+
+    // console.log('removing handler', key)
+    delete handlers.current[key]
+  }, [])
+
   return {
     setLoadTiming, 
-    setHandler,
+    setHandler, removeHandler,
     getLoaded, getDeleted,
     popLoaded, popDeleted,
   }
@@ -702,7 +744,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
   } & HookOptions<T>
 ): ListStateReturnType<T, ADD> => 
 {
-  const { setHandler, popDeleted, popLoaded } = useSyncContext() ?? {}
+  const { setHandler, popDeleted, popLoaded, removeHandler } = useSyncContext() ?? {}
   const { loadQuery, findOne, findByIds, addOne, addSome, updateOne, deleteOne } = apiCalls
   if (options?.refetchInMS !== undefined && options.refetchInMS < 5000) {
     throw new Error("refetchInMS must be greater than 5000")
@@ -790,7 +832,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     // context not provided
     if (!setHandler) return
 
-    setHandler(modelName, () => {
+    const handler = () => {
       if (state.status !== LoadingStatus.Loaded) return
       
       const deleted = popDeleted(modelName)
@@ -802,8 +844,12 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
       if (loaded?.length) {
         addLocalElements(loaded as any, { replaceIfMatch: true })
       }
-    })
-  }, [state.status, setHandler, addLocalElements, removeLocalElements, popDeleted, popLoaded])
+    }
+
+    setHandler(modelName, handler)
+
+    return () => { removeHandler(modelName, handler) }
+  }, [modelName, state.status, setHandler, removeHandler, addLocalElements, removeLocalElements, popDeleted, popLoaded])
 
   const findById: ListUpdateMethods<T, ADD>['findById'] = useCallback((id, options) => {
     if (!id) return undefined
@@ -980,7 +1026,7 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     const sortBy = loadOptions?.sortBy ?? options?.sortBy
 
     if (!loadQuery) return
-    if (options?.dontFetch) return
+    if (options?.dontFetch && !force) return
     const fetchKey = (loadFilter || sort || sortBy) ? JSON.stringify({ ...loadFilter, sort, sortBy }) + modelName : modelName
 
     if (didFetch(fetchKey, force, options?.refetchInMS)) return
@@ -2837,4 +2883,23 @@ export const useCalendarEventsForUser = (options={} as HookOptions<CalendarEvent
   }, [session, loadedRef, fetchEvents, addLocalElements])
 
   return [eventsLoading, { loadEvents, filtered }] as const
+}
+
+export const useWaitlists = (options={} as HookOptions<Waitlist>) => {
+  const session = useSession()
+
+  return useListStateHook('waitlists', useTypedSelector(s => s.waitlists), session, waitlistsSlice,
+    { 
+      loadQuery: session.api.waitlists.getSome,
+      findOne: session.api.waitlists.getOne,
+      findByIds: session.api.waitlists.getByIds,
+      addOne: session.api.waitlists.createOne,
+      addSome: session.api.waitlists.createSome,
+      deleteOne: session.api.waitlists.deleteOne,
+      updateOne: session.api.waitlists.updateOne,
+    },
+    { 
+      ...options,
+    },
+  )
 }

package/src/table.tsx

@@ -132,6 +132,7 @@ export type TableField <T> = {
   filterIsActive?: boolean,
   filterComponent?: React.ReactNode,
   allowWidthAdjustment?: boolean,
+  columnResizeZIndex?: number,
 }
 export interface TableHeaderProps<T extends Item> extends Styled, HorizontalPadded, SelectionPropsOptional {
   fields: TableField<T>[],
@@ -147,6 +148,7 @@ export interface TableHeaderProps<T extends Item> extends Styled, HorizontalPadd
   setLocalFilters: React.Dispatch<React.SetStateAction<LocalFilter[]>>,
   filterSuggestions: Record<string, string[]>,
   minColumnWidth?: number,
+  columnResizeZIndex?: number,
 }
 export const TableHeader = <T extends Item>({ 
   fields, 
@@ -167,6 +169,7 @@ export const TableHeader = <T extends Item>({
   setLocalFilters,
   filterSuggestions,
   minColumnWidth=75,
+  columnResizeZIndex=1000,
 } : TableHeaderProps<T>) => { 
   const [openFilter, setOpenFilter] = useState(-1)
   const [startX, setStartX] = useState(0)
@@ -341,7 +344,7 @@ export const TableHeader = <T extends Item>({
                   height: '30px', 
                   backgroundColor: '#22222266', 
                   cursor: 'col-resize', 
-                  zIndex: 1000,
+                  zIndex: columnResizeZIndex,
                   position: 'relative', right: '6px',
                 }} />
               </Draggable>
@@ -725,6 +728,7 @@ export interface TableProps<T extends Item> extends WithTitle, WithHeader<T>, Wi
   loadMoreOptions?: LoadMoreOptions<T>,
   refreshFilterSuggestionsKey?: number,
   minColumnWidth?: number,
+  columnResizeZIndex?: number,
 }
 export const Table = <T extends Item>({
   items,
@@ -775,10 +779,11 @@ export const Table = <T extends Item>({
   onReorder,
   virtualization,
   onExport,
-
+  
   sort,
   refreshFilterSuggestionsKey,
   minColumnWidth,
+  columnResizeZIndex,
 }: TableProps<T> & Styled) => {
   const sortingStorageKey = (memoryId ?? '') + 'sorting'
   const cachedSortString = read_local_storage(sortingStorageKey)
@@ -1045,6 +1050,7 @@ export const Table = <T extends Item>({
               : undefined
             }
             minColumnWidth={minColumnWidth}
+            columnResizeZIndex={columnResizeZIndex}
           />
         )}