@tellescope/react-components 1.152.0 → 1.153.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.152.0",
+  "version": "1.153.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.152.0",
-    "@tellescope/sdk": "^1.152.0",
-    "@tellescope/types-client": "^1.152.0",
-    "@tellescope/types-models": "^1.152.0",
-    "@tellescope/types-utilities": "^1.152.0",
-    "@tellescope/utilities": "^1.152.0",
-    "@tellescope/validation": "^1.152.0",
+    "@tellescope/constants": "^1.153.0",
+    "@tellescope/sdk": "^1.153.0",
+    "@tellescope/types-client": "^1.153.0",
+    "@tellescope/types-models": "^1.153.0",
+    "@tellescope/types-utilities": "^1.153.0",
+    "@tellescope/utilities": "^1.153.0",
+    "@tellescope/validation": "^1.153.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": "b3357e0456b1aa63a08d1927e2f61bff96fc24fb",
+  "gitHead": "9433f642d09f85275831104fbdf1dd8ddc8b7a66",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { Button, CircularProgress, Flex, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AppointmentBookingInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddressInput, AllergiesInput, AppointmentBookingInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, 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"
@@ -168,6 +168,7 @@ export const QuestionForField = ({
   const Redirect = customInputs?.['Redirect'] ?? RedirectInput
   const HiddenValue = customInputs?.['Hidden Value'] ?? HiddenValueInput
   const Emotii = customInputs?.['Emotii'] ?? EmotiiInput
+  const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
 
   const validationMessage = validateField(field)
 
@@ -242,6 +243,9 @@ export const QuestionForField = ({
         : field.type === 'Emotii' ? (
           <Emotii enduser={enduser} enduserId={enduserId} field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )
+        : field.type === 'Allergies' ? (
+          <Allergies enduser={enduser} enduserId={enduserId} field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+        )
         : field.type === 'Height' ? (
           <Height field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
         )

package/src/Forms/inputs.tsx

@@ -3,7 +3,7 @@ import axios from "axios"
 import { Autocomplete, Box, Button, Checkbox, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
-import { EMOTII_TITLE, INSURANCE_RELATIONSHIPS, INSURANCE_RELATIONSHIPS_CANVAS, PRIMARY_HEX, RELATIONSHIP_TYPES, TELLESCOPE_GENDERS } from "@tellescope/constants"
+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 { Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MultipleChoiceOptions, TellescopeGender } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
@@ -2781,8 +2781,6 @@ export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, on
   const [data, setData] = useState<{ surveyRequestId: string, surveyUrl: string }>()
   const [loadCount, setLoadCount] = useState(0)
 
-  console.log(props.enduserId, props.enduser)
-
   const fetchRef = useRef(false)
   useEffect(() => {
     if (value) return
@@ -2823,4 +2821,60 @@ export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, on
       onLoad={() => setLoadCount(l => l + 1)} 
     />
   )
+}
+
+type AllergyResult = {
+  entry?: { resource: { code: { coding: { system: "http://www.fdbhealth.com/", code: string, display: string } []}} }[]
+}
+
+export const AllergiesInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'Allergies'>) => {
+  const session = useResolvedSession()
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<{ code: string, display: string }[]>([])
+
+  const fetchRef = useRef(query)
+  useEffect(() => {
+    if (fetchRef.current === query) return
+    fetchRef.current = query
+
+    const t = setTimeout(() => {
+      session.api.integrations
+      .proxy_read({ 
+        integration: CANVAS_TITLE, 
+        type: 'allergies', 
+        query,
+      })
+      .then((r : { data: AllergyResult }) => {
+        const deduped: typeof results = []
+        const totalResults = (
+          (r.data.entry || [])
+          .flatMap(v => v?.resource?.code?.coding || [])
+          .filter(v => v.system.includes('fdbhealth'))
+          .map(v => ({ code: v.code, display: v.display, system: v.system }))
+        )
+        for (const v of totalResults) {
+          if (deduped.find(d => d.display === v.display)) { continue }
+
+          deduped.push(v)
+        }
+        setResults(deduped)
+      })
+    }, 99)
+
+    return () => { clearTimeout(t) }
+  }, [session, query])
+
+  return (
+    <Autocomplete multiple value={value || []} options={[...results, ...(value || [])]} style={{ marginTop: 5 }}
+      noOptionsText={query.length ? 'No results found' : 'Type to start search'}
+      onChange={(e, v) => v && onChange(v, field.id)}
+      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..."
+        />
+      )}
+    /> 
+  )
 }