@tellescope/react-components 1.247.0 → 1.249.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.247.0",
+  "version": "1.249.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.249.0",
+    "@tellescope/sdk": "1.249.0",
+    "@tellescope/types-client": "1.249.0",
+    "@tellescope/types-models": "1.249.0",
+    "@tellescope/types-utilities": "1.249.0",
+    "@tellescope/utilities": "1.249.0",
+    "@tellescope/validation": "1.249.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": "fb54fd85672184ea09d70e3072e6037eedc84822",
   "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

@@ -145,6 +145,7 @@ export const QuestionForField = ({
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
   AddToDatabase,
+  lastNavigationDirectionRef,
 } : {
   spacing?: number,
   form?: Form,
@@ -163,19 +164,19 @@ export const QuestionForField = ({
   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'>) => {
+} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField' | 'lastNavigationDirectionRef'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
   const Email = customInputs?.['email'] ?? EmailInput
   const Number = customInputs?.['number'] ?? NumberInput
-  const Phone = customInputs?.['phone'] ?? PhoneInput 
-  const ResolvedDateInput = customInputs?.['date'] ?? DateInput 
-  const Signature = customInputs?.['signature'] ?? SignatureInput 
-  const MultipleChoice = customInputs?.['multiple_choice'] ?? MultipleChoiceInput 
-  const Stripe = customInputs?.['Stripe'] ?? StripeInput 
-  const Chargebee = customInputs?.['Chargebee'] ?? ChargeebeeInput 
-  const File = customInputs?.['file'] ?? FileInput 
-  const Files = customInputs?.['files'] ?? FilesInput 
+  const Phone = customInputs?.['phone'] ?? PhoneInput
+  const ResolvedDateInput = customInputs?.['date'] ?? DateInput
+  const Signature = customInputs?.['signature'] ?? SignatureInput
+  const MultipleChoice = customInputs?.['multiple_choice'] ?? MultipleChoiceInput
+  const Stripe = customInputs?.['Stripe'] ?? StripeInput
+  const Chargebee = customInputs?.['Chargebee'] ?? ChargeebeeInput
+  const File = customInputs?.['file'] ?? FileInput
+  const Files = customInputs?.['files'] ?? FilesInput
   const Ranking = customInputs?.['ranking'] ?? RankingInput
   const Rating = customInputs?.['rating'] ?? RatingInput
   const Address = customInputs?.['Address'] ?? AddressInput
@@ -236,7 +237,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, }}>
@@ -293,7 +294,7 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} lastNavigationDirectionRef={lastNavigationDirectionRef} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -320,7 +321,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} />
@@ -428,13 +429,13 @@ export const QuestionForField = ({
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   form={form} formResponseId={formResponseId} rootResponseId={rootResponseId} submit={submit}
                   repeats={repeats} onRepeatsChange={onRepeatsChange} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
-                  isInQuestionGroup 
+                  isInQuestionGroup
                   groupFields={
                     fields.filter(f => field.options?.subFields?.find(s => s.id === f.id))
                   }
@@ -442,6 +443,7 @@ export const QuestionForField = ({
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             )
@@ -529,6 +531,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   groupInstance,
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  lastNavigationDirectionRef,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -652,6 +655,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 logicOptions={logicOptions}
                 uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                 handleFileUpload={handleFileUpload}
+                lastNavigationDirectionRef={lastNavigationDirectionRef}
               />
             </Flex>
         </Flex>
@@ -1017,7 +1021,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 +1043,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 +1053,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 +1061,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 +1212,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 +1232,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}
     </>
@@ -1269,7 +1299,8 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   groupInstance,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   AddToDatabase,
-  ...props 
+  lastNavigationDirectionRef,
+  ...props
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
@@ -1398,7 +1429,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   enduserId={props.enduserId} formResponseId={props.formResponseId} rootResponseId={rootResponseId} submit={submit}
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   repeats={repeats} onRepeatsChange={setRepeats} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   customInputs={customInputs}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
@@ -1407,6 +1438,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>

package/src/Forms/forms.v2.tsx

@@ -154,6 +154,7 @@ export const QuestionForField = ({
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
   AddToDatabase,
+  lastNavigationDirectionRef,
 } : {
   spacing?: number,
   form?: Form,
@@ -172,7 +173,7 @@ export const QuestionForField = ({
   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'>) => {
+} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField' | 'lastNavigationDirectionRef'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
   const Email = customInputs?.['email'] ?? EmailInput
@@ -303,7 +304,7 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} lastNavigationDirectionRef={lastNavigationDirectionRef} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -330,7 +331,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} />
@@ -438,13 +439,13 @@ export const QuestionForField = ({
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   form={form} formResponseId={formResponseId} rootResponseId={rootResponseId} submit={submit}
                   repeats={repeats} onRepeatsChange={onRepeatsChange} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
-                  isInQuestionGroup 
+                  isInQuestionGroup
                   groupFields={
                     fields.filter(f => field.options?.subFields?.find(s => s.id === f.id))
                   }
@@ -452,6 +453,7 @@ export const QuestionForField = ({
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             )
@@ -539,6 +541,7 @@ export const TellescopeSingleQuestionFlowV2: typeof TellescopeFormV2 = ({
   groupInstance,
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  lastNavigationDirectionRef,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -689,6 +692,7 @@ export const TellescopeSingleQuestionFlowV2: typeof TellescopeFormV2 = ({
                   logicOptions={logicOptions}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>
@@ -1137,7 +1141,8 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   groupInstance,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   AddToDatabase,
-  ...props 
+  lastNavigationDirectionRef,
+  ...props
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
@@ -1266,7 +1271,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   enduserId={props.enduserId} formResponseId={props.formResponseId} rootResponseId={rootResponseId} submit={submit}
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   repeats={repeats} onRepeatsChange={setRepeats} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   customInputs={customInputs}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
@@ -1275,6 +1280,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>