@tellescope/react-components 1.205.0 → 1.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.205.0",
+  "version": "1.207.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.205.0",
-    "@tellescope/sdk": "^1.205.0",
-    "@tellescope/types-client": "^1.205.0",
-    "@tellescope/types-models": "^1.205.0",
-    "@tellescope/types-utilities": "^1.205.0",
-    "@tellescope/utilities": "^1.205.0",
-    "@tellescope/validation": "^1.205.0",
+    "@tellescope/constants": "^1.207.0",
+    "@tellescope/sdk": "^1.207.0",
+    "@tellescope/types-client": "^1.207.0",
+    "@tellescope/types-models": "^1.207.0",
+    "@tellescope/types-utilities": "^1.207.0",
+    "@tellescope/utilities": "^1.207.0",
+    "@tellescope/validation": "^1.207.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,11 +80,11 @@
     "yup": "^0.32.10"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "2207d17c9959fcef3194f08245f8890817739b4e",
+  "gitHead": "ddf48910e1681e4fc241e85af98f4c6a0f3f42bb",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/form_responses.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { Divider, Grid, Typography } from "@mui/material"
 import { Enduser, FormResponse } from "@tellescope/types-client"
 import { form_response_value_to_string, formatted_date, getOrgnizationLogoURL, remove_script_tags, user_display_name } from "@tellescope/utilities"
-import { DownloadFileIconButton, LabeledIconButton, SecureImage, useEndusers, useOrganization, useResolvedSession, useSession, useUsers, value_is_loaded } from "../index"
+import { DownloadFileIconButton, ImageProps, LabeledIconButton, SecureImage, useEndusers, useOrganization, useResolvedSession, useSession, useUsers, value_is_loaded } from "../index"
 import CloseIcon from '@mui/icons-material/Close';
 import { DatabaseSelectResponse, FormResponseAnswerAddress, FormResponseValueAnswer } from "@tellescope/types-models"
 import { Image } from "../layout"
@@ -64,6 +64,7 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
                 : (
                   <SecureImage secureName={a.value.secureName} onImageClick={onImageClick}
                     style={{ maxHeight: 400, maxWidth: 400 }}
+                    crossOrigin="anonymous"
                   />
                 )
               }
@@ -181,7 +182,7 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
   )
 )
 
-export const OrganizationLogo = () => {
+export const OrganizationLogo = ({ crossOrigin } : { crossOrigin?: ImageProps['crossOrigin'] }) => {
   const [organizationLoading] = useOrganization()
   
   if (!value_is_loaded(organizationLoading)) return null
@@ -190,7 +191,7 @@ export const OrganizationLogo = () => {
   const logoURL = getOrgnizationLogoURL(organizationLoading.value)
 
   return (
-    <Image 
+    <Image crossOrigin={crossOrigin}
       src={logoURL} 
       alt=""
       maxWidth={400}
@@ -199,12 +200,12 @@ export const OrganizationLogo = () => {
   )
 }
 
-export const ResolveOrganizationLogo = ({ logoURL } : { logoURL?: string }) => {
+export const ResolveOrganizationLogo = ({ logoURL, crossOrigin } : { logoURL?: string, crossOrigin?: ImageProps['crossOrigin'] }) => {
   const session = useResolvedSession()
 
   if (logoURL) {
     return (
-      <Image 
+      <Image crossOrigin={crossOrigin}
         src={logoURL} 
         alt=""
         maxWidth={400}
@@ -215,7 +216,7 @@ export const ResolveOrganizationLogo = ({ logoURL } : { logoURL?: string }) => {
 
   if (session.type === 'enduser') return null
 
-  return <OrganizationLogo />
+  return <OrganizationLogo crossOrigin={crossOrigin} />
 }
 
 interface FormResponse_T {
@@ -245,7 +246,7 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
       <div style={{ textAlign: 'center' }}>
         {!hideHeader && 
           <>
-          <ResolveOrganizationLogo logoURL={logoURL} />
+          <ResolveOrganizationLogo logoURL={logoURL} crossOrigin="anonymous" />
 
           <h2 style={{
             fontSize: 20,

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, 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"
@@ -35,6 +35,7 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
 
 const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight }) => {
   const theme = useOrganizationTheme()
+  console.log('logoHeight',logoHeight)
 
   const formContent = (
     <Flex flex={1} column>
@@ -96,12 +97,13 @@ export interface TellescopeFormProps extends ReturnType<typeof useTellescopeForm
   enduser?: Partial<Enduser>,
   groupId?: string,
   groupInstance?: string,
+  logoHeight?: number,
 }
 
 const LOGO_HEIGHT = 40
 export const TellescopeForm = (props : TellescopeFormProps & Styled & { hideBg?: boolean, theme?: OrganizationTheme, inputStyle?: React.CSSProperties }) => (
   <WithOrganizationTheme>
-    <TellescopeFormWithContext {...props} /> 
+    <TellescopeFormWithContext {...props} logoHeight={props?.logoHeight || props?.form?.customization?.logoHeight} /> 
   </WithOrganizationTheme>
 )
 
@@ -137,6 +139,7 @@ export const QuestionForField = ({
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
+  AddToDatabase,
 } : {
   spacing?: number,
   form?: Form,
@@ -154,6 +157,7 @@ export const QuestionForField = ({
   uploadingFiles: { fieldId: string }[]
   setUploadingFiles: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
+  AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
 } & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
@@ -325,6 +329,7 @@ export const QuestionForField = ({
           <DatabaseSelect field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Database Select'>} 
             onDatabaseSelect={handleDatabaseSelect}
             responses={responses} form={form}
+            AddToDatabase={AddToDatabase}
           />
         )
         : field.type === 'Medications' ? (
@@ -332,6 +337,7 @@ export const QuestionForField = ({
         )
         : field.type === 'Insurance' ? (
           <Insurance field={field} value={value.answer.value as any} form={form}
+            onDatabaseSelect={handleDatabaseSelect}
             enduser={enduser} responses={responses} // for filtering insurers by state
             onChange={(v, fieldId) => (onFieldChange as ChangeHandler<'Insurance'>)({
               ...v,
@@ -381,6 +387,7 @@ export const QuestionForField = ({
                   questionGroupSize={field.options?.subFields?.length}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
+                  AddToDatabase={AddToDatabase}
                 />
               </Flex>
             )
@@ -692,6 +699,7 @@ const TellescopeFormWithContext: typeof TellescopeForm = (props) => {
   return (
     <TellescopeFormContainer style={props.style} dontAddContext 
       hideBg={props.hideBg || props.form?.customization?.hideBg} 
+      logoHeight={props.logoHeight}
       backgroundColor={props.backgroundColor}
       hideLogo={props?.customization?.hideLogo}
     >
@@ -918,6 +926,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   updatedAt?: Date,
   otherEnduserIds?: string[],
   onBulkErrors?: (errors: { enduserId: string, message: string }[]) => void,
+  AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
 }> = ({
   customInputs, 
   submitErrorMessage,
@@ -969,6 +978,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   groupId,
   groupInstance,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  AddToDatabase,
   ...props 
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
@@ -1051,6 +1061,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   groupId={groupId} groupInstance={groupInstance}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
+                  AddToDatabase={AddToDatabase}
                 />
               </Flex>
             </Flex>

package/src/Forms/hooks.tsx

@@ -653,9 +653,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                         ? (
                             (f.options?.default && !isNaN(parseInt(f.options.default)))
                               ? parseInt(f.options.default)
-                              : f.isOptional 
-                                ? undefined
-                                : (f.options?.from || 1)
+                              : undefined // shows no selection on slider
                           )
                         : f.type === 'Related Contacts'
                           ? (f.isOptional ? [] : [{ relationships: f?.options?.relatedContactTypes?.length === 1 ? [{ type: f.options.relatedContactTypes[0] as EnduserRelationship['type'], id: ''! } ] : [] }])

package/src/Forms/inputs.tsx

@@ -532,10 +532,10 @@ export const NumberInput = ({ field, value, onChange, form, ...props }: FormInpu
   )
 }
 
-export const InsuranceInput = ({ field, value, onChange, form, responses, enduser, ...props }: FormInputProps<'Insurance'>) => {
+export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form, responses, enduser, ...props }: FormInputProps<'Insurance'>) => {
   const session = useResolvedSession()
 
-  const [payers, setPayers] = useState<{ id: string, name: string, type?: string, state?: string }[]>([])
+  const [payers, setPayers] = useState<{ id: string, name: string, databaseRecord?: DatabaseRecord, type?: string, state?: string }[]>([])
   const [query, setQuery] = useState('')
 
   const addressQuestion = useMemo(() => responses?.find(r => {
@@ -567,6 +567,7 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
         name: c.values.find(v => v.label?.trim()?.toLowerCase() === 'name')?.value?.toString() || '',
         state: c.values.find(v => v.label?.trim()?.toLowerCase() === 'state')?.value?.toString() || '',
         type: c.values.find(v => v.label?.trim()?.toLowerCase() === 'type')?.value?.toString() || '',
+        databaseRecord: c,
       }))
       .filter(c => !c.state || !state || (c.state === state))
     ))
@@ -613,6 +614,11 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
             : (e, v) => {
               if (v) { setQuery(v) }
 
+              const databaseRecord = payers.find(p => p.name === v)?.databaseRecord
+              if (databaseRecord) {
+                onDatabaseSelect?.([databaseRecord])
+              }
+
               onChange({ 
                 ...value, 
                 payerName: v || '',
@@ -1864,7 +1870,18 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     })
   }, [session, field, databaseId, renderCount])
 
+  const addChoice = useCallback((record: DatabaseRecord) => {
+    if (!choicesForDatabase[databaseId]) {
+      choicesForDatabase[databaseId] = { 
+        done: false,
+        records: [],
+      }
+    }
+    choicesForDatabase[databaseId].records!.push(record)
+  }, [choicesForDatabase, databaseId])
+
   return {
+    addChoice,
     doneLoading: choicesForDatabase[databaseId]?.done ?? false,
     choices: [
       ...choicesForDatabase[databaseId]?.records ?? [],
@@ -1915,11 +1932,17 @@ const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) =
   return []
 }
 
-export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabaseSelect, responses, size, disabled }: FormInputProps<'Database Select'> & {
+export interface AddToDatabaseProps {
+  databaseId: string,
+  onAdd: (record: DatabaseRecord) => void
+}
+
+export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onChange, onDatabaseSelect, responses, size, disabled }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
+  AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
 }) => {
   const [typing, setTyping] = useState('')
-  const { choices, doneLoading } = useDatabaseChoices({ 
+  const { addChoice, choices, doneLoading } = useDatabaseChoices({ 
     databaseId: field.options?.databaseId,
     field,
     otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
@@ -2010,6 +2033,7 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
 
   if (!doneLoading) return <LinearProgress />
   return (
+    <>
     <Autocomplete id={field.id} freeSolo={false} size={size}
       componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
       options={filteredChoices} multiple={true}
@@ -2022,7 +2046,11 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
       disabled={disabled}
       onChange={(_, v) => {
         if (v.length && onDatabaseSelect) {
-          onDatabaseSelect(v)
+          onDatabaseSelect(
+            field.options?.radio
+              ? [v[v.length - 1]] // if radio, only last selected
+              : v
+          )
         }
         return onChange(
           (
@@ -2055,6 +2083,11 @@ export const DatabaseSelectInput = ({ field, value: _value, onChange, onDatabase
         ))
       }
     />
+
+    {AddToDatabase && field?.options?.allowAddToDatabase && (
+      <AddToDatabase databaseId={field.options?.databaseId!} onAdd={addChoice} />
+    )}
+    </>
   )
 }
 

package/src/displays.tsx

@@ -8,6 +8,7 @@ import {
   value_is_loaded,
   useUsers,
   convertHEIC,
+  ImageProps,
 } from "./index"
 
 import { Avatar, AvatarProps, Styled } from "./mui"
@@ -72,6 +73,7 @@ export const SecureImage = ({ secureName, placeholder, onImageClick, ...props }
   secureName: string, 
   alt?: string,
   onImageClick?: (args: { src: string }) => void,
+  crossOrigin?: ImageProps['crossOrigin'],
 } & ImageDimensions & Styled) => {
   const loadedImage = useFileForSecureName({ secureName })
 

package/src/inputs_shared.tsx

@@ -9,6 +9,7 @@ import { AgentRecord, AllergyCode, AppointmentBookingPage, AppointmentLocation,
 import { Button, Checkbox, Flex, HoverPaper, LoadingButton, LoadingData, ScrollingList, SearchTextInput, Typography, useAgentRecords, useAllergyCodes, useAppointmentBookingPages, useAppointmentLocations, useAutomationTriggers, useCalendarEventTemplates, useCallHoldQueues, useChatRooms, useDatabaseRecords, useDatabases, useDiagnosisCodes, useEnduserCustomTypes, 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, ListOfStringsWithQualifier } from "@tellescope/types-models"
+import { phoneValidator } from "@tellescope/validation"
 
 export type FilterV2 = Record<string, any>
 export type FiltersV2 = Record<string, FilterV2>
@@ -885,7 +886,22 @@ export const EnduserSearch = (props: Omit<GenericSearchProps<Enduser>, 'filterKe
   if (((session.userInfo as any)?.access as AccessPermissions)?.users?.read === ALL_ACCESS && !value_is_loaded(usersLoading)) return null
   return (
     <ModelSearchInput filterKey="endusers" {...props} 
-      searchAPI={session.api.endusers.getSome}
+      searchAPI={async ({ search }) => {
+        // handle case of formatted phone number in search bar by parsing to standard phone format and searching explicitly by phone
+        // in this case, also search by generic search term in case user is intending to search by something else (e.g. externalId)
+        try {
+          const phone = phoneValidator.validate()(search.query)
+          if (phone) {
+            return (
+              await Promise.all([
+                session.api.endusers.getSome({ filter: { phone }}),
+                session.api.endusers.getSome({ search }),
+              ])
+            ).flatMap(v => v)
+          }
+        } catch(err) {}
+        return session.api.endusers.getSome({ search })
+      }}
       onLoad={addLocalElements}
       attachSearchableFields={t => {
         const users = t.assignedTo?.map(userId => findUser(userId, { batch: true })).filter(u => u) as User[]

package/src/layout.tsx

@@ -41,9 +41,10 @@ export interface ImageProps extends ImageDimensions, Styled {
   src: string,
   alt?: string,
   onClick?: () => void,
+  crossOrigin?: 'anonymous' | 'use-credentials',
 }
-export const Image = ({ src, alt, style, onClick, ...props }: ImageProps) => (
-  <img src={src} alt={alt} onClick={onClick} style={{ cursor: !!onClick ? 'pointer' : undefined, ...props, ...style }} />
+export const Image = ({ src, alt, style, onClick, crossOrigin, ...props }: ImageProps) => (
+  <img crossOrigin={crossOrigin} src={src} alt={alt} onClick={onClick} style={{ cursor: !!onClick ? 'pointer' : undefined, ...props, ...style }} />
 )
 
 export interface VideoProps extends Styled {

package/src/state.tsx

@@ -99,6 +99,7 @@ import {
   EnduserEligibilityResult,
   AgentRecord,
   Waitlist,
+  AIConversation,
 } from "@tellescope/types-client"
 
 import {
@@ -366,6 +367,7 @@ const integrationLogsSlice = createSliceForList<IntegrationLog, 'integration_log
 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 aiConversationsSlice = createSliceForList<AIConversation, 'ai_conversations'>('ai_conversations')
 
 const roleBasedAccessPermissionsSlice = createSliceForList<RoleBasedAccessPermission, 'role_based_access_permissions'>('role_based_access_permissions')
 
@@ -374,6 +376,7 @@ const userLogsSlice = createSliceForList<UserLog, 'user_logs'>('user_logs')
 
 export const sharedConfig = {
   reducer: { 
+    ai_conversations: aiConversationsSlice.reducer,
     agent_records: agentRecordsSlice.reducer,
     enduser_eligibility_results: enduserEligibilityResultsSlice.reducer,
     integration_logs: integrationLogsSlice.reducer,
@@ -1312,6 +1315,25 @@ export const useEnduserEligibilityResults = (options={} as HookOptions<EnduserEl
   )
 }
 
+export const useAIConversations = (options={} as HookOptions<AIConversation>) => {
+  const session = useSession()
+
+  return useListStateHook('ai_conversations', useTypedSelector(s => s.ai_conversations), session, aiConversationsSlice,
+    { 
+      loadQuery: session.api.ai_conversations.getSome,
+      findOne: session.api.ai_conversations.getOne,
+      findByIds: session.api.ai_conversations.getByIds,
+      addOne: session.api.ai_conversations.createOne,
+      addSome: session.api.ai_conversations.createSome,
+      deleteOne: session.api.ai_conversations.deleteOne,
+      updateOne: session.api.ai_conversations.updateOne,
+    },
+    { 
+      ...options,
+    },
+  )
+}
+
 export const useAgentRecords = (options={} as HookOptions<AgentRecord>) => {
   const session = useSession()