@tellescope/react-components 1.230.2 → 1.231.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.230.2",
+  "version": "1.231.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.230.2",
-    "@tellescope/sdk": "1.230.2",
-    "@tellescope/types-client": "1.230.2",
-    "@tellescope/types-models": "1.230.2",
-    "@tellescope/types-utilities": "1.230.2",
-    "@tellescope/utilities": "1.230.2",
-    "@tellescope/validation": "1.230.2",
+    "@tellescope/constants": "1.231.0",
+    "@tellescope/sdk": "1.231.0",
+    "@tellescope/types-client": "1.231.0",
+    "@tellescope/types-models": "1.231.0",
+    "@tellescope/types-utilities": "1.231.0",
+    "@tellescope/utilities": "1.231.0",
+    "@tellescope/validation": "1.231.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": "0bc1e80c698398e1c62c4f026fa76475883f2396",
+  "gitHead": "55bd4ea4e0ef23c03fee4eeff595f42bc501a0f9",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -325,7 +325,7 @@ export const QuestionForField = ({
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} />
         )
         : field.type === 'Rich Text' ? (
-          <RichText field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
+          <RichText key={field.id} field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
         )
         : field.type === 'email' ? (
           <Email field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'email'>} form={form} />

package/src/Forms/forms.v2.tsx

@@ -204,9 +204,9 @@ export const QuestionForField = ({
   ) {
       return null
   }
-  return ( 
+  return (
     // margin leaves room for error message in Question Group
-    <Flex column flex={1} style={{ marginBottom: spacing ?? 25 }} id={field.id}> 
+    <Flex column flex={1} style={{ marginBottom: spacing ?? 25 }} id={field.id}>
       {field.type !== 'Redirect' && field.title &&
         <Typography component="h4" style={{
           marginTop: 15, // ensures PDF display doesn't push description into overlap with logo / title at top of form
@@ -223,13 +223,15 @@ export const QuestionForField = ({
         <div style={{ marginTop: 15 }}></div>
       }
 
-      {feedback.length > 0 && 
+      <Description field={field} style={{ fontSize: 14, color: '#00000099', marginBottom: 11 }} />
+
+      {feedback.length > 0 &&
         <Flex column style={{ marginBottom: 11, marginTop: 3, }}>
           {feedback.map((f, i) => (
             <Typography key={i} color="error" style={{ fontSize: 20 }}>
               {f}
             </Typography>
-          ))} 
+          ))}
         </Flex>
       }
 
@@ -317,7 +319,7 @@ export const QuestionForField = ({
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} 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 === 'Rich Text' ? (
-          <RichText field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
+          <RichText key={field.id} field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
         )
         : field.type === 'email' ? (
           <Email field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'email'>} 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)} />
@@ -435,17 +437,15 @@ export const QuestionForField = ({
         </Flex>
       )}
 
-      <Description field={field} style={{ fontSize: 14, color: '#00000099', marginTop: 4 }} />
-
       {field.type !== 'Question Group' &&
-        <Typography color="error" style={{ marginTop: 3, height: 10, fontSize: 14, marginBottom: -10 }}> 
+        <Typography color="error" style={{ marginTop: 3, height: 10, fontSize: 14, marginBottom: -10 }}>
           {(validationMessage === 'A response is required' || validationMessage === 'A value must be checked' || validationMessage === 'A file is required' || 'Enter a valid phone number' || 'Insurer is required')
-            ? value.touched 
+            ? value.touched
               ? form_display_text_for_language(form, validationMessage)
-              : null 
+              : null
             : form_display_text_for_language(form, validationMessage)
           }
-        </Typography>  
+        </Typography>
       }
     </Flex>
   )

package/src/Forms/hooks.tsx

@@ -684,7 +684,27 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     setResponses(initializeFields())
   }, [formId, initializeFields])
 
+  // Create templated versions of responses for UI display
+  // This applies template value replacements (e.g., {{enduser.BMI}}) to field titles/descriptions
+  // The templated responses are used ONLY for display and submission, not for navigation logic
+  const templatedResponses = useMemo(() => {
+    return responses.map(response => {
+      const originalField = fields.find(f => f.id === response.fieldId) || response.field
 
+      return {
+        ...response,
+        fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
+        fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
+        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+        field: {
+          ...response.field,
+          title: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
+          description: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
+          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+        }
+      }
+    })
+  }, [responses, fields, enduser])
 
   // placeholders for initial files, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fileInitRef = useRef('')
@@ -706,15 +726,28 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   }, [formId, initializeFiles])
 
   const currentValue =  (
-    responses.find(f => f.fieldId === activeField.value.id)
+    templatedResponses.find(f => f.fieldId === activeField.value.id)
   )
   const currentFileValue = (
     selectedFiles.find(f => f.fieldId === activeField.value.id)
   )
 
+  // Create templated version of activeField for UI display
+  // This applies template replacements to the field's title/description
+  const templatedActiveField = useMemo(() => {
+    const templatedResponse = templatedResponses.find(r => r.fieldId === activeField.value.id)
+    if (templatedResponse) {
+      return {
+        ...activeField,
+        value: templatedResponse.field
+      }
+    }
+    return activeField
+  }, [activeField, templatedResponses])
+
   const logicOptions: NextFieldLogicOptions = {
     urlLogicValue,
-    activeResponses: responses.filter(r => r.includeInSubmit),
+    activeResponses: templatedResponses.filter(r => r.includeInSubmit),
     dateOfBirth: enduser?.dateOfBirth,
     gender: enduser?.gender,
     state: enduser?.state,
@@ -1274,10 +1307,11 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
     if (!accessCode && session.type === 'enduser') throw new Error('enduser session without accessCode')
     try {
+      // Use templatedResponses for submission to ensure template values are resolved
       const responsesToSubmit = (
-        options?.includedFieldIds 
-          ? options.includedFieldIds.map(id => responses.find(r => r.fieldId === id)!)
-          : responses.filter(r => r.includeInSubmit)
+        options?.includedFieldIds
+          ? options.includedFieldIds.map(id => templatedResponses.find(r => r.fieldId === id)!)
+          : templatedResponses.filter(r => r.includeInSubmit)
       )
 
       // ensure Question Group responses are included
@@ -1286,7 +1320,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         if (r.answer.type !== 'Question Group') continue
 
         for (const f of r.answer.value ?? []) {
-          const match = responses.find(r => r.fieldId === f?.id)
+          const match = templatedResponses.find(r => r.fieldId === f?.id)
           if (!match || responsesToSubmit.find(r => r.fieldId === match.fieldId)) continue
 
           // hidden in group by conditional logic
@@ -1403,7 +1437,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     } finally {
       setSubmittingStatus(undefined)
     }
-  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions, handleFileUpload])
+  }, [accessCode, automationStepId, enduserId, responses, templatedResponses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions, handleFileUpload])
 
   const isNextDisabled = useCallback(() => {
     if (uploadingFiles.length) { return true }
@@ -1419,30 +1453,6 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     return false
   }, [activeField, validateField, uploadingFiles])
 
-  // Helper function to apply templating to responses
-  // Templates field titles/descriptions with current enduser data and form response values
-  // Can be called whenever we need to update templates (e.g., on "next" button click)
-  const applyTemplatingToResponses = useCallback((
-    currentResponses: Response[]
-  ): Response[] => {
-    return currentResponses.map(response => {
-      const originalField = fields.find(f => f.id === response.fieldId) || response.field
-
-      return {
-        ...response,
-        fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
-        fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
-        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
-        field: {
-          ...response.field,
-          title: replace_form_field_template_values(originalField.title || '', { enduser, responses: currentResponses }),
-          description: replace_form_field_template_values(originalField.description || '', { enduser, responses: currentResponses }),
-          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses: currentResponses }),
-        }
-      }
-    })
-  }, [fields, enduser])
-
   const autoAdvanceRef = useRef(false)
   // don't make option, to avoid user passing invalid data, like an onclick event
   const goToNextField = useCallback((answer: FormResponseValue['answer'] | undefined) => {
@@ -1450,24 +1460,10 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
     console.log('going to next field')
-
-    // If an answer is provided (e.g., from Hidden Value), update responses first
-    const responsesWithAnswer = answer
-      ? responses.map(r =>
-          r.fieldId === currentValue.fieldId
-            ? { ...r, answer }
-            : r
-        )
-      : responses
-
-    // Apply templating to all responses including the newly updated answer
-    const templatedResponses = applyTemplatingToResponses(responsesWithAnswer)
-    setResponses(templatedResponses)
-
     if (currentValue.answer.type === 'Question Group') {
       const responsesToSave = (
         (currentValue.field.options?.subFields || [])
-        .map(({ id }) => templatedResponses.find(f => f.fieldId === id)!)
+        .map(({ id }) => responses.find(f => f.fieldId === id)!)
         .filter(f => f && f?.answer.type !== 'file' && f?.answer.type !== 'files')
       )
       if (responsesToSave.length) {
@@ -1478,7 +1474,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         })
         .catch(console.error)
       }
-    }
+    } 
     else if (currentValue?.answer?.type !== 'file' && currentValue?.answer?.type !== 'files' && (formResponseId || accessCode)) {
       session.api.form_responses.save_field_response({
         accessCode,
@@ -1493,26 +1489,17 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
     try { window.scrollTo({ top: 0 }) } catch(err) {} // scroll to top if needed
     setActiveField(activeField => {
-      let newField = getNextField(activeField, currentValue, templatedResponses, logicOptions)
+      let newField = getNextField(activeField, currentValue, responses, logicOptions)
 
       // when autoadvancing, prevent adding duplicates by checking whether already on stack
       if (newField !== undefined && !prevFieldStackRef.current.find(v => v.value.id === activeField?.value.id)) {
         prevFieldStackRef.current.push(activeField)
         setCurrentPageIndex(i => i + 1)
       }
-
-      const fieldToReturn = newField || activeField
-
-      // Apply templating to the active field by pulling from the templated responses
-      // This ensures the UI displays templated titles/descriptions immediately
-      const templatedResponse = templatedResponses.find(r => r.fieldId === fieldToReturn.value.id)
-      if (templatedResponse) {
-        fieldToReturn.value = templatedResponse.field
-      }
-
-      return fieldToReturn
+      
+      return newField || activeField
     })
-  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex, applyTemplatingToResponses])
+  }, [prevFieldStackRef, currentValue, isNextDisabled, updateFormResponse, session, responses, logicOptions, accessCode, formResponseId, setActiveField, setCurrentPageIndex])
 
   useEffect(() => {
     if (dontAutoadvance) return
@@ -1636,12 +1623,12 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   return {
     enduserId,
     formResponseId,
-    activeField,
+    activeField: templatedActiveField, // Use templated activeField for UI display
     currentValue,
     currentFileValue,
     getResponsesWithQuestionGroupAnswers,
     fields,
-    responses,
+    responses: templatedResponses, // Use templated responses - only display fields differ, answer values unchanged
     selectedFiles,
     onFieldChange,
     onAddFile,

package/src/Forms/inputs.v2.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import axios from "axios"
-import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormControl, FormControlLabel, FormLabel, Grid, IconButton as MuiIconButton, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
+import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
@@ -23,7 +23,7 @@ import LanguageIcon from '@mui/icons-material/Language';
 
 import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js'; 
-import { CheckCircleOutline, Delete, Edit, ExpandMore, UploadFile } from "@mui/icons-material"
+import { CheckCircleOutline, Delete, Edit, UploadFile } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
@@ -1511,7 +1511,6 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
 export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: FormInputProps<'multiple_choice'>) => {
   const value = typeof _value === 'string' ? [_value] : _value // if loading existingResponses, allows them to be a string
   const { choices, radio, other, optionDetails } = field.options as MultipleChoiceOptions
-  const [expandedDescriptions, setExpandedDescriptions] = useState<Record<number, boolean>>({})
 
   // current other string
   const enteringOtherStringRef = React.useRef('') // if typing otherString as prefix of a checkbox value, don't auto-select
@@ -1524,13 +1523,6 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
     return optionDetails?.find(detail => detail.option === choice)?.description
   }, [optionDetails])
 
-  const toggleDescription = useCallback((index: number) => {
-    setExpandedDescriptions(prev => ({
-      ...prev,
-      [index]: !prev[index]
-    }))
-  }, [])
-
   return (
     <Grid container alignItems="center" rowGap={1.5}>
       {radio
@@ -1544,7 +1536,6 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
             {(choices ?? []).map((c, i) => {
               const description = getDescriptionForChoice(c)
               const hasDescription = !!description
-              const isExpanded = expandedDescriptions[i]
               const isSelected = !!value?.includes(c) && c !== otherString
 
               return (
@@ -1558,7 +1549,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       borderColor: 'primary.main',
                       borderRadius: 1,
                       padding: '16px 16px',
-                      marginBottom: '12px',
+                      marginBottom: hasDescription ? '8px' : '12px',
                       cursor: 'pointer',
                       backgroundColor: 'transparent',
                       boxSizing: 'border-box',
@@ -1569,32 +1560,13 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                     onClick={() => onChange(value?.includes(c) ? [] : [c], field.id)}
                   >
                     <Typography component="span" sx={{ flex: 1, color: 'primary.main', fontSize: 13, fontWeight: 600 }}>{c}</Typography>
-                    {hasDescription && (
-                      <MuiIconButton
-                        className="expand-button"
-                        size="small"
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation()
-                          toggleDescription(i)
-                        }}
-                        sx={{
-                          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                          transition: 'transform 0.2s',
-                          ml: 1
-                        }}
-                      >
-                        <ExpandMore fontSize="small" />
-                      </MuiIconButton>
-                    )}
                   </Box>
                   {hasDescription && (
-                    <Collapse in={isExpanded}>
-                      <Box sx={{ pl: 2, pr: 2, pb: 1, pt: 1 }}>
-                        <Typography variant="body2" color="text.secondary">
-                          {description}
-                        </Typography>
-                      </Box>
-                    </Collapse>
+                    <Box sx={{ pl: 2, pr: 2, pb: 1, mb: 1 }}>
+                      <Typography style={{ fontSize: 14, color: '#00000099' }}>
+                        {description}
+                      </Typography>
+                    </Box>
                   )}
                 </Box>
               )
@@ -1605,7 +1577,6 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
           (choices ?? []).map((c, i) => {
             const description = getDescriptionForChoice(c)
             const hasDescription = !!description
-            const isExpanded = expandedDescriptions[i]
 
             return (
               <Grid xs={12} key={i}>
@@ -1619,10 +1590,6 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       boxSizing: 'border-box'
                     }}
                     onClick={(e) => {
-                      // Don't trigger selection if clicking on the expand button
-                      if ((e.target as HTMLElement).closest('.expand-button')) {
-                        return
-                      }
                       onChange(
                         (
                           value?.includes(c)
@@ -1647,32 +1614,13 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       inputProps={{ 'aria-label': 'primary checkbox' }}
                     />
                     <Typography component="span" sx={{ flex: 1 }}>{c}</Typography>
-                    {hasDescription && (
-                      <MuiIconButton
-                        className="expand-button"
-                        size="small"
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation()
-                          toggleDescription(i)
-                        }}
-                        sx={{
-                          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                          transition: 'transform 0.2s',
-                          ml: 1
-                        }}
-                      >
-                        <ExpandMore fontSize="small" />
-                      </MuiIconButton>
-                    )}
                   </Box>
                   {hasDescription && (
-                    <Collapse in={isExpanded}>
-                      <Box sx={{ pl: '42px', pr: 2, pb: 1 }}>
-                        <Typography variant="body2" color="text.secondary">
-                          {description}
-                        </Typography>
-                      </Box>
-                    </Collapse>
+                    <Box sx={{ pl: '42px', pr: 2, pb: 1 }}>
+                      <Typography style={{ fontSize: 14, color: '#00000099' }}>
+                        {description}
+                      </Typography>
+                    </Box>
                   )}
                 </Box>
               </Grid>