@tellescope/react-components 1.247.0 → 1.248.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.247.0",
+  "version": "1.248.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.247.0",
-    "@tellescope/sdk": "1.247.0",
-    "@tellescope/types-client": "1.247.0",
-    "@tellescope/types-models": "1.247.0",
-    "@tellescope/types-utilities": "1.247.0",
-    "@tellescope/utilities": "1.247.0",
-    "@tellescope/validation": "1.247.0",
+    "@tellescope/constants": "1.248.0",
+    "@tellescope/sdk": "1.248.0",
+    "@tellescope/types-client": "1.248.0",
+    "@tellescope/types-models": "1.248.0",
+    "@tellescope/types-utilities": "1.248.0",
+    "@tellescope/utilities": "1.248.0",
+    "@tellescope/validation": "1.248.0",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -84,7 +84,7 @@
     "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": "408421d578d9c63493ff94464da6e4317aa3af20",
+  "gitHead": "c10ecca2464920b76cda6af60fafbd1c9fde5174",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/form_responses.tsx

@@ -2,7 +2,7 @@ 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, ImageProps, LabeledIconButton, SecureImage, useEndusers, useOrganization, useResolvedSession, useSession, useUsers, value_is_loaded } from "../index"
+import { DownloadFileIconButton, ImageProps, LabeledIconButton, SecureImage, useEndusers, useEnduserMedications, useEnduserObservations, 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"
@@ -23,6 +23,135 @@ export const AddressDisplay = ({ value } : { value: Required<FormResponseAnswerA
   </Grid>
 ) 
 
+type SnapshotRef = { id: string, label: string }
+
+export const HistoricalDataSnapshotDisplay = ({ snapshot } : { snapshot: { observations?: SnapshotRef[], medications?: SnapshotRef[], snapshotAt?: string } }) => {
+  const { observations: obsRefs = [], medications: medRefs = [], snapshotAt } = snapshot
+  const [, { findById: findObservation }] = useEnduserObservations({ dontFetch: true })
+  const [, { findById: findMedication }] = useEnduserMedications({ dontFetch: true })
+
+  const tdStyle = { padding: '6px 8px' } as const
+  const deletedStyle = { padding: '6px 8px', color: '#999', fontStyle: 'italic' } as const
+
+  return (
+    <div style={{ marginTop: 10 }}>
+      {snapshotAt && (
+        <Typography style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>
+          Snapshot taken at {formatted_date(new Date(snapshotAt))}
+        </Typography>
+      )}
+
+      {obsRefs.length > 0 && (
+        <div style={{ marginBottom: 15 }}>
+          <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Observations</Typography>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
+            <thead>
+              <tr style={{ borderBottom: '2px solid #ccc', textAlign: 'left' }}>
+                <th style={tdStyle}>Date</th>
+                <th style={tdStyle}>Type</th>
+                <th style={tdStyle}>Value</th>
+                <th style={tdStyle}>Category</th>
+                <th style={tdStyle}>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {obsRefs.map((ref, i) => {
+                const obs = findObservation(ref.id, { batch: true })
+                if (obs === undefined) return (
+                  <tr key={ref.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td colSpan={5} style={tdStyle}>Loading...</td>
+                  </tr>
+                )
+                if (obs === null) return (
+                  <tr key={ref.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td colSpan={5} style={deletedStyle}>{ref.label} — Record no longer available</td>
+                  </tr>
+                )
+                return (
+                  <tr key={obs.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td style={tdStyle}>{obs.timestamp ? formatted_date(new Date(obs.timestamp)) : '-'}</td>
+                    <td style={tdStyle}>{obs.type || obs.code || '-'}</td>
+                    <td style={tdStyle}>
+                      {obs.measurement ? `${obs.measurement.value} ${obs.measurement.unit}` : obs.qualitativeResult || '-'}
+                    </td>
+                    <td style={tdStyle}>{obs.category || '-'}</td>
+                    <td style={tdStyle}>{obs.status || '-'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {medRefs.length > 0 && (
+        <div style={{ marginBottom: 15 }}>
+          <Typography style={{ fontWeight: 'bold', marginBottom: 5 }}>Medications</Typography>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
+            <thead>
+              <tr style={{ borderBottom: '2px solid #ccc', textAlign: 'left' }}>
+                <th style={tdStyle}>Medication</th>
+                <th style={tdStyle}>Dosage</th>
+                <th style={tdStyle}>Dispensing</th>
+                <th style={tdStyle}>Pharmacy</th>
+                <th style={tdStyle}>Prescriber</th>
+                <th style={tdStyle}>Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {medRefs.map((ref, i) => {
+                const med = findMedication(ref.id, { batch: true })
+                if (med === undefined) return (
+                  <tr key={ref.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td colSpan={6} style={tdStyle}>Loading...</td>
+                  </tr>
+                )
+                if (med === null) return (
+                  <tr key={ref.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td colSpan={6} style={deletedStyle}>{ref.label} — Record no longer available</td>
+                  </tr>
+                )
+                return (
+                  <tr key={med.id || i} style={{ borderBottom: '1px solid #eee' }}>
+                    <td style={tdStyle}>
+                      {med.title || '-'}
+                      {med.allergyNote ? <div style={{ color: 'red', fontSize: 12 }}>Allergies: {med.allergyNote}</div> : null}
+                      {med.directions ? <div style={{ color: '#888', fontSize: 12 }}>Directions: {med.directions}</div> : null}
+                    </td>
+                    <td style={tdStyle}>
+                      {med.dosage
+                        ? med.dosage.description
+                          ? med.dosage.description
+                          : `${med.dosage.value || ''}${med.dosage.unit ? ` ${med.dosage.unit}` : ''}${med.dosage.quantity ? ` ${med.dosage.quantity} units` : ''}${med.dosage.frequency ? ` ${!isNaN(parseInt(med.dosage.frequency)) ? `${med.dosage.frequency}x ${med.dosage?.frequencyDescriptor ? `Per ${med.dosage.frequencyDescriptor}` : 'daily'}` : med.dosage.frequency}` : ''}`
+                        : '-'}
+                    </td>
+                    <td style={tdStyle}>
+                      {med.dispensing ? `${med.dispensing.quantity || ''} ${med.dispensing.unit || ''}`.trim() || '-' : '-'}
+                    </td>
+                    <td style={tdStyle}>{med.pharmacyName || med.pharmacyId || '-'}</td>
+                    <td style={tdStyle}>
+                      {med.prescriberName || '-'}
+                      {med.source ? <div style={{ fontStyle: 'italic', fontSize: 12 }}>{med.source}</div> : null}
+                      {med.notes ? <div style={{ fontSize: 12 }}>{med.notes}</div> : null}
+                    </td>
+                    <td style={tdStyle}>
+                      {formatted_date(new Date(med.startedTakingAt || med.prescribedAt || med.createdAt))}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {obsRefs.length === 0 && medRefs.length === 0 && (
+        <Typography style={{ fontStyle: 'italic', color: '#888' }}>No historical data recorded</Typography>
+      )}
+    </div>
+  )
+}
+
 export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, printing, onImageClick } : {
   answer: FormResponseValueAnswer,
   formResponse: FormResponse,
@@ -177,7 +306,9 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
     </Typography>
   ) : (
     a.type === 'description'
-      ? <></>
+      ? (a.value && typeof a.value === 'string' && a.value.startsWith('{'))
+        ? (() => { try { return <HistoricalDataSnapshotDisplay snapshot={JSON.parse(a.value)} /> } catch { return <></> } })()
+        : <></>
       : <Typography>No value provided</Typography>
   )
 )

package/src/Forms/forms.tsx

@@ -236,7 +236,7 @@ export const QuestionForField = ({
         <div style={{ marginTop: 15 }}></div> 
       }
 
-      <Description field={field} style={{ fontSize: 16 }} enduserId={enduserId} />
+      <Description field={field} style={{ fontSize: 16 }} enduserId={enduserId} onFieldChange={onFieldChange} />
 
       {feedback.length > 0 && 
         <Flex column style={{ marginBottom: 11, marginTop: 3, }}>
@@ -320,7 +320,7 @@ export const QuestionForField = ({
           <String field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Appointment Booking' ? (
-          <AppointmentBooking formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
+          <AppointmentBooking key={field.id} formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
         )
         : field.type === 'Stripe' ? (
           <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />
@@ -1017,7 +1017,7 @@ export const UpdateResponse = ({
   )
 }
 
-const HistoricalDataSection = ({ sources, enduserId } : { sources: HistoricalDataSource[], enduserId: string }) => {
+const HistoricalDataSection = ({ sources, enduserId, onDataLoaded } : { sources: HistoricalDataSource[], enduserId: string, onDataLoaded?: (json: string) => void }) => {
   const session = useSession({ throwIfMissingContext: false })
   const [observations, setObservations] = useState<any[]>([])
   const [medications, setMedications] = useState<any[]>([])
@@ -1039,6 +1039,8 @@ const HistoricalDataSection = ({ sources, enduserId } : { sources: HistoricalDat
       setError('')
       try {
         const promises: Promise<void>[] = []
+        let loadedObservations: any[] = []
+        let loadedMedications: any[] = []
 
         for (const source of sources) {
           if (source.type === 'Observations') {
@@ -1047,7 +1049,7 @@ const HistoricalDataSection = ({ sources, enduserId } : { sources: HistoricalDat
                 filter: { enduserId, ...source.filter },
                 limit: source.limit,
               })
-              .then((obs: any[]) => setObservations(obs))
+              .then((obs: any[]) => { loadedObservations = obs; setObservations(obs) })
             )
           } else if (source.type === 'Medications') {
             promises.push(
@@ -1055,12 +1057,35 @@ const HistoricalDataSection = ({ sources, enduserId } : { sources: HistoricalDat
                 filter: { enduserId, status: { _ne: 'draft' }, ...source.filter },
                 limit: source.limit,
               })
-              .then((meds: any[]) => setMedications(meds))
+              .then((meds: any[]) => { loadedMedications = meds; setMedications(meds) })
             )
           }
         }
 
         await Promise.all(promises)
+
+        const obsLabel = (o: any) => {
+          const name = o.type || o.code || ''
+          const val = o.measurement ? `${o.measurement.value} ${o.measurement.unit}` : o.qualitativeResult || ''
+          return `${name}${val ? ' ' + val : ''}`.slice(0, 50)
+        }
+        const medLabel = (m: any) => {
+          const dose = m.dosage?.quantity ? ` ${m.dosage.quantity}${m.dosage.unit ? m.dosage.unit : ''}` : ''
+          return `${m.title || ''}${dose}`.slice(0, 50)
+        }
+
+        const MAX_SNAPSHOT_LENGTH = 24000
+        let obsRefs = loadedObservations.map((o: any) => ({ id: o.id, label: obsLabel(o) }))
+        let medRefs = loadedMedications.map((m: any) => ({ id: m.id, label: medLabel(m) }))
+
+        let json = JSON.stringify({ observations: obsRefs, medications: medRefs, snapshotAt: new Date().toISOString() })
+        while (json.length > MAX_SNAPSHOT_LENGTH && (obsRefs.length + medRefs.length) > 0) {
+          if (obsRefs.length >= medRefs.length) { obsRefs.pop() }
+          else { medRefs.pop() }
+          json = JSON.stringify({ observations: obsRefs, medications: medRefs, snapshotAt: new Date().toISOString() })
+        }
+
+        onDataLoaded?.(json)
       } catch (err: any) {
         setError(err?.message || 'Failed to load historical data')
       } finally {
@@ -1183,7 +1208,7 @@ const HistoricalDataSection = ({ sources, enduserId } : { sources: HistoricalDat
   )
 }
 
-export const Description = ({ field, color="primary", style, enduserId } : { field: FormField, color?: string, enduserId?: string } & Styled) => {
+export const Description = ({ field, color="primary", style, enduserId, onFieldChange } : { field: FormField, color?: string, enduserId?: string, onFieldChange?: (value: any, fieldId: string) => void } & Styled) => {
   const existingContent = (
     !field.htmlDescription && field.description ? (
       <Typography color={color as any} style={style}>
@@ -1203,6 +1228,7 @@ export const Description = ({ field, color="primary", style, enduserId } : { fie
         <HistoricalDataSection
           sources={field.options.historicalDataSources}
           enduserId={enduserId}
+          onDataLoaded={onFieldChange ? (jsonString) => onFieldChange(jsonString, field.id) : undefined}
         />
       ) : null}
     </>

package/src/Forms/forms.v2.tsx

@@ -330,7 +330,7 @@ export const QuestionForField = ({
           <String field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} error={!!validationMessage && (!['A response is required', 'A value must be checked', 'A file is required', 'Enter a valid phone number', 'Insurer is required'].includes(validationMessage) || value.touched)} />
         )
         : field.type === 'Appointment Booking' ? (
-          <AppointmentBooking formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
+          <AppointmentBooking key={field.id} formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
         )
         : field.type === 'Stripe' ? (
           <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />

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)
@@ -993,7 +994,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 +1241,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 +1292,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}`
           }
         }
@@ -1634,6 +1635,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,

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(