@tellescope/react-components 1.153.1 → 1.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.153.1",
+  "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.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",
+    "@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": "0ad06bdf4ec4ea7871d68bedfc10fd1154fc742b",
+  "gitHead": "d96f27c5787398546a644b88fe6ad75208836bad",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1,6 +1,6 @@
 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"
@@ -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}
       />
@@ -1841,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
@@ -1872,6 +1875,16 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
       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 }}
+          />
+        ))
+      }
     />
   )
 }
@@ -2861,6 +2874,12 @@ 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
@@ -2869,36 +2888,55 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
     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 }
+      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)
-      })
+            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])
+  }, [session, query, field?.options?.dataSource])
 
   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) => (
@@ -2906,6 +2944,15 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
           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 }}
+          />
+        ))
+      }
     /> 
   )
 }
@@ -2939,9 +2986,13 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
   }, [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) => (
@@ -2949,6 +3000,15 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
           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/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, 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 { 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,17 @@ 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 })

package/src/state.tsx

@@ -94,6 +94,7 @@ import {
   CallHoldQueue,
   SuggestedContact,
   DiagnosisCode,
+  AllergyCode,
 } from "@tellescope/types-client"
 
 import {
@@ -355,6 +356,7 @@ const messageTemplateSnippetsSlice = createSliceForList<MessageTemplateSnippet,
 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')
 
@@ -443,6 +445,7 @@ export const sharedConfig = {
     call_hold_queues: callHoldQueuesSlice.reducer,
     suggested_contacts: suggestedContactsSlice.reducer,
     diagnosis_codes: diagnosisCodesSlice.reducer,
+    allergy_codes: allergyCodesSlice.reducer,
   },
 }
 
@@ -1259,6 +1262,24 @@ 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()