@tellescope/react-components 1.238.0 → 1.239.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.238.0",
+  "version": "1.239.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.238.0",
-    "@tellescope/sdk": "1.238.0",
-    "@tellescope/types-client": "1.238.0",
-    "@tellescope/types-models": "1.238.0",
-    "@tellescope/types-utilities": "1.238.0",
-    "@tellescope/utilities": "1.238.0",
-    "@tellescope/validation": "1.238.0",
+    "@tellescope/constants": "1.239.0",
+    "@tellescope/sdk": "1.239.0",
+    "@tellescope/types-client": "1.239.0",
+    "@tellescope/types-models": "1.239.0",
+    "@tellescope/types-utilities": "1.239.0",
+    "@tellescope/utilities": "1.239.0",
+    "@tellescope/validation": "1.239.0",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "css-to-react-native": "3.0.0",
@@ -83,7 +83,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "4986230d93e81703dbf27e595f8949645b35cdba",
+  "gitHead": "9a05a273aa2c4d1bb38d4252857586fd7732f678",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, 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"
@@ -192,6 +192,7 @@ export const QuestionForField = ({
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
   const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
+  const PharmacySearch = customInputs?.['Pharmacy Search'] ?? PharmacySearchInput
 
   const validationMessage = validateField(field)
 
@@ -344,7 +345,7 @@ export const QuestionForField = ({
           <Signature enduser={enduser} field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'signature'>} form={form}/>
         )
         : field.type === 'multiple_choice' ? (
-          <MultipleChoice field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'multiple_choice'>} form={form}/>
+          <MultipleChoice field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'multiple_choice'>} form={form} responses={responses} enduser={enduser}/>
         )
         : field.type === 'Dropdown' ? (
           <Dropdown field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Dropdown'>} form={form}/>
@@ -378,6 +379,12 @@ export const QuestionForField = ({
             onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
           />
         )
+        : field.type === 'Pharmacy Search' ? (
+          <PharmacySearch field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses}
+            onChange={onFieldChange as ChangeHandler<'Pharmacy Search'>}
+          />
+        )
         : field.type === 'rating' ? (
           <Rating field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'rating'>} form={form}/>
         )

package/src/Forms/forms.v2.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, WithTheme, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
+import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInput, BelugaPatientPreferenceInput, BridgeEligibilityInput, ChargeebeeInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PharmacySearchInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, TimezoneInput, defaultButtonStyles } from "./inputs.v2"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -185,6 +185,7 @@ export const QuestionForField = ({
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
   const RichText = customInputs?.['Rich Text'] ?? RichTextInput
   const BelugaPatientPreference = customInputs?.['Beluga Patient Preference'] ?? BelugaPatientPreferenceInput
+  const PharmacySearch = customInputs?.['Pharmacy Search'] ?? PharmacySearchInput
 
   const validationMessage = validateField(field)
 
@@ -338,7 +339,7 @@ export const QuestionForField = ({
           <Signature enduser={enduser} field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'signature'>} form={form}/>
         )
         : field.type === 'multiple_choice' ? (
-          <MultipleChoice field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'multiple_choice'>} form={form}/>
+          <MultipleChoice field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'multiple_choice'>} form={form} responses={responses} enduser={enduser}/>
         )
         : field.type === 'Dropdown' ? (
           <Dropdown field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Dropdown'>} form={form}/>
@@ -372,6 +373,12 @@ export const QuestionForField = ({
             onChange={onFieldChange as ChangeHandler<'Bridge Eligibility'>}
           />
         )
+        : field.type === 'Pharmacy Search' ? (
+          <PharmacySearch field={field} value={value.answer.value as any} form={form}
+            enduser={enduser} responses={responses}
+            onChange={onFieldChange as ChangeHandler<'Pharmacy Search'>}
+          />
+        )
         : field.type === 'rating' ? (
           <Rating field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'rating'>} form={form}/>
         )

package/src/Forms/hooks.tsx

@@ -4,7 +4,7 @@ import { ChangeHandler, FormFieldNode } from "./types"
 import { DatabaseRecord, Enduser, Form, FormField, FormResponse } from "@tellescope/types-client"
 import { phoneValidator } from "@tellescope/validation"
 import { FileBlob, Indexable } from "@tellescope/types-utilities"
-import { CompoundFilter, EnduserRelationship, FormCustomization, FormResponseAnswerAddress, FormResponseAnswerFileValue, FormResponseValue, FormResponseValueAnswer, OrganizationTheme, PreviousFormCompoundLogic, PreviousFormFieldType, Timezone, TIMEZONES } from "@tellescope/types-models"
+import { CompoundFilter, EnduserRelationship, FormCustomization, FormFieldOptionDetails, FormResponseAnswerAddress, FormResponseAnswerFileValue, FormResponseValue, FormResponseValueAnswer, OrganizationTheme, PreviousFormCompoundLogic, PreviousFormFieldType, Timezone, TIMEZONES } from "@tellescope/types-models"
 import { WithTheme, contact_is_valid, useAddGTMTag, useFileUpload, useFormFields, useFormResponses, useResolvedSession, value_is_loaded } from "../index"
 import ReactGA from "react-ga4";
 
@@ -679,7 +679,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         type: f.type,
         value: (
           existing_response_if_compatible(existingResponses, f) ?? (
-            (f.type === 'Insurance' || f.type === 'Address' || f.type === 'file' || f.type === 'signature' || f.type === 'multiple_choice' || f.type === 'Dropdown' || f.type === 'Table Input' || f.type === 'Database Select' || f.type === 'Medications')
+            (f.type === 'Insurance' || f.type === 'Address' || f.type === 'file' || f.type === 'signature' || f.type === 'multiple_choice' || f.type === 'Dropdown' || f.type === 'Table Input' || f.type === 'Database Select' || f.type === 'Medications' || f.type === 'Pharmacy Search')
               ? undefined  
                 : f.type === 'Question Group'
                   ? f.options?.subFields
@@ -1686,3 +1686,58 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     isAutoAdvancing,
   }
 }
+
+/**
+ * Hook for conditional visibility of multiple choice options.
+ * Computes visible choices based on showCondition and provides an onChange wrapper
+ * that auto-filters hidden choices from selections (event-driven, not useEffect).
+ */
+export const useConditionalChoices = ({
+  choices,
+  optionDetails,
+  responses,
+  enduser,
+  form,
+  onChange,
+  fieldId,
+  otherString,
+}: {
+  choices?: string[]
+  optionDetails?: FormFieldOptionDetails[]
+  responses?: Response[]
+  enduser?: Partial<Enduser>
+  form?: Form
+  onChange: (value: string[], fieldId: string) => void
+  fieldId: string
+  otherString: string
+}) => {
+  // Compute visible choices based on showCondition
+  const visibleChoices = useMemo(() => {
+    if (!choices) return []
+    return choices.filter((choice, index) => {
+      const optionDetail = optionDetails?.find(d => d.option === choice) ?? optionDetails?.[index]
+      if (!optionDetail?.showCondition || object_is_empty(optionDetail.showCondition)) {
+        return true
+      }
+      return responses_satisfy_conditions(responses || [], optionDetail.showCondition, {
+        dateOfBirth: enduser?.dateOfBirth,
+        gender: enduser?.gender,
+        state: enduser?.state,
+        form,
+        activeResponses: responses,
+      })
+    })
+  }, [choices, optionDetails, responses, enduser, form])
+
+  // Wrap onChange to auto-filter hidden choices (event-driven)
+  const handleChange = useCallback((newValue: string[], fieldId: string) => {
+    // Filter out any hidden choices from the new value
+    // Allow through: visible choices, the "other" string, and values not in the choices array (custom "other" text)
+    const filteredValue = newValue.filter(v =>
+      visibleChoices.includes(v) || v === otherString || !choices?.includes(v)
+    )
+    onChange(filteredValue, fieldId)
+  }, [visibleChoices, otherString, choices, onChange])
+
+  return { visibleChoices, handleChange }
+}

package/src/Forms/inputs.tsx

@@ -5,7 +5,7 @@ import { FormInputProps } from "./types"
 import { useDropzone } from "react-dropzone"
 import { CANVAS_TITLE, BRIDGE_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, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, object_is_empty, replace_enduser_template_values, responses_satisfy_conditions, truncate_string, update_local_storage, user_display_name } from "@tellescope/utilities"
-import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
+import { Address, DatabaseSelectResponse, Enduser, EnduserRelationship, FormResponseValue, InsuranceRelationship, MedicationResponse, MultipleChoiceOptions, FormFieldOptionDetails, Pharmacy, TellescopeGender, TIMEZONES_USA } from "@tellescope/types-models"
 import { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -25,6 +25,7 @@ import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, Emb
 import { loadStripe } from '@stripe/stripe-js'; 
 import { CheckCircleOutline, Delete, Edit, ExpandMore } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
+import { useConditionalChoices, Response } from "./hooks"
 
 // Bridge Eligibility - shared variable for storing most recent eligibility userIds
 const bridgeEligibilityResult = {
@@ -1417,6 +1418,207 @@ export const BridgeEligibilityInput = ({ field, value, onChange, responses, endu
   )
 }
 
+export const PharmacySearchInput = ({
+  field,
+  value: rawValue,
+  onChange,
+  responses,
+  enduser,
+  form,
+  ...props
+}: Omit<FormInputProps<'string'>, 'value' | 'onChange'> & {
+  value: Pharmacy | undefined,
+  onChange: (v: Pharmacy | undefined, fieldId: string) => void
+}) => {
+  const value = rawValue as Pharmacy | undefined
+  const session = useResolvedSession()
+
+  // Get initial ZIP code from responses or enduser data
+  const getInitialZipCode = () => {
+    // Check Address field responses first
+    const addressResponse = responses?.find(r =>
+      r.answer?.type === 'Address' && (r.answer?.value as { zipCode?: string })?.zipCode
+    )
+    if (addressResponse?.answer?.type === 'Address') {
+      const addressValue = addressResponse.answer.value as { zipCode?: string }
+      if (addressValue?.zipCode) {
+        return addressValue.zipCode
+      }
+    }
+
+    // Fall back to enduser.zipCode
+    return enduser?.zipCode || ''
+  }
+
+  const [zipCode, setZipCode] = useState(getInitialZipCode())
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string>()
+  const [pharmacies, setPharmacies] = useState<Pharmacy[]>([])
+  const [hasSearched, setHasSearched] = useState(false)
+
+  const searchPharmacies = useCallback(async () => {
+    if (!zipCode || zipCode.length !== 5) {
+      setError(form_display_text_for_language(form, 'Please enter a valid 5-digit ZIP code'))
+      return
+    }
+
+    setLoading(true)
+    setError(undefined)
+    setHasSearched(true)
+
+    try {
+      const { data } = await session.api.integrations.proxy_read({
+        integration: 'ScriptSure',
+        type: 'pharmacy-search',
+        query: JSON.stringify({ zipCode }),
+      })
+
+      setPharmacies(data || [])
+
+      if (!data?.length) {
+        setError(form_display_text_for_language(form, 'No pharmacies found for this ZIP code'))
+      }
+    } catch (err: any) {
+      setError(err?.message || form_display_text_for_language(form, 'Failed to search pharmacies'))
+      setPharmacies([])
+    } finally {
+      setLoading(false)
+    }
+  }, [session, zipCode, form])
+
+  const handleSelectPharmacy = (pharmacy: Pharmacy) => {
+    onChange({
+      npi: pharmacy.npi,
+      ncpdpId: pharmacy.ncpdpId,
+      businessName: pharmacy.businessName,
+      primaryTelephone: pharmacy.primaryTelephone || '',
+      addressLine1: pharmacy.addressLine1,
+      city: pharmacy.city,
+      stateProvince: pharmacy.stateProvince,
+      postalCode: pharmacy.postalCode,
+    }, field.id)
+  }
+
+  const formatPharmacyAddress = (p: Pharmacy) => {
+    const parts = [p.addressLine1, p.city, p.stateProvince, p.postalCode].filter(Boolean)
+    return parts.join(', ')
+  }
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      {/* ZIP Code Input */}
+      <Grid item>
+        <Grid container spacing={2} alignItems="flex-end">
+          <Grid item xs={8} sm={6}>
+            <TextField
+              fullWidth
+              size="small"
+              label={form_display_text_for_language(form, "ZIP Code")}
+              value={zipCode}
+              onChange={(e) => setZipCode(e.target.value.replace(/\D/g, '').slice(0, 5))}
+              InputProps={defaultInputProps}
+              placeholder="12345"
+              required={!field.isOptional}
+            />
+          </Grid>
+          <Grid item xs={4} sm={6}>
+            <LoadingButton
+              variant="contained"
+              onClick={searchPharmacies}
+              submitText={form_display_text_for_language(form, "Search")}
+              submittingText={form_display_text_for_language(form, "Searching...")}
+              submitting={loading}
+              disabled={zipCode.length !== 5 || loading}
+              style={{ width: '100%', marginTop: 0 }}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+
+      {/* Error Message */}
+      {error && (
+        <Grid item>
+          <Typography color="error" sx={{ fontSize: 14 }}>
+            {error}
+          </Typography>
+        </Grid>
+      )}
+
+      {/* Selected Pharmacy Display */}
+      {value && (
+        <Grid item>
+          <Paper elevation={2} sx={{ p: 2, backgroundColor: '#e8f5e9' }}>
+            <Grid container alignItems="center" justifyContent="space-between">
+              <Grid item xs>
+                <Typography variant="subtitle1" fontWeight="bold">
+                  <CheckCircleOutline sx={{ color: 'success.main', mr: 1, verticalAlign: 'middle' }} />
+                  {value.businessName}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {formatPharmacyAddress(value)}
+                </Typography>
+                {value.primaryTelephone && (
+                  <Typography variant="body2" color="text.secondary">
+                    {value.primaryTelephone}
+                  </Typography>
+                )}
+              </Grid>
+              <Grid item>
+                <MuiIconButton onClick={() => onChange(undefined as any, field.id)} size="small">
+                  <CancelIcon />
+                </MuiIconButton>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      )}
+
+      {/* Search Results */}
+      {!value && hasSearched && pharmacies.length > 0 && (
+        <Grid item>
+          <Typography variant="subtitle2" sx={{ mb: 1 }}>
+            {pharmacies.length} {form_display_text_for_language(form, pharmacies.length === 1 ? 'pharmacy found' : 'pharmacies found')}
+          </Typography>
+          <Box sx={{ maxHeight: 300, overflow: 'auto' }}>
+            {pharmacies.map((pharmacy, index) => (
+              <Paper
+                key={`${pharmacy.ncpdpId}-${index}`}
+                elevation={1}
+                sx={{
+                  p: 1.5,
+                  mb: 1,
+                  cursor: 'pointer',
+                  '&:hover': { backgroundColor: '#f5f5f5' },
+                }}
+                onClick={() => handleSelectPharmacy(pharmacy)}
+              >
+                <Typography variant="subtitle2" fontWeight="medium">
+                  {pharmacy.businessName}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {formatPharmacyAddress(pharmacy)}
+                </Typography>
+                {pharmacy.primaryTelephone && (
+                  <Typography variant="caption" color="text.secondary">
+                    {pharmacy.primaryTelephone}
+                  </Typography>
+                )}
+              </Paper>
+            ))}
+          </Box>
+        </Grid>
+      )}
+
+      {/* Loading State */}
+      {loading && (
+        <Grid item>
+          <LinearProgress />
+        </Grid>
+      )}
+    </Grid>
+  )
+}
+
 const HourSelector = (props : { value: string, onChange: (v: string) => void })  => (
   <StringSelector {...props}
     options={Array(12).fill('').map((_, i) => (i + 1) <= 9 ? `0${i + 1}` : (i + 1).toString())}
@@ -1998,7 +2200,7 @@ const multipleChoiceItemSx: SxProps = {
   },
 }
 
-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
   const [expandedDescriptions, setExpandedDescriptions] = useState<Record<number, boolean>>({})
@@ -2007,6 +2209,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,
+  })
+
   const getDescriptionForChoice = useCallback((choice: string) => {
     return optionDetails?.find(detail => detail.option === choice)?.description
   }, [optionDetails])
@@ -2031,7 +2245,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 isExpanded = expandedDescriptions[i]
@@ -2043,7 +2257,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       sx={{ ...multipleChoiceItemSx, flex: 1, marginLeft: '0px' }}
                       checked={!!value?.includes(c) && c !== otherString}
                       control={
-                        <Radio onClick={() => onChange(value?.includes(c) ? [] : [c], field.id)} />
+                        <Radio onClick={() => handleChange(value?.includes(c) ? [] : [c], field.id)} />
                       }
                       label={
                         <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
@@ -2083,7 +2297,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
             </RadioGroup>
           </FormControl>
         ) : (
-          (choices ?? []).map((c, i) => {
+          visibleChoices.map((c, i) => {
             const description = getDescriptionForChoice(c)
             const hasDescription = !!description
             const isExpanded = expandedDescriptions[i]
@@ -2104,7 +2318,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
                       if ((e.target as HTMLElement).closest('.expand-button')) {
                         return
                       }
-                      onChange(
+                      handleChange(
                         (
                           value?.includes(c)
                             ? (
@@ -2174,9 +2388,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]
@@ -2186,7 +2400,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/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',