@tellescope/react-components 1.231.0 → 1.232.1

package/src/Forms/inputs.v2.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import axios from "axios"
-import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, FormControlLabel, FormLabel, Grid, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
+import { Autocomplete, Box, Button, Checkbox, Chip, Divider, FormControl, Grid, InputLabel, MenuItem, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
 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, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, format_stripe_subscription_interval, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, replace_enduser_template_values, 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 { MM_DD_YYYY_to_YYYY_MM_DD, capture_is_supported, downloadFile, emit_gtm_event, first_letter_capitalized, form_response_value_to_string, getLocalTimezone, getPublicFileURL, mm_dd_yyyy, 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, 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';
@@ -21,8 +21,6 @@ import heic2any from "heic2any"
 import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
 import LanguageIcon from '@mui/icons-material/Language';
 
-import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js'; 
 import { CheckCircleOutline, Delete, Edit, UploadFile } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
 
@@ -1666,339 +1664,12 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
   )
 }
 
-export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }: FormInputProps<'Stripe'> & {
-  setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
-}) => {
-  const session = useResolvedSession()
-  const [clientSecret, setClientSecret] = useState('')
-  const [businessName, setBusinessName] = useState('')
-  const [isCheckout, setIsCheckout] = useState(false)
-  const [stripePromise, setStripePromise] = useState<ReturnType<typeof loadStripe>>()
-  const [answertext, setAnswertext] = useState('')
-  const [error, setError] = useState('')
-  const [selectedProducts, setSelectedProducts] = useState<string[]>([])
-  const [showProductSelection, setShowProductSelection] = useState(false)
-  const [availableProducts, setAvailableProducts] = useState<any[]>([])
-  const [loadingProducts, setLoadingProducts] = useState(false)
-
-  const fetchRef = useRef(false)
-  useEffect(() => {
-    if (fetchRef.current) return
-    if (value && (session.userInfo as any)?.stripeCustomerId) {
-      return setCustomerId(c => c ? c : (session.userInfo as any)?.stripeCustomerId) // already paid or saved card
-    }
-
-    // Check if product selection mode is enabled
-    if (field.options?.stripeProductSelectionMode && (field.options?.productIds || []).length > 1) {
-      setShowProductSelection(true)
-      setLoadingProducts(true)
-
-      // Fetch product data with real-time Stripe pricing via proxy_read
-      const productIds = (field.options.productIds || []).join(',')
-      session.api.integrations.proxy_read({
-        integration: 'Stripe',
-        type: 'product-prices',
-        id: productIds,
-        query: field.options.stripeKey
-      })
-      .then(({ data }) => {
-        setAvailableProducts(data.products || [])
-        setLoadingProducts(false)
-      })
-      .catch((e: any) => {
-        console.error('Error loading product data:', e)
-        const errorMessage = e?.message?.includes?.('Stripe pricing error:')
-          ? e.message.replace('Stripe pricing error: ', '')
-          : 'Failed to load product information from Stripe'
-        setError(`Product configuration error: ${errorMessage}`)
-        setLoadingProducts(false)
-      })
-      return
-    }
-
-    fetchRef.current = true
-
-    session.api.form_responses.stripe_details({ fieldId: field.id, enduserId })
-    .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout, answerText }) => {
-      setAnswertext(answerText || '')
-      setIsCheckout(!!isCheckout)
-      setClientSecret(clientSecret)
-      setStripePromise(loadStripe(publishableKey, { stripeAccount }))
-      setBusinessName(businessName)
-      setCustomerId(customerId)
-    })
-    .catch((e: any) => {
-      console.error(e)
-      if (typeof e?.message === 'string') {
-        setError(e.message)
-      }
-    })
-  }, [session, value, field.id, enduserId])
-
-  const cost = (
-    showProductSelection
-      ? selectedProducts.reduce((total, productId) => {
-          const product = availableProducts.find(p => p._id === productId)
-          if (product?.currentPrice) {
-            return total + (product.currentPrice.amount || 0)
-          }
-          return total + (product?.cost?.amount || 0)
-        }, 0)
-      : 0 // Will be calculated by existing Stripe flow when not in selection mode
-  )
-
-  // Handle product selection step
-  if (showProductSelection) {
-    if (error) {
-      return (
-        <Grid container direction="column" spacing={2} alignItems="center">
-          <Grid item>
-            <Typography color="error" variant="h6">
-              Product Configuration Error
-            </Typography>
-          </Grid>
-          <Grid item>
-            <Typography color="error" sx={{ textAlign: 'center' }}>
-              {error}
-            </Typography>
-          </Grid>
-        </Grid>
-      )
-    }
-
-    if (loadingProducts) {
-      return (
-        <Grid container direction="column" spacing={2} alignItems="center">
-          <Grid item>
-            <LinearProgress />
-          </Grid>
-          <Grid item>
-            <Typography>Loading product information...</Typography>
-          </Grid>
-        </Grid>
-      )
-    }
-    const isSingleSelection = field.options?.radio === true
-
-    const handleProductSelection = (productId: string) => {
-      if (isSingleSelection) {
-        setSelectedProducts([productId])
-      } else {
-        setSelectedProducts(prev =>
-          prev.includes(productId)
-            ? prev.filter(id => id !== productId)
-            : [...prev, productId]
-        )
-      }
-    }
-
-    const handleContinueToPayment = () => {
-      if (selectedProducts.length === 0) return
-      setShowProductSelection(false)
-      fetchRef.current = true
-
-      // Now fetch Stripe details with selected products
-      session.api.form_responses.stripe_details({
-        fieldId: field.id,
-        enduserId,
-        ...(selectedProducts.length > 0 && { selectedProductIds: selectedProducts }) // Pass selected products to Stripe checkout
-      } as any)
-      .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout, answerText }) => {
-        setAnswertext(answerText || '')
-        setIsCheckout(!!isCheckout)
-        setClientSecret(clientSecret)
-        setStripePromise(loadStripe(publishableKey, { stripeAccount }))
-        setBusinessName(businessName)
-        setCustomerId(customerId)
-      })
-      .catch((e: any) => {
-        console.error(e)
-        if (typeof e?.message === 'string') {
-          setError(e.message)
-        }
-      })
-    }
-
-    return (
-      <Grid container direction="column" spacing={2}>
-        <Grid item>
-          <Typography variant="h6">Select Product{isSingleSelection ? '' : 's'}</Typography>
-        </Grid>
-
-        {availableProducts.map((product) => {
-          // Use real-time Stripe pricing if available, fallback to Tellescope pricing
-          const price = product.currentPrice || product.cost
-          const priceAmount = price?.amount || 0
-          const priceCurrency = price?.currency || 'USD'
-
-          return (
-            <Grid item key={product._id}>
-              <FormControlLabel
-                control={
-                  isSingleSelection ? (
-                    <Radio
-                      checked={selectedProducts.includes(product._id)}
-                      onChange={() => handleProductSelection(product._id)}
-                    />
-                  ) : (
-                    <Checkbox
-                      checked={selectedProducts.includes(product._id)}
-                      onChange={() => handleProductSelection(product._id)}
-                    />
-                  )
-                }
-                label={
-                  <Box>
-                    <Typography variant="body1" fontWeight="bold">
-                      {product.title}
-                    </Typography>
-                    {product.description && (
-                      <Typography variant="body2" color="textSecondary">
-                        {product.description}
-                      </Typography>
-                    )}
-                    <Typography variant="body2" color="primary">
-                      ${(priceAmount / 100).toFixed(2)} {priceCurrency.toUpperCase()}
-                      {product.currentPrice?.isSubscription && (
-                        <Typography component="span" variant="caption" sx={{ ml: 0.5 }}>
-                          {format_stripe_subscription_interval(product.currentPrice?.interval, product.currentPrice?.interval_count)}
-                        </Typography>
-                      )}
-                    </Typography>
-                  </Box>
-                }
-              />
-            </Grid>
-          )
-        })}
-
-        <Grid item>
-          <Button
-            variant="contained"
-            onClick={handleContinueToPayment}
-            disabled={selectedProducts.length === 0}
-            sx={{ mt: 2 }}
-          >
-            Continue to Payment
-          </Button>
-        </Grid>
-      </Grid>
-    )
-  }
-
-  if (error) {
-    return (
-      <Typography color="error">
-        {error}
-      </Typography>
-    )
-  }
-  if (value) {
-    return (
-      <Grid container alignItems="center" wrap="nowrap">
-        <CheckCircleOutline color="success" />
-
-        <Typography sx={{ ml: 1, fontSize: 20 }}>
-          {field.options?.chargeImmediately ? 'Your purchase was successful' : "Your payment details have been saved!"}
-        </Typography>
-      </Grid>
-    )
-  }
-  if (!(clientSecret && stripePromise)) return <LinearProgress />
-  if (isCheckout && stripePromise) return (
-    <EmbeddedCheckoutProvider stripe={stripePromise}
-      options={{ 
-        clientSecret, 
-        onComplete: () => onChange(answertext || 'Completed checkout', field.id),        
-      }}
-    >
-      <EmbeddedCheckout />
-    </EmbeddedCheckoutProvider>
-  )
-  return (
-    <Elements stripe={stripePromise} options={{
-      clientSecret,
-    }}>
-      <StripeForm businessName={businessName} onSuccess={() => onChange(answertext || 'Saved card details', field.id)} 
-        cost={cost}
-        field={field}
-      />
-    </Elements>
-  )
-}
-
-const StripeForm = ({ businessName, onSuccess, field, cost } : { businessName: string, onSuccess: () => void, field: FormField, cost: number }) => {
-  const stripe = useStripe();
-  const elements = useElements()
-
-  const [ready, setReady] = useState(false)
-  const [errorMessage, setErrorMessage] = useState('');
-
-  const handleSubmit = async (event: any) => {
-    // We don't want to let default form submission happen here,
-    // which would refresh the page.
-    event?.preventDefault();
 
-    if (!stripe || !elements) {
-      // Stripe.js hasn't yet loaded.
-      // Make sure to disable form submission until Stripe.js has loaded.
-      return null;
-    }
-
-    const {error} = await (field.options?.chargeImmediately ? stripe.confirmPayment : stripe.confirmSetup)({
-      //`Elements` instance that was used to create the Payment Element
-      elements,
-      confirmParams: { 
-        return_url: window.location.href, 
-      },
-      redirect: 'if_required', //  ensures the redirect url won't be used, unless the Bank redirect payment type is enabled (it's not, just card)
-    });
-
-    if (error) {
-      // This point will only be reached if there is an immediate error when
-      // confirming the payment. Show error to your customer (for example, payment
-      // details incomplete)
-      setErrorMessage(error?.message ?? '');
-    } else {
-      onSuccess()
-      // Your customer will be redirected to your `return_url`. For some payment
-      // methods like iDEAL, your customer will be redirected to an intermediate
-      // site first to authorize the payment, then redirected to the `return_url`.
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <PaymentElement onReady={() => setReady(true)} 
-        options={{
-          business: { name: businessName },
-        }}
-      />
-      <Button variant="contained" color="primary" type="submit" sx={{ mt: 1 }}
-        disabled={!(stripe && ready)}
-      >
-        {field.options?.chargeImmediately ? 'Make Payment' : 'Save Payment Details'}
-      </Button>
-
-      {cost > 0 && 
-        <Typography sx={{ mt: 0.5 }}>
-        {
-          field.options?.customPriceMessage
-            ? field.options.customPriceMessage.replaceAll('{{PRICE}}', `$${(cost / 100).toFixed(2)}`)
-            : `You will be charged $${(cost / 100).toFixed(2)} ${field.options?.chargeImmediately ? '' : 'on form submission'}`
-        }
-        </Typography>
-      }
-
-      {/* Show error message to your customers */}
-      {errorMessage && 
-        <Typography color="error" sx={{ mt: 0.5 }}>
-          {errorMessage}
-        </Typography>
-      }
-    </form>
-  )
-}
+// StripeInput is shared between v1 and v2 forms
+// Both versions use the same implementation from inputs.tsx to ensure consistent behavior
+// and avoid code duplication. Re-exporting here maintains the pattern where forms.v2.tsx
+// only imports from inputs.v2.tsx
+export { StripeInput } from './inputs'
 
 export const Progress = ({ numerator, denominator, style, color } : { numerator: number, denominator: number, color?: string } & Styled) => (
   <Box sx={{ display: 'flex', alignItems: 'center', ...style }}>
@@ -2083,310 +1754,20 @@ export const DropdownInput = ({ field, value, onChange }: FormInputProps<'Dropdo
   )
 }
 
-const choicesForDatabase: {
-  [index: string]: {
-    done: boolean,
-    records: DatabaseRecord[],
-    lastId?: string,
-  } | {
-    done: undefined,
-    records: undefined,
-    lastId?: string,
-  }
-} = {}
-const preventRefetch: Record<string, boolean> = {}
-
-const LOAD_CHOICES_LIMIT = 500
-const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
-  const session = useResolvedSession()
-  const [renderCount, setRenderCount] = useState(0)
-
-  // todo: make searchable, don't load all
-  useEffect(() => {
-    if (choicesForDatabase[databaseId]?.done) return
-    if (renderCount > 100) return // limit to 50000 entries / prevent infinite looping
-    const choices = choicesForDatabase[databaseId]?.records ?? []
-    const lastId = choicesForDatabase[databaseId]?.lastId
-
-    if (preventRefetch[databaseId + field.id + lastId]) return
-    preventRefetch[databaseId + field.id + lastId] = true
-
-    session.api.form_fields.load_choices_from_database({
-      fieldId: field.id,
-      lastId,
-      limit: LOAD_CHOICES_LIMIT,
-      databaseId, // overrides fieldId, supports using Database question in Table Input
-    })
-    .then(({ choices: newChoices }) => {
-      choicesForDatabase[databaseId] = {
-        lastId: newChoices?.[newChoices.length - 1]?.id,
-        records: [...choices, ...newChoices]
-          .sort((c1, c2) => (
-            label_for_database_record(field, c1)
-            .localeCompare(label_for_database_record(field, c2))
-          )
-        ),
-        done: newChoices.length < LOAD_CHOICES_LIMIT, 
-      } 
-      setRenderCount(r => r + 1)
-    })
-    .catch(err => {
-      console.error(err)
-      preventRefetch[databaseId + field.id + lastId] = false
-    })
-  }, [session, field, databaseId, renderCount])
-
-  const addChoice = useCallback((record: DatabaseRecord) => {
-    if (!choicesForDatabase[databaseId]) {
-      choicesForDatabase[databaseId] = { 
-        done: false,
-        records: [],
-      }
-    }
-    choicesForDatabase[databaseId].records!.push(record)
-  }, [choicesForDatabase, databaseId])
-
-  return {
-    addChoice,
-    doneLoading: choicesForDatabase[databaseId]?.done ?? false,
-    choices: [
-      ...choicesForDatabase[databaseId]?.records ?? [],
-      ...(otherAnswers || []).map(v => ({
-        id: v.text,
-        databaseId,
-        values: [{ label: field.options?.databaseLabel || '', type: 'Text', value: v.text }],
-      }) as Pick<DatabaseRecord, 'id' | 'values' | 'databaseId'>)
-    ],
-    renderCount,
-  }
-}
-
-
-const label_for_database_record = (field: FormField, record?: Pick<DatabaseRecord, 'values'>) => {
-  if (!record) return ''
-
-  const addedLabels = (
-    (field.options?.databaseLabels || [])
-    .map(l => record.values.find(v => v.label === l)?.value?.toString())
-    .filter(v => v?.trim())
-  ) as string[]
-
-  return (
-    (record.values.find(v => v.label === field.options?.databaseLabel)?.value?.toString() ?? '')
-    + (
-      addedLabels.length
-        ? ` (${addedLabels.join(', ')})`
-        : ''
-    ) 
-  )
-}
-
-const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) => {
-  try { 
-    const existing = (
-      (_value || [])
-      .filter(v => typeof v === 'string' || v.recordId === v.text)
-      .map(v => typeof v === 'string' ? { databaseId: '', recordId: v, text: v } : v)
-    )
-    if (typing) {
-      existing.push({ text: typing, databaseId: '', recordId: typing })
-    }
-
-    return existing
-  } catch(err) { console.error(err) }
-
-  return []
-}
+// DatabaseSelectInput logic is shared with inputs.tsx to avoid duplication
+// Import the interface and component from the shared implementation
+import { AddToDatabaseProps as AddToDatabasePropsImported, DatabaseSelectInput as SharedDatabaseSelectInput } from './inputs'
 
-export interface AddToDatabaseProps {
-  databaseId: string,
-  onAdd: (record: DatabaseRecord) => void
-}
+// Re-export the interface for external use
+export type AddToDatabaseProps = AddToDatabasePropsImported
 
-export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onChange, onDatabaseSelect, responses, size, disabled, enduser }: FormInputProps<'Database Select'> & {
+// Wrap the shared DatabaseSelectInput component with v2-specific props
+export const DatabaseSelectInput = (props: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
   AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
 }) => {
-  const [typing, setTyping] = useState('')
-  const { addChoice, choices, doneLoading } = useDatabaseChoices({ 
-    databaseId: field.options?.databaseId,
-    field,
-    otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
-  })
-
-  const value = React.useMemo(() => {
-    try {
-      // if the value is a string (some single answer that was save), make sure we coerce to array
-      const __value = typeof _value === 'string' ? [_value] : _value
-      return (
-        (__value?.map(v => 
-          choices.find(c => 
-            c.id === v.recordId || (typeof v === 'string' && label_for_database_record(field, c) === v)
-          )
-        )?.filter(v => v!) ?? []) as DatabaseRecord[]
-      )
-    } catch(err) {
-      console.error('Error resolving database answers for _value', err)
-      return []
-    }
-  }, [_value, choices, field])
-
-  const filterResponse = useMemo(() => (
-    field.options?.databaseFilter?.fieldId
-      ? responses.find(r => r.fieldId === field.options?.databaseFilter?.fieldId)?.answer?.value
-      : undefined
-  ), [responses, field.options?.databaseFilter])
-
-  // State filtering logic similar to Insurance component
-  const addressQuestion = useMemo(() => responses?.find(r => {
-    if (r.answer.type !== 'Address') return false
-    if (r.field.intakeField !== 'Address') return false
-
-    // make sure state is actually defined (in case of multiple address questions, where 1+ are blank)
-    if (!r.answer.value?.state) return false
-
-    return true
-  }), [responses])
-
-  const state = useMemo(() => (
-    field.options?.filterByEnduserState
-      ? ((addressQuestion?.answer?.type === 'Address' ? addressQuestion?.answer?.value?.state : undefined) || enduser?.state)
-      : undefined
-  ), [enduser?.state, addressQuestion, field.options?.filterByEnduserState])
-
-  const filteredChoicesWithPotentialDuplicates = useMemo(() => {
-    if (!choices) return []
-    if (!filterResponse) return choices
-    if (!field?.options?.databaseFilter?.databaseLabel)
-    if (!value || value.length === 0) return choices
-
-    return (
-      choices
-      .filter(c => {
-        const v = c.values.find(_v => _v.label === field.options?.databaseFilter?.databaseLabel)?.value
-        if (!v) return true
-
-        // use .text on r values to handle Database Select types as filter source (in addition to basic text and list of text)
-
-        if (typeof v === 'object') {
-          return !!(
-            Object.values(v).find(oVal => (
-              typeof oVal === 'string' || typeof oVal === 'number'
-                ? (
-                  Array.isArray(filterResponse)
-                    ? (filterResponse as any[]).find(r => r === oVal.toString() || (typeof r === 'object' && r.text === oVal))
-                : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
-                    ? filterResponse.toString() === oVal.toString()
-                    : false
-                )
-                : false
-            ))
-          )
-        }
-
-        if (typeof v === 'string' || typeof v === 'number') {
-          return !!(
-            Array.isArray(filterResponse)
-              ? (filterResponse as any[]).find(r => r === v.toString() || (typeof r === 'object' && r.text === v))
-          : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
-              ? filterResponse.toString() === v.toString()
-          : (typeof filterResponse === 'object' && (filterResponse as Address).city === v.toString()) ? true
-          : (typeof filterResponse === 'object' && (filterResponse as Address).state === v.toString()) ? true
-          : (typeof filterResponse === 'object' && (filterResponse as Address).zipCode === v.toString()) ? true
-              : false
-          )
-        }
-
-        return false
-      })
-    )
-  }, [choices, filterResponse, field.options?.databaseFilter, value])
-
-  // Apply state filtering as a secondary filter (doesn't modify existing logic)
-  const stateFilteredChoices = useMemo(() => {
-    if (!field.options?.filterByEnduserState || !state) {
-      return filteredChoicesWithPotentialDuplicates
-    }
-
-    return filteredChoicesWithPotentialDuplicates.filter(c => {
-      const recordState = c.values.find(v => v.label?.trim()?.toLowerCase() === 'state')?.value?.toString() || ''
-      return !recordState || recordState === state
-    })
-  }, [filteredChoicesWithPotentialDuplicates, field.options?.filterByEnduserState, state])
-
-  const filteredChoices = useMemo(() => {
-    const filtered = []
-
-    const uniques = new Set<string>([])
-    for (const c of stateFilteredChoices) {
-      const text = label_for_database_record(field, c)
-      if (uniques.has(text)) continue // duplicate found
-
-      uniques.add(text)
-      filtered.push(c)
-    }
-
-    return filtered
-  }, [field, stateFilteredChoices])
-
-  if (!doneLoading) return <LinearProgress />
-  return (
-    <>
-    <Autocomplete id={field.id} freeSolo={false} size={size}
-      componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
-      options={filteredChoices} multiple={true}
-      getOptionLabel={o => (
-        Array.isArray(o) // edge case
-          ? ''
-          : label_for_database_record(field, o)
-      )}
-      value={value}
-      disabled={disabled}
-      onChange={(_, v) => {
-        if (v.length && onDatabaseSelect) {
-          onDatabaseSelect(
-            field.options?.radio
-              ? [v[v.length - 1]] // if radio, only last selected
-              : v
-          )
-        }
-        return onChange(
-          (
-            !field.options?.radio
-              ? v.map(_v => ({
-                  databaseId: field.options?.databaseId!,
-                  recordId: _v.id,
-                  text: label_for_database_record(field, _v),
-                }))
-              : [{
-                databaseId: field.options?.databaseId!,
-                recordId: v[v.length -1]?.id ?? '',
-                text: label_for_database_record(field, v[v.length - 1]),
-              }]
-          ),
-          field.id,
-        )
-      }}
-      inputValue={typing}
-      onInputChange={(e, v) => e && setTyping(v)}
-      renderInput={params => <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} />}
-      // use custom Chip to ensure very long entries break properly (whitespace: normal)
-      renderTags={(value, getTagProps) =>
-        value.map((value, index) => (
-          <Chip
-            label={<Typography style={{whiteSpace: 'normal'}}>{Array.isArray(value) ? '' : label_for_database_record(field, value)}</Typography>}
-            {...getTagProps({ index })}
-            sx={{height:"100%", py: 0.5 }}
-          />
-        ))
-      }
-    />
-
-    {AddToDatabase && field?.options?.allowAddToDatabase && (
-      <AddToDatabase databaseId={field.options?.databaseId!} onAdd={addChoice} />
-    )}
-    </>
-  )
+  // Pass all props plus v2-specific defaultInputProps to the shared component
+  return <SharedDatabaseSelectInput {...props} inputProps={defaultInputProps} />
 }
 
 type DisplayTermsResult = { displayTermsList: { term: string[] } }
@@ -3107,7 +2488,7 @@ export const contact_is_valid = (e: Partial<Enduser>) => {
   }
 }
 
-export const RelatedContactsInput = ({ field, value: _value, onChange, ...props }: FormInputProps<'Related Contacts'>) => {
+export const RelatedContactsInput = ({ field, value: _value, onChange, error: parentError, ...props }: FormInputProps<'Related Contacts'>) => {
   // safeguard against any rogue values like empty string
   const value = Array.isArray(_value) ? _value : []
 
@@ -3182,7 +2563,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, ...props
           <Grid item xs={4}>
             <TextField label="Phone Number" size="small" fullWidth
               InputProps={defaultInputProps}
-              value={phone} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, phone: e.target.value } : v), field.id)}
+              value={phone} onChange={e => onChange(value.map((v, i) => i === editing ? { ...v, phone: e.target.value.trim() } : v), field.id)}
             />
           </Grid>
           }
@@ -3236,7 +2617,7 @@ export const RelatedContactsInput = ({ field, value: _value, onChange, ...props
         }
 
         <Grid item sx={{ my: 0.75 }}>
-          <Button variant="outlined" onClick={() => setEditing(-1)} size="small">
+          <Button variant="outlined" onClick={() => setEditing(-1)} size="small" disabled={!!errorMessage || !!parentError}>
             Save Contact
           </Button>
         </Grid>