@tellescope/react-components 1.158.0 → 1.160.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.158.0",
+  "version": "1.160.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.158.0",
-    "@tellescope/sdk": "^1.158.0",
-    "@tellescope/types-client": "^1.158.0",
-    "@tellescope/types-models": "^1.158.0",
-    "@tellescope/types-utilities": "^1.158.0",
-    "@tellescope/utilities": "^1.158.0",
-    "@tellescope/validation": "^1.158.0",
+    "@tellescope/constants": "^1.160.0",
+    "@tellescope/sdk": "^1.160.0",
+    "@tellescope/types-client": "^1.160.0",
+    "@tellescope/types-models": "^1.160.0",
+    "@tellescope/types-utilities": "^1.160.0",
+    "@tellescope/utilities": "^1.160.0",
+    "@tellescope/validation": "^1.160.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": "0ed357b60dd15c474a84c6eb595eead1b4c33847",
+  "gitHead": "ae5e552573b74bf4a478e9054348e43fb5fd3eaa",
   "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/inputs.tsx

@@ -5,7 +5,7 @@ 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"
 import { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, truncate_string, user_display_name } from "@tellescope/utilities"
-import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
+import { DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -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")} 
           />
         )}
@@ -1901,11 +1941,12 @@ const DRUGS_FOR_DISPLAY_TERM = {} as Record<string, Drug[]>
 const RX_NORM_CODE_FOR_DRUG = {} as Record<string, string>
 const NDC_CODES_FOR_RX_NORM_CODE = {} as Record<string, string[]>
 
-const useMedications = () => {
+const useMedications = ({ dontFetch } : { dontFetch?: boolean }) => {
   const [displayTerms, setDisplayTerms] = useState(displayTermsCache)
   const fetchRef = useRef(displayTerms !== undefined)
 
   useEffect(() => {
+    if (dontFetch) return
     if (fetchRef.current) return
     fetchRef.current = true
 
@@ -1932,7 +1973,7 @@ const useMedications = () => {
       }) 
     )
     .catch(console.error)
-  }, [])
+  }, [dontFetch])
 
   const getDrugsForDisplayTerm = useCallback(async (s: string) => {
     const drugs = DRUGS_FOR_DISPLAY_TERM[s] || (
@@ -2010,8 +2051,172 @@ const filterOptions = (options: string[], { inputValue } : { inputValue: string
   .slice(0, 100) // dramatic performance improvement (when not virtualized) to show a subset like this
 )
 
-export const MedicationsInput = ({ field, value, onChange }: FormInputProps<'Medications'>) => {
-  const { displayTerms, doneLoading, getCodesForDrug, getDrugsForDisplayTerm } = useMedications()
+const FDB_URL = "http://www.fdbhealth.com/"
+type CanvasMedicationResult = {
+  entry?: { resource: { code: { coding: { system: string, code: string, display: string } []}} }[]
+}
+
+export const CanvasMedicationsInput = ({ field, value=[], onChange }: FormInputProps<'Medications'>) => {
+  const session = useResolvedSession()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<MedicationResponse[]>([])
+
+  // if two Medications questions shown in a row, reset state
+  useEffect(() => {
+    setQuery('')
+    setResults([])
+  }, [field.id])
+
+  const fetchRef = useRef(query)
+  useEffect(() => {
+    if (fetchRef.current === query) return
+    fetchRef.current = query
+
+    if (!query) return
+
+    const t = setTimeout(() => {
+      session.api.integrations
+      .proxy_read({ 
+        integration: CANVAS_TITLE, 
+        type: 'medications', 
+        query,
+      })
+      .then((r : { data: CanvasMedicationResult }) => {
+        setResults(
+          (r.data?.entry || [])
+          .map(v => {
+            const fdbCode = v.resource.code.coding.find(c => c.system === FDB_URL)
+
+            return {
+              displayTerm: fdbCode?.display || '',
+              drugName: fdbCode?.display || '',
+              fdbCode: fdbCode?.code || '', 
+            }
+          })
+        )
+      })   
+    }, 200)
+
+    return () => { clearTimeout(t) }
+  }, [session, query, field?.options?.dataSource])
+
+  return (
+    <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.displayTerm)} 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 medications..."
+          />
+        )}
+        renderTags={(value, getTagProps) =>
+          value.map((value, index) => (
+            <Chip
+              label={<Typography style={{whiteSpace: 'normal'}}>{value.displayTerm}</Typography>}
+              {...getTagProps({ index })}
+              sx={{height:"100%", py: 0.5 }}
+            />
+          ))
+        }
+      /> 
+      </Grid>
+
+      {(value || []).map((medication, i) => (
+        <Grid item key={i}>
+        <Grid container direction="column" spacing={0.75}>
+          <Grid item>
+            <Typography noWrap sx={{ fontSize: 14 }}>
+              {medication.drugName}
+            </Typography>
+          </Grid>
+
+          <Grid item>
+          <Grid container alignItems="center" wrap="nowrap" columnGap={0.5} justifyContent={"space-between"}>
+            <Grid item sx={{ width: '50%', mr: 1 }}>
+              <TextField type="number" InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" 
+                label="Units (e.g. capsule, table, puff) per dose?"
+                value={medication.dosage?.quantity || ''} 
+                onChange={e => (
+                  onChange((value || []).map((v, _i) => 
+                    i === _i 
+                      ? { ...v, dosage: { ...v.dosage!, quantity: e.target.value  } } 
+                      : v
+                    ), 
+                    field.id
+                  )
+                )} />
+            </Grid>
+
+            <Grid item sx={{ width: '30%' }}>
+              <StringSelector size="small" label="How many times?"
+                options={["1", "2", "3", "4", "5", "6", "As Needed"]} 
+                value={medication.dosage?.frequency ?? ''}
+                onChange={async (frequency) => {
+                  onChange(
+                    (value ?? []).map((_v, _i) => (
+                      i === _i
+                        ? { 
+                          ..._v, 
+                          dosage: {
+                            ..._v.dosage!,
+                            frequency: frequency || ''
+                          }
+                        }
+                        : _v
+                    )),
+                    field.id,
+                  )
+                }}
+              />
+            </Grid>
+
+            <Grid item sx={{ width: '20%' }}>
+              <StringSelector options={['Day', 'Week', 'Month', "Year"]} size="small" label="Per"
+                value={medication.dosage?.frequencyDescriptor || 'Day'}
+                onChange={frequencyDescriptor => (
+                  onChange((value || []).map((v, _i) => 
+                    i === _i 
+                      ? { ...v, dosage: { ...v.dosage!, frequencyDescriptor } } 
+                      : v
+                    ), 
+                    field.id
+                  )
+                )}
+                getDisplayValue={first_letter_capitalized}
+              />
+            </Grid>
+          </Grid>
+          </Grid>
+
+          <Grid item>
+            <TextField InputProps={{ sx: defaultInputProps.sx }} fullWidth size="small" label="Reason for taking medication"
+              value={medication.reasonForTaking || ''} 
+              onChange={e => onChange((value || []).map((v, _i) => i === _i ? { ...v, reasonForTaking: e.target.value } : v), field.id)}
+            />
+          </Grid>
+
+          <Grid item>
+            <Divider flexItem sx={{ my: 0.5 }} />
+          </Grid>
+        </Grid>
+        </Grid>
+      ))}
+    </Grid>
+  )
+}
+
+export const MedicationsInput = ({ field, value, onChange, ...props }: FormInputProps<'Medications'>) => {
+  const { displayTerms, doneLoading, getCodesForDrug, getDrugsForDisplayTerm } = useMedications({
+    dontFetch: field.options?.dataSource === CANVAS_TITLE
+  })
   const [drugs, setDrugs] = useState<Record<string, Drug[]>>({})
   
   // uncomment to load data after initial typing
@@ -2040,6 +2245,9 @@ export const MedicationsInput = ({ field, value, onChange }: FormInputProps<'Med
   //   .catch(console.error)
   // }, [value, getDrugsForDisplayTerm])
 
+  if (field.options?.dataSource === CANVAS_TITLE) {
+    return <CanvasMedicationsInput field={field} value={value} onChange={onChange} {...props} />
+  }
   return (
     <Grid container direction="column" sx={{ mt: 2 }}>
     {(value ?? []).map((v, i) => (
@@ -2966,30 +3174,61 @@ 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)}`

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>