@tellescope/react-components 1.224.0 → 1.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.224.0",
+  "version": "1.226.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.224.0",
-    "@tellescope/sdk": "^1.224.0",
-    "@tellescope/types-client": "^1.224.0",
-    "@tellescope/types-models": "^1.224.0",
-    "@tellescope/types-utilities": "^1.224.0",
-    "@tellescope/utilities": "^1.224.0",
-    "@tellescope/validation": "^1.224.0",
+    "@tellescope/constants": "^1.226.0",
+    "@tellescope/sdk": "^1.226.0",
+    "@tellescope/types-client": "^1.226.0",
+    "@tellescope/types-models": "^1.226.0",
+    "@tellescope/types-utilities": "^1.226.0",
+    "@tellescope/utilities": "^1.226.0",
+    "@tellescope/validation": "^1.226.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": "ed57eae72bced200381c5a7cf8703153886d2b4d",
+  "gitHead": "49646dd7f5488090911a4ffeddb5d771603de295",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -117,6 +117,28 @@ export const correct_youtube_link_for_embed = (link: string) => {
   return link.replace('/watch?v=', '/embed/').split('&')[0]
 }
 
+const blockStyleToCSS = (style?: any): React.CSSProperties => {
+  if (!style) return {}
+
+  const cssStyle: React.CSSProperties = {}
+
+  if (style.width) cssStyle.width = `${style.width}px`
+  if (style.height) cssStyle.height = `${style.height}px`
+  if (style.backgroundColor) cssStyle.backgroundColor = style.backgroundColor
+  if (style.textColor) cssStyle.color = style.textColor
+  if (style.borderColor || style.borderWidth) {
+    cssStyle.border = `${style.borderWidth || 1}px solid ${style.borderColor || '#cccccc'}`
+  }
+
+  // Add default styling when any box style is applied
+  if (Object.keys(cssStyle).length > 0) {
+    cssStyle.padding = cssStyle.padding || '10px'
+    cssStyle.display = cssStyle.display || 'inline-block'
+  }
+
+  return cssStyle
+}
+
 export const ArticleViewer = ({ 
   article,
   width,
@@ -186,13 +208,17 @@ export const ArticleViewer = ({
         <Grid item key={i}>
           {
             block.type === 'h1' ? (
-              <Typography component="h1" sx={{ fontSize: 28, fontWeight: 'bold', m: 0, p: 0 }}>{block.info.text}</Typography>
+              <Typography component="h1" sx={{ fontSize: 28, fontWeight: 'bold', m: 0, p: 0 }} style={blockStyleToCSS(block.style)}>{block.info.text}</Typography>
             )
           : block.type === 'h2' ? (
-              <Typography component="h2" sx={{ fontSize: 23, m: 0, p: 0 }}>{block.info.text}</Typography>
+              <Typography component="h2" sx={{ fontSize: 23, m: 0, p: 0 }} style={blockStyleToCSS(block.style)}>{block.info.text}</Typography>
             )
           : block.type === 'html' ? (
-            <div style={{ fontSize: 18, lineHeight: '25pt' }} 
+            <div style={{
+              fontSize: 18,
+              lineHeight: '25pt',
+              ...blockStyleToCSS(block.style)
+            }}
               className={css`p {
                 margin-top: 0;
                 margin-bottom: 0;
@@ -201,15 +227,16 @@ export const ArticleViewer = ({
                 __html: remove_script_tags(
                   block.info.html.replaceAll(/style="*"/g, '')
                 )
-              }} 
+              }}
             />
             ) 
           : block.type === 'image' ? (
-              <img src={block.info.link} alt={''} style={{ 
-                maxWidth: block.info.maxWidth || '100%', 
+              <img src={block.info.link} alt={block.info.alt || ''} style={{
+                maxWidth: block.info.maxWidth || '100%',
                 maxHeight: block.info.maxHeight || undefined, // '' => undefined
                 height: block.info.height || undefined, // '' => undefined
                 width: block.info.width || undefined, // '' => undefined
+                ...blockStyleToCSS(block.style)
               }} />
             )
           : block.type === 'youtube' ? (
@@ -254,12 +281,13 @@ export const ArticleViewer = ({
   )
 }
 
+
 export const html_for_article = (article: ManagedContentRecord, options?: { rootWidth?: number }) => {
   const rootWidth = options?.rootWidth || 400
   
   const content = (
     (article.blocks ?? [])
-    .map((block, i) => 
+    .map((block, i) =>
         block.type === 'h1' ? (
           `<h1>${block.info.text}</h1>`
         )
@@ -268,11 +296,11 @@ export const html_for_article = (article: ManagedContentRecord, options?: { root
         )
       : block.type === 'html' ? (
         `<div>${remove_script_tags(remove_script_tags(block.info.html))}</div>`
-        ) 
+        )
       : block.type === 'image' ? (
-          // wrap with div to supporting centering later 
+          // wrap with div to supporting centering later
           `<div style="">
-            <img src="${block.info.link}" alt={''} style="max-width: ${block.info.maxWidth || '100%'}; max-height: ${block.info.maxHeight || undefined}; height: ${block.info.height || undefined}; width: ${block.info.width || undefined};" />
+            <img src="${block.info.link}" alt="${block.info.alt || ''}" style="max-width: ${block.info.maxWidth || '100%'}; max-height: ${block.info.maxHeight || undefined}; height: ${block.info.height || undefined}; width: ${block.info.width || undefined};" />
           </div>`
         )
       : block.type === 'youtube' ? (

package/src/Forms/form_responses.tsx

@@ -23,8 +23,8 @@ export const AddressDisplay = ({ value } : { value: Required<FormResponseAnswerA
   </Grid>
 ) 
 
-export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, printing, onImageClick } : { 
-  answer: FormResponseValueAnswer, 
+export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, printing, onImageClick } : {
+  answer: FormResponseValueAnswer,
   formResponse: FormResponse,
   fieldId: string,
   printing?: boolean,
@@ -57,9 +57,9 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
             )}
           </ol>
       : a.type === 'file'
-        ? a.value.secureName 
+        ? a.value.secureName
           ? <Typography>
-              {!printing 
+              {!printing
                 ? <DownloadFileIconButton secureName={a.value.secureName} onDownload={url => window.open(url, '_blank')} />
                 : (
                   <SecureImage secureName={a.value.secureName} onImageClick={onImageClick}
@@ -74,10 +74,10 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
       : a.type === 'files'
         ? a.value.map(file => (
           <Typography key={file.secureName}>
-            {!printing 
+            {!printing
               ? <DownloadFileIconButton secureName={file.secureName} onDownload={url => window.open(url, '_blank')} />
               : (
-                <SecureImage secureName={file.secureName} 
+                <SecureImage secureName={file.secureName}
                   style={{ maxHeight: 400, maxWidth: 400 }}
                 />
               )
@@ -308,14 +308,14 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
 
       <div style={{ flexDirection: "column", display: 'flex', flex: 1 }}>
       {response.responses.map((r, i) => (
-          <div key={i} style={{ marginBottom: 12 }}>
+          <div key={i} style={{ marginBottom: 36 }}>
             <div style={{ display: 'flex', flex: 1, flexDirection: "row", justifyContent: 'space-between', flexWrap: 'nowrap' }}>
-              {r.fieldTitle && 
+              {r.fieldTitle &&
                 <div style={{ }}>
                   <Typography style={{
                     fontWeight: 'bold',
                     width: (
-                      showAnswerInline 
+                      showAnswerInline
                         ? '400px'
                         : undefined
                     )
@@ -326,10 +326,10 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
               }
 
               <div style={{ }}>
-                {showAnswerInline && r.answer.type !== 'Question Group' 
+                {showAnswerInline && r.answer.type !== 'Question Group'
                 && !(typeof r.answer.value === 'string' && r.answer.value.includes('{TELLESCOPE')) // hidden field for matching, not to display
                 && (
-                  (r.answerIsHTML && typeof r.answer.value === 'string') 
+                  (r.answerIsHTML && typeof r.answer.value === 'string')
                     ? <div dangerouslySetInnerHTML={{ __html: remove_script_tags(r.answer.value) }} />
                     : <ResponseAnswer fieldId={r.fieldId} formResponse={response} answer={r.answer} printing={printing} />
                 )
@@ -339,7 +339,7 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
 
             {r.fieldDescription
               ? (
-                <Typography style={{  }}>
+                <Typography style={{ }}>
                   {r.fieldDescription}
                 </Typography>
               ): r.fieldHtmlDescription
@@ -349,10 +349,12 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
                   }} />
                 )
                 : null
-            } 
+            }
 
             {!showAnswerInline &&
-              <ResponseAnswer answer={r.answer} formResponse={response} fieldId={r.fieldId} />
+              <div style={{ }}>
+                <ResponseAnswer answer={r.answer} formResponse={response} fieldId={r.fieldId} />
+              </div>
             }
           </div>
         )

package/src/Forms/forms.tsx

@@ -6,7 +6,7 @@ import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInp
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
-import { field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
+import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
 export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : { 
@@ -315,7 +315,7 @@ export const QuestionForField = ({
           <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} />
         )
         : field.type === 'Stripe' ? (
-          <Stripe field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
+          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
         )
         : field.type === 'Chargebee' ? (
           <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />
@@ -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,
@@ -574,7 +575,30 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
 
   const numRemainingPages = getNumberOfRemainingPages()
 
+  // Calculate current score if real-time scoring is enabled
+  const currentScores = useMemo(() => {
+    if (!form?.realTimeScoring || !form.scoring?.length) return null
+
+    return calculate_form_scoring({
+      response: { responses },
+      form: { scoring: form.scoring }
+    })
+  }, [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} 
@@ -590,7 +614,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 handleDatabaseSelect={handleDatabaseSelect}
                 setCustomerId={setCustomerId}
                 repeats={repeats} onRepeatsChange={setRepeats}
-                value={currentValue} file={currentFileValue} 
+                value={currentValue} file={currentFileValue}
                 customInputs={customInputs}
                 onAddFile={onAddFile} onFieldChange={onFieldChange}
                 responses={responses} selectedFiles={selectedFiles}
@@ -658,14 +682,49 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
           }
         </Flex>
 
-        {!customization?.hideProgressBar && 
-          <Progress 
-            numerator={currentPageIndex + (validateCurrentField() ? 0 : 1)} 
-            denominator={currentPageIndex + 1 + numRemainingPages}  
+        {!customization?.hideProgressBar &&
+          <Progress
+            numerator={currentPageIndex + (validateCurrentField() ? 0 : 1)}
+            denominator={currentPageIndex + 1 + numRemainingPages}
             style={{ marginTop: '15px' }}
           />
         }
 
+        {/* Real-time scoring display */}
+        {currentScores && currentScores.length > 0 && (
+          <Flex style={{ marginTop: 10, marginBottom: 5, width: '100%' }}>
+            {currentScores.map((score, index) => (
+              <Flex key={index} style={{
+                padding: '10px 14px',
+                backgroundColor: '#f8f9fa',
+                borderRadius: 8,
+                border: `1px solid ${theme?.themeColor || 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: theme?.themeColor || PRIMARY_HEX,
+                  fontSize: 18
+                }}>
+                  {score.value}
+                </Typography>
+              </Flex>
+            ))}
+          </Flex>
+        )}
+
         <Typography color="error" style={{ alignText: 'center', marginTop: 3 }}>
           {submitErrorMessage}
         </Typography>
@@ -1059,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,
@@ -364,6 +365,9 @@ interface UseTellescopeFormOptions {
   enduser?: Partial<Enduser>,
   isPublicForm?: boolean,
   dontAutoadvance?: boolean,
+  groupId?: string,
+  groupInstance?: string,
+  groupPosition?: number,
 }
 
 const OrganizationThemeContext = createContext(null as any as { 
@@ -512,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 }: 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)
@@ -528,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>)
@@ -674,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(() => (
@@ -701,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,
@@ -709,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
@@ -1139,6 +1201,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
   const handleFileUpload = useCallback(async (blob: FileBlob, fieldId: string) => {
     const responseIndex = responses.findIndex(f => f.fieldId === fieldId)
+    const field = fields.find(f => f.id === fieldId)
     const result: FormResponseAnswerFileValue = { name: blob.name, secureName: '' }
     const { secureName } = await handleUpload(
       {
@@ -1146,7 +1209,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         size: blob.size,
         type: blob.type,
         enduserId,
-      }, 
+        hiddenFromEnduser: field?.options?.hideFromPortal,
+      },
       blob
     )
 
@@ -1160,7 +1224,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     } else {
       responses[responseIndex].answer.value = { ...result, type: blob.type, secureName, name: result.name ?? '' } 
     }
-  }, [responses, handleUpload])
+  }, [responses, handleUpload, fields])
 
   const submit = useCallback(async (options?: { onPreRedirect?: () => void, onFileUploadsDone?: () => void, onSuccess?: (r: FormResponse) => void, includedFieldIds?: string[], otherEnduserIds?: string[], onBulkErrors?: (errors: { enduserId: string, message: string }[]) => void }) => {
     setSubmitErrorMessage('')
@@ -1230,13 +1294,16 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
             accessCode : (
               accessCode 
               || (await (
-                session as any as Session).api.form_responses.prepare_form_response({ 
+                session as any as Session).api.form_responses.prepare_form_response({
                   formId, enduserId: eId, isInternalNote, title: formTitle,
                   parentResponseId, rootResponseId,
-    
-                  carePlanId, 
+
+                  carePlanId,
                   context,
                   calendarEventId,
+                  groupId,
+                  groupInstance,
+                  groupPosition,
                 })
               ).accessCode
             ),
@@ -1536,5 +1603,6 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     logicOptions,
     uploadingFiles, setUploadingFiles,
     handleFileUpload,
+    isAutoAdvancing,
   }
 }

package/src/Forms/inputs.tsx

@@ -1605,7 +1605,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
   )
 }
 
-export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInputProps<'Stripe'> & { 
+export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }: FormInputProps<'Stripe'> & {
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
 }) => {
   const session = useResolvedSession()
@@ -1625,7 +1625,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     }
     fetchRef.current = true
 
-    session.api.form_responses.stripe_details({ fieldId: field.id })
+    session.api.form_responses.stripe_details({ fieldId: field.id, enduserId })
     .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout, answerText }) => {
       setAnswertext(answerText || '')
       setIsCheckout(!!isCheckout)
@@ -1640,7 +1640,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
         setError(e.message)
       }
     })
-  }, [session, value, field.id])
+  }, [session, value, field.id, enduserId])
 
   const cost = (
     (field.options?.productIds || []).map(id => findProduct(id, { batch: false })) // seems to be having issues with bulk read