@tellescope/react-components 1.237.6 → 1.239.0

package/src/Forms/inputs.v2.tsx

@@ -23,6 +23,7 @@ import LanguageIcon from '@mui/icons-material/Language';
 
 import { CheckCircleOutline, Delete, Edit, UploadFile } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
+import { useConditionalChoices, Response } from "./hooks"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
@@ -544,8 +545,8 @@ export const NumberInput = ({ field, value, onChange, form, ...props }: FormInpu
   )
 }
 
-// InsuranceInput, BridgeEligibilityInput, and AppointmentBookingInput logic is shared with inputs.tsx to avoid duplication
-import { InsuranceInput as SharedInsuranceInput, BridgeEligibilityInput as SharedBridgeEligibilityInput, AppointmentBookingInput as SharedAppointmentBookingInput } from './inputs'
+// InsuranceInput, BridgeEligibilityInput, PharmacySearchInput, and AppointmentBookingInput logic is shared with inputs.tsx to avoid duplication
+import { InsuranceInput as SharedInsuranceInput, BridgeEligibilityInput as SharedBridgeEligibilityInput, PharmacySearchInput as SharedPharmacySearchInput, AppointmentBookingInput as SharedAppointmentBookingInput } from './inputs'
 
 // Wrap the shared InsuranceInput component with v2-specific props
 export const InsuranceInput = (props: FormInputProps<'Insurance'>) => {
@@ -557,6 +558,11 @@ export const BridgeEligibilityInput = (props: FormInputProps<'Bridge Eligibility
   return <SharedBridgeEligibilityInput {...props} inputProps={defaultInputProps} />
 }
 
+// Wrap the shared PharmacySearchInput component with v2-specific props
+export const PharmacySearchInput = (props: FormInputProps<'Pharmacy Search'>) => {
+  return <SharedPharmacySearchInput {...props} />
+}
+
 
 const StringSelector = ({ options, value, onChange, required, getDisplayValue, ...props } : {
   options: string[]
@@ -1154,7 +1160,7 @@ export const FilesInput = ({ value, onChange, field, existingFileName, uploading
   ) 
 }
 
-export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: FormInputProps<'multiple_choice'>) => {
+export const MultipleChoiceInput = ({ field, form, value: _value, onChange, responses, enduser }: FormInputProps<'multiple_choice'>) => {
   const value = typeof _value === 'string' ? [_value] : _value // if loading existingResponses, allows them to be a string
   const { choices, radio, other, optionDetails } = field.options as MultipleChoiceOptions
 
@@ -1162,6 +1168,18 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
   const enteringOtherStringRef = React.useRef('') // if typing otherString as prefix of a checkbox value, don't auto-select
   const otherString = value?.find(v => v === enteringOtherStringRef.current || !(choices ?? [])?.find(c => c === v)) ?? ''
 
+  // Conditional visibility for choices
+  const { visibleChoices, handleChange } = useConditionalChoices({
+    choices,
+    optionDetails,
+    responses: responses as Response[] | undefined,
+    enduser,
+    form,
+    onChange,
+    fieldId: field.id,
+    otherString,
+  })
+
   // Get primary color from form customization or use default
   const primaryColor = form?.customization?.primaryColor ?? '#798ED0'
 
@@ -1179,7 +1197,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
               defaultValue="female"
               name={`radio-group-${field.id}`}
             >
-            {(choices ?? []).map((c, i) => {
+            {visibleChoices.map((c, i) => {
               const description = getDescriptionForChoice(c)
               const hasDescription = !!description
               const isSelected = !!value?.includes(c) && c !== otherString
@@ -1203,7 +1221,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                         backgroundColor: (theme: any) => `${theme.palette.primary.main}14`,
                       },
                     }}
-                    onClick={() => onChange(value?.includes(c) ? [] : [c], field.id)}
+                    onClick={() => handleChange(value?.includes(c) ? [] : [c], field.id)}
                   >
                     <Typography component="span" sx={{ flex: 1, color: 'primary.main', fontSize: 13, fontWeight: 600 }}>{c}</Typography>
                   </Box>
@@ -1216,11 +1234,11 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                   )}
                 </Box>
               )
-            })} 
+            })}
             </RadioGroup>
           </FormControl>
         ) : (
-          (choices ?? []).map((c, i) => {
+          visibleChoices.map((c, i) => {
             const description = getDescriptionForChoice(c)
             const hasDescription = !!description
 
@@ -1236,7 +1254,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       boxSizing: 'border-box'
                     }}
                     onClick={(e) => {
-                      onChange(
+                      handleChange(
                         (
                           value?.includes(c)
                             ? (
@@ -1287,9 +1305,9 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
             // onClick={() => !otherChecked && handleOtherChecked()} // allow click to enable when disabled
             onChange={e => {
               enteringOtherStringRef.current = e.target.value
-              onChange(
+              handleChange(
                 (
-                  radio 
+                  radio
                     ? (
                       e.target.value.trim()
                         ? [e.target.value]
@@ -1299,7 +1317,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       e.target.value.trim()
                         // remove existing other string (if exists) and append new one
                         ? [...(value ?? []).filter(v => v !== otherString), e.target.value]
-                        : value?.filter(v => v !== otherString)
+                        : (value ?? []).filter(v => v !== otherString)
                     )
                 ),
                 field.id,

package/src/Forms/localization.ts

@@ -112,9 +112,17 @@ const SPANISH_TRANSLATIONS: Record<string, string> = {
 
   // Medications Search
   'Search': 'Buscar',
+  'Searching...': 'Buscando...',
   'Drug Select': 'Seleccionar Medicamento',
   'Other Drug': 'Otro Medicamento',
 
+  // Pharmacy Search
+  'pharmacies found': 'farmacias encontradas',
+  'pharmacy found': 'farmacia encontrada',
+  'Please enter a valid 5-digit ZIP code': 'Por favor ingrese un código postal válido de 5 dígitos',
+  'No pharmacies found for this ZIP code': 'No se encontraron farmacias para este código postal',
+  'Failed to search pharmacies': 'Error al buscar farmacias',
+
   // Height Input
   'Feet': 'Pies',
   'Inches': 'Pulgadas',

package/src/inputs_shared.tsx

@@ -876,16 +876,17 @@ export const ModelSearchInput = <T,>({
 }
 
 
-export const EnduserSearch = (props: Omit<GenericSearchProps<Enduser>, 'filterKey'> & { filterKey?: string }) => {
+export const EnduserSearch = (props: Omit<GenericSearchProps<Enduser>, 'filterKey'> & { filterKey?: string, excludeCareTeamFromSearch?: boolean }) => {
+  const { excludeCareTeamFromSearch, ...restProps } = props
   const session = useResolvedSession()
   const [, { addLocalElements }] = useEndusers()
-  const [usersLoading, { findById: findUser }] = useUsers() 
+  const [usersLoading, { findById: findUser }] = useUsers()
 
   // wait for users to load, so that a saved query is able to match attachSearchableFields
   // only wait when users have ALL_ACCESS to ensures users can actually load
   if (((session.userInfo as any)?.access as AccessPermissions)?.users?.read === ALL_ACCESS && !value_is_loaded(usersLoading)) return null
   return (
-    <ModelSearchInput filterKey="endusers" {...props} 
+    <ModelSearchInput filterKey="endusers" {...restProps}
       searchAPI={async ({ search }) => {
         // handle case of formatted phone number in search bar by parsing to standard phone format and searching explicitly by phone
         // in this case, also search by generic search term in case user is intending to search by something else (e.g. externalId)
@@ -903,7 +904,7 @@ export const EnduserSearch = (props: Omit<GenericSearchProps<Enduser>, 'filterKe
         return session.api.endusers.getSome({ search })
       }}
       onLoad={addLocalElements}
-      attachSearchableFields={t => {
+      attachSearchableFields={excludeCareTeamFromSearch ? undefined : (t => {
         const users = t.assignedTo?.map(userId => findUser(userId, { batch: true })).filter(u => u) as User[]
         if (!users?.length) return undefined
 
@@ -915,7 +916,7 @@ export const EnduserSearch = (props: Omit<GenericSearchProps<Enduser>, 'filterKe
         })
 
         return toJoin
-      }}
+      })}
     />
   )
 }