@tellescope/react-components 1.247.0 → 1.249.0

package/src/Forms/hooks.tsx

@@ -2,7 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { Session } from "@tellescope/sdk"
 import { ChangeHandler, FormFieldNode } from "./types"
 import { DatabaseRecord, Enduser, Form, FormField, FormResponse } from "@tellescope/types-client"
-import { phoneValidator } from "@tellescope/validation"
+import { phoneValidator, is_valid_mm_dd_yyyy } from "@tellescope/validation"
 import { FileBlob, Indexable } from "@tellescope/types-utilities"
 import { CompoundFilter, EnduserRelationship, FormCustomization, FormFieldOptionDetails, FormResponseAnswerAddress, FormResponseAnswerFileValue, FormResponseValue, FormResponseValueAnswer, OrganizationTheme, PreviousFormCompoundLogic, PreviousFormFieldType, Timezone, TIMEZONES } from "@tellescope/types-models"
 import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields, useFormResponses, useResolvedSession, value_is_loaded } from "../index"
@@ -425,6 +425,7 @@ export const useOrganizationTheme = () => {
   return context?.theme ?? theme
 }
 
+/** @deprecated Use is_valid_mm_dd_yyyy from @tellescope/validation instead — it validates days-in-month and leap years */
 export const isDateString = (_s='') => {
   const s = _s.trim()
 
@@ -442,7 +443,7 @@ export const isDateString = (_s='') => {
   // const [mm,dd,yyyy] = s.split('-').map(v => parseInt(v)) // don't shorthand, for radix argument of parseInt gets messed up
   // const d = Date.parse(`${yyyy}-${mm}-${dd}`) // this format should be explicitly supported by all implementations
   // if (isNaN(d)) return false
-  
+
   return true
 }
 const isZIPString = (s='') =>  /^\d{5}$/.test(s) || /^\d{5}-\d{4}$/.test(s)
@@ -500,6 +501,41 @@ const existing_response_if_compatible = (existingResponses: FormResponseValue[]
   return undefined // no valid match, write off as data loss due to incompatible type of new question
 }
 
+// Filter stale multiple-choice/dropdown selections whose options are now hidden by showCondition
+const filter_stale_choices = (
+  value: string[] | undefined,
+  field: FormField,
+  responseContext: FormResponseValue[],
+  enduser?: Partial<Enduser>,
+  form?: Form,
+): string[] | undefined => {
+  if (!value || !Array.isArray(value)) return value
+  if (field.type !== 'multiple_choice' && field.type !== 'Dropdown') return value
+
+  const options = field.options as { choices?: string[], optionDetails?: FormFieldOptionDetails[] } | undefined
+  if (!options?.optionDetails?.length) return value // no option-level conditions to check
+
+  const choices = options.choices ?? []
+
+  return value.filter(v => {
+    // preserve values not in the choices array (e.g. "other" free-text)
+    if (!choices.includes(v)) return true
+
+    const optionDetail = options.optionDetails?.find(d => d.option === v)
+    if (!optionDetail?.showCondition || object_is_empty(optionDetail.showCondition)) {
+      return true // no condition means always visible
+    }
+
+    return responses_satisfy_conditions(responseContext, optionDetail.showCondition, {
+      dateOfBirth: enduser?.dateOfBirth,
+      gender: enduser?.gender,
+      state: enduser?.state,
+      form,
+      activeResponses: responseContext,
+    })
+  })
+}
+
 const shouldCallout = (field: FormField | undefined, value: FormResponseValueAnswer['value']) => {
   if (!field) return false
   if (!value) return false 
@@ -545,6 +581,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const [currentPageIndex, setCurrentPageIndex] = useState(0)
   const [uploadingFiles, setUploadingFiles] = useState<{ fieldId: string }[]>([])
   const prevFieldStackRef = useRef<typeof root[]>([])
+  const lastNavigationDirectionRef = useRef<'forward' | 'backward' | null>(null)
 
   // Auto-advance state for form continuation
   const [isAutoAdvancing, setIsAutoAdvancing] = useState(false)
@@ -653,14 +690,22 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   // placeholders for initial fields, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fieldInitRef = useRef('')
   const initializeFields = useCallback(() => (
-    fields.map(f => ({
+    fields.map(f => {
+      const existingValue = existing_response_if_compatible(existingResponses, f)
+      const filteredValue = (
+        existingValue != null && Array.isArray(existingValue) && (f.type === 'multiple_choice' || f.type === 'Dropdown')
+          ? filter_stale_choices(existingValue as string[], f, existingResponses ?? [], enduser, form)
+          : existingValue
+      )
+
+      return {
       fieldId: f.id,
       fieldTitle: f.title,
       fieldDescription: f.description,
       fieldHtmlDescription: f.htmlDescription,
       externalId: f.externalId,
       intakeField: f.intakeField || undefined,
-      touched: false, 
+      touched: false,
       includeInSubmit: false,
       sharedWithEnduser: f.sharedWithEnduser,
       isCalledOut: existingResponses?.find(r => r.fieldId === f.id)?.isCalledOut,
@@ -680,11 +725,11 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       : f?.intakeField === 'Address' && existingResponses?.find(r => r.fieldId === f.id && r.answer.type === 'Address')
           ? 'State'
           : undefined
-      ) as any,  
-      answer: { 
+      ) as any,
+      answer: {
         type: f.type,
         value: (
-          existing_response_if_compatible(existingResponses, f) ?? (
+          filteredValue ?? (
             (f.type === 'Insurance' || f.type === 'Address' || f.type === 'file' || f.type === 'signature' || f.type === 'multiple_choice' || f.type === 'Dropdown' || f.type === 'Table Input' || f.type === 'Database Select' || f.type === 'Medications' || f.type === 'Pharmacy Search')
               ? undefined  
                 : f.type === 'Question Group'
@@ -710,8 +755,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         ),
       } as FormResponseValueAnswer,
       field: f,
-    }))
-  ), [fields, existingResponses])
+    }})
+  ), [fields, existingResponses, enduser, form])
 
   const [responses, setResponses] = useState<(Response)[]>(initializeFields())
   useEffect(() => {
@@ -993,7 +1038,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     }
 
     if (value.answer.type === 'Insurance') {
-      if (value.answer.value?.relationshipDetails?.dateOfBirth && !isDateString(value.answer.value.relationshipDetails.dateOfBirth)) {
+      if (value.answer.value?.relationshipDetails?.dateOfBirth && !is_valid_mm_dd_yyyy(value.answer.value.relationshipDetails.dateOfBirth)) {
         return "Enter date of birth in MM-DD-YYYY format"
       }
       if (field.isOptional) return null
@@ -1240,7 +1285,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         }
       } 
     } else if (value.answer.type === 'dateString') {
-      if (!isDateString(value.answer.value)) {
+      if (!is_valid_mm_dd_yyyy(value.answer.value)) {
         return "Enter a date in MM-DD-YYYY format"
       }
     } else if (value.answer.type === 'multiple_choice' || value.answer.type === 'Dropdown') {
@@ -1291,7 +1336,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       for (const row of value.answer.value ?? []) {
         for (const cell of row) {
           const type = field.options?.tableChoices?.find(t => t.label === cell.label)?.type
-          if (type === 'Date' && !isDateString(cell.entry)) { 
+          if (type === 'Date' && !is_valid_mm_dd_yyyy(cell.entry)) {
             return `Enter a date in MM-DD-YYYY format for ${cell.label} in row ${(value.answer.value?.indexOf(row) ?? 0) + 1}`
           }
         }
@@ -1446,12 +1491,14 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
             responses: [
               ...responsesToSubmit,
               // include existing responses in case previously saved as draft
-              ...(existingResponses ?? []).filter(r => 
+              ...(existingResponses ?? []).filter(r =>
                 !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)
                 // but don't include responses which were populated from a patient field and not a prior response
                 // if these are edited, they would be included in responsesToSubmit
                 && !r.isPrepopulatedFromEnduserField
-              ),
+              )
+              // initializeFields leverages filter_stale_choices to strip answers whose options are no longer visible in multiple choice type questions
+              // existingResponses may still carry stale values for fields the user didn't interact with this session, but preserving them as-is avoids unexpected data loss
             ],
             automationStepId,
             customerId,
@@ -1548,6 +1595,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (!currentValue) return
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
+    lastNavigationDirectionRef.current = 'forward'
     console.log('going to next field')
     if (currentValue.answer.type === 'Question Group') {
       const responsesToSave = (
@@ -1612,6 +1660,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const goToPreviousField = useCallback(() => {
     if (isPreviousDisabled()) return
 
+    lastNavigationDirectionRef.current = 'backward'
     updateInclusion(false)
 
     const previous = prevFieldStackRef.current.pop()
@@ -1634,6 +1683,9 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       touched,
       isCalledOut: shouldCallout(fields?.find(f => f?.id === fieldId), value),
       isHighlightedOnTimeline: fields?.find(f => f?.id === fieldId)?.highlightOnTimeline,
+      // description fields are never "active", so the normal updateInclusion effect won't fire for them
+      // explicitly mark as included when they receive a non-empty string value (historical data snapshot)
+      ...(field?.type === 'description' && typeof value === 'string' && value ? { includeInSubmit: true } : {}),
       answer: {
         ...r.answer,
         value: value as any,
@@ -1745,6 +1797,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     uploadingFiles, setUploadingFiles,
     handleFileUpload,
     isAutoAdvancing,
+    lastNavigationDirectionRef,
   }
 }
 

package/src/Forms/inputs.tsx

@@ -4895,7 +4895,7 @@ export const RedirectInput = ({ enduserId, groupId, groupInsance, rootResponseId
   return null
 }
 
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields }: FormInputProps<'email'>) => {
+export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields, lastNavigationDirectionRef }: FormInputProps<'email'>) => {
   let lastRef = useRef(0)
   let lastIdRef = useRef('')
 
@@ -4925,7 +4925,10 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
     lastRef.current = Date.now()
     lastIdRef.current = field.id
 
-    if (value) {
+    // Only collapse backward through a chain of hidden fields when actually navigating backward.
+    // On forward nav (including form resume where existingResponses pre-populate the value),
+    // fall through to the else branch so we re-set and advance instead of bouncing back.
+    if (value && lastNavigationDirectionRef?.current === 'backward') {
       if (isSinglePage) return
       onChange('', field.id)
 
@@ -4939,7 +4942,7 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
       // pass value that is set after above onChange
       goToNextField?.({ type: 'Hidden Value', value: valueToSet })
     }
-  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate])
+  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate, lastNavigationDirectionRef])
 
   return <></>
 }

package/src/Forms/inputs.v2.tsx

@@ -2371,56 +2371,7 @@ export const HeightInput = ({ field, value={} as any, onChange, form, ...props }
 )
 
 // Re-export from V1 to follow DRY principles
-export { RedirectInput } from './inputs'
-
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields }: FormInputProps<'email'>) => {
-  let lastRef = useRef(0)
-  let lastIdRef = useRef('')
-
-  // in a Question Group, only the first Hidden Value should navigate
-  // AND, it should only navigate if the group only contains hidden values
-  const firstHiddenValue = groupFields?.find(v => v.type === 'Hidden Value')
-  const dontNavigate = (
-    (firstHiddenValue && firstHiddenValue?.id !== field.id) // is in a group, but not the first hidden value
-  || !!(groupFields?.find(v => v.type !== 'Hidden Value')) // group contains at least 1 non-hidden value
-  )
-
-  const publicIdentifier = useMemo(() => {
-    try {
-      return new URL(window.location.href).searchParams.get('publicIdentifier') || ''
-    } catch(err) {
-      return ''
-    }
-  }, [])
-
-  const valueToSet = useMemo(() => (
-    (field.title === "{{PUBLIC_IDENTIFIER}}" && publicIdentifier) ? publicIdentifier
-      : field.title
-  ), [field.title, publicIdentifier])
-
-  useEffect(() => {
-    if (lastRef.current > Date.now() - 1000 && lastIdRef.current === field.id) return
-    lastRef.current = Date.now()
-    lastIdRef.current = field.id
-
-    if (value) {
-      if (isSinglePage) return
-      onChange('', field.id)
-
-      if (dontNavigate) return
-      goToPreviousField?.()
-    } else {
-      onChange(valueToSet, field.id)
-
-      if (dontNavigate) return
-
-      // pass value that is set after above onChange
-      goToNextField?.({ type: 'Hidden Value', value: valueToSet })
-    }
-  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate])
-
-  return <></>
-}
+export { RedirectInput, HiddenValueInput } from './inputs'
 
 export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'email'>) => {
   const session = useResolvedSession()

package/src/Forms/types.ts

@@ -39,6 +39,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   setUploadingFiles?: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
   inputProps?: { sx: SxProps },
+  lastNavigationDirectionRef?: React.MutableRefObject<'forward' | 'backward' | null>,
 }
 
 export type FormInputs = { 

package/src/state.tsx

@@ -2637,6 +2637,43 @@ export const useIntegrations = (options={} as HookOptions<Integration>) => {
   )
 }
 
+export const useRedactedIntegrations = () => {
+  const session = useSession()
+  const [loadingState, setLoadingState] = useState<LoadedData<Integration[]>>({ status: LoadingStatus.Fetching, value: [] as any })
+  const fetchedRef = useRef(false)
+
+  useEffect(() => {
+    if (fetchedRef.current) return
+    fetchedRef.current = true
+
+    let cancelled = false
+    session.api.integrations.load_redacted({})
+      .then((result: any) => {
+        if (!cancelled) setLoadingState({ status: LoadingStatus.Loaded, value: result.integrations })
+      })
+      .catch((err: any) => {
+        if (!cancelled) setLoadingState({ status: LoadingStatus.Error, value: err })
+      })
+    return () => { cancelled = true }
+  }, [session])
+
+  const updateIntegration = useCallback(async (id: string, updates: Partial<Integration>) => {
+    const result: any = await session.api.integrations.update_settings({ id, updates })
+    setLoadingState((prev: LoadedData<Integration[]>) => {
+      if (prev.status !== LoadingStatus.Loaded) return prev
+      return {
+        ...prev,
+        value: prev.value.map((i: Integration) => i.id === id ? { ...i, ...result.integration } : i),
+      }
+    })
+  }, [session])
+
+  return [
+    loadingState,
+    { updateIntegration },
+  ] as const
+}
+
 export const usePortalCustomizations = (options={} as HookOptions<PortalCustomization>) => {
   const session = useResolvedSession()
   return useListStateHook(