@tellescope/react-components 1.153.0 → 1.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.153.0",
+  "version": "1.154.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.153.0",
-    "@tellescope/sdk": "^1.153.0",
-    "@tellescope/types-client": "^1.153.0",
-    "@tellescope/types-models": "^1.153.0",
-    "@tellescope/types-utilities": "^1.153.0",
-    "@tellescope/utilities": "^1.153.0",
-    "@tellescope/validation": "^1.153.0",
+    "@tellescope/constants": "^1.154.0",
+    "@tellescope/sdk": "^1.154.0",
+    "@tellescope/types-client": "^1.154.0",
+    "@tellescope/types-models": "^1.154.0",
+    "@tellescope/types-utilities": "^1.154.0",
+    "@tellescope/utilities": "^1.154.0",
+    "@tellescope/validation": "^1.154.0",
     "@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": "9433f642d09f85275831104fbdf1dd8ddc8b7a66",
+  "gitHead": "d96f27c5787398546a644b88fe6ad75208836bad",
   "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, AllergiesInput, 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"
@@ -169,6 +169,7 @@ export const QuestionForField = ({
   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)
 
@@ -246,6 +247,9 @@ export const QuestionForField = ({
         : 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} />
         )
@@ -435,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
@@ -449,6 +454,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
       return onSuccess?.({} as any)
     } 
 
+
     await submit({ 
       onSuccess,
       ...options,
@@ -461,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])
 
@@ -551,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

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"
 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 { Autocomplete, Box, Button, Checkbox, Chip, 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 { 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';
@@ -1447,6 +1447,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
   const [isCheckout, setIsCheckout] = useState(false)
   const [stripePromise, setStripePromise] = useState<ReturnType<typeof loadStripe>>()
   const [, { findById: findProduct }] = useProducts({ dontFetch: true })
+  const [answertext, setAnswertext] = useState('')
 
   const fetchRef = useRef(false)
   useEffect(() => {
@@ -1457,12 +1458,13 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     fetchRef.current = true
 
     session.api.form_responses.stripe_details({ fieldId: field.id })
-    .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout }) => {
+    .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout, answerText }) => {
       setIsCheckout(!!isCheckout)
       setClientSecret(clientSecret)
       setStripePromise(loadStripe(publishableKey, { stripeAccount }))
       setBusinessName(businessName)
       setCustomerId(customerId)
+      setAnswertext(answerText || '')
     })
     .catch(console.error)
   }, [session, value, field.id])
@@ -1488,7 +1490,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     <EmbeddedCheckoutProvider stripe={stripePromise}
       options={{ 
         clientSecret, 
-        onComplete: () => onChange('Completed checkout', field.id),        
+        onComplete: () => onChange(answertext || 'Completed checkout', field.id),        
       }}
     >
       <EmbeddedCheckout />
@@ -1498,7 +1500,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     <Elements stripe={stripePromise} options={{
       clientSecret,
     }}>
-      <StripeForm businessName={businessName} onSuccess={() => onChange('Saved card details', field.id)} 
+      <StripeForm businessName={businessName} onSuccess={() => onChange(answertext || 'Saved card details', field.id)} 
         cost={cost}
         field={field}
       />
@@ -1661,7 +1663,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 +1699,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 +1731,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 +1826,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) {
@@ -1814,6 +1843,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
   if (!doneLoading) return <LinearProgress />
   return (
     <Autocomplete id={field.id} freeSolo={false}
+      componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
       options={filteredChoices} multiple={true}
       getOptionLabel={o => (
         Array.isArray(o) // edge case
@@ -1842,7 +1872,19 @@ 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 }} />}
+      // use custom Chip to ensure very long entries break properly (whitespace: normal)
+      renderTags={(value, getTagProps) =>
+        value.map((value, index) => (
+          <Chip
+            label={<Typography style={{whiteSpace: 'normal'}}>{Array.isArray(value) ? '' : label_for_database_record(field, value)}</Typography>}
+            {...getTagProps({ index })}
+            sx={{height:"100%", py: 0.5 }}
+          />
+        ))
+      }
     />
   )
 }
@@ -2832,49 +2874,141 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
   const [query, setQuery] = useState('')
   const [results, setResults] = useState<{ code: string, display: string }[]>([])
 
+  // if two allergy questions shown in a row, reset state
+  useEffect(() => {
+    setQuery('')
+    setResults([])
+  }, [field.id])
+
   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 }) => {
+      if (field.options?.dataSource === CANVAS_TITLE) {
+        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)
+        })
+      } else {
+        session.api.allergy_codes.getSome({ search: { query }})
+        .then(results => {
+          const deduped: typeof results = []
+          for (const v of results) {
+            if (deduped.find(d => d.display === v.display)) { continue }
+
+            deduped.push(v)
+          }
+          setResults(deduped)
+        })
+      }
+
+      
+    }, 200)
+
+    return () => { clearTimeout(t) }
+  }, [session, query, field?.options?.dataSource])
+
+  return (
+    <Autocomplete multiple value={value || []} options={results} style={{ marginTop: 5 }}
+      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+      onChange={(e, v) => {
+        if (!v) { return }
+        onChange(v, field.id)
+        setResults([])
+      }}
+      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..."
+        />
+      )}
+      renderTags={(value, getTagProps) =>
+        value.map((value, index) => (
+          <Chip
+            label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
+            {...getTagProps({ index })}
+            sx={{height:"100%", py: 0.5 }}
+          />
+        ))
+      }
+    /> 
+  )
+}
+
+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 = []
-        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) {
+        for (const v of codes) {
           if (deduped.find(d => d.display === v.display)) { continue }
 
           deduped.push(v)
         }
         setResults(deduped)
       })
-    }, 99)
+    }, 200)
 
     return () => { clearTimeout(t) }
   }, [session, query])
 
   return (
-    <Autocomplete multiple value={value || []} options={[...results, ...(value || [])]} style={{ marginTop: 5 }}
+    <Autocomplete multiple value={value || []} options={results} style={{ marginTop: 5 }}
       noOptionsText={query.length ? 'No results found' : 'Type to start search'}
-      onChange={(e, v) => v && onChange(v, field.id)}
+      onChange={(e, v) => {
+        if (!v) { return }
+        onChange(v, field.id)
+        setResults([])
+      }}
       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..."
+          required={!field.isOptional} size="small" label="" placeholder="Search conditions..."
         />
       )}
+      renderTags={(value, getTagProps) =>
+        value.map((value, index) => (
+          <Chip
+            label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
+            {...getTagProps({ index })}
+            sx={{height:"100%", py: 0.5 }}
+          />
+        ))
+      }
     /> 
   )
 }

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 { 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, 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 { SxProps } from "@mui/material"
 import { AccessPermissions } from "@tellescope/types-models"
 
@@ -618,6 +618,28 @@ export const SuggestedContactSearch = (props: Omit<GenericSearchProps<SuggestedC
   )
 }
 
+export const AllergyCodeSearch = (props: Omit<GenericSearchProps<AllergyCode>, 'filterKey'> & { filterKey?: string }) => {
+  const session = useSession()
+  const [, { addLocalElements }] = useAllergyCodes({ dontFetch: true })
+  return (
+    <ModelSearchInput filterKey="allergy-code" {...props} 
+      searchAPI={session.api.allergy_codes.getSome}
+      onLoad={addLocalElements}
+    />
+  )
+}
+
+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,8 @@ import {
   FaxLog,
   CallHoldQueue,
   SuggestedContact,
+  DiagnosisCode,
+  AllergyCode,
 } from "@tellescope/types-client"
 
 import {
@@ -107,7 +109,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 +355,8 @@ 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 allergyCodesSlice = createSliceForList<AllergyCode, 'allergy_codes'>('allergy_codes')
 
 const roleBasedAccessPermissionsSlice = createSliceForList<RoleBasedAccessPermission, 'role_based_access_permissions'>('role_based_access_permissions')
 
@@ -440,6 +444,8 @@ export const sharedConfig = {
     fax_logs: faxLogsSlice.reducer,
     call_hold_queues: callHoldQueuesSlice.reducer,
     suggested_contacts: suggestedContactsSlice.reducer,
+    diagnosis_codes: diagnosisCodesSlice.reducer,
+    allergy_codes: allergyCodesSlice.reducer,
   },
 }
 
@@ -1256,6 +1262,42 @@ export const usePortalBrandings = (options={} as HookOptions<PortalBranding>) =>
     },
   )
 }
+export const useAllergyCodes = (options={} as HookOptions<AllergyCode>) => {
+  const session = useResolvedSession()
+
+  return useListStateHook('allergy_codes', useTypedSelector(s => s.allergy_codes), session, allergyCodesSlice,
+    { 
+      loadQuery: session.api.allergy_codes.getSome,
+      findOne: session.api.allergy_codes.getOne,
+      findByIds: session.api.allergy_codes.getByIds,
+      addOne: session.api.allergy_codes.createOne,
+      addSome: session.api.allergy_codes.createSome,
+      deleteOne: session.api.allergy_codes.deleteOne,
+      updateOne: session.api.allergy_codes.updateOne,
+    },
+    { 
+      ...options,
+    },
+  )
+}
+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()