@tellescope/react-components 1.204.2 → 1.206.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.204.2",
+  "version": "1.206.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.204.2",
-    "@tellescope/sdk": "^1.204.2",
-    "@tellescope/types-client": "^1.204.2",
-    "@tellescope/types-models": "^1.204.2",
-    "@tellescope/types-utilities": "^1.204.2",
-    "@tellescope/utilities": "^1.204.2",
-    "@tellescope/validation": "^1.204.2",
+    "@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",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,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": "375efe3ae17613832fc10b212b0c3d2fce0a31cd",
+  "gitHead": "d806743ca9f51d8abb2464d25f4d093e3b58a55f",
   "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"
@@ -137,6 +137,7 @@ export const QuestionForField = ({
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
+  AddToDatabase,
 } : {
   spacing?: number,
   form?: Form,
@@ -154,6 +155,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 +327,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 +335,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 +385,7 @@ export const QuestionForField = ({
                   questionGroupSize={field.options?.subFields?.length}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
+                  AddToDatabase={AddToDatabase}
                 />
               </Flex>
             )
@@ -918,6 +923,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 +975,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 +1058,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

@@ -596,7 +596,14 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (gtmEventRef.current[activeField.value.id]) return
     gtmEventRef.current[activeField.value.id] = true
 
-    emit_gtm_event({ event: 'form_progress', formId: activeField.value.formId, fieldId: activeField.value.id, title: activeField.value.title })
+    emit_gtm_event({ 
+      event: 'form_progress', 
+      formId: activeField.value.formId, 
+      fieldId: activeField.value.id, 
+      title: activeField.value.title,
+      previousTitle: prevFieldStackRef.current[prevFieldStackRef.current.length - 1]?.value?.title || '',
+      status: '' 
+    })
   }, [activeField])
 
   // placeholders for initial fields, reset when fields prop changes, since questions are now different (e.g. different form selected) 
@@ -1260,7 +1267,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
                 value: 2,
               });
             }
-            emit_gtm_event({ event: 'form_submitted', formId: formResponse.formId })
+            emit_gtm_event({ event: 'form_submitted', formId: formResponse.formId, fieldId: '', title: '', status: '', previousTitle: '', })
             updateLocalFormResponse(formResponse.id, formResponse)
             options?.onPreRedirect?.() // in case redirect on success
             options?.onSuccess?.(formResponse)

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, 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, 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';
@@ -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} />
+    )}
+    </>
   )
 }
 
@@ -2857,6 +2890,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
         && (!m?.data?.entropy || m?.data?.entropy === loaded?.entropy)
       ) {
         onChange(m.data.bookedEventId, field.id)
+        emit_gtm_event({ event: 'form_progress', fieldId: field.id, formId: field.formId, title: field.title, status: "Appointment Booked" })
       }
       if (m?.data?.type === 'CalendarPicker') {
         setHeight(750)
@@ -2873,7 +2907,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
 
     window.addEventListener('message', handleMessage)
     return () => { window.removeEventListener('message', handleMessage) }
-  }, [field?.id, onChange, acknowledgedWarning, value, loaded?.entropy])
+  }, [field?.id, field?.formId, field?.title, onChange, acknowledgedWarning, value, loaded?.entropy])
 
   if (value) {
     return (

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/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 {