@tellescope/react-components 1.153.1 → 1.155.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.153.1",
+  "version": "1.155.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.155.0",
+    "@tellescope/sdk": "^1.155.0",
+    "@tellescope/types-client": "^1.155.0",
+    "@tellescope/types-models": "^1.155.0",
+    "@tellescope/types-utilities": "^1.155.0",
+    "@tellescope/utilities": "^1.155.0",
+    "@tellescope/validation": "^1.155.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": "be943fbead3f47347ebff8ddc8f3e21c789490a4",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -254,7 +254,7 @@ export const QuestionForField = ({
           <Height field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
         : field.type === 'Redirect' ? (
-          <Redirect groupId={groupId} groupInsance={groupInstance} submit={submit} field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <Redirect responses={responses} enduser={enduser} groupId={groupId} groupInsance={groupInstance} submit={submit} field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
         : field.type === 'Related Contacts' ? (
           <RelatedContacts field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -601,7 +601,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
 }
 
 export const DEFAULT_THANKS_MESSAGE = "Your response was successfully recorded";
-const ThanksMessage = ({ 
+export const ThanksMessage = ({ 
   thanksMessage, 
   htmlThanksMessage,
   showRestartAtEnd,

package/src/Forms/hooks.tsx

@@ -99,6 +99,9 @@ export const default_label_for_compound_logic = (f: CompoundFilter<string>): str
         const value = f.condition[key]
         if (value && typeof value === 'object') {
           const objectKey = Object.keys(value)[0]
+          if (objectKey === '$ne') {
+            return `${key} Does Not Equal ${value[objectKey as keyof typeof value]}`
+          }
           if (objectKey === '$gt') {
             return `${key} Greater Than ${value[objectKey as keyof typeof value]}`
           }

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 }}
+          />
+        ))
+      }
     />
   )
 }
@@ -2722,7 +2735,7 @@ export const HeightInput = ({ field, value={} as any, onChange, ...props }: Form
   </Grid>
 )
 
-export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, submit, value={} as any, onChange, ...props }: FormInputProps<'Redirect'>) => {
+export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, submit, value={} as any, onChange, responses, enduser, ...props }: FormInputProps<'Redirect'>) => {
   const session = useResolvedSession()
 
   let eId = ''
@@ -2730,6 +2743,33 @@ export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, su
     eId = new URL(window.location.href).searchParams.get('eId') || ''
   } catch(err) {}
 
+  const email = (
+    responses?.find(r => r.intakeField === 'email')?.answer?.value
+  || enduser?.email 
+  || session.userInfo.email
+  )
+  const phone = (
+    responses?.find(r => r.intakeField === 'phone')?.answer?.value
+  || enduser?.phone
+  || session.userInfo.phone
+  )
+  const fname = (
+    responses?.find(r => r.intakeField === 'fname')?.answer?.value
+  || enduser?.fname
+  || session.userInfo?.fname
+  )
+  const lname = (
+    responses?.find(r => r.intakeField === 'lname')?.answer?.value
+  || enduser?.lname
+  || session.userInfo?.lname
+  )
+  const state = (
+     responses?.find(r => r.intakeField === 'state')?.answer?.value
+  || (responses?.find(r => r.intakeField === 'Address')?.answer?.value as any)?.state
+  || enduser?.state
+  || (session.userInfo as Enduser)?.state
+  )
+
   useEffect(() => {
     if (session.type === 'user') { return }
 
@@ -2738,7 +2778,15 @@ export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, su
       .finally(() => {
         if (!field.options?.redirectExternalUrl) { return }
 
-        window.location.href = replace_enduser_template_values(field.options.redirectExternalUrl, session.userInfo as any)
+        window.location.href = (
+          replace_enduser_template_values(
+            field.options.redirectExternalUrl, 
+            {
+              ...session.userInfo as any,
+              email, fname, lname, state, phone, 
+            }
+          )
+        )
       })
       .catch(console.error)
       
@@ -2772,7 +2820,7 @@ export const RedirectInput = ({ groupId, groupInsance, formResponseId, field, su
       })
     ))
     .catch(console.error)
-  }, [session])
+  }, [session, email, fname, lname, state, phone])
 
   if (session.type === 'user') {
     return (
@@ -2861,6 +2909,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 +2923,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 +2979,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 +3021,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 +3035,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()