@tellescope/react-components 1.157.1 → 1.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.157.1",
+  "version": "1.159.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.157.1",
-    "@tellescope/sdk": "^1.157.1",
-    "@tellescope/types-client": "^1.157.1",
-    "@tellescope/types-models": "^1.157.1",
-    "@tellescope/types-utilities": "^1.157.1",
-    "@tellescope/utilities": "^1.157.1",
-    "@tellescope/validation": "^1.157.1",
+    "@tellescope/constants": "^1.159.0",
+    "@tellescope/sdk": "^1.159.0",
+    "@tellescope/types-client": "^1.159.0",
+    "@tellescope/types-models": "^1.159.0",
+    "@tellescope/types-utilities": "^1.159.0",
+    "@tellescope/utilities": "^1.159.0",
+    "@tellescope/validation": "^1.159.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -80,7 +80,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "5019608eaa05afae077c4bf4551306a31f60cb73",
+  "gitHead": "105154b2072ee3c52f066e163aec77441d7e6c7d",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -372,7 +372,7 @@ export const QuestionForField = ({
 
       {field.type !== 'Question Group' &&
         <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')
+          {(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 
               ? form_display_text_for_language(form, validationMessage)
               : null 

package/src/Forms/hooks.tsx

@@ -198,6 +198,7 @@ export const getNextField = (activeField: FormFieldNode, currentValue: Response,
   urlLogicValue?: string,
   dateOfBirth?: string,
   gender?: string,
+  state?: string,
   form?: Form,
   activeResponses?: FormResponseValue[], // current and previous answers (not future answers)
 }) => {
@@ -600,6 +601,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
       disabled: !!(existingResponses?.find(r => r.fieldId === f.id)?.answer?.value && f.disabledWhenPrepopulated),
       // keep consistent with onFieldChange
       computedValueKey: (
+        // the height typeof is unnecessary (no actual type comparison), but don't change without testing both number and height question types
         f?.intakeField === 'height' && typeof existingResponses?.find(r => r.fieldId === f.id)?.answer?.value
           ? 'Height'
       : f?.intakeField === 'weight' && typeof existingResponses?.find(r => r.fieldId === f.id)?.answer?.value === 'number'
@@ -608,6 +610,8 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
           ? 'Date of Birth'
       : f?.intakeField === 'gender' && ['multiple_choice', 'Dropdown'].includes(existingResponses?.find(r => r.fieldId === f.id)?.answer?.type || '')
           ? 'Gender'
+      : f?.intakeField === 'Address' && existingResponses?.find(r => r.fieldId === f.id && r.answer.type === 'Address')
+          ? 'State'
           : undefined
       ) as any,  
       answer: { 
@@ -1060,6 +1064,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
         activeResponses: responses.filter(r => r.includeInSubmit),
         dateOfBirth: enduser?.dateOfBirth,
         gender: enduser?.gender,
+        state: enduser?.state,
       })
     )
   )
@@ -1275,6 +1280,7 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
         activeResponses: responses.filter(r => r.includeInSubmit),
         dateOfBirth: enduser?.dateOfBirth,
         gender: enduser?.gender,
+        state: enduser?.state,
       })
 
       // when autoadvancing, prevent adding duplicates by checking whether already on stack
@@ -1341,6 +1347,8 @@ export const useTellescopeForm = ({ form, urlLogicValue, customization, carePlan
           ? 'Date of Birth'
       : field?.intakeField === 'gender' && (r.answer.type === 'Dropdown' || r.answer.type === 'multiple_choice')
           ? 'Gender'
+      : field?.intakeField === 'Address' && r.answer.type === 'Address'
+          ? 'State'
           : undefined
       )
     })))

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 { AllergyCode, CalendarEvent, DatabaseRecord, 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';
@@ -492,6 +492,7 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
   const session = useResolvedSession()
 
   const [payers, setPayers] = useState<{ id: string, name: string, type?: string, state?: string }[]>([])
+  const [query, setQuery] = useState('')
 
   const addressQuestion = useMemo(() => responses?.find(r => {
     if (r.answer.type !== 'Address') return false
@@ -509,6 +510,7 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
 
   const loadRef = useRef(false) // so session changes don't cause
   useEffect(() => {
+    if (field?.options?.dataSource === CANVAS_TITLE) return // instead, look-up while typing against Canvas Search API
     if (loadRef.current) return
     loadRef.current = true
 
@@ -525,7 +527,30 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
       .filter(c => !c.state || !state || (c.state === state))
     ))
     .catch(console.error)
-  }, [session, state])
+  }, [session, state, field?.options?.dataSource])
+
+  const searchRef = useRef(query)
+  useEffect(() => {
+    if (field?.options?.dataSource !== CANVAS_TITLE) { return }
+    if (!query) return
+    if (searchRef.current === query) return
+    searchRef.current = query
+
+    session.api.integrations.proxy_read({
+      integration: CANVAS_TITLE,
+      query,
+      type: 'organizations',
+    })
+    .then(({ data }) => {
+      try {
+        setPayers(data.map((d: any) => ({
+          id: d.resource.id,
+          name: d.resource.name,
+        })))
+      } catch(err) { console.error }
+    })
+    .catch(console.error)
+  }, [session, field?.options?.dataSource, query])
 
   return (
     <Grid container spacing={2} sx={{ mt: '0' }}>
@@ -538,12 +563,20 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
           payerId: payers.find(p => p.name === v)?.id || '',
           payerType: payers.find(p => p.name === v)?.type || '',
         }, field.id)}  
-        onInputChange={field.options?.requirePredefinedInsurer ? undefined : (e, v) => onChange({ 
-          ...value, 
-          payerName: v || '',
-          payerId: payers.find(p => p.name === v)?.id || '',
-          payerType: payers.find(p => p.name === v)?.type || '',
-        }, field.id)}
+        onInputChange={
+          field.options?.requirePredefinedInsurer 
+            ? (e, v) => { if (v) { setQuery(v) } }
+            : (e, v) => {
+              if (v) { setQuery(v) }
+
+              onChange({ 
+                ...value, 
+                payerName: v || '',
+                payerId: payers.find(p => p.name === v)?.id || '',
+                payerType: payers.find(p => p.name === v)?.type || '',
+              }, field.id)
+            }
+          }
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
             required={!field.isOptional} size="small"  label="Insurer"
@@ -596,7 +629,11 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
       <Grid item xs={12}>
         <StringSelector size="small" label="Relationship to Policy Owner"
           options={
-            (field.options?.billingProvider === 'Canvas' ? INSURANCE_RELATIONSHIPS_CANVAS : INSURANCE_RELATIONSHIPS)
+            (
+              (field.options?.billingProvider === CANVAS_TITLE || field.options?.dataSource === CANVAS_TITLE )
+                ? INSURANCE_RELATIONSHIPS_CANVAS 
+                : INSURANCE_RELATIONSHIPS
+            )
             .sort((x, y) => x.localeCompare(y))
           }
           value={value?.relationship || 'Self'} 
@@ -809,13 +846,14 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
 }
 
 
-const StringSelector = ({ options, value, onChange, required, ...props } : {
+const StringSelector = ({ options, value, onChange, required, getDisplayValue, ...props } : {
   options: string[]
   value: string,
   onChange: (v: string) => void,
   label?: string,
   size?: "small",
   required?: boolean,
+  getDisplayValue?: (v: string) => string,
 }) => (
   <FormControl fullWidth size={props.size} required={required}>
     <InputLabel>{props.label}</InputLabel>
@@ -823,7 +861,7 @@ const StringSelector = ({ options, value, onChange, required, ...props } : {
       sx={defaultInputProps.sx}
     >
     {options.map((o, i) => (
-      <MenuItem value={o} key={o || i}>{o}</MenuItem>
+      <MenuItem value={o} key={o || i}>{getDisplayValue?.(o) ?? o}</MenuItem>
     ))}
     </Select>
   </FormControl>
@@ -886,7 +924,9 @@ export const AddressInput = ({ field, form, value, onChange, ...props }: FormInp
         )}
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-            size={'small'} required={!field.isOptional}  
+            required={!field.isOptional}  
+            // don't use 'small' so as to be consistent with other text fields, in case this is used in a group
+            // size={'small'} 
             label={form_display_text_for_language(form, "State")} 
           />
         )}
@@ -2966,32 +3006,64 @@ export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value,
   }, [session, query, field?.options?.dataSource])
 
   return (
-    <Autocomplete multiple value={value || []} options={results} style={{ marginTop: 5 }}
-      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
-      onChange={(e, v) => {
-        if (!v) { return }
-        onChange(v, field.id)
-        setResults([])
-      }}
-      getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
-      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..."
-        />
-      )}
-      renderTags={(value, getTagProps) =>
-        value.map((value, index) => (
-          <Chip
-            label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
-            {...getTagProps({ index })}
-            sx={{height:"100%", py: 0.5 }}
+    <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'}
+        onChange={(e, v) => {
+          if (!v) { return }
+          onChange(v, field.id)
+          setResults([])
+        }}
+        getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
+        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..."
           />
-        ))
-      }
-    /> 
+        )}
+        renderTags={(value, getTagProps) =>
+          value.map((value, index) => (
+            <Chip
+              label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
+              {...getTagProps({ index })}
+              sx={{height:"100%", py: 0.5 }}
+            />
+          ))
+        }
+      /> 
+      </Grid>
+
+      {(value || []).map((allergy, i) => (
+        <Grid item key={i}>
+        <Grid container alignItems="center" wrap="nowrap" columnGap={0.5} justifyContent={"space-between"}>
+          <Grid item>
+            <Typography noWrap sx={{ width: 85, fontSize: 14 }}>
+              {allergy.display}
+            </Typography>
+          </Grid>
+
+          <Grid item sx={{ width: 140 }}>
+            <StringSelector options={['mild', 'moderate', 'severe']} size="small" label="Severity"
+              value={allergy.severity || ''}
+              onChange={severity => onChange((value || []).map((v, _i) => i === _i ? { ...v, severity } : v), field.id)}
+              getDisplayValue={first_letter_capitalized}
+            />
+          </Grid>
+
+          <Grid item sx={{ width: "50%" }}>
+            <TextField InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" label="Note"
+              value={allergy.note || ''} 
+              onChange={e => onChange((value || []).map((v, _i) => i === _i ? { ...v, note: e.target.value } : v), field.id)}
+            />
+          </Grid>
+        </Grid>
+        </Grid>
+      ))}
+    </Grid>
   )
 }
+const display_with_code = (v: { code: string, display: string }) => `${v.code}: ${first_letter_capitalized(v.display)}`
 
 export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'Conditions'>) => {
   const session = useResolvedSession()
@@ -3029,7 +3101,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
         onChange(v, field.id)
         setResults([])
       }}
-      getOptionLabel={v => first_letter_capitalized(v.display)} filterOptions={o => o}
+      getOptionLabel={display_with_code} filterOptions={o => o}
       inputValue={query} onInputChange={(e, v) => e && setQuery(v) }
       renderInput={(params) => (
         <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
@@ -3039,7 +3111,7 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
       renderTags={(value, getTagProps) =>
         value.map((value, index) => (
           <Chip
-            label={<Typography style={{whiteSpace: 'normal'}}>{value.display}</Typography>}
+            label={<Typography style={{whiteSpace: 'normal'}}>{display_with_code(value)}</Typography>}
             {...getTagProps({ index })}
             sx={{height:"100%", py: 0.5 }}
           />

package/src/mui.tsx

@@ -340,9 +340,10 @@ export interface ModalProps extends Styled {
   setOpen: (b: boolean) => void,
   onClick?: () => void,
   ref?: any,
+  zIndex?: number,
 }
-export const Modal = ({ children, onClick, open, setOpen, style=defaultModalStyle }: ModalProps) => (
-  <MuiModal open={open} onClick={onClick} onClose={() => setOpen(false)}>
+export const Modal = ({ children, onClick, open, setOpen, style=defaultModalStyle, zIndex }: ModalProps) => (
+  <MuiModal open={open} onClick={onClick} onClose={() => setOpen(false)} style={{ zIndex }}>
   <Grid container style={style}>
     {children}
   </Grid>

package/src/state.tsx

@@ -1985,7 +1985,7 @@ export const useTemplates = (options={} as HookOptions<Template>) => {
   )
 }
 export const useForms = (options={} as HookOptions<Form>) => {
-  const session = useSession()
+  const session = useResolvedSession()
   return useListStateHook(
     'forms', useTypedSelector(s => s.forms), session, formsSlice, 
     {