@tellescope/react-components 1.237.4 → 1.237.6

package/src/Forms/inputs.tsx

@@ -13,7 +13,7 @@ import LinearProgress from '@mui/material/LinearProgress';
 import DatePicker from "react-datepicker";
 import { datepickerCSS } from "./css/react-datepicker" // avoids build issue with RN
 import { CancelIcon, FileBlob, IconButton, LabeledIconButton, LoadingButton, Styled, form_display_text_for_language, isDateString, useProducts, useResolvedSession } from ".."
-import { CalendarEvent, DatabaseRecord, FormField } from "@tellescope/types-client"
+import { CalendarEvent, DatabaseRecord, Form, FormField } from "@tellescope/types-client"
 import { css } from '@emotion/css'
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -202,7 +202,7 @@ const getListStyle = (isDraggingOver: boolean) => ({
   // padding: `${grid}px`,
   // width: '250px'
 });
-export const RankingInput = ({ field, value, onChange }: FormInputProps<'ranking'>) => {
+export const RankingInput = ({ field, value, onChange, form }: FormInputProps<'ranking'>) => {
   return (
     <Grid container direction='column'>
     {/* <Typography>Most</Typography> */}
@@ -251,7 +251,7 @@ export const RankingInput = ({ field, value, onChange }: FormInputProps<'ranking
     </DragDropContext>
 
     <Typography color="primary" style={{ marginTop: 3 }}>
-      Drag and drop to re-order the above options
+      {form_display_text_for_language(form, "Drag and drop to re-order the above options")}
     </Typography>
 
     {/* <Typography>Least</Typography> */}
@@ -289,7 +289,7 @@ export const DateInput = ({
   )
 }
 
-export const TableInput = ({ field, value=[], onChange, ...props }: FormInputProps<'Input Table'>) => {
+export const TableInput = ({ field, value=[], onChange, form, ...props }: FormInputProps<'Input Table'>) => {
   const choices = field.options?.tableChoices
 
   const handleNewRow = useCallback(() => {
@@ -333,7 +333,7 @@ export const TableInput = ({ field, value=[], onChange, ...props }: FormInputPro
   }, [field.isOptional, value, handleNewRow])
 
   if (!choices?.length) {
-    return <Typography color="error">No input choices available</Typography>
+    return <Typography color="error">{form_display_text_for_language(form, "No input choices available")}</Typography>
   }
 
   const length = choices.length || 1
@@ -402,7 +402,7 @@ export const TableInput = ({ field, value=[], onChange, ...props }: FormInputPro
           ))}
 
           <Grid item sx={{ ml: 'auto', width: iconWidth }}>
-            <LabeledIconButton Icon={CancelIcon} label="Remove" onClick={() => handleRemove(i)} 
+            <LabeledIconButton Icon={CancelIcon} label={form_display_text_for_language(form, "Remove")} onClick={() => handleRemove(i)} 
               disabled={!field.isOptional && value.length === 1}
             />
           </Grid>
@@ -413,7 +413,7 @@ export const TableInput = ({ field, value=[], onChange, ...props }: FormInputPro
       ))}
 
       <Button variant="outlined" size="small" onClick={handleNewRow} sx={{ width: 200 }}>
-        Add new entry
+        {form_display_text_for_language(form, "Add new entry")}
       </Button>
     </Grid>
   )
@@ -432,7 +432,7 @@ const CustomDateStringInput = forwardRef((props: TextFieldProps & { inputProps?:
     />
   )
 })
-export const DateStringInput = ({ field, value, onChange, ...props }: FormInputProps<'string'>) => {
+export const DateStringInput = ({ field, value, onChange, form, ...props }: FormInputProps<'string'>) => {
   const inputRef = useRef(null);
 
   // if (value && isDateString(value)) {
@@ -466,7 +466,7 @@ export const DateStringInput = ({ field, value, onChange, ...props }: FormInputP
         />
       )
       : (
-        <AutoFocusTextField {...props} required={!field.isOptional} fullWidth placeholder="MM-DD-YYYY" value={value}
+        <AutoFocusTextField {...props} required={!field.isOptional} fullWidth placeholder={form_display_text_for_language(form, "MM-DD-YYYY")} value={value}
           label={(!field.title && field.placeholder) ? field.placeholder : props.label}
           onChange={e => {
             const v = e.target.value || ''
@@ -667,8 +667,8 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
           }
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: (inputProps || defaultInputProps).sx }}
-            required={!field.isOptional} size="small" label={"Insurer"}
-            placeholder={(field.options?.dataSource === CANVAS_TITLE || field.options?.dataSource === BRIDGE_TITLE) ? "Search insurer..." : "Insurer"}
+            required={!field.isOptional} size="small" label={form_display_text_for_language(form, "Insurer")}
+            placeholder={(field.options?.dataSource === CANVAS_TITLE || field.options?.dataSource === BRIDGE_TITLE) ? form_display_text_for_language(form, "Search insurer...") : form_display_text_for_language(form, "Insurer")}
           />
         )}
       />
@@ -690,7 +690,7 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
       </Grid>
 
       <Grid item xs={12} sm={6}>
-        <DateStringInput size="small" label="Plan Start Date"
+        <DateStringInput size="small" label={form_display_text_for_language(form, "Plan Start Date")}
           inputProps={inputProps}
           field={{
             ...field,
@@ -717,7 +717,7 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
       }
 
       <Grid item xs={12}>
-        <StringSelector size="small" label="Relationship to Policy Owner"
+        <StringSelector size="small" label={form_display_text_for_language(form, "Relationship to Policy Owner")}
           inputProps={inputProps}
           options={
             (
@@ -737,11 +737,11 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
       {(value?.relationship || 'Self') !== 'Self' &&
       <>
         <Grid item xs={12}>
-          <Typography sx={{ fontWeight: 'bold' }}>Policy Owner Details</Typography>
+          <Typography sx={{ fontWeight: 'bold' }}>{form_display_text_for_language(form, "Policy Owner Details")}</Typography>
         </Grid>
 
         <Grid item xs={6}>
-          <TextField label="First Name" size="small" InputProps={inputProps || defaultInputProps} fullWidth
+          <TextField label={form_display_text_for_language(form, "First Name")} size="small" InputProps={inputProps || defaultInputProps} fullWidth
             value={value?.relationshipDetails?.fname || ''}
             required={!field.isOptional}
             onChange={e =>
@@ -753,7 +753,7 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
           />
         </Grid>
         <Grid item xs={6}>
-          <TextField label="Last Name" size="small" InputProps={inputProps || defaultInputProps} fullWidth
+          <TextField label={form_display_text_for_language(form, "Last Name")} size="small" InputProps={inputProps || defaultInputProps} fullWidth
             value={value?.relationshipDetails?.lname || ''}
             required={!field.isOptional}
             onChange={e =>
@@ -765,7 +765,7 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
           />
         </Grid>
         <Grid item xs={6}>
-          <StringSelector options={TELLESCOPE_GENDERS} size="small" label="Gender"
+          <StringSelector options={TELLESCOPE_GENDERS} size="small" label={form_display_text_for_language(form, "Gender")}
             inputProps={inputProps}
             value={value?.relationshipDetails?.gender || ''}
             required={!field.isOptional}
@@ -778,7 +778,7 @@ export const InsuranceInput = ({ field, onDatabaseSelect, value, onChange, form,
           />
         </Grid>
         <Grid item xs={6}>
-          <DateStringInput size="small" label="Date of Birth"
+          <DateStringInput size="small" label={form_display_text_for_language(form, "Date of Birth")}
             inputProps={inputProps}
             field={{
               ...field,
@@ -962,7 +962,7 @@ const StringSelector = ({ options, value, onChange, required, getDisplayValue, i
   </FormControl>
 )
 
-export const BridgeEligibilityInput = ({ field, value, onChange, responses, enduser, inputProps, enduserId, ...props }: FormInputProps<'Bridge Eligibility'> & {
+export const BridgeEligibilityInput = ({ field, value, onChange, responses, enduser, inputProps, enduserId, form, ...props }: FormInputProps<'Bridge Eligibility'> & {
   inputProps?: { sx: SxProps },
 }) => {
   const session = useResolvedSession()
@@ -1375,7 +1375,7 @@ export const BridgeEligibilityInput = ({ field, value, onChange, responses, endu
       {polling && (
         <Grid item>
           <Typography variant="body2" color="primary">
-            Polling for results... (this may take 15-30 seconds)
+            {form_display_text_for_language(form, "Polling for results... (this may take 15-30 seconds)")}
           </Typography>
         </Grid>
       )}
@@ -1385,8 +1385,8 @@ export const BridgeEligibilityInput = ({ field, value, onChange, responses, endu
           <LoadingButton
             variant="outlined"
             onClick={checkProviderEligibility}
-            submitText="Check Provider Eligibility (Free)"
-            submittingText="Checking..."
+            submitText={form_display_text_for_language(form, "Check Provider Eligibility (Free)")}
+            submittingText={form_display_text_for_language(form, "Checking...")}
             submitting={loading && !polling}
             disabled={!field.options?.bridgeServiceTypeIds?.length || loading || polling}
           />
@@ -1395,8 +1395,8 @@ export const BridgeEligibilityInput = ({ field, value, onChange, responses, endu
           <LoadingButton
             variant="outlined"
             onClick={checkServiceEligibility}
-            submitText="Check Service Eligibility (Paid)"
-            submittingText={polling ? "Polling..." : "Initiating..."}
+            submitText={form_display_text_for_language(form, "Check Service Eligibility (Paid)")}
+            submittingText={polling ? form_display_text_for_language(form, "Polling...") : form_display_text_for_language(form, "Initiating...")}
             submitting={loading || polling}
             disabled={!field.options?.bridgeServiceTypeIds?.length || loading || polling}
           />
@@ -1578,10 +1578,10 @@ export const AddressInput = ({ field, form, value, onChange, ...props }: FormInp
 
         {field.fullZIP &&
           <Grid item xs={3}>
-            <TextField {...props} size="small" label="ZIP+4" required={!field.isOptional && field.fullZIP} 
+            <TextField {...props} size="small" label={form_display_text_for_language(form, "ZIP+4")} required={!field.isOptional && field.fullZIP}
               InputProps={defaultInputProps}
-              value={value?.zipPlusFour ?? ''} 
-              placeholder="ZIP + 4" 
+              value={value?.zipPlusFour ?? ''}
+              placeholder={form_display_text_for_language(form, "ZIP + 4")} 
               onChange={e => 
                 onChange({
                   ...value as any,
@@ -1637,7 +1637,7 @@ export const ESignatureTerms = () => {
   )
 }
 
-export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange }: FormInputProps<'signature'>) => {
+export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange, form }: FormInputProps<'signature'>) => {
   const prefill = (
     field.options?.prefillSignature && enduser?.fname && enduser.lname
       ? `${enduser.fname} ${enduser.lname}`
@@ -1671,8 +1671,8 @@ export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange
       }
       {!field.options?.pdfAttachment && field.options?.signatureUrl &&
         <Grid container direction="column" sx={{ mb:  2 }}>
-          <iframe src={field.options.signatureUrl} 
-            style={{ 
+          <iframe src={field.options.signatureUrl}
+            style={{
               border: 'none',
               height: 400,
               width: '100%',
@@ -1680,12 +1680,12 @@ export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange
             }}
           />
           <a href={field.options.signatureUrl} target="_blank" rel="noopener noreferrer">
-            View document in new tab
+            {form_display_text_for_language(form, "View document in new tab")}
           </a>
         </Grid>
       }
 
-      <Grid item xs={12}> 
+      <Grid item xs={12}>
         <Checkbox
           style={{ margin: 0, marginTop: 5, padding: 0, paddingRight: 3 }}
           color="primary"
@@ -1693,9 +1693,8 @@ export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange
           onClick={() => handleConsentChange()}
           inputProps={{ 'aria-label': 'consent to e-signature checkbox' }}
         />
-        <Typography component="span" style={{ position: 'relative', top: 5, left: 2 }}> 
-          I consent to 
-          use <a href={`/e-signature-terms?name=${field.options?.esignatureTermsCompanyName || ''}`} target="_blank" rel="noopener noreferrer"> electronic signatures </a>
+        <Typography component="span" style={{ position: 'relative', top: 5, left: 2 }}>
+          {form_display_text_for_language(form, "I consent to use")} <a href={`/e-signature-terms?name=${field.options?.esignatureTermsCompanyName || ''}`} target="_blank" rel="noopener noreferrer"> {form_display_text_for_language(form, "electronic signatures")} </a>
         </Typography>
       </Grid>
 
@@ -1703,14 +1702,14 @@ export const SignatureInput = ({ value, field, autoFocus=true, enduser, onChange
         <TextField disabled={!value?.signed} autoFocus={autoFocus}
           style={{ width: '100%'}}
           size="small"
-          aria-label="Full Name"
-          value={value?.fullName} 
-          placeholder={prefill || "Full Name"} variant="outlined" 
+          aria-label={form_display_text_for_language(form, "Full Name")}
+          value={value?.fullName}
+          placeholder={prefill || form_display_text_for_language(form, "Full Name")} variant="outlined"
           onChange={e => handleNameChange(e.target.value)}
           InputProps={defaultInputProps}
         />
-        <Typography color="primary" style={{ fontSize: 15, marginTop: 2 }}> 
-          Enter your legal full name to complete the signature
+        <Typography color="primary" style={{ fontSize: 15, marginTop: 2 }}>
+          {form_display_text_for_language(form, "Enter your legal full name to complete the signature")}
         </Typography>
       </Grid>
     </Grid>
@@ -1747,7 +1746,7 @@ export async function convertHEIC (file: FileBlob | string){
 };
 
 const value_is_image = (f?: { type?: string })=> f?.type?.includes('image')
-export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles }: FormInputProps<'file'> & { existingFileName?: string }) => {
+export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'file'> & { existingFileName?: string }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
@@ -1826,16 +1825,16 @@ export const FileInput = ({ value, onChange, field, existingFileName, uploadingF
               ? (
                 <Grid container direction="column" alignItems="center">
                   <Grid item>
-                    <AddPhotoAlternateIcon color="primary" /> 
+                    <AddPhotoAlternateIcon color="primary" />
                   </Grid>
                   <Grid item>
                     <Typography sx={{ fontSize: 14, textAlign: 'center' }}>
-                      Select file or take picture
+                      {form_display_text_for_language(form, "Select file or take picture")}
                     </Typography>
                   </Grid>
                 </Grid>
               )
-              : "Select a File"
+              : form_display_text_for_language(form, "Select a File")
           }
         </p> 
       }
@@ -1864,7 +1863,7 @@ export const safe_create_url = (file: any) => {
   }
 }
 
-export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles }: FormInputProps<'files'> & { existingFileName?: string }) => {
+export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles, form }: FormInputProps<'files'> & { existingFileName?: string }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
@@ -1915,23 +1914,23 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
       <input {...getInputProps({ multiple: false })}  />
       {
         <p> 
-        {isDragActive 
-          ? "Drop to select files"
+        {isDragActive
+          ? form_display_text_for_language(form, "Drop to select files")
           : capture_is_supported()
             ? (
               <Grid container direction="column" alignItems="center">
                 <Grid item>
-                  <AddPhotoAlternateIcon color="primary" /> 
+                  <AddPhotoAlternateIcon color="primary" />
                 </Grid>
                 <Grid item>
                   <Typography sx={{ fontSize: 14, textAlign: 'center' }}>
-                    Select files or take pictures
+                    {form_display_text_for_language(form, "Select files or take pictures")}
                   </Typography>
                 </Grid>
               </Grid>
             )
-            : "Select Files"
-          // preview 
+            : form_display_text_for_language(form, "Select Files")
+          // preview
           //   ? <img src={preview} style={{ paddingLeft: '10%', width : '80%', maxHeight: 200 }} />
           //   : `${truncate_string(value.name, { length: 30, showEllipsis: true })} selected!`
         }
@@ -1969,7 +1968,7 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
         </Grid>
 
         <Grid item>
-          <LabeledIconButton label="Remove"
+          <LabeledIconButton label={form_display_text_for_language(form, "Remove")}
             Icon={Delete}
             onClick={() => onChange(value.filter((f, _i) => i !== _i), field.id)}
           />
@@ -1978,7 +1977,7 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
       </Grid>
     ))}
     </Grid>
-    
+
     {error && 
       <Grid item alignSelf="center" sx={{ mt: 0.5 }}>
         <Typography color="error">{error}</Typography>
@@ -2360,7 +2359,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId,
             <LinearProgress />
           </Grid>
           <Grid item>
-            <Typography>Loading product information...</Typography>
+            <Typography>{form_display_text_for_language(form, "Loading product information...")}</Typography>
           </Grid>
         </Grid>
       )
@@ -2520,15 +2519,16 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId,
     <Elements stripe={stripePromise} options={{
       clientSecret,
     }}>
-      <StripeForm businessName={businessName} onSuccess={() => onChange(answertext || 'Saved card details', field.id)} 
+      <StripeForm businessName={businessName} onSuccess={() => onChange(answertext || 'Saved card details', field.id)}
         cost={cost}
         field={field}
+        form={form}
       />
     </Elements>
   )
 }
 
-const StripeForm = ({ businessName, onSuccess, field, cost } : { businessName: string, onSuccess: () => void, field: FormField, cost: number }) => {
+const StripeForm = ({ businessName, onSuccess, field, cost, form } : { businessName: string, onSuccess: () => void, field: FormField, cost: number, form?: Form }) => {
   const stripe = useStripe();
   const elements = useElements()
 
@@ -2578,7 +2578,7 @@ const StripeForm = ({ businessName, onSuccess, field, cost } : { businessName: s
       <Button variant="contained" color="primary" type="submit" sx={{ mt: 1 }}
         disabled={!(stripe && ready)}
       >
-        {field.options?.chargeImmediately ? 'Make Payment' : 'Save Payment Details'}
+        {field.options?.chargeImmediately ? form_display_text_for_language(form, 'Make Payment') : form_display_text_for_language(form, 'Save Payment Details')}
       </Button>
 
       {cost > 0 && 
@@ -3218,7 +3218,7 @@ type CanvasMedicationResult = {
   entry?: { resource: { code: { coding: { system: string, code: string, display: string } []}} }[]
 }
 
-export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputProps<'Medications'>) => {
+export const CanvasMedicationsInput = ({ field, value=[], onChange, form }: FormInputProps<'Medications'>) => {
   const session = useResolvedSession()
   const [query, setQuery] = useState('')
   const [results, setResults] = useState<MedicationResponse[]>([])
@@ -3266,7 +3266,7 @@ export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputP
     <Grid container direction="column" spacing={1}>
       <Grid item>
       <Autocomplete multiple value={value} options={results} style={{ marginTop: 5 }}
-        noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+        noOptionsText={query.length ? form_display_text_for_language(form, 'No results found') : form_display_text_for_language(form, 'Type to start search')}
         onChange={(e, v) => {
           if (!v) { return }
           onChange(v, field.id)
@@ -3276,7 +3276,7 @@ export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputP
         inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-            required={!field.isOptional} size="small" label="" placeholder="Search medications..."
+            required={!field.isOptional} size="small" label="" placeholder={form_display_text_for_language(form, "Search medications...")}
           />
         )}
         renderTags={(value, getTagProps) =>
@@ -3302,7 +3302,7 @@ export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputP
 
           <Grid item>
             <TextField InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" 
-              label="Medication instructions: how much you take, how often, and when"
+              label={form_display_text_for_language(form, "Medication instructions: how much you take, how often, and when")}
               value={medication.dosage?.description || ''} 
               onChange={e => (
                 onChange((value || []).map((v, _i) => 
@@ -3325,7 +3325,7 @@ export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputP
   )
 }
 
-export const MedicationsInput = ({ field, value, onChange, ...props }: FormInputProps<'Medications'>) => {
+export const MedicationsInput = ({ field, value, onChange, form, ...props }: FormInputProps<'Medications'>) => {
   const { displayTerms, doneLoading, getCodesForDrug, getDrugsForDisplayTerm } = useMedications({
     dontFetch: field.options?.dataSource === CANVAS_TITLE
   })
@@ -3416,10 +3416,10 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
                 field.id,
               )
             }}
-            renderInput={params => 
-              <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} required={!field.isOptional} label="Search" size="small" fullWidth />
+            renderInput={params =>
+              <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} required={!field.isOptional} label={form_display_text_for_language(form, "Search")} size="small" fullWidth />
             }
-          /> 
+          />
           </Grid>
 
           {v.displayTerm && v.drugName !== "Unknown" && !v.otherDrug &&
@@ -3442,15 +3442,15 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
                   if (!drug) return
 
                   const info = (
-                    drug.name === 'Unknown' 
+                    drug.name === 'Unknown'
                       ? await getCodesForDrug(v.displayTerm) // might get us a value, better than searching Unknown or keeping a prior value
                       : await getCodesForDrug(drug.name)
                   )
                   onChange(
                     (value ?? []).map((_v, _i) => (
                       i === _i
-                        ? { 
-                          ..._v, 
+                        ? {
+                          ..._v,
                           drugName: drug.name,
                           drugSynonym: drug.synonym || '',
                           ...info,
@@ -3460,16 +3460,16 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
                     field.id,
                   )
                 }}
-                renderInput={params => 
-                  <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} required={!field.isOptional} label="Drug Select" size="small" fullWidth />
+                renderInput={params =>
+                  <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} required={!field.isOptional} label={form_display_text_for_language(form, "Drug Select")} size="small" fullWidth />
                 }
-              /> 
+              />
             </Grid>
           }
 
-          {v.displayTerm && (v.drugName === "Unknown" || !v.drugName) && 
+          {v.displayTerm && (v.drugName === "Unknown" || !v.drugName) &&
             <Grid item sx={{ mt: 1 }}>
-              <TextField label='Other Drug' fullWidth size="small" required
+              <TextField label={form_display_text_for_language(form, 'Other Drug')} fullWidth size="small" required
                 InputProps={defaultInputProps}
                 value={value?.find((v, _i) => _i === i)?.otherDrug ?? ''}
                 onChange={e => (
@@ -3562,7 +3562,7 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
 
           {v.displayTerm &&
             <Grid item sx={{ mt: 1.25 }}>
-              <TextField label="Reason for taking medication" size="small" fullWidth
+              <TextField label={form_display_text_for_language(form, "Reason for taking medication")} size="small" fullWidth
                 InputProps={defaultInputProps}
                 value={v.reasonForTaking ?? ''} 
                 onChange={e => 
@@ -3586,7 +3586,7 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
             <Typography color="primary" sx={{ textDecoration: 'underline', cursor: 'pointer' }}
               onClick={() => onChange((value ?? []).filter((_, _i) => i !== _i), field.id)}
             >
-              Remove medication
+              {form_display_text_for_language(form, "Remove medication")}
             </Typography>
           </Grid>
 
@@ -3614,17 +3614,17 @@ export const MedicationsInput = ({ field, value, onChange, ...props }: FormInput
     ))}
 
       <Grid item>
-        <Button color="primary" variant="outlined" 
+        <Button color="primary" variant="outlined"
           onClick={() => onChange([...(value ?? []), { displayTerm: '', drugName: '' }], field.id)}
         >
-          Add Medication
+          {form_display_text_for_language(form, "Add Medication")}
         </Button>
       </Grid>
     </Grid>
   )
 }
 
-export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }: FormInputProps<'Beluga Patient Preference'>) => {
+export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange, form }: FormInputProps<'Beluga Patient Preference'>) => {
   const value = Array.isArray(_value) ? _value : []
 
   return (
@@ -3636,7 +3636,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
         <Grid item sx={{ width: '100%'}}>
         <Grid container direction="column" spacing={1.5}>
           <Grid item>
-            <TextField label="Medication Name" size="small" fullWidth required
+            <TextField label={form_display_text_for_language(form, "Medication Name")} size="small" fullWidth required
               value={v.name ?? ''}
               onChange={e =>
                 onChange(
@@ -3652,7 +3652,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
           <Grid item>
             <Grid container spacing={1}>
               <Grid item xs={12} md={6}>
-                <TextField label="Strength" size="small" fullWidth required
+                <TextField label={form_display_text_for_language(form, "Strength")} size="small" fullWidth required
                   value={v.strength ?? ''}
                   onChange={e =>
                     onChange(
@@ -3665,7 +3665,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
                 />
               </Grid>
               <Grid item xs={12} md={6}>
-                <TextField label="Dispense Unit" size="small" fullWidth required
+                <TextField label={form_display_text_for_language(form, "Dispense Unit")} size="small" fullWidth required
                   value={v.dispenseUnit ?? ''}
                   onChange={e =>
                     onChange(
@@ -3683,7 +3683,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
           <Grid item>
             <Grid container spacing={1}>
               <Grid item xs={12} md={4}>
-                <TextField label="Quantity" size="small" fullWidth required
+                <TextField label={form_display_text_for_language(form, "Quantity")} size="small" fullWidth required
                   value={v.quantity ?? ''}
                   onChange={e =>
                     onChange(
@@ -3696,7 +3696,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
                 />
               </Grid>
               <Grid item xs={12} md={4}>
-                <TextField label="Refills" size="small" fullWidth required
+                <TextField label={form_display_text_for_language(form, "Refills")} size="small" fullWidth required
                   value={v.refills ?? ''}
                   onChange={e =>
                     onChange(
@@ -3709,7 +3709,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
                 />
               </Grid>
               <Grid item xs={12} md={4}>
-                <TextField label="Days Supply" size="small" fullWidth required
+                <TextField label={form_display_text_for_language(form, "Days Supply")} size="small" fullWidth required
                   value={v.daysSupply ?? ''}
                   onChange={e =>
                     onChange(
@@ -3725,7 +3725,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
           </Grid>
 
           <Grid item>
-            <TextField label="Sig (Instructions)" size="small" fullWidth required multiline rows={2}
+            <TextField label={form_display_text_for_language(form, "Sig (Instructions)")} size="small" fullWidth required multiline rows={2}
               value={v.sig ?? ''}
               onChange={e =>
                 onChange(
@@ -3739,7 +3739,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
           </Grid>
 
           <Grid item>
-            <TextField label="Med ID (NDC11)" size="small" fullWidth required
+            <TextField label={form_display_text_for_language(form, "Med ID (NDC11)")} size="small" fullWidth required
               value={v.medId ?? ''}
               onChange={e =>
                 onChange(
@@ -3756,7 +3756,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
             <Typography color="primary" sx={{ textDecoration: 'underline', cursor: 'pointer' }}
               onClick={() => onChange(value.filter((_, _i) => i !== _i), field.id)}
             >
-              Remove medication
+              {form_display_text_for_language(form, "Remove medication")}
             </Typography>
           </Grid>
         </Grid>
@@ -3775,7 +3775,7 @@ export const BelugaPatientPreferenceInput = ({ field, value: _value, onChange }:
             { name: '', strength: '', quantity: '', refills: '', daysSupply: '', sig: '', dispenseUnit: '', medId: '' }
           ], field.id)}
         >
-          Add Medication
+          {form_display_text_for_language(form, "Add Medication")}
         </Button>
       </Grid>
     </Grid>
@@ -3802,7 +3802,7 @@ export const contact_is_valid = (e: Partial<Enduser>) => {
   }
 }
 
-export const RelatedContactsInput = ({ field, value: _value, onChange, error: parentError, ...props }: FormInputProps<'Related Contacts'>) => {
+export const RelatedContactsInput = ({ field, value: _value, onChange, error: parentError, form, ...props }: FormInputProps<'Related Contacts'>) => {
   // safeguard against any rogue values like empty string
   const value = Array.isArray(_value) ? _value : []
 
@@ -3828,7 +3828,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
         <Grid container alignItems="center" wrap="nowrap" spacing={1}>
           {!field.options?.hiddenDefaultFields?.includes('First Name') &&  
             <Grid item xs={4}>
-              <TextField label="First Name" size="small" fullWidth
+              <TextField label={form_display_text_for_language(form, "First Name")} size="small" fullWidth
                 InputProps={defaultInputProps}
                 value={fname} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, fname: e.target.value } : v), field.id)}
               />
@@ -3837,7 +3837,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
 
           {!field.options?.hiddenDefaultFields?.includes('Last Name') &&  
           <Grid item xs={4}>
-            <TextField label="Last Name" size="small" fullWidth
+            <TextField label={form_display_text_for_language(form, "Last Name")} size="small" fullWidth
               InputProps={defaultInputProps}
               value={lname} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, lname: e.target.value } : v), field.id)}
             />
@@ -3845,7 +3845,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
           }
 
           <Grid item xs={4}>
-            <StringSelector options={field.options?.relatedContactTypes?.length ? field.options.relatedContactTypes : RELATIONSHIP_TYPES} label="Relationship" size="small"
+            <StringSelector options={field.options?.relatedContactTypes?.length ? field.options.relatedContactTypes : RELATIONSHIP_TYPES} label={form_display_text_for_language(form, "Relationship")} size="small"
               disabled={field?.options?.relatedContactTypes?.length === 1}
               value={relationships?.[0]?.type ?? ''} 
               onChange={type => onChange(value.map((v, i) => i === editing ? { ...v, relationships: [{ type: type as EnduserRelationship['type'], id: '' /* to be filled on server-side */ }] } : v), field.id)}
@@ -3858,7 +3858,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
         <Grid container alignItems="center" wrap="nowrap" spacing={1}>
           {!field.options?.hiddenDefaultFields?.includes('Date of Birth') &&  
           <Grid item xs={4}>
-            <DateStringInput value={dateOfBirth} field={{ ...field, isOptional: true }} size="small" label="Date of Birth (MM-DD-YYYY)"
+            <DateStringInput value={dateOfBirth} field={{ ...field, isOptional: true }} size="small" label={form_display_text_for_language(form, "Date of Birth (MM-DD-YYYY)")}
               onChange={dateOfBirth => onChange(value.map((v, i) => i === editing ? { ...v, dateOfBirth } : v), field.id)}
             />
           </Grid>
@@ -3866,7 +3866,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
 
           {!field.options?.hiddenDefaultFields?.includes('Email') &&  
           <Grid item xs={4}>
-            <TextField label="Email" size="small" fullWidth type="email"
+            <TextField label={form_display_text_for_language(form, "Email")} size="small" fullWidth type="email"
               InputProps={defaultInputProps}
               value={email} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, email: e.target.value } : v), field.id)}
             />
@@ -3875,7 +3875,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
 
           {!field.options?.hiddenDefaultFields?.includes('Phone Number') &&  
           <Grid item xs={4}>
-            <TextField label="Phone Number" size="small" fullWidth
+            <TextField label={form_display_text_for_language(form, "Phone Number")} size="small" fullWidth
               InputProps={defaultInputProps}
               value={phone} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, phone: e.target.value.trim() } : v), field.id)}
             />
@@ -3932,7 +3932,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
 
         <Grid item sx={{ my: 0.75 }}>
           <Button variant="outlined" onClick={() => setEditing(-1)} size="small" disabled={!!errorMessage || !!parentError}>
-            Save Contact
+            {form_display_text_for_language(form, "Save Contact")}
           </Button>
         </Grid>
 
@@ -3959,13 +3959,13 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
               <Edit />
             </IconButton>
             <Typography noWrap>
-              {user_display_name(contact) || `Unnamed Contact ${i + 1}`}
+              {user_display_name(contact) || `${form_display_text_for_language(form, "Unnamed Contact")} ${i + 1}`}
             </Typography>
           </Grid> 
           </Grid> 
 
           <Grid item>
-            <LabeledIconButton Icon={Delete} label="Remove" onClick={() => onChange(value.filter((v, _i) => i !== _i), field.id)} />
+            <LabeledIconButton Icon={Delete} label={form_display_text_for_language(form, "Remove")} onClick={() => onChange(value.filter((v, _i) => i !== _i), field.id)} />
           </Grid> 
         </Grid> 
         </Grid>
@@ -3974,7 +3974,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, error: pa
 
       <Grid item>
         <Button variant="contained" onClick={handleAddContact}>
-          Add Contact
+          {form_display_text_for_language(form, "Add Contact")}
         </Button>
       </Grid>
     </Grid>
@@ -4080,14 +4080,14 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
           <CheckCircleOutline color="success" />
 
           <Typography sx={{ ml: 1, fontSize: 20 }}>
-            Your appointment has been booked
+            {form_display_text_for_language(form, "Your appointment has been booked")}
           </Typography>
         </Grid>
         </Grid>
 
         <Grid item sx={{ maxWidth: 250 }}>
           <LoadingButton variant="contained" style={{ maxWidth: 250 }}
-            submitText="Add to Calendar" submittingText="Downloading..."
+            submitText={form_display_text_for_language(form, "Add to Calendar")} submittingText={form_display_text_for_language(form, "Downloading...")}
             onClick={() => downloadICS({ id: value })}
           />
         </Grid>
@@ -4095,7 +4095,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
     )
   }
   if (!bookingPageId) {
-    return <Typography>No booking page specified</Typography>
+    return <Typography>{form_display_text_for_language(form, "No booking page specified")}</Typography>
   }
   if (error) {
     return (
@@ -4177,7 +4177,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
     const bridgeUserIds = getBridgeEligibilityUserIds()
 
     if (bridgeUserIds.length === 0) {
-      return <Typography>No eligible users found for booking</Typography>
+      return <Typography>{form_display_text_for_language(form, "No eligible users found for booking")}</Typography>
     }
 
     bookingURL += `&userIds=${bridgeUserIds.join(',')}`
@@ -4194,7 +4194,7 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
       {!!field.options?.userFilterTags?.length && !field.options.userTags?.length && !isPreviousDisabled?.() && !confirming &&
         <Grid item alignSelf="flex-start" >
         <Button variant="outlined" onClick={goToPreviousField} sx={{ height: 25, p: 0.5, px: 1 }}>
-          Back
+          {form_display_text_for_language(form, "Back")}
         </Button>
         </Grid>
       }
@@ -4226,16 +4226,16 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
   )
 }
 
-export const HeightInput = ({ field, value={} as any, onChange, ...props }: FormInputProps<'Height'>) => (
+export const HeightInput = ({ field, value={} as any, onChange, form, ...props }: FormInputProps<'Height'>) => (
   <Grid container alignItems='center' wrap="nowrap" spacing={1} style={{ marginTop: 5 }}>
     <Grid item sx={{ width: '100%' }}>
-      <TextField fullWidth size="small" label="Feet" type="number"
-        value={value?.feet || ''} 
+      <TextField fullWidth size="small" label={form_display_text_for_language(form, "Feet")} type="number"
+        value={value?.feet || ''}
         onChange={e => onChange({ ...value, feet: parseInt(e.target.value) }, field.id)}
       />
     </Grid>
     <Grid item sx={{ width: '100%' }}>
-      <TextField fullWidth size="small" label="Inches" type="number"
+      <TextField fullWidth size="small" label={form_display_text_for_language(form, "Inches")} type="number"
         value={value?.inches ?? ''}
         onChange={e => onChange({ ...value, inches: parseInt(e.target.value) }, field.id)}
       />
@@ -4453,7 +4453,7 @@ export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, on
       <CheckCircleOutline color="success" />
 
       <Typography sx={{ ml: 1, fontSize: 20 }}>
-        Please click Next or Submit to continue.
+        {form_display_text_for_language(form, "Please click Next or Submit to continue.")}
       </Typography>
     </Grid>
   )
@@ -4533,7 +4533,7 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
     <Grid container direction="column" spacing={1}>
       <Grid item>
       <Autocomplete multiple value={value || []} options={results} style={{ marginTop: 5 }}
-        noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+        noOptionsText={query.length ? form_display_text_for_language(form, 'No results found') : form_display_text_for_language(form, 'Type to start search')}
         onChange={(e, v) => {
           if (!v) { return }
           onChange(v, field.id)
@@ -4543,7 +4543,7 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
         inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-            required={!field.isOptional} size="small" label="" placeholder="Search allergies..."
+            required={!field.isOptional} size="small" label="" placeholder={form_display_text_for_language(form, "Search allergies...")}
           />
         )}
         renderTags={(value, getTagProps) =>
@@ -4568,7 +4568,7 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
           </Grid>
 
           <Grid item sx={{ width: 140 }}>
-            <StringSelector options={['mild', 'moderate', 'severe']} size="small" label="Severity"
+            <StringSelector options={['mild', 'moderate', 'severe']} size="small" label={form_display_text_for_language(form, "Severity")}
               value={allergy.severity || ''}
               onChange={severity => onChange((value || []).map((v, _i) => i === _i ? { ...v, severity } : v), field.id)}
               getDisplayValue={first_letter_capitalized}
@@ -4576,8 +4576,8 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
           </Grid>
 
           <Grid item sx={{ width: "50%" }}>
-            <TextField InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" label="Note"
-              value={allergy.note || ''} 
+            <TextField InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" label={form_display_text_for_language(form, "Note")}
+              value={allergy.note || ''}
               onChange={e => onChange((value || []).map((v, _i) => i === _i ? { ...v, note: e.target.value } : v), field.id)}
             />
           </Grid>
@@ -4619,7 +4619,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
 
   return (
     <Autocomplete multiple value={value || []} options={results} style={{ marginTop: 5 }}
-      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+      noOptionsText={query.length ? form_display_text_for_language(form, 'No results found') : form_display_text_for_language(form, 'Type to start search')}
       onChange={(e, v) => {
         if (!v) { return }
         onChange(v, field.id)
@@ -4629,7 +4629,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
       inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
       renderInput={(params) => (
         <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-          required={!field.isOptional} size="small" label="" placeholder="Search conditions..."
+          required={!field.isOptional} size="small" label="" placeholder={form_display_text_for_language(form, "Search conditions...")}
         />
       )}
       renderTags={(value, getTagProps) =>