@tellescope/react-components 1.243.1 → 1.244.0

package/src/Forms/inputs.v2.tsx

@@ -23,7 +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"
+import { useConditionalChoices, Response, dateFromOffsetMs } from "./hooks"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
@@ -264,6 +264,9 @@ export const DateInput = ({
 } & FormInputProps<'date'> & Styled) => {
   const inputRef = useRef(null);
 
+  const minDate = field.options?.minDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.minDateOffsetMs) : undefined
+  const maxDate = field.options?.maxDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.maxDateOffsetMs) : undefined
+
   return (
     <DatePicker // wrap in item to prevent movement on focused
       selected={value}
@@ -277,6 +280,8 @@ export const DateInput = ({
       customInput={<CustomDateInput inputRef={inputRef} {...props} />}
       // className={css`width: 100%;`}
       className={css`${datepickerCSS}`}
+      minDate={minDate}
+      maxDate={maxDate}
     />
   )
 }
@@ -423,6 +428,9 @@ const CustomDateStringInput = forwardRef((props: TextFieldProps, ref) => (
 export const DateStringInput = ({ field, value, onChange, form, ...props }: FormInputProps<'string'>) => {
   const inputRef = useRef(null);
 
+  const minDate = field.options?.minDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.minDateOffsetMs) : undefined
+  const maxDate = field.options?.maxDateOffsetMs !== undefined ? dateFromOffsetMs(field.options.maxDateOffsetMs) : undefined
+
   // if (value && isDateString(value)) {
   //   console.log(value, new Date(
   //     new Date(MM_DD_YYYY_to_YYYY_MM_DD(value)).getTime()
@@ -446,11 +454,13 @@ export const DateStringInput = ({ field, value, onChange, form, ...props }: Form
           required={!field.isOptional}
           autoComplete="off"
           dateFormat={"MM-dd-yyyy"}
-          customInput={<CustomDateStringInput inputRef={inputRef} {...props} 
-            label={(!field.title && field.placeholder) ? field.placeholder : props.label} 
+          customInput={<CustomDateStringInput inputRef={inputRef} {...props}
+            label={(!field.title && field.placeholder) ? field.placeholder : props.label}
           />}
           // className={css`width: 100%;`}
           className={css`${datepickerCSS}`}
+          minDate={minDate}
+          maxDate={maxDate}
         />
       )
       : (
@@ -546,7 +556,7 @@ export const NumberInput = ({ field, value, onChange, form, ...props }: FormInpu
 }
 
 // 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'
+import { InsuranceInput as SharedInsuranceInput, BridgeEligibilityInput as SharedBridgeEligibilityInput, CandidEligibilityInput as SharedCandidEligibilityInput, PharmacySearchInput as SharedPharmacySearchInput, AppointmentBookingInput as SharedAppointmentBookingInput } from './inputs'
 
 // Wrap the shared InsuranceInput component with v2-specific props
 export const InsuranceInput = (props: FormInputProps<'Insurance'>) => {
@@ -558,6 +568,11 @@ export const BridgeEligibilityInput = (props: FormInputProps<'Bridge Eligibility
   return <SharedBridgeEligibilityInput {...props} inputProps={defaultInputProps} />
 }
 
+// Wrap the shared CandidEligibilityInput component with v2-specific props
+export const CandidEligibilityInput = (props: FormInputProps<'Candid Eligibility'>) => {
+  return <SharedCandidEligibilityInput {...props} inputProps={defaultInputProps} />
+}
+
 // Wrap the shared PharmacySearchInput component with v2-specific props
 export const PharmacySearchInput = (props: FormInputProps<'Pharmacy Search'>) => {
   return <SharedPharmacySearchInput {...props} />

package/src/forms.tsx

@@ -210,11 +210,13 @@ interface FormikSubmitButtonProps extends SubmitButtonOptions, Styled {
   enabled?: boolean,
   onClick?: () => void, // to handle submit in environment where html form type handleSubmit is not supported
   disabledIfUnchanged?: boolean,
+  muiColor?: string,
 }
-export const FormikSubmitButton = ({ formik, enabled, disabledIfUnchanged=true, disabled, onClick, submitText, submittingText, style, ...props }: FormikSubmitButtonProps) => (
+export const FormikSubmitButton = ({ formik, enabled, disabledIfUnchanged=true, disabled, onClick, submitText, submittingText, style, muiColor, ...props }: FormikSubmitButtonProps) => (
   <SubmitButton onClick={onClick} submitText={submitText} submittingText={submittingText}
     disabled={!enabled && (disabled || !formik.isValid || (disabledIfUnchanged && !formik.dirty))} style={style}
     submitting={formik.isSubmitting}
+    muiColor={muiColor}
     {...props}
   />
 )

package/src/inputs_shared.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo, useState, useRef } from "react"
 import { Indexable, ScoreFilter } from "@tellescope/types-utilities"
-import { is_full_iso_string_heuristic, object_is_empty, objects_equivalent, read_local_storage, replace_keys_and_values_in_object, safeJSONParse, update_local_storage, user_display_name, value_for_dotted_key } from "@tellescope/utilities"
-import { LoadFunction, LoadFunctionArguments } from "@tellescope/sdk"
+import { is_full_iso_string_heuristic, object_is_empty, objects_equivalent, read_local_storage, replace_keys_and_values_in_object, safeJSONParse, to_human_readable_phone_number, update_local_storage, user_display_name, value_for_dotted_key } from "@tellescope/utilities"
+import { LoadFunction, LoadFunctionArguments, Session } from "@tellescope/sdk"
 import { ALL_ACCESS, HEALTHIE_TITLE, UNSEARCHABLE_FIELDS } from "@tellescope/constants"
 import { SearchAPIProps, useSearchAPI } from "./hooks"
 import { TextFieldProps } from "./mui"
@@ -1398,6 +1398,7 @@ export interface UserAndEnduserSelectorProps {
   dontIncludeSelf: boolean,
   virtualizationHeight?: number,
   showEntityType?: boolean,
+  showEnduserDetails?: boolean,
 }
 export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserSelectorProps> = ({
   titleInput,
@@ -1419,6 +1420,7 @@ export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserS
   dontIncludeSelf,
   virtualizationHeight,
   showEntityType,
+  showEnduserDetails,
 }) => {
   const session = useResolvedSession()
   const [endusersLoading, { loadMore: loadMoreEndusers, doneLoading: doneLoadingEndusers }] = useEndusers()
@@ -1513,7 +1515,7 @@ export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserS
             virtualizationHeight ? {
               virtualize: true,
               height: virtualizationHeight,
-              rowHeight: 45,
+              rowHeight: showEnduserDetails ? 65 : 45,
               width: '100%',
               hideHorizontalScroll: true,
             } : undefined
@@ -1571,13 +1573,45 @@ export const UserAndEnduserSelector: React.JSXElementConstructor<UserAndEnduserS
                 </Typography>
 
                 {showEntityType && (user as Enduser).customTypeId &&
-                  <Typography style={{ 
+                  <Typography style={{
                     fontWeight: selected.includes(user.id) ? 'bold' : undefined,
                     fontSize: 12.5,
                   }}>
                     {entityTypes.find(t => t.id === (user as Enduser).customTypeId)?.title}
-                  </Typography> 
+                  </Typography>
                 }
+
+                {showEnduserDetails && !users.find(u => u.id === user.id) && (() => {
+                  const enduser = user as Enduser
+                  const hiddenFields = session.type === 'user' ? (session as Session).userInfo.uiRestrictions?.hiddenFields : undefined
+                  const customTypeId = enduser.customTypeId
+
+                  const isHidden = (field: string) =>
+                    hiddenFields?.find(v => v.field === field && ((v.type || '') === (customTypeId || '')))
+
+                  const details: string[] = []
+
+                  if (enduser.dateOfBirth && !isHidden('dateOfBirth')) {
+                    const d = new Date(enduser.dateOfBirth)
+                    if (!isNaN(d.getTime())) {
+                      details.push(`DOB: ${(d.getUTCMonth() + 1).toString().padStart(2, '0')}-${d.getUTCDate().toString().padStart(2, '0')}-${d.getUTCFullYear()}`)
+                    }
+                  }
+                  if (enduser.email && !isHidden('email')) {
+                    details.push(enduser.email)
+                  }
+                  if (enduser.phone && !isHidden('phone')) {
+                    details.push(to_human_readable_phone_number(enduser.phone) || enduser.phone)
+                  }
+
+                  if (details.length === 0) return null
+
+                  return (
+                    <Typography style={{ fontSize: 11.5, color: '#888' }}>
+                      {details.join(' | ')}
+                    </Typography>
+                  )
+                })()}
               </Flex>
             </Flex>
             </HoverPaper>