@tellescope/react-components 1.206.0 → 1.208.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.206.0",
+  "version": "1.208.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.206.0",
-    "@tellescope/sdk": "^1.206.0",
-    "@tellescope/types-client": "^1.206.0",
-    "@tellescope/types-models": "^1.206.0",
-    "@tellescope/types-utilities": "^1.206.0",
-    "@tellescope/utilities": "^1.206.0",
-    "@tellescope/validation": "^1.206.0",
+    "@tellescope/constants": "^1.208.0",
+    "@tellescope/sdk": "^1.208.0",
+    "@tellescope/types-client": "^1.208.0",
+    "@tellescope/types-models": "^1.208.0",
+    "@tellescope/types-utilities": "^1.208.0",
+    "@tellescope/utilities": "^1.208.0",
+    "@tellescope/validation": "^1.208.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": "d806743ca9f51d8abb2464d25f4d093e3b58a55f",
+  "gitHead": "386150ae354f2879790b6dbf5d5064eca5015b83",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -20,6 +20,7 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   logoHeight?: number,
   language?: string,
   onChangeLanguage?: (l: string) => void,
+  paperMinHeight?: React.CSSProperties['minHeight'],
 } & Styled) => {
   // if context already is provided, no need to duplicate
   if (props.dontAddContext) return (
@@ -33,7 +34,7 @@ export const TellescopeFormContainer = ({ businessId, organizationIds, ...props
   )
 }
 
-const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight }) => {
+const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ paperMinHeight=575, children, language, onChangeLanguage, style, hideBg, backgroundColor, hideLogo, logoHeight }) => {
   const theme = useOrganizationTheme()
 
   const formContent = (
@@ -71,7 +72,7 @@ const TellescopeFormContainerWithTheme: typeof TellescopeFormContainer = ({ chil
   }
   return (
     <Flex flex={1} alignItems="center" justifyContent="center" style={{ backgroundColor: backgroundColor ?? theme.themeColor ?? '#ffffff', ...style }}>
-    <Paper flex elevation={3} style={{ marginTop: 50, marginBottom: 50, padding: 20, maxWidth: 650, minWidth: 250, minHeight: 575 }}>
+    <Paper flex elevation={3} style={{ marginTop: 50, marginBottom: 50, padding: 20, maxWidth: 650, minWidth: 250, minHeight: paperMinHeight }}>
       {formContent}
     </Paper>
     </Flex>
@@ -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>
 )
 
@@ -697,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}
     >

package/src/Forms/hooks.tsx

@@ -9,7 +9,7 @@ import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -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: ''! } ] : [] }])
@@ -1299,6 +1297,12 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       if (submitRedirectURL) {
         (window?.top ?? window).location.href = append_current_utm_params(submitRedirectURL);
       }
+      if (form?.redirectToBookedAppointmentOnSubmit) {
+        const url = read_local_storage('tellescope_last_booking_page_join_link')
+        if (url) {
+          (window?.top ?? window).location.href = append_current_utm_params(url);
+        }
+      }
     } catch(err: any) {
       console.error(err)
       setSubmitErrorMessage(err?.message ?? 'An error occurred')

package/src/Forms/inputs.tsx

@@ -4,7 +4,7 @@ import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormCo
 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, emit_gtm_event, 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 { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
 import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -2900,7 +2900,11 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
       }
       if (m?.data?.type === 'Confirmation') {
         setConfirming(true)
-      } else {
+      } 
+      if (m?.data?.type === 'Join Link' && m?.data?.link) {
+        update_local_storage('tellescope_last_booking_page_join_link', m.data.link)
+      }
+      else {
         setConfirming(false)
       }
     }

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

@@ -282,6 +282,7 @@ export type TitleComponentType = React.JSXElementConstructor<{ title?: React.Rea
 export interface ScrollingListProps <T extends { id: string | number }> extends Styled {
   items: T[],
   Item: React.JSXElementConstructor<{ item: T, index: number }>
+  renderItem?: (p: { item: T, index: number }) => React.ReactElement,
   title?: React.ReactNode,
   header?: React.ReactNode,
   emptyText?: React.ReactNode,
@@ -317,6 +318,7 @@ export const ScrollingList = <T extends { id: string | number }>({
   doneLoading,
   loadMore,
   Item,
+  renderItem,
   TitleComponent,
   titleActionsComponent,
   style,
@@ -410,7 +412,8 @@ export const ScrollingList = <T extends { id: string | number }>({
             >
               {({ data, index, style }) => (
                 <div style={style}>
-                  <Item key={data[index].id} item={data[index]} index={index} />
+                  {renderItem ? renderItem({ item: data[index], index }) : <Item key={data[index].id} item={data[index]} index={index} />}
+
                   {index === items.length -1 && loadMore && !doneLoading?.() &&
                     <div style={{ textAlign: 'center' }}>
                     <LoadingButton submitText="Load Older Data" submittingText="Loading..."
@@ -424,7 +427,7 @@ export const ScrollingList = <T extends { id: string | number }>({
             </FixedSizeList>
         ) : (
           items.map((item, index) => (
-            <Item key={item.id} item={item} index={index} />
+            renderItem ? renderItem({ item, index }) : <Item key={item.id} item={item} index={index} />
           ))
         )
       }

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()
 

package/src/table.tsx

@@ -769,6 +769,7 @@ export interface TableProps<T extends Item> extends WithTitle, WithHeader<T>, Wi
   columnResizeZIndex?: number,
   rowHeight?: number,
   headerHeight?: number,
+  onChangeColumnSorting?: (sorting: Sorting[]) => void,
 }
 export const Table = <T extends Item>({
   items,
@@ -827,6 +828,7 @@ export const Table = <T extends Item>({
   refreshFilterSuggestionsKey,
   minColumnWidth,
   columnResizeZIndex,
+  onChangeColumnSorting,
 }: TableProps<T> & Styled) => {
   const sortingStorageKey = (memoryId ?? '') + 'sorting'
   const cachedSortString = read_local_storage(sortingStorageKey)
@@ -883,10 +885,11 @@ export const Table = <T extends Item>({
   )
 
   useEffect(() => {
-    if (!memoryId) return
-    
+    onChangeColumnSorting?.(sorting)
+
+    if (!memoryId) return 
     update_local_storage(sortingStorageKey, JSON.stringify(sorting))
-  }, [sorting, memoryId])
+  }, [sorting, memoryId, onChangeColumnSorting])
 
   // sorts in place
   const applySorting = useCallback((items: T[]) => {