@tellescope/react-components 1.231.0 → 1.232.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.231.0",
+  "version": "1.232.1",
   "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.231.0",
-    "@tellescope/sdk": "1.231.0",
-    "@tellescope/types-client": "1.231.0",
-    "@tellescope/types-models": "1.231.0",
-    "@tellescope/types-utilities": "1.231.0",
-    "@tellescope/utilities": "1.231.0",
-    "@tellescope/validation": "1.231.0",
+    "@tellescope/constants": "1.232.1",
+    "@tellescope/sdk": "1.232.1",
+    "@tellescope/types-client": "1.232.1",
+    "@tellescope/types-models": "1.232.1",
+    "@tellescope/types-utilities": "1.232.1",
+    "@tellescope/utilities": "1.232.1",
+    "@tellescope/validation": "1.232.1",
     "@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": "55bd4ea4e0ef23c03fee4eeff595f42bc501a0f9",
+  "gitHead": "1cbb2f579785066cd64d72b4bfdd2c788e192391",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -316,7 +316,7 @@ export const QuestionForField = ({
           <AppointmentBooking formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
         )
         : field.type === 'Stripe' ? (
-          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
+          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />
         )
         : field.type === 'Chargebee' ? (
           <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />

package/src/Forms/forms.v2.tsx

@@ -310,7 +310,7 @@ export const QuestionForField = ({
           <AppointmentBooking formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
         )
         : field.type === 'Stripe' ? (
-          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
+          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} responses={responses} enduser={enduser} />
         )
         : field.type === 'Chargebee' ? (
           <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />

package/src/Forms/hooks.tsx

@@ -549,6 +549,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
   const gaEventRef = useRef({} as Record<string, boolean>)
   const gtmEventRef = useRef({} as Record<string, boolean>)
+  const fieldViewCacheRef = useRef({} as Record<string, number>) // fieldId -> timestamp
 
   let goBackURL = ''
   try {
@@ -606,16 +607,43 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (gtmEventRef.current[activeField.value.id]) return
     gtmEventRef.current[activeField.value.id] = true
 
-    emit_gtm_event({ 
-      event: 'form_progress', 
-      formId: activeField.value.formId, 
-      fieldId: activeField.value.id, 
+    emit_gtm_event({
+      event: 'form_progress',
+      formId: activeField.value.formId,
+      fieldId: activeField.value.id,
       title: activeField.value.title,
       previousTitle: prevFieldStackRef.current[prevFieldStackRef.current.length - 1]?.value?.title || '',
-      status: '' 
+      status: ''
     })
   }, [activeField])
 
+  // Track field views for analytics
+  useEffect(() => {
+    if (!accessCode && !formResponseId) return // Need either accessCode or formResponseId
+
+    const fieldId = activeField.value.id
+    const now = Date.now()
+    const lastLogged = fieldViewCacheRef.current[fieldId]
+
+    // Only log if field hasn't been logged before, or more than 60 seconds have passed
+    const shouldLog = !lastLogged || (now - lastLogged > 60000) // 60 seconds
+
+    if (shouldLog) {
+      fieldViewCacheRef.current[fieldId] = now
+
+      // Call API to log the view (fire and forget, don't block UI)
+      session.api.form_responses.save_field_response({
+        accessCode,
+        formResponseId,
+        viewOnly: true,
+        fieldId,
+      }).catch(err => {
+        // Silent fail - view tracking is non-critical
+        console.debug('Failed to log field view:', err)
+      })
+    }
+  }, [activeField, accessCode, formResponseId, session])
+
   // placeholders for initial fields, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fieldInitRef = useRef('')
   const initializeFields = useCallback(() => (

package/src/Forms/inputs.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import axios from "axios"
-import { Autocomplete, Box, Button, Checkbox, Chip, Collapse, Divider, FormControl, FormControlLabel, FormLabel, Grid, IconButton as MuiIconButton, InputLabel, MenuItem, Radio, RadioGroup, Select, SxProps, TextField, TextFieldProps, Typography } from "@mui/material"
+import { Autocomplete, Box, Button, Checkbox, Chip, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormLabel, Grid, IconButton as MuiIconButton, InputLabel, MenuItem, Radio, 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 { 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 { VALID_STATES, emailValidator, phoneValidator } from "@tellescope/validation"
 import Slider from '@mui/material/Slider';
@@ -26,6 +26,16 @@ import { loadStripe } from '@stripe/stripe-js';
 import { CheckCircleOutline, Delete, Edit, ExpandMore } from "@mui/icons-material"
 import { WYSIWYG } from "./wysiwyg"
 
+// Debounce hook for search functionality
+const useDebounce = <T,>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay)
+    return () => clearTimeout(handler)
+  }, [value, delay])
+  return debouncedValue
+}
+
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
     <Grid item>
@@ -1703,7 +1713,18 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
   )
 }
 
-export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }: FormInputProps<'Stripe'> & {
+// Helper to emit GTM purchase event for Stripe payments (single source of truth)
+const emitStripePurchaseEvent = (field: FormField, cost: number) => {
+  emit_gtm_event({
+    event: 'form_purchase',
+    productIds: field.options?.productIds || [],
+    fieldId: field.id,
+    value: cost / 100, // Convert cents to dollars
+    currency: 'USD',
+  })
+}
+
+export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId, form, responses, enduser }: FormInputProps<'Stripe'> & {
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
 }) => {
   const session = useResolvedSession()
@@ -1718,6 +1739,38 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
   const [availableProducts, setAvailableProducts] = useState<any[]>([])
   const [loadingProducts, setLoadingProducts] = useState(false)
 
+  // Compute visible products based on conditional logic
+  const visibleProducts = useMemo(() => {
+    if (!showProductSelection || availableProducts.length === 0) {
+      return availableProducts
+    }
+
+    return availableProducts.filter(product => {
+      // Find condition for this product
+      const productCondition = field.options?.productConditions?.find(c => c.productId === product._id)
+
+      // If no condition defined, show by default
+      if (!productCondition?.showCondition || object_is_empty(productCondition.showCondition)) {
+        return true
+      }
+
+      // Evaluate condition against current form responses
+      return responses_satisfy_conditions(responses || [], productCondition.showCondition, {
+        dateOfBirth: enduser?.dateOfBirth,
+        gender: enduser?.gender,
+        state: enduser?.state,
+        form,
+        activeResponses: responses,
+      })
+    })
+  }, [availableProducts, field.options?.productConditions, responses, showProductSelection, enduser, form])
+
+  // Automatically deselect products that become hidden
+  useEffect(() => {
+    const visibleProductIds = visibleProducts.map(p => p._id)
+    setSelectedProducts(prev => prev.filter(id => visibleProductIds.includes(id)))
+  }, [visibleProducts])
+
   const fetchRef = useRef(false)
   useEffect(() => {
     if (fetchRef.current) return
@@ -1784,6 +1837,16 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
       : 0 // Will be calculated by existing Stripe flow when not in selection mode
   )
 
+  // Emit GTM purchase event once when success screen is displayed
+  const purchaseEmittedRef = useRef(false)
+  useEffect(() => {
+    // Only emit for actual purchases (chargeImmediately), not for saving card details
+    if (value && field.options?.chargeImmediately && !purchaseEmittedRef.current) {
+      emitStripePurchaseEvent(field, cost)
+      purchaseEmittedRef.current = true
+    }
+  }, [value, field, cost])
+
   // Handle product selection step
   if (showProductSelection) {
     if (error) {
@@ -1815,6 +1878,20 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
         </Grid>
       )
     }
+
+    // Check if all products are filtered out by conditional logic
+    if (visibleProducts.length === 0) {
+      return (
+        <Grid container direction="column" spacing={2} alignItems="center">
+          <Grid item>
+            <Typography color="textSecondary">
+              No products are available based on your previous answers.
+            </Typography>
+          </Grid>
+        </Grid>
+      )
+    }
+
     const isSingleSelection = field.options?.radio === true
 
     const handleProductSelection = (productId: string) => {
@@ -1862,7 +1939,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }
           <Typography variant="h6">Select Product{isSingleSelection ? '' : 's'}</Typography>
         </Grid>
 
-        {availableProducts.map((product) => {
+        {visibleProducts.map((product) => {
           // Use real-time Stripe pricing if available, fallback to Tellescope pricing
           const price = product.currentPrice || product.cost
           const priceAmount = price?.amount || 0
@@ -2124,48 +2201,126 @@ const choicesForDatabase: {
 const preventRefetch: Record<string, boolean> = {}
 
 const LOAD_CHOICES_LIMIT = 500
-const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
+const MIN_SEARCH_CHARS = 3
+const SEARCH_DEBOUNCE_MS = 300
+
+const useDatabaseChoices = ({
+  databaseId='',
+  field,
+  otherAnswers,
+  searchQuery = ''
+} : {
+  databaseId?: string,
+  field: FormField,
+  otherAnswers?: DatabaseSelectResponse[],
+  searchQuery?: string
+}) => {
   const session = useResolvedSession()
-  const [renderCount, setRenderCount] = useState(0)
+  const [isSearching, setIsSearching] = useState(false)
+  const [searchResults, setSearchResults] = useState<DatabaseRecord[]>([])
+  const [initialLoadComplete, setInitialLoadComplete] = useState(false)
+  const debouncedSearch = useDebounce(searchQuery, SEARCH_DEBOUNCE_MS)
 
-  // todo: make searchable, don't load all
+  // Load initial page on mount (only once, not recursively)
+  const initialLoadRef = useRef(false)
   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 (initialLoadRef.current) return
+    if (choicesForDatabase[databaseId]?.done || choicesForDatabase[databaseId]?.records?.length) {
+      setInitialLoadComplete(true)
+      return
+    }
 
-    if (preventRefetch[databaseId + field.id + lastId]) return
-    preventRefetch[databaseId + field.id + lastId] = true
+    initialLoadRef.current = true
+    preventRefetch[databaseId + field.id] = 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) => (
+        records: newChoices.sort((c1, c2) => (
+          label_for_database_record(field, c1)
+          .localeCompare(label_for_database_record(field, c2))
+        )),
+        done: true, // Don't load more pages automatically
+      }
+      setInitialLoadComplete(true)
+    })
+    .catch(err => {
+      console.error(err)
+      preventRefetch[databaseId + field.id] = false
+      setInitialLoadComplete(true) // Mark as complete even on error to avoid infinite loading
+    })
+  }, [session, field, databaseId])
+
+  // Handle debounced search
+  const searchRef = useRef(debouncedSearch)
+  useEffect(() => {
+    const trimmed = debouncedSearch.trim()
+
+    // If search is cleared, return to initial results
+    if (!trimmed) {
+      setSearchResults([])
+      setIsSearching(false)
+      searchRef.current = debouncedSearch
+      return
+    }
+
+    // Only search if meets minimum character requirement
+    if (trimmed.length < MIN_SEARCH_CHARS) {
+      setSearchResults([])
+      setIsSearching(false)
+      return
+    }
+
+    // Avoid duplicate searches
+    if (searchRef.current === debouncedSearch) return
+    searchRef.current = debouncedSearch
+
+    setIsSearching(true)
+    session.api.form_fields.load_choices_from_database({
+      fieldId: field.id,
+      limit: LOAD_CHOICES_LIMIT,
+      databaseId,
+      search: trimmed,
+    })
+    .then(({ choices: newChoices }) => {
+      // Add search results to the same cache as initial load
+      // This ensures selected search results persist even after search is cleared
+      const existingRecords = choicesForDatabase[databaseId]?.records ?? []
+      const existingIds = new Set(existingRecords.map(r => r.id))
+
+      const uniqueNewChoices = newChoices.filter(c => !existingIds.has(c.id))
+
+      if (uniqueNewChoices.length > 0) {
+        choicesForDatabase[databaseId] = {
+          ...choicesForDatabase[databaseId],
+          records: [...existingRecords, ...uniqueNewChoices].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)
+          )),
+          done: true, // Mark as done since we're not paginating search results
+        }
+      }
+
+      setSearchResults(newChoices.sort((c1, c2) => (
+        label_for_database_record(field, c1)
+        .localeCompare(label_for_database_record(field, c2))
+      )))
+      setIsSearching(false)
     })
     .catch(err => {
       console.error(err)
-      preventRefetch[databaseId + field.id + lastId] = false
+      setIsSearching(false)
     })
-  }, [session, field, databaseId, renderCount])
+  }, [session, field, databaseId, debouncedSearch])
 
   const addChoice = useCallback((record: DatabaseRecord) => {
     if (!choicesForDatabase[databaseId]) {
-      choicesForDatabase[databaseId] = { 
+      choicesForDatabase[databaseId] = {
         done: false,
         records: [],
       }
@@ -2173,18 +2328,24 @@ const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseI
     choicesForDatabase[databaseId].records!.push(record)
   }, [choicesForDatabase, databaseId])
 
+  // Use search results if searching, otherwise use cached initial results
+  const activeChoices = debouncedSearch.trim().length >= MIN_SEARCH_CHARS
+    ? searchResults
+    : (choicesForDatabase[databaseId]?.records ?? [])
+
   return {
     addChoice,
-    doneLoading: choicesForDatabase[databaseId]?.done ?? false,
+    doneLoading: initialLoadComplete,
+    isSearching,
     choices: [
-      ...choicesForDatabase[databaseId]?.records ?? [],
+      ...activeChoices,
       ...(otherAnswers || []).map(v => ({
         id: v.text,
         databaseId,
         values: [{ label: field.options?.databaseLabel || '', type: 'Text', value: v.text }],
       }) as Pick<DatabaseRecord, 'id' | 'values' | 'databaseId'>)
     ],
-    renderCount,
+    minSearchChars: MIN_SEARCH_CHARS,
   }
 }
 
@@ -2230,15 +2391,18 @@ export interface AddToDatabaseProps {
   onAdd: (record: DatabaseRecord) => void
 }
 
-export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onChange, onDatabaseSelect, responses, size, disabled, enduser }: FormInputProps<'Database Select'> & {
+export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onChange, onDatabaseSelect, responses, size, disabled, enduser, inputProps }: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
   AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
+  inputProps?: { sx: SxProps },
 }) => {
   const [typing, setTyping] = useState('')
-  const { addChoice, choices, doneLoading } = useDatabaseChoices({ 
+  const [open, setOpen] = useState(false)
+  const { addChoice, choices, doneLoading, isSearching, minSearchChars } = useDatabaseChoices({
     databaseId: field.options?.databaseId,
     field,
     otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
+    searchQuery: typing,
   })
 
   const value = React.useMemo(() => {
@@ -2246,8 +2410,8 @@ export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onCha
       // 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 => 
+        (__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[]
@@ -2356,12 +2520,21 @@ export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onCha
     return filtered
   }, [field, stateFilteredChoices])
 
+  // Show placeholder when typing but below minimum search characters
+  const charsNeeded = typing.trim().length > 0 && typing.trim().length < minSearchChars
+    ? minSearchChars - typing.trim().length
+    : 0
+
   if (!doneLoading) return <LinearProgress />
   return (
     <>
     <Autocomplete id={field.id} freeSolo={false} size={size}
       componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
       options={filteredChoices} multiple={true}
+      loading={isSearching}
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
       getOptionLabel={o => (
         Array.isArray(o) // edge case
           ? ''
@@ -2396,7 +2569,23 @@ export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onCha
       }}
       inputValue={typing}
       onInputChange={(e, v) => e && setTyping(v)}
-      renderInput={params => <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} />}
+      renderInput={params => (
+        <TextField
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            sx: (inputProps || defaultInputProps).sx,
+            endAdornment: (
+              <>
+                {isSearching ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+          }}
+          placeholder={charsNeeded > 0 ? `Type ${charsNeeded} more character${charsNeeded > 1 ? 's' : ''} to search...` : undefined}
+          helperText={charsNeeded > 0 ? `Type ${charsNeeded} more character${charsNeeded > 1 ? 's' : ''} to search` : undefined}
+        />
+      )}
       // use custom Chip to ensure very long entries break properly (whitespace: normal)
       renderTags={(value, getTagProps) =>
         value.map((value, index) => (
@@ -3126,7 +3315,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 : []
 
@@ -3201,7 +3390,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>
           }
@@ -3255,7 +3444,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>