@tellescope/react-components 1.225.0 → 1.227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.225.0",
+  "version": "1.227.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.225.0",
-    "@tellescope/sdk": "^1.225.0",
-    "@tellescope/types-client": "^1.225.0",
-    "@tellescope/types-models": "^1.225.0",
-    "@tellescope/types-utilities": "^1.225.0",
-    "@tellescope/utilities": "^1.225.0",
-    "@tellescope/validation": "^1.225.0",
+    "@tellescope/constants": "^1.227.0",
+    "@tellescope/sdk": "^1.227.0",
+    "@tellescope/types-client": "^1.227.0",
+    "@tellescope/types-models": "^1.227.0",
+    "@tellescope/types-utilities": "^1.227.0",
+    "@tellescope/utilities": "^1.227.0",
+    "@tellescope/validation": "^1.227.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -83,7 +83,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": "764982e316e8cf0dba3151e4d0ecf3741bc39725",
+  "gitHead": "4c2611222f8b1bfadce79814889db07fee096ce0",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -455,15 +455,16 @@ export const QuestionForField = ({
 
 export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   form,
-  activeField, 
+  activeField,
   currentFileValue,
-  customInputs, 
-  currentValue, 
+  customInputs,
+  currentValue,
   submitErrorMessage,
   onAddFile,
-  onFieldChange, 
+  onFieldChange,
   goToNextField,
   goToPreviousField,
+  isAutoAdvancing,
   isNextDisabled,
   isPreviousDisabled,
   submit,
@@ -585,6 +586,19 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   }, [form?.realTimeScoring, form?.scoring, responses])
 
   if (!(currentValue && currentFileValue)) return <></>
+
+  // Show loading state while auto-advancing to target question
+  if (isAutoAdvancing) {
+    return (
+      <Flex column alignItems="center" style={{ minHeight: 200, justifyContent: 'center' }}>
+        <CircularProgress size={40} />
+        <Typography style={{ marginTop: 16, textAlign: 'center' }}>
+          Picking up where you left off...
+        </Typography>
+      </Flex>
+    )
+  }
+
   return (
     submitted 
       ? <ThanksMessage htmlThanksMessage={htmlThanksMessage} thanksMessage={thanksMessage} 
@@ -1104,16 +1118,71 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
     }
   }
 
+  // Calculate current score if real-time scoring is enabled
+  const currentScores = useMemo(() => {
+    if (!props.form?.realTimeScoring || !props.form.scoring?.length) return null
+
+    return calculate_form_scoring({
+      response: { responses },
+      form: { scoring: props.form.scoring }
+    })
+  }, [props.form?.realTimeScoring, props.form?.scoring, responses])
+
   return (
     <Flex flex={1} column>
-      {submitted 
-      ? <ThanksMessage htmlThanksMessage={htmlThanksMessage} thanksMessage={thanksMessage} 
-          showRestartAtEnd={props?.customization?.showRestartAtEnd} 
+      {submitted
+      ? <ThanksMessage htmlThanksMessage={htmlThanksMessage} thanksMessage={thanksMessage}
+          showRestartAtEnd={props?.customization?.showRestartAtEnd}
         />
       : (
         <>
+        {/* Real-time scoring display - pinned to top */}
+        {currentScores && currentScores.length > 0 && (
+          <Flex style={{
+            position: 'sticky',
+            top: 0,
+            zIndex: 1000,
+            backgroundColor: 'white',
+            borderBottom: '1px solid #e0e0e0',
+            padding: '12px 0',
+            marginBottom: '16px',
+            width: '100%',
+            justifyContent: 'center'
+          }}>
+            {currentScores.map((score, index) => (
+              <Flex key={index} style={{
+                padding: '10px 14px',
+                backgroundColor: '#f8f9fa',
+                borderRadius: 8,
+                border: `1px solid ${PRIMARY_HEX}20`,
+                marginRight: index < currentScores.length - 1 ? 12 : 0,
+                minWidth: 120,
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}>
+                <Typography style={{
+                  fontSize: 12,
+                  fontWeight: 'medium',
+                  textAlign: 'center',
+                  lineHeight: 1.2,
+                  marginBottom: 4
+                }}>
+                  {score.title}
+                </Typography>
+                <Typography style={{
+                  fontWeight: 'bold',
+                  color: PRIMARY_HEX,
+                  fontSize: 18
+                }}>
+                  {score.value}
+                </Typography>
+              </Flex>
+            ))}
+          </Flex>
+        )}
+
         <Flex flex={1} justifyContent={"center"} column style={{ marginBottom: 15 }}>
-        {list.map((activeField, i) => {
+        {list.map((activeField) => {
           const value = responses.find(r => r.fieldId === activeField.id)!
           const file = selectedFiles.find(r => r.fieldId === activeField.id)!
 

package/src/Forms/hooks.tsx

@@ -353,6 +353,7 @@ interface UseTellescopeFormOptions {
   isInternalNote?: boolean,
   formTitle?: string,
   customization?: FormCustomization,
+  startingFieldId?: string,
   ga4measurementId?: string,
   submitRedirectURL?: string,
   rootResponseId?: string,
@@ -515,7 +516,7 @@ const shouldCallout = (field: FormField | undefined, value: FormResponseValueAns
 
 export type Response = FormResponseValue & { touched: boolean, includeInSubmit: boolean, field: FormField }
 export type FileResponse = { fieldId: string, fieldTitle: string, blobs?: FileBlob[] }
-export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL, enduser, groupId, groupInstance, groupPosition }: UseTellescopeFormOptions) => {
+export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL, enduser, groupId, groupInstance, groupPosition, startingFieldId }: UseTellescopeFormOptions) => {
   const { amPm, hoursAmPm, minutes } = get_time_values(new Date())
 
   const root = useTreeForFormFields(fields)
@@ -531,13 +532,19 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const [, { updateElement: updateFormResponse, updateLocalElement: updateLocalFormResponse }] = useFormResponses({ dontFetch: true })
 
   const [customerId, setCustomerId] = useState<string>()
-  const [activeField, setActiveField] = useState(root)  
+
+  const [activeField, setActiveField] = useState(root)
   const [submittingStatus, setSubmittingStatus] = useState<SubmitStatus>(undefined)
   const [submitErrorMessage, setSubmitErrorMessage] = useState('')
   const [currentPageIndex, setCurrentPageIndex] = useState(0)
-  const [uploadingFiles, setUploadingFiles] = useState<{ fieldId: string }[]>([]) 
+  const [uploadingFiles, setUploadingFiles] = useState<{ fieldId: string }[]>([])
   const prevFieldStackRef = useRef<typeof root[]>([])
 
+  // Auto-advance state for form continuation
+  const [isAutoAdvancing, setIsAutoAdvancing] = useState(false)
+  const autoAdvanceCompletedRef = useRef(false)
+  const autoAdvanceStartTimeRef = useRef<number | null>(null)
+
   const [repeats, setRepeats] = useState({} as Record<string, string | number>)
 
   const gaEventRef = useRef({} as Record<string, boolean>)
@@ -677,6 +684,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     setResponses(initializeFields())
   }, [formId, initializeFields])
 
+
+
   // placeholders for initial files, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fileInitRef = useRef('')
   const initializeFiles = useCallback(() => (
@@ -704,7 +713,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   )
 
   const logicOptions: NextFieldLogicOptions = {
-    urlLogicValue, 
+    urlLogicValue,
     activeResponses: responses.filter(r => r.includeInSubmit),
     dateOfBirth: enduser?.dateOfBirth,
     gender: enduser?.gender,
@@ -712,6 +721,56 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     form,
   }
 
+  // Auto-advance to target field when startingFieldId is provided
+  useEffect(() => {
+    if (!startingFieldId || responses.length === 0 || autoAdvanceCompletedRef.current) return
+
+    // Start timing on first run
+    if (autoAdvanceStartTimeRef.current === null) {
+      autoAdvanceStartTimeRef.current = Date.now()
+      setIsAutoAdvancing(true)
+    }
+
+    const finishAutoAdvance = () => {
+      const elapsed = Date.now() - (autoAdvanceStartTimeRef.current || 0)
+      const remainingTime = Math.max(0, 1000 - elapsed) // Ensure at least 1 second
+
+      setTimeout(() => {
+        setIsAutoAdvancing(false)
+        autoAdvanceCompletedRef.current = true
+      }, remainingTime)
+    }
+
+    // Check if we're already at the target
+    if (activeField.value.id === startingFieldId) {
+      finishAutoAdvance()
+      return
+    }
+
+    // Find current response
+    const currentResponse = responses.find(r => r.fieldId === activeField.value.id)
+
+    // If no response or no answer, we've reached the first unanswered question
+    if (!currentResponse || !currentResponse.answer?.value) {
+      finishAutoAdvance()
+      return
+    }
+
+    // Auto-advance to next field using existing logic
+    if (!prevFieldStackRef.current.find(v => v.value.id === activeField?.value.id)) {
+      prevFieldStackRef.current.push(activeField)
+      setCurrentPageIndex(i => i + 1)
+    }
+
+    const nextNode = getNextField(activeField, currentResponse, responses, logicOptions)
+    if (nextNode) {
+      setActiveField(nextNode)
+      // The useEffect will run again with the new activeField
+    } else {
+      finishAutoAdvance()
+    }
+  }, [startingFieldId, responses.length, activeField, logicOptions])
+
   const handleDatabaseSelect = useCallback((databaseRecords: Pick<DatabaseRecord, "values" | "databaseId">[]) => {
     try {
       // no need to update if there's no prepopulation
@@ -944,6 +1003,19 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       if (typeof value.answer.value?.inches !== 'number' || isNaN(value.answer.value?.inches)) {
         return "Inches must be provided (enter 0 for no inches)"
       }
+
+      // Convert height to total inches for min/max validation
+      const totalInches = ((value.answer.value?.feet || 0) * 12) + (value.answer.value?.inches || 0)
+      if (field.options?.min !== undefined && field.options.min !== -Infinity && totalInches < field.options.min) {
+        const minFeet = Math.floor(field.options.min / 12)
+        const minInches = field.options.min % 12
+        return `Height must be at least ${minFeet}' ${minInches}"`
+      }
+      if (field.options?.max !== undefined && field.options.max !== Infinity && totalInches > field.options.max) {
+        const maxFeet = Math.floor(field.options.max / 12)
+        const maxInches = field.options.max % 12
+        return `Height must be no more than ${maxFeet}' ${maxInches}"`
+      }
     }
 
     if (value.answer.type === 'Related Contacts') {
@@ -1544,5 +1616,6 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     logicOptions,
     uploadingFiles, setUploadingFiles,
     handleFileUpload,
+    isAutoAdvancing,
   }
 }