@tellescope/react-components 1.230.1 → 1.231.0

package/package.json

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

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -190,6 +190,7 @@ export const QuestionForField = ({
   const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
+  const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
 
   const validationMessage = validateField(field)
 
@@ -324,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} />
@@ -357,6 +358,9 @@ export const QuestionForField = ({
         : field.type === 'Medications' ? (
           <Medications field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Medications'>} form={form}/>
         )
+        : field.type === 'Beluga Patient Preference' ? (
+          <BelugaPatientPreference field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Beluga Patient Preference'>} form={form}/>
+        )
         : field.type === 'Insurance' ? (
           <Insurance field={field} value={value.answer.value as any} form={form}
             onDatabaseSelect={handleDatabaseSelect}

package/src/Forms/forms.v2.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, WithTheme, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -183,6 +183,7 @@ export const QuestionForField = ({
   const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
+  const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
 
   const validationMessage = validateField(field)
 
@@ -203,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
@@ -222,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>
       }
 
@@ -316,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)} />
@@ -349,6 +352,9 @@ export const QuestionForField = ({
         : field.type === 'Medications' ? (
           <Medications field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Medications'>} form={form}/>
         )
+        : field.type === 'Beluga Patient Preference' ? (
+          <BelugaPatientPreference field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Beluga Patient Preference'>} form={form}/>
+        )
         : field.type === 'Insurance' ? (
           <Insurance field={field} value={value.answer.value as any} form={form}
             onDatabaseSelect={handleDatabaseSelect}
@@ -431,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

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
 import { Session } from "@tellescope/sdk"
 import { ChangeHandler, FormFieldNode } from "./types"
 import { DatabaseRecord, Enduser, Form, FormField, FormResponse } from "@tellescope/types-client"
@@ -9,7 +9,7 @@ import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields
 import ReactGA from "react-ga4";
 
 import isEmail from "validator/lib/isEmail"
-import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
+import { append_current_utm_params, emit_gtm_event, field_can_autoadvance, getLocalTimezone, get_time_values, get_utm_params, is_object, object_is_empty, read_local_storage, replace_form_field_template_values, responses_satisfy_conditions, update_local_storage } from "@tellescope/utilities"
 
 export const useFlattenedTree = (root?: FormFieldNode) => {
   const flat: FormField[] = []
@@ -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 }
@@ -1589,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.tsx

@@ -2948,6 +2948,164 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
   )
 }
 
+export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }: FormInputProps<'Beluga Patient Preference'>) => {
+  const value = Array.isArray(_value) ? _value : []
+
+  return (
+    <Grid container direction="column" sx={{ mt: 2 }}>
+    {value.map((v, i) => (
+      <>
+      <Grid item key={i}>
+      <Grid container alignItems="center" wrap="nowrap">
+        <Grid item sx={{ width: '100%'}}>
+        <Grid container direction="column" spacing={1.5}>
+          <Grid item>
+            <TextField label="Medication Name" size="small" fullWidth required
+              value={v.name ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, name: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={6}>
+                <TextField label="Strength" size="small" fullWidth required
+                  value={v.strength ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, strength: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <TextField label="Dispense Unit" size="small" fullWidth required
+                  value={v.dispenseUnit ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, dispenseUnit: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <Grid container spacing={1}>
+              <Grid item xs={12} md={4}>
+                <TextField label="Quantity" size="small" fullWidth required
+                  value={v.quantity ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, quantity: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Refills" size="small" fullWidth required
+                  value={v.refills ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, refills: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+              <Grid item xs={12} md={4}>
+                <TextField label="Days Supply" size="small" fullWidth required
+                  value={v.daysSupply ?? ''}
+                  onChange={e =>
+                    onChange(
+                      value.map((_v, _i) => (
+                        i === _i ? { ..._v, daysSupply: e.target.value } : _v
+                      )),
+                      field.id,
+                    )
+                  }
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid item>
+            <TextField label="Sig (Instructions)" size="small" fullWidth required multiline rows={2}
+              value={v.sig ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, sig: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <TextField label="Med ID (NDC11)" size="small" fullWidth required
+              value={v.medId ?? ''}
+              onChange={e =>
+                onChange(
+                  value.map((_v, _i) => (
+                    i === _i ? { ..._v, medId: e.target.value } : _v
+                  )),
+                  field.id,
+                )
+              }
+            />
+          </Grid>
+
+          <Grid item>
+            <Typography color="primary" sx={{ textDecoration: 'underline', cursor: 'pointer' }}
+              onClick={() => onChange(value.filter((_, _i) => i !== _i), field.id)}
+            >
+              Remove medication
+            </Typography>
+          </Grid>
+        </Grid>
+        </Grid>
+      </Grid>
+      </Grid>
+
+      <Grid item><Divider flexItem sx={{ my: 1 }} /></Grid>
+      </>
+    ))}
+
+      <Grid item>
+        <Button color="primary" variant="outlined"
+          onClick={() => onChange([
+            ...value,
+            { name: '', strength: '', quantity: '', refills: '', daysSupply: '', sig: '', dispenseUnit: '', medId: '' }
+          ], field.id)}
+        >
+          Add Medication
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}
+
 export const contact_is_valid = (e: Partial<Enduser>) => {
   if (e.email) {
     try {